Skip to content

CSS

Jump to bottom
Enrico Stemmer edited this page Jan 5, 2025 · 7 revisions

Test CSS

Use this css in a file with the --custom-css flag to see the different css classes

* {
    color: black;
}

.monitor {
    background: darkseagreen;
}

.monitor_active {
    border: var(--border-size) solid darkslategray;
}

.index {
    background: orange;
}

.workspace {
    background: aqua;
}

.workspace_special {
    border: var(--border-size) solid yellow;
}

.workspace_active {
    border: var(--border-size) solid purple;
}

.client-image {
    background: springgreen;
}

.client {
    background: green;
}

.client_active {
    border: var(--border-size) solid blue;
}


.launcher {
    background: pink;
}

.launcher-entry {
    background: greenyellow;
}

.launcher-list {
    background: blue;
}

.launcher-item {
    background: red;
}

.launcher-item-selected {
    background-color: aqua;
}

Class used in GUI

  • client-image

    .client-image {
  margin: 10px;
}

  • client + client_active

    client_active is the client that is currently focused / will be focused when exiting hyprswitch

    .client {
  font-size: 16px;
  font-weight: normal;

  border-radius: var(--border-radius);
  background-color: var(--bg-color);
  border: 3px solid var(--border-color);
}

.client:hover {
  background-color: var(--bg-color-hover);
}

.client_active {
  border: 3px solid var(--border-color-active);
}

  • workspace_frame + workspace_frame_special + workspace_active

    workspace_frame_special is added when workspaceId is < 0 (e.g., scratchpad)

    .workspace {
  font-size: 24px;
  font-weight: bold;

  border-radius: var(--border-radius);
  background-color: var(--bg-color);
  border: 3px solid var(--border-color);
}

.workspace:hover {
  background-color: var(--bg-color-hover);
}

.workspace_special {
  border: 3px solid rgba(0, 255, 0, 0.4);
}

.workspace_active {
  border: 3px solid var(--border-color-active);
}

  • monitor + monitor_active

    .monitor {
  opacity: 0.75;
  padding: 2px;

  border-radius: var(--border-radius);
  background-color: var(--bg-color);
  border: 4px solid var(--border-color);
}

.monitor:hover {
  background-color: var(--bg-color-hover);
}

.monitor_active {
  border: 3px solid var(--border-color-active);
}

  • index

    .index {
  margin: 3px;
  padding: 2px 4px;
  font-size: 18px;
  font-weight: bold;
  font-family: monospace;
  border-radius: var(--border-radius);
  background-color: var(--bg-color);
  border: 3px solid var(--index-border-color);
}

Default CSS

Changes to frequently, look at the following files: ./src/daemon/gui/defaults.css ./src/daemon/gui/windows/windows.css ./src/daemon/launcher/launcher.css

Examples

High Res: Use for high resolution monitors (increase font size, margins, etc.)

:root {
    --border-radius: 15px;
    --border-size: 4px;
}

.client-image {
    margin: 15px;
}

.index {
    margin: 10px;
    font-size: 25px;
}

.workspace {
    font-size: 35px;
}

.client {
    font-size: 25px;
}

Only clients: Don't show the workspace and monitor frames (use with --max-switch-offset=0)

.workspace {
    /* remove workspace name */
    font-size: 0;
    font-weight: lighter;

    background-color: transparent;
    border: unset;
}

.monitor {
    background-color: transparent;
    border: unset;
}

Blue: Use blue as the border and active border color

:root {
    --border-color-active: rgba(17, 170, 217, 0.9);
    --index-border-color:  rgba(17, 170, 217, 0.7);
}
Clone this wiki locally