schoolbox web extension :)
42willow.github.io
1body,
2p,
3h1,
4h2,
5h3,
6h4,
7.tab-bar,
8.profile-tabs .subheader {
9 color: hsl(var(--ctp-text));
10}
11
12.title-section > h1,
13::placeholder {
14 color: hsl(var(--ctp-text)) !important;
15}
16
17/* activity feed */
18.feed,
19.activity-feed,
20.feed-column,
21.feed-item,
22.feed .subheader {
23 background-color: hsl(var(--ctp-surface0)) !important;
24 border: none;
25}
26
27.feed > section {
28 border: none;
29}
30
31/* error messages */
32.error-state section h1,
33.error-state section h2,
34.error-state section .Schoolbox_Calendar_Component_Dashboard_Controller .fc-widget-header .fc-list-heading-main,
35.Schoolbox_Calendar_Component_Dashboard_Controller .fc-widget-header .error-state section .fc-list-heading-main {
36 color: hsl(var(--ctp-red));
37}
38
39/* empty state */
40/* applies to empty calendar widget on homepage */
41.empty-state p,
42.empty-state [class^="icon-"] {
43 color: hsl(var(--ctp-subtext0));
44}
45
46/* blockquotes */
47blockquote {
48 background-color: hsl(var(--ctp-surface1));
49 color: hsl(var(--ctp-text)) !important;
50 border-left: 6px solid hsl(var(--ctp-accent)) !important;
51}
52blockquote p,
53blockquote::before {
54 color: hsl(var(--ctp-text)) !important;
55}
56
57/* checkboxes */
58.checklist input[type="radio"]:not(.plain) + label:after,
59.checklist input[type="checkbox"]:not(.plain) + label:after,
60.radiolist input[type="radio"]:not(.plain) + label:after,
61.radiolist input[type="checkbox"]:not(.plain) + label:after,
62input[type="checkbox"]:not(.plain) + label.checkbox-label:after,
63body.login input[type="checkbox"]:not(.plain) + label:after {
64 background-color: hsl(var(--ctp-surface2));
65}
66
67.checklist input[type="radio"]:not(.plain):not(:disabled) + label:hover:after,
68.checklist input[type="checkbox"]:not(.plain):not(:disabled) + label:hover:after,
69.radiolist input[type="radio"]:not(.plain):not(:disabled) + label:hover:after,
70.radiolist input[type="checkbox"]:not(.plain):not(:disabled) + label:hover:after {
71 color: hsl(var(--ctp-text));
72}
73
74.progress-tick,
75.action-list nav a.progress-tick,
76ul.az-list nav a.progress-tick,
77ul.az-error-list nav a.progress-tick {
78 background-color: hsl(var(--ctp-surface2));
79}
80
81input[type="checkbox"]:not(.plain):not(:disabled) + label.checkbox-label:hover:before {
82 background-color: hsl(var(--ctp-surface1));
83}
84
85/* sidebar */
86#nav {
87 background: hsl(var(--ctp-mantle)) !important;
88}
89
90/* drop down menus */
91.filter-dropdown .filter-component {
92 background-color: hsl(var(--ctp-surface0));
93 border: none;
94}
95.checklist.item.filter-component .f-dropdown.content {
96 background-color: hsl(var(--ctp-surface0));
97}
98
99/* goals */
100.badge-grid .badge,
101.badge-grid .badge .card-feature-image {
102 background-color: hsl(var(--ctp-surface0));
103 border-color: hsl(var(--ctp-overlay1));
104 border-bottom: 1px solid hsl(var(--ctp-overlay1));
105}
106
107/* date picker (flatpickr) */
108.adtp .flatpickr-calendar,
109.adtp .flatpickr-innerContainer {
110 border: none;
111}
112
113.flatpickr-calendar,
114.flatpickr-day,
115span.flatpickr-weekday {
116 background: hsl(var(--ctp-base));
117 color: hsl(var(--ctp-text));
118}
119.adtp .flatpickr-day.selected,
120.adtp .flatpickr-day.selected:focus,
121.adtp .flatpickr-day.selected:hover,
122.adtp .flatpickr-day.selected.prevMonthDay,
123.adtp .flatpickr-day.selected.nextMonthDay {
124 color: hsl(var(--ctp-base));
125}
126.adtp .flatpickr-day.inRange,
127.adtp .flatpickr-day.prevMonthDay.inRange,
128.adtp .flatpickr-day.nextMonthDay.inRange,
129.adtp .flatpickr-day.today.inRange,
130.adtp .flatpickr-day.prevMonthDay.today.inRange,
131.adtp .flatpickr-day.nextMonthDay.today.inRange,
132.adtp .flatpickr-day:hover,
133.adtp .flatpickr-day:hover,
134.adtp .flatpickr-day.nextMonthDay:hover,
135.adtp .flatpickr-day:focus,
136.adtp .flatpickr-day.prevMonthDay:focus,
137.adtp .flatpickr-day.nextMonthDay:focus {
138 background: hsl(var(--ctp-surface0));
139}
140.flatpickr-months .flatpickr-prev-month,
141.flatpickr-months .flatpickr-next-month {
142 fill: hsl(var(--ctp-accent));
143 color: hsl(var(--ctp-accent));
144}
145.flatpickr-months .flatpickr-month {
146 color: hsl(var(--ctp-accent));
147}
148.flatpickr-day.flatpickr-disabled,
149.flatpickr-day.flatpickr-disabled:hover,
150.flatpickr-day.prevMonthDay,
151.flatpickr-day.nextMonthDay,
152.flatpickr-day.notAllowed,
153.flatpickr-day.notAllowed.prevMonthDay,
154.flatpickr-day.notAllowed.nextMonthDay {
155 color: hsl(var(--ctp-overlay1));
156}
157
158/* settings/messages */
159.alert-box,
160.eotc-status,
161.alert-box-icon {
162 background-color: hsl(var(--ctp-surface0));
163 color: hsl(var(--ctp-text));
164}
165
166/* groups page buttons */
167.group-actions[data-v-2e9f597c] {
168 background: hsl(var(--ctp-surface0)) !important;
169}
170
171/* modals */
172/* calendar -> event popups */
173/* confirmation dialogues */
174.reveal-modal {
175 background-color: hsl(var(--ctp-base));
176}
177.reveal-modal .close-reveal-modal {
178 color: hsl(var(--ctp-accent));
179}
180.component-action section {
181 background-color: hsl(var(--ctp-surface0));
182}
183
184/* calendar */
185table {
186 background: hsl(var(--ctp-surface0));
187}
188table thead {
189 background: hsl(var(--ctp-surface1));
190}
191.fc .fc-col-header-cell a {
192 color: hsl(var(--ctp-text)) !important;
193}
194/* table *:not(.fc-list-event-dot) */
195table * {
196 border: none !important;
197}
198.fc-toolbar {
199 border-bottom: none !important;
200}
201.fc .fc-col-header-cell.fc-day-today > div,
202.fc .fc-daygrid-day.fc-day-today {
203 background-color: hsl(var(--ctp-surface1)) !important;
204}
205
206/* account menu */
207#account-content {
208 overflow: hidden;
209}
210.account-menu-mobile .separator,
211.account-drop .separator {
212 color: hsl(var(--ctp-accent));
213}
214
215/* side nav / news -> right hand side */
216.side-nav {
217 background-color: hsl(var(--ctp-surface0));
218}
219.side-nav
220 li
221 a:not(.button):not(.adtp-btn):not(button):not([type="submit"]):not(a.submit):not(button.submit):not(
222 .show-ckeditor-button
223 ):hover,
224.side-nav
225 li
226 a:not(.button):not(.adtp-btn):not(button):not([type="submit"]):not(a.submit):not(button.submit):not(
227 .show-ckeditor-button
228 ):focus {
229 color: hsl(var(--ctp-accent), 0.7);
230}
231
232/* notifications */
233.right-off-canvas-menu ul.off-canvas-list label,
234.right-small a[data-unread]:not([data-unread="0"]),
235#msgs[data-unread]:not([data-unread="0"]) #right-menu-dock,
236.right-off-canvas-menu ul.off-canvas-list #notification-toggle-full {
237 background-color: hsl(var(--ctp-red));
238 color: hsl(var(--ctp-mantle));
239}
240ul.off-canvas-list li a:not([data-pwa-action="retryNotifPrompt"]):active {
241 background: none;
242}
243#msg-content .list-item > div:active {
244 background: hsl(var(--ctp-overlay0));
245}
246
247/* notification settings button */
248a.settings-button {
249 padding: 0.5rem !important;
250}
251.right-off-canvas-menu[data-unread="0"] .settings-button {
252 color: hsl(var(--ctp-text));
253}
254.right-off-canvas-menu .settings-button {
255 color: hsl(var(--ctp-mantle));
256}
257
258#pwaPrompt {
259 background: hsl(var(--ctp-surface1));
260 border: none;
261}
262
263/* drop down menus */
264#component-layout {
265 --left-head-bg: hsl(var(--ctp-accent)) !important;
266 --right-head-bg: hsl(var(--ctp-accent)) !important;
267 --top-head-bg: hsl(var(--ctp-accent)) !important;
268 --top-head-font: hsl(var(--ctp-base)) !important;
269 --left-head-font: hsl(var(--ctp-base)) !important;
270 --right-head-font: hsl(var(--ctp-base)) !important;
271 --top-bg-primary: hsl(var(--ctp-base)) !important;
272 --left-bg-primary: hsl(var(--ctp-surface1)) !important;
273 --right-bg-primary: hsl(var(--ctp-surface0)) !important;
274 --left-font-primary: hsl(var(--ctp-text)) !important;
275}
276
277/* three dot menu */
278#tab-control .separator {
279 background-color: hsl(var(--ctp-surface1));
280}
281
282/* highlights in search menu */
283mark {
284 background-color: hsl(var(--ctp-accent));
285 color: hsl(var(--ctp-mantle));
286}
287
288/* form borders */
289input:focus,
290textarea:focus,
291select:focus,
292input:not([type]):focus,
293input[type="text"]:focus,
294input[type="password"]:focus,
295input[type="date"]:focus,
296input[type="datetime"]:focus,
297input[type="datetime-local"]:focus,
298input[type="month"]:focus,
299input[type="week"]:focus,
300input[type="email"]:focus,
301input[type="number"]:focus,
302input[type="search"]:focus,
303input[type="tel"]:focus,
304input[type="time"]:focus,
305input[type="url"]:focus,
306input[type="color"]:focus,
307textarea:focus,
308.ck.ck-content.ck-editor__editable.ck-focused,
309.ck.ck-editor__main .ck-source-editing-area textarea:focus {
310 border-color: hsl(var(--ctp-accent)) !important;
311}
312
313/* submit buttons */
314[type="submit"]:hover,
315.flex-list.buttons a.submit:hover,
316.flex-list.buttons button.submit:hover,
317a.submit:hover,
318button.submit:hover,
319[type="submit"]:focus,
320.flex-list.buttons a.submit:focus,
321.flex-list.buttons button.submit:focus,
322a.submit:focus,
323button.submit:focus {
324 background-color: hsl(var(--ctp-accent), 0.8);
325}
326
327/* upload dialog boxes */
328.attachment-browser-container .attachment-browser-filesystems li.active > a {
329 background: hsl(var(--ctp-surface1));
330}
331.attachment-browser-container .attachment-browser-filesystems ul {
332 box-shadow: none;
333}
334#ab-upload .dz-preview {
335 background-color: hsl(var(--ctp-surface1));
336}
337.side-nav li.divider {
338 border-color: hsl(var(--ctp-surface0));
339}
340
341/* recording tab of upload dialog */
342.pseudo-video[data-v-037f4389] {
343 background-color: hsl(var(--ctp-surface0)) !important;
344}
345data-v-037f4389::before,
346data-v-037f4389.menu-item {
347 background-color: hsl(var(--ctp-surface1)) !important;
348 color: hsl(var(--ctp-text)) !important;
349 border: none;
350}
351
352/* form inputs */
353.selectize-input,
354.selectize-control.single .selectize-input.input-active {
355 background: hsl(var(--ctp-surface0));
356}
357
358/* dropdowns */
359.selectize-dropdown {
360 background: hsl(var(--ctp-surface1));
361 color: hsl(var(--ctp-text));
362}
363select {
364 background-color: hsl(var(--ctp-base));
365 color: hsl(var(--ctp-text));
366}
367
368/* attach buttons */
369.dzone {
370 background: none !important;
371}
372
373/* labels */
374label {
375 color: hsl(var(--ctp-text));
376}
377
378/* boxes */
379.editPanel.socialstream-new-post,
380.content,
381.information-lis,
382.empty-state,
383.empty-state-flex-centered,
384.card,
385.show-ckeditor-button,
386.v-card,
387.profile-tabs .classes-groups .v-card {
388 background-color: hsl(var(--ctp-surface0));
389 border: none;
390}
391
392/* profile accordion on small viewport */
393.left-off-canvas-menu .account-menu-mobile .accordion-navigation .profile-drop {
394 background-color: var(--accounts-menu-background) !important;
395}
396
397/* submissions text input */
398.ck.ck-button:not(.ck-disabled, .ck-color-grid__tile):hover,
399a.ck.ck-button:not(.ck-disabled, .ck-color-grid__tile):hover {
400 background-color: hsl(var(--ctp-surface1)) !important;
401}
402
403/* button colours */
404.ck.ck-button.ck-on.ck-dropdown__button {
405 background-color: hsl(var(--ctp-surface1)) !important;
406}
407
408/* button colours when already selected */
409.ck.ck-button.ck-on,
410a.ck.ck-button.ck-on {
411 background-color: hsl(var(--ctp-surface2)) !important;
412 color: hsl(var(--ctp-text)) !important;
413}
414
415/* styles drop-down menu */
416.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label {
417 background-color: hsl(var(--ctp-surface0)) !important;
418 color: hsl(var(--ctp-text)) !important;
419}
420
421/* find and replace fields */
422.ck.ck-dropdown__panel input.ck.ck-input,
423.ck.ck-balloon-panel input.ck.ck-input,
424.ck.ck-dropdown__panel input.ck.ck-input:focus,
425.ck.ck-balloon-panel input.ck.ck-input:focus {
426 background-color: hsl(var(--ctp-surface2)) !important;
427}
428
429/* find and replace next/previous buttons */
430.ck.ck-find-and-replace-form__find > button.ck-button[aria-disabled="true"],
431.ck.ck-find-and-replace-form__replace > button.ck-button[aria-disabled="true"] {
432 background-color: hsl(var(--ctp-surface1)) !important;
433}
434
435/* tick/cross buttons for media url input */
436.ck.ck-button.ck-button-save,
437a.ck.ck-button.ck-button-save {
438 color: hsl(var(--ctp-green)) !important;
439}
440.ck.ck-button.ck-button-cancel,
441a.ck.ck-button.ck-button-cancel {
442 color: hsl(var(--ctp-red)) !important;
443}
444
445/* iframes */
446/* since iframes can't be styled, due to cross-origin restrictions - we must force a light background */
447section.content:has(iframe) {
448 background: #eff1f5 !important; /* latte base */
449}
450
451/* calendar */
452.fc-list-table {
453 background-color: hsl(var(--ctp-surface0)) !important;
454}
455table tr th,
456table tr td {
457 color: hsl(var(--ctp-text)) !important;
458 background: hsl(var(--ctp-surface0)) !important;
459}
460.fc .fc-cell-shaded {
461 background-color: hsl(var(--ctp-surface1)) !important;
462}
463.fc-theme-standard tbody {
464 border: none !important;
465}
466
467/* rubric */
468.rb-blank {
469 background-image: repeating-linear-gradient(
470 135deg,
471 var(--content-ui-foreground) 0px,
472 var(--content-ui-foreground) 5px,
473 hsl(var(--ctp-base)) 5px,
474 hsl(var(--ctp-base)) 20px
475 ) !important;
476}
477.rb-selected {
478 background-color: hsl(var(--ctp-surface1)) !important;
479}
480
481/* news articles */
482.island span[style]:not(a > span[style]):not(.tile > span[style]):not(.event-container > span[style]) {
483 color: hsl(var(--ctp-text)) !important;
484 background-color: rgba(0, 0, 0, 0) !important;
485}
486.island a > span[style] {
487 color: hsl(var(--ctp-accent)) !important;
488 background-color: rgba(0, 0, 0, 0) !important;
489}
490.island section {
491 background-color: hsl(var(--ctp-base));
492}
493
494article a {
495 background-color: transparent !important;
496 color: hsl(var(--ctp-accent)) !important;
497}
498
499article a:hover {
500 text-decoration: underline !important;
501}
502
503article *:not(a):not(a *) {
504 background-color: transparent !important;
505 color: hsl(var(--ctp-text)) !important;
506}
507
508/* home -> news */
509.tabs {
510 background: hsl(var(--ctp-surface1));
511 border-bottom: none;
512}
513.tabs dd > a,
514.tabs .tab-title > a {
515 color: hsl(var(--ctp-text));
516}
517
518.information-list,
519.action-list > .actions-small-1 {
520 background-color: hsl(var(--ctp-surface0)) !important;
521}
522
523/* quiz/test results table */
524.lrn-report-area,
525.lrn-report-measure {
526 background-color: var(--content-ui-background) !important;
527}
528
529/* file tables */
530.VueTables__search,
531.VueTables__table-footer,
532.VueTables__wrapper,
533.VueTables__sortable,
534.filters {
535 background-color: hsl(var(--ctp-surface0)) !important;
536}
537
538/* news sections */
539.detail.content {
540 background: hsl(var(--ctp-base)) !important;
541}
542
543article > div > p.x_MsoNormal,
544article > div#x_Signature {
545 background-color: hsl(var(--ctp-base)) !important;
546 color: hsl(var(--ctp-text)) !important;
547}
548
549li > article > div > p.x_MsoNormal,
550li > article > div#x_Signature {
551 background-color: hsl(var(--ctp-surface0)) !important;
552}
553
554/* timetable */
555.timetable th,
556.timetable-small th,
557.timetable td,
558.timetable-small td {
559 background-color: hsl(var(--ctp-surface0));
560}
561.timetable a,
562.timetable-small a {
563 color: #0066b0;
564}
565.timetable span,
566.timetable-small span {
567 color: hsl(var(--ctp-overlay0));
568}
569
570.timetable div,
571.timetable-small div {
572 color: #24273a;
573}
574
575/* breadcrumbs */
576.breadcrumb li.active span:not([href]) {
577 color: hsl(var(--ctp-accent));
578}
579
580.breadcrumb li a:before,
581.breadcrumb li span:before {
582 border-left-color: hsl(var(--ctp-overlay0));
583}
584
585/* scrollbars */
586.scrollable::-webkit-scrollbar,
587#container::-webkit-scrollbar,
588.left-off-canvas-menu::-webkit-scrollbar,
589.right-off-canvas-menu::-webkit-scrollbar,
590.hybrid-bar .account-drop::-webkit-scrollbar {
591 background-color: hsl(var(--ctp-crust));
592 width: 8px;
593 height: 8px;
594}
595.scrollable::-webkit-scrollbar-thumb,
596#container::-webkit-scrollbar-thumb,
597.left-off-canvas-menu::-webkit-scrollbar-thumb,
598.right-off-canvas-menu::-webkit-scrollbar-thumb,
599.hybrid-bar .account-drop::-webkit-scrollbar-thumb {
600 background: hsl(var(--ctp-accent), 0.5);
601}
602.scrollable:hover::-webkit-scrollbar-thumb,
603#container:hover::-webkit-scrollbar-thumb,
604.left-off-canvas-menu:hover::-webkit-scrollbar-thumb,
605.right-off-canvas-menu:hover::-webkit-scrollbar-thumb,
606.hybrid-bar .account-drop:hover::-webkit-scrollbar-thumb {
607 background: hsl(var(--ctp-accent));
608}
609.scrollable::-webkit-scrollbar-track,
610#container::-webkit-scrollbar-track,
611.left-off-canvas-menu::-webkit-scrollbar-track,
612.right-off-canvas-menu::-webkit-scrollbar-track,
613.hybrid-bar .account-drop::-webkit-scrollbar-track {
614 background: hsl(var(--ctp-crust));
615}
616
617/* news icon */
618.icon-news::before {
619 color: hsl(var(--ctp-text));
620}
621
622/* class list */
623
624.Component_Homepage_ClassListController.component-container ul.grid {
625 background: hsl(var(--ctp-surface0)) !important;
626}
627.Component_Homepage_ClassListController.component-container ul.grid li {
628 box-shadow: none !important;
629}
630
631/* text inputs */
632input:not([type]),
633input[type="text"],
634input[type="password"],
635input[type="date"],
636input[type="datetime"],
637input[type="datetime-local"],
638input[type="month"],
639input[type="week"],
640input[type="email"],
641input[type="number"],
642input[type="search"],
643input[type="tel"],
644input[type="time"],
645input[type="url"],
646input[type="color"],
647textarea,
648input:hover,
649textarea:hover,
650select:hover {
651 background-color: hsl(var(--ctp-base));
652 color: hsl(var(--ctp-text));
653 border: none;
654}
655
656/* error messages */
657label.error {
658 color: hsl(var(--ctp-red));
659}
660
661.left-off-canvas-menu ul.off-canvas-list li h3,
662.left-off-canvas-menu ul.off-canvas-list li label .unit-heading,
663label .left-off-canvas-menu ul.off-canvas-list li .unit-heading,
664.left-off-canvas-menu ul.off-canvas-list li h4 {
665 color: hsl(var(--ctp-text));
666}
667
668/* CKEditor */
669:root {
670 --sb-ck-active: hsl(var(--ctp-accent));
671 --sb-ck-active-grey: hsl(var(--ctp-base));
672 --sb-ck-active-highlight: #daedff;
673 --sb-ck-button-grid-border: #bbbbbb;
674 --sb-ck-disabled: #dddddd;
675 --sb-ck-icon-colour: rgb(51, 51, 51);
676
677 /* Overrides of default CK colours */
678 --ck-color-base-background: hsl(var(--ctp-surface0)) !important;
679 --ck-color-text: hsl(var(--ctp-text)) !important;
680
681 /* skin.css.php */
682
683 /* search box */
684 --foreground-colour: hsl(var(--ctp-surface0)) !important;
685 --alt-foreground-colour: hsl(var(--ctp-surface0)) !important;
686 --primary-text-colour: hsl(var(--ctp-text)) !important;
687 --navigation-foreground: hsl(var(--ctp-text));
688 --navigation-foreground-contrast: hsl(var(--ctp-crust));
689 --navigation-background: hsl(var(--ctp-mantle));
690 --navigation-background-contrast: hsl(var(--ctp-crust));
691 --navigation-hover: hsl(var(--ctp-surface0));
692 --navigation-hover-contrast: hsl(var(--ctp-crust));
693 --border-colour: hsl(var(--ctp-accent));
694 --off-canvas-foreground: hsl(var(--ctp-text));
695 --off-canvas-background: hsl(var(--ctp-mantle));
696 --off-canvas-hover: hsl(var(--ctp-surface0));
697 --accounts-menu-foreground: hsl(var(--ctp-text));
698 --accounts-menu-background: hsl(var(--ctp-crust));
699 --accounts-menu-hover: hsl(var(--ctp-overlay1));
700 --content-ui-foreground: hsl(var(--ctp-accent));
701 --content-ui-foreground-contrast: hsl(var(--ctp-mantle));
702 --content-ui-background: hsl(var(--ctp-surface0));
703 --content-ui-hover: hsl(var(--ctp-surface1));
704 --content-ui-selected: hsl(var(--ctp-surface0));
705 --content-ui-submit-foreground: hsl(var(--ctp-base));
706 --content-ui-submit-background: hsl(var(--ctp-accent));
707 /* highlighting */
708 --accent-foreground: hsl(var(--ctp-accent));
709 /* NOTE: THIS NEEDS TO BE ACCENT FOR HIGHLIGHTING */
710 --accent-background: hsl(var(--ctp-base));
711 /* NOTE: THIS NEEDS TO BE BASE FOR HIGHLIGHTING */
712 --logo-background: hsl(var(--ctp-mantle));
713 --body-background: hsl(var(--ctp-base));
714 --form-border-color: color: hsl(var(--ctp-accent), 0.4);
715 --form-bg-hover-color: color: hsl(var(--ctp-accent), 0.3);
716 --form-bg-hover-color-contrast: hsl(var(--ctp-text));
717 --body-foreground: hsl(var(--ctp-text));
718 --body-foreground-h1: hsl(var(--ctp-text));
719 --navigation-foreground-highlight: hsl(var(--ctp-text));
720
721 /* core.css (v24.0.7 at time of writing) */
722 --color-foreground-primary: hsl(var(--ctp-surface0)) !important;
723 --color-foreground-secondary: hsl(var(--ctp-surface1)) !important;
724 --color-text-primary: hsl(var(--ctp-text)) !important;
725 --color-text-secondary: hsl(var(--ctp-subtext0)) !important;
726}