Add custom.css
This commit is contained in:
parent
12048de03c
commit
61b0db768f
213
custom.css
Normal file
213
custom.css
Normal file
@ -0,0 +1,213 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--font-body: "system-ui", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif, "Helvetica Neue", Helvetica, "Hiragino Sans GB";
|
||||
|
||||
--main-color: hsl(192, 100%, 44%);
|
||||
--header-bg: hsl(192, 100%, 44%);
|
||||
--header-color: hsl(0, 0%, 100%);
|
||||
--bar-bg: hsl(194, 66%, 61%);
|
||||
--menu-bg-color: hsl(0, 0%, 100%);
|
||||
--menu-color: hsl(213, 5%, 39%);
|
||||
--menu-color-hover: hsl(225, 6%, 13%);
|
||||
--main-menu-color: hsl(225, 6%, 13%);
|
||||
--submenu-bg-hover: hsl(0, 0%, 83%);
|
||||
--submenu-bg-hover-active: hsl(192, 100%, 44%);
|
||||
--main-background: hsl(0, 0%, 100%);
|
||||
|
||||
--grey-dd: hsl(0, 0%, 87%);
|
||||
--grey-d4: hsl(0, 0%, 83%);
|
||||
--grey-cc: hsl(0, 0%, 80%);
|
||||
--grey-bb: hsl(0, 0%, 73%);
|
||||
--grey-99: hsl(0, 0%, 60%);
|
||||
--grey-77: hsl(0, 0%, 47%);
|
||||
--grey-66: hsl(0, 0%, 40%);
|
||||
--grey-40: hsl(0, 0%, 25%);
|
||||
--grey-10: hsl(0, 0%, 6%);
|
||||
|
||||
--theme-background: hsl(0, 0%, 100%);
|
||||
--theme-text-on-background: hsl(0, 0%, 0%);
|
||||
--theme-alt-bg: hsl(0, 0%, 97%);
|
||||
--theme-sheet: hsl(0, 0%, 93%);
|
||||
|
||||
--text-on-alt: hsl(0, 0%, 100%);
|
||||
--bottom-border-shadow: rgba(0, 0, 0, .26);
|
||||
--error: hsl(0, 100%, 50%);
|
||||
--footer-text: hsl(0, 0%, 67%);
|
||||
--loading-text: hsl(0, 0%, 53%);
|
||||
--btn-color: rgba(0, 0, 0, .87);
|
||||
--modal-overlay-bg: rgba(0, 0, 0, .70);
|
||||
--mask-bg: rgba(0, 0, 0, .56);
|
||||
--alert-text-shadow: rgba(0, 0, 0, .10);
|
||||
--abbr-color: hsl(195, 100%, 22%);
|
||||
--danger-color: hsl(11, 100%, 69%);
|
||||
--warning-color: hsl(54, 77%, 75%);
|
||||
--success-color: hsl(120, 39%, 54%);
|
||||
--primary-border: hsl(208, 56%, 41%);
|
||||
--primary-background: hsl(208, 56%, 46%);
|
||||
--action-border: hsl(194, 67%, 56%);
|
||||
--action-background: hsl(194, 66%, 61%);
|
||||
--danger-border: hsl(2, 64%, 53%);
|
||||
--danger-background: hsl(2, 64%, 58%);
|
||||
--dismiss-border: hsl(35, 84%, 57%);
|
||||
--dismiss-background: hsl(35, 84%, 62%);
|
||||
--success-border: hsl(120, 39%, 49%);
|
||||
--success-background: hsl(120, 39%, 54%);
|
||||
--selection-error: hsl(0, 79%, 95%);
|
||||
--bg-indicator: hsl(205, 100%, 14%);
|
||||
--bg-selected: hsl(210, 68%, 82%);
|
||||
--bg-hover-image: linear-gradient(90deg, hsl(213, 60%, 77%) 0%, hsl(213, 53%, 68%) 100%);
|
||||
--dynlist-border: hsl(2, 64%, 53%);
|
||||
--dynlist-background: hsl(2, 64%, 58%);
|
||||
--dropdown-border-shadow: hsl(24, 2%, 56%);
|
||||
--label-warning: hsl(35, 84%, 62%);
|
||||
--italic-var: hsl(211, 100%, 42%);
|
||||
--modemenu-active: hsl(205, 100%, 14%);
|
||||
--title-color: hsl(204, 56%, 72%);
|
||||
--modal-li-color: hsl(0, 0%, 50%);
|
||||
--ins-border: hsl(120, 100%, 50%);
|
||||
--ins-background: hsl(120, 100%, 90%);
|
||||
--del-border: hsl(0, 100%, 50%);
|
||||
--del-background: hsl(0, 100%, 90%);
|
||||
|
||||
--select-text: hsl(0, 0%, 33%);
|
||||
|
||||
--filter-brightness: 1;
|
||||
|
||||
--shadow-iface-1: rgba(255, 255, 255, .40);
|
||||
--shadow-iface-2: rgba(0, 0, 0, .20);
|
||||
--shadow-other-1: rgba(255, 255, 255, .20);
|
||||
--shadow-other-2: rgba(0, 0, 0, .05);
|
||||
|
||||
--shadow-box-1: rgba(0, 0, 0, .16);
|
||||
--shadow-box-2: rgba(0, 0, 0, .12);
|
||||
--shadow-button-1: rgba(0, 0, 0, .12);
|
||||
--shadow-button-2: rgba(0, 0, 0, .20);
|
||||
--shadow-button-active-2: rgba(0, 0, 0, .23);
|
||||
--shadow-button-active-1: rgba(0, 0, 0, .19);
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme:dark) {
|
||||
:root {
|
||||
--main-color: hsl(192, 100%, 56%);
|
||||
--header-bg: hsl(192, 100%, 34%);
|
||||
--header-color: hsl(0, 0%, 0%);
|
||||
--bar-bg: hsl(194, 66%, 41%);
|
||||
--menu-bg-color: hsl(0, 0%, 5%);
|
||||
--menu-color: hsl(213, 5%, 69%);
|
||||
--menu-color-hover: hsl(225, 6%, 73%);
|
||||
--main-menu-color: hsl(225, 6%, 73%);
|
||||
--submenu-bg-hover: hsl(0, 0%, 40%);
|
||||
--submenu-bg-hover-active: hsl(192, 100%, 24%);
|
||||
--main-background: hsl(0, 0%, 0%);
|
||||
|
||||
--grey-dd: hsl(0, 0%, 13%);
|
||||
--grey-d4: hsl(0, 0%, 17%);
|
||||
--grey-cc: hsl(0, 0%, 20%);
|
||||
--grey-bb: hsl(0, 0%, 27%);
|
||||
--grey-99: hsl(0, 0%, 40%);
|
||||
--grey-77: hsl(0, 0%, 53%);
|
||||
--grey-66: hsl(0, 0%, 60%);
|
||||
--grey-40: hsl(0, 0%, 75%);
|
||||
--grey-10: hsl(0, 0%, 94%);
|
||||
|
||||
--theme-background: hsl(0, 0%, 0%);
|
||||
--theme-text-on-background: hsl(0, 0%, 100%);
|
||||
--theme-alt-bg: hsl(0, 0%, 3%);
|
||||
--theme-sheet: hsl(0, 0%, 7%);
|
||||
|
||||
--text-on-alt: hsl(0, 0%, 0%);
|
||||
--bottom-border-shadow: rgba(255, 255, 255, .26);
|
||||
--error: hsl(0, 100%, 30%);
|
||||
--footer-text: hsl(0, 0%, 33%);
|
||||
--loading-text: hsl(0, 0%, 47%);
|
||||
--btn-color: rgba(255, 255, 255, .87);
|
||||
--modal-overlay-bg: rgba(255, 255, 255, .70);
|
||||
--mask-bg: rgba(255, 255, 255, .56);
|
||||
--alert-text-shadow: rgba(255, 255, 255, .10);
|
||||
--abbr-color: hsl(195, 100%, 78%);
|
||||
--danger-color: hsl(11, 100%, 31%);
|
||||
--warning-color: hsl(54, 77%, 35%);
|
||||
--success-color: hsl(120, 39%, 36%);
|
||||
--primary-border: hsl(208, 56%, 59%);
|
||||
--primary-background: hsl(208, 56%, 54%);
|
||||
--action-border: hsl(194, 67%, 44%);
|
||||
--action-background: hsl(194, 66%, 39%);
|
||||
--danger-border: hsl(2, 64%, 47%);
|
||||
--danger-background: hsl(2, 64%, 42%);
|
||||
--dismiss-border: hsl(35, 84%, 43%);
|
||||
--dismiss-background: hsl(35, 84%, 38%);
|
||||
--success-border: hsl(120, 39%, 51%);
|
||||
--success-background: hsl(120, 39%, 46%);
|
||||
--selection-error: hsl(0, 79%, 25%);
|
||||
--bg-indicator: hsl(205, 100%, 86%);
|
||||
--bg-selected: hsl(210, 68%, 18%);
|
||||
--bg-hover-image: linear-gradient(90deg, hsl(213, 60%, 23%) 0%, hsl(213, 53%, 32%) 100%);
|
||||
--dynlist-border: hsl(2, 64%, 47%);
|
||||
--dynlist-background: hsl(2, 64%, 42%);
|
||||
--dropdown-border-shadow: hsl(24, 2%, 44%);
|
||||
--label-warning: hsl(35, 84%, 38%);
|
||||
--italic-var: hsl(211, 100%, 58%);
|
||||
--modemenu-active: hsl(205, 100%, 86%);
|
||||
--title-color: hsl(204, 56%, 28%);
|
||||
--modal-li-color: hsl(0, 0%, 50%);
|
||||
--ins-border: hsl(120, 100%, 50%);
|
||||
--ins-background: hsl(120, 100%, 10%);
|
||||
--del-border: hsl(0, 100%, 50%);
|
||||
--del-background: hsl(0, 100%, 10%);
|
||||
|
||||
--select-text: hsl(0, 0%, 67%);
|
||||
|
||||
--filter-brightness: 0.6;
|
||||
|
||||
--shadow-iface-1: rgba(0, 0, 0, .40);
|
||||
--shadow-iface-2: rgba(255, 255, 255, .20);
|
||||
--shadow-other-1: rgba(0, 0, 0, .20);
|
||||
--shadow-other-2: rgba(255, 255, 255, .05);
|
||||
|
||||
--shadow-box-1: rgba(255, 255, 255, .16);
|
||||
--shadow-box-2: rgba(255, 255, 255, .12);
|
||||
--shadow-button-1: rgba(255, 255, 255, .12);
|
||||
--shadow-button-2: rgba(255, 255, 255, .20);
|
||||
--shadow-button-active-1: rgba(255, 255, 255, .19);
|
||||
--shadow-button-active-2: rgba(255, 255, 255, .23);
|
||||
}
|
||||
|
||||
.main>.main-left>.nav>li:last-child::before,
|
||||
.main>.main-left>.nav>.slide>.menu::before {
|
||||
filter: invert();
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--ifacebox-shadow: inset 0 1px 0 var(--shadow-iface-1), 0 1px 2px var(--shadow-iface-2);
|
||||
--commandbox-shadow: inset 0 1px 0 var(--shadow-other-1), 0 1px 2px var(--shadow-other-2);
|
||||
--ifacebadge-shadow: inset 0 1px 0 var(--shadow-other-1), 0 1px 2px var(--shadow-other-2);
|
||||
--box-shadow: 0 2px 2px 0 var(--shadow-box-1), 0 0 2px 0 var(--shadow-box-2);
|
||||
--shadow-button: 0 0 2px var(--shadow-button-1), 0 2px 2px var(--shadow-button-2);
|
||||
--shadow-button-up: 0 0 2px var(--shadow-button-1), 0 -2px 2px var(--shadow-button-2);
|
||||
--shadow-button-active: 0 10px 20px var(--shadow-button-active-1), 0 6px 6px var(--shadow-button-active-2);
|
||||
--shadow-button-active-up: 0 -10px 20px var(--shadow-button-active-1), 0 -6px 6px var(--shadow-button-active-2);
|
||||
--zonebadge-filter: brightness(var(--filter-brightness));
|
||||
|
||||
--empty-grad-1: rgba(204, 204, 204, .5);
|
||||
--empty-grad-2: rgba(255, 255, 255, .5);
|
||||
--zonebadge-empty-gradient: repeating-linear-gradient(45deg,
|
||||
var(--empty-grad-1),
|
||||
var(--empty-grad-1) 5px,
|
||||
var(--empty-grad-2) 5px,
|
||||
var(--empty-grad-2) 10px);
|
||||
--zonebadge-empty: hsl(0, 0%, 25%);
|
||||
}
|
||||
|
||||
.cbi-section-table-row td.td[data-name=_ifacestat] {
|
||||
text-align: left !important
|
||||
}
|
||||
|
||||
.cbi-section-table-row td.td[data-name=_ifacestat]>div {
|
||||
text-align: left;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
div[data-tab]>div>svg {
|
||||
background-color: var(--theme-alt-bg)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user