/* * * Catppuccin Mocha palette * Maintainer: rubyowo * */ @define-color base #1e1e2e; @define-color mantle #181825; @define-color crust #11111b; @define-color text #cdd6f4; @define-color subtext0 #a6adc8; @define-color subtext1 #bac2de; @define-color surface0 #313244; @define-color surface1 #45475a; @define-color surface2 #585b70; @define-color overlay0 #6c7086; @define-color overlay1 #7f849c; @define-color overlay2 #9399b2; @define-color blue #89b4fa; @define-color lavender #b4befe; @define-color sapphire #74c7ec; @define-color sky #89dceb; @define-color teal #94e2d5; @define-color green #a6e3a1; @define-color yellow #f9e2af; @define-color peach #fab387; @define-color maroon #eba0ac; @define-color red #f38ba8; @define-color mauve #cba6f7; @define-color pink #f5c2e7; @define-color flamingo #f2cdcd; @define-color rosewater #f5e0dc; * { font-family: "Fira Code", "FontAwesome"; font-weight: bold; min-height: 0; /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */ font-size: 97%; font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"'; padding: 0.03125rem; } window#waybar { transition-property: background-color; transition-duration: 0.5s; background: transparent; /*border: 2px solid @overlay0;*/ /*background: @theme_base_color;*/ border-radius: 10px; } window#waybar.hidden { opacity: 0.2; } #waybar.empty #window { background: none; } /**************/ /* Workspaces */ /**************/ #workspaces { /* border-radius: 8px; */ padding: 0 3px 0 8px; margin: 5px 5px 5px 0; transition: all 0.2s ease; } /* non-empty workspaces */ #workspaces button { background-color: @base; border: none; border-radius: 0; color: @text; transition: all 0.2s ease; text-shadow: none; /* center the icon, no clue why this is necessary */ padding-left: 5px; padding-right: 10px; padding-top: 1px; box-shadow: inset 0 -1px #e3e3e3; } /* the first and last buttons should be rounded */ #workspaces button:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } #workspaces button:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } /* empty persistent workspaces */ #workspaces button.empty { background-color: @base; box-shadow: none; } #workspaces button:hover { /* transition-duration: .3s; */ color: @base; background-color: #7da6ff; box-shadow: inset 0 -1px #ffffff; /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ text-shadow: inherit; } /* non-empty persistent workspaces */ #workspaces button.persistent { background-color: #4c566a; } /* active or visible workspaces */ #workspaces button.active, #workspaces button.visible { /* background-color: #4c566a; */ color: @surface0; background-color: #7da6ff; /* box-shadow: inset 0 -4px #eceff4; */ } #workspaces button.urgent { color: #bf616a; } /**************/ #mode { background-color: #64727D; border-bottom: 3px solid #ffffff; } #clock, #custom-date, #custom-gpumode, #battery, #backlight, #cpu, #memory, #disk, #temperature, #network, #pulseaudio, #wireplumber, #mpris, #custom-media, #tray, #window, #custom-notification, #mpd { background-color: @base; border-radius: 8px; padding: 0 12px 0 12px; margin: 5px 5px 5px 0; } /* If workspaces is the leftmost module, omit left margin */ .modules-left>widget:first-child>#workspaces { margin-left: 0; } /* If workspaces is the rightmost module, omit right margin */ .modules-right>widget:last-child>#workspaces { margin-right: 0; } #window { color: @text } #clock { color: #eceff4; } #custom-date { color: #b48ead; } #battery { color: #ebcb8b; } #backlight { color: @teal } @keyframes blink { to { background-color: #ffffff; color: black; } } #battery.critical:not(.charging) { background-color: #bf616a; color: #ffffff; animation-name: blink; animation-duration: 0.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } label:focus { background-color: black; } #cpu { color: #bf616a; } #memory { color: #a3be8c; } /* #disk { background-color: #964B00; } */ #network { color: #5e81ac; } #network.disconnected { color: #81a1c1; } #network.linked { color: #bf616a; } #pulseaudio { color: @text; } #temperature { color: #d08770; } #temperature.critical { color: #bf616a; } #tray { color: @subtext0; } #tray>.passive { -gtk-icon-effect: dim; } #tray>.needs-attention { -gtk-icon-effect: highlight; background-color: #bf616a; }