Add @media queries support

[dannycolin]

This feature is to discuss about the possibility of adding CSS Media Queries support in Rasi Theming. Feel free to suggest, critic and expose other use cases you can think about. I'll update the use cases section accordingly.

Version

1.5.1

Configuration

https://gist.github.com/dannycolin/fe02588d5bf65bbade2573a3a439ab31

Launch Command

rofi -show drun

Steps to reproduce

• add the following code to my theme config in ~/.config/rofi/themes/

inputbar {
  orientation: vertical;
}

@media (min-width: 900px) {
  inputbar {
    orientation: horizontal;
  }
}

• Got a syntax error

What behavior you see

At the moment, we can't change the theme appearance based on the screen resolution. I got a syntax error since it's not yet implemented.

What behavior you expect to see

I would expect the possibility to change theme depending on screen resolution a media query (see the list below) based on the CSS Media Queries syntax.

Media queries

prefers-color-scheme

Change to dark/light theme based on OS and/or user config settings

* {
  --background-color: black;
)
@media (prefers-color-scheme: dark) {
  * {
    --background-color: white;
  }
}

{min, max}-width, {min, max}-height, portrait

Change CSS according to screen size and orientation

@media (min-width 1920px) { }
@media (portrait: landscape) { }

mode: mode-name

Give the ability to apply different CSS rules depending on the active mode

@media (mode: drun) {
  window {
    location: west;
    width: 20%;
  }
}
@media (mode: window) {
  window {
    location: center;
  }
  // hide window title and only show icons to reproduce the effect of Alt + Tab on some Desktop Env
}

[dannycolin]

@DaveDavenport ah my bad I didn't copy/paste the whole text from vim :). If you need more informations on that feature request let me know.

[DaveDavenport]

Interesting use-case. Can see the use of this. Not sure how feasible this is in the current architecture, will need to investigate.

[DaveDavenport]

Initial implementation on separate branch

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.