Heroic OLED Theme

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

/*
 * OLED Crimson — a Heroic Games Launcher theme
 * True black (#000) everywhere for OLED panels, with a crimson sidebar.
 *
 * Install: put this file in your Custom Themes folder
 * (Heroic → Settings → Accessibility → Custom Themes Path),
 * then pick "oled-crimson" under Select Theme.
 *
 * Heroic sets the body class from the file name, so if you rename
 * this file, rename the "body.oled-crimson" selectors to match.
 */

body.oled-crimson {
  /* Crimson palette */
  --crimson: #dc143c;
  --crimson-bright: #ff2d55;
  --crimson-deep: #7a0019;
  --crimson-darkest: #2b0009;

/* Backgrounds — true black for OLED */
  --background: #000000;
  --background-darker: #000000;
  --background-darker-80: #000000e0;
  --background-lighter: #0a0a0a;
  --background-secondary: #0a0a0a;
  --body-background: #000000;
  --current-background: #000000;
  --gradient-body-background: #000000;
  --input-background: #0d0d0d;
  --search-bar-background: #0d0d0d;
  --search-bar-border: #2a0a10;
  --modal-background: #000000;
  --modal-backdrop: #000000e6;
  --modal-border: var(--crimson-deep);
  --controller-hints-background: transparent;
  --icons-background: #0d0d0d;
  --divider: #1f0a0e;

/* Accent */
  --accent: var(--crimson);
  --accent-overlay: var(--crimson-bright);
  --link-highlight: var(--crimson-bright);
  --button-stroke: var(--crimson);

/* Sidebar — the crimson side */
  --navbar-background: var(--crimson-deep);
  --navbar-active-background: #000000;
  --navbar-accent: #ffffff;
  --navbar-active: #ffffff;
  --navbar-inactive: #f3c2cc;

/* Text */
  --text-default: #ececec;
  --text-secondary: #a8a8a8;
  --text-tertiary: #000000;
  --text-quartenary: #555555;
  --text-title: #ffffff;
  --text-hover: var(--crimson-bright);
  --text-gametitle: #ffffff;
  --text-danger: var(--crimson-bright);

/* Buttons */
  --primary: var(--crimson);
  --primary-hover: var(--crimson-bright);
  --primary-button: var(--crimson);
  --secondary: var(--crimson-deep);
  --secondary-button: var(--crimson);
  --secondary-button-overlay: var(--crimson-bright);
  --play-button: var(--crimson);
  --install-button: var(--crimson);
  --download-button: var(--crimson-deep);
  --download-button-overlay: var(--crimson);
  --success-button: var(--crimson);
  --disabled-button: #1a1a1a;
  --disabled-button-overlay: #2a2a2a;

/* Status */
  --success: #e8e8e8;
  --success-hover: #ffffff;
  --danger: #b00020;
  --danger-hover: var(--crimson-bright);

/* Icons */
  --action-icon: #d0d0d0;
  --action-icon-hover: var(--crimson-bright);
  --action-icon-active: var(--crimson);
  --icon-disabled: #3a3a3a;

/* Game cards */
  --gamecard-title-color: #000000d9;
  --gradient-gamecard: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 1.8%,
    var(--gamecard-title-color) 45%
  );

/* On-screen keyboard */
  --osk-background: #000000;
  --osk-button-background: #0d0d0d;
  --osk-button-border: var(--crimson-deep);

/* Tour popups */
  --tour-popup-background: #0d0d0d;
  --tour-bullet-active: var(--crimson);
  --tour-bullet-inactive: var(--crimson-deep);

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

/* Sidebar: crimson fading toward black, with a bright edge */
body.oled-crimson .Sidebar {
  background: linear-gradient(
    180deg,
    var(--crimson-deep) 0%,
    #4a000f 55%,
    var(--crimson-darkest) 100%
  ) !important;
  border-right: 1px solid var(--crimson);
}

/* Dialogs and menus stay pure black with a crimson outline */
body.oled-crimson .MuiDialog-paper {
  background-color: #000000;
  border: 1px solid var(--crimson-deep);
}

body.oled-crimson .contextMenu > .MuiPaper-root,
body.oled-crimson .contextMenu > .MuiPaper-root > .MuiMenu-list {
  background-color: #000000;
  border: 1px solid var(--crimson-deep);
}

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

body.oled-crimson .selectFieldWrapper select > option {
  background: #000000;
}

body.oled-crimson .heroicVersion {
  color: var(--navbar-inactive);
}

/* Crimson keyboard/controller focus ring */
body.oled-crimson *:focus-visible {
  outline: 2px solid var(--crimson-bright);
  outline-offset: 2px;
}

/* Thin crimson scrollbars on black */
body.oled-crimson ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #000000;
}

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

body.oled-crimson ::-webkit-scrollbar-thumb:hover {
  background: var(--crimson);
}

1	/*
2	* OLED Crimson — a Heroic Games Launcher theme
3	* True black (#000) everywhere for OLED panels, with a crimson sidebar.
4	*
5	* Install: put this file in your Custom Themes folder
6	* (Heroic → Settings → Accessibility → Custom Themes Path),
7	* then pick "oled-crimson" under Select Theme.
8	*
9	* Heroic sets the body class from the file name, so if you rename
10	* this file, rename the "body.oled-crimson" selectors to match.
11	*/
12
13	body.oled-crimson {
14	/* Crimson palette */
15	--crimson: #dc143c;
16	--crimson-bright: #ff2d55;
17	--crimson-deep: #7a0019;
18	--crimson-darkest: #2b0009;
19
20	/* Backgrounds — true black for OLED */
21	--background: #000000;
22	--background-darker: #000000;
23	--background-darker-80: #000000e0;
24	--background-lighter: #0a0a0a;
25	--background-secondary: #0a0a0a;
26	--body-background: #000000;
27	--current-background: #000000;
28	--gradient-body-background: #000000;
29	--input-background: #0d0d0d;
30	--search-bar-background: #0d0d0d;
31	--search-bar-border: #2a0a10;
32	--modal-background: #000000;
33	--modal-backdrop: #000000e6;
34	--modal-border: var(--crimson-deep);
35	--controller-hints-background: transparent;
36	--icons-background: #0d0d0d;
37	--divider: #1f0a0e;
38
39	/* Accent */
40	--accent: var(--crimson);
41	--accent-overlay: var(--crimson-bright);
42	--link-highlight: var(--crimson-bright);
43	--button-stroke: var(--crimson);
44
45	/* Sidebar — the crimson side */
46	--navbar-background: var(--crimson-deep);
47	--navbar-active-background: #000000;
48	--navbar-accent: #ffffff;
49	--navbar-active: #ffffff;
50	--navbar-inactive: #f3c2cc;
51
52	/* Text */
53	--text-default: #ececec;
54	--text-secondary: #a8a8a8;
55	--text-tertiary: #000000;
56	--text-quartenary: #555555;
57	--text-title: #ffffff;
58	--text-hover: var(--crimson-bright);
59	--text-gametitle: #ffffff;
60	--text-danger: var(--crimson-bright);
61
62	/* Buttons */
63	--primary: var(--crimson);
64	--primary-hover: var(--crimson-bright);
65	--primary-button: var(--crimson);
66	--secondary: var(--crimson-deep);
67	--secondary-button: var(--crimson);
68	--secondary-button-overlay: var(--crimson-bright);
69	--play-button: var(--crimson);
70	--install-button: var(--crimson);
71	--download-button: var(--crimson-deep);
72	--download-button-overlay: var(--crimson);
73	--success-button: var(--crimson);
74	--disabled-button: #1a1a1a;
75	--disabled-button-overlay: #2a2a2a;
76
77	/* Status */
78	--success: #e8e8e8;
79	--success-hover: #ffffff;
80	--danger: #b00020;
81	--danger-hover: var(--crimson-bright);
82
83	/* Icons */
84	--action-icon: #d0d0d0;
85	--action-icon-hover: var(--crimson-bright);
86	--action-icon-active: var(--crimson);
87	--icon-disabled: #3a3a3a;
88
89	/* Game cards */
90	--gamecard-title-color: #000000d9;
91	--gradient-gamecard: linear-gradient(
92	180deg,
93	rgba(0, 0, 0, 0.2) 1.8%,
94	var(--gamecard-title-color) 45%
95	);
96
97	/* On-screen keyboard */
98	--osk-background: #000000;
99	--osk-button-background: #0d0d0d;
100	--osk-button-border: var(--crimson-deep);
101
102	/* Tour popups */
103	--tour-popup-background: #0d0d0d;
104	--tour-bullet-active: var(--crimson);
105	--tour-bullet-inactive: var(--crimson-deep);
106
107	/* Alphabet filter */
108	--alphabet-filter-accent-color: var(--crimson);
109	--alphabet-filter-accent-hover: var(--crimson-bright);
110	}
111
112	/* Sidebar: crimson fading toward black, with a bright edge */
113	body.oled-crimson .Sidebar {
114	background: linear-gradient(
115	180deg,
116	var(--crimson-deep) 0%,
117	#4a000f 55%,
118	var(--crimson-darkest) 100%
119	) !important;
120	border-right: 1px solid var(--crimson);
121	}
122
123	/* Dialogs and menus stay pure black with a crimson outline */
124	body.oled-crimson .MuiDialog-paper {
125	background-color: #000000;
126	border: 1px solid var(--crimson-deep);
127	}
128
129	body.oled-crimson .contextMenu > .MuiPaper-root,
130	body.oled-crimson .contextMenu > .MuiPaper-root > .MuiMenu-list {
131	background-color: #000000;
132	border: 1px solid var(--crimson-deep);
133	}
134
135	body.oled-crimson .contextMenu .MuiMenuItem-root:hover {
136	background-color: var(--crimson-darkest);
137	}
138
139	body.oled-crimson .selectFieldWrapper select > option {
140	background: #000000;
141	}
142
143	body.oled-crimson .heroicVersion {
144	color: var(--navbar-inactive);
145	}
146
147	/* Crimson keyboard/controller focus ring */
148	body.oled-crimson *:focus-visible {
149	outline: 2px solid var(--crimson-bright);
150	outline-offset: 2px;
151	}
152
153	/* Thin crimson scrollbars on black */
154	body.oled-crimson ::-webkit-scrollbar {
155	width: 8px;
156	height: 8px;
157	background: #000000;
158	}
159
160	body.oled-crimson ::-webkit-scrollbar-thumb {
161	background: var(--crimson-deep);
162	border-radius: 4px;
163	}
164
165	body.oled-crimson ::-webkit-scrollbar-thumb:hover {
166	background: var(--crimson);
167	}