Skip to content

Commit c60a05b

Browse files
S-r-f-lS-r-f-l
committed
refactor: update color theme to light professional with blue-green undertones
1 parent 10b3893 commit c60a05b

1 file changed

Lines changed: 133 additions & 92 deletions

File tree

‎website/src/css/custom.css‎

Lines changed: 133 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
11
/**
2-
* Very Subtle Professional RMMV Color Theme
2+
* Light Professional RMMV Theme with Blue-Green Undertones
33
*/
44

55
:root {
6-
/* Much more muted primary colors */
7-
--ifm-color-primary: #475569;
8-
--ifm-color-primary-dark: #334155;
9-
--ifm-color-primary-darker: #1e293b;
10-
--ifm-color-primary-darkest: #0f172a;
11-
--ifm-color-primary-light: #64748b;
12-
--ifm-color-primary-lighter: #94a3b8;
13-
--ifm-color-primary-lightest: #cbd5e1;
6+
/* Blue with green undertones */
7+
--ifm-color-primary: #0891b2;
8+
--ifm-color-primary-dark: #0e7490;
9+
--ifm-color-primary-darker: #155e75;
10+
--ifm-color-primary-darkest: #164e63;
11+
--ifm-color-primary-light: #06b6d4;
12+
--ifm-color-primary-lighter: #22d3ee;
13+
--ifm-color-primary-lightest: #a5f3fc;
1414

15-
/* Very subtle background colors */
15+
/* Very light backgrounds with subtle green-blue tints */
1616
--ifm-background-color: #ffffff;
17-
--ifm-background-surface-color: #f8fafc;
18-
--ifm-navbar-background-color: #374151;
19-
--ifm-footer-background-color: #1f2937;
17+
--ifm-background-surface-color: #f8fcff;
18+
--ifm-navbar-background-color: #0891b2;
19+
--ifm-footer-background-color: #1e293b;
2020
--ifm-code-font-size: 95%;
2121
}
2222

23-
/* Muted dark theme */
23+
/* Light dark theme */
2424
[data-theme='dark'] {
25-
--ifm-color-primary: #94a3b8;
26-
--ifm-color-primary-dark: #64748b;
27-
--ifm-color-primary-darker: #475569;
28-
--ifm-color-primary-darkest: #334155;
29-
--ifm-color-primary-light: #cbd5e1;
30-
--ifm-color-primary-lighter: #e2e8f0;
31-
--ifm-color-primary-lightest: #f1f5f9;
25+
--ifm-color-primary: #22d3ee;
26+
--ifm-color-primary-dark: #06b6d4;
27+
--ifm-color-primary-darker: #0891b2;
28+
--ifm-color-primary-darkest: #0e7490;
29+
--ifm-color-primary-light: #67e8f9;
30+
--ifm-color-primary-lighter: #a5f3fc;
31+
--ifm-color-primary-lightest: #cffafe;
3232

3333
--ifm-background-color: #0f172a;
3434
--ifm-background-surface-color: #1e293b;
35-
--ifm-navbar-background-color: #334155;
35+
--ifm-navbar-background-color: #155e75;
3636
--ifm-footer-background-color: #0f172a;
3737
}
3838

39-
/* Subtle navbar */
39+
/* Blue-green navbar */
4040
.navbar {
41-
background-color: var(--ifm-navbar-background-color);
42-
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
43-
border-bottom: 1px solid #e5e7eb;
41+
background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
42+
box-shadow: 0 2px 4px rgba(8, 145, 178, 0.15);
43+
border-bottom: none;
4444
}
4545

4646
.navbar__title {
4747
color: white !important;
48-
font-weight: 500;
48+
font-weight: 600;
4949
}
5050

5151
.navbar__item--right .navbar__link {
52-
color: rgba(255,255,255,0.85) !important;
52+
color: rgba(255,255,255,0.9) !important;
5353
}
5454

5555
.navbar__item--right .navbar__link:hover {
@@ -59,177 +59,219 @@
5959
/* Subtle footer */
6060
.footer {
6161
background-color: var(--ifm-footer-background-color);
62-
border-top: 1px solid #e5e7eb;
62+
border-top: 1px solid #e0f2fe;
6363
}
6464

6565
[data-theme='dark'] .footer {
6666
border-top: 1px solid #374151;
6767
}
6868

6969
.footer__title {
70-
color: #f9fafb;
70+
color: #f1f5f9;
7171
font-weight: 500;
7272
}
7373

7474
.footer__item {
75-
color: #d1d5db;
75+
color: #cbd5e1;
7676
}
7777

7878
.footer__link-item:hover {
79-
color: #94a3b8;
79+
color: #22d3ee;
8080
}
8181

82-
/* Very subtle content styling */
82+
/* Very light content styling */
8383
.main-wrapper {
84-
background-color: var(--ifm-background-color);
84+
background-color: #ffffff;
8585
}
8686

87-
/* Minimal card styling - almost no blue */
87+
/* Light card styling with subtle blue-green hints */
8888
article {
89-
background: var(--ifm-background-surface-color);
90-
border-radius: 6px;
91-
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
92-
border: 1px solid #f1f5f9;
89+
background: #ffffff;
90+
border-radius: 8px;
91+
box-shadow: 0 1px 3px rgba(8, 145, 178, 0.08);
92+
border: 1px solid #f0f9ff;
9393
padding: 2rem;
9494
margin: 1rem 0;
9595
}
9696

9797
[data-theme='dark'] article {
98+
background: var(--ifm-background-surface-color);
9899
border: 1px solid #374151;
100+
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
99101
}
100102

101-
/* Very subtle sidebar */
103+
/* Light sidebar with blue-green accents */
102104
.theme-doc-sidebar-container {
103-
background-color: var(--ifm-background-surface-color);
104-
border-right: 1px solid #f1f5f9;
105+
background-color: #f8fcff;
106+
border-right: 1px solid #e0f2fe;
105107
}
106108

107109
[data-theme='dark'] .theme-doc-sidebar-container {
110+
background-color: var(--ifm-background-surface-color);
108111
border-right: 1px solid #374151;
109112
}
110113

111114
.theme-doc-sidebar-item-link {
112-
border-radius: 4px;
113-
margin: 1px 0;
115+
border-radius: 6px;
116+
margin: 2px 0;
114117
}
115118

116119
.theme-doc-sidebar-item-link:hover {
117-
background-color: rgba(71, 85, 105, 0.05);
120+
background-color: rgba(8, 145, 178, 0.06);
118121
}
119122

120123
.theme-doc-sidebar-item-link-level-1.theme-doc-sidebar-item-link--active {
121-
background-color: rgba(71, 85, 105, 0.08);
122-
border-left: 2px solid var(--ifm-color-primary);
124+
background-color: rgba(8, 145, 178, 0.1);
125+
border-left: 3px solid var(--ifm-color-primary);
123126
}
124127

125-
/* Very subtle table styling */
128+
/* Light table styling */
126129
table {
127130
border-collapse: collapse;
128-
border-radius: 6px;
131+
border-radius: 8px;
129132
overflow: hidden;
130-
border: 1px solid #e2e8f0;
133+
border: 1px solid #e0f2fe;
134+
background: #ffffff;
135+
box-shadow: 0 1px 3px rgba(8, 145, 178, 0.05);
131136
}
132137

133138
[data-theme='dark'] table {
134139
border: 1px solid #374151;
140+
background: var(--ifm-background-surface-color);
135141
}
136142

137143
table th {
138-
background-color: #f8fafc;
139-
color: #374151;
140-
font-weight: 500;
144+
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
145+
color: #164e63;
146+
font-weight: 600;
147+
border-bottom: 2px solid var(--ifm-color-primary);
141148
}
142149

143150
[data-theme='dark'] table th {
144151
background-color: #374151;
145-
color: #f9fafb;
152+
color: #f1f5f9;
146153
}
147154

148155
table tr:nth-child(even) {
149-
background-color: #f8fafc;
156+
background-color: #f8fcff;
150157
}
151158

152159
[data-theme='dark'] table tr:nth-child(even) {
153160
background-color: #1e293b;
154161
}
155162

156-
/* Subtle code blocks */
163+
/* Light code blocks */
157164
.theme-code-block {
158-
border-radius: 6px;
159-
border: 1px solid #e2e8f0;
165+
border-radius: 8px;
166+
border: 1px solid #e0f2fe;
167+
background: #f8fcff;
160168
}
161169

162170
[data-theme='dark'] .theme-code-block {
163171
border: 1px solid #374151;
164172
}
165173

166-
/* Neutral headings */
174+
/* Light headings with blue-green hints */
167175
h1, h2, h3, h4, h5, h6 {
168176
color: #1e293b;
169177
}
170178

179+
h1 {
180+
color: #155e75;
181+
}
182+
183+
h2 {
184+
color: #164e63;
185+
}
186+
171187
[data-theme='dark'] h1,
172188
[data-theme='dark'] h2,
173189
[data-theme='dark'] h3,
174190
[data-theme='dark'] h4,
175191
[data-theme='dark'] h5,
176192
[data-theme='dark'] h6 {
177-
color: #f1f5f9;
193+
color: #e2e8f0;
178194
}
179195

180-
/* More subtle links */
196+
/* Blue-green links */
181197
a {
182-
color: #475569;
198+
color: var(--ifm-color-primary);
183199
text-decoration: none;
184200
}
185201

186202
a:hover {
187-
color: #334155;
203+
color: var(--ifm-color-primary-dark);
188204
text-decoration: underline;
189205
}
190206

191-
[data-theme='dark'] a {
192-
color: #94a3b8;
193-
}
194-
195-
[data-theme='dark'] a:hover {
196-
color: #cbd5e1;
197-
}
198-
199-
/* Minimal pagination */
207+
/* Light pagination with blue-green accents */
200208
.pagination-nav__link {
201-
border-radius: 6px;
202-
border: 1px solid #e2e8f0;
203-
transition: all 0.15s ease;
209+
border-radius: 8px;
210+
border: 1px solid #e0f2fe;
211+
transition: all 0.2s ease;
212+
background: #ffffff;
204213
}
205214

206215
[data-theme='dark'] .pagination-nav__link {
207216
border: 1px solid #374151;
217+
background: var(--ifm-background-surface-color);
208218
}
209219

210220
.pagination-nav__link:hover {
211-
border-color: #94a3b8;
212-
box-shadow: 0 1px 2px rgba(71, 85, 105, 0.05);
221+
border-color: var(--ifm-color-primary);
222+
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.15);
223+
transform: translateY(-1px);
213224
}
214225

215-
/* Very subtle search */
226+
/* Light search */
216227
.DocSearch-Button {
217-
border-radius: 4px;
218-
background: rgba(255,255,255,0.05);
219-
border: 1px solid rgba(255,255,255,0.1);
228+
border-radius: 6px;
229+
background: rgba(255,255,255,0.15);
230+
border: 1px solid rgba(255,255,255,0.3);
220231
}
221232

222233
.DocSearch-Button:hover {
223-
background: rgba(255,255,255,0.08);
234+
background: rgba(255,255,255,0.25);
235+
}
236+
237+
/* Bright content text */
238+
.markdown {
239+
color: #334155;
240+
background: transparent;
241+
}
242+
243+
[data-theme='dark'] .markdown {
244+
color: #cbd5e1;
245+
}
246+
247+
/* Light alerts with blue-green accents */
248+
.alert {
249+
border-radius: 8px;
250+
border-left: 4px solid var(--ifm-color-primary);
251+
background: rgba(8, 145, 178, 0.05);
252+
}
253+
254+
.alert--info {
255+
border-left-color: var(--ifm-color-primary);
256+
background: rgba(8, 145, 178, 0.05);
257+
}
258+
259+
.alert--success {
260+
border-left-color: #10b981;
261+
background: rgba(16, 185, 129, 0.05);
262+
}
263+
264+
.alert--warning {
265+
border-left-color: #f59e0b;
266+
background: rgba(245, 158, 11, 0.05);
224267
}
225268

226-
/* Remove any remaining shine effects */
227-
* {
228-
-webkit-font-smoothing: antialiased;
229-
-moz-osx-font-smoothing: grayscale;
269+
.alert--danger {
270+
border-left-color: #ef4444;
271+
background: rgba(239, 68, 68, 0.05);
230272
}
231273

232-
/* Content area specific - make center very neutral */
274+
/* Ensure everything is bright and accessible */
233275
.container {
234276
background-color: transparent;
235277
}
@@ -242,11 +284,10 @@ a:hover {
242284
background-color: transparent;
243285
}
244286

245-
/* Make sure content is very neutral */
246-
.markdown {
247-
color: #374151;
287+
.docusaurus-wrapper {
288+
background-color: #ffffff;
248289
}
249290

250-
[data-theme='dark'] .markdown {
251-
color: #d1d5db;
291+
[data-theme='dark'] .docusaurus-wrapper {
292+
background-color: var(--ifm-background-color);
252293
}

0 commit comments

Comments
 (0)