diff options
Diffstat (limited to 'src/css')
32 files changed, 4917 insertions, 0 deletions
diff --git a/src/css/1p-filters.css b/src/css/1p-filters.css new file mode 100644 index 0000000..679e4b8 --- /dev/null +++ b/src/css/1p-filters.css @@ -0,0 +1,26 @@ +html { + height: 100vh; + overflow: hidden; + width: 100vw; + } +body { + display: flex; + flex-direction: column; + height: 100%; + justify-content: stretch; + overflow: hidden; + width: 100%; + } +.body { + flex-shrink: 0; + } +[data-i18n="1pTrustWarning"] { + font-weight: bold; + } +.codeMirrorContainer { + flex-grow: 1; + } +#userFilters { + text-align: left; + word-wrap: normal; + } diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css new file mode 100644 index 0000000..014dd20 --- /dev/null +++ b/src/css/3p-filters.css @@ -0,0 +1,250 @@ +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } +body { + margin-bottom: 6rem; + } +#actions { + background-color: var(--surface-1); + padding: var(--default-gap-small) 0 var(--default-gap-xsmall) 0; + position: sticky; + top: 0; + z-index: 10; + } +#buttonUpdate.active { + pointer-events: none; + } +#buttonUpdate.active .fa-icon svg { + animation: spin 1s linear infinite; + transform-origin: 50%; + } + +body.updating #actions, +body.working #actions { + cursor: progress; + } +body.updating #actions button, +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 .searchbar { + align-items: center; + column-gap: var(--default-gap-xxsmall); + display: inline-flex; + margin-block-start: calc(var(--font-size) * 0.75); + margin-inline-start: var(--checkbox-size); + position: relative; + } +#lists .searchbar input { + padding-inline-start: var(--default-gap-large); + } +#lists .searchbar .fa-icon { + color: var(--ink-4); + fill: var(--ink-4); + left: 4px; + position: absolute; + transform: none; + } +#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) #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 { + 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%; + } diff --git a/src/css/about.css b/src/css/about.css new file mode 100644 index 0000000..8c3afcd --- /dev/null +++ b/src/css/about.css @@ -0,0 +1,3 @@ +body { + margin-bottom: 6rem; + } diff --git a/src/css/advanced-settings.css b/src/css/advanced-settings.css new file mode 100644 index 0000000..c67e750 --- /dev/null +++ b/src/css/advanced-settings.css @@ -0,0 +1,26 @@ +html { + height: 100vh; + 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; + } diff --git a/src/css/asset-viewer.css b/src/css/asset-viewer.css new file mode 100644 index 0000000..8b6f1da --- /dev/null +++ b/src/css/asset-viewer.css @@ -0,0 +1,79 @@ +/** + 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; + 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; + } diff --git a/src/css/click2load.css b/src/css/click2load.css new file mode 100644 index 0000000..b6d3924 --- /dev/null +++ b/src/css/click2load.css @@ -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; + } diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css new file mode 100644 index 0000000..1891a1d --- /dev/null +++ b/src/css/cloud-ui.css @@ -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; + } diff --git a/src/css/code-viewer.css b/src/css/code-viewer.css new file mode 100644 index 0000000..774fa69 --- /dev/null +++ b/src/css/code-viewer.css @@ -0,0 +1,67 @@ +body { + border: 0; + display: flex; + flex-direction: column; + height: 100vh; + 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; + } diff --git a/src/css/codemirror.css b/src/css/codemirror.css new file mode 100644 index 0000000..2d15bf8 --- /dev/null +++ b/src/css/codemirror.css @@ -0,0 +1,327 @@ +.codeMirrorContainer { + line-height: 1.25; + overflow: hidden; + position: relative; + } +.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 .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 { + align-items: center; + 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; + 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-input { + display: inline-flex; + flex-grow: 1; + } +.cm-search-widget .fa-icon { + fill: var(--cm-gutter-ink); + font-size: 140%; + } +.cm-search-widget .fa-icon:not(.fa-icon-ro):hover { + fill: var(--ink-1); + } +.cm-search-widget-input input { + border: 1px solid var(--cm-gutter-ink); + display: inline-flex; + flex-grow: 1; + max-width: 16em; + } +.cm-search-widget-count { + align-items: center; + display: inline-flex; + flex-grow: 0; + font-size: var(--font-size-smaller); + min-width: 6em; + 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 .cm-search-widget-button:hover { + color: #000; + } +.cm-search-widget .sourceURL[href=""] { + visibility: hidden; + } +: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; + } diff --git a/src/css/common.css b/src/css/common.css new file mode 100644 index 0000000..1a8ba0b --- /dev/null +++ b/src/css/common.css @@ -0,0 +1,347 @@ +@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 { + color: var(--link-ink); + fill: var(--link-ink); + } +a: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; + } + +.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 > [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%; + } + +/* 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 + } diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css new file mode 100644 index 0000000..261aa9a --- /dev/null +++ b/src/css/dashboard-common.css @@ -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; + } diff --git a/src/css/dashboard.css b/src/css/dashboard.css new file mode 100644 index 0000000..ba02d97 --- /dev/null +++ b/src/css/dashboard.css @@ -0,0 +1,115 @@ +html, body { + display: flex; + flex-direction: column; + height: 100vh; + justify-content: stretch; + overflow: hidden; + position: relative; + width: 100vw; + } +body.notReady { + display: none; + } +#dashboard-nav { + border: 0; + border-bottom: 1px solid var(--border-1); + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + overflow-x: hidden; + padding: 0; + position: sticky; + top: 0; + width: 100%; + z-index: 10; + } +.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; + 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); + } + +/* touch-screen devices */ +:root.mobile #dashboard-nav { + flex-wrap: nowrap; + overflow-x: auto; + } +:root.mobile #dashboard-nav .logo { + display: none; + } diff --git a/src/css/devtools.css b/src/css/devtools.css new file mode 100644 index 0000000..425aac4 --- /dev/null +++ b/src/css/devtools.css @@ -0,0 +1,22 @@ +html { + height: 100vh; + 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; + } diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css new file mode 100644 index 0000000..25dd204 --- /dev/null +++ b/src/css/document-blocked.css @@ -0,0 +1,146 @@ +/** + 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(100vw, 640px); + } +#rootContainer > * { + margin: 0 0 var(--default-gap-xxlarge) 0; + } + +a { + text-decoration: none; + } +.code { + font-size: 13px; + word-break: break-all; + } +#warningSign { + width: 100%; + } +#warningSign > a { + font-size: 96px; + } +#theURL { + color: var(--ink-2); + padding: 0; + } +#theURL > * { + margin: 0; + } +#theURL > p { + position: relative; + z-index: 10; + } +#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); + } + +#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%; + } diff --git a/src/css/dom-inspector.css b/src/css/dom-inspector.css new file mode 100644 index 0000000..71ba348 --- /dev/null +++ b/src/css/dom-inspector.css @@ -0,0 +1,40 @@ +html#ublock0-inspector, +#ublock0-inspector body { + background: transparent; + box-sizing: border-box; + height: 100vh; + 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; +} diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css new file mode 100644 index 0000000..35e0f8c --- /dev/null +++ b/src/css/dyna-rules.css @@ -0,0 +1,79 @@ +html { + height: 100vh; + 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; + } diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css new file mode 100644 index 0000000..d09e1ef --- /dev/null +++ b/src/css/epicker-ui.css @@ -0,0 +1,270 @@ +html#ublock0-epicker, +#ublock0-epicker body { + background: transparent; + cursor: not-allowed; + height: 100vh; + 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); + bottom: 2px; + box-sizing: border-box; + cursor: default; + display: none; + max-height: calc(100vh - 4px); + max-width: 36rem; + min-width: 24rem; + overflow-y: auto; + padding: 4px; + position: fixed; + right: 2px; + width: calc(40% - 2px); +} +/* https://github.com/uBlockOrigin/uBlock-issues/discussions/2114 */ +#ublock0-epicker aside { + min-width: min(24rem, 100vw - 4px); +} +#ublock0-epicker.paused:not(.zap) aside { + display: block; +} +#ublock0-epicker #toolbar { + display: flex; +} +#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 #move { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII='); + cursor: grab; + flex-grow: 1; + margin: 2px 4px; + opacity: 0.8; + } +#ublock0-epicker aside.moving #move { + cursor: grabbing; +} +#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: 8em; + max-height: 50vh; + 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: 16px; + width: 16px; + } +.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: 14em; + overflow-y: auto; +} +#ublock0-epicker #candidateFilters > li:first-of-type { + margin-bottom: 0.5em; +} +#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 .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); +} + +/** + https://github.com/gorhill/uBlock/issues/3449 + https://github.com/uBlockOrigin/uBlock-issues/issues/55 +**/ +@keyframes startDialog { + 0% { opacity: 1.0; } + 60% { opacity: 1.0; } + 100% { opacity: 0.1; } +} +#ublock0-epicker.paused aside { + opacity: 0.1; + visibility: visible; + z-index: 100; +} +#ublock0-epicker.paused:not(.show):not(.hide) aside:not(:hover) { + animation-duration: 1.6s; + animation-name: startDialog; + animation-timing-function: linear; +} +#ublock0-epicker.paused aside:hover { + opacity: 1; +} +#ublock0-epicker.paused.show aside { + opacity: 1; +} +#ublock0-epicker.paused.hide aside { + opacity: 0.1; +} + +#ublock0-epicker svg { + cursor: crosshair; + box-sizing: border-box; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} +#ublock0-epicker.paused svg { + cursor: not-allowed; +} +#ublock0-epicker svg > path:first-child { + fill: rgba(0,0,0,0.5); + fill-rule: evenodd; +} +#ublock0-epicker svg > path + path { + stroke: #F00; + stroke-width: 0.5px; + fill: rgba(255,63,63,0.20); +} +#ublock0-epicker.zap svg > path + path { + stroke: #FF0; + stroke-width: 0.5px; + fill: rgba(255,255,63,0.20); +} +#ublock0-epicker.preview svg > path { + fill: rgba(0,0,0,0.10); +} +#ublock0-epicker.preview svg > path + path { + stroke: none; +} diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css new file mode 100644 index 0000000..f6d517d --- /dev/null +++ b/src/css/fa-icons.css @@ -0,0 +1,149 @@ +.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_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_zoom-in, +.fa-icon > .fa-icon_zoom-out { + width: calc(1em * 1664 / 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); + } diff --git a/src/css/fonts/Inter/Inter-Regular.woff2 b/src/css/fonts/Inter/Inter-Regular.woff2 Binary files differnew file mode 100644 index 0000000..d5ffd2a --- /dev/null +++ b/src/css/fonts/Inter/Inter-Regular.woff2 diff --git a/src/css/fonts/Inter/Inter-SemiBold.woff2 b/src/css/fonts/Inter/Inter-SemiBold.woff2 Binary files differnew file mode 100644 index 0000000..df746af --- /dev/null +++ b/src/css/fonts/Inter/Inter-SemiBold.woff2 diff --git a/src/css/fonts/Inter/LICENSE.txt b/src/css/fonts/Inter/LICENSE.txt new file mode 100644 index 0000000..d688280 --- /dev/null +++ b/src/css/fonts/Inter/LICENSE.txt @@ -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. diff --git a/src/css/fonts/Metropolis/Metropolis-Regular.woff2 b/src/css/fonts/Metropolis/Metropolis-Regular.woff2 Binary files differnew file mode 100644 index 0000000..f50bf34 --- /dev/null +++ b/src/css/fonts/Metropolis/Metropolis-Regular.woff2 diff --git a/src/css/fonts/Metropolis/Metropolis-SemiBold.woff2 b/src/css/fonts/Metropolis/Metropolis-SemiBold.woff2 Binary files differnew file mode 100644 index 0000000..fad6dfd --- /dev/null +++ b/src/css/fonts/Metropolis/Metropolis-SemiBold.woff2 diff --git a/src/css/fonts/Metropolis/README.md b/src/css/fonts/Metropolis/README.md new file mode 100644 index 0000000..ce01464 --- /dev/null +++ b/src/css/fonts/Metropolis/README.md @@ -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. + + + +--- + + + +### 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. diff --git a/src/css/fonts/Metropolis/UNLICENSE b/src/css/fonts/Metropolis/UNLICENSE new file mode 100644 index 0000000..68a49da --- /dev/null +++ b/src/css/fonts/Metropolis/UNLICENSE @@ -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/> diff --git a/src/css/logger-ui-inspector.css b/src/css/logger-ui-inspector.css new file mode 100644 index 0000000..975d90b --- /dev/null +++ b/src/css/logger-ui-inspector.css @@ -0,0 +1,122 @@ +#domInspector { + display: none; + } +#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; + } diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css new file mode 100644 index 0000000..8e5065c --- /dev/null +++ b/src/css/logger-ui.css @@ -0,0 +1,985 @@ +body { + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; + width: 100vw; + } +textarea { + box-sizing: border-box; + direction: ltr; + min-height: 6rem; + resize: vertical; + width: 100%; + } +.permatoolbar { + background-color: var(--surface-1); + border: 0; + box-sizing: border-box; + display: flex; + flex-shrink: 0; + font-size: 120%; + justify-content: space-between; + margin: 0; + padding: 0.25em; + } +.permatoolbar > div { + display: flex; + } +.permatoolbar button.iconified { + padding-left: var(--default-gap-xsmall); + padding-right: var(--default-gap-xsmall); + } +.permatoolbar button.active { + fill: rgb(var(--primary-50)); + } +.permatoolbar button > .fa-icon { + font-size: 180%; + } +#pageSelector { + min-width: 10em; + padding: 0.25em 0; + width: 50vw; + } +#showpopup { + display: inline-flex; + align-items: center; + } +#showpopup img { + filter: grayscale(100%); + height: auto; + width: 1em; + } +#info { + fill: #ccc; + } +#info:hover { + fill: #000; + } + +/* + https://github.com/gorhill/uBlock/issues/3293 + => https://devhints.io/css-system-font-stack +*/ +#inspectors { + flex-grow: 1; + font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + position: relative; + } +.inspector { + border-top: 1px solid #ccc; + display: flex; + flex-direction: column; + } +.vscrollable { + direction: ltr; + flex-grow: 1; + font-size: var(--font-size-smaller); + overflow-x: hidden; + overflow-y: auto; +} + +#domInspector button.vExpandToggler > .fa-icon { + transform: scaleY(1) + } +.inspector:not(.vExpanded) button.vCompactToggler > .fa-icon { + transform: scaleY(-1) + } +.hCompact button.hCompactToggler > .fa-icon { + transform: scaleX(-1) + } + +#inspectors.dom #netInspector { + display: none; + } + +#netInspector #pause > .fa-icon[data-i18n-title="loggerUnpauseTip"] { + display: none; +} +#netInspector.paused #pause > .fa-icon[data-i18n-title="loggerPauseTip"] { + display: none; +} +#netInspector.paused #pause > .fa-icon[data-i18n-title="loggerUnpauseTip"] { + display: inline-flex; + fill: #5F9EA0; +} +#netInspector #filterExprGroup { + display: flex; + margin: 0 1em; + position: relative; + } +#netInspector #filterButton { + opacity: 0.25; + } +#netInspector.f #filterButton { + opacity: 1; + } +#netInspector #filterInput { + border: 1px solid gray; + display: inline-flex; + } +#netInspector #filterInput > input { + border: 0; + min-width: 16em; + } +#netInspector #filterExprButton { + transform: scaleY(-1); + } +#netInspector #filterExprButton:hover { + background-color: transparent; + } +#netInspector #filterExprButton.expanded { + transform: scaleY(1); + } +#netInspector #filterExprPicker { + background-color: var(--surface-0); + border: 1px solid gray; + display: none; + position: absolute; + flex-direction: column; + font-size: small; + top: 100%; + z-index: 100; + } +body[dir="ltr"] #netInspector #filterExprPicker { + right: 0; + } +body[dir="rtl"] #netInspector #filterExprPicker { + left: 0; + } + +#netInspector #filterExprGroup:hover #filterExprButton.expanded ~ #filterExprPicker { + display: flex; + } +#netInspector #filterExprPicker > div { + border: 1px dotted #ddd; + border-left: 0; + border-right: 0; + display: flex; + padding: 0.5em; + } +#netInspector #filterExprPicker > div:first-of-type { + border-top: 0; + } +#netInspector #filterExprPicker > div:last-of-type { + border-bottom: 0; + } +#netInspector #filterExprPicker div { + display: flex; + } +#netInspector #filterExprPicker span[data-filtex] { + align-items: center; + border: 1px solid transparent; + cursor: pointer; + display: inline-flex; + margin: 0 0.5em 0 0; + padding: 0.25em; + white-space: nowrap; + } +#netInspector #filterExprPicker span[data-filtex]:last-of-type { + margin: 0; + } +#netInspector #filterExprPicker span[data-filtex]:hover { + background-color: rgb(var(--primary-70) / 25%); + border: 1px solid rgb(var(--primary-70)); + } +#netInspector #filterExprPicker span.on[data-filtex], +#filterExprButton.active { + background-color: rgb(var(--primary-70) / 40%); + } +#netInspector #filterExprPicker span.on[data-filtex] { + border: 1px solid rgb(var(--primary-70)); + } + +#netInspector .vscrollable { + overflow: hidden; + } +#vwRenderer { + box-sizing: border-box; + height: 100%; + overflow: hidden; + position: relative; + width: 100%; + } +#vwRenderer #vwScroller { + height: 100%; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + width: 100%; + } +#vwRenderer #vwScroller #vwVirtualContent { + overflow: hidden; + } +#vwRenderer #vwContent { + left: 0; + overflow: hidden; + position: absolute; + width: 100%; + } +#vwRenderer .logEntry { + display: block; + left: 0; + overflow: hidden; + position: absolute; + width: 100%; + } +#vwRenderer .logEntry:empty { + display: none; + } +#vwRenderer .logEntry > div { + height: 100%; + white-space: nowrap; + } +#vwRenderer .logEntry > div[data-status="1"], +.netFilteringDialog > .panes > .details > div[data-status="1"] { + background-color: rgb(var(--popup-cell-block-surface-rgb) / 50%); + } +#vwRenderer .logEntry > div[data-status="1"][data-modifier], +.netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] { + background-color: var(--logger-modified-surface); + } +#vwRenderer .logEntry > div[data-status="3"] { + background-color: rgba(108, 108, 108, 0.1); + } +:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] { + background-color: rgba(96, 96, 96, 0.1); + } +#vwRenderer .logEntry > div[data-status="2"], +.netFilteringDialog > .panes > .details > div[data-status="2"] { + background-color: rgb(var(--popup-cell-allow-surface-rgb) / 50%); + } +#vwRenderer .logEntry > div[data-tabid="-1"] { + text-shadow: 0 0.2em 0.4em #aaa; + } +#vwRenderer .logEntry > div.extendedRealm, +#vwRenderer .logEntry > div.redirect { + background-color: var(--logger-redirected-surface); + } +#vwRenderer .logEntry > div.extendedRealm.scriptlet { + background-color: var(--logger-scriptlet-surface); + } +:root.colorBlind #vwRenderer .logEntry > div.extendedRealm, +:root.colorBlind #vwRenderer .logEntry > div.redirect { + background-color: rgba(0, 19, 110, 0.1); + } +#vwRenderer .logEntry > div[data-aliasid] { + color: var(--popup-cell-cname-ink); + } +#vwRenderer .logEntry > div[data-type="tabLoad"] { + background-color: #666; + color: white; + } +#vwRenderer .logEntry > div[data-type="error"] { + color: var(--sf-error-ink); + } +#vwRenderer .logEntry > div[data-type="info"] { + color: var(--sf-def-ink); + } +#vwRenderer .logEntry > div.voided { + opacity: 0.5; + } +#vwRenderer .logEntry > div.voided:hover { + opacity: 0.7; + } + +#vwRenderer .logEntry > div > span { + border: 1px dotted var(--border-1); + border-top: 0; + border-right: 0; + box-sizing: border-box; + display: inline-block; + height: 100%; + overflow: hidden; + padding: 0.2em; + vertical-align: middle; + white-space: nowrap; + word-break: break-all; + } +#vwRenderer .logEntry > div.canDetails:hover > span { + background-color: rgba(0,0,0,0.04); + } +body[dir="ltr"] #vwRenderer .logEntry > div > span:first-child { + border-left: 0; + } +body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child { + border-right: 0; + } +#vwRenderer .logEntry > div > span:nth-of-type(1) { + } +#vwRenderer .logEntry > div > span:nth-of-type(2) { + } +#vwRenderer .logEntry > div > span:nth-of-type(2) { + text-overflow: ellipsis; + } +#vwRenderer .logEntry > div.messageRealm > span:nth-of-type(2) ~ span { + display: none; + } +.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(2) { + overflow-y: auto; + white-space: pre-line; + } +#vwRenderer .logEntry > div.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) { + text-align: center; + } +#vwRenderer .logEntry > div.extendedRealm > span:nth-of-type(2) > span:first-of-type { + display: none; + } +#vwRenderer .logEntry > div.extendedRealm > span:nth-of-type(2) > span:last-of-type { + pointer-events: none; + } +#vwRenderer .logEntry > div.extendedRealm.isException > span:nth-of-type(2) > span:last-of-type { + text-decoration: line-through rgba(0,0,255,0.7); + } +#vwRenderer .logEntry > div > span:nth-of-type(3) { + font-family: monospace; + padding-left: 0.3em; + padding-right: 0.3em; + text-align: center; + } +#vwRenderer .logEntry > div.canDetails:hover > span:not(:nth-of-type(4)):not(:nth-of-type(8)) { + background: rgba(0, 0, 255, 0.1); + cursor: zoom-in; + } +#netInspector:not(.vExpanded) #vwRenderer .logEntry > div > span:nth-of-type(4) { + direction: rtl; + text-align: right; + unicode-bidi: plaintext; + } +#vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) { + text-overflow: ellipsis; + } +.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) { + overflow-y: auto; + text-overflow: clip; + white-space: pre-line; + } +#vwRenderer .logEntry > div > span:nth-of-type(5) { + text-align: center; + } +/* visual for tabless network requests */ +#vwRenderer .logEntry > div > span:nth-of-type(5) { + position: relative; + } +#vwRenderer .logEntry > div > span:nth-of-type(7) { + } +#vwRenderer #vwContent .logEntry > div > span:nth-of-type(7) { + } +#vwRenderer .logEntry > div > span:nth-of-type(8) { + position: relative; + } +#vwRenderer #vwContent .logEntry > div > span:nth-of-type(8) { + text-overflow: ellipsis; + } +.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(8) { + overflow-y: auto; + white-space: pre-line; + } +#vwRenderer .logEntry > div > span:nth-of-type(8) b { + font-weight: bold; + } +#vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(8) b, +.netFilteringDialog > .panes > .details > div[data-status="1"] b { + background-color: rgb(var(--popup-cell-block-surface-rgb) / 100%); + } +#vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(8) b, +.netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b { + background-color: var(--logger-modified-em-surface); + } +#vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(8) b { + background-color: rgba(108, 108, 108, 0.2); + } +:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(8) b { + background-color: rgba(96, 96, 96, 0.2); + } +#vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(8) b, +.netFilteringDialog > .panes > .details > div[data-status="2"] b { + background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%); + } +#vwRenderer .logEntry > div > span:nth-of-type(8) a { + align-items: center; + background-color: dimgray; + color: white; + display: none; + height: 100%; + justify-content: center; + padding: 0 0.25em; + opacity: 0.4; + position: absolute; + right: 0; + text-decoration: none; + top: 0; + width: 2rem; + } +#netInspector.vExpanded #vwRenderer .logEntry > div > span:nth-of-type(8) a { + bottom: 0px; + height: unset; + padding: 0.25em; + top: unset; + } +#vwRenderer .logEntry > div > span:nth-of-type(8) a::after { + content: '\2197'; + } +#vwRenderer .logEntry > div.networkRealm > span:nth-of-type(8):hover a { + display: inline-flex; + } +#vwRenderer .logEntry > div > span:nth-of-type(8) a:hover { + opacity: 1; + } + +#vwRenderer #vwBottom { + background-color: #00F; + height: 0; + overflow: hidden; + width: 100%; + } +#vwRenderer #vwLineSizer { + left: 0; + pointer-events: none; + position: absolute; + top: 0; + visibility: hidden; + width: 100%; + } + +#netInspector .entryTools { + background-color: var(--surface-0); + filter: drop-shadow(2px 4px 6px black); + max-width: 640px; + min-width: min(100%, 640px); + position: absolute; + } +#netInspector .entryTools:empty { + display: none; + } +#netInspector .entryTools .dialogControls { + display: flex; + justify-content: stretch; + } + +.closeButton { + stroke: var(--ink-1); + stroke-width: 3px; + width: 1.6em; + height: 1.6em; + bottom: calc(100% + 2px); + } +body[dir="ltr"] .closeButton { + right: 0; + } +body[dir="rtl"] .closeButton { + left: 0; + } +.closeButton:hover { + background-color: var(--surface-2) !important; + } +.closeButton > * { + pointer-events: none; + } +.moveBand { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII='); + cursor: grab; + flex-grow: 1; + opacity: 0.5; + } +.moving .moveBand { + cursor: grabbing; +} + +#popupContainer { + background-color: var(--surface-1); + border: 1px solid gray; + bottom: 0; + display: none; + max-height: min(800px, calc(100vh - 2rem)); + min-width: 360px; + overflow: hidden; + position: fixed; + right: 0; + z-index: 200; + } +#inspectors.popupOn #popupContainer { + display: block; + } + +#modalOverlay { + align-items: center; + background-color: rgba(0, 0, 0, 0.5); + border: 0; + bottom: 0; + display: none; + justify-content: center; + left: 0; + margin: 0; + position: fixed; + right: 0; + top: 0; + z-index: 400; + } +#modalOverlay.on { + display: flex; + } +#modalOverlay > div { + position: relative; + } +#modalOverlay .closeButton { + background-color: var(--surface-1); + position: absolute; + } + +#modalOverlayContainer { + background-color: var(--surface-1); + border: 0; + box-sizing: border-box; + padding: 1em; + max-height: 90vh; + overflow-y: auto; + width: 90vw; + } + +.netFilteringDialog { + font-size: var(--font-size-smaller); + } +.netFilteringDialog a { + text-decoration: none; + } +.netFilteringDialog select { + max-width: 50vw; + outline: none; + text-overflow: ellipsis; +} +.netFilteringDialog > .preview { + align-items: center; + /* http://lea.verou.me/css3patterns/ */ + background-color: #aaa; + background-image: + linear-gradient( + 45deg, + #666 25%, + transparent 25%, + transparent 75%, + #666 75%, + #666 + ), + linear-gradient( + 45deg, + #666 25%, + transparent 25%, + transparent 75%, + #666 75%, + #666 + ); + background-position:0 0, 9px 9px; + background-size: 18px 18px; + display: flex; + justify-content: center; + margin-bottom: 1em; + padding: 0.5em; + text-align: center; + } +.netFilteringDialog > .preview > * { + max-width: 100%; + max-height: 20vh; + } +.netFilteringDialog > .preview > span { + background-color: var(--surface-3); + cursor: pointer; + padding: 1em; + } + +.netFilteringDialog > .headers { + align-items: center; + border-bottom: 1px solid var(--border-4); + display: flex; + line-height: 2; + } +.netFilteringDialog > .headers > .header { + border: 1px solid var(--border-2); + border-bottom: 1px solid var(--border-4); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + color: var(--border-2); + cursor: pointer; + display: inline-block; + margin-inline-end: 4px; + padding: 0 1em; + position: relative; + top: 1px; + } +.netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"], +.netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"], +.netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] { + background-color: var(--surface-0); + border-color: var(--border-4); + border-bottom: 1px solid transparent; + color: var(--ink-1); + } +.netFilteringDialog > .headers > .tools { + bottom: 0; + display: flex; + height: 100%; + margin-inline-start: 2rem; + } +.netFilteringDialog > .headers > .tools > span { + color: var(--ink-3); + fill: var(--ink-3); + cursor: pointer; + font-size: 1.5em; + padding: 0 0.25em; + text-align: center; + } +.netFilteringDialog > .headers > .tools > span:hover { + color: var(--ink-1); + fill: var(--ink-1); + } +.netFilteringDialog.extendedRealm > .headers > .dynamic, +.netFilteringDialog.extendedRealm > .panes > .dynamic { + display: none; + } +.netFilteringDialog.extendedRealm > .headers > .static, +.netFilteringDialog.extendedRealm > .panes > .static { + display: none; + } +.netFilteringDialog > div.panes { + overflow: hidden; + overflow-y: auto; + padding-top: 1em; + } +.netFilteringDialog > div.panes > div { + display: none; + } +.netFilteringDialog[data-pane="details"] > .panes > [data-pane="details"], +.netFilteringDialog[data-pane="dynamic"] > .panes > [data-pane="dynamic"], +.netFilteringDialog[data-pane="static"] > .panes > [data-pane="static"] { + display: flex; + flex-direction: column; + padding: 0 var(--default-gap-xsmall) var(--default-gap-xsmall) var(--default-gap-xsmall); + } +.netFilteringDialog > .panes > .details > div { + align-items: stretch; + background-color: var(--surface-2); + border: 0; + border-bottom: 1px solid var(--surface-0); + display: flex; + } +.netFilteringDialog > .panes > .details > div > span { + padding: 0.5em; + } +.netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { + border: 0; + flex-grow: 0; + flex-shrink: 0; + text-align: right; + width: 8em; + } +body[dir="ltr"] .netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { + border-right: 1px solid var(--surface-0); + } +body[dir="rtl"] .netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { + border-left: 1px solid var(--surface-0); + } +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) { + flex-grow: 1; + max-height: 10vh; + overflow: hidden auto; + white-space: pre-line + } +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2):not(.prose) { + word-break: break-all; + } +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .listEntry { + display: inline-flex; + } +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon { + font-size: 110%; + opacity: 0.5; + } +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon:hover { + opacity: 1; + } +.netFilteringDialog > .panes > .details .exceptor { + align-items: center; + border-left: 1px solid var(--surface-0); + cursor: pointer; + display: inline-flex; + font-family: monospace; + opacity: 0.8; + } +.netFilteringDialog > .panes > .details .exceptor:hover { + opacity: 1; + } +.netFilteringDialog > .panes > .details .exceptored .filter { + text-decoration: line-through; + } +.netFilteringDialog > .panes > .details .exceptored .exceptor { + background-color: rgb(var(--primary-50) / 50%); + } +.netFilteringDialog > .panes > .details .exceptor::before { + content: '@@'; + } +.netFilteringDialog.extendedRealm > .panes > .details .exceptor::before { + content: '#@#'; + } +.netFilteringDialog > div.panes > .dynamic > .toolbar { + padding-bottom: 1em; + } +.netFilteringDialog > div.panes > .dynamic .row { + display: flex; + min-height: 2.2em; + } +.netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { + align-self: stretch; + border: 0; + display: inline-flex; + flex-grow: 0; + flex-shrink: 0; + text-align: center; + width: 4.5em; + } +body[dir="ltr"] .netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { + border-right: 1px solid var(--surface-0); + } +body[dir="rtl"] .netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { + border-left: 1px solid var(--surface-0); + } +.netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) { + align-self: center; + padding: 0 0.5em; + } +.netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { + background-color: #ffe; + border: 1px solid #ddc; + border-radius: 4px; + fill: #888; + cursor: pointer; + font-size: 2em; + visibility: hidden; + width: 100%; + } +body.dirty .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { + visibility: visible; + } +.netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules:hover { + fill: black; + } +.netFilteringDialog > div.panes > .dynamic > .toolbar .entry { + display: none; + } +.netFilteringDialog > div.panes > .dynamic .entry { + background-color: var(--surface-2); + border: 0; + border-bottom: 1px solid var(--surface-0); + } +.netFilteringDialog > div.panes > .dynamic .entry:hover { + background-color: var(--surface-3); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action { + background-color: transparent; + border: 0; + cursor: pointer; + } +.netFilteringDialog > div.panes > .dynamic .entry > .action > span { + background-color: transparent; + border: 0; + display: inline-block; + height: 100%; + opacity: 0.2; + visibility: hidden; + width: 33.33%; + } +.netFilteringDialog > div.panes > .dynamic .entry > .action.allow { + background-color: rgba(0, 160, 0, 0.3); + } +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.allow { + background-color: rgba(255, 194, 57, 0.4); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action.noop { + background-color: rgba(108, 108, 108, 0.3); + } +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.noop { + background-color: rgba(96, 96, 96, 0.4); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action.block { + background-color: rgba(192, 0, 0, 0.3); + } +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.block { + background-color: rgba(0, 19, 110, 0.4); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow { + background-color: rgba(0, 160, 0, 1); + } +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow { + background-color: rgba(255, 194, 57, 1); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop, +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop { + background-color: rgba(108, 108, 108, 1); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action.own.block { + background-color: rgba(192, 0, 0, 1); + } +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.block { + background-color: rgba(0, 19, 110, 1); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span { + opacity: 0.2; + visibility: visible; + } +.netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span:hover { + opacity: 0.75; + } +.netFilteringDialog > div.panes > .dynamic .entry > .action > .allow { + background-color: rgb(0, 160, 0); + } +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action > .allow { + background-color: rgb(255, 194, 57); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action > .noop { + background-color: rgb(108, 108, 108); + } +.netFilteringDialog > div.panes > .dynamic .entry > .action > .block { + background-color: rgb(192, 0, 0); + } +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action > .block { + background-color: rgb(0, 19, 110); + } +.netFilteringDialog > div.panes > .dynamic .entry > .url { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +.netFilteringDialog > div.panes > div.static > div { + line-height: 2; + } +.netFilteringDialog > div.panes > div.static textarea { + height: 6em; + max-height: 20vh; + min-height: 10vh; + word-break: break-all; + } +.netFilteringDialog > div.panes > div.static > div:nth-of-type(2) { + text-align: center; + } + +#filterFinderDialog { + word-break: break-all; + } +#filterFinderDialog code { + background: #eee; + font-size: 85%; + padding: 3px; + unicode-bidi: plaintext; + white-space: pre-wrap; + } +#filterFinderDialog ul { + font-size: larger; + } +#filterFinderDialog .filterFinderListEntry { + align-items: flex-end; + display: flex; + } +#filterFinderDialog .filterFinderListEntry a { + text-decoration: none; + } +#filterFinderDialog .filterFinderListEntry a.fa-icon { + margin: 0 0.5em; + opacity: 0.6; + } +#filterFinderDialog .filterFinderListEntry a.fa-icon:hover { + opacity: 1; + } +#filterFinderDialog .filterFinderListEntry a.fa-icon[href=""] { + display: none; + } +#filterFinderDialog > *:first-child { + margin-top: 0; + } +#filterFinderDialog > *:last-child { + margin-bottom: 0; + } + +#loggerStatsDialog .sortedEntries { + display: flex; + flex-direction: column; + font-size: smaller; + } +#loggerStatsDialog .sortedEntries > div { + display: flex; + } +#loggerStatsDialog .sortedEntries > div > span:first-of-type { + flex-grow: 0; + flex-shrink: 0; + padding: 0 2em 0 0; + text-align: right; + width: 3em; + } +#loggerStatsDialog .sortedEntries > div > span:last-of-type { + flex-grow: 1; + flex-shrink: 1; + white-space: pre; + } + +#loggerExportDialog { + display: flex; + flex-direction: column; + } +#loggerExportDialog .options { + display: flex; + justify-content: space-between; + margin-bottom: 1em; + } +#loggerExportDialog .options > div { + display: inline-flex; + } +#loggerExportDialog .options span[data-i18n] { + border: 1px solid rgb(var(--primary-70)); + cursor: pointer; + font-size: 90%; + margin: 0; + padding: 0.5em; + white-space: nowrap; + } +#loggerExportDialog .options span[data-i18n]:hover { + background-color: rgb(var(--primary-70) / 40%); + } +#loggerExportDialog .options span.on[data-i18n], +#loggerExportDialog .options span.pushbutton:active { + background-color: rgb(var(--primary-70) / 40%); + } +#loggerExportDialog .output { + font: smaller mono; + height: 60vh; + padding: 0.5em; + white-space: pre; + } + +#loggerSettingsDialog { + display: flex; + flex-direction: column; + } +#loggerSettingsDialog > div { + padding-bottom: 1em; + } +#loggerSettingsDialog > div:last-of-type { + padding-bottom: 0; + } +#loggerSettingsDialog ul { + padding: 0; + } +body[dir="ltr"] #loggerSettingsDialog ul { + padding-left: 2em; + } +body[dir="rtl"] #loggerSettingsDialog ul { + padding-right: 2em; + } +#loggerSettingsDialog li { + list-style-type: none; + margin: 0.5em 0 0 0; + } +#loggerSettingsDialog input { + max-width: 6em; + } + +.hide { + display: none !important; + } diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css new file mode 100644 index 0000000..252e371 --- /dev/null +++ b/src/css/popup-fenix.css @@ -0,0 +1,778 @@ + /* 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:not(.canPick) .needPick { + 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; + } +#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); */ + } diff --git a/src/css/settings.css b/src/css/settings.css new file mode 100644 index 0000000..61a8c0e --- /dev/null +++ b/src/css/settings.css @@ -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; + } diff --git a/src/css/support.css b/src/css/support.css new file mode 100644 index 0000000..0afd740 --- /dev/null +++ b/src/css/support.css @@ -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; + } diff --git a/src/css/themes/default.css b/src/css/themes/default.css new file mode 100644 index 0000000..c37bd28 --- /dev/null +++ b/src/css/themes/default.css @@ -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; +} +*/ diff --git a/src/css/whitelist.css b/src/css/whitelist.css new file mode 100644 index 0000000..715c964 --- /dev/null +++ b/src/css/whitelist.css @@ -0,0 +1,22 @@ +html { + height: 100vh; + 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; + } |