@define-color text @foreground; @define-color background-alt @color1; @define-color selected @color1; @define-color hover @color1; @define-color urgent @color1; * { color: @text; all: unset; font-size: 14px; font-family: "FontAwesome,JetBrains Mono Nerd Font 10"; transition: 200ms; } /* Avoid 'annoying' backgroud */ .blank-window { background: transparent; } /* CONTROL CENTER ------------------------------------------------------------------------ */ .control-center { background: alpha(@background, .75); border-radius: 12px; border: 1px solid @selected; /* box-shadow: 0 2px 8px 0 @background;*/ margin: 18px; padding: 12px; } /* Notifications */ .control-center .notification-row .notification-background, .control-center .notification-row .notification-background .notification.critical { background-color: alpha(@background, .75); border-radius: 10px; margin: 4px 0px; padding: 4px; } .control-center .notification-row .notification-background .notification.critical { color: @urgent; } .control-center .notification-row .notification-background .notification .notification-content { margin: 4px; padding: 8px 6px 2px 2px; } .control-center .notification-row .notification-background .notification > *:last-child > * { min-height: 3.4em; } .control-center .notification-row .notification-background .notification > *:last-child > * .notification-action { background: @background-alt; color: @text; border-radius: 8px; margin: 6px; border: 2px solid transparent; } .control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:hover { color: @background; } .control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:active { background-color: @selected; color: @background; } /* Buttons */ .control-center .notification-row .notification-background .close-button { border: 1px solid transparent; background: transparent; border-radius: 6px; color: @selected; margin: 0px; padding: 4px; } .control-center .notification-row .notification-background .close-button:hover { background-color: @background; border: 1px solid @selected; } .control-center .notification-row .notification-background .close-button:active { background-color: @selected; color: @background; } progressbar, progress, trough { border-radius: 12px; } progressbar { background: red; } /* Notifications expanded-group */ .notification-group { margin: 2px 8px 2px 8px; } .notification-group-headers { font-weight: bold; font-size: 1.25rem; color: @text; letter-spacing: 2px; margin-bottom: 16px; } .notification-group-icon { color: @text; } .notification-group-collapse-button, .notification-group-close-all-button { background: transparent; margin: 4px; border: 2px solid transparent; border-radius: 8px; padding: 4px; } .notification-group-collapse-button:hover, .notification-group-close-all-button:hover { background: alpha(@text, .2); border: 2px solid @text; } /* WIDGETS --------------------------------------------------------------------------- */ /* Notification clear button */ .widget-title { font-size: 1.2em; margin: 2px; } .widget-title button { border-radius: 10px; padding: 4px 16px; border: 2px solid @selected; } .widget-title button:hover { background-color: alpha(@text, .2); border: 2px solid @selected; } .widget-title button:active { background-color: @selected; color: @background; } /* Do not disturb */ .widget-dnd { margin: 8px 2px; font-size: 1.2rem; } .widget-dnd > switch { font-size: initial; border-radius: 8px; border: 2px solid @selected; box-shadow: none; } .widget-dnd > switch:hover { background: alpha(@text, .2); } .widget-dnd > switch:checked { background: @selected; } .widget-dnd > switch:checked:hover { background: alpha(@selected, .8); } .widget-dnd > switch slider { background: @text; border-radius: 6px; } /* Buttons menu */ .widget-buttons-grid { font-size: x-large; padding: 6px 2px; margin: 6px; border-radius: 12px; background: alpha(@selected, .2); } .widget-buttons-grid>flowbox>flowboxchild>button { margin: 4px 10px; padding: 6px 12px; background: transparent; border-radius: 8px; border: 2px solid transparent; } .widget-buttons-grid>flowbox>flowboxchild>button:hover { background: alpha(@background-alt, .6); } /* Music player */ .widget-mpris { background: alpha(@selected, .2); border-radius: 16px; color: @text; padding: 6px; margin: 20px 6px; } .widget-mpris button { color: alpha(@text, .6); border-radius: 6px; } .widget-mpris button:hover { color: @text; } /* NOTE: Background need *opacity 1* otherwise will turn into the album art blurred */ .widget-mpris-player { background: @selected; padding: 6px 10px; margin: 10px; border-radius: 14px; } .widget-mpris-album-art { border-radius: 16px; } .widget-mpris-title { font-weight: 700; font-size: 1rem; } .widget-mpris-subtitle { font-weight: 500; font-size: 0.8rem; } /* Volume */ .widget-volume { background: @background-alt; color: @background; padding: 4px; margin: 6px; border-radius: 6px; }