waybar: fix GTK3 CSS variables, pin timezone, adjust screenshot keybind

- theme/colors.css: replace CSS custom properties (--var) with GTK3
  @define-color — GTK3 CSS parser rejects -- syntax, crashing waybar
- waybar/style.css, wofi/style.css, gtklock/style.css: update var(--x)
  references to @x to match
- waybar/config.jsonc: pin clock timezone to America/Vancouver
- niri/config.kdl: change Print to Mod+Print for screenshot keybind

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
funman300
2026-04-28 11:38:48 -07:00
parent d923cfb5cf
commit b0daea2a73
6 changed files with 55 additions and 56 deletions
+13 -13
View File
@@ -3,7 +3,7 @@
/* gtklock style - Tomorrow Night theme */ /* gtklock style - Tomorrow Night theme */
window { window {
background-color: var(--tn-bg); background-color: @tn-bg;
} }
#body { #body {
@@ -11,7 +11,7 @@ window {
} }
#clock-label { #clock-label {
color: var(--tn-fg); color: @tn-fg;
font-family: "JetBrainsMono Nerd Font"; font-family: "JetBrainsMono Nerd Font";
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
@@ -19,14 +19,14 @@ window {
} }
#date-label { #date-label {
color: var(--tn-fg-dim); color: @tn-fg-dim;
font-family: "JetBrainsMono Nerd Font"; font-family: "JetBrainsMono Nerd Font";
font-size: 16px; font-size: 16px;
margin-bottom: 24px; margin-bottom: 24px;
} }
#username-label { #username-label {
color: var(--tn-fg); color: @tn-fg;
font-family: "JetBrainsMono Nerd Font"; font-family: "JetBrainsMono Nerd Font";
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
@@ -34,10 +34,10 @@ window {
} }
#input-box { #input-box {
background-color: var(--tn-bg-alt); background-color: @tn-bg-alt;
border: 2px solid var(--tn-bg-high); border: 2px solid @tn-bg-high;
border-radius: 6px; border-radius: 6px;
color: var(--tn-fg); color: @tn-fg;
font-family: "JetBrainsMono Nerd Font"; font-family: "JetBrainsMono Nerd Font";
font-size: 14px; font-size: 14px;
padding: 8px 12px; padding: 8px 12px;
@@ -45,21 +45,21 @@ window {
} }
#input-box:focus { #input-box:focus {
border-color: var(--tn-blue); border-color: @tn-blue;
} }
#error-label { #error-label {
color: var(--tn-red); color: @tn-red;
font-family: "JetBrainsMono Nerd Font"; font-family: "JetBrainsMono Nerd Font";
font-size: 13px; font-size: 13px;
margin-top: 8px; margin-top: 8px;
} }
#unlock-button { #unlock-button {
background-color: var(--tn-bg-high); background-color: @tn-bg-high;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
color: var(--tn-fg); color: @tn-fg;
font-family: "JetBrainsMono Nerd Font"; font-family: "JetBrainsMono Nerd Font";
font-size: 14px; font-size: 14px;
padding: 8px 20px; padding: 8px 20px;
@@ -67,6 +67,6 @@ window {
} }
#unlock-button:hover { #unlock-button:hover {
background-color: var(--tn-blue); background-color: @tn-blue;
color: var(--tn-bg); color: @tn-bg;
} }
+1 -1
View File
@@ -83,7 +83,7 @@ binds {
Mod+Shift+8 { move-window-to-workspace 8; } Mod+Shift+8 { move-window-to-workspace 8; }
Mod+Shift+9 { move-window-to-workspace 9; } Mod+Shift+9 { move-window-to-workspace 9; }
Print { spawn "screenshot"; } Mod+Print { spawn "screenshot"; }
Mod+M { move-window-to-workspace "minimized"; } Mod+M { move-window-to-workspace "minimized"; }
Mod+Shift+M { focus-workspace "minimized"; } Mod+Shift+M { focus-workspace "minimized"; }
+16 -18
View File
@@ -1,22 +1,20 @@
/* Tomorrow Night - shared color palette */ /* Tomorrow Night - shared color palette */
/* @import this file from waybar, wofi, gtklock CSS */ /* @import this file from waybar, wofi, gtklock CSS */
* { @define-color tn-bg #1d1f21;
--tn-bg: #1d1f21; @define-color tn-bg-alt #282a2e;
--tn-bg-alt: #282a2e; @define-color tn-bg-high #373b41;
--tn-bg-high: #373b41; @define-color tn-fg #c5c8c6;
--tn-fg: #c5c8c6; @define-color tn-fg-dim #969896;
--tn-fg-dim: #969896; @define-color tn-fg-muted #707880;
--tn-fg-muted: #707880; @define-color tn-blue #81a2be;
--tn-blue: #81a2be; @define-color tn-green #b5bd68;
--tn-green: #b5bd68; @define-color tn-yellow #f0c674;
--tn-yellow: #f0c674; @define-color tn-red #cc6666;
--tn-red: #cc6666; @define-color tn-magenta #b294bb;
--tn-magenta: #b294bb; @define-color tn-cyan #8abeb7;
--tn-cyan: #8abeb7;
/* Alpha variants */ /* Alpha variants */
--tn-bg-a90: rgba(29, 31, 33, 0.90); @define-color tn-bg-a90 rgba(29, 31, 33, 0.90);
--tn-bg-a95: rgba(29, 31, 33, 0.95); @define-color tn-bg-a95 rgba(29, 31, 33, 0.95);
--tn-bg-a96: rgba(29, 31, 33, 0.96); @define-color tn-bg-a96 rgba(29, 31, 33, 0.96);
}
+1
View File
@@ -52,6 +52,7 @@
}, },
"clock": { "clock": {
"timezone": "America/Vancouver",
"format": "{:%a %b %d %H:%M}" "format": "{:%a %b %d %H:%M}"
}, },
+12 -12
View File
@@ -6,17 +6,17 @@
} }
window#waybar { window#waybar {
background: var(--tn-bg-a90); background: @tn-bg-a90;
color: var(--tn-fg); color: @tn-fg;
} }
#workspaces button { #workspaces button {
padding: 0 8px; padding: 0 8px;
color: var(--tn-fg-muted); color: @tn-fg-muted;
} }
#workspaces button.focused { #workspaces button.focused {
color: var(--tn-blue); color: @tn-blue;
} }
#clock, #battery, #network, #pulseaudio, #clock, #battery, #network, #pulseaudio,
@@ -26,33 +26,33 @@ window#waybar {
} }
#custom-power-profile.performance { #custom-power-profile.performance {
color: var(--tn-yellow); color: @tn-yellow;
} }
#custom-power-profile.power-saver { #custom-power-profile.power-saver {
color: var(--tn-green); color: @tn-green;
} }
#battery.warning { #battery.warning {
color: var(--tn-yellow); color: @tn-yellow;
} }
#battery.critical { #battery.critical {
color: var(--tn-red); color: @tn-red;
} }
#cpu.warning { #cpu.warning {
color: var(--tn-yellow); color: @tn-yellow;
} }
#cpu.critical { #cpu.critical {
color: var(--tn-red); color: @tn-red;
} }
#temperature.warm { #temperature.warm {
color: var(--tn-yellow); color: @tn-yellow;
} }
#temperature.critical { #temperature.critical {
color: var(--tn-red); color: @tn-red;
} }
+12 -12
View File
@@ -6,26 +6,26 @@
} }
window { window {
background-color: var(--tn-bg-a96); background-color: @tn-bg-a96;
border: 1px solid var(--tn-bg-high); border: 1px solid @tn-bg-high;
border-radius: 12px; border-radius: 12px;
color: var(--tn-fg); color: @tn-fg;
} }
#input { #input {
background-color: var(--tn-bg-alt); background-color: @tn-bg-alt;
color: var(--tn-fg); color: @tn-fg;
border: 1px solid var(--tn-bg-high); border: 1px solid @tn-bg-high;
border-radius: 8px; border-radius: 8px;
padding: 10px 14px; padding: 10px 14px;
margin: 12px 12px 6px 12px; margin: 12px 12px 6px 12px;
outline: none; outline: none;
font-size: 15px; font-size: 15px;
caret-color: var(--tn-blue); caret-color: @tn-blue;
} }
#input:focus { #input:focus {
border-color: var(--tn-blue); border-color: @tn-blue;
} }
#inner-box { #inner-box {
@@ -48,17 +48,17 @@ window {
} }
#entry:selected { #entry:selected {
background-color: var(--tn-bg-alt); background-color: @tn-bg-alt;
border: 1px solid var(--tn-blue); border: 1px solid @tn-blue;
outline: none; outline: none;
} }
#text { #text {
color: var(--tn-fg); color: @tn-fg;
} }
#text:selected { #text:selected {
color: var(--tn-blue); color: @tn-blue;
font-weight: bold; font-weight: bold;
} }