Krolyxon
Commit 61591c8

Branches

Refs →

aurora61591c8

gtk: Nothing skin: Space Mono labels, pills, LED-dot sliders/progress/levels, dotted separators, menus

Author
krolyxon
Date
2026-10-30 11:04 +0530
Parent
caa2c9d
Commit
61591c8e6b06a19a985a0df192c673ce990e9d45

+151 −4

3 files changed

Browse files Patch
−Context 3+
  1. M .config/gtk-3.0/gtk.css +22 −0
  2. M .config/gtk-3.0/nothing.css +116 −4
  3. M .config/gtk-4.0/gtk.css +13 −0
M .config/gtk-3.0/gtk.css View
@@ -2,3 +2,25 @@
22 on top of the adw-gtk3 theme. GTK3-only rules below. */
33 @import url("file:///home/k/.cache/matugen/gtk.css");
44 @import url("nothing.css");
5+
6+/* adw-gtk3 writes white on suggested-action (it expects a dark accent); Material's primary is light: on_primary */
7+button.suggested-action { color: @accent_fg_color; }
8+button.suggested-action.flat { color: @accent_color; }
9+button.suggested-action:disabled { color: alpha(@window_fg_color, 0.5); }
10+
11+/* menus (pcmanfm's, librewolf's context menus): round s1 card, items as inset pills, hover s3 */
12+menu, .menu, .context-menu { border-radius: 18px; padding: 6px; border: 1px solid @aurora_s3; background-color: @aurora_s1; }
13+menu menuitem, .menu menuitem, .context-menu menuitem { border-radius: 999px; padding: 5px 12px; }
14+menu menuitem:hover, .menu menuitem:hover, .context-menu menuitem:hover { background-color: @aurora_s3; color: @aurora_fg; }
15+menu separator, .menu separator, .context-menu separator {
16+ min-height: 2px;
17+ background-color: transparent;
18+ background-image: radial-gradient(circle, @aurora_s3 1px, transparent 1.4px);
19+ background-size: 6px 2px;
20+ background-repeat: repeat-x;
21+}
22+
23+/* file chooser (xdg-desktop-portal-gtk, librewolf) and pcmanfm: places as pills, the path bar in Space Mono */
24+placessidebar row, .sidebar row { border-radius: 999px; }
25+.path-bar button { font-family: "Space Mono"; font-size: 12px; }
26+frame > border { border-radius: 16px; }
M .config/gtk-3.0/nothing.css View
@@ -2,14 +2,126 @@
22 on top of adw-gtk3 / libadwaita. Imported by gtk-3.0/gtk.css and gtk-4.0/gtk.css after matugen's colours
33 (~/.cache/matugen/gtk.css: libadwaita names + aurora_bg/s1/s2/s3/fill/live/... like Theme.qml).
44 Static on purpose: edits show in newly started apps, no matugen run. Only properties BOTH versions parse
5− (no text-transform, transform, filter, -gtk-icon-size): GTK3 prints a warning per app otherwise. User css beats the
6− theme at any specificity, so whatever is set here is set for every state. */
5+ (no text-transform, transform, filter, -gtk-icon-size, --variables): GTK3 prints a warning per app otherwise. User css
6+ beats the theme at any specificity, so whatever is set here is set for every state (add :disabled etc. explicitly). */
7+
8+/* ---- type: labels in Space Mono with aurora's Lb tracking (caps only on GTK4: GTK3 has no text-transform).
9+ No letter-spacing on labels that ellipsize (headerbar title, statusbar, path bar): GTK measures them without it and
10+ cuts the last characters off. ---- */
11+.heading, .caption-heading, treeview.view header button {
12+ font-family: "Space Mono";
13+ font-weight: normal;
14+ font-size: 12px;
15+ letter-spacing: 1.7px;
16+ color: @aurora_grey;
17+}
18+headerbar .title { font-family: "Space Mono"; font-weight: normal; font-size: 13px; }
19+headerbar .subtitle { font-family: "Space Mono"; font-size: 11px; color: @aurora_grey; }
20+statusbar { font-family: "Space Mono"; font-size: 11px; color: @aurora_grey; padding: 6px 12px; }
721
822 /* ---- pills; joined groups keep straight inner corners ---- */
9−button, entry { border-radius: 999px; }
23+button, entry, spinbutton:not(.vertical) { border-radius: 999px; }
1024 entry { padding-left: 14px; padding-right: 14px; }
25+spinbutton:not(.vertical) > entry, spinbutton:not(.vertical) > text { padding-left: 14px; }
1126 .linked:not(.vertical) > button:not(:first-child), .linked:not(.vertical) > entry:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
1227 .linked:not(.vertical) > button:not(:last-child), .linked:not(.vertical) > entry:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
1328 .linked.vertical > button, .linked.vertical > entry { border-radius: 12px; }
14−popover > contents, popover.background { border-radius: 24px; }
1529 scrollbar slider { border-radius: 999px; }
30+
31+/* "on" = primary with on_primary on it (aurora's fill/fillFg): checked toggles, selected rows, text selection */
32+button:checked, button:checked:hover { background-color: @aurora_fill; color: @aurora_fill_fg; box-shadow: none; }
33+row:selected, row:selected:hover, treeview.view:selected, iconview:selected, flowboxchild:selected, selection {
34+ background-color: @aurora_fill;
35+ color: @aurora_fill_fg;
36+}
37+/* the one live thing: the caret (and a running spinner) */
38+entry, textview, spinbutton { caret-color: @aurora_live; }
39+spinner { color: @aurora_live; }
40+
41+/* ---- surfaces: rounded cards, outlines instead of shadows ---- */
42+popover > contents, popover.background { border-radius: 24px; box-shadow: none; border: 1px solid @aurora_s3; }
43+tooltip, tooltip.background { border-radius: 12px; background-color: @aurora_s2; color: @aurora_fg; border: none; box-shadow: none; }
44+headerbar { box-shadow: none; border-bottom: none; }
45+/* no gradients: the scroll edge shading (pcmanfm's view kept a grey gradient along its bottom and right edge) */
46+scrolledwindow undershoot, scrolledwindow overshoot { background: none; box-shadow: none; border: none; }
47+
48+/* notebook: tabs as pills on the window, the page an s1 card */
49+notebook, notebook > header { border: none; box-shadow: none; background: none; }
50+notebook > header { padding: 4px 0 8px; }
51+notebook > header tab { border-radius: 999px; padding: 4px 16px; min-height: 22px; box-shadow: none; outline-offset: -2px; }
52+notebook > header tab:hover:not(:checked) { background-color: @aurora_s3; }
53+notebook > header tab:checked { background-color: @aurora_fill; color: @aurora_fill_fg; }
54+notebook > header tab:checked button { color: @aurora_fill_fg; }
55+
56+/* switch: off = s3 track with a grey knob, on = primary track with an on_primary knob */
57+switch { background-color: @aurora_s3; border: none; box-shadow: none; }
58+switch:checked { background-color: @aurora_fill; }
59+switch slider { background-color: @aurora_grey; border: none; box-shadow: none; }
60+switch:checked slider { background-color: @aurora_fill_fg; }
61+switch:disabled { background-color: @aurora_s2; }
62+switch:disabled slider { background-color: @aurora_mute; }
63+
64+/* ---- LED dots (aurora's BarSlider / Seg): 4px dots on a 9px pitch, unlit = s3, lit = primary ----
65+ The trough carries the unlit row, the filled part (highlight, progress, block.filled) the lit row from the same
66+ left edge, so both rows line up. */
67+scale.horizontal trough, progressbar.horizontal trough, levelbar.horizontal.continuous trough {
68+ min-height: 9px;
69+ padding: 0;
70+ border: none;
71+ border-radius: 0;
72+ box-shadow: none;
73+ background-color: transparent;
74+ background-image: radial-gradient(circle, @aurora_s3 2px, transparent 2.6px);
75+ background-size: 9px 9px;
76+ background-repeat: repeat-x;
77+ background-position: left center;
78+}
79+scale.horizontal highlight, progressbar.horizontal progress, levelbar.horizontal.continuous block.filled {
80+ min-height: 9px;
81+ border: none;
82+ border-radius: 0;
83+ box-shadow: none;
84+ background-color: transparent;
85+ background-image: radial-gradient(circle, @aurora_fill 2px, transparent 2.6px);
86+ background-size: 9px 9px;
87+ background-repeat: repeat-x;
88+ background-position: left center;
89+}
90+levelbar.horizontal.continuous block.empty { background: none; border: none; box-shadow: none; }
91+scale.horizontal highlight:disabled, scale.horizontal:disabled highlight {
92+ background-image: radial-gradient(circle, @aurora_mute 2px, transparent 2.6px);
93+}
94+/* the knob: a bigger head dot */
95+scale slider, scale slider:hover, scale slider:active {
96+ min-width: 13px;
97+ min-height: 13px;
98+ margin: -2px;
99+ border: none;
100+ border-radius: 999px;
101+ box-shadow: none;
102+ background-color: @aurora_fill;
103+}
104+scale slider:disabled { background-color: @aurora_mute; }
105+/* a level bar's warning colours stay dots */
106+levelbar.horizontal.continuous block.filled.low {
107+ background-image: radial-gradient(circle, @aurora_live 2px, transparent 2.6px);
108+}
109+levelbar.discrete block { min-width: 9px; min-height: 9px; margin: 0 2px; border: none; border-radius: 999px; box-shadow: none; }
110+levelbar.discrete block.empty { background-color: @aurora_s3; }
111+levelbar.discrete block.filled { background-color: @aurora_fill; }
112+
113+/* dotted lines instead of rules, like aurora's section dividers */
114+separator.horizontal:not(.spacer) {
115+ min-height: 2px;
116+ background-color: transparent;
117+ background-image: radial-gradient(circle, @aurora_s3 1px, transparent 1.4px);
118+ background-size: 6px 2px;
119+ background-repeat: repeat-x;
120+}
121+separator.vertical:not(.spacer) {
122+ min-width: 2px;
123+ background-color: transparent;
124+ background-image: radial-gradient(circle, @aurora_s3 1px, transparent 1.4px);
125+ background-size: 2px 6px;
126+ background-repeat: repeat-y;
127+}
M .config/gtk-4.0/gtk.css View
@@ -11,3 +11,16 @@
1111 --window-bg-color: @window_bg_color;
1212 --headerbar-bg-color: @headerbar_bg_color;
1313 }
14+
15+/* caps for nothing.css's Space Mono labels (GTK3 has no text-transform) */
16+.heading, .caption-heading, headerbar .title, columnview > header > button { text-transform: uppercase; }
17+columnview > header > button { font-family: "Space Mono"; font-weight: normal; font-size: 12px; letter-spacing: 1.7px; color: @aurora_grey; }
18+
19+/* popover menus: items as inset pills, hover s3 */
20+popover.menu modelbutton { border-radius: 999px; padding-left: 12px; padding-right: 12px; }
21+popover.menu modelbutton:hover, popover.menu modelbutton:selected { background-color: @aurora_s3; color: @aurora_fg; }
22+
23+/* libadwaita's cards and boxed lists as aurora's cards */
24+.boxed-list, .boxed-list-separate > row, .card { border-radius: 20px; }
25+.boxed-list > row:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }
26+.boxed-list > row:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }