nite/Byparr
1
Fork 0
mirror of https://github.com/ThePhaseless/Byparr.git synced 2025-03-15 17:50:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Byparr/extentions/uBOL-home/css/default.css
Thephaseless 992bf62f01 first commit
2024-07-24 13:57:40 +00:00

527 lines
17 KiB
CSS
Raw Blame History

/**
References:
https://protocol.mozilla.org/
https://material.io/
Color names from:
https://protocol.mozilla.org/docs/fundamentals/color.html
Tools:
Lightness validator: https://www.hsluv.org/
Contrast validator: https://bernaferrari.github.io/color-studio/#/
*/
:root {
--blue-5: 170 242 255;
--blue-10: 128 235 255;
--blue-20: 0 221 255;
--blue-30: 0 179 244;
--blue-40: 0 144 237;
--blue-50: 0 96 223;
--blue-60: 2 80 187;
--blue-70: 5 64 150;
--blue-80: 7 48 114;
--blue-90: 9 32 77;
--dark-gray-10: 82 82 94;
--dark-gray-20: 74 74 85;
--dark-gray-30: 66 65 77;
--dark-gray-40: 58 57 68;
--dark-gray-50: 50 49 60;
--dark-gray-60: 43 42 51;
--dark-gray-70: 35 34 43;
--dark-gray-80: 28 27 34;
--dark-gray-90: 21 20 26;
--green-30: 136 255 209;
--green-40: 84 255 189;
--green-50: 63 225 176;
--green-60: 42 195 162;
--green-65: 21 165 149;
--green-70: 0 135 135;
--green-80: 0 94 94;
--ink-10: 57 52 115;
--ink-80: 32 18 58;
--light-gray-10: 249 249 251;
--light-gray-20: 240 240 244;
--light-gray-30: 224 224 230;
--light-gray-40: 207 207 216;
--light-gray-50: 191 191 201;
--light-gray-60: 175 175 186;
--light-gray-70: 159 159 173;
--light-gray-80: 143 143 158;
--light-gray-90: 128 128 143;
--orange-5: 255 244 222;
--orange-10: 255 213 178;
--orange-20: 255 181 135;
--orange-30: 255 162 102;
--orange-40: 255 138 80;
--orange-50: 255 113 57;
--orange-60: 226 89 32;
--orange-70: 204 61 0;
--orange-80: 158 40 11;
--orange-90: 124 21 4;
--purple-5: 247 226 255;
--purple-10: 246 184 255;
--purple-20: 246 143 255;
--purple-30: 247 112 255;
--purple-40: 215 76 240;
--purple-50: 184 51 225;
--purple-60: 149 43 185;
--purple-70: 114 34 145;
--purple-80: 78 26 105;
--purple-90: 43 17 65;
--red-20: 255 154 162;
--red-30: 255 132 139;
--red-40: 255 106 117;
--red-50: 255 79 94;
--red-60: 226 40 80;
--red-70: 197 0 66;
--violet-5: 231 223 255;
--violet-10: 217 191 255;
--violet-20: 203 158 255;
--violet-30: 198 137 255;
--violet-40: 171 113 255;
--violet-50: 144 89 255;
--violet-60: 117 66 229;
--violet-70: 89 42 203;
--violet-80: 69 39 141;
--violet-90: 50 28 100;
--yellow-5: 255 255 204;
--yellow-10: 255 255 152;
--yellow-20: 255 234 128;
--yellow-30: 255 213 103;
--yellow-40: 255 189 79;
--yellow-50: 255 164 54;
--yellow-60: 226 127 46;
--yellow-70: 196 90 39;
--yellow-80: 167 52 31;
--yellow-90: 150 14 24;
/*
* Reference gray: -light-gray-90, then calibrated with hsluv.org, where
* the number is Luv.
*
* */
--gray-5: 16 16 22;
--gray-10: 27 27 35;
--gray-15: 37 37 47;
--gray-20: 47 47 59;
--gray-25: 58 58 72;
--gray-30: 69 69 85;
--gray-35: 81 81 98;
--gray-40: 93 93 110;
--gray-45: 105 105 121;
--gray-50: 118 118 133;
--gray-55: 131 131 145;
--gray-60: 144 144 156;
--gray-65: 157 157 168;
--gray-70: 170 170 180;
--gray-75: 184 184 192;
--gray-80: 198 198 204;
--gray-85: 212 212 217;
--gray-90: 226 226 229;
--gray-95: 240 240 242;
}
/*
* Font
*
* */
:root {
--font-size: 14px;
--font-size-smaller: calc(var(--font-size) - 1px);
--font-size-xsmall: calc(var(--font-size) - 3px);
--font-size-larger: 15px;
--font-family: Inter, sans-serif;
--monospace-size: 12px;
}
:root.mobile {
--font-size: 16px;
--font-size-smaller: 14px;
--monospace-size: 13px;
}
/*
* Default color theme
*
* Tool: hsluv.org
*
* */
:root /* h255 */ {
--primary-5: 3 16 40; /* S:90 Luv:5 */
--primary-10: 5 27 59; /* S:90 Luv:10 */
--primary-20: 14 47 95; /* S:90 Luv:20 */
--primary-30: 24 69 134; /* S:90 Luv:30 */
--primary-40: 34 93 176; /* S:90 Luv:40 */
--primary-50: 45 117 219; /* S:90 Luv:50 */
--primary-60: 86 143 244; /* S:90 Luv:60 */
--primary-70: 137 170 247; /* S:90 Luv:70 */
--primary-80: 179 198 250; /* S:90 Luv:80 */
--primary-90: 218 226 252; /* S:90 Luv:90 */
--primary-95: 236 240 254; /* S:90 Luv:95 */
}
/*
* Default dark theme starts here
*
* https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
* Assign a default background color if dark mode is enabled -- hopefully
* this will avoid flashes of white background until the document's own CSS
* overrides the default color value below.
*
* */
@media (prefers-color-scheme: light) {
:root {
--surface-0-rgb: 255 255 255;
--surface-1: rgb(var(--gray-95));
--surface-2: rgb(var(--gray-90));
--surface-3: rgb(var(--gray-80));
}
}
@media (prefers-color-scheme: dark) {
:root {
--surface-0-rgb: 0 0 0;
--surface-1: rgb(var(--gray-10));
--surface-2: rgb(var(--gray-20));
--surface-3: rgb(var(--gray-30));
}
}
:root.light {
--surface-0-rgb: 255 255 255;
--surface-1: rgb(var(--gray-95));
--surface-2: rgb(var(--gray-90));
--surface-3: rgb(var(--gray-80));
}
:root.dark {
--surface-0-rgb: 0 0 0;
--surface-1: rgb(var(--gray-10));
--surface-2: rgb(var(--gray-20));
--surface-3: rgb(var(--gray-30));
}
/*
* Components
*
* */
:root {
--font-size: 14px;
--ubo-red: #800000;
--elevation-up-surface: black;
--elevation-up1-opacity: 4%;
--elevation-up2-opacity: 8%;
--elevation-down-surface: white;
--elevation-down1-opacity: 16%;
--elevation-down2-opacity: 32%;
/* https://material.io/design/color/text-legibility.html#text-backgrounds */
--ink-rgb: var(--ink-80);
--ink-0: black;
--ink-100: white;
--border-1: rgb(var(--gray-75));
--border-2: rgb(var(--gray-70));
--border-3: rgb(var(--gray-65));
--border-4: rgb(var(--gray-60));
--accent-ink-3: var(--ink-1);
--accent-surface-1: rgb(var(--primary-40));
--link-ink: rgb(var(--primary-40));
--link-hover-ink: rgb(var(--primary-30));
/* buttons */
--button-surface-rgb: var(--gray-80);
--dashboard-tab-active-ink-rgb: var(--primary-40);
--dashboard-tab-focus-surface-rgb: var(--primary-90);
--dashboard-highlight-surface-rgb: var(--primary-90);
--dashboard-happy-green: rgb(var(--green-65));
/* popup panel */
--popup-cell-cname-ink: #0054d7; /* h260 S:100 Luv:40 */;
--popup-cell-label-mixed-surface: #c29100; /* TODO: fix */
--popup-icon-x-ink: rgb(var(--red-60));
--popup-power-ink-rgb: var(--primary-50);
/* horizontal line separator */
--hr-ink: var(--surface-2);
/* cloud widget */
--cloud-total-used-surface: rgb(var(--violet-60) / 25%);
--cloud-used-surface: rgb(var(--violet-60));
/* misc */
--error-surface: #c00004; /* h:12 S:100 Luv:40 */
/* codemirror */
--cm-active-line: rgb(var(--gray-90));
--cm-cursor: var(--ink-0);
--cm-foldmarker-ink: rgb(var(--blue-40));
--cm-gutter-border: var(--surface-1);
--cm-gutter-ink: var(--ink-3);
--cm-gutter-surface: var(--surface-2);
--cm-matchingbracket: rgb(var(--green-30));
--cm-merge-copy-ink: rgb(var(--blue-50));
--cm-merge-chunk-border: rgb(var(--surface-0-rgb) / 40%);
--cm-merge-chunk-surface: rgb(var(--surface-0-rgb) / 40%);
--cm-negative: #e32f00; /* h:15 S:100 Luv:50 */
--cm-positive: #008a21; /* h:130 S:100 Luv:50 */
--cm-selection-surface: rgb(var(--gray-80));
--cm-selection-focused-surface: rgb(var(--primary-80));
--cm-searching-ink: black;
--cm-searching-surface: #fee300cc /* h75 S:100 Luv:90 a:80% */;
--cm-search-match-surface: rgb(var(--yellow-40) / 50%);
/* syntax highlight: static filtering */
--sf-comment-ink: var(--ink-3);
--sf-def-ink: #3c3aff; /* h:266 S:100 Luv:40 */
--sf-directive-ink: var(--ink-1);
--sf-error-ink: #ff8981; /* h15 S:100 Luv:70 */
--sf-error-surface: #ff898133; /* h15 S:100 Luv:70 @ 20% */
--sf-keyword-ink: #9b00ca; /* h:290 S:100 Luv:40 */
--sf-notice-ink: var(--ink-4);
--sf-readonly-ink: var(--ink-3);
--sf-tag-ink: #006e2e /* h:135 S:100 Luv:40 */;
--sf-unicode-ink: var(--ink-1);
--sf-value-ink: #974900 /* h:30 S:100 Luv:40 */;
--sf-variable-ink: var(--ink-1);
--sf-warning-ink: #e49d00; /* h:50 S:100 Luv:70 */
--sf-warning-surface: #e49d0033; /* h:50 S:100 Luv:70 @ 20% */
/* syntax highlight: dynamic filtering */
--df-allow-ink: var(--cm-positive);
--df-block-ink: var(--cm-negative);
--df-noop-ink: rgb(var(--dark-gray-10));
/* logger */
--logger-modified-surface: #0000c010;
--logger-modified-em-surface: #0000c028;
--logger-redirected-surface: rgb(var(--yellow-5) / 50%);
--logger-scriptlet-surface: rgb(var(--yellow-30) / 50%);
}
/* https://material.io/design/color/dark-theme.html */
:root.dark {
--elevation-down-surface: black;
--elevation-down1-opacity: 16%;
--elevation-down2-opacity: 32%;
--elevation-up-surface: white;
--elevation-up1-opacity: 12%;
--elevation-up2-opacity: 24%;
--ink-rgb: var(--gray-95);
--ink-0: white;
--ink-100: black;
--border-1: rgb(var(--gray-35));
--border-2: rgb(var(--gray-40));
--border-3: rgb(var(--gray-45));
--border-4: rgb(var(--gray-50));
--accent-surface-1: rgb(var(--primary-70));
--link-ink: rgb(var(--primary-70));
--link-hover-ink: rgb(var(--primary-80));
/* buttons */
--button-surface-rgb: var(--gray-30);
--dashboard-tab-active-ink-rgb: var(--primary-70);
--dashboard-tab-focus-surface-rgb: var(--primary-20);
--dashboard-highlight-surface-rgb: var(--primary-20);
/* popup panel */
--popup-cell-cname-ink: #93a6ff; /* h260 S:100 Luv:70 */;
--popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1); /* TODO: fix */
--popup-icon-x-ink: rgb(var(--red-50));
--popup-power-ink-rgb: var(--primary-60);
/* cloud widget */
--cloud-total-used-surface: rgb(var(--violet-20) / 25%);
--cloud-used-surface: rgb(var(--violet-20));
/* misc */
--error-surface: #ff5354; /* h:12 S:100 Luv:60 */
/* codemirror */
--cm-active-line: rgb(var(--gray-20));
--cm-merge-copy-ink: rgb(var(--blue-30));
--cm-foldmarker-ink: rgb(var(--blue-20));
--cm-matchingbracket: rgb(var(--green-30) / 50%);
--cm-negative: #ff8982; /* h:15 S:100 Luv:70 */
--cm-positive: #00c634; /* h:130 S:100 Luv:70 */
--cm-selection-surface: rgb(var(--gray-40));
--cm-selection-focused-surface: rgb(var(--primary-40));
--cm-searching-ink: black;
--cm-searching-surface: #fee300cc /* h75 S:100 Luv:90 a:80% */;
/* syntax highlight: static filtering */
--sf-comment-ink: var(--ink-3);
--sf-def-ink: #a2a2ff; /* h:266 S:100 Luv:70 */
--sf-error-ink: #ff8981; /* h15 S:100 Luv:70 */
--sf-error-surface: #ff898166; /* h15 S:100 Luv:70 @ 40% */
--sf-keyword-ink: #d78dff; /* h:290 S:100 Luv:70 */
--sf-tag-ink: #00c559 /* h:135 S:100 Luv:70 */;
--sf-value-ink: #ff8d48 /* h:30 S:100 Luv:70 */;
--sf-variable-ink: var(--ink-1);
--sf-warning-ink: #e49d00; /* h:50 S:100 Luv:70 */
--sf-warning-surface: #e49d0066; /* h:50 S:100 Luv:50 @ 40% */
/* syntax highlight: dynamic filtering */
--df-noop-ink: var(--ink-3);
/* logger */
--logger-modified-surface: #663efd60;
--logger-redirected-surface: rgb(var(--yellow-5) / 40%);
--logger-scriptlet-surface: rgb(var(--yellow-30) / 40%);
}
:root.dark input,
:root.dark select,
:root.dark textarea {
color-scheme: dark;
}
/*
* Shared declarations
* */
:root {
--high-em: 87%;
--medium-em: 60%;
--low-em: 38%;
--surface-0: rgb(var(--surface-0-rgb));
--ink-1: rgb(var(--ink-rgb));
--ink-2: rgb(var(--ink-rgb) / var(--high-em));
--ink-3: rgb(var(--ink-rgb) / var(--medium-em));
--ink-4: rgb(var(--ink-rgb) / var(--low-em));
--accent-ink-1: var(--surface-0);
--accent-ink-3: var(--ink-1);
--subtil-ink: var(--accent-surface-1);
--fieldset-header-surface: transparent;
--fieldset-header-ink: var(--ink-2);
--button-ink: var(--ink-1);
--button-surface: rgb(var(--button-surface-rgb));
--button-border-radius: 5px;
--button-preferred-ink: var(--accent-ink-1);
--button-preferred-surface: var(--accent-surface-1);
--button-disabled-surface: var(--surface-3);
--button-disabled-filter: opacity(50%);
--checkbox-size: calc(var(--font-size) + 2px);
--checkbox-ink: var(--ink-3);
--checkbox-checked-ink: var(--accent-surface-1);
--checkbox-disabled-filter: opacity(50%);
--checkbox-margin-end: calc(var(--font-size) * 0.75);
--notice-ink: var(--accent-ink-1);
--notice-surface: var(--accent-surface-1);
--notice-surface-shadow: #000 0 2px 8px;
--dashboard-tab-ink: var(--ink-1);
--dashboard-tab-active-ink: rgb(var(--dashboard-tab-active-ink-rgb));
--dashboard-tab-active-surface: transparent;
--dashboard-tab-focus-surface: rgb(var(--dashboard-tab-focus-surface-rgb));
--dashboard-tab-hover-surface: var(--surface-2);
--dashboard-tab-hover-border: var(--surface-3);
/* info levels: normal, fyi, warn, error -- we want same Luv */
--info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */
--info1-ink-rgb: 72 143 255; /* h:255 S:100 Luv:60 */
--info2-ink-rgb: 208 125 0; /* h: 40 S:100 Luv:60 */
--info3-ink-rgb: 255 82 94; /* h: 10 S:100 Luv:60 */
--info0-ink: rgb(var(--info0-ink-rgb));
--info1-ink: rgb(var(--info1-ink-rgb));
--info2-ink: rgb(var(--info2-ink-rgb));
--info3-ink: rgb(var(--info3-ink-rgb));
--popup-cell-surface: var(--surface-2);
--popup-cell-label-filter: opacity(40%);
--popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-own-surface-rgb));
--popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb));
--popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-own-surface-rgb));
--popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb));
--popup-cell-block-own-surface: rgb(var(--popup-cell-block-own-surface-rgb));
--popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb));
--popup-power-ink: rgb(var(--popup-power-ink-rgb));
--popup-toolbar-surface: rgb(var(--primary-80) / 15%);
--popup-toolbar-surface-hover: rgb(var(--primary-80) / 20%);
--popup-ruleset-tool-ink: var(--ink-1);
--popup-ruleset-tool-surface: rgb(var(--primary-80) / 15%);
--popup-ruleset-tool-surface-hover: rgb(var(--primary-80) / 20%);
--popup-ruleset-tool-shadow: transparent;
}
/*
* Rule colors
* */
:root:not(.dark):not(.colorBlind) {
--popup-cell-allow-own-surface-rgb: 0 127 0; /* h:127.7 S:100 Luv:45 */
--popup-cell-allow-surface-rgb: 129 202 129; /* h:127.7 S:50 Luv:75 */
--popup-cell-block-own-surface-rgb: 216 0 0; /* h:12.2 S:100 Luv:45 */
--popup-cell-block-surface-rgb: 224 172 172; /* h:12.2 S:50 Luv:75 */
--popup-cell-noop-own-surface-rgb: 107 107 107; /* h:0 S:0 Luv:45 */
--popup-cell-noop-surface-rgb: 185 185 185; /* h:0 S:0 Luv:75 */
}
:root.dark:not(.colorBlind) {
--popup-cell-allow-own-surface-rgb: 0 153 0; /* h:127.7 S:100 Luv:55 */
--popup-cell-allow-surface-rgb: 73 117 73; /* h:127.7 S:50 Luv:45 */
--popup-cell-block-own-surface-rgb: 255 40 40; /* h:12.2 S:100 Luv:55 */
--popup-cell-block-surface-rgb: 175 74 74; /* h:12.2 S:50 Luv:45 */
--popup-cell-noop-own-surface-rgb: 132 132 132; /* h:0 S:0 Luv:55 */
--popup-cell-noop-surface-rgb: 94 94 94; /* h:0 S:0 Luv:40 */
}
/*
* Source for color-blind color scheme:
* https://davidmathlogic.com/colorblind/
* First pair in "Accessible palettes"
*
* */
:root.colorBlind {
--popup-cell-allow-own-surface-rgb: 151 113 0; /* h:58.5 S:100 Luv:50 */
--popup-cell-block-own-surface-rgb: 0 120 216; /* h:252 S:100 Luv:50 */
--popup-cell-noop-own-surface-rgb: 119 119 119; /* h:0 S:0 Luv:50 */
--popup-cell-label-mixed-surface: #ff6a00; /* TODO: fix */
}
:root.colorBlind:not(.dark) {
--popup-cell-allow-surface-rgb: 223 178 92; /* h:58.5 S:75 Luv:75 */
--popup-cell-block-surface-rgb: 159 185 238; /* h:252 S:75 Luv:75 */
--popup-cell-noop-surface-rgb: 185 185 185; /* h:0 S:0 Luv:75 */
}
:root.dark.colorBlind {
--popup-cell-allow-surface-rgb: 115 91 44; /* h:58.5 S:75 Luv:40 */
--popup-cell-block-surface-rgb: 53 95 154; /* h:252 S:75 Luv:40 */
--popup-cell-noop-surface-rgb: 94 94 94; /* h:0 S:0 Luv:40 */
}
:root.classic:not(.dark) {
--notice-ink: rgb(var(--ink-80));
--notice-surface: rgb(var(--yellow-5));
--popup-power-ink-rgb: 0 110 254;
--popup-ruleset-tool-ink: var(--ink-1);
--popup-ruleset-tool-surface: rgb(var(--yellow-5) / 50%);
--popup-ruleset-tool-surface-hover: rgb(var(--yellow-5) / 75%);
--popup-ruleset-tool-shadow: rgb(var(--gray-85));
}
/*
* Experiment: use Firefox for Android dark theme colors
:root.mobile.dark {
--gray-10: 43 42 51;
--gray-20: 66 65 77;
--ink-rgb: 251 251 254;
}
*/
Reference in New Issue View Git Blame Copy Permalink