| 1 | /* aurora's Nothing OS look for GTK3 and GTK4 (parts from glyph-rice's gtk.css, GPL-3.0), |
| 2 | on top of adw-gtk3 / libadwaita. Imported by gtk-3.0/gtk.css and gtk-4.0/gtk.css after matugen's colours |
| 3 | (~/.cache/matugen/gtk.css: libadwaita names + aurora_bg/s1/s2/s3/fill/live/... like Theme.qml). |
| 4 | 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, --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 the UI font (JetBrains 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-weight: normal; |
| 13 | font-size: 12px; |
| 14 | letter-spacing: 1.7px; |
| 15 | color: @aurora_grey; |
| 16 | } |
| 17 | headerbar .title { font-weight: normal; font-size: 13px; } |
| 18 | headerbar .subtitle { font-size: 11px; color: @aurora_grey; } |
| 19 | statusbar { font-size: 11px; color: @aurora_grey; padding: 6px 12px; } |
| 20 | |
| 21 | /* ---- pills; joined groups keep straight inner corners ---- */ |
| 22 | button, entry, spinbutton:not(.vertical) { border-radius: 999px; } |
| 23 | entry { padding-left: 14px; padding-right: 14px; } |
| 24 | spinbutton:not(.vertical) > entry, spinbutton:not(.vertical) > text { padding-left: 14px; } |
| 25 | .linked:not(.vertical) > button:not(:first-child), .linked:not(.vertical) > entry:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } |
| 26 | .linked:not(.vertical) > button:not(:last-child), .linked:not(.vertical) > entry:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } |
| 27 | .linked.vertical > button, .linked.vertical > entry { border-radius: 12px; } |
| 28 | scrollbar slider { border-radius: 999px; } |
| 29 | |
| 30 | /* "on" = primary with on_primary on it (aurora's fill/fillFg): checked toggles, selected rows, text selection */ |
| 31 | button:checked, button:checked:hover { background-color: @aurora_fill; color: @aurora_fill_fg; box-shadow: none; } |
| 32 | row:selected, row:selected:hover, treeview.view:selected, iconview:selected, flowboxchild:selected, selection { |
| 33 | background-color: @aurora_fill; |
| 34 | color: @aurora_fill_fg; |
| 35 | } |
| 36 | /* the one live thing: the caret (and a running spinner) */ |
| 37 | entry, textview, spinbutton { caret-color: @aurora_live; } |
| 38 | spinner { color: @aurora_live; } |
| 39 | |
| 40 | /* ---- surfaces: rounded cards, outlines instead of shadows ---- */ |
| 41 | popover > contents, popover.background { border-radius: 24px; box-shadow: none; border: 1px solid @aurora_s3; } |
| 42 | tooltip, tooltip.background { border-radius: 12px; background-color: @aurora_s2; color: @aurora_fg; border: none; box-shadow: none; } |
| 43 | headerbar { box-shadow: none; border-bottom: none; } |
| 44 | /* no gradients: the scroll edge shading (pcmanfm's view kept a grey gradient along its bottom and right edge) */ |
| 45 | scrolledwindow undershoot, scrolledwindow overshoot { background: none; box-shadow: none; border: none; } |
| 46 | |
| 47 | /* notebook: tabs as pills on the window, the page an s1 card */ |
| 48 | notebook, notebook > header { border: none; box-shadow: none; background: none; } |
| 49 | notebook > header { padding: 4px 0 8px; } |
| 50 | notebook > header tab { border-radius: 999px; padding: 4px 16px; min-height: 22px; box-shadow: none; outline-offset: -2px; } |
| 51 | notebook > header tab:hover:not(:checked) { background-color: @aurora_s3; } |
| 52 | notebook > header tab:checked { background-color: @aurora_fill; color: @aurora_fill_fg; } |
| 53 | notebook > header tab:checked button { color: @aurora_fill_fg; } |
| 54 | |
| 55 | /* switch: off = s3 track with a grey knob, on = primary track with an on_primary knob */ |
| 56 | switch { background-color: @aurora_s3; border: none; box-shadow: none; } |
| 57 | switch:checked { background-color: @aurora_fill; } |
| 58 | switch slider { background-color: @aurora_grey; border: none; box-shadow: none; } |
| 59 | switch:checked slider { background-color: @aurora_fill_fg; } |
| 60 | switch:disabled { background-color: @aurora_s2; } |
| 61 | switch:disabled slider { background-color: @aurora_mute; } |
| 62 | |
| 63 | /* ---- LED dots (aurora's BarSlider / Seg): 4px dots on a 9px pitch, unlit = s3, lit = primary ---- |
| 64 | The trough carries the unlit row, the filled part (highlight, progress, block.filled) the lit row from the same |
| 65 | left edge, so both rows line up. */ |
| 66 | scale.horizontal trough, progressbar.horizontal trough, levelbar.horizontal.continuous trough { |
| 67 | min-height: 9px; |
| 68 | padding: 0; |
| 69 | border: none; |
| 70 | border-radius: 0; |
| 71 | box-shadow: none; |
| 72 | background-color: transparent; |
| 73 | background-image: radial-gradient(circle, @aurora_s3 2px, transparent 2.6px); |
| 74 | background-size: 9px 9px; |
| 75 | background-repeat: repeat-x; |
| 76 | background-position: left center; |
| 77 | } |
| 78 | scale.horizontal highlight, progressbar.horizontal progress, levelbar.horizontal.continuous block.filled { |
| 79 | min-height: 9px; |
| 80 | border: none; |
| 81 | border-radius: 0; |
| 82 | box-shadow: none; |
| 83 | background-color: transparent; |
| 84 | background-image: radial-gradient(circle, @aurora_fill 2px, transparent 2.6px); |
| 85 | background-size: 9px 9px; |
| 86 | background-repeat: repeat-x; |
| 87 | background-position: left center; |
| 88 | } |
| 89 | levelbar.horizontal.continuous block.empty { background: none; border: none; box-shadow: none; } |
| 90 | scale.horizontal highlight:disabled, scale.horizontal:disabled highlight { |
| 91 | background-image: radial-gradient(circle, @aurora_mute 2px, transparent 2.6px); |
| 92 | } |
| 93 | /* the knob: a bigger head dot */ |
| 94 | scale slider, scale slider:hover, scale slider:active { |
| 95 | min-width: 13px; |
| 96 | min-height: 13px; |
| 97 | margin: -2px; |
| 98 | border: none; |
| 99 | border-radius: 999px; |
| 100 | box-shadow: none; |
| 101 | background-color: @aurora_fill; |
| 102 | } |
| 103 | scale slider:disabled { background-color: @aurora_mute; } |
| 104 | /* a level bar's warning colours stay dots */ |
| 105 | levelbar.horizontal.continuous block.filled.low { |
| 106 | background-image: radial-gradient(circle, @aurora_live 2px, transparent 2.6px); |
| 107 | } |
| 108 | levelbar.discrete block { min-width: 9px; min-height: 9px; margin: 0 2px; border: none; border-radius: 999px; box-shadow: none; } |
| 109 | levelbar.discrete block.empty { background-color: @aurora_s3; } |
| 110 | levelbar.discrete block.filled { background-color: @aurora_fill; } |
| 111 | |
| 112 | /* dotted lines instead of rules, like aurora's section dividers */ |
| 113 | separator.horizontal:not(.spacer) { |
| 114 | min-height: 2px; |
| 115 | background-color: transparent; |
| 116 | background-image: radial-gradient(circle, @aurora_s3 1px, transparent 1.4px); |
| 117 | background-size: 6px 2px; |
| 118 | background-repeat: repeat-x; |
| 119 | } |
| 120 | separator.vertical:not(.spacer) { |
| 121 | min-width: 2px; |
| 122 | background-color: transparent; |
| 123 | background-image: radial-gradient(circle, @aurora_s3 1px, transparent 1.4px); |
| 124 | background-size: 2px 6px; |
| 125 | background-repeat: repeat-y; |
| 126 | } |