From 61b0db768f052b69e355ad2e925431db7085f9d6 Mon Sep 17 00:00:00 2001 From: john Date: Tue, 5 Jul 2022 22:05:55 +1000 Subject: [PATCH] Add custom.css --- custom.css | 213 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 custom.css diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..e8a8817 --- /dev/null +++ b/custom.css @@ -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) +} \ No newline at end of file