Heroic OLED Theme

heroic-oled-theme.css · 7.0 KiB · CSS Raw

/*
 * OLED Crimson — a Heroic Games Launcher theme
 * Styled after qui (shadcn/ui): true-black surfaces, hairline borders,
 * soft rounded pills, and crimson used sparingly as the accent.
 *
 * Heroic sets the body class from the file name. If you rename this
 * file, rename the "body.oled-crimson" selectors to match.
 */

body.oled-crimson {
  /* shadcn-style tokens, OLED edition */
  --q-bg: #000000;
  --q-card: #0a0a0a;
  --q-muted: #141414;
  --q-hover: #1a1a1a;
  --q-border: #1f1f1f;
  --q-border-strong: #2a2a2a;
  --q-fg: #fafafa;
  --q-fg-muted: #a1a1aa;
  --q-fg-subtle: #71717a;
  --q-crimson: #dc143c;
  --q-crimson-hover: #e8304f;
  --q-crimson-soft: rgba(220, 20, 60, 0.12);
  --q-radius: 8px;

/* Backgrounds */
  --background: var(--q-bg);
  --background-darker: var(--q-bg);
  --background-darker-80: rgba(0, 0, 0, 0.85);
  --background-lighter: var(--q-muted);
  --background-secondary: var(--q-card);
  --body-background: var(--q-bg);
  --current-background: var(--q-bg);
  --gradient-body-background: var(--q-bg);
  --input-background: var(--q-bg);
  --search-bar-background: var(--q-bg);
  --search-bar-border: var(--q-border);
  --modal-background: var(--q-bg);
  --modal-backdrop: rgba(0, 0, 0, 0.8);
  --modal-border: var(--q-border);
  --controller-hints-background: transparent;
  --icons-background: var(--q-muted);
  --divider: var(--q-border);

/* Accent */
  --accent: var(--q-crimson);
  --accent-overlay: var(--q-crimson-hover);
  --link-highlight: var(--q-crimson);
  --button-stroke: var(--q-border-strong);

/* Sidebar — black, separated by a hairline, crimson only on the active item */
  --navbar-background: var(--q-bg);
  --navbar-active-background: var(--q-muted);
  --navbar-accent: var(--q-crimson);
  --navbar-active: var(--q-fg);
  --navbar-inactive: var(--q-fg-muted);

/* Text */
  --text-default: var(--q-fg);
  --text-secondary: var(--q-fg-muted);
  --text-tertiary: var(--q-bg);
  --text-quartenary: var(--q-fg-subtle);
  --text-title: var(--q-fg);
  --text-hover: var(--q-fg);
  --text-gametitle: var(--q-fg);
  --text-danger: var(--q-crimson-hover);

/* Buttons */
  --primary: var(--q-crimson);
  --primary-hover: var(--q-crimson-hover);
  --primary-button: var(--q-crimson);
  --secondary: var(--q-muted);
  --secondary-button: var(--q-crimson);
  --secondary-button-overlay: var(--q-crimson-hover);
  --play-button: var(--q-crimson);
  --install-button: var(--q-crimson);
  --download-button: var(--q-muted);
  --download-button-overlay: var(--q-hover);
  --success-button: var(--q-crimson);
  --disabled-button: var(--q-muted);
  --disabled-button-overlay: var(--q-hover);

/* Status */
  --success: #22c55e;
  --success-hover: #4ade80;
  --danger: #b91c1c;
  --danger-hover: #ef4444;

/* Icons */
  --action-icon: var(--q-fg-muted);
  --action-icon-hover: var(--q-fg);
  --action-icon-active: var(--q-crimson);
  --icon-disabled: #3f3f46;

/* Game cards */
  --gamecard-title-color: rgba(0, 0, 0, 0.85);
  --gradient-gamecard: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    var(--gamecard-title-color) 100%
  );

/* On-screen keyboard */
  --osk-background: var(--q-bg);
  --osk-button-background: var(--q-muted);
  --osk-button-border: var(--q-border);

/* Tour popups */
  --tour-popup-background: var(--q-card);
  --tour-bullet-active: var(--q-crimson);
  --tour-bullet-inactive: var(--q-border-strong);

/* Alphabet filter */
  --alphabet-filter-accent-color: var(--q-crimson);
  --alphabet-filter-accent-hover: var(--q-crimson-hover);

font-family: Inter, "Geist", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
}

/* ---------- Sidebar ---------- */

body.oled-crimson .Sidebar {
  background: var(--q-bg) !important;
  border-right: 1px solid var(--q-border);
}

/* Nav items as soft rounded pills, like qui */
body.oled-crimson .Sidebar a,
body.oled-crimson .Sidebar .Sidebar__item {
  border-radius: 6px;
  color: var(--q-fg-muted);
  transition: background-color 120ms ease, color 120ms ease;
}

body.oled-crimson .Sidebar a:hover,
body.oled-crimson .Sidebar .Sidebar__item:hover {
  background-color: var(--q-hover);
  color: var(--q-fg);
}

/* Active item: muted pill with a thin crimson marker on the left */
body.oled-crimson .Sidebar a.active,
body.oled-crimson .Sidebar .Sidebar__item.active {
  background-color: var(--q-muted);
  color: var(--q-fg);
  box-shadow: inset 2px 0 0 var(--q-crimson);
}

body.oled-crimson .Sidebar a.active svg,
body.oled-crimson .Sidebar .Sidebar__item.active svg {
  color: var(--q-crimson);
}

body.oled-crimson .heroicVersion {
  color: var(--q-fg-subtle);
}

/* ---------- Surfaces ---------- */

/* Dialogs: black card, hairline border, rounded */
body.oled-crimson .MuiDialog-paper {
  background-color: var(--q-bg);
  border: 1px solid var(--q-border);
  border-radius: 12px;
  box-shadow: none;
}

/* Context menus */
body.oled-crimson .contextMenu > .MuiPaper-root,
body.oled-crimson .contextMenu > .MuiPaper-root > .MuiMenu-list {
  background-color: var(--q-card);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius);
}

body.oled-crimson .contextMenu .MuiMenuItem-root {
  border-radius: 4px;
  margin: 0 4px;
}

body.oled-crimson .contextMenu .MuiMenuItem-root:hover {
  background-color: var(--q-hover);
}

/* Game cards: rounded with a hairline border */
body.oled-crimson .gameCard {
  border-radius: var(--q-radius);
  border: 1px solid var(--q-border);
  overflow: hidden;
}

body.oled-crimson .gameCard:hover {
  border-color: var(--q-border-strong);
}

/* ---------- Inputs ---------- */

body.oled-crimson .searchBarInput,
body.oled-crimson .selectFieldWrapper select,
body.oled-crimson input[type="text"],
body.oled-crimson input[type="number"] {
  background-color: var(--q-bg);
  border: 1px solid var(--q-border);
  border-radius: 6px;
  color: var(--q-fg);
}

body.oled-crimson .searchBarInput::placeholder {
  color: var(--q-fg-subtle);
}

body.oled-crimson .selectFieldWrapper select > option {
  background: var(--q-bg);
}

/* ---------- Buttons ---------- */

body.oled-crimson .button,
body.oled-crimson button.button {
  border-radius: 6px;
  font-weight: 500;
}

body.oled-crimson .button.is-primary {
  background-color: var(--q-crimson);
  color: #ffffff;
}

body.oled-crimson .button.is-primary:hover {
  background-color: var(--q-crimson-hover);
}

body.oled-crimson .button.is-secondary,
body.oled-crimson .button.is-tertiary {
  background-color: transparent;
  border: 1px solid var(--q-border-strong);
  color: var(--q-fg);
}

body.oled-crimson .button.is-secondary:hover,
body.oled-crimson .button.is-tertiary:hover {
  background-color: var(--q-hover);
}

/* ---------- Focus & scrollbars ---------- */

body.oled-crimson *:focus-visible {
  outline: 2px solid var(--q-crimson);
  outline-offset: 2px;
}

body.oled-crimson ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

body.oled-crimson ::-webkit-scrollbar-thumb {
  background: var(--q-border-strong);
  border-radius: 4px;
}

body.oled-crimson ::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

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
10	body.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
123	body.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 */
129	body.oled-crimson .Sidebar a,
130	body.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
136	body.oled-crimson .Sidebar a:hover,
137	body.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 */
143	body.oled-crimson .Sidebar a.active,
144	body.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
150	body.oled-crimson .Sidebar a.active svg,
151	body.oled-crimson .Sidebar .Sidebar__item.active svg {
152	color: var(--q-crimson);
153	}
154
155	body.oled-crimson .heroicVersion {
156	color: var(--q-fg-subtle);
157	}
158
159	/* ---------- Surfaces ---------- */
160
161	/* Dialogs: black card, hairline border, rounded */
162	body.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 */
170	body.oled-crimson .contextMenu > .MuiPaper-root,
171	body.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
177	body.oled-crimson .contextMenu .MuiMenuItem-root {
178	border-radius: 4px;
179	margin: 0 4px;
180	}
181
182	body.oled-crimson .contextMenu .MuiMenuItem-root:hover {
183	background-color: var(--q-hover);
184	}
185
186	/* Game cards: rounded with a hairline border */
187	body.oled-crimson .gameCard {
188	border-radius: var(--q-radius);
189	border: 1px solid var(--q-border);
190	overflow: hidden;
191	}
192
193	body.oled-crimson .gameCard:hover {
194	border-color: var(--q-border-strong);
195	}
196
197	/* ---------- Inputs ---------- */
198
199	body.oled-crimson .searchBarInput,
200	body.oled-crimson .selectFieldWrapper select,
201	body.oled-crimson input[type="text"],
202	body.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
209	body.oled-crimson .searchBarInput::placeholder {
210	color: var(--q-fg-subtle);
211	}
212
213	body.oled-crimson .selectFieldWrapper select > option {
214	background: var(--q-bg);
215	}
216
217	/* ---------- Buttons ---------- */
218
219	body.oled-crimson .button,
220	body.oled-crimson button.button {
221	border-radius: 6px;
222	font-weight: 500;
223	}
224
225	body.oled-crimson .button.is-primary {
226	background-color: var(--q-crimson);
227	color: #ffffff;
228	}
229
230	body.oled-crimson .button.is-primary:hover {
231	background-color: var(--q-crimson-hover);
232	}
233
234	body.oled-crimson .button.is-secondary,
235	body.oled-crimson .button.is-tertiary {
236	background-color: transparent;
237	border: 1px solid var(--q-border-strong);
238	color: var(--q-fg);
239	}
240
241	body.oled-crimson .button.is-secondary:hover,
242	body.oled-crimson .button.is-tertiary:hover {
243	background-color: var(--q-hover);
244	}
245
246	/* ---------- Focus & scrollbars ---------- */
247
248	body.oled-crimson *:focus-visible {
249	outline: 2px solid var(--q-crimson);
250	outline-offset: 2px;
251	}
252
253	body.oled-crimson ::-webkit-scrollbar {
254	width: 8px;
255	height: 8px;
256	background: transparent;
257	}
258
259	body.oled-crimson ::-webkit-scrollbar-thumb {
260	background: var(--q-border-strong);
261	border-radius: 4px;
262	}
263
264	body.oled-crimson ::-webkit-scrollbar-thumb:hover {
265	background: #3f3f46;
266	}
267