/* ----------------------------------------------------------------------------- * Keyframes * -------------------------------------------------------------------------- */ @keyframes blink-warning { 70% { color: @light; } to { color: @light; background-color: @warning; } } @keyframes blink-critical { 70% { color: @light; } to { color: @light; background-color: @critical; } } /* ----------------------------------------------------------------------------- * Styles * -------------------------------------------------------------------------- */ /* COLORS */ /* Gruvbox */ @define-color light #ebdbb2; @define-color dark #1d2021; @define-color warning #fabd2f; @define-color critical #fb4934; @define-color red #fb4934; @define-color orange #fe8019; @define-color green #b8bb26; @define-color yellow #fabd2f; @define-color blue #83a598; @define-color purple #d3869b; @define-color teal #8ec07c; @define-color gray #928374; * { border: none; font-family: Inconsolata, Inconsolata Nerd Font, FiraCode Nerd Font Mono; font-weight: bold; font-size: 14pt; color: @light; border-radius: 20px; background: transparent; } /*-----module groups----*/ .modules-right { padding: 3px; background-color: @dark; margin: 0 5px 5px 0; border-radius: 10px; } .modules-center { padding: 3px; padding-right: 10px; background-color: @dark; margin: 0 0 5px 0; border-radius: 10px; } .modules-left { padding: 3px; margin: 0 0 5px 5px; background-color: @dark; border-radius: 10px; } /* All modules */ #battery, #clock, #cpu, #memory, #mode, #network, #pulseaudio, #temperature, #tray, #idle_inhibitor, #disk { background: transparent; color: @light; padding-left: 10px; padding-right: 10px; margin-left: 3px; } /* All module that should blink */ #mode #memory, #temperature, #battery { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* All critical modules */ #memory.critical, #cpu.critical, #temperature.critical, #battery.critical { color: @critical; } /* All critical modules that should blink */ #mode, #memory.critical, #temperature.critical, #battery.critical.discharging { animation-name: blink-critical; animation-duration: 2s; } /* Each warning */ #network.disconnected, #memory.warning, #cpu.warning, #temperature.warning, #battery.warning { color: @warning; } /* Each warning that should blink */ #battery.warning.discharging { animation-name: blink-warning; animation-duration: 3s; } /* Workspaces stuff */ #workspaces button { /*font-weight: bold;*/ padding-left: 4px; padding-right: 4px; color: @light; background: @dark; } #workspaces button.focused { border: 1px solid @orange; } #workspaces button.visible:not(.focused) { border: 1px solid @gray; } #workspaces button.urgent { color: @orange; }