Login Register
cdnutter

cdnutter / Heroic OLED Theme

Last active 1 day ago

Like 0
heroic-oled-theme.css Raw
1/*
2 * OLED Crimson — a Heroic Games Launcher theme
3 * Styled after qui (shadcn/ui): true-black surfaces, hairline borders,
4 * soft rounded pills, and crimson used sparingly as the accent.
5 *
6 * Heroic sets the body class from the file name. If you rename this
7 * file, rename the "body.oled-crimson" selectors to match.
8 */
9
10body.oled-crimson {
11 /* shadcn-style tokens, OLED edition */
12 --q-bg: #000000;
13 --q-card: #0a0a0a;
14 --q-muted: #141414;
15 --q-hover: #1a1a1a;
16 --q-border: #1f1f1f;
17 --q-border-strong: #2a2a2a;
18 --q-fg: #fafafa;
19 --q-fg-muted: #a1a1aa;
20 --q-fg-subtle: #71717a;
21 --q-crimson: #dc143c;
22 --q-crimson-hover: #e8304f;
23 --q-crimson-soft: rgba(220, 20, 60, 0.12);
24 --q-radius: 8px;
25
26 /* Backgrounds */
27 --background: var(--q-bg);
28 --background-darker: var(--q-bg);
29 --background-darker-80: rgba(0, 0, 0, 0.85);
30 --background-lighter: var(--q-muted);
31 --background-secondary: var(--q-card);
32 --body-background: var(--q-bg);
33 --current-background: var(--q-bg);
34 --gradient-body-background: var(--q-bg);
35 --input-background: var(--q-bg);
36 --search-bar-background: var(--q-bg);
37 --search-bar-border: var(--q-border);
38 --modal-background: var(--q-bg);
39 --modal-backdrop: rgba(0, 0, 0, 0.8);
40 --modal-border: var(--q-border);
41 --controller-hints-background: transparent;
42 --icons-background: var(--q-muted);
43 --divider: var(--q-border);
44
45 /* Accent */
46 --accent: var(--q-crimson);
47 --accent-overlay: var(--q-crimson-hover);
48 --link-highlight: var(--q-crimson);
49 --button-stroke: var(--q-border-strong);
50
51 /* Sidebar — black, separated by a hairline, crimson only on the active item */
52 --navbar-background: var(--q-bg);
53 --navbar-active-background: var(--q-muted);
54 --navbar-accent: var(--q-crimson);
55 --navbar-active: var(--q-fg);
56 --navbar-inactive: var(--q-fg-muted);
57
58 /* Text */
59 --text-default: var(--q-fg);
60 --text-secondary: var(--q-fg-muted);
61 --text-tertiary: var(--q-bg);
62 --text-quartenary: var(--q-fg-subtle);
63 --text-title: var(--q-fg);
64 --text-hover: var(--q-fg);
65 --text-gametitle: var(--q-fg);
66 --text-danger: var(--q-crimson-hover);
67
68 /* Buttons */
69 --primary: var(--q-crimson);
70 --primary-hover: var(--q-crimson-hover);
71 --primary-button: var(--q-crimson);
72 --secondary: var(--q-muted);
73 --secondary-button: var(--q-crimson);
74 --secondary-button-overlay: var(--q-crimson-hover);
75 --play-button: var(--q-crimson);
76 --install-button: var(--q-crimson);
77 --download-button: var(--q-muted);
78 --download-button-overlay: var(--q-hover);
79 --success-button: var(--q-crimson);
80 --disabled-button: var(--q-muted);
81 --disabled-button-overlay: var(--q-hover);
82
83 /* Status */
84 --success: #22c55e;
85 --success-hover: #4ade80;
86 --danger: #b91c1c;
87 --danger-hover: #ef4444;
88
89 /* Icons */
90 --action-icon: var(--q-fg-muted);
91 --action-icon-hover: var(--q-fg);
92 --action-icon-active: var(--q-crimson);
93 --icon-disabled: #3f3f46;
94
95 /* Game cards */
96 --gamecard-title-color: rgba(0, 0, 0, 0.85);
97 --gradient-gamecard: linear-gradient(
98 180deg,
99 rgba(0, 0, 0, 0) 30%,
100 var(--gamecard-title-color) 100%
101 );
102
103 /* On-screen keyboard */
104 --osk-background: var(--q-bg);
105 --osk-button-background: var(--q-muted);
106 --osk-button-border: var(--q-border);
107
108 /* Tour popups */
109 --tour-popup-background: var(--q-card);
110 --tour-bullet-active: var(--q-crimson);
111 --tour-bullet-inactive: var(--q-border-strong);
112
113 /* Alphabet filter */
114 --alphabet-filter-accent-color: var(--q-crimson);
115 --alphabet-filter-accent-hover: var(--q-crimson-hover);
116
117 font-family: Inter, "Geist", ui-sans-serif, system-ui, -apple-system,
118 "Segoe UI", Roboto, sans-serif;
119}
120
121/* ---------- Sidebar ---------- */
122
123body.oled-crimson .Sidebar {
124 background: var(--q-bg) !important;
125 border-right: 1px solid var(--q-border);
126}
127
128/* Nav items as soft rounded pills, like qui */
129body.oled-crimson .Sidebar a,
130body.oled-crimson .Sidebar .Sidebar__item {
131 border-radius: 6px;
132 color: var(--q-fg-muted);
133 transition: background-color 120ms ease, color 120ms ease;
134}
135
136body.oled-crimson .Sidebar a:hover,
137body.oled-crimson .Sidebar .Sidebar__item:hover {
138 background-color: var(--q-hover);
139 color: var(--q-fg);
140}
141
142/* Active item: muted pill with a thin crimson marker on the left */
143body.oled-crimson .Sidebar a.active,
144body.oled-crimson .Sidebar .Sidebar__item.active {
145 background-color: var(--q-muted);
146 color: var(--q-fg);
147 box-shadow: inset 2px 0 0 var(--q-crimson);
148}
149
150body.oled-crimson .Sidebar a.active svg,
151body.oled-crimson .Sidebar .Sidebar__item.active svg {
152 color: var(--q-crimson);
153}
154
155body.oled-crimson .heroicVersion {
156 color: var(--q-fg-subtle);
157}
158
159/* ---------- Surfaces ---------- */
160
161/* Dialogs: black card, hairline border, rounded */
162body.oled-crimson .MuiDialog-paper {
163 background-color: var(--q-bg);
164 border: 1px solid var(--q-border);
165 border-radius: 12px;
166 box-shadow: none;
167}
168
169/* Context menus */
170body.oled-crimson .contextMenu > .MuiPaper-root,
171body.oled-crimson .contextMenu > .MuiPaper-root > .MuiMenu-list {
172 background-color: var(--q-card);
173 border: 1px solid var(--q-border);
174 border-radius: var(--q-radius);
175}
176
177body.oled-crimson .contextMenu .MuiMenuItem-root {
178 border-radius: 4px;
179 margin: 0 4px;
180}
181
182body.oled-crimson .contextMenu .MuiMenuItem-root:hover {
183 background-color: var(--q-hover);
184}
185
186/* Game cards: rounded with a hairline border */
187body.oled-crimson .gameCard {
188 border-radius: var(--q-radius);
189 border: 1px solid var(--q-border);
190 overflow: hidden;
191}
192
193body.oled-crimson .gameCard:hover {
194 border-color: var(--q-border-strong);
195}
196
197/* ---------- Inputs ---------- */
198
199body.oled-crimson .searchBarInput,
200body.oled-crimson .selectFieldWrapper select,
201body.oled-crimson input[type="text"],
202body.oled-crimson input[type="number"] {
203 background-color: var(--q-bg);
204 border: 1px solid var(--q-border);
205 border-radius: 6px;
206 color: var(--q-fg);
207}
208
209body.oled-crimson .searchBarInput::placeholder {
210 color: var(--q-fg-subtle);
211}
212
213body.oled-crimson .selectFieldWrapper select > option {
214 background: var(--q-bg);
215}
216
217/* ---------- Buttons ---------- */
218
219body.oled-crimson .button,
220body.oled-crimson button.button {
221 border-radius: 6px;
222 font-weight: 500;
223}
224
225body.oled-crimson .button.is-primary {
226 background-color: var(--q-crimson);
227 color: #ffffff;
228}
229
230body.oled-crimson .button.is-primary:hover {
231 background-color: var(--q-crimson-hover);
232}
233
234body.oled-crimson .button.is-secondary,
235body.oled-crimson .button.is-tertiary {
236 background-color: transparent;
237 border: 1px solid var(--q-border-strong);
238 color: var(--q-fg);
239}
240
241body.oled-crimson .button.is-secondary:hover,
242body.oled-crimson .button.is-tertiary:hover {
243 background-color: var(--q-hover);
244}
245
246/* ---------- Focus & scrollbars ---------- */
247
248body.oled-crimson *:focus-visible {
249 outline: 2px solid var(--q-crimson);
250 outline-offset: 2px;
251}
252
253body.oled-crimson ::-webkit-scrollbar {
254 width: 8px;
255 height: 8px;
256 background: transparent;
257}
258
259body.oled-crimson ::-webkit-scrollbar-thumb {
260 background: var(--q-border-strong);
261 border-radius: 4px;
262}
263
264body.oled-crimson ::-webkit-scrollbar-thumb:hover {
265 background: #3f3f46;
266}