Skip to content

Commit 9474168

Browse files
bhaskar0210sbhaskar0210s
committed
Refactor and simplify
1 parent 07f5fd4 commit 9474168

File tree

1 file changed

+29
-190
lines changed

1 file changed

+29
-190
lines changed

‎docs/stylesheets/custom.css‎

Lines changed: 29 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -15,111 +15,29 @@
1515
*/
1616

1717
/* Index page styling */
18-
.md-grid {
19-
max-width: 80%;
20-
}
21-
.footer {
22-
padding-bottom: 30vh;
23-
}
24-
.centered-logo-text-group {
25-
display: inline-flex;
26-
align-items: center;
27-
gap: 1.5em;
28-
margin-bottom: 0.5em;
29-
vertical-align: middle;
30-
}
31-
.centered-logo-text-group img {
32-
height: auto;
33-
}
34-
.centered-logo-text-group h1 {
35-
margin: 0;
36-
text-align: left;
37-
}
38-
.install-command-container {
39-
max-width: 600px;
40-
margin: 2.5em auto;
41-
padding: 1.5em 2em;
42-
background-color: var(--md-code-bg-color, #f5f5f5);
43-
border-radius: 8px;
44-
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
45-
border-left: 5px solid var(--md-primary-fg-color, #526cfe);
46-
margin-top: 30px;
47-
}
48-
.install-command-container p {
49-
font-size: 1.1em;
50-
color: var(--md-default-fg-color);
51-
margin-bottom: -10px;
52-
margin-top: -10px;
53-
}
54-
.install-command-container p code {
55-
font-size: 1.1em;
56-
font-weight: 600;
57-
padding: 0.3em 0.6em;
58-
background-color: var(--md-code-fg-color--light);
59-
text-align: center;
60-
border-radius: 4px;
61-
display: inline-block;
62-
line-height: 1.4;
63-
}
64-
#centered-install-tabs .tabbed-labels.tabbed-labels--linked {
65-
display: flex;
66-
justify-content: center;
67-
width: 100%;
68-
} /* Centered install tabs in the homepage*/
69-
#centered-install-tabs .tabbed-labels {
70-
display: flex;
71-
justify-content: center;
72-
width: 100%;
73-
} /* Centered install tabs in the homepage*/
18+
.md-grid { max-width: 80%; }
19+
.footer { padding-bottom: 30vh; }
20+
.centered-logo-text-group { display: inline-flex; align-items: center; gap: 1.5em; margin-bottom: 0.5em; vertical-align: middle; }
21+
.centered-logo-text-group img { height: auto; }
22+
.centered-logo-text-group h1 { margin: 0; text-align: left; }
23+
.install-command-container { max-width: 600px; margin: 2.5em auto; padding: 1.5em 2em; background-color: var(--md-code-bg-color, #f5f5f5); border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.05); border-left: 5px solid var(--md-primary-fg-color, #526cfe); margin-top: 30px; }
24+
.install-command-container p { font-size: 1.1em; color: var(--md-default-fg-color); margin-bottom: -10px; margin-top: -10px; }
25+
.install-command-container p code { font-size: 1.1em; font-weight: 600; padding: 0.3em 0.6em; background-color: var(--md-code-fg-color--light); text-align: center; border-radius: 4px; display: inline-block; line-height: 1.4; }
26+
#centered-install-tabs .tabbed-labels.tabbed-labels--linked { display: flex; justify-content: center; width: 100%; } /* Centered install tabs in the homepage*/
27+
#centered-install-tabs .tabbed-labels { display: flex; justify-content: center; width: 100%; } /* Centered install tabs in the homepage*/
7428

7529
/* YouTube Video Grid Layout - Community page*/
76-
.video-grid {
77-
display: flex;
78-
flex-wrap: wrap;
79-
gap: 20px;
80-
margin-top: 1.5em;
81-
margin-bottom: 1.5em;
82-
}
30+
.video-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 1.5em; margin-bottom: 1.5em; }
8331

8432
/* For 3 items per row: 100% / 3 = 33.333% */
85-
.video-item {
86-
flex: 0 1 calc(33.333% - 13.333px);
87-
box-sizing: border-box;
88-
min-width: 250px;
89-
}
90-
.video-container {
91-
position: relative;
92-
padding-bottom: 56.25%;
93-
height: 0;
94-
overflow: hidden;
95-
max-width: 100%;
96-
background: #f0f0f0;
97-
border-radius: 4px;
98-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
99-
}
100-
.video-container iframe {
101-
position: absolute;
102-
top: 0;
103-
left: 0;
104-
width: 100%;
105-
height: 100%;
106-
border: 0;
107-
}
108-
@media (max-width: 992px) {
109-
.video-item {
110-
flex: 0 1 calc(50% - 10px);
111-
}
112-
}
113-
@media (max-width: 600px) {
114-
.video-item {
115-
flex: 0 1 100%;
116-
}
117-
}
33+
.video-item { flex: 0 1 calc(33.333% - 13.333px); box-sizing: border-box; min-width: 250px; }
34+
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #f0f0f0; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
35+
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
36+
@media (max-width: 992px) { .video-item { flex: 0 1 calc(50% - 10px); } }
37+
@media (max-width: 600px) { .video-item { flex: 0 1 100%; } }
11838

11939
/* YouTube icon */
120-
.youtube-red-icon svg {
121-
fill: #ff0000 !important;
122-
}
40+
.youtube-red-icon svg { fill: #FF0000 !important; }
12341

12442
/* Replace full site name with "ADK" on mobile */
12543
@media screen and (max-width: 76.1875em) {
@@ -162,130 +80,51 @@
16280

16381
/* Style for the main navigation section titles */
16482
nav.md-nav--primary .md-nav__item--section > .md-nav__link {
165-
color: var(--md-primary-fg-color);
83+
color: #1565C0;
16684
font-weight: bold;
16785
font-size: 0.8rem;
16886
}
16987

17088
/* Ensure navigation bar and sidebar respect dark mode */
171-
nav.md-nav--primary,
172-
.md-sidebar--primary {
173-
background-color: var(--md-default-bg-color) !important;
174-
}
175-
176-
/* Explicitly set dark mode background for navigation and sidebar */
17789
[data-md-color-scheme="slate"] nav.md-nav--primary,
178-
[data-md-color-scheme="slate"] .md-sidebar--primary {
179-
background-color: var(--md-default-bg-color) !important;
180-
}
181-
182-
/* Additional specificity for sidebar inner elements */
183-
.md-sidebar--primary .md-sidebar__scrollwrap,
184-
.md-sidebar--primary .md-sidebar__inner {
90+
[data-md-color-scheme="slate"] .md-sidebar--primary,
91+
[data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__scrollwrap,
92+
[data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__inner {
18593
background-color: var(--md-default-bg-color) !important;
18694
}
18795

18896
/* Fix top navigation bar (header) for dark mode */
189-
/* Material theme uses --md-primary-fg-color for header, we need to override it */
190-
.md-header {
191-
background-color: var(--md-default-bg-color) !important;
192-
}
193-
194-
[data-md-color-scheme="slate"] .md-header {
195-
background-color: var(--md-default-bg-color) !important;
196-
color: var(--md-default-fg-color) !important;
197-
}
198-
199-
/* Also fix header inner container */
200-
.md-header__inner {
201-
background-color: var(--md-default-bg-color) !important;
202-
}
203-
97+
[data-md-color-scheme="slate"] .md-header,
20498
[data-md-color-scheme="slate"] .md-header__inner {
20599
background-color: var(--md-default-bg-color) !important;
206-
color: var(--md-default-fg-color) !important;
207-
}
208-
209-
/* Fix header text elements for dark mode */
210-
[data-md-color-scheme="slate"] .md-header__title,
211-
[data-md-color-scheme="slate"] .md-header__topic,
212-
[data-md-color-scheme="slate"] .md-header__ellipsis,
213-
[data-md-color-scheme="slate"] .md-header__button,
214-
[data-md-color-scheme="slate"] .md-header__button svg,
215-
[data-md-color-scheme="slate"] .md-header__button path {
216-
color: var(--md-default-fg-color) !important;
217-
fill: var(--md-default-fg-color) !important;
218100
}
219101

220-
/* Fix all header links and text */
221-
[data-md-color-scheme="slate"] .md-header a,
222-
[data-md-color-scheme="slate"] .md-header__title a,
223-
[data-md-color-scheme="slate"] .md-header__topic a,
224-
[data-md-color-scheme="slate"] .md-header__ellipsis a,
225-
[data-md-color-scheme="slate"] .md-header__source a,
226-
[data-md-color-scheme="slate"] .md-header__nav a {
102+
/* Fix all header text, links, buttons, labels, and general content */
103+
[data-md-color-scheme="slate"] .md-header,
104+
[data-md-color-scheme="slate"] .md-header * {
227105
color: var(--md-default-fg-color) !important;
228106
}
229107

230-
/* Fix header icons and SVG elements */
108+
/* Fix header SVG icons */
231109
[data-md-color-scheme="slate"] .md-header svg,
232-
[data-md-color-scheme="slate"] .md-header path,
233-
[data-md-color-scheme="slate"] .md-header__button svg,
234-
[data-md-color-scheme="slate"] .md-header__button path,
235-
[data-md-color-scheme="slate"] .md-header__icon,
236-
[data-md-color-scheme="slate"] .md-header .md-icon {
237-
color: var(--md-default-fg-color) !important;
110+
[data-md-color-scheme="slate"] .md-header path {
238111
fill: var(--md-default-fg-color) !important;
239-
stroke: var(--md-default-fg-color) !important;
240-
}
241-
242-
/* Fix header labels */
243-
[data-md-color-scheme="slate"] .md-header label,
244-
[data-md-color-scheme="slate"] .md-header__button label {
245-
color: var(--md-default-fg-color) !important;
246112
}
247113

248-
/* Fix search input fields in header */
249-
[data-md-color-scheme="slate"] .md-header input,
250-
[data-md-color-scheme="slate"] .md-header input[type="text"],
251-
[data-md-color-scheme="slate"] .md-header input[type="search"],
252-
[data-md-color-scheme="slate"] .md-search__input,
253-
[data-md-color-scheme="slate"] .md-search__input::placeholder {
114+
/* Fix search input fields */
115+
[data-md-color-scheme="slate"] .md-search__input {
254116
color: var(--md-default-fg-color) !important;
255117
background-color: var(--md-default-bg-color) !important;
256118
border-color: var(--md-default-fg-color--light) !important;
257119
}
258120

259121
[data-md-color-scheme="slate"] .md-search__input::placeholder {
260122
color: var(--md-default-fg-color--light) !important;
261-
opacity: 0.7;
262123
}
263124

264125
/* Fix search icon */
265-
[data-md-color-scheme="slate"] .md-search__icon,
266126
[data-md-color-scheme="slate"] .md-search__icon svg,
267127
[data-md-color-scheme="slate"] .md-search__icon path {
268-
color: var(--md-default-fg-color) !important;
269-
fill: var(--md-default-fg-color) !important;
270-
}
271-
272-
/* Fix header source/repository info */
273-
[data-md-color-scheme="slate"] .md-header__source {
274-
color: var(--md-default-fg-color) !important;
275-
}
276-
277-
/* Fix all text content in header */
278-
[data-md-color-scheme="slate"] .md-header span,
279-
[data-md-color-scheme="slate"] .md-header div,
280-
[data-md-color-scheme="slate"] .md-header p {
281-
color: var(--md-default-fg-color) !important;
282-
}
283-
284-
/* Fix header logo */
285-
[data-md-color-scheme="slate"] .md-header__button.md-logo,
286-
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
287-
[data-md-color-scheme="slate"] .md-header__button.md-logo svg {
288-
color: var(--md-default-fg-color) !important;
289128
fill: var(--md-default-fg-color) !important;
290129
}
291130
/* Community Resources cards */

0 commit comments

Comments
 (0)