mirror of https://github.com/gorhill/uBlock.git
Bring dark theme out of experimental status
Too many changes to list here, essentially there is now a user interface setting to enable/disable dark theme, and I've rearranged a bit the Settings pane as a result and also altered other visuals in various places. There are places which I know have not been thoroughly tested (i.e. logger inspector). Will fine-tune as per feedback. Issues with the classic popup panel will not be addressed, and if feedback is that it has become unusuable, it will be outright removed.
This commit is contained in:
Raymond Hill
parent
2bc9c8aa38
commit
ecb73d2ff5
|
|
@ -50,6 +50,7 @@
|
|||
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="lib/diff/swatinem_diff.js"></script>
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/codemirror/search.js"></script>
|
||||
<script src="js/codemirror/search-thread.js"></script>
|
||||
|
|
|
|||
|
|
@ -70,6 +70,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/fa-icons.js"></script>
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
<div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
|
||||
<div class="li"><span><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a></span></div>
|
||||
<div class="li"><span><a href="https://github.com/foo123/RegexAnalyzer" target="_blank">Regular Expression Analyzer</a> by <a href="https://github.com/foo123">Nikos M.</a></span></div>
|
||||
<div class="li"><span><a href="https://github.com/hsluv/hsluv" target="_blank">HSLuv - Human-friendly HSL</a> by <a href="https://github.com/foo123">Alexei Boronine</a></span></div>
|
||||
</div>
|
||||
<div class="li"><span data-i18n="aboutCDNs"></span></div>
|
||||
<div class="liul">
|
||||
|
|
@ -44,6 +45,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
<script src="js/vapi-client.js"></script>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
|
||||
<script src="lib/codemirror/lib/codemirror.js"></script>
|
||||
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/fa-icons.js"></script>
|
||||
<script src="js/vapi.js"></script>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
|
||||
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/codemirror/search.js"></script>
|
||||
<script src="js/codemirror/search-thread.js"></script>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,6 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.CodeMirror-activeline-background {
|
||||
background-color: var(--cm-active-line);
|
||||
}
|
||||
.CodeMirror-cursor {
|
||||
border-color: var(--cm-cursor);
|
||||
}
|
||||
|
|
@ -118,6 +115,7 @@
|
|||
color: var(--sf-variable-ink);
|
||||
}
|
||||
.cm-s-default .cm-warning {
|
||||
background-color: var(--sf-warning-surface);
|
||||
text-decoration: underline var(--sf-warning-ink);
|
||||
text-underline-position: under;
|
||||
}
|
||||
|
|
@ -166,7 +164,7 @@
|
|||
font-size: 140%;
|
||||
}
|
||||
.cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
|
||||
fill: #000;
|
||||
fill: var(--ink-1);
|
||||
}
|
||||
.cm-search-widget-input input {
|
||||
border: 1px solid var(--cm-gutter-ink);
|
||||
|
|
@ -205,11 +203,11 @@
|
|||
color: var(--cm-merge-copy-ink);
|
||||
}
|
||||
.CodeMirror-merge-l-chunk {
|
||||
background-color: var(--cm-merge-l-chunk-surface);
|
||||
background-color: var(--cm-merge-chunk-surface);
|
||||
}
|
||||
.CodeMirror-merge-l-chunk-start,
|
||||
.CodeMirror-merge-l-chunk-end {
|
||||
border-color: var(--cm-merge-l-chunk-border);
|
||||
border-color: var(--cm-merge-chunk-border);
|
||||
}
|
||||
.CodeMirror-merge-l-deleted {
|
||||
background-image: none;
|
||||
|
|
@ -224,10 +222,16 @@
|
|||
vertical-align: top;
|
||||
}
|
||||
.CodeMirror-merge-spacer {
|
||||
background-color: var(--surface-0);
|
||||
opacity: 40%;
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ button.active {
|
|||
}
|
||||
button.disabled,
|
||||
button[disabled] {
|
||||
background-color: var(--button-surface);
|
||||
background-color: var(--button-disabled-surface);
|
||||
color: var(--button-ink);
|
||||
fill: var(--button-ink);
|
||||
filter: var(--button-disabled-filter);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ a {
|
|||
color: var(--info2-ink);
|
||||
fill: var(--info2-ink);
|
||||
}
|
||||
.fa-icon.info.very-important {
|
||||
color: var(--info3-ink);
|
||||
fill: var(--info3-ink);
|
||||
}
|
||||
input[type="number"] {
|
||||
width: 5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ a {
|
|||
font-size: 96px;
|
||||
}
|
||||
#theURL {
|
||||
color: var(--ink-2);
|
||||
padding: 0;
|
||||
}
|
||||
#theURL > * {
|
||||
|
|
@ -54,33 +55,32 @@ a {
|
|||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
#theURL > p > span:last-of-type {
|
||||
#theURL #toggleParse {
|
||||
background-color: transparent;
|
||||
top: 100%;
|
||||
box-sizing: border-box;
|
||||
color: var(--ink-4);
|
||||
fill: var(--ink-4);
|
||||
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) > p > span:last-of-type > span:first-of-type {
|
||||
#theURL:not(.collapsed) #toggleParse > span:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
#theURL.collapsed > p > span:last-of-type > span:last-of-type {
|
||||
#theURL.collapsed #toggleParse > span:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
body[dir="ltr"] #theURL > p > span:last-of-type {
|
||||
body[dir="ltr"] #toggleParse {
|
||||
right: 0;
|
||||
}
|
||||
body[dir="rtl"] #theURL > p > span:last-of-type {
|
||||
body[dir="rtl"] #toggleParse {
|
||||
left: 0;
|
||||
}
|
||||
#theURL > p:hover > span {
|
||||
color: var(--ink-1);
|
||||
fill: var(--ink-1);
|
||||
#theURL > p:hover #toggleParse {
|
||||
transform: translate(0, -50%) scale(1.15);
|
||||
}
|
||||
#parsed {
|
||||
background-color: var(--surface-1);
|
||||
|
|
|
|||
|
|
@ -225,29 +225,21 @@ body[dir="rtl"] #netInspector #filterExprPicker {
|
|||
}
|
||||
#vwRenderer .logEntry > div[data-status="1"],
|
||||
#netFilteringDialog > .panes > .details > div[data-status="1"] {
|
||||
background-color: var(--logger-blocked-surface);
|
||||
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);
|
||||
}
|
||||
body.colorBlind #vwRenderer .logEntry > div[data-status="1"],
|
||||
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] {
|
||||
background-color: rgba(0, 19, 110, 0.1);
|
||||
}
|
||||
#vwRenderer .logEntry > div[data-status="3"] {
|
||||
background-color: rgba(108, 108, 108, 0.1);
|
||||
}
|
||||
body.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
|
||||
: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: var(--logger-allowed-surface);
|
||||
}
|
||||
body.colorBlind #vwRenderer .logEntry > div[data-status="2"],
|
||||
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
|
||||
background-color: rgba(255, 194, 57, 0.1)
|
||||
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 50%);
|
||||
}
|
||||
#vwRenderer .logEntry > div[data-tabid="-1"] {
|
||||
text-shadow: 0 0.2em 0.4em #aaa;
|
||||
|
|
@ -256,8 +248,8 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
|
|||
#vwRenderer .logEntry > div.redirect {
|
||||
background-color: var(--logger-redirected-surface);
|
||||
}
|
||||
body.colorBlind #vwRenderer .logEntry > div.extendedRealm,
|
||||
body.colorBlind #vwRenderer .logEntry > div.redirect {
|
||||
: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] {
|
||||
|
|
@ -376,29 +368,21 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
|
|||
}
|
||||
#vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
|
||||
#netFilteringDialog > .panes > .details > div[data-status="1"] b {
|
||||
background-color: var(--logger-blocked-em-surface);
|
||||
background-color: rgb(var(--popup-cell-block-surface-rgb) / 100%);
|
||||
}
|
||||
#vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(7) b,
|
||||
#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b {
|
||||
background-color: var(--logger-modified-em-surface);
|
||||
}
|
||||
body.colorBlind #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
|
||||
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] b {
|
||||
background-color: rgba(0, 19, 110, 0.2);
|
||||
}
|
||||
#vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
|
||||
background-color: rgba(108, 108, 108, 0.2);
|
||||
}
|
||||
body.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
|
||||
:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
|
||||
background-color: rgba(96, 96, 96, 0.2);
|
||||
}
|
||||
#vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
|
||||
#netFilteringDialog > .panes > .details > div[data-status="2"] b {
|
||||
background-color: var(--logger-allowed-em-surface);
|
||||
}
|
||||
body.colorBlind #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
|
||||
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b {
|
||||
background-color: rgba(255, 194, 57, 0.2);
|
||||
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%);
|
||||
}
|
||||
#vwRenderer .logEntry > div > span:nth-of-type(7) a {
|
||||
background-color: dimgray;
|
||||
|
|
@ -759,35 +743,35 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
|
|||
#netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
|
||||
background-color: rgba(0, 160, 0, 0.3);
|
||||
}
|
||||
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
|
||||
: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);
|
||||
}
|
||||
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
|
||||
: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);
|
||||
}
|
||||
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
|
||||
: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);
|
||||
}
|
||||
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
|
||||
: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,
|
||||
body.colorBlind #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);
|
||||
}
|
||||
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
|
||||
: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 {
|
||||
|
|
@ -800,7 +784,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.
|
|||
#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
|
||||
background-color: rgb(0, 160, 0);
|
||||
}
|
||||
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
|
||||
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
|
||||
background-color: rgb(255, 194, 57);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action > .noop {
|
||||
|
|
@ -809,7 +793,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .
|
|||
#netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
|
||||
background-color: rgb(192, 0, 0);
|
||||
}
|
||||
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
|
||||
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
|
||||
background-color: rgb(0, 19, 110);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .url {
|
||||
|
|
|
|||
|
|
@ -64,10 +64,6 @@ hr {
|
|||
align-items: stretch;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: var(--popup-gap-thin)
|
||||
var(--popup-gap-thin)
|
||||
var(--popup-gap)
|
||||
var(--popup-gap-thin);
|
||||
}
|
||||
#switch {
|
||||
color: var(--popup-power-ink);
|
||||
|
|
@ -77,7 +73,7 @@ hr {
|
|||
flex-grow: 1;
|
||||
font-size: 96px;
|
||||
justify-content: center;
|
||||
margin: 0 var(--popup-gap-thin);
|
||||
margin: var(--popup-gap-thin) var(--popup-gap-thin) 0;
|
||||
padding: 0;
|
||||
stroke: none;
|
||||
stroke-width: 64;
|
||||
|
|
@ -106,7 +102,7 @@ body.off #switch {
|
|||
visibility: hidden;
|
||||
}
|
||||
.rulesetTools [id]:not(:first-of-type) {
|
||||
margin-top: 0.2em;
|
||||
margin-block-start: 1px;
|
||||
}
|
||||
.rulesetTools [id] > svg {
|
||||
fill: var(--ink-4);
|
||||
|
|
@ -174,6 +170,7 @@ body.needSave #revertRules {
|
|||
|
||||
.toolRibbon {
|
||||
align-items: start;
|
||||
background-color: var(--popup-toolbar-surface);
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: column;
|
||||
|
|
@ -228,10 +225,11 @@ body.mobile.no-tooltips .toolRibbon .tool {
|
|||
}
|
||||
|
||||
#moreOrLess {
|
||||
column-gap: var(--popup-gap);
|
||||
column-gap: 0;
|
||||
display: grid;
|
||||
grid-template: auto / 1fr 1fr;
|
||||
margin: 0;
|
||||
justify-items: stretch;
|
||||
margin: 1px 0 0 0;
|
||||
}
|
||||
#moreOrLess > span {
|
||||
cursor: pointer;
|
||||
|
|
@ -247,6 +245,7 @@ body.mobile.no-tooltips .toolRibbon .tool {
|
|||
transform: rotate(180deg);
|
||||
}
|
||||
#lessButton {
|
||||
border-inline-start: 1px solid var(--surface-1);
|
||||
text-align: end;
|
||||
}
|
||||
body[data-more="a b c d e f"] #moreButton {
|
||||
|
|
@ -269,6 +268,9 @@ body[data-more=""] #lessButton {
|
|||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
:root.desktop #firewall {
|
||||
margin-inline-start: 1px;
|
||||
}
|
||||
:root.desktop body.vMin #firewall {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
|
@ -601,6 +603,15 @@ body:not([data-more~="f"]) [data-more="f"] {
|
|||
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;
|
||||
}
|
||||
|
|
@ -663,15 +674,16 @@ body:not([data-more~="e"]) [data-more="e"] {
|
|||
background-color: var(--popup-ruleset-tool-surface-hover);
|
||||
}
|
||||
:root.desktop .rulesetTools [id]:hover > svg {
|
||||
fill: var(--ink-3);
|
||||
fill: var(--ink-2);
|
||||
}
|
||||
:root.desktop #firewall {
|
||||
direction: rtl;
|
||||
line-height: 1.4;
|
||||
}
|
||||
:root.desktop .tool:hover {
|
||||
background-color: var(--surface-2);
|
||||
background-color: var(--popup-toolbar-surface-hover);
|
||||
}
|
||||
:root.desktop #moreOrLess > span:hover {
|
||||
background-color: var(--surface-2);
|
||||
/* background-color: var(--popup-toolbar-surface-hover); */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
--bg-tooltip: hsla(60, 100%, 97%, 1);
|
||||
--popup-power-ink: rgb(0 110 254);
|
||||
--popup-power-ink-hover: rgb(var(--blue-60));
|
||||
--ink-2: rgb(var(--ink-rgb) / 80%);
|
||||
--ink-3: rgb(var(--ink-rgb) / 60%);
|
||||
--ink-4: rgb(var(--ink-rgb) / 40%);
|
||||
--ink-5: rgb(var(--ink-rgb) / 20%);
|
||||
}
|
||||
:root.dark {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,53 @@
|
|||
body {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
||||
.synopsis {
|
||||
color: var(--ink-1);
|
||||
font-size: 90%;
|
||||
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-color-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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,65 +134,23 @@
|
|||
}
|
||||
|
||||
/*
|
||||
* Color themes
|
||||
* Default color theme
|
||||
*
|
||||
* Tool: hsluv.org
|
||||
*
|
||||
* */
|
||||
:root.h0 {
|
||||
--primary-color-30: 139 18 60; /* S:90 Luv:30 */
|
||||
--primary-color-40: 181 27 81; /* S:90 Luv:40 */
|
||||
--primary-color-50: 226 37 102; /* S:90 Luv:50 */
|
||||
--primary-color-60: 247 87 130; /* S:90 Luv:60 */
|
||||
--primary-color-70: 248 138 162; /* S:90 Luv:70 */
|
||||
--primary-color-70: 248 138 162; /* S:90 Luv:70 */
|
||||
--primary-color-80: 250 180 193; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root.h45 {
|
||||
--primary-color-30: 98 63 17; /* S:90 Luv:30 */
|
||||
--primary-color-40: 130 85 25; /* S:90 Luv:40 */
|
||||
--primary-color-50: 162 107 34; /* S:90 Luv:50 */
|
||||
--primary-color-60: 196 131 43; /* S:90 Luv:60 */
|
||||
--primary-color-70: 232 155 53; /* S:90 Luv:70 */
|
||||
--primary-color-80: 251 185 123; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root.h180 {
|
||||
--primary-color-30: 18 79 73; /* S:90 Luv:30 */
|
||||
--primary-color-40: 27 105 98; /* S:90 Luv:40 */
|
||||
--primary-color-50: 37 132 123; /* S:90 Luv:50 */
|
||||
--primary-color-60: 47 161 150; /* S:90 Luv:60 */
|
||||
--primary-color-70: 57 190 177; /* S:90 Luv:70 */
|
||||
--primary-color-80: 67 220 205; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root.h225 {
|
||||
--primary-color-30: 20 77 95; /* S:90 Luv:30 */
|
||||
--primary-color-40: 29 102 125; /* S:90 Luv:40 */
|
||||
--primary-color-50: 39 128 157; /* S:90 Luv:50 */
|
||||
--primary-color-60: 50 156 190; /* S:90 Luv:60 */
|
||||
--primary-color-70: 60 184 224; /* S:90 Luv:70 */
|
||||
--primary-color-80: 110 211 250; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root /* .h270 default */ {
|
||||
--primary-color-30: 72 31 194; /* S:90 Luv:30 */
|
||||
--primary-color-40: 96 56 234; /* S:90 Luv:40 */
|
||||
--primary-color-50: 120 95 240; /* S:90 Luv:50 */
|
||||
--primary-color-60: 146 128 244; /* S:90 Luv:60 */
|
||||
--primary-color-70: 172 160 247; /* S:90 Luv:70 */
|
||||
--primary-color-80: 199 192 250; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root.h315 {
|
||||
--primary-color-10: 54 5 49; /* S:90 Luv:10 */
|
||||
--primary-color-30: 126 22 115; /* S:90 Luv:30 */
|
||||
--primary-color-40: 165 32 151; /* S:90 Luv:40 */
|
||||
--primary-color-50: 205 43 189; /* S:90 Luv:50 */
|
||||
--primary-color-60: 244 61 225; /* S:90 Luv:60 */
|
||||
--primary-color-70: 247 127 231; /* S:90 Luv:70 */
|
||||
--primary-color-80: 250 174 238; /* S:90 Luv:80 */
|
||||
:root /* h268 */ {
|
||||
--primary-color-5: 13 4 65; /* S:90 Luv:5 */
|
||||
--primary-color-10: 22 9 92; /* S:90 Luv:10 */
|
||||
--primary-color-20: 40 20 145; /* S:90 Luv:20 */
|
||||
--primary-color-30: 59 32 202; /* S:90 Luv:30 */
|
||||
--primary-color-40: 84 62 234; /* S:90 Luv:40 */
|
||||
--primary-color-50: 112 98 240; /* S:90 Luv:50 */
|
||||
--primary-color-60: 139 130 244; /* S:90 Luv:60 */
|
||||
--primary-color-70: 168 162 247; /* S:90 Luv:70 */
|
||||
--primary-color-80: 196 193 250; /* S:90 Luv:80 */
|
||||
--primary-color-90: 225 224 252; /* S:90 Luv:90 */
|
||||
--primary-color-95: 240 239 254; /* S:90 Luv:95 */
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -211,14 +169,12 @@
|
|||
--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-1: rgb(var(--ink-rgb));
|
||||
--ink-2: rgb(var(--ink-rgb) / 80%);
|
||||
--ink-3: rgb(var(--ink-rgb) / 60%);
|
||||
--ink-4: rgb(var(--ink-rgb) / 40%);
|
||||
|
||||
--surface-0: white;
|
||||
--surface-0-rgb: 255 255 255;
|
||||
--surface-0: rgb(var(--surface-0-rgb));
|
||||
--surface-1: rgb(var(--gray-95));
|
||||
--surface-2: rgb(var(--gray-90));
|
||||
--surface-3: rgb(var(--gray-80));
|
||||
|
|
@ -228,68 +184,14 @@
|
|||
--border-3: rgb(var(--gray-65));
|
||||
--border-4: rgb(var(--gray-60));
|
||||
|
||||
--accent-ink-1: var(--surface-1);
|
||||
--accent-ink-3: var(--ink-1);
|
||||
--accent-surface-1: rgb(var(--primary-color-30));
|
||||
--accent-surface-2: rgb(var(--primary-color-50));
|
||||
--accent-surface-3: rgb(var(--primary-color-70));
|
||||
|
||||
--link-ink: var(--accent-surface-1);
|
||||
--subtil-ink: var(--accent-surface-1);
|
||||
|
||||
--fieldset-header-surface: transparent;
|
||||
--fieldset-header-ink: var(--ink-2);
|
||||
|
||||
--button-ink: var(--ink-1);
|
||||
--button-surface: var(--surface-3);
|
||||
--button-border-radius: 5px;
|
||||
--button-preferred-ink: var(--accent-ink-1);
|
||||
--button-preferred-surface: var(--accent-surface-1);
|
||||
--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%);
|
||||
|
||||
--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: var(--accent-surface-1);
|
||||
--dashboard-tab-active-surface: rgb(var(--primary-color-70) / 10%);
|
||||
--dashboard-tab-surface-hover: var(--surface-2);
|
||||
--dashboard-tab-border-hover: 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));
|
||||
--accent-surface-1: rgb(var(--primary-color-40));
|
||||
|
||||
/* popup panel */
|
||||
--popup-cell-surface: var(--surface-2);
|
||||
--popup-cell-label-filter: opacity(40%);
|
||||
--popup-cell-cname-ink: rgb(var(--blue-50));
|
||||
--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-cell-label-mixed-surface: #c29100; /* TODO: fix */
|
||||
--popup-icon-x-ink: rgb(var(--red-60));
|
||||
--popup-power-ink-rgb: var(--primary-color-40);
|
||||
--popup-power-ink: rgb(var(--popup-power-ink-rgb));
|
||||
--popup-ruleset-tool-ink: var(--ink-1);
|
||||
--popup-ruleset-tool-surface: rgb(var(--primary-color-70) / 20%);
|
||||
--popup-ruleset-tool-surface-hover: rgb(var(--primary-color-70) / 40%);
|
||||
--popup-ruleset-tool-shadow: rgb(var(--primary-color-30) / 20%);
|
||||
--popup-power-ink-rgb: var(--primary-color-50);
|
||||
|
||||
/* horizontal line separator */
|
||||
--hr-ink: var(--surface-2);
|
||||
|
|
@ -307,11 +209,11 @@
|
|||
--cm-gutter-surface: var(--surface-2);
|
||||
--cm-matchingbracket: rgb(var(--green-30));
|
||||
--cm-merge-copy-ink: rgb(var(--blue-50));
|
||||
--cm-merge-l-chunk-border: rgb(var(--blue-5));
|
||||
--cm-merge-l-chunk-surface: rgb(var(--blue-5) / 20%);
|
||||
--cm-negative: #c00;
|
||||
--cm-positive: #080;
|
||||
--cm-selection-surface: #8cf4;
|
||||
--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(--primary-color-70) / 50%);
|
||||
--cm-selection-ink: var(--ink-1);
|
||||
--cm-searching-ink: inherit;
|
||||
--cm-searching-surface: rgb(var(--yellow-20) / 80%);
|
||||
|
|
@ -319,17 +221,18 @@
|
|||
|
||||
/* syntax highlight: static filtering */
|
||||
--sf-comment-ink: var(--ink-3);
|
||||
--sf-def-ink: rgb(var(--blue-50));
|
||||
--sf-def-ink: #0075e7; /* h:255 S:100 Luv:50 */
|
||||
--sf-directive-ink: var(--ink-1);
|
||||
--sf-error-ink: rgb(var(--red-60));
|
||||
--sf-error-surface: rgb(var(--red-60) / 10%);
|
||||
--sf-keyword-ink: rgb(var(--purple-60));
|
||||
--sf-notice-ink: var(--border-2);
|
||||
--sf-error-ink: #e32f00; /* h15 S:100 Luv:50 */
|
||||
--sf-error-surface: #e32f0019; /* h15 S:100 Luv:50 @ 10% */
|
||||
--sf-keyword-ink: #8c00e6; /* h:280 S:100 Luv:40 */
|
||||
--sf-notice-ink: var(--ink-4);
|
||||
--sf-readonly-ink: var(--ink-3);
|
||||
--sf-tag-ink: rgb(var(--green-60));
|
||||
--sf-value-ink: rgb(var(--orange-70));
|
||||
--sf-tag-ink: #008a3c /* h:135 S:100 Luv:50 */;
|
||||
--sf-value-ink: #c65400 /* h:25 S:100 Luv:50 */;
|
||||
--sf-variable-ink: var(--ink-1);
|
||||
--sf-warning-ink: rgb(var(--yellow-50));
|
||||
--sf-warning-ink: #a06d00; /* h:50 S:100 Luv:50 */
|
||||
--sf-warning-surface: #a06d0019; /* h:50 S:100 Luv:50 @ 10% */
|
||||
|
||||
/* syntax highlight: dynamic filtering */
|
||||
--df-allow-ink: var(--cm-positive);
|
||||
|
|
@ -337,13 +240,9 @@
|
|||
--df-noop-ink: rgb(var(--dark-gray-10));
|
||||
|
||||
/* logger */
|
||||
--logger-allowed-surface: #00a00014;
|
||||
--logger-blocked-surface: #c0000014;
|
||||
--logger-modified-surface: #0000c010;
|
||||
--logger-redirected-surface: rgb(var(--yellow-5) / 50%);
|
||||
--logger-blocked-em-surface: #c0000036;
|
||||
--logger-modified-em-surface: #0000c028;
|
||||
--logger-allowed-em-surface: #00a00036;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -368,7 +267,7 @@
|
|||
--ink-rgb: var(--gray-95);
|
||||
--ink-0: white;
|
||||
|
||||
--surface-0: black;
|
||||
--surface-0-rgb: 0 0 0;
|
||||
--surface-1: rgb(var(--gray-10));
|
||||
--surface-2: rgb(var(--gray-20));
|
||||
--surface-3: rgb(var(--gray-30));
|
||||
|
|
@ -378,21 +277,13 @@
|
|||
--border-3: rgb(var(--gray-45));
|
||||
--border-4: rgb(var(--gray-50));
|
||||
|
||||
--accent-ink-1: rgb(var(--ink-80));
|
||||
--accent-surface-1: rgb(var(--primary-color-70));
|
||||
|
||||
--accent-ink-1: var(--surface-1);
|
||||
--accent-ink-3: var(--ink-1);
|
||||
--accent-surface-1: rgb(var(--primary-color-70));
|
||||
--accent-surface-3: rgb(var(--primary-color-30));
|
||||
|
||||
/* popup panel */
|
||||
--popup-cell-label-filter: opacity(40%);
|
||||
--popup-cell-cname-ink: hsla(0, 0%, 53%, 0.3);
|
||||
--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-color-60);
|
||||
--popup-ruleset-tool-shadow: -surface-0;
|
||||
|
||||
/* cloud widget */
|
||||
--cloud-total-used-surface: rgb(var(--violet-20) / 25%);
|
||||
|
|
@ -402,35 +293,104 @@
|
|||
--cm-merge-copy-ink: rgb(var(--blue-30));
|
||||
--cm-foldmarker-ink: rgb(var(--blue-20));
|
||||
--cm-matchingbracket: rgb(var(--green-30) / 50%);
|
||||
--cm-merge-l-chunk-border: rgb(var(--blue-70));
|
||||
--cm-merge-l-chunk-surface: rgb(var(--blue-90));
|
||||
--cm-negative: #f44;
|
||||
--cm-positive: #0c0;
|
||||
--cm-negative: #ff8982; /* h:15 S:100 Luv:70 */
|
||||
--cm-positive: #00c634; /* h:130 S:100 Luv:70 */
|
||||
--cm-selection-surface: rgb(var(--primary-color-30) / 50%);
|
||||
--cm-searching-ink: var(--surface-0);
|
||||
--cm-searching-surface: rgb(var(--yellow-20));
|
||||
|
||||
/* syntax highlight: static filtering */
|
||||
--sf-comment-ink: var(--ink-3);
|
||||
--sf-def-ink: rgb(var(--blue-20));
|
||||
--sf-error-ink: rgb(var(--red-40));
|
||||
--sf-error-surface: rgb(var(--red-40) / 40%);
|
||||
--sf-keyword-ink: rgb(var(--purple-10));
|
||||
--sf-notice-ink: var(--border-2);
|
||||
--sf-tag-ink: rgb(var(--green-50));
|
||||
--sf-value-ink: rgb(var(--orange-20));
|
||||
--sf-def-ink: #84aaff; /* h:255 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: #d5bbff; /* h:280 S:100 Luv:80 */
|
||||
--sf-tag-ink: #00c559 /* h:135 S:100 Luv:70 */;
|
||||
--sf-value-ink: #ff8c62 /* h:25 S:100 Luv:70 */;
|
||||
--sf-variable-ink: var(--ink-1);
|
||||
--sf-warning-ink: rgb(var(--yellow-50));
|
||||
--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-allowed-surface: #24a71960;
|
||||
--logger-blocked-surface: #ff4c2b60;
|
||||
--logger-modified-surface: #663efd60;
|
||||
--logger-redirected-surface: rgb(var(--yellow-5) / 40%);
|
||||
}
|
||||
|
||||
/*
|
||||
* Shared declarations
|
||||
* */
|
||||
:root {
|
||||
--high-em: 87%;
|
||||
--medium-em: 60%;
|
||||
--low-em: 38%;
|
||||
|
||||
--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);
|
||||
|
||||
--link-ink: var(--accent-surface-1);
|
||||
--subtil-ink: var(--accent-surface-1);
|
||||
|
||||
--fieldset-header-surface: transparent;
|
||||
--fieldset-header-ink: var(--ink-2);
|
||||
|
||||
--button-ink: var(--ink-1);
|
||||
--button-surface: var(--surface-3);
|
||||
--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%);
|
||||
|
||||
--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: var(--accent-surface-1);
|
||||
--dashboard-tab-active-surface: transparent;
|
||||
--dashboard-tab-surface-hover: var(--surface-2);
|
||||
--dashboard-tab-border-hover: 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-color-80) / 20%);
|
||||
--popup-toolbar-surface-hover: rgb(var(--primary-color-80) / 25%);
|
||||
--popup-ruleset-tool-ink: var(--ink-1);
|
||||
--popup-ruleset-tool-surface: rgb(var(--primary-color-80) / 20%);
|
||||
--popup-ruleset-tool-surface-hover: rgb(var(--primary-color-80) / 25%);
|
||||
--popup-ruleset-tool-shadow: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* Rule colors
|
||||
* */
|
||||
|
|
@ -452,6 +412,14 @@
|
|||
--popup-cell-noop-surface-rgb: 94 94 94; /* h:0 S:0 Luv:40 */
|
||||
}
|
||||
|
||||
:root.accented {
|
||||
--button-surface: rgb(var(--primary-color-80));
|
||||
}
|
||||
|
||||
:root.dark.accented {
|
||||
--button-surface: rgb(var(--primary-color-30));
|
||||
}
|
||||
|
||||
/*
|
||||
* Source for color-blind color scheme:
|
||||
* https://davidmathlogic.com/colorblind/
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@
|
|||
|
||||
<iframe id="iframe" src=""></iframe>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
<script src="js/vapi-client.js"></script>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
|
||||
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/codemirror/search.js"></script>
|
||||
<script src="js/codemirror/search-thread.js"></script>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div>
|
||||
<p data-i18n="docblockedPrompt1"></p>
|
||||
<div id="theURL" class="collapsed">
|
||||
<p class="code"><span></span><span><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
|
||||
<p class="code"><span></span><span id="toggleParse" class="hidden"><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
|
||||
<ul id="parsed"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,6 +55,8 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/fa-icons.js"></script>
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@
|
|||
<script src="lib/codemirror/lib/codemirror.js"></script>
|
||||
<script src="lib/codemirror/addon/merge/merge.js"></script>
|
||||
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/fa-icons.js"></script>
|
||||
<script src="js/vapi.js"></script>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,6 @@ const hiddenSettingsDefault = {
|
|||
uiPopupConfig: 'unset',
|
||||
uiFlavor: 'unset',
|
||||
uiStyles: 'unset',
|
||||
uiTheme: 'unset',
|
||||
updateAssetBypassBrowserCache: false,
|
||||
userResourcesLocation: 'unset',
|
||||
};
|
||||
|
|
@ -97,6 +96,9 @@ const userSettingsDefault = {
|
|||
collapseBlocked: true,
|
||||
colorBlindFriendly: false,
|
||||
contextMenuEnabled: true,
|
||||
uiAccentCustom: false,
|
||||
uiAccentCustom0: '#aca0f7',
|
||||
uiTheme: 'auto',
|
||||
externalLists: '',
|
||||
firewallPaneMinimized: true,
|
||||
hyperlinkAuditingDisabled: true,
|
||||
|
|
|
|||
|
|
@ -170,7 +170,8 @@ uDom.nodeFromId('why').textContent = details.fs;
|
|||
return;
|
||||
}
|
||||
|
||||
const toggler = document.querySelector('#theURL > p > span:last-of-type');
|
||||
const toggler = document.querySelector('#toggleParse');
|
||||
toggler.classList.remove('hidden');
|
||||
|
||||
toggler.addEventListener('click', ( ) => {
|
||||
const cl = uDom.nodeFromId('theURL').classList;
|
||||
|
|
|
|||
|
|
@ -1005,7 +1005,7 @@ const onLogBufferRead = function(response) {
|
|||
processLoggerEntries(response);
|
||||
|
||||
// Synchronize DOM with sent logger data
|
||||
document.body.classList.toggle(
|
||||
document.documentElement.classList.toggle(
|
||||
'colorBlind',
|
||||
response.colorBlind === true
|
||||
);
|
||||
|
|
|
|||
|
|
@ -221,8 +221,10 @@ const onMessage = function(request, sender, callback) {
|
|||
|
||||
case 'uiStyles':
|
||||
response = {
|
||||
uiAccentCustom: µb.userSettings.uiAccentCustom,
|
||||
uiAccentCustom0: µb.userSettings.uiAccentCustom0,
|
||||
uiStyles: µb.hiddenSettings.uiStyles,
|
||||
uiTheme: µb.hiddenSettings.uiTheme,
|
||||
uiTheme: µb.userSettings.uiTheme,
|
||||
};
|
||||
break;
|
||||
|
||||
|
|
|
|||
|
|
@ -208,35 +208,50 @@ const changeUserSettings = function(name, value) {
|
|||
name,
|
||||
value,
|
||||
});
|
||||
|
||||
// Maybe reflect some changes immediately
|
||||
switch ( name ) {
|
||||
case 'uiTheme':
|
||||
uDom.setTheme(value, [ 'dark', 'light' ]);
|
||||
break;
|
||||
case 'uiAccentCustom':
|
||||
case 'uiAccentCustom0':
|
||||
uDom.setAccentColor(
|
||||
uDom.nodeFromSelector('[data-setting-name="uiAccentCustom"]').checked,
|
||||
uDom.nodeFromSelector('[data-setting-name="uiAccentCustom0"]').value
|
||||
);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
const onInputChanged = function(ev) {
|
||||
const onValueChanged = function(ev) {
|
||||
const input = ev.target;
|
||||
const name = this.getAttribute('data-setting-name');
|
||||
let value = input.value;
|
||||
if ( name === 'largeMediaSize' ) {
|
||||
// Maybe sanitize value
|
||||
switch ( name ) {
|
||||
case 'largeMediaSize':
|
||||
value = Math.min(Math.max(Math.floor(parseInt(value, 10) || 0), 0), 1000000);
|
||||
break;
|
||||
case 'uiAccentCustom0':
|
||||
value = uDom.normalizeAccentColor(value);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if ( value !== input.value ) {
|
||||
input.value = value;
|
||||
}
|
||||
|
||||
changeUserSettings(name, value);
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
// Workaround for:
|
||||
// https://github.com/gorhill/uBlock/issues/1448
|
||||
|
||||
const onPreventDefault = function(ev) {
|
||||
ev.target.focus();
|
||||
ev.preventDefault();
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
// TODO: use data-* to declare simple settings
|
||||
|
||||
const onUserSettingsReceived = function(details) {
|
||||
|
|
@ -261,14 +276,9 @@ const onUserSettingsReceived = function(details) {
|
|||
.css('display', '');
|
||||
}
|
||||
|
||||
uDom('[data-i18n="settingsNoLargeMediaPrompt"] > input[type="number"]')
|
||||
.attr('data-setting-name', 'largeMediaSize')
|
||||
.attr('data-setting-type', 'input');
|
||||
|
||||
uDom('[data-setting-type="input"]').forEach(function(uNode) {
|
||||
uDom('[data-setting-type="value"]').forEach(function(uNode) {
|
||||
uNode.val(details[uNode.attr('data-setting-name')])
|
||||
.on('change', onInputChanged)
|
||||
.on('click', onPreventDefault);
|
||||
.on('change', onValueChanged);
|
||||
});
|
||||
|
||||
uDom('#export').on('click', ( ) => { exportToFile(); });
|
||||
|
|
|
|||
160
src/js/udom.js
160
src/js/udom.js
|
|
@ -36,26 +36,19 @@ const uDom = (( ) => {
|
|||
|
||||
/******************************************************************************/
|
||||
|
||||
const DOMList = function() {
|
||||
const DOMList = class {
|
||||
constructor() {
|
||||
this.nodes = [];
|
||||
}
|
||||
get length() {
|
||||
return this.nodes.length;
|
||||
}
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
Object.defineProperty(
|
||||
DOMList.prototype,
|
||||
'length',
|
||||
{
|
||||
get: function() {
|
||||
return this.nodes.length;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
const DOMListFactory = function(selector, context) {
|
||||
var r = new DOMList();
|
||||
const r = new DOMList();
|
||||
if ( typeof selector === 'string' ) {
|
||||
selector = selector.trim();
|
||||
if ( selector !== '' ) {
|
||||
|
|
@ -74,6 +67,109 @@ const DOMListFactory = function(selector, context) {
|
|||
return r;
|
||||
};
|
||||
|
||||
DOMListFactory.root = document.querySelector(':root');
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
DOMListFactory.setTheme = function(theme, remove) {
|
||||
if ( theme === 'auto' && typeof self.watchMedia === 'function' ) {
|
||||
const mql = self.watchMedia('(prefers-color-scheme: dark)');
|
||||
theme = mql instanceof Object && mql.matches === true
|
||||
? 'dark'
|
||||
: '';
|
||||
}
|
||||
let w = self;
|
||||
for (;;) {
|
||||
const rootcl = w.document.documentElement.classList;
|
||||
rootcl.remove(...remove);
|
||||
switch ( theme ) {
|
||||
case 'dark':
|
||||
rootcl.add('dark');
|
||||
break;
|
||||
case 'light':
|
||||
rootcl.add('light');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if ( w === w.parent ) { break; }
|
||||
w = w.parent;
|
||||
try { void w.document; } catch(ex) { return; }
|
||||
}
|
||||
};
|
||||
|
||||
DOMListFactory.normalizeAccentColor = function(accentColor) {
|
||||
if ( self.hsluv === undefined ) { return accentColor; }
|
||||
const hsl = self.hsluv.hexToHsluv(accentColor);
|
||||
hsl[0] = Math.round(hsl[0] * 10) / 10;
|
||||
hsl[1] = Math.round(Math.min(100, Math.max(50, hsl[1])));
|
||||
hsl[2] = 70;
|
||||
const rgb = self.hsluv.hsluvToRgb(hsl).map(
|
||||
a => Math.round(a * 255).toString(16).padStart(2, '0')
|
||||
);
|
||||
return `#${rgb.join('')}`;
|
||||
};
|
||||
|
||||
DOMListFactory.setAccentColor = function(accentEnabled, accentColor) {
|
||||
if ( self.hsluv === undefined ) { return; }
|
||||
let w = self;
|
||||
let styleText = '';
|
||||
if ( accentEnabled ) {
|
||||
const shades = [ 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95 ];
|
||||
const text = [];
|
||||
const hsl = self.hsluv.hexToHsluv(accentColor);
|
||||
text.push(':root {');
|
||||
for ( const shade of shades ) {
|
||||
hsl[2] = shade;
|
||||
const rgb = self.hsluv.hsluvToRgb(hsl).map(a => Math.round(a * 255));
|
||||
text.push(` --primary-color-${shade}: ${rgb.join(' ')};`);
|
||||
}
|
||||
text.push('}', '');
|
||||
styleText = text.join('\n');
|
||||
}
|
||||
for (;;) {
|
||||
let style = w.document.querySelector('style#accentColors');
|
||||
if ( style !== null ) { style.remove(); }
|
||||
if ( styleText.length !== 0 ) {
|
||||
style = w.document.createElement('style');
|
||||
style.id = 'accentColors';
|
||||
style.textContent = styleText;
|
||||
w.document.head.append(style);
|
||||
w.document.documentElement.classList.add('accented');
|
||||
} else {
|
||||
w.document.documentElement.classList.remove('accented');
|
||||
}
|
||||
if ( w === w.parent ) { break; }
|
||||
w = w.parent;
|
||||
try { void w.document; } catch(ex) { return; }
|
||||
}
|
||||
};
|
||||
|
||||
{
|
||||
// https://github.com/uBlockOrigin/uBlock-issues/issues/1044
|
||||
// Offer the possibility to bypass uBO's default styling
|
||||
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
|
||||
if ( typeof response !== 'object' || response === null ) { return; }
|
||||
uDom.setTheme(response.uiTheme, [ 'dark', 'light' ]);
|
||||
if ( response.uiAccentCustom ) {
|
||||
uDom.setAccentColor(true, response.uiAccentCustom0);
|
||||
}
|
||||
if ( response.uiStyles !== 'unset' ) {
|
||||
document.body.style.cssText = response.uiStyles;
|
||||
}
|
||||
});
|
||||
|
||||
const rootcl = DOMListFactory.root.classList;
|
||||
if ( vAPI.webextFlavor.soup.has('mobile') ) {
|
||||
rootcl.add('mobile');
|
||||
} else {
|
||||
rootcl.add('desktop');
|
||||
}
|
||||
if ( window.matchMedia('(min-resolution: 150dpi)').matches ) {
|
||||
rootcl.add('hidpi');
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
DOMListFactory.onLoad = function(callback) {
|
||||
|
|
@ -92,42 +188,6 @@ DOMListFactory.nodeFromSelector = function(selector) {
|
|||
|
||||
/******************************************************************************/
|
||||
|
||||
{
|
||||
// https://github.com/uBlockOrigin/uBlock-issues/issues/1044
|
||||
// Offer the possibility to bypass uBO's default styling
|
||||
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
|
||||
if ( typeof response !== 'object' || response === null ) { return; }
|
||||
if ( response.uiTheme !== 'unset' ) {
|
||||
if ( /\blight\b/.test(response.uiTheme) ) {
|
||||
root.classList.remove('dark');
|
||||
}
|
||||
if ( /\bdark\b/.test(response.uiTheme) ) {
|
||||
root.classList.remove('dark');
|
||||
}
|
||||
root.classList.add(...response.uiTheme.split(/\s+/));
|
||||
}
|
||||
if ( response.uiStyles !== 'unset' ) {
|
||||
document.body.style.cssText = response.uiStyles;
|
||||
}
|
||||
});
|
||||
|
||||
const root = DOMListFactory.root = document.querySelector(':root');
|
||||
if ( vAPI.webextFlavor.soup.has('mobile') ) {
|
||||
root.classList.add('mobile');
|
||||
} else {
|
||||
root.classList.add('desktop');
|
||||
}
|
||||
if ( window.matchMedia('(min-resolution: 150dpi)').matches ) {
|
||||
root.classList.add('hidpi');
|
||||
}
|
||||
// TODO: re-enable once there is a fully functional dark theme
|
||||
//if ( window.matchMedia('(prefers-color-scheme: dark)').matches ) {
|
||||
// root.classList.add('dark');
|
||||
//}
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
const addNodeToList = function(list, node) {
|
||||
if ( node ) {
|
||||
list.nodes.push(node);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2012-2021 Alexei Boronine
|
||||
Copyright (c) 2016 Florian Dormont
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
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 OR COPYRIGHT HOLDERS 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.
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
(function() {function f(a){var c=[],b=Math.pow(a+16,3)/1560896;b=b>g?b:a/k;for(var d=0;3>d;){var e=d++,h=l[e][0],w=l[e][1];e=l[e][2];for(var x=0;2>x;){var y=x++,z=(632260*e-126452*w)*b+126452*y;c.push({b:(284517*h-94839*e)*b/z,a:((838422*e+769860*w+731718*h)*a*b-769860*y*a)/z})}}return c}function m(a){a=f(a);for(var c=Infinity,b=0;b<a.length;){var d=a[b];++b;c=Math.min(c,Math.abs(d.a)/Math.sqrt(Math.pow(d.b,2)+1))}return c}
|
||||
function n(a,c){c=c/360*Math.PI*2;a=f(a);for(var b=Infinity,d=0;d<a.length;){var e=a[d];++d;e=e.a/(Math.sin(c)-e.b*Math.cos(c));0<=e&&(b=Math.min(b,e))}return b}function p(a,c){for(var b=0,d=0,e=a.length;d<e;){var h=d++;b+=a[h]*c[h]}return b}function q(a){return.0031308>=a?12.92*a:1.055*Math.pow(a,.4166666666666667)-.055}function r(a){return.04045<a?Math.pow((a+.055)/1.055,2.4):a/12.92}function t(a){return[q(p(l[0],a)),q(p(l[1],a)),q(p(l[2],a))]}
|
||||
function u(a){a=[r(a[0]),r(a[1]),r(a[2])];return[p(v[0],a),p(v[1],a),p(v[2],a)]}function A(a){var c=a[0],b=a[1];a=c+15*b+3*a[2];0!=a?(c=4*c/a,a=9*b/a):a=c=NaN;b=b<=g?b/B*k:116*Math.pow(b/B,.3333333333333333)-16;return 0==b?[0,0,0]:[b,13*b*(c-C),13*b*(a-D)]}function E(a){var c=a[0];if(0==c)return[0,0,0];var b=a[1]/(13*c)+C;a=a[2]/(13*c)+D;c=8>=c?B*c/k:B*Math.pow((c+16)/116,3);b=0-9*c*b/((b-4)*a-b*a);return[b,c,(9*c-15*a*c-a*b)/(3*a)]}
|
||||
function F(a){var c=a[0],b=a[1],d=a[2];a=Math.sqrt(b*b+d*d);1E-8>a?b=0:(b=180*Math.atan2(d,b)/Math.PI,0>b&&(b=360+b));return[c,a,b]}function G(a){var c=a[1],b=a[2]/360*2*Math.PI;return[a[0],Math.cos(b)*c,Math.sin(b)*c]}function H(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<a)return[100,0,c];if(1E-8>a)return[0,0,c];b=n(a,c)/100*b;return[a,b,c]}function I(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<c)return[a,0,100];if(1E-8>c)return[a,0,0];var d=n(c,a);return[a,b/d*100,c]}
|
||||
function J(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<a)return[100,0,c];if(1E-8>a)return[0,0,c];b=m(a)/100*b;return[a,b,c]}function K(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<c)return[a,0,100];if(1E-8>c)return[a,0,0];var d=m(c);return[a,b/d*100,c]}function L(a){for(var c="#",b=0;3>b;){var d=b++;d=Math.round(255*a[d]);var e=d%16;c+=M.charAt((d-e)/16|0)+M.charAt(e)}return c}
|
||||
function N(a){a=a.toLowerCase();for(var c=[],b=0;3>b;){var d=b++;c.push((16*M.indexOf(a.charAt(2*d+1))+M.indexOf(a.charAt(2*d+2)))/255)}return c}function O(a){return t(E(G(a)))}function P(a){return F(A(u(a)))}function Q(a){return O(H(a))}function R(a){return I(P(a))}function S(a){return O(J(a))}function T(a){return K(P(a))}
|
||||
var l=[[3.240969941904521,-1.537383177570093,-.498610760293],[-.96924363628087,1.87596750150772,.041555057407175],[.055630079696993,-.20397695888897,1.056971514242878]],v=[[.41239079926595,.35758433938387,.18048078840183],[.21263900587151,.71516867876775,.072192315360733],[.019330818715591,.11919477979462,.95053215224966]],B=1,C=.19783000664283,D=.46831999493879,k=903.2962962,g=.0088564516,M="0123456789abcdef";
|
||||
window.hsluv={hsluvToRgb:Q,rgbToHsluv:R,hpluvToRgb:S,rgbToHpluv:T,hsluvToHex:function(a){return L(Q(a))},hexToHsluv:function(a){return R(N(a))},hpluvToHex:function(a){return L(S(a))},hexToHpluv:function(a){return T(N(a))},lchToHpluv:K,hpluvToLch:J,lchToHsluv:I,hsluvToLch:H,lchToLuv:G,luvToLch:F,xyzToLuv:A,luvToXyz:E,xyzToRgb:t,rgbToXyz:u,lchToRgb:O,rgbToLch:P};})();
|
||||
|
|
@ -205,6 +205,8 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/fa-icons.js"></script>
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
Your administrator removed the ability to access the dashboard
|
||||
</div>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
<script src="js/vapi-client.js"></script>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="css/themes/default.css">
|
||||
<link rel="stylesheet" href="css/common.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/fa-icons.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/popup-fenix.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/themes/default.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/fa-icons.css">
|
||||
<link rel="stylesheet" href="css/popup-fenix.css">
|
||||
<title data-i18n="extName"></title>
|
||||
</head>
|
||||
|
||||
|
|
@ -41,7 +41,6 @@
|
|||
</div>
|
||||
<div id="hostname"><span></span>­<span></span></div>
|
||||
</div>
|
||||
<hr data-more="d">
|
||||
<div id="extraTools" class="toolRibbon" data-more="d">
|
||||
<span id="no-popups" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-popups<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoPopups_v2"></span></span>
|
||||
<span id="no-large-media" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">film<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoLargeMedia_v2"></span></span>
|
||||
|
|
@ -55,7 +54,6 @@
|
|||
<span data-i18n="popupDomainsConnected_v2"></span><span></span>
|
||||
<span data-i18n="popupBlockedSinceInstall_v2" data-more="b"></span><span data-more="b"></span>
|
||||
</div>
|
||||
<hr data-more="c">
|
||||
<div id="basicTools" class="toolRibbon" data-more="c">
|
||||
<span id="gotoZap" class="fa-icon tool enabled needPick" data-i18n-title="popupTipZapper">bolt<span class="caption" data-i18n="popupTipZapper"></span></span>
|
||||
<span id="gotoPick" class="fa-icon tool enabled needPick" data-i18n-title="popupTipPicker">eye-dropper<span class="caption" data-i18n="popupTipPicker"></span></span>
|
||||
|
|
@ -67,8 +65,8 @@
|
|||
<div class="itemRibbon" data-more="f">
|
||||
<span data-i18n="popupVersion"></span><span id="version"></span>
|
||||
</div>
|
||||
<hr>
|
||||
<div id="moreOrLess">
|
||||
<hr data-more="g">
|
||||
<div id="moreOrLess" class="">
|
||||
<span id="moreButton">
|
||||
<span data-i18n="popupMoreButton_v2"></span> <span class="fa-icon">angle-up</span>
|
||||
</span>
|
||||
|
|
@ -96,6 +94,8 @@
|
|||
<div id="tooltip"></div>
|
||||
</div>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/fa-icons.js"></script>
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
|
|
|
|||
|
|
@ -13,13 +13,10 @@
|
|||
|
||||
<body>
|
||||
<div class="fieldset">
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsCollapseBlockedPrompt"></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsIconBadgePrompt"></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsContextMenuPrompt"></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsTooltipsPrompt"></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsColorBlindPrompt"></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsCloudStorageEnabledPrompt"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsAdvancedUserPrompt"></span> <a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsCollapseBlockedPrompt">_</span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsIconBadgePrompt">_</span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsContextMenuPrompt">_</span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsCloudStorageEnabledPrompt">_</span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="fieldset">
|
||||
|
|
@ -31,15 +28,29 @@
|
|||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cnameUncloakEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsUncloakCnamePrompt"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#uncloak-canonical-names" target="_blank">info-circle</a></span></label></div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="fieldset">
|
||||
<div class="fieldset-header" data-i18n="settingsAppearance"></div>
|
||||
<div class="li"><label><span data-i18n="settingsThemeLabel">_</span> <select data-setting-name="uiTheme" data-setting-type="value"><option value="auto">Auto<option value="light">Light<option value="dark">Dark</select></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="uiAccentCustom" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsThemeAccent0Label">_</span></label> <input type="color" data-setting-name="uiAccentCustom0" data-setting-type="value"></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsColorBlindPrompt">_</span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsTooltipsPrompt">_</span></label></div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="fieldset">
|
||||
<div class="fieldset-header" data-i18n="settingPerSiteSwitchGroup"></div>
|
||||
<div class="li synopsis"><legend><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">info-circle</a></legend></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoCosmeticFilteringPrompt"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">info-circle</a></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0" data-setting-name="largeMediaSize" data-setting-type="value"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoRemoteFontsPrompt"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">info-circle</a></span></label></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoScriptingPrompt"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">info-circle</a></span></label></div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="fieldset">
|
||||
<div class="fieldset-header" data-i18n="settingsAdvanced"></div>
|
||||
<div class="li synopsis"><legend><span data-i18n="settingsAdvancedSynopsis"></span> <a class="fa-icon info very-important" href="https://github.com/gorhill/uBlock/wiki/Advanced-user-features" target="_blank">info-circle</a></legend></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsAdvancedUserPrompt"></span> <a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
|
||||
</div>
|
||||
<hr>
|
||||
<div id="localData" class="fieldset">
|
||||
<div>
|
||||
<div class="li" id="storageUsed"></div>
|
||||
|
|
@ -57,6 +68,8 @@
|
|||
<input id="restoreFilePicker" type="file" accept="text/plain">
|
||||
</div>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/fa-icons.js"></script>
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
<script src="js/vapi-client.js"></script>
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@
|
|||
|
||||
<script src="lib/codemirror/lib/codemirror.js"></script>
|
||||
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/vapi.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
|
|
|
|||
|
|
@ -61,11 +61,13 @@
|
|||
<script src="../lib/codemirror/addon/edit/closebrackets.js"></script>
|
||||
<script src="../lib/codemirror/addon/edit/matchbrackets.js"></script>
|
||||
<script src="../lib/codemirror/addon/hint/show-hint.js"></script>
|
||||
<script src="../lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="../js/vapi.js"></script>
|
||||
<script src="../js/vapi-common.js"></script>
|
||||
<script src="../js/vapi-client.js"></script>
|
||||
<script src="../js/vapi-client-extra.js"></script>
|
||||
<script src="../js/udom.js"></script>
|
||||
<script src="../js/i18n.js"></script>
|
||||
<script src="../js/epicker-ui.js" type="module"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@
|
|||
<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
|
||||
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
|
||||
|
||||
<script src="js/codemirror/search.js"></script>
|
||||
<script src="js/codemirror/search-thread.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue