Big Change Update

This commit is contained in:
yeongpin
2025-01-14 14:47:41 +08:00
parent 380ea0b81d
commit 19fe4c85f8
651 changed files with 366654 additions and 17 deletions

View File

@@ -0,0 +1,33 @@
html {
height: 100vh;
height: 100svh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
overflow-y: auto;
width: 100%;
}
.body {
flex-shrink: 0;
}
/* https://github.com/uBlockOrigin/uBlock-issues/issues/3058 */
:root.mobile body {
min-height: unset;
}
html:not(.mobile) [data-i18n="1pTrustWarning"] {
font-weight: bold;
}
.codeMirrorContainer {
flex-grow: 1;
}
#userFilters {
min-height: 8em;
text-align: left;
word-wrap: normal;
}

View File

@@ -0,0 +1,237 @@
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
body {
margin-bottom: 6rem;
}
#actions {
background-color: var(--surface-1);
position: sticky;
top: 0;
z-index: 10;
}
#buttonUpdate.active {
pointer-events: none;
}
#buttonUpdate.active .fa-icon svg,
body.working #buttonUpdate:not(.disabled) .fa-icon svg {
animation: spin 1s linear infinite;
transform-origin: 50%;
}
body.updating #actions,
body.working #actions {
cursor: progress;
}
body.updating #actions #buttonUpdate,
body.working #actions button {
pointer-events: none;
}
.listExpander {
font-size: 18px;
padding: 0;
}
.listExpander:first-child {
justify-content: flex-start;
min-width: 20px;
}
.listExpander:not(:first-child) {
color: var(--checkbox-checked-ink);
fill: var(--checkbox-checked-ink);
}
.listExpander svg {
transform: rotate(90deg);
transform-origin: 50%;
}
#lists .fa-icon:hover {
transform: scale(1.25);
}
#lists .rootstats.expanded .listExpander svg {
transform: rotate(180deg);
}
#lists .searchfield {
margin-block-start: calc(var(--font-size) * 0.75);
margin-inline-start: var(--checkbox-size);
}
#lists.searchMode > .listEntries .listEntries,
#lists.searchMode > .listEntries .listEntry.searchMatch {
display: flex !important;
}
#lists.searchMode > .listEntries .listEntry {
display: none;
}
#lists.searchMode > .listEntries .listExpander {
visibility: hidden;
}
#listsOfBlockedHostsPrompt {
cursor: pointer;
}
#lists .listEntries {
display: flex;
flex-direction: column;
margin-inline-start: var(--checkbox-size);
}
#lists > .listEntries {
margin-inline-start: 0;
}
#lists .listEntry {
align-items: flex-start;
flex-direction: column;
margin-bottom: 0;
margin-inline-start: 0;
white-space: nowrap;
}
#lists .listEntry[data-key="user"] {
margin-top: 0;
}
#lists .listEntry > .detailbar {
column-gap: calc(var(--default-gap-xxsmall) + 2px);
display: inline-flex;
}
#lists .listEntry[data-key="user"] > .detailbar {
display: none;
}
#lists .listEntry[data-role="node"].expanded > .detailbar .listExpander svg {
transform: rotate(180deg);
}
#lists .listEntry[data-parent="root"]:not(.expanded) > .listEntries > .listEntry:not(.checked):not(.isDefault):not(.stickied) {
display: none;
}
#lists .listEntry:not([data-parent="root"]):not(.expanded) > .listEntries > .listEntry {
display: none;
}
#lists .nodestats {
align-self: flex-end;
color: var(--info0-ink);
fill: var(--info0-ink);
cursor: default;
font-size: var(--font-size-smaller);
}
#lists .iconbar {
column-gap: var(--default-gap-xxsmall);
color: var(--info0-ink);
fill: var(--info0-ink);
display: inline-flex;
flex-direction: row;
font-size: 120%;
}
#lists .iconbar a {
color: var(--info0-ink);
fill: var(--info0-ink);
}
#lists .iconbar .fa-icon {
display: none;
}
#lists .iconbar .content {
display: inline-flex;
}
#lists .iconbar a.towiki {
display: inline-flex;
}
#lists .listEntry > .detailbar .iconbar a.support {
display: inline-flex;
}
#lists .listEntry > .detailbar .iconbar a.support[href="#"] {
display: none;
}
#lists .iconbar .remove,
#lists .iconbar .unsecure,
#lists .iconbar .failed {
color: var(--info3-ink);
fill: var(--info3-ink);
cursor: pointer;
}
#lists .listEntry.external > .detailbar .iconbar .remove {
display: inline-flex;
}
#lists .listEntry > .detailbar .iconbar a.mustread {
color: var(--info1-ink);
fill: var(--info1-ink);
display: inline-flex;
}
#lists .listEntry > .detailbar .iconbar a.mustread[href="#"] {
display: none;
}
#lists .listEntry .leafstats {
align-items: flex-end;
color: var(--info0-ink);
fill: var(--info0-ink);
display: none;
font-size: var(--font-size-xsmall);
margin-inline-start: calc(var(--checkbox-size) + var(--checkbox-margin-end));
}
#lists .listEntry > .detailbar .leafstats {
margin-inline-start: 0;
}
#lists .listEntry.checked > .leafstats,
#lists .listEntry.checked > .detailbar .leafstats {
display: inline-flex;
}
#lists .iconbar .status {
cursor: default;
display: none;
}
#lists .listEntry.checked.unsecure > .detailbar .iconbar .unsecure {
display: inline-flex;
}
#lists .listEntry.failed > .detailbar .iconbar .failed {
display: inline-flex;
}
#lists .iconbar .cache {
cursor: pointer;
}
#lists .listEntry.checked.cached:not(.obsolete) > .detailbar .iconbar .cache {
display: inline-flex;
}
#lists .listEntry.cached.recent:not(.obsolete) > .detailbar .iconbar .cache {
color: var(--dashboard-happy-green);
fill: var(--dashboard-happy-green);
}
#lists .iconbar .obsolete {
color: var(--info2-ink);
fill: var(--info2-ink);
}
body:not(.updating,.working) #lists .listEntry.checked.obsolete > .detailbar .iconbar .obsolete {
display: inline-flex;
}
#lists .iconbar .updating {
transform-origin: 50%;
}
body.updating #lists .listEntry.checked.obsolete > .detailbar .iconbar .updating,
body.working #lists .listEntry.checked.obsolete:not(.cached) > .detailbar .iconbar .updating {
animation: spin 1s steps(8) infinite;
display: inline-flex;
}
#lists .listEntry.toRemove .checkbox {
visibility: hidden;
}
#lists .listEntry.toRemove .listname {
text-decoration: line-through;
}
#lists .listEntry[data-role="import"].expanded .listExpander svg {
transform: rotate(180deg);
}
#lists .listEntry[data-role="import"].expanded textarea {
visibility: visible;
}
#lists .listEntry[data-role="import"] textarea {
border: 1px solid #ccc;
box-sizing: border-box;
display: block;
font-size: smaller;
height: 6em;
margin: 0;
resize: vertical;
visibility: hidden;
white-space: pre;
width: 100%;
}

View File

@@ -0,0 +1,3 @@
body {
margin-bottom: 6rem;
}

View File

@@ -0,0 +1,27 @@
html {
height: 100vh;
height: 100svh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
width: 100%;
}
.body {
flex-shrink: 0;
}
.codeMirrorContainer {
flex-grow: 1;
}
#advancedSettings {
border: var(--default-gap-xxsmall) solid var(--surface-2);
text-align: left;
}
.CodeMirror-wrap pre {
word-break: break-all;
}

View File

@@ -0,0 +1,80 @@
/**
uBlock Origin - a browser extension to block requests.
Copyright (C) 2014-present Raymond Hill
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see {http://www.gnu.org/licenses/}.
Home: https://github.com/gorhill/uBlock
*/
body {
border: 0;
display: flex;
flex-direction: column;
height: 100vh;
height: 100svh;
margin: 0;
overflow: hidden;
padding: 0;
width: 100vw;
}
#subscribe {
display: flex;
flex-shrink: 0;
justify-content: space-between;
max-height: 6em;
padding-inline-end: 0.5em;
}
#subscribe.hide {
display: none;
}
.logo {
background-color: #fffa;
flex-shrink: 0;
width: 2em;
}
#subscribePrompt {
display: inline-flex;
flex-direction: column;
padding: 0.5em;
}
#subscribePrompt > span {
font-weight: bold;
}
#subscribePrompt > a {
font-size: 14px;
word-break: break-all;
}
#subscribe > button {
align-self: center;
}
#subscribe > .fa-icon {
color: var(--accent-ink-1);
fill: var(--accent-ink-1);
font-size: 20px;
}
body.loading #subscribe > button,
body:not(.loading) #subscribe > .fa-icon {
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
body.loading #subscribe > .fa-icon > svg {
animation: spin 1s steps(8) infinite;
}
#content {
flex-grow: 1;
}

View File

@@ -0,0 +1,53 @@
/**
uBlock Origin - a browser extension to block requests.
Copyright (C) 2014-present Raymond Hill
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see {http://www.gnu.org/licenses/}.
Home: https://github.com/gorhill/uBlock
*/
body {
align-items: center;
border: 1px solid var(--ubo-red);
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100vh;
padding: 0 2px;
position: relative;
width: 100vw;
}
.logo {
left: 0;
padding: 2px 1px;
position: absolute;
top: 0;
}
#frameURL {
font-family: monospace;
font-size: 90%;
overflow-y: auto;
word-break: break-all;
}
#frameURL > a {
font-size: 1rem;
}
#clickToLoad {
cursor: default;
margin-bottom: 1em;
}

View File

@@ -0,0 +1,104 @@
#cloudWidget {
background-color: var(--surface-2);
margin: 0.5em 0;
min-width: max-content;
position: relative;
}
#cloudWidget.hide {
display: none;
}
#cloudWidget div {
display: flex;
}
#cloudToolbar {
align-items: flex-start;
flex-wrap: nowrap;
justify-content: space-between;
}
#cloudToolbar > div:first-of-type {
margin: 0.5em;
}
#cloudToolbar button {
padding: 0 0.25em;
position: relative;
}
#cloudToolbar button .fa-icon {
font-size: 180%;
}
#cloudToolbar button[disabled] {
visibility: hidden;
}
#cloudToolbar button.error {
color: var(--info3-ink);
}
#cloudPullAndMerge {
margin-left: 0.25em;
}
#cloudPullAndMerge > span:nth-of-type(2) {
font-size: 90%;
position: absolute;
right: 0;
top: 0;
}
#cloudInfo {
flex-shrink: 0;
font-size: 90%;
margin: 0 1em;
overflow: hidden;
padding: 0;
white-space: pre-line;
}
#cloudCapacity {
background-color: var(--surface-3);
height: 4px;
}
#cloudCapacity > div {
background-color: var(--cloud-total-used-surface);
}
#cloudCapacity > div > div {
background-color: var(--cloud-used-surface);
}
#cloudError {
color: var(--info3-ink);
flex-grow: 1;
flex-shrink: 2;
font-size: small;
margin: 0 0.5em 0.5em 0.5em;
}
#cloudError:empty {
display: none;
}
#cloudCog {
color: var(--ink-3);
fill: var(--ink-3);
cursor: pointer;
font-size: 110%;
justify-content: flex-end;
padding: 0.4em;
}
#cloudCog:hover {
color: inherit;
fill: inherit;
}
#cloudWidget #cloudOptions {
align-items: center;
background-color: var(--surface-1);
bottom: 2px;
display: none;
font-size: small;
padding: 0.5em;
position: absolute;
right: 2px;
text-align: center;
top: 2px;
z-index: 10;
}
#cloudWidget #cloudOptions label {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
#cloudWidget #cloudOptions.show {
display: flex;
white-space: nowrap;
}

View File

@@ -0,0 +1,68 @@
body {
border: 0;
display: flex;
flex-direction: column;
height: 100vh;
height: 100svh;
margin: 0;
overflow: hidden;
padding: 0;
width: 100vw;
}
#header {
background-color: var(--cm-gutter-surface);
border-bottom: 1px solid var(--surface-1);
padding: var(--default-gap-xsmall);
position: relative;
z-index: 1000000;
}
#header input[type="url"] {
box-sizing: border-box;
font-size: var(--font-size-smaller);
width: 100%;
}
#header:focus-within #pastURLs {
display: flex;
}
#currentURL {
display: flex;
gap: 0.5rem;
}
#currentURL > .fa-icon {
padding: 0 0.5rem;
}
#currentURL > .fa-icon:hover {
background-color: var(--surface-3);
}
#pastURLs {
background-color: var(--surface-0);
border: 1px solid var(--border-1);
display: none;
flex-direction: column;
font-size: var(--font-size-smaller);
position: absolute;
}
#pastURLs > span {
cursor: pointer;
overflow: hidden;
padding: 2px 4px;
text-overflow: ellipsis;
white-space: nowrap;
width: 75vw;
}
#pastURLs > span.selected {
font-weight: bold;
}
#pastURLs > span:hover {
background-color: var(--surface-1);
}
#content {
flex-grow: 1;
}
.cm-href {
cursor: pointer;
}
.cm-href:hover {
text-decoration: underline;
}

View File

@@ -0,0 +1,358 @@
.codeMirrorContainer {
line-height: 1.25;
overflow: hidden;
position: relative;
}
.codeMirrorContainer.cm-maximized {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.CodeMirror {
background-color: var(--surface-0);
box-sizing: border-box;
color: var(--ink-1);
flex-grow: 1;
font-size: var(--monospace-size);
height: 100%;
width: 100%;
}
.CodeMirror-cursor {
border-color: var(--cm-cursor);
}
.CodeMirror-selected {
background-color: var(--cm-selection-surface);
}
.CodeMirror-focused .CodeMirror-selected {
background-color: var(--cm-selection-focused-surface);
}
.CodeMirror-foldmarker {
color: var(--cm-foldmarker-ink);
cursor: pointer;
font-family: sans-serif;
font-weight: bold;
}
.CodeMirror-foldgutter-folded::after {
content: '\25B6';
}
.CodeMirror-foldgutter-open::after {
content: '\25BC';
}
.CodeMirror-gutters {
background-color: var(--cm-gutter-surface);
border-color: var(--cm-gutter-border);
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background-color: var(--cm-selection-focused-surface);
}
.CodeMirror-linenumber {
color: var(--cm-gutter-ink);
}
.CodeMirror-lines {
padding-bottom: 6rem;
}
.CodeMirror-matchingbracket {
color: unset;
}
.CodeMirror-matchingbracket {
background-color: var(--cm-matchingbracket) !important;
color: inherit !important;
font-weight: bold;
}
.CodeMirror-search-match {
background: none;
background-color: var(--cm-search-match-surface);
border: 0;
opacity: 1;
}
/* For when panels are used */
.codeMirrorContainer > div:not([class^="CodeMirror"]) {
display: flex;
flex-direction: column;
height: 100%;
}
.codeMirrorContainer.codeMirrorBreakAll .CodeMirror-wrap pre {
word-break: break-all;
}
.cm-theme-override .cm-s-default .cm-comment {
color: var(--sf-comment-ink);
}
.cm-theme-override .cm-s-default .cm-def {
color: var(--sf-def-ink);
}
.cm-theme-override .cm-s-default .cm-directive {
color: var(--sf-directive-ink);
font-weight: bold;
}
.cm-theme-override .cm-s-default .cm-error {
color: inherit;
}
.cm-theme-override .cm-s-default .cm-error,
.CodeMirror-linebackground.error {
background-color: var(--sf-error-surface);
text-decoration: var(--sf-error-ink) dashed underline;
}
.cm-theme-override .cm-s-default .cm-link {
text-decoration: none;
}
.cm-theme-override .cm-s-default .cm-link:hover {
color: var(--link-ink);
}
.cm-theme-override .cm-s-default .cm-keyword {
color: var(--sf-keyword-ink);
}
.cm-theme-override .cm-s-default .cm-negative {
color: var(--cm-negative);
}
.cm-theme-override .cm-s-default .cm-positive {
color: var(--cm-positive);
}
.cm-theme-override .cm-s-default .cm-notice {
text-decoration-color: var(--sf-notice-ink);
text-decoration-style: solid;
text-decoration-line: underline;
}
.cm-theme-override .cm-s-default .cm-unicode {
text-decoration-color: var(--sf-unicode-ink);
text-decoration-style: dashed;
text-decoration-line: underline;
}
.cm-theme-override .cm-s-default .cm-tag {
color: var(--sf-tag-ink);
}
.cm-theme-override .cm-s-default .cm-value {
color: var(--sf-value-ink);
}
.cm-theme-override .cm-s-default .cm-variable {
color: var(--sf-variable-ink);
}
.cm-theme-override .cm-s-default .CodeMirror-activeline .cm-ext-js .cm-variable {
text-decoration: underline color-mix(in srgb, var(--sf-variable-ink) 30%, transparent) solid 3px;
text-decoration-skip-ink: none;
}
.cm-theme-override .cm-s-default .cm-warning {
background-color: var(--sf-warning-surface);
text-decoration: underline var(--sf-warning-ink);
}
.cm-theme-override .cm-s-default .cm-readonly {
color: var(--sf-readonly-ink);
}
/* Rules */
.cm-s-default .cm-allowrule {
color: var(--df-allow-ink);
font-weight: bold;
}
.cm-s-default .cm-blockrule {
color: var(--df-block-ink);
font-weight: bold;
}
.cm-s-default .cm-nooprule {
color: var(--df-noop-ink);
font-weight: bold;
}
.cm-s-default .cm-sortkey {
color: var(--sf-keyword-ink);
}
.cm-search-widget {
background-color: var(--cm-gutter-surface);
border-bottom: 1px solid var(--cm-gutter-border);
cursor: default;
direction: ltr;
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: space-between;
line-height: 1.5;
padding: var(--default-gap-xsmall);
row-gap: var(--default-gap-xsmall);
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
z-index: 1000;
}
.cm-search-widget > * {
flex-grow: 1;
}
.cm-search-widget > :last-child {
text-align: end;
}
.cm-search-widget .cm-maximize {
fill: none;
flex-grow: 0;
font-size: 130%;
height: 1em;
stroke-width: 3px;
stroke: var(--ink-0);
width: 1em;
}
.cm-search-widget .cm-maximize * {
pointer-events: none;
}
.codeMirrorContainer[data-maximizable="false"] .cm-search-widget .cm-maximize {
display: none;
}
.codeMirrorContainer .cm-search-widget .cm-maximize svg > path:nth-child(2),
.codeMirrorContainer.cm-maximized .cm-search-widget .cm-maximize svg > path:nth-child(1) {
display: none;
}
.codeMirrorContainer.cm-maximized .cm-search-widget .cm-maximize svg > path:nth-child(2) {
display: initial;
}
html:not(.mobile) .cm-search-widget .cm-maximize:hover {
transform: scale(1.2);
}
.cm-search-widget-input {
display: inline-flex;
flex-grow: 1;
flex-wrap: nowrap;
}
.cm-search-widget .fa-icon {
font-size: 140%;
}
html:not(.mobile) .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
transform: scale(1.2);
}
.cm-search-widget-input input {
flex-grow: 1;
max-width: min(16em, 40svw);
}
.cm-search-widget-count {
align-items: center;
display: inline-flex;
flex-grow: 0;
font-size: var(--font-size-smaller);
visibility: hidden;
}
.cm-search-widget[data-query] .cm-search-widget-count {
visibility: visible;
}
.cm-search-widget[data-query] .cm-search-widget-count:empty {
visibility: hidden;
}
.cm-search-widget .sourceURL[href=""] {
display: none;
}
:root.mobile .cm-search-widget .sourceURL[href=""] {
display: none;
}
.cm-linter-widget {
align-items: center;
display: none;
flex-grow: 1;
}
.cm-linter-widget:not([data-lint="0"]) {
display: inline-flex;
}
.cm-linter-widget .cm-linter-widget-count {
color: var(--accent-surface-1);
fill: var(--accent-surface-1);
font-size: var(--font-size-smaller);
}
.cm-searching.cm-overlay {
background-color: var(--cm-searching-surface) !important;
border: 0;
color: var(--cm-searching-ink) !important;
}
.CodeMirror-merge {
border-color: var(--cm-gutter-border);
}
.CodeMirror-merge-copy,
.CodeMirror-merge-copy-reverse {
color: var(--cm-merge-copy-ink);
}
.CodeMirror-merge-l-chunk {
background-color: var(--cm-merge-chunk-surface);
}
.CodeMirror-merge-l-chunk-start,
.CodeMirror-merge-l-chunk-end {
border-color: var(--cm-merge-chunk-border);
}
.CodeMirror-merge-l-deleted {
background-image: none;
}
.CodeMirror-merge-l-inserted {
background-image: none;
}
/* This probably needs to be added to CodeMirror repo */
.CodeMirror-merge-gap {
background-color: var(--cm-gutter-surface);
border-color: var(--cm-gutter-border);
vertical-align: top;
}
.CodeMirror-merge-scrolllock {
color: var(--cm-merge-copy-ink);
}
.CodeMirror-merge-spacer {
background-color: var(--cm-merge-chunk-surface);
}
.CodeMirror-hints {
z-index: 10000;
}
/* Must appear after other background color declarations to be sure it
* overrides them
* */
.CodeMirror-activeline-background {
background-color: var(--cm-active-line);
}
.CodeMirror-lintmarker {
height: calc(var(--font-size) - 2px);
margin-top: 1px;
position: relative;
}
.CodeMirror-lintmarker > * {
position: absolute;
}
.CodeMirror-lintmarker[data-error="y"] {
background-color: var(--sf-error-ink);
}
.CodeMirror-lintmarker .msg {
background-color: var(--surface-0);
border: 1px solid var(--sf-error-ink);
color: var(--ink-1);
display: none;
filter: drop-shadow(2px 2px 4px #0008);
left: 100%;
padding: var(--default-gap-xsmall);
top: -2px;
white-space: pre;
}
.CodeMirror-lintmarker svg {
height: 70%;
left: 15%;
top: 15%;
width: 70%;
}
.CodeMirror-lintmarker[data-error="y"] svg {
display: none;
}
.CodeMirror-lintmarker[data-fold="start"] {
fill: var(--cm-foldmarker-ink);
}
.CodeMirror-lintmarker[data-fold="start"].folded svg {
transform: rotate(-90deg);
}
.CodeMirror-lintmarker[data-fold="end"] {
fill: var(--border-2);
}
.CodeMirror-lintmarker[data-error="y"]:hover > span,
.CodeMirror-lintmarker[data-error="y"] > span:hover {
display: initial;
}

View File

@@ -0,0 +1,381 @@
@charset "UTF-8";
/* https://protocol.mozilla.org/assets/docs/css/protocol.css */
@font-face {
font-family: Inter;
font-style: normal;
font-weight: normal;
src: url('fonts/Inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
src: url('fonts/Inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: Metropolis;
font-style: normal;
font-weight: normal;
src: url('fonts/Metropolis/Metropolis-Regular.woff2') format('woff2');
}
@font-face {
font-family: Metropolis;
font-style: normal;
font-weight: 600;
src: url('fonts/Metropolis/Metropolis-SemiBold.woff2') format('woff2');
}
/**
Common uBO spacing.
Ref: https://github.com/uBlockOrigin/uBlock-issues/issues/1005
*/
:root {
--default-gap-xxlarge: 40px;
--default-gap-xlarge: 32px;
--default-gap-large: 24px;
--default-gap: 16px;
--default-gap-small: 12px;
--default-gap-xsmall: 8px;
--default-gap-xxsmall: 4px;
}
/* Common uBO styles */
body {
background-color: var(--surface-1);
border: 0;
box-sizing: border-box;
color: var(--ink-1);
fill: var(--ink-1);
font-family: var(--font-family);
font-size: var(--font-size);
line-height: 1.5;
margin: 0;
padding: 0;
}
a:not(.fa-icon) {
color: var(--link-ink);
fill: var(--link-ink);
}
a:not(.fa-icon):hover {
color: var(--link-hover-ink);
fill: var(--link-hover-ink);
}
code, .code {
background-color: var(--surface-2);
font-family: monospace;
font-size: var(--monospace-size);
padding: 2px 4px;
}
hr {
border: 0;
border-top: 1px solid var(--surface-2);
margin: 1em 0;
}
textarea {
font-size: 90%;
}
button {
align-items: center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: 0;
border-radius: var(--button-border-radius);
background-color: var(--button-surface);
color: var(--button-ink);
display: inline-flex;
fill: var(--button-ink);
font-size: max(calc(var(--font-size) * 0.875), 14px);
justify-content: center;
min-height: 36px;
padding: 0 var(--font-size);
position: relative;
vertical-align: middle;
}
button.vflex {
height: 100%;
min-height: unset;
padding-bottom: 0;
padding-top: 0;
}
button > .hover {
background-color: var(--elevation-up-surface);
border-radius: var(--button-border-radius);
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
button:not(.disabled):not([disabled]):hover > .hover {
opacity: var(--elevation-up1-opacity);
}
button.notext:not(.disabled):not([disabled]):hover > .hover {
opacity: var(--elevation-up2-opacity);
}
button.active {
}
button.disabled,
button[disabled] {
background-color: var(--button-disabled-surface);
color: var(--button-ink);
fill: var(--button-ink);
filter: var(--button-disabled-filter);
pointer-events: none;
}
button.preferred:not(.disabled):not([disabled]) {
background-color: var(--button-preferred-surface);
color: var(--button-preferred-ink);
fill: var(--button-preferred-ink);
}
button.preferred:not(.disabled):not([disabled]):hover > .hover {
background-color: var(--elevation-down-surface);
opacity: var(--elevation-down1-opacity);
}
button.iconified.notext {
background-color: transparent;
}
button.iconified > .fa-icon {
font-size: 120%;
padding-left: 0;
padding-right: 0;
}
button.iconified > .fa-icon + [data-i18n] {
padding-right: 0;
padding-left: 0.4em;
}
body[dir="rtl"] button.iconified > .fa-icon + [data-i18n] {
padding-right: 0.4em;
padding-left: 0;
}
label {
align-items: center;
display: inline-flex;
position: relative;
}
section.notice {
background-color: var(--notice-surface);
box-shadow: var(--notice-surface-shadow);
color: var(--notice-ink);
}
:root:not(.classic) section.notice a {
color: var(--surface-2);
}
/**
Checkbox design borrowed from:
- https://material.io/components/selection-controls
Motivation:
- To comply with design suggestions to make uBO comply with
Firefox Preview design guidelines.
- To have a single checkbox design across all platforms.
*/
.checkbox {
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
height: var(--checkbox-size);
margin: 0;
margin-inline-end: var(--checkbox-margin-end);
-webkit-margin-end: var(--checkbox-margin-end);
position: relative;
width: var(--checkbox-size);
}
label:hover .checkbox:not([disabled]) {
background-color: var(--surface-2);
}
.checkbox > input[type="checkbox"] {
box-sizing: border-box;
height: 100%;
margin: 0;
min-width: var(--checkbox-size);
opacity: 0;
position: absolute;
width: 100%;
}
.checkbox > input[type="checkbox"] + svg {
background-color: transparent;
border: 2px solid var(--checkbox-ink);
border-radius: 2px;
box-sizing: border-box;
fill: none;
height: 100%;
pointer-events: none;
position: absolute;
stroke: none;
stroke-width: 3.12px;
width: 100%;
}
.checkbox > input[type="checkbox"]:checked + svg {
background-color: var(--checkbox-checked-ink);
border-color: var(--checkbox-checked-ink);
stroke: var(--surface-1);
}
.checkbox[disabled],
.checkbox[disabled] ~ span {
filter: var(--checkbox-disabled-filter);
}
.checkbox.partial > input[type="checkbox"]:checked + svg {
background-color: var(--surface-1);
border-color: var(--checkbox-checked-ink);
stroke: var(--checkbox-checked-ink);
}
.radio {
--margin-end: calc(var(--font-size) * 0.75);
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
height: calc(var(--checkbox-size) + 2px);
margin: 0;
margin-inline-end: var(--margin-end);
-webkit-margin-end: var(--margin-end);
position: relative;
width: calc(var(--checkbox-size) + 2px);
}
.radio > input[type="radio"] {
box-sizing: border-box;
height: 100%;
margin: 0;
min-width: var(--checkbox-size);
opacity: 0;
position: absolute;
width: 100%;
}
.radio > input[type="radio"] + svg {
background-color: transparent;
box-sizing: border-box;
height: 100%;
pointer-events: none;
position: absolute;
width: 100%;
}
.radio > input[type="radio"] + svg > path {
fill: var(--checkbox-ink);
}
.radio > input[type="radio"] + svg > circle {
fill: transparent;
}
label:hover .radio > input[type="radio"]:not(:checked) + svg > circle {
fill: var(--surface-3);
}
.radio > input[type="radio"]:checked + svg > path,
.radio > input[type="radio"]:checked + svg > circle {
fill: var(--checkbox-checked-ink);
}
select {
padding: 2px;
}
.searchfield {
align-items: center;
column-gap: var(--default-gap-xxsmall);
display: inline-flex;
position: relative;
}
.searchfield .fa-icon {
color: var(--ink-4);
fill: var(--ink-4);
font-size: 1em !important;
left: 2px;
position: absolute;
transform: none;
}
.searchfield input:not(:placeholder-shown) ~ .fa-icon {
display: none;
}
.hidden {
display: none;
height: 0;
visibility: hidden;
width: 0;
}
.subtil {
color: var(--subtil-ink);
cursor: default;
opacity: 66%;
}
.fieldset {
margin: var(--font-size);
}
.fieldset-header {
color: var(--fieldset-header-ink);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.ul {
margin: 1em 0;
}
.li {
align-items: center;
display: flex;
margin: calc(var(--font-size) * 0.75) 0;
}
.liul {
margin: 0.5em 0;
margin-inline-start: 2em;
-webkit-margin-start: 2em;
}
@media (max-width: 640px) {
button.iconified > .fa-icon {
font-size: 1.2rem;
padding: 0;
}
button.iconified:not(.dontshrink) > [data-i18n] {
display: none;
}
}
.countryFlag {
height: var(--font-size);
position: relative;
top: calc(var(--font-size) / 7);
max-width: calc(var(--font-size) * 1.5);
}
.logo {
align-items: center;
display: inline-flex;
padding: 0 0.5em;
width: 1.25em;
}
.logo > img {
width: 100%;
}
.wikilink[href=""] {
display: none;
}
.wikilink.fa-icon {
color: var(--info0-ink);
fill: var(--info0-ink);
padding: var(--default-gap-xxsmall) var(--default-gap-xsmall);
}
.wikilink.fa-icon:hover {
transform: scale(1.2);
}
.wikilink.fa-icon > svg {
height: 1.25rem;
width: 1.25rem;
}
/* high dpi devices */
:root.hidpi button {
font-family: Metropolis, sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
}
:root.hidpi .fieldset-header {
font-family: Metropolis, sans-serif;
}
/* touch-screen devices */
:root.mobile label {
flex-grow: 1
}

View File

@@ -0,0 +1,55 @@
body > div.body {
padding: 0 0.5em;
}
h2, h3 {
margin: 1em 0;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
a {
text-decoration: none;
}
.fa-icon.info {
color: var(--info0-ink);
fill: var(--info0-ink);
font-size: 115%;
}
.fa-icon.info:hover {
transform: scale(1.25);
}
.fa-icon.info.important {
color: var(--info2-ink);
fill: var(--info2-ink);
}
.info.very-important {
color: var(--info3-ink);
fill: var(--info3-ink);
}
input[type="number"] {
width: 5em;
}
@media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
.body > p,
.body > ul {
margin: 0.5em 0;
}
.vverbose {
display: none !important;
}
}
/**
On mobile device, the on-screen keyboard may take up
so much space that it overlaps the content being edited.
The rule below makes it possible to scroll the edited
content within view.
*/
:root.mobile {
overflow: auto;
}
:root.mobile body {
min-height: 600px;
}

View File

@@ -0,0 +1,118 @@
html, body {
display: flex;
flex-direction: column;
height: 100vh;
height: 100svh;
justify-content: stretch;
overflow: hidden;
position: relative;
width: 100vw;
}
body.notReady {
display: none;
}
#dashboard-nav {
align-items: center;
border: 0;
border-bottom: 1px solid var(--border-1);
display: flex;
flex-shrink: 0;
justify-content: space-between;
overflow-x: hidden;
padding: 0;
position: sticky;
top: 0;
width: 100%;
z-index: 10;
}
#dashboard-nav > span {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.tabButton {
background-color: transparent;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink);
font-family: var(--font-family);
font-size: var(--font-size);
padding: 0.7em 1.4em calc(0.7em - 3px);
text-decoration: none;
white-space: nowrap;
}
.tabButton:focus {
outline: 0;
}
/*
* TODO: support keyboard-driven navigation
*
.tabButton:not(:active):focus {
background-color: var(--dashboard-tab-focus-surface);
}
*/
.tabButton.selected {
background-color: var(--dashboard-tab-active-surface);
border-bottom: 3px solid var(--dashboard-tab-active-ink);
color: var(--dashboard-tab-active-ink);
fill: var(--dashboard-tab-active-ink);
}
iframe {
background-color: transparent;
border: 0;
flex-grow: 1;
margin: 0;
padding: 0;
width: 100%;
}
#unsavedWarning {
display: none;
left: 0;
position: absolute;
width: 100%;
z-index: 20;
}
#unsavedWarning.on {
display: initial;
}
#unsavedWarning > div:first-of-type {
padding: 0.5em;
}
#unsavedWarning > div:last-of-type {
height: 100vh;
height: 100svh;
position: absolute;
width: 100vw;
}
body .tabButton[data-pane="no-dashboard.html"] {
display: none;
}
body.noDashboard #dashboard-nav {
display: none;
}
/* high dpi devices */
:root.hidpi .tabButton {
font-family: Metropolis, sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
}
/* hover-able devices */
:root.desktop .tabButton {
cursor: default;
}
:root.desktop .tabButton:not(.selected) {
cursor: pointer;
}
:root.desktop .tabButton:not(.selected):hover {
background-color: var(--dashboard-tab-hover-surface);
border-bottom-color: var(--dashboard-tab-hover-border);
}
:root.mobile #dashboard-nav .logo {
display: none;
}

View File

@@ -0,0 +1,23 @@
html {
height: 100vh;
height: 100svh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
width: 100%;
}
.body {
flex-shrink: 0;
}
.codeMirrorContainer {
flex-grow: 1;
}
#console {
text-align: left;
}

View File

@@ -0,0 +1,173 @@
/**
uBlock Origin - a browser extension to block requests.
Copyright (C) 2018-present Raymond Hill
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see {http://www.gnu.org/licenses/}.
Home: https://github.com/gorhill/uBlock
*/
body {
display: flex;
padding: var(--default-gap-xxlarge) var(--default-gap-small);
justify-content: center;
}
:root.mobile body {
padding: var(--default-gap-small);
}
#rootContainer {
width: min(100%, 640px);
}
#rootContainer > * {
margin: 0 0 var(--default-gap-xxlarge) 0;
}
:root.mobile #rootContainer > * {
margin-bottom: var(--default-gap-xlarge);
}
p {
margin: 0.5em 0;
}
a {
text-decoration: none;
}
.code {
font-size: 13px;
word-break: break-all;
}
#warningSign {
color: var(--accent-surface-1);
fill: var(--accent-surface-1);
font-size: 96px;
line-height: 1;
width: 100%;
}
:root.mobile #warningSign {
font-size: 64px;
}
#theURL {
color: var(--ink-2);
padding: 0;
}
#theURL > * {
margin: 0;
}
#theURL > p {
position: relative;
z-index: 10;
}
#theURL > p > span:first-of-type {
display: block;
max-height: 6lh;
overflow-y: auto;
}
:root.mobile #theURL > p > span:first-of-type {
max-height: 3lh;
}
#theURL #toggleParse {
background-color: transparent;
top: 100%;
box-sizing: border-box;
color: var(--ink-3);
fill: var(--ink-3);
cursor: pointer;
font-size: 1.2rem;
padding: var(--default-gap-xxsmall);
position: absolute;
transform: translate(0, -50%);
}
#theURL:not(.collapsed) #toggleParse > span:first-of-type {
display: none;
}
#theURL.collapsed #toggleParse > span:last-of-type {
display: none;
}
body[dir="ltr"] #toggleParse {
right: 0;
}
body[dir="rtl"] #toggleParse {
left: 0;
}
#theURL > p:hover #toggleParse {
transform: translate(0, -50%) scale(1.15);
}
#parsed {
background-color: var(--surface-1);
border: 4px solid var(--surface-2);
font-size: small;
overflow-x: auto;
padding: var(--default-gap-xxsmall);
text-align: initial;
text-overflow: ellipsis;
}
#theURL.collapsed > #parsed {
display: none;
}
#parsed ul, #parsed li {
list-style-type: none;
}
#parsed li {
white-space: nowrap;
}
#parsed span {
display: inline-block;
}
#parsed span:first-of-type {
font-weight: bold;
}
#whyex a {
white-space: nowrap;
}
#whyex ul {
display: flex;
flex-direction: column;
margin: 0;
padding-inline-start: var(--default-gap-xsmall);
}
#urlskip a {
display: block;
overflow-y: auto;
word-break: break-all;
}
:root.mobile #urlskip a {
max-height: 3lh;
}
#actionContainer {
display: flex;
justify-content: space-between;
}
:root.mobile #actionContainer {
justify-content: center;
display: flex;
flex-direction: column;
}
#actionContainer > button {
margin-bottom: 2rem
}
.filterList {
display: flex;
}
.filterList .filterListSupport[href=""] {
display: none;
}
/* Small-screen devices */
:root.mobile button {
width: 100%;
}

View File

@@ -0,0 +1,41 @@
html#ublock0-inspector,
#ublock0-inspector body {
background: transparent;
box-sizing: border-box;
height: 100vh;
height: 100svh;
margin: 0;
overflow: hidden;
width: 100vw;
}
#ublock0-inspector :focus {
outline: none;
}
#ublock0-inspector svg {
box-sizing: border-box;
height: 100%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
width: 100%;
}
#ublock0-inspector svg > path {
stroke-width: 1px;
}
#ublock0-inspector svg > path:nth-of-type(1) {
fill: rgba(255,0,0,0.2);
stroke: #F00;
}
#ublock0-inspector svg > path:nth-of-type(2) {
fill: rgba(0,255,0,0.2);
stroke: #0F0;
}
#ublock0-inspector svg > path:nth-of-type(3) {
fill: rgba(255,0,0,0.2);
stroke: #F00;
}
#ublock0-inspector svg > path:nth-of-type(4) {
fill: rgba(0,0,255,0.1);
stroke: #00F;
}

View File

@@ -0,0 +1,80 @@
html {
height: 100vh;
height: 100svh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
width: 100%;
}
.body {
flex-shrink: 0;
}
#diff {
border: 0;
white-space: nowrap;
}
#diff .tools > * {
margin-bottom: 1em;
}
#diff .ruleActions {
border: 0;
box-sizing: border-box;
display: inline-block;
padding: 0;
text-align: center;
vertical-align: top;
width: 50%;
white-space: nowrap;
}
#diff .ruleActions .fieldset-header {
margin: 0.5em 0;
}
#ruleFilter {
align-items: center;
background-color: var(--surface-2);
direction: ltr;
display: flex;
justify-content: center;
padding: 0.5em 0;
}
#ruleFilter #diffCollapse {
padding: 0 0.5em;
font-size: 150%;
}
#ruleFilter #diffCollapse.active {
transform: scale(1, -1);
}
.codeMirrorContainer {
flex-grow: 1;
}
.codeMirrorContainer .CodeMirror {
background-color: var(--surface-1);
}
.CodeMirror-merge, .CodeMirror-merge-pane, .CodeMirror-merge .CodeMirror {
box-sizing: border-box;
height: 100%;
}
body.editing .CodeMirror-merge-copy,
body.editing .CodeMirror-merge-copy-reverse {
display: none;
}
body.editing .CodeMirror-merge-editor .CodeMirror {
background-color: var(--surface-0);
}
body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
right: unset;
left: 0;
}
/* mobile devices */
:root.mobile #diff .tools {
overflow: auto;
}

View File

@@ -0,0 +1,280 @@
html#ublock0-epicker,
#ublock0-epicker body {
background: transparent;
cursor: not-allowed;
height: 100vh;
height: 100svh;
margin: 0;
overflow: hidden;
width: 100vw;
}
#ublock0-epicker :focus {
outline: none;
}
#ublock0-epicker aside {
background-color: var(--surface-1);
border: 1px solid var(--border-2);
box-sizing: border-box;
cursor: default;
display: none;
flex-direction: column;
max-width: min(32rem, 100vw - 4px);
min-width: min(24rem, 100vw - 4px);
overflow-y: auto;
position: fixed;
width: min(32rem, 100vw - 4px);
z-index: 100;
}
#ublock0-epicker:not(.zap) aside {
display: flex;
}
#ublock0-epicker:not(.paused) aside,
#ublock0-epicker.minimized aside {
min-width: min(16rem, 100vw - 4px);
overflow: hidden;
width: min(16rem, 100vw - 4px);
}
#ublock0-epicker:not(.paused) aside > *:not(#windowbar),
#ublock0-epicker.minimized aside > *:not(#windowbar) {
display: none;
}
#ublock0-epicker aside > *:not(:first-child) {
padding: 0 2px;
}
#ublock0-epicker #toolbar {
display: flex;
justify-content: space-between;
}
#ublock0-epicker #toolbar button {
min-width: 5em;
}
#ublock0-epicker ul {
margin: 0.25em 0 0 0;
}
#ublock0-epicker.preview #preview {
background-color: var(--button-preferred-surface);
color: var(--button-preferred-ink);
}
#ublock0-epicker section {
border: 0;
box-sizing: border-box;
display: inline-block;
width: 100%;
}
#ublock0-epicker section > div:first-child {
border: 1px solid var(--surface-3);
margin: 0;
position: relative;
}
#ublock0-epicker section.invalidFilter > div:first-child {
border-color: var(--error-surface);
}
#ublock0-epicker section .codeMirrorContainer {
border: none;
box-sizing: border-box;
height: 10em;
max-height: min(10em, 10vh);
min-height: 1em;
padding: 2px;
width: 100%;
}
.CodeMirror-lines,
.CodeMirror pre {
padding: 0;
}
#ublock0-epicker section .resultsetWidgets {
display: flex;
font-size: var(--font-size-smaller);
}
#resultsetModifiers {
align-items: flex-end;
display: inline-flex;
flex-grow: 1;
justify-content: space-evenly;
}
#resultsetModifiers.hide > * {
visibility: hidden;
}
.resultsetModifier {
border: 0;
pointer-events: auto;
position: relative;
width: 40%;
}
.resultsetModifier > span {
align-items: flex-end;
display: flex;
height: 100%;
pointer-events: none;
width: 100%;
}
.resultsetModifier > span > span {
margin: 2px 0;
}
.resultsetModifier > span > span:nth-of-type(1) {
background-color: var(--checkbox-checked-ink);
border-inline-end: 1px solid var(--surface-3);
display: inline-block;
flex-shrink: 0;
height: 6px;
}
.resultsetModifier > span > span:nth-of-type(2) {
background-color: var(--checkbox-checked-ink);
clip-path: polygon(
calc(50% - 2px) 0%,
0% calc(100% - 6px),
0% 100%,
100% 100%,
100% calc(100% - 6px),
calc(50% + 2px) 0%
);
display: inline-block;
flex-shrink: 0;
height: 20px;
width: 20px;
}
.resultsetModifier > span > span:nth-of-type(3) {
background-color: var(--surface-3);
border-inline-start: 1px solid var(--surface-3);
display: inline-block;
flex-grow: 1;
height: 6px;
}
.resultsetModifier input {
border: 0;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
#resultsetCount {
align-items: center;
background-color: var(--surface-3);
color: var(--ink-1);
display: inline-flex;
justify-content: center;
min-width: 2.2em;
}
#ublock0-epicker section.invalidFilter #resultsetCount {
background-color: var(--error-surface);
color: var(--ink-100);
}
#ublock0-epicker section > div:first-child + div {
direction: ltr;
margin: 2px 0;
text-align: right;
}
#ublock0-epicker ul {
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;
}
#ublock0-epicker #candidateFilters {
max-height: min(18em, 18vh);
overflow-y: auto;
}
#ublock0-epicker .changeFilter > li > span:nth-of-type(1) {
font-weight: bold;
}
#ublock0-epicker .changeFilter > li > span:nth-of-type(2) {
font-size: smaller;
color: gray;
}
#ublock0-epicker #candidateFilters [data-i18n] {
font-size: 90%;
}
#ublock0-epicker #candidateFilters .changeFilter {
list-style-type: none;
margin: 0 0 0 1em;
overflow: hidden;
text-align: left;
}
#ublock0-epicker #candidateFilters .changeFilter li {
border: 1px solid transparent;
cursor: pointer;
direction: ltr;
font: 12px monospace;
white-space: nowrap;
}
#ublock0-epicker #candidateFilters .changeFilter li.active {
border: 1px dotted rgb(var(--blue-50));
}
#ublock0-epicker #candidateFilters .changeFilter li:hover {
background-color: var(--surface-2);
}
#ublock0-epicker svg#sea {
cursor: crosshair;
box-sizing: border-box;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#ublock0-epicker.paused svg#sea {
cursor: not-allowed;
}
#ublock0-epicker svg#sea > path:first-child {
fill: rgba(0,0,0,0.5);
fill-rule: evenodd;
}
#ublock0-epicker svg#sea > path + path {
stroke: #F00;
stroke-width: 0.5px;
fill: rgba(255,63,63,0.20);
}
#ublock0-epicker.zap svg#sea > path + path {
stroke: #FF0;
stroke-width: 0.5px;
fill: rgba(255,255,63,0.20);
}
#ublock0-epicker.preview svg#sea > path {
fill: rgba(0,0,0,0.10);
}
#ublock0-epicker.preview svg#sea > path + path {
stroke: none;
}
#ublock0-epicker #windowbar {
display: flex;
}
#ublock0-epicker #windowbar svg {
fill: none;
pointer-events: none;
stroke: var(--ink-1);
stroke-width: 3px;
}
#ublock0-epicker #windowbar #move {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
cursor: grab;
flex-grow: 1;
opacity: 0.8;
}
#ublock0-epicker aside.moving #windowbar #move {
cursor: grabbing;
}
#windowbar #quit,
#windowbar #minimize {
height: 2em;
width: 2em;
}
#windowbar #quit:hover,
#windowbar #minimize:hover {
background-color: var(--surface-2)
}
#ublock0-epicker.minimized #windowbar #minimize svg > path,
#windowbar #minimize svg > rect {
display: none;
}
#ublock0-epicker.minimized #windowbar #minimize svg > rect {
display: initial;
}

View File

@@ -0,0 +1,154 @@
.fa-icon {
align-items: center;
background-color: transparent;
border: 0;
display: inline-flex;
justify-content: center;
margin: 0;
padding: 0 0.1em;
position: relative;
user-select: none;
vertical-align: text-bottom;
-webkit-user-select: none;
}
.fa-icon > * {
pointer-events: none;
}
/*
.fa-icon.disabled,
.fa-icon[disabled] {
color: var(--button-disabled-ink);
fill: var(--button-disabled-ink);
filter: var(--button-disabled-filter);
stroke: var(--button-disabled-ink);
pointer-events: none;
}
*/
.fa-icon > .fa-icon-badge,
.fa-icon.disabled > .fa-icon-badge {
visibility: hidden;
}
.fa-icon.fa-icon-badged > .fa-icon-badge {
bottom: -20%;
display: inline-block;
font: 60% sans-serif;
left: calc(100% - 0.2em);
position: absolute;
visibility: visible;
}
.fa-icon.fa-icon-hflipped > svg {
transform: scale(-1, 1);
transform-origin: 50%;
}
.fa-icon.fa-icon-vflipped > svg {
transform: scale(1, -1);
transform-origin: 50%;
}
.fa-icon.fa-icon-rotright > svg {
transform: rotate(90deg);
transform-origin: 50%;
}
.fa-icon.fa-icon-rotleft > svg {
transform: rotate(-90deg);
transform-origin: 50%;
}
.fa-icon > svg {
height: 1em;
overflow: visible;
width: 1em;
}
.fa-icon > .fa-icon_bar-chart {
width: calc(1em * 2048 / 1792);
}
.fa-icon > .fa-icon_cloud-download,
.fa-icon > .fa-icon_cloud-upload,
.fa-icon > .fa-icon_cogs,
.fa-icon > .fa-icon_eraser,
.fa-icon > .fa-icon_film {
width: calc(1em * 1920 / 1792);
}
.fa-icon > .fa-icon_code {
width: calc(1em * 1830 / 1792);
}
.fa-icon > .fa-icon_exclamation-triangle {
width: calc(1em * 1794 / 1792);
}
.fa-icon > .fa-icon_clipboard,
.fa-icon > .fa-icon_comment-alt,
.fa-icon > .fa-icon_external-link,
.fa-icon > .fa-icon_eye-dropper,
.fa-icon > .fa-icon_eye-open,
.fa-icon > .fa-icon_eye-slash,
.fa-icon > .fa-icon_files-o,
.fa-icon > .fa-icon_list-alt {
width: calc(1em * 1792 / 1792);
}
.fa-icon > .fa-icon_sun,
.fa-icon > .fa-icon_sun-o {
width: calc(1em * 1708 / 1792);
}
.fa-icon > .fa-icon_book,
.fa-icon > .fa-icon_download-alt,
.fa-icon > .fa-icon_font,
.fa-icon > .fa-icon_search,
.fa-icon > .fa-icon_spinner,
.fa-icon > .fa-icon_unlink,
.fa-icon > .fa-icon_upload-alt,
.fa-icon > .fa-icon_volume-up,
.fa-icon > .fa-icon_zoom-in,
.fa-icon > .fa-icon_zoom-out {
width: calc(1em * 1664 / 1792);
}
.fa-icon > .fa-icon_terminal {
width: calc(1em * 1651 / 1792);
}
.fa-icon > .fa-icon_magic {
width: calc(1em * 1637 / 1792);
}
.fa-icon > .fa-icon_home {
width: calc(1em * 1612 / 1792);
}
.fa-icon > .fa-icon_check {
width: calc(1em * 1550 / 1792);
}
.fa-icon > .fa-icon_cog,
.fa-icon > .fa-icon_clock-o,
.fa-icon > .fa-icon_floppy-o,
.fa-icon > .fa-icon_info-circle,
.fa-icon > .fa-icon_pause-circle-o,
.fa-icon > .fa-icon_play-circle-o,
.fa-icon > .fa-icon_power-off,
.fa-icon > .fa-icon_question-circle,
.fa-icon > .fa-icon_refresh,
.fa-icon > .fa-icon_save,
.fa-icon > .fa-icon_sliders,
.fa-icon > .fa-icon_undo {
width: calc(1em * 1536 / 1792);
}
.fa-icon > .fa-icon_arrow-right {
width: calc(1em * 1472 / 1792);
}
.fa-icon > .fa-icon_filter {
width: calc(1em * 1410 / 1792);
}
.fa-icon > .fa-icon_plus,
.fa-icon > .fa-icon_trash-o {
width: calc(1em * 1408 / 1792);
}
.fa-icon > .fa-icon_times {
width: calc(1em * 1188 / 1792);
}
.fa-icon > .fa-icon_angle-up,
.fa-icon > .fa-icon_double-angle-up,
.fa-icon > .fa-icon_lock,
.fa-icon > .fa-icon_unlock-alt {
width: calc(1em * 1152 / 1792);
}
.fa-icon > .fa-icon_double-angle-left {
width: calc(1em * 966 / 1792);
}
.fa-icon > .fa-icon_bolt {
width: calc(1em * 896 / 1792);
}

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,93 @@
Copyright (c) 2016-2020 The Inter Project Authors
https://github.com/rsms/inter
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION AND CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

View File

@@ -0,0 +1,25 @@
# Metropolis
A modern, geometric typeface. Influenced by other popular geometric, minimalist sans-serif typefaces of the new millennium. Designed for optimal readability at small point sizes while beautiful at large point sizes.
![Metropolis](./Specimens/Metro-1.png)
---
![Metropolis](./Specimens/Metro-2.png)
### Where am I?
See [Documentation](./Documentation/Documentation.md).
### The Unlicense
Contributions welcome.
### Contact
Reachable via chris.m.simpson [at] icloud.com or tweet @ChrisMSimpson.
### Support
There is none. Oh, you meant support me? I dare you to click the sponsor button above.

View File

@@ -0,0 +1,24 @@
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.
In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to <http://unlicense.org/>

View File

@@ -0,0 +1,123 @@
#domInspector {
display: none;
overflow: hidden;
}
#inspectors.dom #domInspector {
display: flex;
}
#domInspector .permatoolbar .highlightMode.invert {
transform: rotate(180deg);
}
#domInspector button.vExpandToggler > .fa-icon {
transform: scaleY(-1)
}
#domInspector button.vCompactToggler > .fa-icon {
transform: scaleY(1)
}
#domInspector .vscrollable {
overflow-x: auto;
}
#domInspector > ul:first-of-type {
padding-left: 0.5em;
}
#domInspector ul {
background-color: var(--surface-1);
margin: 0;
padding-left: 1em;
}
#domInspector li {
list-style-type: none;
white-space: nowrap;
}
#domInspector li.isCosmeticHide,
#domInspector li.isCosmeticHide ul,
#domInspector li.isCosmeticHide li {
background-color: var(--surface-2);
}
#domInspector li > * {
display: inline-block;
line-height: 1.2;
margin-right: 1em;
vertical-align: middle;
}
#domInspector li > span {
color: #aaa;
}
#domInspector li > span:first-child {
color: var(--ink-1);
cursor: default;
font-size: 1rem;
margin-right: 0;
opacity: 0.5;
padding: 0 4px 0 1px;
visibility: hidden;
}
#domInspector li > span:first-child:hover {
opacity: 1;
}
#domInspector li > *:last-child {
margin-right: 0;
}
#domInspector li > span:first-child:before {
content: '\a0';
}
#domInspector li.branch > span:first-child:before {
content: '\25b8';
visibility: visible;
}
#domInspector li.branch.show > span:first-child:before {
content: '\25be';
}
#domInspector li.branch.hasCosmeticHide > span:first-child:before {
color: red;
}
#domInspector li > code {
cursor: pointer;
font-family: monospace;
overflow: hidden;
text-overflow: ellipsis;
}
#domInspector li > code.off {
text-decoration: line-through;
}
#domInspector li > code.filter {
color: var(--cm-negative);
}
#domInspector li > ul {
display: block;
}
#domInspector li:not(.hasCosmeticHide):not(.isCosmeticHide):not(.show) > ul {
display: none;
}
#domInspector li:not(.hasCosmeticHide):not(.isCosmeticHide):not(.show) {
display: none;
}
#domInspector #domTree > li {
display: block;
}
#domInspector:not(.vExpanded) ul {
display: block;
}
#domInspector li > ul > li:not(.hasCosmeticHide):not(.isCosmeticHide) {
display: none;
}
#domInspector li.show > ul > li:not(.hasCosmeticHide):not(.isCosmeticHide) {
display: block;
}
#domInspector li:not(.hasCosmeticHide):not(.isCosmeticHide) {
display: block;
}
#domInspector.hCompact li > code:first-of-type {
max-width: 12em;
}
#cosmeticFilteringDialog .dialog {
text-align: center;
}
#cosmeticFilteringDialog .dialog textarea {
height: 40vh;
white-space: pre;
word-wrap: normal;
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,779 @@
/* External CSS values override */
.fa-icon.fa-icon-badged > .fa-icon-badge {
bottom: auto;
top: -20%;
}
/* Internal CSS values */
:root body {
overflow: hidden;
}
:root body,
:root.mobile body {
--font-size: 14px;
--popup-gap: var(--font-size);
--popup-gap-thin: calc(0.5 * var(--popup-gap));
--popup-gap-extra-thin: calc(0.25 * var(--popup-gap));
--popup-main-min-width: 18em;
--popup-firewall-min-width: 30em;
--popup-rule-cell-width: 5em;
font-size: var(--font-size);
line-height: 20px;
}
:root body.loading {
opacity: 0;
}
a {
color: var(--ink-1);
fill: var(--ink-1);
text-decoration: none;
}
:focus {
outline: 0;
}
#panes {
align-items: stretch;
display: flex;
flex-direction: row-reverse;
padding: 0;
position: relative;
}
#main {
align-self: flex-start;
max-width: 340px;
min-width: var(--popup-main-min-width);
}
:root.portrait #main {
align-self: inherit;
}
hr {
border: 0;
border-top: 1px solid var(--hr-ink);
margin: 0;
padding: 0;
}
#sticky {
background-color: var(--surface-1);
position: sticky;
top: 0;
z-index: 100;
}
#stickyTools {
align-items: stretch;
display: flex;
justify-content: space-between;
margin: var(--popup-gap-extra-thin) 0;
}
#switch {
color: var(--popup-power-ink);
cursor: pointer;
display: flex;
fill: var(--popup-power-ink);
flex-grow: 1;
font-size: 96px;
justify-content: center;
margin: var(--popup-gap) 0;
padding: 0;
stroke: none;
stroke-width: 64;
}
body.off #switch {
fill: var(--surface-1);
stroke: var(--checkbox-ink);
}
.rulesetTools {
background-color: transparent;
border: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25%;
}
.rulesetTools [id] {
background-color: var(--popup-ruleset-tool-surface);
border-radius: 4px;
cursor: pointer;
fill: var(--popup-ruleset-tool-ink);
flex-grow: 1;
font-size: 2.2em;
padding: 0;
visibility: hidden;
}
.rulesetTools [id]:not(:first-of-type) {
margin-block-start: 1px;
}
.rulesetTools [id] > svg {
fill: var(--ink-4);
}
body.needReload #refresh,
body.needSave #saveRules,
body.needSave #revertRules {
visibility: visible;
}
#hostname {
background-color: var(--popup-toolbar-surface);
margin: 0;
padding: var(--popup-gap-thin) 0;
text-align: center;
white-space: normal;
}
#hostname > span {
word-break: break-all;
}
#hostname > span + span {
font-weight: 600;
}
#basicStats {
column-gap: var(--popup-gap);
display: grid;
grid-template: auto / auto;
margin: var(--popup-gap) var(--popup-gap) var(--popup-gap-thin) var(--popup-gap);
}
#basicStats > span {
justify-self: center;
white-space: nowrap;
}
#basicStats > [data-i18n] {
font-size: 95%;
}
#basicStats > [data-i18n] + span {
font-size: 105%;
margin-bottom: var(--popup-gap-thin);
}
:root.portrait #basicStats {
grid-template: auto / auto auto;
margin-bottom: 0;
}
:root.portrait #basicStats > span {
font-size: inherit;
justify-self: stretch;
margin-bottom: var(--popup-gap);
white-space: unset;
}
:root.portrait #basicStats > [data-i18n] {
}
:root.portrait #basicStats > [data-i18n] + span {
text-align: end;
}
.itemRibbon {
column-gap: var(--popup-gap);
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-template: auto / 1fr 1fr;
margin: var(--popup-gap);
}
.itemRibbon > span + span {
text-align: end;
}
.toolRibbon {
align-items: start;
background-color: var(--popup-toolbar-surface);
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-template: auto / repeat(4, 1fr);
justify-items: center;
margin: 0;
white-space: normal;
}
.toolRibbon .tool {
cursor: pointer;
display: flex;
flex-direction: column;
font-size: 1.4em;
min-width: 32px;
padding: var(--popup-gap)
var(--popup-gap-thin);
unicode-bidi: embed;
visibility: hidden;
}
.toolRibbon .tool:hover {
color: var(--ink-1);
fill: var(--ink-1);
}
.toolRibbon .tool.enabled {
visibility: visible;
}
.toolRibbon .tool .caption {
font: 10px/12px sans-serif;
margin-top: 6px;
text-align: center;
}
:root.mobile.no-tooltips .toolRibbon .tool {
font-size: 1.6em;
}
#basicTools .needPick:not(.canPick) {
visibility: hidden;
}
#extraTools .fa-icon {
align-self: center;
position: relative;
}
#extraTools .fa-icon > .nope {
height: 1.1em;
left: 50%;
position: absolute;
stroke: var(--popup-icon-x-ink);
stroke-width: 2;
transform: translateX(-50%);
visibility: hidden;
width: 1.1em;
}
#extraTools > span.on .fa-icon >.nope {
visibility: visible;
}
#unprocessedRequestWarning {
align-items: center;
background-color: #fc0;
color: rgb(var(--ink-80));
stroke: rgb(var(--ink-80));
display: none;
font-size: var(--font-size-smaller);
padding: var(--popup-gap-thin);
}
:root.warn #unprocessedRequestWarning {
display: flex;
}
#unprocessedRequestWarning > .dismiss {
flex-shrink: 0;
width: calc(var(--font-size) - 2px);
}
#unprocessedRequestWarning > .dismiss > svg {
width: 100%;
}
#moreOrLess {
column-gap: 0;
display: grid;
grid-template: auto / 1fr 1fr;
justify-items: stretch;
margin: 1px 0 0 0;
}
#moreOrLess > span {
cursor: pointer;
margin: 0;
padding: var(--popup-gap-thin) var(--popup-gap);
user-select: none;
white-space: nowrap;
}
:root.mobile #moreOrLess > span {
padding: var(--popup-gap);
}
#moreButton .fa-icon {
transform: rotate(180deg);
}
#lessButton {
border-inline-start: 1px solid var(--surface-1);
text-align: end;
}
#moreButton.disabled,
#lessButton.disabled {
pointer-events: none;
visibility: hidden;
}
#firewall {
border: 0;
flex-shrink: 1;
font-size: 90%;
margin: 0;
max-height: 600px;
max-width: 460px;
min-width: var(--popup-firewall-min-width);
padding: 0;
position: relative;
overflow-y: auto;
}
:root.desktop #firewall {
margin-inline-start: 1px;
}
:root.desktop body.vMin #firewall {
max-height: 100vh;
max-height: 100svh;
}
#firewall > * {
direction: ltr;
}
#firewall > section {
align-items: flex-start;
display: flex;
left: 0;
position: absolute;
z-index: 50;
}
#firewall > section .fa-icon {
color: var(--ink-4);
fill: var(--ink-4);
font-size: 150%;
padding: var(--popup-gap-thin);
}
#firewall > section:hover .fa-icon {
color: var(--ink-1);
fill: var(--ink-1);
}
#firewall.showBlocked > section .fa-icon,
#firewall.showAllowed > section .fa-icon,
#firewall.hideBlocked > section .fa-icon,
#firewall.hideAllowed > section .fa-icon,
#firewall.show3pScript > section .fa-icon,
#firewall.show3pFrame > section .fa-icon,
#firewall.hide3pScript > section .fa-icon,
#firewall.hide3pFrame > section .fa-icon {
color: rgb(var(--primary-70));
fill: rgb(var(--primary-70));
}
#firewall > section .filterExpressions {
background-color: var(--surface-0);
border: 1px solid var(--border-4);
display: none;
}
#firewall > section:hover .filterExpressions {
display: flex;
flex-direction: column;
}
#firewall > section .filterExpressions div {
border-bottom: 1px dotted #ddd;
padding: 0.25em;
}
#firewall > section .filterExpressions div:last-of-type {
border-bottom: 0;
}
#firewall > section .filterExpressions span {
cursor: default;
display: inline-flex;
margin: 0 0.25em 0 0;
padding: 0.5em;
white-space: nowrap;
border: 1px solid var(--surface-0);
}
#firewall > section .filterExpressions span:last-of-type {
margin: 0;
}
:root:not(.mobile) #firewall > section .filterExpressions span:not(.on):hover {
background-color: rgb(var(--primary-70) / 15%);
border: 1px solid rgb(var(--primary-70));
}
#firewall > section .filterExpressions span.on {
background-color: rgb(var(--primary-70) / 40%);
border: 1px solid rgb(var(--primary-70));
}
#firewall > div {
border: 0;
display: flex;
margin: 0;
margin-top: 1px;
padding: 0;
}
#firewall > div:first-of-type {
margin-top: 0;
}
#firewall > div:first-of-type ~ div[data-des="*"] {
display: none;
}
#firewall:not(.expanded) > div.isSubdomain:not(.expandException):not(.isRootContext),
#firewall.expanded > div.isSubdomain.expandException:not(.isRootContext) {
display: none;
}
#firewall > div > span,
#actionSelector > #dynaCounts {
background-color: var(--popup-cell-surface);
border: none;
box-sizing: border-box;
display: inline-flex;
padding: 0.4em 0;
position: relative;
}
#firewall > div:first-of-type span[data-i18n] {
cursor: pointer;
flex-direction: unset;
flex-grow: 1;
}
#firewall > div:first-of-type span[data-i18n]::before {
color: var(--ink-3);
content: '+';
padding-right: 0.25em;
}
#firewall.expanded > div:first-of-type span[data-i18n]::before {
content: '\2012';
}
#firewall > div > span:first-of-type {
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
padding-right: 2px;
text-align: right;
white-space: normal;
width: calc(100% - var(--popup-rule-cell-width));
word-break: break-word;
}
#firewall > div[data-des="*"] > span:first-of-type {
flex-direction: row;
}
#firewall.show3pScript:not(.show3pFrame) > div:not([data-des="*"]).is3p:not(.hasScript),
#firewall.show3pFrame:not(.show3pScript) > div:not([data-des="*"]).is3p:not(.hasFrame),
#firewall.show3pScript.show3pFrame > div:not([data-des="*"]).is3p:not(.hasScript):not(.hasFrame),
#firewall.hide3pScript > div:not([data-des="*"]).is3p.hasScript,
#firewall.hide3pFrame > div:not([data-des="*"]).is3p.hasFrame,
#firewall.showBlocked > div:not([data-des="*"]).is3p:not(.totalBlocked):not(.blocked),
#firewall.showAllowed > div:not([data-des="*"]).is3p:not(.totalAllowed):not(.allowed),
#firewall.hideBlocked > div:not([data-des="*"]).is3p.totalBlocked,
#firewall.hideBlocked > div:not([data-des="*"]).is3p.blocked,
#firewall.hideAllowed > div:not([data-des="*"]).is3p.totalAllowed,
#firewall.hideAllowed > div:not([data-des="*"]).is3p.allowed {
max-height: 4px;
overflow-y: hidden;
pointer-events: none;
user-select: none;
}
#firewall.show3pScript:not(.show3pFrame) > div:not([data-des="*"]).is3p:not(.hasScript) *,
#firewall.show3pFrame:not(.show3pScript) > div:not([data-des="*"]).is3p:not(.hasFrame) *,
#firewall.show3pScript.show3pFrame > div:not([data-des="*"]).is3p:not(.hasScript):not(.hasFrame) *,
#firewall.hide3pScript > div:not([data-des="*"]).is3p.hasScript *,
#firewall.hide3pFrame > div:not([data-des="*"]).is3p.hasFrame *,
#firewall.showBlocked > div:not([data-des="*"]).is3p:not(.totalBlocked):not(.blocked) *,
#firewall.showAllowed > div:not([data-des="*"]).is3p:not(.totalAllowed):not(.allowed) *,
#firewall.hideBlocked > div:not([data-des="*"]).is3p.totalBlocked *,
#firewall.hideBlocked > div:not([data-des="*"]).is3p.blocked *,
#firewall.hideAllowed > div:not([data-des="*"]).is3p.totalAllowed *,
#firewall.hideAllowed > div:not([data-des="*"]).is3p.allowed * {
color: transparent !important;
}
#firewall > div.isCname > span:first-of-type {
color: var(--popup-cell-cname-ink);
}
#firewall > div > span:first-of-type > sub {
display: inline-block;
font-size: 85%;
font-weight: normal;
padding: 0.25em 0 0 0;
}
#firewall > div > span:first-of-type > sub:empty {
display: none;
}
#firewall > div > span:first-of-type ~ span {
flex-shrink: 0;
margin-left: 1px;
width: var(--popup-rule-cell-width);
}
#firewall > div > span:nth-of-type(2) {
display: none;
}
#firewall > div > span:nth-of-type(3),
#firewall > div > span:nth-of-type(4) {
color: var(--ink-2);
display: none;
font-family: monospace;
text-align: center;
}
#firewall > div.isDomain > span:first-of-type > span {
pointer-events: none;
}
#firewall > div.isDomain > span:first-of-type > span > span {
font-weight: 600;
pointer-events: auto;
}
#firewall > div.isDomain.hasSubdomains > span:first-of-type > span::before {
content: '\2026\A0';
opacity: 0.6;
}
#firewall > div[data-des="*"] > span:nth-of-type(3),
#firewall > div.isSubdomain > span:nth-of-type(3),
#firewall > div.isSubdomain.isRootContext > span:nth-of-type(3),
#firewall.expanded > div:not(.expandException) > span:nth-of-type(3),
#firewall:not(.expanded) > div.expandException > span:nth-of-type(3),
#firewall:not(.expanded) > div.isDomain:not(.expandException) > span:nth-of-type(4),
#firewall.expanded > div.isDomain.expandException > span:nth-of-type(4),
#actionSelector > #dynaCounts {
display: inline-flex;
justify-content: space-between;
}
#firewall > div > span[data-acount]::before,
#firewall > div > span[data-bcount]::after,
#firewall > div > span[data-acount] > #actionSelector > #dynaCounts::before,
#firewall > div > span[data-acount] > #actionSelector > #dynaCounts::after {
content: ' ';
}
#firewall > div > span[data-acount]::before,
#firewall > div > span[data-acount] > #actionSelector > #dynaCounts::before {
padding-left: 0.1em;
}
#firewall > div > span[data-acount="1"]::before,
#firewall > div > span[data-acount="1"] > #actionSelector > #dynaCounts::before {
content: '+';
}
#firewall > div > span[data-acount="2"]::before,
#firewall > div > span[data-acount="2"] > #actionSelector > #dynaCounts::before {
content: '++';
}
#firewall > div > span[data-acount="3"]::before,
#firewall > div > span[data-acount="3"] > #actionSelector > #dynaCounts::before {
content: '+++';
}
#firewall > div > span[data-bcount]::after,
#firewall > div > span[data-bcount] > #actionSelector > #dynaCounts::after {
padding-right: 0.1em;
}
#firewall > div > span[data-bcount="1"]::after,
#firewall > div > span[data-bcount="1"] > #actionSelector > #dynaCounts::after {
content: '\2212';
}
#firewall > div > span[data-bcount="2"]::after,
#firewall > div > span[data-bcount="2"] > #actionSelector > #dynaCounts::after {
content: '\2212\2212';
}
#firewall > div > span[data-bcount="3"]::after,
#firewall > div > span[data-bcount="3"] > #actionSelector > #dynaCounts::after {
content: '\2212\2212\2212';
}
body.advancedUser #firewall > div > span:first-of-type {
width: calc(100% - 2 * var(--popup-rule-cell-width));
}
body.advancedUser #firewall > div > span:nth-of-type(2) {
display: inline-flex;
}
body.advancedUser #firewall > div:first-of-type ~ div[data-des="*"] {
display: flex;
}
body.advancedUser #firewall > div > span:first-of-type ~ span {
cursor: pointer;
}
/**
Small coloured label at the left of a row
*/
#firewall > div.isRootContext > span:first-of-type::before,
#firewall > div.allowed > span:first-of-type::before,
#firewall > div.blocked > span:first-of-type::before,
#firewall:not(.expanded) > div.isDomain.totalAllowed:not(.expandException) > span:first-of-type::before,
#firewall:not(.expanded) > div.isDomain.totalBlocked:not(.expandException) > span:first-of-type::before,
#firewall.expanded > div.isDomain.totalAllowed.expandException > span:first-of-type::before,
#firewall.expanded > div.isDomain.totalBlocked.expandException > span:first-of-type::before {
box-sizing: border-box;
content: '';
display: inline-block;
filter: var(--popup-cell-label-filter);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 7px;
}
#firewall > div.isRootContext > span:first-of-type::before {
background: var(--ink-3);
width: 14px !important;
}
#firewall > div.allowed > span:first-of-type::before,
#firewall > div.isDomain.totalAllowed > span:first-of-type::before {
background: var(--popup-cell-allow-own-surface);
}
#firewall > div.blocked > span:first-of-type::before,
#firewall > div.isDomain.totalBlocked > span:first-of-type::before {
background: var(--popup-cell-block-own-surface);
}
#firewall > div.allowed.blocked > span:first-of-type::before,
#firewall > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
background: var(--popup-cell-label-mixed-surface);
}
/* Rule cells */
body.advancedUser #firewall > div > span.allowRule,
#actionSelector > #dynaAllow {
background: var(--popup-cell-allow-surface);
}
body.advancedUser #firewall > div > span.blockRule,
#actionSelector > #dynaBlock {
background: var(--popup-cell-block-surface);
}
body.advancedUser #firewall > div > span.noopRule,
#actionSelector > #dynaNoop {
background: var(--popup-cell-noop-surface);
}
body.advancedUser #firewall > div > span.ownRule,
#firewall > div > span.ownRule {
color: var(--surface-1);
}
body.advancedUser #firewall > div > span.allowRule.ownRule,
:root:not(.mobile) #actionSelector > #dynaAllow:hover {
background: var(--popup-cell-allow-own-surface);
}
body.advancedUser #firewall > div > span.blockRule.ownRule,
:root:not(.mobile) #actionSelector > #dynaBlock:hover {
background: var(--popup-cell-block-own-surface);
}
body.advancedUser #firewall > div > span.noopRule.ownRule,
:root:not(.mobile) #actionSelector > #dynaNoop:hover {
background: var(--popup-cell-noop-own-surface);
}
#actionSelector {
box-sizing: border-box;
display: flex;
height: 100%;
justify-items: stretch;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
#actionSelector > span {
display: inline-block;
flex-grow: 1;
}
#actionSelector > #dynaAllow {
display: none;
}
body.godMode #actionSelector > #dynaAllow {
display: inline-block;
}
#actionSelector > #dynaNoop {
}
#actionSelector > #dynaBlock {
}
#actionSelector > #dynaCounts {
background-color: transparent;
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
/* configurable UI elements */
:root:not(.mobile) .toolRibbon .caption,
:root.mobile body.no-tooltips .toolRibbon .caption,
:root.mobile body[data-ui~="-captions"] .toolRibbon .caption {
display: none;
}
:root.mobile .toolRibbon .caption,
:root:not(.mobile) body[data-ui~="+captions"] .toolRibbon .caption {
display: inherit;
}
:root:not(.mobile) .toolRibbon .tool,
:root.mobile body.no-tooltips .toolRibbon .tool,
:root.mobile body[data-ui~="-captions"] .toolRibbon .tool {
padding: var(--popup-gap) var(--popup-gap-thin);
}
:root.mobile #no-popups,
:root body[data-ui~="-no-popups"] #no-popups {
display: none;
}
:root:not(.mobile) #no-popups,
:root body[data-ui~="+no-popups"] #no-popups {
display: flex;
}
:root.mobile [href="logger-ui.html#_"],
:root body[data-ui~="-logger"] [href="logger-ui.html#_"] {
display: none;
}
:root:not(.mobile) [href="logger-ui.html#_"],
:root body[data-ui~="+logger"] [href="logger-ui.html#_"] {
display: flex;
}
body:not([data-more*="a"]) [data-more="a"],
body:not([data-more*="b"]) [data-more="b"],
body:not([data-more*="c"]) [data-more="c"],
body:not([data-more*="d"]) [data-more="d"],
body:not([data-more*="f"]) [data-more="f"] {
height: 0;
margin-bottom: 0 !important;
margin-top: 0 !important;
overflow-y: hidden;
visibility: hidden;
}
body[data-more*="d"] hr[data-more="a"] {
display: none;
}
body[data-more*="c"] hr[data-more="f"] {
display: none;
}
body[data-more*="c"]:not([data-more*="f"]) hr[data-more="g"] {
display: none;
}
body:not([data-more*="e"]) [data-more="e"] {
display: none;
}
:root #firewall-vspacer {
display: none;
height: calc(6 * var(--popup-gap));
}
/* popup-in-tab mode, useful for screenshots */
:root.desktop.intab body {
overflow: auto;
}
:root.desktop.intab #firewall {
max-height: none;
}
/* horizontally-constrained viewport */
:root.portrait:not(.desktop) body {
overflow-y: auto;
width: 100%;
}
:root.portrait #panes {
flex-direction: column;
}
:root.portrait #main {
max-width: unset;
}
:root.portrait #firewall {
max-height: unset;
max-width: unset;
min-width: unset;
overflow-y: hidden;
}
:root.portrait body[data-more*="e"] #firewall-vspacer {
display: block;
}
/* touch-driven devices */
:root.mobile #firewall {
line-height: 20px;
}
/* mouse-driven devices */
:root.desktop {
display: flex;
justify-content: flex-end;
}
:root.desktop body {
--popup-gap: calc(var(--font-size) * 0.875);
}
:root.desktop body:not(.off) #switch:hover {
fill: rgb(var(--popup-power-ink-rgb) / 90%);
}
:root.desktop body.off #switch:hover {
stroke: var(--popup-power-ink);
}
:root.desktop .rulesetTools [id]:hover {
background-color: var(--popup-ruleset-tool-surface-hover);
}
:root.desktop .rulesetTools [id]:hover > svg {
fill: var(--ink-2);
}
:root.desktop #firewall {
direction: rtl;
line-height: 1.4;
}
:root.desktop .tool:hover {
background-color: var(--popup-toolbar-surface-hover);
}
:root.desktop #moreOrLess > span:hover {
background-color: var(--surface-2);
/* background-color: var(--popup-toolbar-surface-hover); */
}

View File

@@ -0,0 +1,74 @@
body {
margin-bottom: 6rem;
}
.synopsis {
color: var(--ink-0);
font-size: var(--font-size-smaller);
opacity: var(--medium-em);
}
/* surface/ink */
#themeMood {
align-items: stretch;
align-self: stretch;
display: inline-flex;
justify-content: stretch;
user-select: none;
}
#themeMood > span {
border: 1px solid var(--ink-1);
color: var(--ink-1);
display: inline-flex;
background-color: var(--surface-1);
display: inline-block;
padding: 0 0.5em;
text-align: center;
user-select: none;
}
/* primary color */
#themePrimary {
align-items: stretch;
align-self: stretch;
display: inline-flex;
justify-content: stretch;
position: relative;
}
#themePrimary > span {
background-color: rgb(var(--primary-50));
display: inline-flex;
width: 2em;
}
[href="advanced-settings.html"] {
display: none;
}
body.advancedUser [href="advanced-settings.html"] {
display: inline-flex;
}
#localData > div {
margin-bottom: var(--default-gap-small);
}
#localData > div:last-of-type {
align-items: flex-start;
display: flex;
flex-direction: column;
}
#localData > div:last-of-type > button {
margin-bottom: var(--default-gap-small);
min-width: 280px;
}
/* Mobile devices */
:root.mobile #localData {
max-width: 100vw;
}
:root.mobile #localData > div:last-of-type {
align-items: stretch;
}
:root.mobile #localData > div:last-of-type > button {
min-width: unset;
}

View File

@@ -0,0 +1,110 @@
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
body {
margin-bottom: 6rem;
}
.body > div {
max-width: 800px;
}
h3 {
color: var(--fieldset-header-ink);
margin-bottom: 0;
}
.supportEntry {
display: flex;
margin-block: 1em;
}
:root.mobile .supportEntry {
flex-direction: column;
}
.supportEntry > * {
min-width: 6em;
}
.supportEntry > div:first-of-type {
flex-grow: 1;
}
:root:not(.mobile) .supportEntry > div:first-of-type {
margin-inline-end: 2em;
}
.supportEntry h3 {
margin: 1em 0;
}
.e > .supportEntry {
flex-direction: column;
}
.e > .supportEntry > div:not(:first-of-type) {
margin-top: 1em;
}
.e > .supportEntry select {
min-width: 50%;
max-width: calc(100% - 1em);
}
body:not(.filterIssue) .body > div.e {
display: none;
}
body.filterIssue .body > div:not(.e) {
display: none;
}
body.filterIssue #moreButton {
display: none;
}
body[data-should-update-lists]:not(.updated) .e .createEntry {
opacity: 0.25;
pointer-events: none;
}
body:not([data-should-update-lists]) .shouldUpdate {
display: none;
}
body.updating {
pointer-events: none;
}
body.updating button {
filter: grayscale(1);
opacity: 0.5;
}
body.updated .shouldUpdate button {
display: none;
}
body.updating .shouldUpdate button .fa-icon svg {
animation: spin 1s linear infinite;
transform-origin: 50%;
}
body .shouldUpdate .updated {
align-self: center;
}
body:not(.updated) .shouldUpdate .updated {
display: none;
}
button {
align-self: center;
}
span[data-url] {
color: var(--link-ink);
cursor: pointer;
}
#showSupportInfo {
cursor: pointer;
}
body.redacted #redactButton {
display: none;
}
#unredactButton {
display: none;
}
body.redacted #unredactButton {
display: inline;
}
.cm-string.cm-property {
color: black;
}

View File

@@ -0,0 +1,526 @@
/**
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;
}
*/

View File

@@ -0,0 +1,23 @@
html {
height: 100vh;
height: 100svh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
width: 100%;
}
.body {
flex-shrink: 0;
}
.codeMirrorContainer {
flex-grow: 1;
}
#whitelist {
text-align: left;
}