Skip to content

Commit e0be1dd

Browse files
satya164satya164
committed
Redesign admonitions and details
1 parent a06375e commit e0be1dd

File tree

1 file changed

+252
-8
lines changed

1 file changed

+252
-8
lines changed

‎src/css/custom.css‎

Lines changed: 252 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,99 @@
7878
--ifm-footer-padding-vertical: var(--ifm-spacing-vertical);
7979
--ifm-tabs-padding-vertical: 0.375rem;
8080

81+
--ifm-color-success-hue: 140;
82+
--ifm-color-success-dark: hsl(var(--ifm-color-success-hue), 68%, 30%);
83+
--ifm-color-success-darker: hsl(var(--ifm-color-success-hue), 72%, 24%);
84+
--ifm-color-success-darkest: hsl(var(--ifm-color-success-hue), 85%, 16%);
85+
--ifm-color-success-light: hsl(var(--ifm-color-success-hue), 55%, 41%);
86+
--ifm-color-success-lighter: hsl(var(--ifm-color-success-hue), 52%, 53%);
87+
--ifm-color-success-lightest: hsl(var(--ifm-color-success-hue), 52%, 70%);
88+
--ifm-color-success-contrast-background: hsl(
89+
var(--ifm-color-success-hue),
90+
74%,
91+
93%
92+
);
93+
--ifm-color-success-contrast-foreground: hsl(
94+
var(--ifm-color-success-hue),
95+
68%,
96+
16%
97+
);
98+
99+
--ifm-color-info-hue: 212;
100+
--ifm-color-info-dark: hsl(var(--ifm-color-info-hue), 92%, 45%);
101+
--ifm-color-info-darker: hsl(var(--ifm-color-info-hue), 92%, 35%);
102+
--ifm-color-info-darkest: hsl(var(--ifm-color-info-hue), 92%, 28%);
103+
--ifm-color-info-light: hsl(var(--ifm-color-info-hue), 100%, 56%);
104+
--ifm-color-info-lighter: hsl(var(--ifm-color-info-hue), 100%, 66%);
105+
--ifm-color-info-lightest: hsl(var(--ifm-color-info-hue), 100%, 75%);
106+
--ifm-color-info-contrast-background: hsl(
107+
var(--ifm-color-info-hue),
108+
100%,
109+
93%
110+
);
111+
--ifm-color-info-contrast-foreground: hsl(
112+
var(--ifm-color-info-hue),
113+
75%,
114+
22%
115+
);
116+
117+
--ifm-color-warning-hue: 40;
118+
--ifm-color-warning-dark: hsl(var(--ifm-color-warning-hue), 100%, 30%);
119+
--ifm-color-warning-darker: hsl(var(--ifm-color-warning-hue), 100%, 24%);
120+
--ifm-color-warning-darkest: hsl(var(--ifm-color-warning-hue), 98%, 20%);
121+
--ifm-color-warning-light: hsl(var(--ifm-color-warning-hue), 100%, 37%);
122+
--ifm-color-warning-lighter: hsl(var(--ifm-color-warning-hue), 70%, 50%);
123+
--ifm-color-warning-lightest: hsl(var(--ifm-color-warning-hue), 75%, 65%);
124+
--ifm-color-warning-contrast-background: hsl(
125+
var(--ifm-color-warning-hue),
126+
100%,
127+
93%
128+
);
129+
--ifm-color-warning-contrast-foreground: hsl(
130+
var(--ifm-color-warning-hue),
131+
100%,
132+
15%
133+
);
134+
135+
--ifm-color-danger-hue: 357;
136+
--ifm-color-danger-dark: hsl(var(--ifm-color-danger-hue), 74%, 47%);
137+
--ifm-color-danger-darker: hsl(var(--ifm-color-danger-hue), 82%, 35%);
138+
--ifm-color-danger-darkest: hsl(var(--ifm-color-danger-hue), 87%, 27%);
139+
--ifm-color-danger-light: hsl(var(--ifm-color-danger-hue), 94%, 62%);
140+
--ifm-color-danger-lighter: hsl(var(--ifm-color-danger-hue), 100%, 75%);
141+
--ifm-color-danger-lightest: hsl(var(--ifm-color-danger-hue), 100%, 83%);
142+
--ifm-color-danger-contrast-background: hsl(
143+
var(--ifm-color-danger-hue),
144+
100%,
145+
96%
146+
);
147+
--ifm-color-danger-contrast-foreground: hsl(
148+
var(--ifm-color-danger-hue),
149+
84%,
150+
22%
151+
);
152+
153+
--ifm-color-secondary-hue: 220;
154+
--ifm-color-secondary-dark: hsl(var(--ifm-color-secondary-hue), 15%, 40%);
155+
--ifm-color-secondary-darker: hsl(var(--ifm-color-secondary-hue), 15%, 32%);
156+
--ifm-color-secondary-darkest: hsl(var(--ifm-color-secondary-hue), 15%, 25%);
157+
--ifm-color-secondary-light: hsl(var(--ifm-color-secondary-hue), 12%, 50%);
158+
--ifm-color-secondary-lighter: hsl(var(--ifm-color-secondary-hue), 10%, 60%);
159+
--ifm-color-secondary-lightest: hsl(var(--ifm-color-secondary-hue), 8%, 75%);
160+
--ifm-color-secondary-contrast-background: hsl(
161+
var(--ifm-color-secondary-hue),
162+
15%,
163+
94%
164+
);
165+
--ifm-color-secondary-contrast-foreground: hsl(
166+
var(--ifm-color-secondary-hue),
167+
15%,
168+
25%
169+
);
170+
81171
--ifm-alert-shadow: none;
82-
--ifm-alert-border-width: 1px;
83-
--ifm-alert-border-left-width: 1px;
172+
--ifm-alert-border-radius: 0;
173+
--ifm-alert-border-left-width: 3px;
84174

85175
--ifm-code-padding-horizontal: 0.3em;
86176

@@ -90,7 +180,7 @@
90180
}
91181

92182
:root[data-theme='dark'] {
93-
--primary-saturation: 35.9%;
183+
--primary-saturation: 55%;
94184
--primary-lightness: 70%;
95185

96186
--ifm-color-primary-dark: hsl(
@@ -129,13 +219,98 @@
129219
91%
130220
);
131221

132-
--ifm-footer-background-color: #25292f;
133-
--ifm-home-color-text: #f7f7ff;
134-
--ifm-home-color-background: #414360;
135-
--ifm-home-color-background-secondary: #585b82;
222+
--ifm-footer-background-color: #1e2530;
223+
--ifm-home-color-text: #f0f4ff;
224+
--ifm-home-color-background: #2d3a4f;
225+
--ifm-home-color-background-secondary: #4a5a72;
136226
--ifm-home-color-highlight: hsl(var(--primary-hue), 100%, 78.6%);
137227
--ifm-home-color-border: #f7f7ff;
138228

229+
--ifm-color-success-dark: hsl(var(--ifm-color-success-hue), 40%, 55%);
230+
--ifm-color-success-darker: hsl(var(--ifm-color-success-hue), 35%, 48%);
231+
--ifm-color-success-darkest: hsl(var(--ifm-color-success-hue), 30%, 40%);
232+
--ifm-color-success-light: hsl(var(--ifm-color-success-hue), 38%, 65%);
233+
--ifm-color-success-lighter: hsl(var(--ifm-color-success-hue), 35%, 75%);
234+
--ifm-color-success-lightest: hsl(var(--ifm-color-success-hue), 30%, 85%);
235+
--ifm-color-success-contrast-background: hsl(
236+
var(--ifm-color-success-hue),
237+
35%,
238+
18%
239+
);
240+
--ifm-color-success-contrast-foreground: hsl(
241+
var(--ifm-color-success-hue),
242+
40%,
243+
85%
244+
);
245+
246+
--ifm-color-info-dark: hsl(var(--ifm-color-info-hue), 60%, 60%);
247+
--ifm-color-info-darker: hsl(var(--ifm-color-info-hue), 55%, 52%);
248+
--ifm-color-info-darkest: hsl(var(--ifm-color-info-hue), 50%, 45%);
249+
--ifm-color-info-light: hsl(var(--ifm-color-info-hue), 58%, 70%);
250+
--ifm-color-info-lighter: hsl(var(--ifm-color-info-hue), 55%, 80%);
251+
--ifm-color-info-lightest: hsl(var(--ifm-color-info-hue), 50%, 88%);
252+
--ifm-color-info-contrast-background: hsl(
253+
var(--ifm-color-info-hue),
254+
45%,
255+
18%
256+
);
257+
--ifm-color-info-contrast-foreground: hsl(
258+
var(--ifm-color-info-hue),
259+
55%,
260+
85%
261+
);
262+
263+
--ifm-color-warning-dark: hsl(var(--ifm-color-warning-hue), 60%, 52%);
264+
--ifm-color-warning-darker: hsl(var(--ifm-color-warning-hue), 55%, 45%);
265+
--ifm-color-warning-darkest: hsl(var(--ifm-color-warning-hue), 50%, 38%);
266+
--ifm-color-warning-light: hsl(var(--ifm-color-warning-hue), 55%, 62%);
267+
--ifm-color-warning-lighter: hsl(var(--ifm-color-warning-hue), 50%, 72%);
268+
--ifm-color-warning-lightest: hsl(var(--ifm-color-warning-hue), 45%, 82%);
269+
--ifm-color-warning-contrast-background: hsl(
270+
var(--ifm-color-warning-hue),
271+
45%,
272+
15%
273+
);
274+
--ifm-color-warning-contrast-foreground: hsl(
275+
var(--ifm-color-warning-hue),
276+
50%,
277+
85%
278+
);
279+
280+
--ifm-color-danger-dark: hsl(var(--ifm-color-danger-hue), 55%, 60%);
281+
--ifm-color-danger-darker: hsl(var(--ifm-color-danger-hue), 50%, 52%);
282+
--ifm-color-danger-darkest: hsl(var(--ifm-color-danger-hue), 45%, 45%);
283+
--ifm-color-danger-light: hsl(var(--ifm-color-danger-hue), 55%, 70%);
284+
--ifm-color-danger-lighter: hsl(var(--ifm-color-danger-hue), 50%, 80%);
285+
--ifm-color-danger-lightest: hsl(var(--ifm-color-danger-hue), 45%, 88%);
286+
--ifm-color-danger-contrast-background: hsl(
287+
var(--ifm-color-danger-hue),
288+
40%,
289+
15%
290+
);
291+
--ifm-color-danger-contrast-foreground: hsl(
292+
var(--ifm-color-danger-hue),
293+
50%,
294+
85%
295+
);
296+
297+
--ifm-color-secondary-dark: hsl(var(--ifm-color-secondary-hue), 12%, 65%);
298+
--ifm-color-secondary-darker: hsl(var(--ifm-color-secondary-hue), 10%, 55%);
299+
--ifm-color-secondary-darkest: hsl(var(--ifm-color-secondary-hue), 8%, 48%);
300+
--ifm-color-secondary-light: hsl(var(--ifm-color-secondary-hue), 10%, 72%);
301+
--ifm-color-secondary-lighter: hsl(var(--ifm-color-secondary-hue), 8%, 80%);
302+
--ifm-color-secondary-lightest: hsl(var(--ifm-color-secondary-hue), 6%, 88%);
303+
--ifm-color-secondary-contrast-background: hsl(
304+
var(--ifm-color-secondary-hue),
305+
12%,
306+
18%
307+
);
308+
--ifm-color-secondary-contrast-foreground: hsl(
309+
var(--ifm-color-secondary-hue),
310+
10%,
311+
85%
312+
);
313+
139314
--docusaurus-highlighted-code-line-bg: hsla(45, 77%, 25%, 0.3);
140315

141316
--codeblock-background-color: #282a35;
@@ -247,7 +422,7 @@ header {
247422
}
248423

249424
[data-theme='dark'] .navbar::before {
250-
background-color: rgba(32, 33, 37, 0.7);
425+
background-color: rgba(24, 25, 26, 0.7);
251426
}
252427

253428
.navbar__inner {
@@ -573,10 +748,79 @@ article p ~ .video-player {
573748
margin-top: 0;
574749
}
575750

751+
details[class^='details_'] {
752+
--ifm-alert-border-color: var(--ifm-toc-border-color);
753+
--ifm-alert-background-color: transparent;
754+
--ifm-alert-padding-vertical: 0.5rem;
755+
--ifm-alert-padding-horizontal: 1rem;
756+
--ifm-alert-border-radius: var(--ifm-global-radius);
757+
--ifm-alert-foreground-color: inherit;
758+
--ifm-link-color: inherit;
759+
--ifm-link-hover-color: inherit;
760+
--ifm-code-background: inherit;
761+
762+
& summary {
763+
font-weight: var(--ifm-font-weight-semibold);
764+
765+
&::marker,
766+
&:-webkit-details-marker {
767+
display: none;
768+
}
769+
770+
&::before {
771+
--chevron-size: 0.5em;
772+
773+
content: '';
774+
top: calc(var(--ifm-alert-padding-vertical) - var(--chevron-size) / 2);
775+
left: calc(-1 * var(--ifm-alert-padding-horizontal) / 2);
776+
width: var(--chevron-size);
777+
height: var(--chevron-size);
778+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")
779+
no-repeat center;
780+
mask-size: 100% 100%;
781+
background-color: currentColor;
782+
transition: transform var(--ifm-transition-fast)
783+
var(--ifm-transition-timing-default);
784+
transform-origin: center;
785+
}
786+
}
787+
788+
&[open] summary::before {
789+
transform: rotate(90deg);
790+
}
791+
792+
& a {
793+
text-decoration-color: transparent;
794+
795+
&:hover {
796+
text-decoration-thickness: var(--ifm-link-hover-decoration-thickness);
797+
text-decoration-color: var(--ifm-link-hover-decoration-color);
798+
}
799+
}
800+
801+
& [class^='collapsibleContent'] {
802+
margin: var(--ifm-alert-padding-vertical)
803+
calc(var(--ifm-alert-padding-horizontal) / 2);
804+
}
805+
}
806+
576807
samp {
577808
display: none;
578809
}
579810

811+
.theme-admonition {
812+
--ifm-alert-padding-vertical: 0;
813+
--ifm-alert-foreground-color: var(--ifm-alert-border-color);
814+
--ifm-code-background: inherit;
815+
816+
background-color: transparent;
817+
color: inherit;
818+
}
819+
820+
.theme-admonition [class^='admonitionHeading'] {
821+
color: var(--ifm-alert-foreground-color);
822+
}
823+
580824
.video-player {
581825
position: relative;
582826
display: inline-block;

0 commit comments

Comments
 (0)