external/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-10 09:07:54 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fourth pass to re-design the dashboard

Browse source 
Related commits:
- a8e3118fea
- 453f5450b6
- a45a21f337

Roughly, the changes in this commit:
- Make it easier to implement a dark theme eventually:
  - Flatten the look of buttons
  - Remove the use of `opacity` style property as a
    color modifier
- Some work toward removing dependency on FontAwesome
  font
This commit is contained in:
Raymond Hill 2020-04-10 18:17:12 -04:00
parent a7dc0de98f
commit 99b2a0a761
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
20 changed files with 291 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/3p-filters.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>uBlock — Filter lists</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/fa-icons.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
<link rel="stylesheet" type="text/css" href="css/cloud-ui.css">
<link rel="stylesheet" type="text/css" href="css/3p-filters.css">
@ -16,18 +17,16 @@
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div id="actions" class="root">
<button id="buttonApply" class="custom important disabled iconifiable" type="button" data-i18n-title="3pApplyChanges"><span class="fa">&#xf00c;</span><span data-i18n="3pApplyChanges"></span></button>
<button id="buttonUpdate" class="custom important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa">&#xf021;</span><span data-i18n="3pUpdateNow"></span></button>
<button id="buttonPurgeAll" class="custom disabled iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa">&#xf017;</span><span data-i18n="3pPurgeAll"></span></button>
<button id="buttonApply" class="custom important disabled iconifiable" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges"></span></button>
<button id="buttonUpdate" class="custom important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></span></button>
<button id="buttonPurgeAll" class="custom disabled iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></span></button>
</div>
<div>
<div class="entry"><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label></div>
<div class="entry"><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label><button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="3pParseAllABPHideFiltersInfo"></div>
<div class="li"><label><input type="checkbox" id="autoUpdate"><span data-i18n="3pAutoUpdatePrompt1"></span></label></div>
<div class="li"><label><input type="checkbox" id="parseCosmeticFilters"><span data-i18n="3pParseAllABPHideFiltersPrompt1"></span></label>&ensp;<span class="fa-icon info" data-i18n-title="3pParseAllABPHideFiltersInfo">question-circle</span>
</div>
<div class="entry"><input type="checkbox" id="ignoreGenericCosmeticFilters"><label data-i18n="3pIgnoreGenericCosmeticFilters" for="ignoreGenericCosmeticFilters"></label><button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="3pIgnoreGenericCosmeticFiltersInfo"></div>
<div class="li"><label><input type="checkbox" id="ignoreGenericCosmeticFilters"><span data-i18n="3pIgnoreGenericCosmeticFilters"></span></label>&ensp;<span class="fa-icon info" data-i18n-title="3pIgnoreGenericCosmeticFiltersInfo">question-circle</span>
</div>
</div>
@ -44,25 +43,26 @@
<span class="geDetails"><span class="geName"></span> <span class="geCount dim"></span></span>
<div class="listEntries"></div>
</div>
<div class="entry listEntry">
<label><input type="checkbox"><span class="listname"></span></label><!--
--><a class="fa content" href="" type="text/plain" target="_blank" data-i18n-title="3pViewContent">&#xf06e;</a><!--
--><a class="fa support" href="" target="_blank">&#xf015;</a><!--
--><span class="fa remove" href="">&#xf014;</span><!--
--><a class="fa mustread" href="" target="_blank">&#xf05a;</a><!--
 --><span class="fa status unsecure" title="http">&#xf13e;</span><!--
 --><span class="fa status obsolete" data-i18n-title="3pExternalListObsolete">&#xf071;</span><!--
 --><span class="fa status cache">&#xf017;</span><!--
 --><span class="fa status updating" data-i18n-title="3pUpdating">&#xf110;</span><!--
 --><span class="fa status failed" data-i18n-title="3pNetworkError">&#xf127;</span><!--
<div class="li listEntry">
<label><input type="checkbox"><span class="listname"></span>&nbsp;</label><!--
--><a class="fa-icon content" href="" type="text/plain" target="_blank" data-i18n-title="3pViewContent">eye-open</a><!--
--><a class="fa-icon support" href="" target="_blank">home</a><!--
--><span class="fa-icon remove" href="">trash-o</span><!--
--><a class="fa-icon mustread" href="" target="_blank">info-circle</a><!--
 --><span class="fa-icon status unsecure" title="http">unlock-alt</span><!--
 --><span class="fa-icon status obsolete" data-i18n-title="3pExternalListObsolete">exclamation-triangle</span><!--
 --><span class="fa-icon status cache">clock-o</span><!--
 --><span class="fa-icon status updating" data-i18n-title="3pUpdating">spinner</span><!--
 --><span class="fa-icon status failed" data-i18n-title="3pNetworkError">unlink</span><!--
--><span class="counts dim"></span>
</div>
<div class="listEntry toImport"><input type="checkbox" id="importLists"><label for="importLists" data-i18n="3pImport"></label><!--
--><a class="fa info towiki" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">&#xf05a;</a><!--
<div class="listEntry toImport"><label><input type="checkbox" id="importLists"><span data-i18n="3pImport"></span></label>&ensp;<!--
--><a class="fa-icon info towiki" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">info-circle</a><!--
--><textarea id="externalLists" dir="ltr" spellcheck="false" placeholder="3pExternalListsHint"></textarea>
</div>
</div>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>

4
src/_locales/en/messages.json
View file

@ -396,7 +396,7 @@
"description":"English: Parse and enforce Adblock+ element hiding filters."
},
"3pParseAllABPHideFiltersInfo":{
"message":"<p>This option enables the parsing and enforcing of <a href=\"https:\/\/adblockplus.org\/en\/faq_internal#elemhide\">Adblock Plus-compatible &ldquo;element hiding&rdquo; filters<\/a>. These filters are essentially cosmetic, they serve to hide elements in a web page which are deemed to be a visual nuisance, and which can't be blocked by the net request-based filtering engine.<\/p><p>Enabling this feature increases uBlock₀'s memory footprint.<\/p>",
"message":"Cosmetic filters serve to hide elements in a web page which are deemed to be a visual nuisance, and which can't be blocked by the network request-based filtering engines.",
"description":"Describes the purpose of the 'Parse and enforce cosmetic filters' feature."
},
"3pIgnoreGenericCosmeticFilters":{
@ -404,7 +404,7 @@
"description":"This will cause uBO to ignore all generic cosmetic filters."
},
"3pIgnoreGenericCosmeticFiltersInfo":{
"message":"<p>Generic cosmetic filters are those cosmetic filters which are meant to apply on all web sites.<p>Though handled efficiently by uBlock₀, generic cosmetic filters may still contribute measurable memory and CPU overhead on some web pages, especially for large and long-lived ones.<p>Enabling this option will eliminate the memory and CPU overhead added to web pages as a result of handling generic cosmetic filters, and also lower the memory footprint of uBlock₀ itself.<p>It is recommended to enable this option on less powerful devices.",
"message":"Generic cosmetic filters are those cosmetic filters which are meant to apply on all web sites. Enabling this option will eliminate the memory and CPU overhead added to web pages as a result of handling generic cosmetic filters.\n\nIt is recommended to enable this option on less powerful devices.",
"description":"Describes the purpose of the 'Ignore generic cosmetic filters' feature."
},
"3pListsOfBlockedHostsHeader":{

50
src/about.html
View file

@ -6,36 +6,36 @@
<title>uBlock — About</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
<link rel="stylesheet" type="text/css" href="css/about.css">
</head>
<body>
<div class="body">
<p id="aboutNameVer"></p>
<p>Copyright (c) Raymond Hill 2014-present<br>
&nbsp;
</p>
<ul>
<li><a href="https://github.com/gorhill/uBlock/releases" data-i18n="aboutChangelog"></a>
<li><a href="https://github.com/gorhill/uBlock/wiki" data-i18n="aboutWiki"></a>
<li><a href="https://old.reddit.com/r/uBlockOrigin/" data-i18n="aboutSupport"></a>
<ul>
<li><a href="logger-ui.html" data-i18n="popupTipLog"></a>
</ul>
<li><a href="https://github.com/uBlockOrigin/uBlock-issues/issues" data-i18n="aboutIssues"></a>
<li><a href="https://github.com/gorhill/uBlock" data-i18n="aboutCode"></a>
<li><span data-i18n="aboutContributors"></span>
<ul>
<li><a href="https://github.com/gorhill/uBlock/graphs/contributors">GitHub</a>
<li><a href="https://crowdin.net/project/ublock">Crowdin</a>
</ul>
<li><span data-i18n="aboutDependencies"></span><ul>
<li><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a>
<li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a> by <a href="https://github.com/davegandy">Dave Gandy</a>
<li><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a>
<li><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>
</ul>
</ul>
<div id="aboutNameVer" class="li"></div>
<div class="liul">
<div class="li">Copyright (c) Raymond Hill 2014-present</div>
</div>
<div class="li"><a href="https://github.com/gorhill/uBlock/releases" data-i18n="aboutChangelog"></a></div>
<div class="li"><a href="https://github.com/gorhill/uBlock/wiki" data-i18n="aboutWiki"></a></div>
<div class="li"><a href="https://old.reddit.com/r/uBlockOrigin/" data-i18n="aboutSupport"></a></div>
<div class="liul">
<div div class="li"><a href="logger-ui.html" data-i18n="popupTipLog"></a></div>
</div>
<div class="li"><a href="https://github.com/uBlockOrigin/uBlock-issues/issues" data-i18n="aboutIssues"></a></div>
<div class="li"><a href="https://github.com/gorhill/uBlock" data-i18n="aboutCode"></a></div>
<div class="li"><span data-i18n="aboutContributors"></span></div>
<div class="liul">
<div div class="li"><a href="https://github.com/gorhill/uBlock/graphs/contributors">GitHub</a></div>
<div div class="li"><a href="https://crowdin.net/project/ublock">Crowdin</a></div>
</div>
<div class="li"><span data-i18n="aboutDependencies"></span></div>
<div class="liul">
<div class="li"><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a></div>
<div class="li"><a href="https://fontawesome.com/" target="_blank">Font Awesome</a> by <a href="https://github.com/davegandy">Dave Gandy</a></div>
<div class="li"><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a></div>
<div class="li"><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></div>
</div>
</div>
<script src="js/vapi.js"></script>

12
src/cloud-ui.html
View file

@ -5,14 +5,12 @@
<title></title>
</head>
<body>
<div class="cloudTools">
<button id="cloudPush" type="button" class="custom" data-i18n-title="cloudPush"><span class="fa">&#xf0ee;</span></button>
<span id="cloudInfo" data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" class="custom" data-i18n-title="cloudPull" disabled><span class="fa">&#xf0ed;</span></button>
<button id="cloudPullAndMerge" type="button" class="custom" data-i18n-title="cloudPullAndMerge" disabled><span class="fa">&#xf0ed;<span>&#xf067;</span></span></button>
</div>
<button id="cloudPush" type="button" class="custom" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
<span id="cloudInfo" data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" class="custom" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
<button id="cloudPullAndMerge" type="button" class="custom" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
<p id="cloudError"></p>
<span id="cloudCog" class="fa">&#xf013;</span>
<span id="cloudCog" class="fa-icon">cog</span>
<div id="cloudOptions">
<div>
<p><label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value="">

110
src/css/3p-filters.css
View file

@ -8,31 +8,20 @@ body {
margin: 0;
padding: 0;
}
input[type="checkbox"] {
margin-inline-end: 0.5em;
-webkit-margin-end: 0.5em;
}
.root {
background-color: white;
overflow: auto;
padding: 0.5em 0;
}
.entry {
align-items: center;
display: flex;
margin: 0.5em 0;
}
.entry > * {
margin-left: 0;
margin-right: 0;
margin-inline-end: 0.5em;
-webkit-margin-end: 0.5em;
}
#actions {
position: sticky;
top: 0;
z-index: 10;
}
body.updating #buttonUpdate .fa-icon svg {
animation: spin 1s linear infinite;
transform-origin: 50%;
}
#listsOfBlockedHostsPrompt {
cursor: pointer;
}
@ -80,102 +69,121 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
.listEntry > * {
margin-left: 0;
margin-right: 0;
margin-inline-end: 0.5em;
-webkit-margin-end: 0.5em;
unicode-bidi: embed;
}
.listEntry > label {
align-items: center;
display: inline-flex;
}
.listEntry.toRemove input[type="checkbox"] {
visibility: hidden;
}
.listEntry.toRemove .listname {
text-decoration: line-through;
}
.listEntry .fa {
color: inherit;
.listEntry .fa,
.listEntry .fa-icon,
.listEntry .counts {
color: #888;
display: none;
fill: #888;
font-size: 110%;
opacity: 0.5;
vertical-align: baseline;
margin: 0 0.25em;
}
.listEntry .fa:hover,
.listEntry .fa-icon:hover {
color: inherit;
fill: inherit;
}
.listEntry .content {
display: inline-block;
display: inline-flex;
}
.listEntry a.towiki {
display: inline-block;
}
.listEntry a.fa:hover {
opacity: 1;
display: inline-flex;
}
.listEntry.support > a.support {
display: inline-block;
display: inline-flex;
}
.listEntry .remove {
color: darkred;
color: hsla(0, 100%, 27%, 0.5);
cursor: pointer;
fill: hsla(0, 100%, 27%, 0.5);
}
.listEntry .remove:hover {
color: hsla(0, 100%, 27%, 1);
fill: hsla(0, 100%, 27%, 1);
}
.listEntry.external .remove {
display: inline-block;
display: inline-flex;
}
.listEntry.mustread a.mustread {
display: inline-block;
color: hsla(240, 100%, 40%, 0.5);
display: inline-flex;
fill: hsla(240, 100%, 40%, 0.5);
}
.listEntry.mustread a.mustread:hover {
color: mediumblue;
color: hsla(240, 100%, 40%, 1);
fill: hsla(240, 100%, 40%, 1);
}
.listEntry .counts {
display: none;
font-size: smaller;
}
.listEntry.checked .counts {
display: inline;
}
.dim {
opacity: 0.6;
color: #666;
}
.listEntry .status {
color: #444;
cursor: default;
display: none;
}
.listEntry .status:hover {
opacity: 1;
color: inherit;
}
.listEntry .unsecure {
color: darkred;
color: hsla(0, 100%, 27%, 0.5);
fill: hsla(0, 100%, 27%, 0.5);
}
.listEntry .unsecure:hover {
color: hsla(0, 100%, 27%, 1);
fill: hsla(0, 100%, 27%, 1);
}
.listEntry.checked.unsecure .unsecure {
display: inline-block;
display: inline-flex;
}
.listEntry .failed {
color: darkred;
color: hsla(0, 100%, 27%, 0.5);
fill: hsla(0, 100%, 27%, 0.5);
}
.listEntry .failed:hover {
color: hsla(0, 100%, 27%, 1);
fill: hsla(0, 100%, 27%, 1);
}
.listEntry.failed .failed {
display: inline-block;
display: inline-flex;
}
.listEntry .cache {
cursor: pointer;
}
.listEntry.checked.cached:not(.obsolete) .cache {
display: inline-block;
display: inline-flex;
}
.listEntry .obsolete {
color: hsl(36, 100%, 40%);
color: hsla(36, 100%, 40%, 0.5);
fill: hsla(36, 100%, 40%, 0.5);
}
.listEntry .obsolete:hover {
color: hsla(36, 100%, 40%, 1);
fill: hsla(36, 100%, 40%, 1);
}
body:not(.updating) .listEntry.checked.obsolete .obsolete {
display: inline-block;
display: inline-flex;
}
.listEntry .updating {
transform-origin: 50% 46%;
transform-origin: 50%;
}
body.updating .listEntry.checked.obsolete .updating {
animation: spin 2s linear infinite;
display: inline-block;
animation: spin 1s steps(8) infinite;
display: inline-flex;
}
.listEntry.toImport input[type="checkbox"] ~ textarea {
.listEntry.toImport textarea {
border: 1px solid #ccc;
box-sizing: border-box;
display: block;
@ -187,7 +195,7 @@ body.updating .listEntry.checked.obsolete .updating {
white-space: pre;
width: 100%;
}
.listEntry.toImport input[type="checkbox"]:checked ~ textarea {
.listEntry.toImport.checked textarea {
visibility: visible;
}

20
src/css/about.css Normal file
View file

@ -0,0 +1,20 @@
body {
border: 0;
font: 14px/1.5 sans-serif;
margin: 0;
padding: 0;
}
.entries {
margin: 0.5em 0;
margin-inline-start: 2em;
-webkit-margin-start: 2em;
}
.entry {
margin: 0.5em 0;
}
@media (pointer: coarse) {
body {
font: 16px/1.5 sans-serif;
}
}

17
src/css/cloud-ui.css
View file

@ -8,7 +8,12 @@
#cloudWidget.hide {
display: none;
}
#cloudWidget .cloudTools {
#cloudWidget > button {
font-size: 180%;
padding: 0 0.25em;
position: relative;
}
#cloudWidget {
align-items: center;
display: flex;
flex-wrap: nowrap;
@ -16,21 +21,17 @@
#cloudWidget button[disabled] {
visibility: hidden;
}
#cloudWidget button > span.fa {
font-size: 150%;
}
#cloudWidget button.error {
color: red;
}
#cloudPullAndMerge {
margin-left: 0.25em;
}
#cloudPullAndMerge > span {
position: relative;
}
#cloudPullAndMerge > span > span {
#cloudPullAndMerge > span:nth-of-type(2) {
font-size: 50%;
position: absolute;
right: 0;
top: 0;
}
#cloudInfo {
color: gray;

1
src/css/codemirror.css
View file

@ -1,5 +1,6 @@
.codeMirrorContainer {
font-size: 12px;
line-height: 1.25;
overflow: hidden;
position: relative;
}

66
src/css/common.css
View file

@ -17,7 +17,7 @@
body {
background-color: white;
color: black;
font: 14px sans-serif;
font: 14px/1.5 sans-serif;
}
code {
background-color: #eee;
@ -28,39 +28,38 @@ textarea {
}
/* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
button.custom {
padding: 0.6em 1em;
align-items: flex-end;
border: 1px solid transparent;
border-color: #ccc #ccc #bbb #bbb;
border-radius: 3px;
background-color: hsl(216, 0%, 75%);
background-image: linear-gradient(#f2f2f2, #dddddd);
background-repeat: repeat-x;
color: #000;
opacity: 0.8;
background-color: #e6e6e6;
display: inline-flex;
padding: 0.6em 1em;
-moz-appearance: none;
-webkit-appearance: none;
}
button.custom:hover {
opacity: 1.0;
background-color: #d4d4d4;
}
button.custom.important {
border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
background-color: hsl(36, 100%, 75%);
background-image: linear-gradient(#ffdca8, #ffcc7f);
background-color: #ffddaa;
}
button.custom.important:hover {
background-color: #ffcc80;
}
button.custom.disabled,
button.custom[disabled],
button.custom.important.disabled,
button.custom.important[disabled] {
border-color: #ddd #ddd hsl(36, 0%, 85%);
background-color: hsl(36, 0%, 72%);
background-image: linear-gradient(#f2f2f2, #dddddd);
color: #666;
opacity: 0.6;
background-color: #eee;
color: #888;
pointer-events: none;
}
button.custom.iconifiable > .fa {
button.custom.iconifiable > .fa,
button.custom.iconifiable > .fa-icon {
padding-right: 0.5em;
}
body[dir="rtl"] button.custom.iconifiable > .fa {
body[dir="rtl"] button.custom.iconifiable > .fa,
body[dir="rtl"] button.custom.iconifiable > .fa-icon {
padding-left: 0.5em;
}
.hidden {
@ -69,9 +68,34 @@ body[dir="rtl"] button.custom.iconifiable > .fa {
visibility: hidden;
width: 0;
}
label {
align-items: center;
display: inline-flex;
}
input[type="checkbox"] {
margin: 0;
margin-inline-start: 0.4em;
-webkit-margin-start: 0.4em;
margin-inline-end: 0.4em;
-webkit-margin-end: 0.4em;
}
.ul {
margin: 0.5em 0;
}
.li {
align-items: center;
display: flex;
margin: 0.5em 0;
}
.liul {
margin: 0.5em 0;
margin-inline-start: 2em;
-webkit-margin-start: 2em;
}
@media (max-width: 640px) {
button.custom.iconifiable > .fa {
button.custom.iconifiable > .fa,
button.custom.iconifiable > .fa-icon {
font-size: 120%;
padding: 0;
}
button.custom.iconifiable > [data-i18n] {

59
src/css/dashboard-common.css
View file

@ -2,6 +2,7 @@ body {
background-color: #fff;
box-sizing: border-box;
color: #20123a;
fill: #20123a;
margin: 0;
padding: 0;
}
@ -26,14 +27,23 @@ h3 {
a {
text-decoration: none;
}
a.info {
color: black;
opacity: 0.3;
.fa.info,
.fa-icon.info {
color: #888;
fill: #888;
font-size: 110%;
}
a.info:hover {
opacity: 0.9
.fa.info:hover,
.fa-icon.info:hover {
color: inherit;
fill: inherit;
}
a.info.important {
.fa.info.important,
.fa-icon.info.important {
color: #ffa280;
}
.fa.info.important:hover,
.fa-icon.info.important:hover {
color: orangered;
}
button {
@ -42,45 +52,12 @@ button {
input[type="number"] {
width: 5em;
}
input[type="checkbox"][disabled] + label {
opacity: 0.4;
input[type="checkbox"][disabled] + * {
color: #888;
}
.para {
width: 40em;
}
.whatisthis {
margin: 0 0 0 8px;
border: 0;
padding: 0 0 4px 0;
width: 16px;
height: 16px;
background: url('../img/help16.png') no-repeat;
cursor: pointer;
opacity: 0.5;
vertical-align: middle;
}
.whatisthis:hover {
opacity: 1.0;
}
.whatisthis-expandable {
margin: 0.5em 0 1em 1.25em;
padding: 0.5em;
display: none;
border: 1px dotted black;
background-color: #F8F8F8;
font-size: 13px;
white-space: pre-line;
}
.whatisthis-expandable > p {
margin-top: 1em;
margin-bottom: 0;
}
.whatisthis-expandable > p:first-child {
margin-top: 0;
}
.whatisthis-expandable.whatisthis-expanded {
display: block;
}
.warn {
margin: 0;
padding: 5px;

7
src/css/dashboard.css
View file

@ -21,13 +21,13 @@ html, body {
width: 100%;
z-index: 10;
}
#dashboard-nav > span.logo {
#dashboard-nav .logo {
align-items: center;
display: inline-flex;
padding: 0 0.5em;
width: 1.25em;
}
#dashboard-nav > span.logo > img {
#dashboard-nav .logo > img {
width: 100%;
}
.tabButton {
@ -83,4 +83,7 @@ body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
font: 16px/1.5 sans-serif;
overflow-x: auto;
}
#dashboard-nav .logo {
display: none;
}
}

13
src/css/dyna-rules.css
View file

@ -43,15 +43,20 @@ body {
#commitButton,
#diff.editing #exportButton,
#diff.editing #importButton {
opacity: 0.25;
background-color: #eee;
color: #aaa;
pointer-events: none;
}
#diff.dirty:not(.editing) #revertButton,
#diff.dirty:not(.editing) #commitButton,
#diff.editing {
opacity: 1;
#diff.dirty:not(.editing) #commitButton {
background-color: #e6e6e6;
color: #20123a;
pointer-events: auto;
}
#diff.dirty:not(.editing) #revertButton:hover,
#diff.dirty:not(.editing) #commitButton:hover {
background-color: #d4d4d4;
}
.codeMirrorContainer {
height: 60vh;

25
src/css/fa-icons.css
View file

@ -17,9 +17,8 @@
.disabled > .fa-icon,
.fa-icon[disabled],
[disabled] > .fa-icon {
color: #000;
fill: #000;
opacity: 0.25;
color: #888;
fill: #888;
stroke: #888;
pointer-events: none;
}
@ -47,6 +46,9 @@
.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);
@ -60,24 +62,32 @@
.fa-icon > .fa-icon_clipboard,
.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_font,
.fa-icon > .fa-icon_search {
.fa-icon > .fa-icon_search,
.fa-icon > .fa-icon_spinner,
.fa-icon > .fa-icon_unlink {
width: calc(1em * 1664 / 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_sliders {
width: calc(1em * 1536 / 1792);
@ -85,12 +95,17 @@
.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_lock,
.fa-icon > .fa-icon_unlock-alt {
width: calc(1em * 1152 / 1792);
}
.fa-icon > .fa-icon_double-angle-left {

6
src/css/settings.css
View file

@ -34,11 +34,11 @@ hr {
.entry > input[type="checkbox"] {
align-self: center;
}
#advanced-user-enabled ~ a.fa {
[href="advanced-settings.html"] {
display: none;
}
body.advancedUser #advanced-user-enabled ~ a.fa {
display: inline;
body.advancedUser [href="advanced-settings.html"] {
display: inline-flex;
}
@media (pointer: coarse) {

2
src/dyna-rules.html
View file

@ -8,6 +8,7 @@
<link rel="stylesheet" type="text/css" href="lib/codemirror/addon/merge/merge.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/fa-icons.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
<link rel="stylesheet" type="text/css" href="css/cloud-ui.css">
<link rel="stylesheet" type="text/css" href="css/dyna-rules.css">
@ -50,6 +51,7 @@
<script src="js/codemirror/ubo-dynamic-filtering.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>

14
src/img/fontawesome/fontawesome-defs.svg
View file

@ -30,30 +30,42 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68
<symbol id="bar-chart" viewBox="0 0 2048 1536"><path d="m 640,768 0,512 -256,0 0,-512 256,0 z m 384,-512 0,1024 -256,0 0,-1024 256,0 z m 1024,1152 0,128 L 0,1536 0,0 l 128,0 0,1408 1920,0 z m -640,-896 0,768 -256,0 0,-768 256,0 z m 384,-384 0,1152 -256,0 0,-1152 256,0 z"/></symbol>
<symbol id="bolt" viewBox="0 0 896 1664"><path d="m 885.08696,438 q 18,20 7,44 l -540,1157 q -13,25 -42,25 -4,0 -14,-2 -17,-5 -25.5,-19 -8.5,-14 -4.5,-30 l 197,-808 -406,101 q -4,1 -12,1 -18,0 -31,-11 Q -3.9130435,881 1.0869565,857 L 202.08696,32 q 4,-14 16,-23 12,-9 28,-9 l 328,0 q 19,0 32,12.5 13,12.5 13,29.5 0,8 -5,18 l -171,463 396,-98 q 8,-2 12,-2 19,0 34,15 z"/></symbol>
<symbol id="clipboard" viewBox="0 0 1792 1792"><path d="m 768,1664 896,0 0,-640 -416,0 q -40,0 -68,-28 -28,-28 -28,-68 l 0,-416 -384,0 0,1152 z m 256,-1440 0,-64 q 0,-13 -9.5,-22.5 Q 1005,128 992,128 l -704,0 q -13,0 -22.5,9.5 Q 256,147 256,160 l 0,64 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 l 704,0 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-22.5 z m 256,672 299,0 -299,-299 0,299 z m 512,128 0,672 q 0,40 -28,68 -28,28 -68,28 l -960,0 q -40,0 -68,-28 -28,-28 -28,-68 l 0,-160 -544,0 Q 56,1536 28,1508 0,1480 0,1440 L 0,96 Q 0,56 28,28 56,0 96,0 l 1088,0 q 40,0 68,28 28,28 28,68 l 0,328 q 21,13 36,28 l 408,408 q 28,28 48,76 20,48 20,88 z"/></symbol>
<symbol id="clock-o" viewBox="0 0 1536 1536"><path d="m 896,416 v 448 q 0,14 -9,23 -9,9 -23,9 H 544 q -14,0 -23,-9 -9,-9 -9,-23 v -64 q 0,-14 9,-23 9,-9 23,-9 H 768 V 416 q 0,-14 9,-23 9,-9 23,-9 h 64 q 14,0 23,9 9,9 9,23 z m 416,352 q 0,-148 -73,-273 -73,-125 -198,-198 -125,-73 -273,-73 -148,0 -273,73 -125,73 -198,198 -73,125 -73,273 0,148 73,273 73,125 198,198 125,73 273,73 148,0 273,-73 125,-73 198,-198 73,-125 73,-273 z m 224,0 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
<symbol id="cloud-download" viewBox="0 0 1920 1408"><path d="m 1280,800 q 0,-14 -9,-23 -9,-9 -23,-9 l -224,0 0,-352 q 0,-13 -9.5,-22.5 Q 1005,384 992,384 l -192,0 q -13,0 -22.5,9.5 Q 768,403 768,416 l 0,352 -224,0 q -13,0 -22.5,9.5 -9.5,9.5 -9.5,22.5 0,14 9,23 l 352,352 q 9,9 23,9 14,0 23,-9 l 351,-351 q 10,-12 10,-24 z m 640,224 q 0,159 -112.5,271.5 Q 1695,1408 1536,1408 l -1088,0 Q 263,1408 131.5,1276.5 0,1145 0,960 0,830 70,720 140,610 258,555 256,525 256,512 256,300 406,150 556,0 768,0 q 156,0 285.5,87 129.5,87 188.5,231 71,-62 166,-62 106,0 181,75 75,75 75,181 0,76 -41,138 130,31 213.5,135.5 Q 1920,890 1920,1024 Z"/></symbol>
<symbol id="cloud-upload" viewBox="0 0 1920 1408"><path d="m 1280,736 q 0,-14 -9,-23 L 919,361 q -9,-9 -23,-9 -14,0 -23,9 L 522,712 q -10,12 -10,24 0,14 9,23 9,9 23,9 l 224,0 0,352 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 l 192,0 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-22.5 l 0,-352 224,0 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-22.5 z m 640,288 q 0,159 -112.5,271.5 Q 1695,1408 1536,1408 l -1088,0 Q 263,1408 131.5,1276.5 0,1145 0,960 0,830 70,720 140,610 258,555 256,525 256,512 256,300 406,150 556,0 768,0 q 156,0 285.5,87 129.5,87 188.5,231 71,-62 166,-62 106,0 181,75 75,75 75,181 0,76 -41,138 130,31 213.5,135.5 Q 1920,890 1920,1024 Z"/></symbol>
<symbol id="check" viewBox="0 0 1550 1188"><path d="m 1550,232 q 0,40 -28,68 l -724,724 -136,136 q -28,28 -68,28 -40,0 -68,-28 L 390,1024 28,662 Q 0,634 0,594 0,554 28,526 L 164,390 q 28,-28 68,-28 40,0 68,28 L 594,685 1250,28 q 28,-28 68,-28 40,0 68,28 l 136,136 q 28,28 28,68 z"/></symbol>
<symbol id="code" viewBox="0 0 1830 1373"><path d="m 572,1125.5 -50,50 q -10,10 -23,10 -13,0 -23,-10 l -466,-466 q -10,-10 -10,-23 0,-13 10,-23 l 466,-466 q 10,-10 23,-10 13,0 23,10 l 50,50 q 10,10 10,23 0,13 -10,23 l -393,393 393,393 q 10,10 10,23 0,13 -10,23 z M 1163,58.476203 790,1349.4762 q -4,13 -15.5,19.5 -11.5,6.5 -23.5,2.5 l -62,-17 q -13,-4 -19.5,-15.5 -6.5,-11.5 -2.5,-24.5 L 1040,23.5 q 4,-13 15.5,-19.5 11.5,-6.5 23.5,-2.5 l 62,17 q 13,4 19.5,15.5 6.5,11.5 2.5,24.5 z m 657,651 -466,466 q -10,10 -23,10 -13,0 -23,-10 l -50,-50 q -10,-10 -10,-23 0,-13 10,-23 l 393,-393 -393,-393 q -10,-10 -10,-23 0,-13 10,-23 l 50,-50 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 0,13 -10,23 z"/></symbol>
<symbol id="cog" viewBox="0 0 1536 1536"><path d="m 1024,768 q 0,-106 -75,-181 -75,-75 -181,-75 -106,0 -181,75 -75,75 -75,181 0,106 75,181 75,75 181,75 106,0 181,-75 75,-75 75,-181 z m 512,-109 0,222 q 0,12 -8,23 -8,11 -20,13 l -185,28 q -19,54 -39,91 35,50 107,138 10,12 10,25 0,13 -9,23 -27,37 -99,108 -72,71 -94,71 -12,0 -26,-9 l -138,-108 q -44,23 -91,38 -16,136 -29,186 -7,28 -36,28 l -222,0 q -14,0 -24.5,-8.5 Q 622,1519 621,1506 l -28,-184 q -49,-16 -90,-37 l -141,107 q -10,9 -25,9 -14,0 -25,-11 -126,-114 -165,-168 -7,-10 -7,-23 0,-12 8,-23 15,-21 51,-66.5 36,-45.5 54,-70.5 -27,-50 -41,-99 L 29,913 Q 16,911 8,900.5 0,890 0,877 L 0,655 q 0,-12 8,-23 8,-11 19,-13 l 186,-28 q 14,-46 39,-92 -40,-57 -107,-138 -10,-12 -10,-24 0,-10 9,-23 26,-36 98.5,-107.5 Q 315,135 337,135 q 13,0 26,10 L 501,252 Q 545,229 592,214 608,78 621,28 628,0 657,0 L 879,0 Q 893,0 903.5,8.5 914,17 915,30 l 28,184 q 49,16 90,37 l 142,-107 q 9,-9 24,-9 13,0 25,10 129,119 165,170 7,8 7,22 0,12 -8,23 -15,21 -51,66.5 -36,45.5 -54,70.5 26,50 41,98 l 183,28 q 13,2 21,12.5 8,10.5 8,23.5 z"/></symbol>
<symbol id="cogs" viewBox="0 0 1920 1761"><path d="m 896,880 q 0,-106 -75,-181 -75,-75 -181,-75 -106,0 -181,75 -75,75 -75,181 0,106 75,181 75,75 181,75 106,0 181,-75 75,-75 75,-181 z m 768,512 q 0,-52 -38,-90 -38,-38 -90,-38 -52,0 -90,38 -38,38 -38,90 0,53 37.5,90.5 37.5,37.5 90.5,37.5 53,0 90.5,-37.5 37.5,-37.5 37.5,-90.5 z m 0,-1024 q 0,-52 -38,-90 -38,-38 -90,-38 -52,0 -90,38 -38,38 -38,90 0,53 37.5,90.5 37.5,37.5 90.5,37.5 53,0 90.5,-37.5 Q 1664,421 1664,368 Z m -384,421 v 185 q 0,10 -7,19.5 -7,9.5 -16,10.5 l -155,24 q -11,35 -32,76 34,48 90,115 7,11 7,20 0,12 -7,19 -23,30 -82.5,89.5 -59.5,59.5 -78.5,59.5 -11,0 -21,-7 l -115,-90 q -37,19 -77,31 -11,108 -23,155 -7,24 -30,24 H 547 q -11,0 -20,-7.5 -9,-7.5 -10,-17.5 l -23,-153 q -34,-10 -75,-31 l -118,89 q -7,7 -20,7 -11,0 -21,-8 -144,-133 -144,-160 0,-9 7,-19 10,-14 41,-53 31,-39 47,-61 -23,-44 -35,-82 L 24,1000 Q 14,999 7,990.5 0,982 0,971 V 786 Q 0,776 7,766.5 14,757 23,756 l 155,-24 q 11,-35 32,-76 -34,-48 -90,-115 -7,-11 -7,-20 0,-12 7,-20 22,-30 82,-89 60,-59 79,-59 11,0 21,7 l 115,90 q 34,-18 77,-32 11,-108 23,-154 7,-24 30,-24 h 186 q 11,0 20,7.5 9,7.5 10,17.5 l 23,153 q 34,10 75,31 l 118,-89 q 8,-7 20,-7 11,0 21,8 144,133 144,160 0,8 -7,19 -12,16 -42,54 -30,38 -45,60 23,48 34,82 l 152,23 q 10,2 17,10.5 7,8.5 7,19.5 z m 640,533 v 140 q 0,16 -149,31 -12,27 -30,52 51,113 51,138 0,4 -4,7 -122,71 -124,71 -8,0 -46,-47 -38,-47 -52,-68 -20,2 -30,2 -10,0 -30,-2 -14,21 -52,68 -38,47 -46,47 -2,0 -124,-71 -4,-3 -4,-7 0,-25 51,-138 -18,-25 -30,-52 -149,-15 -149,-31 v -140 q 0,-16 149,-31 13,-29 30,-52 -51,-113 -51,-138 0,-4 4,-7 4,-2 35,-20 31,-18 59,-34 28,-16 30,-16 8,0 46,46.5 38,46.5 52,67.5 20,-2 30,-2 10,0 30,2 51,-71 92,-112 l 6,-2 q 4,0 124,70 4,3 4,7 0,25 -51,138 17,23 30,52 149,15 149,31 z m 0,-1024 v 140 q 0,16 -149,31 -12,27 -30,52 51,113 51,138 0,4 -4,7 -122,71 -124,71 -8,0 -46,-47 -38,-47 -52,-68 -20,2 -30,2 -10,0 -30,-2 -14,21 -52,68 -38,47 -46,47 -2,0 -124,-71 -4,-3 -4,-7 0,-25 51,-138 -18,-25 -30,-52 -149,-15 -149,-31 V 298 q 0,-16 149,-31 13,-29 30,-52 -51,-113 -51,-138 0,-4 4,-7 4,-2 35,-20 31,-18 59,-34 28,-16 30,-16 8,0 46,46.5 38,46.5 52,67.5 20,-2 30,-2 10,0 30,2 51,-71 92,-112 l 6,-2 q 4,0 124,70 4,3 4,7 0,25 -51,138 17,23 30,52 149,15 149,31 z"/></symbol>
<symbol id="double-angle-left" viewBox="0 0 966 998"><path d="m 582,915 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 10,522 Q 0,512 0,499 0,486 10,476 L 476,10 q 10,-10 23,-10 13,0 23,10 l 50,50 q 10,10 10,23 0,13 -10,23 L 179,499 572,892 q 10,10 10,23 z m 384,0 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 394,522 q -10,-10 -10,-23 0,-13 10,-23 L 860,10 q 10,-10 23,-10 13,0 23,10 l 50,50 q 10,10 10,23 0,13 -10,23 L 563,499 956,892 q 10,10 10,23 z"/></symbol>
<symbol id="double-angle-up" viewBox="0 0 998 966"><path d="m 998,883 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 499,563 106,956 Q 96,966 83,966 70,966 60,956 L 10,906 Q 0,896 0,883 0,870 10,860 L 476,394 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 z m 0,-384 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 499,179 106,572 Q 96,582 83,582 70,582 60,572 L 10,522 Q 0,512 0,499 0,486 10,476 L 476,10 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 z"/></symbol>
<symbol id="eraser" viewBox="0 0 1920 1280"><path d="M 896,1152 1232,768 l -768,0 -336,384 768,0 z M 1909,75 q 15,34 9.5,71.5 Q 1913,184 1888,212 L 992,1236 q -38,44 -96,44 l -768,0 q -38,0 -69.5,-20.5 -31.5,-20.5 -47.5,-54.5 -15,-34 -9.5,-71.5 5.5,-37.5 30.5,-65.5 L 928,44 Q 966,0 1024,0 l 768,0 q 38,0 69.5,20.5 Q 1893,41 1909,75 Z"/></symbol>
<symbol id="exclamation-triangle" viewBox="0 0 1794 1664"><path d="m 1025.0139,1375 0,-190 q 0,-14 -9.5,-23.5 -9.5,-9.5 -22.5,-9.5 l -192,0 q -13,0 -22.5,9.5 -9.5,9.5 -9.5,23.5 l 0,190 q 0,14 9.5,23.5 9.5,9.5 22.5,9.5 l 192,0 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-23.5 z m -2,-374 18,-459 q 0,-12 -10,-19 -13,-11 -24,-11 l -220,0 q -11,0 -24,11 -10,7 -10,21 l 17,457 q 0,10 10,16.5 10,6.5 24,6.5 l 185,0 q 14,0 23.5,-6.5 9.5,-6.5 10.5,-16.5 z m -14,-934 768,1408 q 35,63 -2,126 -17,29 -46.5,46 -29.5,17 -63.5,17 l -1536,0 q -34,0 -63.5,-17 -29.5,-17 -46.5,-46 -37,-63 -2,-126 L 785.01389,67 q 17,-31 47,-49 30,-18 65,-18 35,0 65,18 30,18 47,49 z"/></symbol>
<symbol id="external-link" viewBox="0 0 1792 1536"><path d="m 1408,928 0,320 q 0,119 -84.5,203.5 Q 1239,1536 1120,1536 l -832,0 Q 169,1536 84.5,1451.5 0,1367 0,1248 L 0,416 Q 0,297 84.5,212.5 169,128 288,128 l 704,0 q 14,0 23,9 9,9 9,23 l 0,64 q 0,14 -9,23 -9,9 -23,9 l -704,0 q -66,0 -113,47 -47,47 -47,113 l 0,832 q 0,66 47,113 47,47 113,47 l 832,0 q 66,0 113,-47 47,-47 47,-113 l 0,-320 q 0,-14 9,-23 9,-9 23,-9 l 64,0 q 14,0 23,9 9,9 9,23 z m 384,-864 0,512 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 L 1507,445 855,1097 q -10,10 -23,10 -13,0 -23,-10 L 695,983 q -10,-10 -10,-23 0,-13 10,-23 L 1347,285 1171,109 q -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 l 512,0 q 26,0 45,19 19,19 19,45 z" /></symbol>
<symbol id="eye-dropper" viewBox="0 0 1792 1792"><path d="m 1698,94 q 94,94 94,226.5 0,132.5 -94,225.5 l -225,223 104,104 q 10,10 10,23 0,13 -10,23 l -210,210 q -10,10 -23,10 -13,0 -23,-10 l -105,-105 -603,603 q -37,37 -90,37 l -203,0 -256,128 -64,-64 128,-256 0,-203 q 0,-53 37,-90 L 768,576 663,471 q -10,-10 -10,-23 0,-13 10,-23 L 873,215 q 10,-10 23,-10 13,0 23,10 L 1023,319 1246,94 Q 1339,0 1471.5,0 1604,0 1698,94 Z M 512,1472 1088,896 896,704 l -576,576 0,192 192,0 z"/></symbol>
<symbol id="eye-open" viewBox="0 0 1792 1152"><path d="m 1664,576 q -152,-236 -381,-353 61,104 61,225 0,185 -131.5,316.5 Q 1081,896 896,896 711,896 579.5,764.5 448,633 448,448 448,327 509,223 280,340 128,576 261,781 461.5,902.5 662,1024 896,1024 1130,1024 1330.5,902.5 1531,781 1664,576 Z M 944,192 q 0,-20 -14,-34 -14,-14 -34,-14 -125,0 -214.5,89.5 Q 592,323 592,448 q 0,20 14,34 14,14 34,14 20,0 34,-14 14,-14 14,-34 0,-86 61,-147 61,-61 147,-61 20,0 34,-14 14,-14 14,-34 z m 848,384 q 0,34 -20,69 -140,230 -376.5,368.5 Q 1159,1152 896,1152 633,1152 396.5,1013 160,874 20,645 0,610 0,576 0,542 20,507 160,278 396.5,139 633,0 896,0 q 263,0 499.5,139 236.5,139 376.5,368 20,35 20,69 z"/></symbol>
<symbol id="eye-slash" viewBox="0 0 1792 1344"><path d="M 555,1047 633,906 Q 546,843 497,747 448,651 448,544 448,423 509,319 280,436 128,672 295,930 555,1047 Z M 944,288 q 0,-20 -14,-34 -14,-14 -34,-14 -125,0 -214.5,89.5 Q 592,419 592,544 q 0,20 14,34 14,14 34,14 20,0 34,-14 14,-14 14,-34 0,-86 61,-147 61,-61 147,-61 20,0 34,-14 14,-14 14,-34 z M 1307,97 q 0,7 -1,9 -106,189 -316,567 -210,378 -315,566 l -49,89 q -10,16 -28,16 -12,0 -134,-70 -16,-10 -16,-28 0,-12 44,-87 Q 349,1094 228.5,986 108,878 20,741 0,710 0,672 0,634 20,603 173,368 400,232 627,96 896,96 q 89,0 180,17 l 54,-97 q 10,-16 28,-16 5,0 18,6 13,6 31,15.5 18,9.5 33,18.5 15,9 31.5,18.5 16.5,9.5 19.5,11.5 16,10 16,27 z m 37,447 q 0,139 -79,253.5 Q 1186,912 1056,962 l 280,-502 q 8,45 8,84 z m 448,128 q 0,35 -20,69 -39,64 -109,145 -150,172 -347.5,267 -197.5,95 -419.5,95 l 74,-132 Q 1182,1098 1362.5,979 1543,860 1664,672 1549,493 1382,378 l 63,-112 q 95,64 182.5,153 87.5,89 144.5,184 20,34 20,69 z"/></symbol>
<symbol id="files-o" viewBox="0 0 1792 1792"><path d="m 1696,384 q 40,0 68,28 28,28 28,68 l 0,1216 q 0,40 -28,68 -28,28 -68,28 l -960,0 q -40,0 -68,-28 -28,-28 -28,-68 l 0,-288 -544,0 Q 56,1408 28,1380 0,1352 0,1312 L 0,640 Q 0,600 20,552 40,504 68,476 L 476,68 Q 504,40 552,20 600,0 640,0 l 416,0 q 40,0 68,28 28,28 28,68 l 0,328 q 68,-40 128,-40 l 416,0 z m -544,213 -299,299 299,0 0,-299 z M 512,213 213,512 l 299,0 0,-299 z m 196,647 316,-316 0,-416 -384,0 0,416 q 0,40 -28,68 -28,28 -68,28 l -416,0 0,640 512,0 0,-256 q 0,-40 20,-88 20,-48 48,-76 z m 956,804 0,-1152 -384,0 0,416 q 0,40 -28,68 -28,28 -68,28 l -416,0 0,640 896,0 z"/></symbol>
<symbol id="film" viewBox="0 0 1920 1664"><path d="m 384,1472 0,-128 q 0,-26 -19,-45 -19,-19 -45,-19 l -128,0 q -26,0 -45,19 -19,19 -19,45 l 0,128 q 0,26 19,45 19,19 45,19 l 128,0 q 26,0 45,-19 19,-19 19,-45 z m 0,-384 0,-128 q 0,-26 -19,-45 -19,-19 -45,-19 l -128,0 q -26,0 -45,19 -19,19 -19,45 l 0,128 q 0,26 19,45 19,19 45,19 l 128,0 q 26,0 45,-19 19,-19 19,-45 z m 0,-384 0,-128 q 0,-26 -19,-45 -19,-19 -45,-19 l -128,0 q -26,0 -45,19 -19,19 -19,45 l 0,128 q 0,26 19,45 19,19 45,19 l 128,0 q 26,0 45,-19 19,-19 19,-45 z m 1024,768 0,-512 q 0,-26 -19,-45 -19,-19 -45,-19 l -768,0 q -26,0 -45,19 -19,19 -19,45 l 0,512 q 0,26 19,45 19,19 45,19 l 768,0 q 26,0 45,-19 19,-19 19,-45 z M 384,320 384,192 q 0,-26 -19,-45 -19,-19 -45,-19 l -128,0 q -26,0 -45,19 -19,19 -19,45 l 0,128 q 0,26 19,45 19,19 45,19 l 128,0 q 26,0 45,-19 19,-19 19,-45 z m 1408,1152 0,-128 q 0,-26 -19,-45 -19,-19 -45,-19 l -128,0 q -26,0 -45,19 -19,19 -19,45 l 0,128 q 0,26 19,45 19,19 45,19 l 128,0 q 26,0 45,-19 19,-19 19,-45 z m -384,-768 0,-512 q 0,-26 -19,-45 -19,-19 -45,-19 l -768,0 q -26,0 -45,19 -19,19 -19,45 l 0,512 q 0,26 19,45 19,19 45,19 l 768,0 q 26,0 45,-19 19,-19 19,-45 z m 384,384 0,-128 q 0,-26 -19,-45 -19,-19 -45,-19 l -128,0 q -26,0 -45,19 -19,19 -19,45 l 0,128 q 0,26 19,45 19,19 45,19 l 128,0 q 26,0 45,-19 19,-19 19,-45 z m 0,-384 0,-128 q 0,-26 -19,-45 -19,-19 -45,-19 l -128,0 q -26,0 -45,19 -19,19 -19,45 l 0,128 q 0,26 19,45 19,19 45,19 l 128,0 q 26,0 45,-19 19,-19 19,-45 z m 0,-384 0,-128 q 0,-26 -19,-45 -19,-19 -45,-19 l -128,0 q -26,0 -45,19 -19,19 -19,45 l 0,128 q 0,26 19,45 19,19 45,19 l 128,0 q 26,0 45,-19 19,-19 19,-45 z m 128,-160 0,1344 q 0,66 -47,113 -47,47 -113,47 l -1600,0 Q 94,1664 47,1617 0,1570 0,1504 L 0,160 Q 0,94 47,47 94,0 160,0 l 1600,0 q 66,0 113,47 47,47 47,113 z"/></symbol>
<symbol id="filter" viewBox="0 0 1410 1408"><path d="m 1404.0208,39 q 17,41 -14,70 l -493,493 0,742 q 0,42 -39,59 -13,5 -25,5 -27,0 -45,-19 l -256,-256 q -19,-19 -19,-45 l 0,-486 L 20.020833,109 q -31,-29 -14,-70 Q 23.020833,0 65.020833,0 L 1345.0208,0 q 42,0 59,39 z"/></symbol>
<symbol id="floppy-o" viewBox="0 0 1536 1536"><path d="m 384,1408 768,0 0,-384 -768,0 0,384 z m 896,0 128,0 0,-896 q 0,-14 -10,-38.5 Q 1388,449 1378,439 L 1097,158 q -10,-10 -34,-20 -24,-10 -39,-10 l 0,416 q 0,40 -28,68 -28,28 -68,28 l -576,0 q -40,0 -68,-28 -28,-28 -28,-68 l 0,-416 -128,0 0,1280 128,0 0,-416 q 0,-40 28,-68 28,-28 68,-28 l 832,0 q 40,0 68,28 28,28 28,68 l 0,416 z M 896,480 896,160 q 0,-13 -9.5,-22.5 Q 877,128 864,128 l -192,0 q -13,0 -22.5,9.5 Q 640,147 640,160 l 0,320 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 l 192,0 q 13,0 22.5,-9.5 Q 896,493 896,480 Z m 640,32 0,928 q 0,40 -28,68 -28,28 -68,28 L 96,1536 Q 56,1536 28,1508 0,1480 0,1440 L 0,96 Q 0,56 28,28 56,0 96,0 l 928,0 q 40,0 88,20 48,20 76,48 l 280,280 q 28,28 48,76 20,48 20,88 z"/></symbol>
<symbol id="font" viewBox="0 0 1664 1536"><path d="M 725,431 555,881 q 33,0 136.5,2 103.5,2 160.5,2 19,0 57,-2 Q 822,630 725,431 Z M 0,1536 2,1457 q 23,-7 56,-12.5 33,-5.5 57,-10.5 24,-5 49.5,-14.5 25.5,-9.5 44.5,-29 19,-19.5 31,-50.5 L 477,724 757,0 l 75,0 53,0 q 8,14 11,21 l 205,480 q 33,78 106,257.5 73,179.5 114,274.5 15,34 58,144.5 43,110.5 72,168.5 20,45 35,57 19,15 88,29.5 69,14.5 84,20.5 6,38 6,57 0,5 -0.5,13.5 -0.5,8.5 -0.5,12.5 -63,0 -190,-8 -127,-8 -191,-8 -76,0 -215,7 -139,7 -178,8 0,-43 4,-78 l 131,-28 q 1,0 12.5,-2.5 11.5,-2.5 15.5,-3.5 4,-1 14.5,-4.5 10.5,-3.5 15,-6.5 4.5,-3 11,-8 6.5,-5 9,-11 2.5,-6 2.5,-14 0,-16 -31,-96.5 -31,-80.5 -72,-177.5 -41,-97 -42,-100 l -450,-2 q -26,58 -76.5,195.5 Q 382,1336 382,1361 q 0,22 14,37.5 14,15.5 43.5,24.5 29.5,9 48.5,13.5 19,4.5 57,8.5 38,4 41,4 1,19 1,58 0,9 -2,27 -58,0 -174.5,-10 -116.5,-10 -174.5,-10 -8,0 -26.5,4 -18.5,4 -21.5,4 -80,14 -188,14 z"/></symbol>
<symbol id="home" viewBox="0 0 1612 1283"><path d="m 1382.1111,739 0,480 q 0,26 -19,45 -19,19 -45,19 l -383.99999,0 0,-384 -256,0 0,384 -384,0 q -26,0 -45,-19 -19,-19 -19,-45 l 0,-480 q 0,-1 0.5,-3 0.5,-2 0.5,-3 l 575,-474 574.99999,474 q 1,2 1,6 z m 223,-69 -62,74 q -8,9 -21,11 l -3,0 q -13,0 -21,-7 l -691.99999,-577 -692,577 q -12,8 -23.999999,7 -13,-2 -21,-11 L 7.1111111,670 Q -0.88888889,660 0.11111111,646.5 1.1111111,633 11.111111,625 L 730.11111,26 q 32,-26 76,-26 44,0 76,26 l 243.99999,204 0,-195 q 0,-14 9,-23 9,-9 23,-9 l 192,0 q 14,0 23,9 9,9 9,23 l 0,408 219,182 q 10,8 11,21.5 1,13.5 -7,23.5 z"/></symbol>
<symbol id="home" viewBox="0 0 1612 1283"><path d="m 1382.1111,739 v 480 q 0,26 -19,45 -19,19 -45,19 H 934.11111 V 899 h -256 v 384 h -384 q -26,0 -45,-19 -19,-19 -19,-45 V 739 q 0,-1 0.5,-3 0.5,-2 0.5,-3 l 575,-474 574.99999,474 q 1,2 1,6 z m 223,-69 -62,74 q -8,9 -21,11 h -3 q -13,0 -21,-7 l -691.99999,-577 -692,577 q -12,8 -23.999999,7 -13,-2 -21,-11 L 7.1111111,670 Q -0.88888889,660 0.11111111,646.5 1.1111111,633 11.111111,625 L 730.11111,26 q 32,-26 76,-26 44,0 76,26 L 1126.1111,230 V 35 q 0,-14 9,-23 9,-9 23,-9 h 192 q 14,0 23,9 9,9 9,23 v 408 l 219,182 q 10,8 11,21.5 1,13.5 -7,23.5 z"/></symbol>
<symbol id="info-circle" viewBox="0 0 1536 1536"><path d="m 1024,1248 0,-160 q 0,-14 -9,-23 -9,-9 -23,-9 l -96,0 0,-512 q 0,-14 -9,-23 -9,-9 -23,-9 l -320,0 q -14,0 -23,9 -9,9 -9,23 l 0,160 q 0,14 9,23 9,9 23,9 l 96,0 0,320 -96,0 q -14,0 -23,9 -9,9 -9,23 l 0,160 q 0,14 9,23 9,9 23,9 l 448,0 q 14,0 23,-9 9,-9 9,-23 z M 896,352 896,192 q 0,-14 -9,-23 -9,-9 -23,-9 l -192,0 q -14,0 -23,9 -9,9 -9,23 l 0,160 q 0,14 9,23 9,9 23,9 l 192,0 q 14,0 23,-9 9,-9 9,-23 z m 640,416 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
<symbol id="list-alt" viewBox="0 0 1792 1408"><path d="m 384,1056 0,64 q 0,13 -9.5,22.5 -9.5,9.5 -22.5,9.5 l -64,0 q -13,0 -22.5,-9.5 Q 256,1133 256,1120 l 0,-64 q 0,-13 9.5,-22.5 9.5,-9.5 22.5,-9.5 l 64,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 0,-256 0,64 q 0,13 -9.5,22.5 Q 365,896 352,896 l -64,0 q -13,0 -22.5,-9.5 Q 256,877 256,864 l 0,-64 q 0,-13 9.5,-22.5 Q 275,768 288,768 l 64,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 0,-256 0,64 q 0,13 -9.5,22.5 Q 365,640 352,640 l -64,0 q -13,0 -22.5,-9.5 Q 256,621 256,608 l 0,-64 q 0,-13 9.5,-22.5 Q 275,512 288,512 l 64,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 1152,512 0,64 q 0,13 -9.5,22.5 -9.5,9.5 -22.5,9.5 l -960,0 q -13,0 -22.5,-9.5 Q 512,1133 512,1120 l 0,-64 q 0,-13 9.5,-22.5 9.5,-9.5 22.5,-9.5 l 960,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 0,-256 0,64 q 0,13 -9.5,22.5 -9.5,9.5 -22.5,9.5 l -960,0 q -13,0 -22.5,-9.5 Q 512,877 512,864 l 0,-64 q 0,-13 9.5,-22.5 Q 531,768 544,768 l 960,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 0,-256 0,64 q 0,13 -9.5,22.5 -9.5,9.5 -22.5,9.5 l -960,0 q -13,0 -22.5,-9.5 Q 512,621 512,608 l 0,-64 q 0,-13 9.5,-22.5 Q 531,512 544,512 l 960,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 128,704 0,-832 q 0,-13 -9.5,-22.5 Q 1645,384 1632,384 l -1472,0 q -13,0 -22.5,9.5 Q 128,403 128,416 l 0,832 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 l 1472,0 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-22.5 z m 128,-1088 0,1088 q 0,66 -47,113 -47,47 -113,47 l -1472,0 Q 94,1408 47,1361 0,1314 0,1248 L 0,160 Q 0,94 47,47 94,0 160,0 l 1472,0 q 66,0 113,47 47,47 47,113 z"/></symbol>
<symbol id="lock" viewBox="0 0 1152 1408"><path d="m 320,640 512,0 0,-192 q 0,-106 -75,-181 -75,-75 -181,-75 -106,0 -181,75 -75,75 -75,181 l 0,192 z m 832,96 0,576 q 0,40 -28,68 -28,28 -68,28 l -960,0 Q 56,1408 28,1380 0,1352 0,1312 L 0,736 q 0,-40 28,-68 28,-28 68,-28 l 32,0 0,-192 Q 128,264 260,132 392,0 576,0 q 184,0 316,132 132,132 132,316 l 0,192 32,0 q 40,0 68,28 28,28 28,68 z"/></symbol>
<symbol id="pause-circle-o" viewBox="0 0 1536 1536"><path d="M 768,0 Q 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 1536,977 1433,1153.5 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 Z m 0,1312 q 148,0 273,-73 125,-73 198,-198 73,-125 73,-273 0,-148 -73,-273 -73,-125 -198,-198 -125,-73 -273,-73 -148,0 -273,73 -125,73 -198,198 -73,125 -73,273 0,148 73,273 73,125 198,198 125,73 273,73 z m 96,-224 q -14,0 -23,-9 -9,-9 -9,-23 l 0,-576 q 0,-14 9,-23 9,-9 23,-9 l 192,0 q 14,0 23,9 9,9 9,23 l 0,576 q 0,14 -9,23 -9,9 -23,9 l -192,0 z m -384,0 q -14,0 -23,-9 -9,-9 -9,-23 l 0,-576 q 0,-14 9,-23 9,-9 23,-9 l 192,0 q 14,0 23,9 9,9 9,23 l 0,576 q 0,14 -9,23 -9,9 -23,9 l -192,0 z"/></symbol>
<symbol id="play-circle-o" viewBox="0 0 1536 1536"><path d="m 1184,768 q 0,37 -32,55 l -544,320 q -15,9 -32,9 -16,0 -32,-8 -32,-19 -32,-56 l 0,-640 q 0,-37 32,-56 33,-18 64,1 l 544,320 q 32,18 32,55 z m 128,0 q 0,-148 -73,-273 -73,-125 -198,-198 -125,-73 -273,-73 -148,0 -273,73 -125,73 -198,198 -73,125 -73,273 0,148 73,273 73,125 198,198 125,73 273,73 148,0 273,-73 125,-73 198,-198 73,-125 73,-273 z m 224,0 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
<symbol id="plus" viewBox="0 0 1408 1408"><path d="m 1408,608 0,192 q 0,40 -28,68 -28,28 -68,28 l -416,0 0,416 q 0,40 -28,68 -28,28 -68,28 l -192,0 q -40,0 -68,-28 -28,-28 -28,-68 l 0,-416 -416,0 Q 56,896 28,868 0,840 0,800 L 0,608 q 0,-40 28,-68 28,-28 68,-28 l 416,0 0,-416 Q 512,56 540,28 568,0 608,0 l 192,0 q 40,0 68,28 28,28 28,68 l 0,416 416,0 q 40,0 68,28 28,28 28,68 z"/></symbol>
<symbol id="power-off" viewBox="0 0 1536 1664"><path d="m 1536,896 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 328,1542 225,1439 122,1336 61,1194 0,1052 0,896 0,714 80.5,553 161,392 307,283 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 503,455 461,487 363,561 309.5,668 256,775 256,896 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1061,1327 1130,1258 1199,1189 1239.5,1094.5 1280,1000 1280,896 1280,775 1226.5,668 1173,561 1075,487 1033,455 1025.5,402.5 1018,350 1050,308 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z m -640,-768 0,640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 l 0,-640 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z"/></symbol>
<symbol id="question-circle" viewBox="0 0 1536 1536"><path d="m 896,1248 v -192 q 0,-14 -9,-23 -9,-9 -23,-9 H 672 q -14,0 -23,9 -9,9 -9,23 v 192 q 0,14 9,23 9,9 23,9 h 192 q 14,0 23,-9 9,-9 9,-23 z m 256,-672 q 0,-88 -55.5,-163 Q 1041,338 958,297 875,256 788,256 q -243,0 -371,213 -15,24 8,42 l 132,100 q 7,6 19,6 16,0 25,-12 53,-68 86,-92 34,-24 86,-24 48,0 85.5,26 37.5,26 37.5,59 0,38 -20,61 -20,23 -68,45 -63,28 -115.5,86.5 Q 640,825 640,892 v 36 q 0,14 9,23 9,9 23,9 h 192 q 14,0 23,-9 9,-9 9,-23 0,-19 21.5,-49.5 Q 939,848 972,829 q 32,-18 49,-28.5 17,-10.5 46,-35 29,-24.5 44.5,-48 15.5,-23.5 28,-60.5 12.5,-37 12.5,-81 z m 384,192 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
<symbol id="refresh" viewBox="0 0 1536 1536"><path d="m 1511,928 q 0,5 -1,7 -64,268 -268,434.5 Q 1038,1536 764,1536 618,1536 481.5,1481 345,1426 238,1324 l -129,129 q -19,19 -45,19 -26,0 -45,-19 Q 0,1434 0,1408 L 0,960 q 0,-26 19,-45 19,-19 45,-19 l 448,0 q 26,0 45,19 19,19 19,45 0,26 -19,45 l -137,137 q 71,66 161,102 90,36 187,36 134,0 250,-65 116,-65 186,-179 11,-17 53,-117 8,-23 30,-23 l 192,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 25,-800 0,448 q 0,26 -19,45 -19,19 -45,19 l -448,0 q -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 L 1117,393 Q 969,256 768,256 q -134,0 -250,65 -116,65 -186,179 -11,17 -53,117 -8,23 -30,23 L 50,640 Q 37,640 27.5,630.5 18,621 18,608 l 0,-7 Q 83,333 288,166.5 493,0 768,0 914,0 1052,55.5 1190,111 1297,212 L 1427,83 q 19,-19 45,-19 26,0 45,19 19,19 19,45 z"/></symbol>
<symbol id="search" viewBox="0 0 1664 1664"><path d="M 1152,704 Q 1152,519 1020.5,387.5 889,256 704,256 519,256 387.5,387.5 256,519 256,704 256,889 387.5,1020.5 519,1152 704,1152 889,1152 1020.5,1020.5 1152,889 1152,704 Z m 512,832 q 0,52 -38,90 -38,38 -90,38 -54,0 -90,-38 L 1103,1284 Q 924,1408 704,1408 561,1408 430.5,1352.5 300,1297 205.5,1202.5 111,1108 55.5,977.5 0,847 0,704 0,561 55.5,430.5 111,300 205.5,205.5 300,111 430.5,55.5 561,0 704,0 q 143,0 273.5,55.5 130.5,55.5 225,150 94.5,94.5 150,225 55.5,130.5 55.5,273.5 0,220 -124,399 l 343,343 q 37,37 37,90 z"/></symbol>
<symbol id="sliders" viewBox="0 0 1536 1408"><path d="m 352,1152 0,128 -352,0 0,-128 352,0 z m 352,-128 q 26,0 45,19 19,19 19,45 l 0,256 q 0,26 -19,45 -19,19 -45,19 l -256,0 q -26,0 -45,-19 -19,-19 -19,-45 l 0,-256 q 0,-26 19,-45 19,-19 45,-19 l 256,0 z m 160,-384 0,128 -864,0 0,-128 864,0 z m -640,-512 0,128 -224,0 0,-128 224,0 z m 1312,1024 0,128 -736,0 0,-128 736,0 z M 576,0 q 26,0 45,19 19,19 19,45 l 0,256 q 0,26 -19,45 -19,19 -45,19 l -256,0 q -26,0 -45,-19 -19,-19 -19,-45 L 256,64 Q 256,38 275,19 294,0 320,0 l 256,0 z m 640,512 q 26,0 45,19 19,19 19,45 l 0,256 q 0,26 -19,45 -19,19 -45,19 l -256,0 q -26,0 -45,-19 -19,-19 -19,-45 l 0,-256 q 0,-26 19,-45 19,-19 45,-19 l 256,0 z m 320,128 0,128 -224,0 0,-128 224,0 z m 0,-512 0,128 -864,0 0,-128 864,0 z"/></symbol>
<symbol id="spinner" viewBox="0 0 1664 1728"><path d="m 462,1394 q 0,53 -37.5,90.5 -37.5,37.5 -90.5,37.5 -52,0 -90,-38 -38,-38 -38,-90 0,-53 37.5,-90.5 37.5,-37.5 90.5,-37.5 53,0 90.5,37.5 37.5,37.5 37.5,90.5 z m 498,206 q 0,53 -37.5,90.5 Q 885,1728 832,1728 779,1728 741.5,1690.5 704,1653 704,1600 q 0,-53 37.5,-90.5 37.5,-37.5 90.5,-37.5 53,0 90.5,37.5 Q 960,1547 960,1600 Z M 256,896 q 0,53 -37.5,90.5 Q 181,1024 128,1024 75,1024 37.5,986.5 0,949 0,896 0,843 37.5,805.5 75,768 128,768 q 53,0 90.5,37.5 Q 256,843 256,896 Z m 1202,498 q 0,52 -38,90 -38,38 -90,38 -53,0 -90.5,-37.5 -37.5,-37.5 -37.5,-90.5 0,-53 37.5,-90.5 37.5,-37.5 90.5,-37.5 53,0 90.5,37.5 37.5,37.5 37.5,90.5 z M 494,398 q 0,66 -47,113 -47,47 -113,47 -66,0 -113,-47 -47,-47 -47,-113 0,-66 47,-113 47,-47 113,-47 66,0 113,47 47,47 47,113 z m 1170,498 q 0,53 -37.5,90.5 -37.5,37.5 -90.5,37.5 -53,0 -90.5,-37.5 Q 1408,949 1408,896 q 0,-53 37.5,-90.5 37.5,-37.5 90.5,-37.5 53,0 90.5,37.5 Q 1664,843 1664,896 Z M 1024,192 q 0,80 -56,136 -56,56 -136,56 -80,0 -136,-56 -56,-56 -56,-136 0,-80 56,-136 56,-56 136,-56 80,0 136,56 56,56 56,136 z m 530,206 q 0,93 -66,158.5 -66,65.5 -158,65.5 -93,0 -158.5,-65.5 Q 1106,491 1106,398 q 0,-92 65.5,-158 65.5,-66 158.5,-66 92,0 158,66 66,66 66,158 z"/></symbol>
<symbol id="times" viewBox="0 0 1188 1188"><path d="m 1188,956 q 0,40 -28,68 l -136,136 q -28,28 -68,28 -40,0 -68,-28 L 594,866 300,1160 q -28,28 -68,28 -40,0 -68,-28 L 28,1024 Q 0,996 0,956 0,916 28,888 L 322,594 28,300 Q 0,272 0,232 0,192 28,164 L 164,28 Q 192,0 232,0 272,0 300,28 L 594,322 888,28 q 28,-28 68,-28 40,0 68,28 l 136,136 q 28,28 28,68 0,40 -28,68 l -294,294 294,294 q 28,28 28,68 z"/></symbol>
<symbol id="trash-o" viewBox="0 0 1408 1536"><path d="m 512,608 v 576 q 0,14 -9,23 -9,9 -23,9 h -64 q -14,0 -23,-9 -9,-9 -9,-23 V 608 q 0,-14 9,-23 9,-9 23,-9 h 64 q 14,0 23,9 9,9 9,23 z m 256,0 v 576 q 0,14 -9,23 -9,9 -23,9 h -64 q -14,0 -23,-9 -9,-9 -9,-23 V 608 q 0,-14 9,-23 9,-9 23,-9 h 64 q 14,0 23,9 9,9 9,23 z m 256,0 v 576 q 0,14 -9,23 -9,9 -23,9 h -64 q -14,0 -23,-9 -9,-9 -9,-23 V 608 q 0,-14 9,-23 9,-9 23,-9 h 64 q 14,0 23,9 9,9 9,23 z m 128,724 V 384 H 256 v 948 q 0,22 7,40.5 7,18.5 14.5,27 7.5,8.5 10.5,8.5 h 832 q 3,0 10.5,-8.5 7.5,-8.5 14.5,-27 7,-18.5 7,-40.5 z M 480,256 H 928 L 880,139 q -7,-9 -17,-11 H 546 q -10,2 -17,11 z m 928,32 v 64 q 0,14 -9,23 -9,9 -23,9 h -96 v 948 q 0,83 -47,143.5 -47,60.5 -113,60.5 H 288 q -66,0 -113,-58.5 Q 128,1419 128,1336 V 384 H 32 Q 18,384 9,375 0,366 0,352 v -64 q 0,-14 9,-23 9,-9 23,-9 H 341 L 411,89 Q 426,52 465,26 504,0 544,0 h 320 q 40,0 79,26 39,26 54,63 l 70,167 h 309 q 14,0 23,9 9,9 9,23 z"/></symbol>
<symbol id="unlink" viewBox="0 0 1664 1664"><path d="m 439,1271 -256,256 q -11,9 -23,9 -12,0 -23,-9 -9,-10 -9,-23 0,-13 9,-23 l 256,-256 q 10,-9 23,-9 13,0 23,9 9,10 9,23 0,13 -9,23 z m 169,41 v 320 q 0,14 -9,23 -9,9 -23,9 -14,0 -23,-9 -9,-9 -9,-23 v -320 q 0,-14 9,-23 9,-9 23,-9 14,0 23,9 9,9 9,23 z M 384,1088 q 0,14 -9,23 -9,9 -23,9 H 32 q -14,0 -23,-9 -9,-9 -9,-23 0,-14 9,-23 9,-9 23,-9 h 320 q 14,0 23,9 9,9 9,23 z m 1264,128 q 0,120 -85,203 l -147,146 q -83,83 -203,83 -121,0 -204,-85 L 675,1228 q -21,-21 -42,-56 l 239,-18 273,274 q 27,27 68,27.5 41,0.5 68,-26.5 l 147,-146 q 28,-28 28,-67 0,-40 -28,-68 l -274,-275 18,-239 q 35,21 56,42 l 336,336 q 84,86 84,204 z M 1031,492 792,510 519,236 q -28,-28 -68,-28 -39,0 -68,27 L 236,381 q -28,28 -28,67 0,40 28,68 l 274,274 -18,240 q -35,-21 -56,-42 L 100,652 Q 16,566 16,448 16,328 101,245 L 248,99 q 83,-83 203,-83 121,0 204,85 l 334,335 q 21,21 42,56 z m 633,84 q 0,14 -9,23 -9,9 -23,9 h -320 q -14,0 -23,-9 -9,-9 -9,-23 0,-14 9,-23 9,-9 23,-9 h 320 q 14,0 23,9 9,9 9,23 z M 1120,32 v 320 q 0,14 -9,23 -9,9 -23,9 -14,0 -23,-9 -9,-9 -9,-23 V 32 q 0,-14 9,-23 9,-9 23,-9 14,0 23,9 9,9 9,23 z m 407,151 -256,256 q -11,9 -23,9 -12,0 -23,-9 -9,-10 -9,-23 0,-13 9,-23 l 256,-256 q 10,-9 23,-9 13,0 23,9 9,10 9,23 0,13 -9,23 z"/></symbol>
<symbol id="unlock-alt" viewBox="0 0 1152 1536"><path d="m 1056,768 q 40,0 68,28 28,28 28,68 v 576 q 0,40 -28,68 -28,28 -68,28 H 96 Q 56,1536 28,1508 0,1480 0,1440 V 864 q 0,-40 28,-68 28,-28 68,-28 h 32 V 448 Q 128,263 259.5,131.5 391,0 576,0 761,0 892.5,131.5 1024,263 1024,448 q 0,26 -19,45 -19,19 -45,19 h -64 q -26,0 -45,-19 -19,-19 -19,-45 0,-106 -75,-181 -75,-75 -181,-75 -106,0 -181,75 -75,75 -75,181 v 320 z"/></symbol>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 31 KiB

4
src/js/cloud-ui.js
View file

@ -19,7 +19,7 @@
Home: https://github.com/gorhill/uBlock
*/
/* global uDom */
/* global uDom, faIconsInit */
'use strict';
@ -168,6 +168,8 @@ const onInitialize = function(options) {
);
}
faIconsInit(widget);
vAPI.i18n.render(widget);
widget.classList.remove('hide');

7
src/js/dashboard-common.js
View file

@ -239,10 +239,3 @@ self.uBlockDashboard.openOrSelectPage = function(url, options = {}) {
// Open links in the proper window
uDom('a').attr('target', '_blank');
uDom('a[href*="dashboard.html"]').attr('target', '_parent');
uDom('.whatisthis').on('click', function() {
uDom(this)
.parent()
.descendants('.whatisthis-expandable')
.first()
.toggleClass('whatisthis-expanded');
});

12
src/js/settings.js
View file

@ -152,13 +152,13 @@ const onLocalDataReceived = function(details) {
}
if ( details.cloudStorageSupported === false ) {
uDom('#cloud-storage-enabled').attr('disabled', '');
uDom('[data-setting-name="cloudStorageEnabled"]').attr('disabled', '');
}
if ( details.privacySettingsSupported === false ) {
uDom('#prefetching-disabled').attr('disabled', '');
uDom('#hyperlink-auditing-disabled').attr('disabled', '');
uDom('#webrtc-ipaddress-hidden').attr('disabled', '');
uDom('[data-setting-name="prefetchingDisabled"]').attr('disabled', '');
uDom('[data-setting-name="hyperlinkAuditingDisabled"]').attr('disabled', '');
uDom('[data-setting-name="webrtcIPAddressHidden"]').attr('disabled', '');
}
};
@ -178,7 +178,7 @@ const resetUserData = function() {
const synchronizeDOM = function() {
document.body.classList.toggle(
'advancedUser',
uDom.nodeFromId('advanced-user-enabled').checked === true
uDom.nodeFromSelector('[data-setting-name="advancedUserEnabled"]').checked === true
);
};
@ -233,7 +233,7 @@ const onUserSettingsReceived = function(details) {
});
});
uDom('[data-setting-name="noLargeMedia"] ~ label:first-of-type > input[type="number"]')
uDom('[data-i18n="settingsNoLargeMediaPrompt"] > input[type="number"]')
.attr('data-setting-name', 'largeMediaSize')
.attr('data-setting-type', 'input');

48
src/settings.html
View file

@ -5,43 +5,44 @@
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>uBlock — Settings</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/fa-icons.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
<link rel="stylesheet" type="text/css" href="css/settings.css">
</head>
<body>
<div class="body">
<div class="entries">
<div class="entry"><input id="collapse-blocked" type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label></div>
<div class="entry"><input id="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label></div>
<div class="entry"><input id="context-menu-enabled" type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label></div>
<div class="entry"><input id="tooltips-disabled" type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><label data-i18n="settingsTooltipsPrompt" for="tooltips-disabled"></label></div>
<div class="entry"><input id="color-blind-friendly" type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label></div>
<div class="entry"><input id="cloud-storage-enabled" type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="advanced-user-enabled" type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label> <a class="fa info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">&#xf085;</a></div>
<div class="ul">
<div class="li"><label><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><span data-i18n="settingsCollapseBlockedPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><span data-i18n="settingsIconBadgePrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><span data-i18n="settingsContextMenuPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><span data-i18n="settingsTooltipsPrompt"><span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><span data-i18n="settingsColorBlindPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><span data-i18n="settingsCloudStorageEnabledPrompt"></span></label>&ensp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></div>
<div class="li"><label><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><span data-i18n="settingsAdvancedUserPrompt"></span></label>&ensp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></div>
</div>
<div class="section" data-i18n="3pGroupPrivacy"></div>
<div class="entries">
<div class="entry"><input id="prefetching-disabled" type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="hyperlink-auditing-disabled" type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="webrtc-ipaddress-hidden" type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-csp-reports" type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><label data-i18n="settingsNoCSPReportsPrompt" for="no-csp-reports"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">&#xf05a;</a></div>
<div class="ul">
<div class="li"><label><input type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><span data-i18n="settingsPrefetchingDisabledPrompt"></span></label>&ensp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">info-circle</a></div>
<div class="li"><label><input type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><span data-i18n="settingsHyperlinkAuditingDisabledPrompt"></span></label>&ensp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">info-circle</a></div>
<div class="li"><label><input type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><span data-i18n="settingsWebRTCIPAddressHiddenPrompt"></span></label>&ensp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">info-circle</a></div>
<div class="li"><label><input type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><span data-i18n="settingsNoCSPReportsPrompt"></span></label>&ensp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">info-circle</a></div>
</div>
<div class="section" data-i18n="settingPerSiteSwitchGroup"></div>
<div class="entries">
<div class="synopsis"><label><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">&#xf05a;</a></label></div>
<div class="entry"><input id="no-cosmetic-filtering" type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><label data-i18n="settingsNoCosmeticFilteringPrompt" for="no-cosmetic-filtering"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"><input type="number" min="0"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-remote-fonts" type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><label data-i18n="settingsNoRemoteFontsPrompt" for="no-remote-fonts"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-scripting" type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><label data-i18n="settingsNoScriptingPrompt" for="no-scripting"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">&#xf05a;</a></div>
<div class="ul">
<div class="li synopsis"><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span>&ensp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">info-circle</a></div>
<div class="li"><label><input type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><span data-i18n="settingsNoCosmeticFilteringPrompt"></span></label>&ensp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">info-circle</a></div>
<div class="li"><label><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0"></span></label>&ensp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></div>
<div class="li"><label><input type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><span data-i18n="settingsNoRemoteFontsPrompt"></span></label>&ensp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">info-circle</a></div>
<div class="li"><label><input type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><span data-i18n="settingsNoScriptingPrompt"></span></label>&ensp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">info-circle</a></div>
</div>
<div id="localData" class="entrie">
<div id="localData" class="ul">
<hr>
<div id="storageUsed" class="entry"></div>
<div id="storageUsed" class="li"></div>
<div style="margin: 1.5em 0">
<div class="entry" id="settingsLastBackupPrompt" style="display:none;"></div>
<div class="entry" id="settingsLastRestorePrompt" style="display:none;"></div>
<div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>
<div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
<p><button class="custom" type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp;
<button class="custom" type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
@ -53,6 +54,7 @@
<input id="restoreFilePicker" type="file" accept="text/plain">
</div>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>