Skip to main content

max / alloy_tui

5.8 KB · 195 lines History Blame Raw
1 /*
2 * Alloy Firefox chrome — Helium-style ultra-compact horizontal, Akari Dawn
3 *
4 * Applies Alloy's default light theme (Akari Dawn) to Firefox's chrome and
5 * slims the tab strip, address bar, and toolbar to their smallest legible
6 * form. No vertical tabs. No bookmarks toolbar. No title/menu bar.
7 *
8 * The palette is warm-clay paper caught in lantern light — Japanese-alley
9 * aesthetic, by way of Shu Kutsuzawa's Akari theme (MIT). See
10 * makeover's themes/akari-dawn.toml for the canonical hex values and
11 * docs/TOKENS.md for the derivation of border-subtle / border-strong.
12 *
13 * Requires: toolkit.legacyUserProfileCustomizations.stylesheets = true
14 * (set in usr/lib64/firefox/mozilla.cfg as a system default).
15 */
16
17 :root {
18 color-scheme: light;
19
20 /* Akari Dawn — source: makeover's themes/akari-dawn.toml. */
21 --alloy-surface-sunken: #cfc4b6;
22 --alloy-surface: #e4ded6;
23 --alloy-surface-raised: #ede7de;
24 --alloy-surface-overlay: #f0ece4;
25 --alloy-border-subtle: #dad2c7; /* derived: mix border, surface 60% */
26 --alloy-border: #cabeae;
27 --alloy-border-strong: #7f786d; /* derived: mix border, text-primary 65% */
28 --alloy-text-muted: #514b45;
29 --alloy-text-secondary: #222d38;
30 --alloy-text-primary: #1a1816;
31
32 --alloy-tab-height: 26px;
33 --alloy-navbar-height: 34px;
34 --alloy-urlbar-height: 24px;
35 }
36
37 /* -------------------------------------------------------------------
38 * Window chrome removal
39 * ------------------------------------------------------------------- */
40
41 /* Title bar and menu bar entirely off — Sway owns window decoration. */
42 #titlebar-buttonbox-container { display: none !important; }
43 #toolbar-menubar { display: none !important; height: 0 !important; }
44
45 /* Bookmarks toolbar off — keyboard-driven, invoke via Ctrl-B if needed. */
46 #PersonalToolbar { display: none !important; }
47
48 /* Sidebar off — no vertical UI on the side. */
49 #sidebar-box { display: none !important; }
50 #sidebar-splitter[hidden="false"] { display: none !important; }
51
52 /* -------------------------------------------------------------------
53 * Tab strip — thin, no gaps, no close button until hover
54 * ------------------------------------------------------------------- */
55
56 #TabsToolbar,
57 #tabbrowser-tabs {
58 background: var(--alloy-surface) !important;
59 height: var(--alloy-tab-height) !important;
60 min-height: var(--alloy-tab-height) !important;
61 max-height: var(--alloy-tab-height) !important;
62 }
63
64 .tabbrowser-tab {
65 height: var(--alloy-tab-height) !important;
66 min-height: var(--alloy-tab-height) !important;
67 max-height: var(--alloy-tab-height) !important;
68 }
69
70 .tab-background {
71 border-radius: 0 !important;
72 margin: 0 !important;
73 border: none !important;
74 box-shadow: none !important;
75 background: transparent !important;
76 }
77
78 .tabbrowser-tab:not([selected]):hover .tab-background {
79 background: var(--alloy-surface-raised) !important;
80 }
81
82 .tabbrowser-tab[selected] .tab-background {
83 background: var(--alloy-surface-raised) !important;
84 border-bottom: 1px solid var(--alloy-border-strong) !important;
85 }
86
87 .tab-content {
88 padding-inline: 8px !important;
89 }
90
91 .tab-label {
92 color: var(--alloy-text-secondary) !important;
93 font-size: 11px !important;
94 }
95
96 .tabbrowser-tab[selected] .tab-label {
97 color: var(--alloy-text-primary) !important;
98 }
99
100 .tab-icon-image {
101 margin-inline-end: 6px !important;
102 }
103
104 /* Close button hidden until hover on the tab. */
105 .tab-close-button {
106 visibility: hidden !important;
107 padding: 0 !important;
108 margin-inline-start: 4px !important;
109 }
110 .tabbrowser-tab:hover .tab-close-button {
111 visibility: visible !important;
112 }
113
114 /* "New tab" plus button, slim. */
115 #tabs-newtab-button,
116 #new-tab-button {
117 padding: 0 6px !important;
118 }
119 #tabs-newtab-button .toolbarbutton-icon,
120 #new-tab-button .toolbarbutton-icon {
121 width: 12px !important;
122 height: 12px !important;
123 }
124
125 /* -------------------------------------------------------------------
126 * Nav bar (address row) — compact
127 * ------------------------------------------------------------------- */
128
129 #nav-bar {
130 background: var(--alloy-surface) !important;
131 min-height: var(--alloy-navbar-height) !important;
132 max-height: var(--alloy-navbar-height) !important;
133 border-bottom: 1px solid var(--alloy-border-subtle) !important;
134 box-shadow: none !important;
135 padding: 2px 4px !important;
136 }
137
138 #urlbar-container {
139 min-height: var(--alloy-urlbar-height) !important;
140 padding-block: 0 !important;
141 }
142
143 #urlbar {
144 min-height: var(--alloy-urlbar-height) !important;
145 font-size: 12px !important;
146 }
147
148 #urlbar-background {
149 background: var(--alloy-surface-raised) !important;
150 border: 1px solid var(--alloy-border) !important;
151 border-radius: 2px !important;
152 box-shadow: none !important;
153 }
154
155 #urlbar[focused="true"] > #urlbar-background {
156 border-color: var(--alloy-border-strong) !important;
157 box-shadow: none !important;
158 }
159
160 #urlbar-input {
161 color: var(--alloy-text-primary) !important;
162 }
163
164 .urlbar-input-box::placeholder,
165 #urlbar-input::placeholder {
166 color: var(--alloy-text-muted) !important;
167 }
168
169 /* Extension buttons and back/forward — compact padding. */
170 .toolbarbutton-1 {
171 padding-inline: 2px !important;
172 }
173 .toolbarbutton-1 > .toolbarbutton-icon {
174 padding: 4px !important;
175 }
176
177 /* -------------------------------------------------------------------
178 * Content area separator (subtle)
179 * ------------------------------------------------------------------- */
180
181 #navigator-toolbox {
182 border-bottom: 1px solid var(--alloy-border-subtle) !important;
183 }
184
185 /* -------------------------------------------------------------------
186 * Popups (menus, popouts) — Alloy overlay tier
187 * ------------------------------------------------------------------- */
188
189 panel,
190 menupopup {
191 --arrowpanel-background: var(--alloy-surface-overlay) !important;
192 --arrowpanel-color: var(--alloy-text-primary) !important;
193 --arrowpanel-border-color: var(--alloy-border) !important;
194 }
195