open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

One UI PR to rule them all

Browse Source 
Gonna take a while to figure out all the other edited files.
This commit is contained in:
narcolepticinsomniac 2018-10-12 16:21:41 -04:00 committed by GitHub
parent 5cbe8a8d78
commit dbc26c2901
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 389 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
edit.html
View File

@ -25,6 +25,7 @@
<script src="js/script-loader.js"></script>
<script src="js/storage-util.js"></script>
<script src="content/apply.js"></script>
<script src="edit/lint.js"></script>
<script src="edit/util.js"></script>
<script src="edit/regexp-tester.js"></script>
<script src="edit/applies-to-line-widget.js"></script>
@ -64,8 +65,6 @@
<script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
<link href="vendor/codemirror/addon/lint/lint.css" rel="stylesheet" />
<script src="vendor/codemirror/addon/lint/lint.js"></script>
<link href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet" />
<script src="vendor/codemirror/addon/hint/show-hint.js"></script>
@ -88,16 +87,6 @@
<link href="edit/codemirror-default.css" rel="stylesheet">
<script src="edit/codemirror-default.js"></script>
<script src="edit/linter.js"></script>
<script src="edit/linter-defaults.js"></script>
<script src="edit/linter-engines.js"></script>
<script src="edit/linter-meta.js"></script>
<script src="edit/linter-help-dialog.js"></script>
<script src="edit/linter-report.js"></script>
<script src="edit/linter-config-dialog.js"></script>
<script src="edit/editor-worker.js"></script>
<link id="cm-theme" rel="stylesheet">
<template data-id="appliesTo">
@ -272,7 +261,7 @@
</template>
</head>
<body id="stylus-edit">
<body id="stylus-edit" class="truegray-alpha-2">
<div id="header">
<h1 id="heading">&nbsp;</h1> <!-- nbsp allocates the actual height which prevents page shift -->
<section id="basic-info">
@ -428,7 +417,7 @@
</a>
</h2>
</summary>
<div class="lint-report-container"></div>
<div></div>
</details>
<div id="footer" class="hidden">
<a href="https://github.com/openstyles/stylus/wiki/Usercss"

236
global.css
View File

@ -1,3 +1,124 @@
:root {
--white: hsl(0, 0%, 100%);
--white-alpha-75: hsla(0, 0%, 100%, 0.75);
--gray-lightness-10: hsl(0, 0%, 10%);
--gray-lightness-20: hsl(0, 0%, 20%);
--gray-lightness-24: hsl(0, 0%, 24%);
--gray-lightness-25: hsl(0, 0%, 25%);
--gray-lightness-27: hsl(0, 0%, 27%);
--gray-lightness-30: hsl(0, 0%, 30%);
--gray-lightness-33: hsl(0, 0%, 33%);
--gray-lightness-38: hsl(0, 0%, 38%);
--gray-lightness-40: hsl(0, 0%, 40%);
--gray-lightness-45: hsl(0, 0%, 45%);
--gray-lightness-46: hsl(0, 0%, 46%);
--truegray: hsl(0, 0%, 50%);
--gray-lightness-60: hsl(0, 0%, 60%);
--gray-lightness-65: hsl(0, 0%, 65%);
--gray-lightness-66: hsl(0, 0%, 66%);
--gray-lightness-73: hsl(0, 0%, 73%);
--gray-lightness-76: hsl(0, 0%, 76%);
--gray-lightness-80: hsl(0, 0%, 80%);
--gray-lightness-84: hsl(0, 0%, 84%);
--gray-lightness-85: hsl(0, 0%, 85%);
--gray-lightness-86: hsl(0, 0%, 86%);
--gray-lightness-87: hsl(0, 0%, 87%);
--gray-lightness-88: hsl(0, 0%, 88%);
--gray-lightness-90: hsl(0, 0%, 90%);
--main-bg: hsl(0, 0%, 90%);
--gray-lightness-92: hsl(0, 0%, 92%);
--gray-lightness-93: hsl(0, 0%, 93%);
--gray-lightness-95: hsl(0, 0%, 95%);
--truegray-alpha-05: hsla(0, 0%, 50%, .05);
--truegray-alpha-06: hsla(0, 0%, 50%, .06);
--truegray-alpha-07: hsla(0, 0%, 50%, .07);
--truegray-alpha-1: hsla(0, 0%, 50%, .1);
--truegray-alpha-15: hsla(0, 0%, 50%, .15);
--truegray-alpha-2: hsla(0, 0%, 50%, .2);
--truegray-alpha-25: hsla(0, 0%, 50%, .25);
--truegray-alpha-3: hsla(0, 0%, 50%, .3);
--truegray-alpha-4: hsla(0, 0%, 50%, .4);
--truegray-alpha-5: hsla(0, 0%, 50%, .5);
--truegray-alpha-6: hsla(0, 0%, 50%, .6);
--truegray-alpha-7: hsla(0, 0%, 50%, .7);
--black: hsl(0, 0%, 0%);
--black-alpha-05: hsla(0, 0%, 0%, .05);
--black-alpha-1: hsla(0, 0%, 0%, .1);
--black-alpha-15: hsla(0, 0%, 0%, .15);
--black-alpha-25: hsla(0, 0%, 0%, .25);
--black-alpha-3: hsla(0, 0%, 0%, .3);
--black-alpha-4: hsla(0, 0%, 0%, .4);
--black-alpha-45: hsla(0, 0%, 0%, .45);
--black-alpha-5: hsla(0, 0%, 0%, .5);
--black-alpha-7: hsla(0, 0%, 0%, .7);
--black-alpha-75: hsla(0, 0%, 0%, .75);
--darker-red: hsl(0, 100%, 42%);
--darkred: hsl(0, 100%, 27%);
--maroon: hsl(0, 100%, 25%);
--darker-maroon: hsl(0, 100%, 20%);
--red-alpha-05: hsla(0, 100%, 50%, .05);
--red-alpha-1: hsla(0, 100%, 50%, .1);
--darkgreen: hsl(120, 100%, 20%);
--darkcyan: hsl(180, 100%, 27%);
--darkcyan-alpha-5: hsla(180, 100%, 27%, .5);
--darkcyan-alpha-75: hsla(180, 100%, 27%, .75);
--focus-outline: hsl(180, 100%, 34%);
--selection: hsl(180, 50%, 34%);
}
/* in case custom browser bg is specified */
html {
background-color: var(--white);
}
a, .disabled a:hover {
color: var(--black);
transition: color .5s;
text-decoration-skip: ink;
}
a:hover {
color: var(--gray-lightness-40);
}
.main-bg {
background-color: var(--main-bg);
}
.truegray-alpha-05 {
background-color: var(--truegray-alpha-05);
}
.truegray-alpha-06 {
background-color: var(--truegray-alpha-06);
}
.truegray-alpha-1 {
background-color: var(--truegray-alpha-1);
}
.truegray-alpha-15 {
background-color: var(--truegray-alpha-15);
}
.truegray-alpha-2 {
background-color: var(--truegray-alpha-2);
}
* {
outline-color: var(--focus-outline);
}
::selection {
color: var(--white);
background-color: var(--selection);
}
::-moz-selection {
color: var(--white);
background-color: var(--selection);
}
body {
font: normal 12px Arial, system-ui, sans-serif;
}
@ -24,49 +145,66 @@ button {
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 7px;
border: 1px solid hsl(0, 0%, 62%);
border: 1px solid var(--gray-lightness-60);
font: inherit;
font-size: 13px;
color: #000;
background-color: hsl(0, 0%, 100%);
color: var(--gray-lightness-10);
background-color: var(--gray-lightness-95);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-size: 100% 100%;
transition: background-color .25s, border-color .25s;
background-size: auto 100%;
transition: color .25s, background-color .25s, border-color .25s;
}
button:not(:disabled):hover {
background-color: hsl(0, 0%, 95%);
border-color: hsl(0, 0%, 52%);
color: var(--black);
background-color: var(--gray-lightness-90);
border-color: var(--truegray);
}
button:active {
background-color: hsl(0, 0%, 95%);
border-color: hsl(0, 0%, 52%);
background-color: var(--gray-lightness-90);
border-color: var(--truegray);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
background-repeat: repeat-x;
background-size: 100% 100%;
}
/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
#message-box-buttons button:not(:disabled):hover {
background-color: hsl(0, 0%, 90%);
border-color: hsl(0, 0%, 50%);
}
input {
font: inherit;
}
input:not([type]) {
background: #fff;
color: #000;
input:not([type]),
input[type="text"],
input[type="search"] {
color: var(--black);
background: var(--gray-lightness-93);
height: 22px;
min-height: 22px!important;
line-height: 22px;
padding: 0 3px;
font: inherit;
border: 1px solid hsl(0, 0%, 66%);
border: 1px solid var(--gray-lightness-66);
transition: border-color .25s;
}
input[data-focused-via-click]:not([type]):focus,
input[data-focused-via-click][type="number"]:focus,
input[data-focused-via-click][type="search"]:focus,
label[data-focused-via-click] input[type="number"]:focus,
label[data-focused-via-click] + input[type="number"]:focus,
input[data-focused-via-click].config-value:focus,
label[data-focused-via-click] input.config-value:focus {
outline: none;
border-color: var(--focus-outline);
}
input[type="number"] {
height: 22px;
color: var(--black);
background: var(--gray-lightness-93);
border: 1px solid var(--gray-lightness-66);
padding-top: 2px;
padding-bottom: 2px;
}
.svg-icon.checked {
@ -74,7 +212,7 @@ input:not([type]) {
height: 8px;
width: 8px;
display: none;
fill: #000;
fill: var(--gray-lightness-20);
margin: 2px 0 0 2px;
}
@ -89,19 +227,19 @@ input[type="checkbox"]:not(.slider) {
position: absolute;
left: 0;
top: 0;
border: 1px solid hsl(0, 0%, 46%);
border: 1px solid var(--gray-lightness-46);
height: 12px;
width: 12px;
display: inline-flex;
border-radius: 2px;
background-color: hsla(0, 0%, 0%, .1);
background-color: var(--truegray-alpha-15);
margin: 0;
transition: background-color .1s, border-color .1s;
}
input[type="checkbox"]:not(.slider):hover {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
border-color: var(--black);
background-color: var(--truegray-alpha-25);
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
@ -113,31 +251,46 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
input[type="checkbox"]:not(.slider):disabled {
background-color: transparent;
border-color: hsl(0, 0%, 50%);
border-color: var(--truegray);
}
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
fill: hsl(0, 0%, 50%);
fill: var(--truegray);
}
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
color: hsl(0, 0%, 50%);
color: var(--truegray);
}
label {
color: var(--gray-lightness-20);
transition: color .1s;
}
label:hover {
color: var(--black)
}
select {
-moz-appearance: none;
-webkit-appearance: none;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAIGBgYGAgIGBgSS07UcAAAAEdFJOUwAiFQpfOvseAAAAFklEQVQI12NgZGBkwA+YoZAJDhkhEAACSgAd0bXODAAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
background-size: 100% 100%;
height: 22px;
font: inherit;
color: #000;
background-color: transparent;
border: 1px solid hsl(0, 0%, 66%);
color: var(--gray-lightness-20);
background-color: var(--gray-lightness-88);
border: 1px solid var(--gray-lightness-60);
padding: 0 20px 0 6px;
transition: color .5s;
transition: color .5s, background-color .5s, border-color .5s;
}
select:hover,
select:focus {
color: var(--black);
background-color: var(--main-bg);
border-color: var(--truegray);
}
.select-resizer {
@ -152,19 +305,24 @@ select {
display: inline-flex;
height: 14px;
width: 14px;
fill: #000;
fill: var(--gray-lightness-30);
position: absolute;
top: 4px;
right: 4px;
transition: fill .5s;
}
select:hover + .svg-icon.select-arrow,
select:focus + .svg-icon.select-arrow {
fill: var(--black);
}
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
background: hsl(0, 0%, 88%);
background: var(--gray-lightness-88);
border-radius: 50%;
border: 1px solid hsl(0, 0%, 60%);
border: 1px solid var(--gray-lightness-60);
cursor: default;
height: 13px;
width: 13px;
@ -186,7 +344,7 @@ input[type="radio"]:after {
}
input[type="radio"]:checked:after {
background-color: hsl(0, 0%, 30%);
background-color: var(--gray-lightness-30);
transform: scale(1);
}
@ -235,9 +393,6 @@ select[disabled] > option {
/* We can customize everything about number inputs except arrows. They're horrible in Linux FF, so we'll hide them unless hovered or focused. */
.firefox.non-windows input[type="number"] {
-moz-appearance: textfield;
background: #fff;
color: #000;
border: 1px solid hsl(0, 0%, 66%);
}
.firefox.non-windows input[type="number"]:not(:disabled):hover,
@ -246,8 +401,7 @@ select[disabled] > option {
}
.firefox.non-windows input[type="color"] {
background: #fff;
border: 1px solid hsl(0, 0%, 66%);
border: 1px solid var(--gray-lightness-66);
padding: 4px;
}

8
manage.html
View File

@ -167,9 +167,9 @@
<script src="js/storage-util.js" async></script>
</head>
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
<body id="stylus-manage" class="truegray-alpha-15" i18n-dragndrop-hint="dragDropMessage">
<div id="header">
<div id="header" class="truegray-alpha-06">
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
<div id="manage-settings">
@ -325,16 +325,18 @@
<div id="newUIoptions">
<div>
<div class="favicon-label-wrapper">
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
<input id="manage.newUI.favicons" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
<svg class="svg-icon select-arrow">
<title i18n-text="optionsSubheading"></title>
<use xlink:href="#svg-icon-select-arrow"/>
</svg>
</a>
</label>
</div>
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
<div>
<label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">

55
options.html
View File

@ -28,7 +28,7 @@
<script src="content/apply.js"></script>
</head>
<body id="stylus-options">
<body id="stylus-options" class="truegray-alpha-2">
<div id="options">
<div class="block">
@ -105,6 +105,57 @@
<span></span>
</span>
</label>
<div class="radio-outer-wrapper action-elements">
<div class="radio-title" i18n-text="optionsPopupTitle"></div>
<div class="radio-inner-wrapper">
<label i18n-title="optionsPopupIconUI">
<div class="popupui">
<input type="radio" name="popupui">
<div class="icon-wrapper use-svg">
<svg class="svg-icon vector" viewBox="0 0 40 22">
<path fill-rule="evenodd" clip-rule="evenodd" d="m 36.9,0.95 c -1.2,0 -2.4,0.8 -2.9,1.9 H 23.8 v -2.5 h -7.5 v 2.5 H 6 C 5.5,1.75 4.4,0.95 3.1,0.95 1.3,0.95 0,2.35 0,4.05 c 0,1.7 1.4,3.1 3.1,3.1 1.2,0 2.4,-0.8 2.9,-1.9 h 6.4 c -3,2 -5.2,5.1 -6.2,8.8 H 3.8 v 7.6 h 7.5 v -7.5 H 8.8 c 1.1,-3.6 4,-6.6 7.5,-7.9 v 1.6 h 7.5 v -1.6 c 3.6,1.4 6.4,4.2 7.5,7.9 h -2.5 v 7.5 h 7.5 v -7.5 h -2.4 c -1,-3.6 -3.2,-6.8 -6.2,-8.8 H 34 c 0.5,1.1 1.6,1.9 2.9,1.9 1.8,0 3.1,-1.4 3.1,-3.1 0,-1.8 -1.4,-3.2 -3.1,-3.2 z"/>
</svg>
</div>
</div>
</label>
<label i18n-title="optionsPopupClassicUI">
<div class="popupui">
<input type="radio" name="popupui">
<div class="icon-wrapper use-text">
<svg class="svg-icon text" viewBox="0 0 8 8">
<path d="M0 0v2h.5c0-.55.45-1 1-1h1.5v5.5c0 .28-.22.5-.5.5h-.5v1h4v-1h-.5c-.28 0-.5-.22-.5-.5v-5.5h1.5c.55 0 1 .45 1 1h.5v-2h-8z"/>
</svg>
</div>
</div>
</label>
</div>
</div>
<div class="radio-outer-wrapper style-name-action">
<div class="radio-title" i18n-text="optionsPopupTitleClickAction"></div>
<div class="radio-inner-wrapper">
<label i18n-title="optionsPopupClickActionLink">
<div class="popupclick ">
<input type="radio" name="popupclick">
<div class="icon-wrapper use-edit">
<svg class="svg-icon edit" viewBox="0 0 1024 1024">
<path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
<path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
</svg>
</div>
</div>
</label>
<label i18n-title="optionsPopupClickActionToggle">
<div class="popupclick">
<input type="radio" name="popupclick">
<div class="icon-wrapper use-toggle">
<svg class="svg-icon double-toggle" viewBox="0 0 1024 1024">
<path d="M692.053333 474.502095 331.897905 474.502095c-119.369143 0-216.088381-100.766476-216.088381-225.060571S212.528762 24.380952 331.897905 24.380952l360.131048 0c119.369143 0 216.137143 100.766476 216.137143 225.060571S811.398095 474.502095 692.053333 474.502095zM692.053333 61.878857 331.897905 61.878857c-99.449905 0-180.077714 83.992381-180.077714 187.562667s80.62781 187.562667 180.077714 187.562667l360.131048 0c99.474286 0 180.077714-83.992381 180.077714-187.562667S791.527619 61.878857 692.053333 61.878857zM331.897905 399.433143c-79.579429 0-144.067048-67.145143-144.067048-149.991619s64.512-150.064762 144.067048-150.064762c79.555048 0 144.042667 67.193905 144.042667 150.064762S411.452952 399.433143 331.897905 399.433143zM331.897905 549.497905l360.131048 0c119.369143 0 216.137143 100.790857 216.137143 225.060571S811.398095 999.619048 692.053333 999.619048L331.897905 999.619048c-119.369143 0-216.088381-100.766476-216.088381-225.03619S212.528762 549.497905 331.897905 549.497905zM692.053333 924.623238c79.60381 0 144.11581-67.193905 144.11581-150.040381s-64.512-150.064762-144.11581-150.064762c-79.579429 0-144.042667 67.218286-144.042667 150.064762S612.473905 924.623238 692.053333 924.623238z"/>
</svg>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
@ -167,7 +218,7 @@
</div>
</div>
<div class="block" id="actions">
<div class="block truegray-alpha-2" id="actions">
<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
<button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
<div data-cmd="check-updates">

164
popup.html
View File

@ -25,18 +25,31 @@
<template data-id="style">
<div class="entry">
<div class="main-controls">
<a class="style-edit-link-accessibility directLinkUI-el" href="edit.html?id=" tabindex="0"></a>
<label class="style-name">
<input class="checker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<input class="checker toggleUI-el" type="checkbox">
<svg class="svg-icon checked toggleUI-el"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
<div class="actions">
<a href="#" class="enable" i18n-text="enableStyleLabel" tabindex="0"></a>
<a href="#" class="disable" i18n-text="disableStyleLabel" tabindex="0"></a>
<a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a>
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
<a href="#" class="enable directLinkUI-el" i18n-title="enableStyleLabel" tabindex="0">
<svg class="svg-icon toggled-off" viewbox="0 0 24 24">
<path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M7,15c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3s3,1.34,3,3C10,13.66,8.66,15,7,15z"/>
<path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10 c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
<path d="M7,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C10,10.34,8.66,9,7,9z"/>
</svg>
</a>
<a href="#" class="disable directLinkUI-el" i18n-title="disableStyleLabel" tabindex="0">
<svg class="svg-icon toggled-on" viewbox="0 0 24 24">
<path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M17,15c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3s3,1.34,3,3C20,13.66,18.66,15,17,15z"/>
<path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10 c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
<path d="M17,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C20,10.34,18.66,9,17,9z"/>
</svg>
</a>
<a class="style-edit-link toggleUI-el" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
<svg class="svg-icon edit" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
</svg>
@ -50,6 +63,14 @@
</div>
</template>
<template data-id="confirmHotkey">
<a id="popup-confirm-icon" class="action-wrapper iconUI-el" i18n-title="confirmOK">
<svg class="svg-icon thumbsup" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M13.991 13.991c-.05.69-1.269 1-1.998 1H5.666l-1.668-1V7.995c1.359 0 2.108-.75 3.128-1.879 1.229-1.359 1.139-2.558.879-4.127-.08-.5.5-1 1-1 .829 0 1.998 2.729 1.998 3.998l-.02 1.03c0 .689.33.969 1.02.969H14c.63 0 .98.36 1 .999l-1 5.996-.01.01zm0-7.995h-2.018l.02-.98C11.993 3.719 10.823 0 8.994 0c-.58 0-1.169.3-1.559.77-.36.41-.5.909-.42 1.409.25 1.479.28 2.278-.629 3.278-1 1.089-1.48 1.549-2.388 1.549h-2C.94 6.996 0 7.935 0 8.994v3.998c0 1.06.94 1.999 1.999 1.999h1.719l1.439.86c.16.089.33.139.52.139h6.325c1.13 0 2.839-.5 2.999-1.879l.979-5.946c.02-.08.02-.14.02-.2-.03-1.17-.84-1.969-1.999-1.969h-.01z"/>
</svg>
</a>
</template>
<template data-id="writeStyle">
<a class="write-style-link"></a>
</template>
@ -71,14 +92,14 @@
</template>
<template data-id="unavailableInfo">
<div class="blocked-info">
<div class="blocked-info truegray-alpha-1">
<label i18n-text="stylusUnavailableForURL"></label>
<p i18n-text="stylusUnavailableForURLdetails"></p>
</div>
</template>
<template data-id="unreachableInfo">
<div class="blocked-info">
<div class="blocked-info truegray-alpha-1">
<label i18n-text="unreachableContentScript"></label>
<p i18n-text="unreachableFileHint"></p>
</div>
@ -166,13 +187,25 @@
<script src="js/storage-util.js" async></script>
</head>
<body id="stylus-popup">
<body id="stylus-popup" class="truegray-alpha-15">
<div id="confirm">
<div>
<div class="main-bg">
<b>Style's Name</b>
<span i18n-text="deleteStyleConfirm"></span>
<div>
<div class="iconUI-el">
<a id="popup-delete-icon" href="#" class="action-wrapper" i18n-title="confirmDelete" data-cmd="ok" tabindex="0">
<svg class="svg-icon remove" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
</svg>
</a>
<a id="popup-cancel-icon" href="#" class="action-wrapper iconUI-el" i18n-title="confirmCancel" data-cmd="cancel" tabindex="0">
<svg class="svg-icon cancel" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm0 1.3c1.3 0 2.5.44 3.47 1.17l-8 8A5.755 5.755 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zm0 11.41c-1.3 0-2.5-.44-3.47-1.17l8-8c.73.97 1.17 2.17 1.17 3.47 0 3.14-2.56 5.7-5.7 5.7z"/>
</svg>
</a>
</div>
<div class="classicUI-el">
<button i18n-text="confirmDelete" data-cmd="ok"></button>
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
</div>
@ -183,45 +216,100 @@
<aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
</div>
<div class="actions">
<div id="disable-all-wrapper">
<div id="popup-manage-wrapper" class="action-wrapper truegray-alpha-1">
<button id="popup-manage-button" class="classicUI-el" i18n-text="openManage" data-href="manage.html" i18n-title="popupManageTooltip"></button>
<a id="popup-manage-icon" href="#" class="iconUI-el" data-href="manage.html" i18n-title="popupManageTooltip" tabindex="0">
<svg class="svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
</svg>
</a>
</div>
<div id="popup-options-wrapper" class="action-wrapper truegray-alpha-1">
<button id="popup-options-button" class="classicUI-el" i18n-text="openOptionsPopup"></button>
<a id="popup-options-icon" href="#" class="iconUI-el" i18n-title="openOptionsPopup" tabindex="0">
<svg class="svg-icon options" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
</svg>
</a>
</div>
<div id="find-styles-wrapper" class="action-wrapper truegray-alpha-1">
<div id="find-styles">
<a id="find-styles-link" class="classicUI-el" i18n-text="findStyles" i18n-title="findStylesForSite" tabindex="0"></a>
<a id="find-styles-icon" href="#" class="iconUI-el" i18n-title="findStylesForSite" tabindex="0">
<svg class="svg-icon search" viewBox="0 0 24 24">
<path d="M18,13v7H4V6h5.02C9.07,5.29,9.24,4.62,9.5,4H2v18h18v-7L18,13z M16.5,18h-11l2.75-3.53l1.96,2.36l2.75-3.54L16.5,18z M19.3,8.89C19.74,8.19,20,7.38,20,6.5C20,4.01,17.99,2,15.5,2S11,4.01,11,6.5s2.01,4.5,4.49,4.5c0.88,0,1.7-0.26,2.39-0.7 L21,13.42L22.42,12L19.3,8.89z M15.5,9C14.12,9,13,7.88,13,6.5S14.12,4,15.5,4S18,5.12,18,6.5S16.88,9,15.5,9z"/>
</svg>
</a>
<span id="find-styles-inline-group">
<label i18n-title="findStylesInlineTooltip">
<input id="popup.findStylesInline" class="checker toggle-inline classicUI-el" type="checkbox">
<svg class="svg-icon checked classicUI-el"><use xlink:href="#svg-icon-checked"/></svg>
<span class="classicUI-el" i18n-text="findStylesInline"></span>
<a id="find-inline-icon" href="#" class="iconUI-el" tabindex="0">
<svg viewBox="0 0 20 20" class="svg-icon inline">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M 17,9 H 11 V 3 l 2,2 4,-4 2,2 -4,4 z"/>
</svg>
</a>
<a id="find-external-icon" href="#" class="iconUI-el" i18n-title="findStylesExternalTooltip" tabindex="0">
<svg class="svg-icon external" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg>
</a>
</label>
<div id="find-external-icon-noclick" class="iconUI-el" i18n-title="findStylesExternalTooltip">
<svg class="svg-icon external noclick" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg>
</div>
</span>
</div>
</div>
<div id="popup-wiki-wrapper" class="action-wrapper truegray-alpha-1">
<button id="popup-wiki-button" class="classicUI-el" i18n-text="linkStylusWiki" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki"></button>
<a id="popup-wiki-icon" class="iconUI-el" href="#" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki" tabindex="0">
<svg class="svg-icon wiki" viewBox="0 0 24 24">
<path d="M12.09 13.119c-.936 1.932-2.217 4.548-2.853 5.728-.616 1.074-1.127.931-1.532.029-1.406-3.321-4.293-9.144-5.651-12.409-.251-.601-.441-.987-.619-1.139-.181-.15-.554-.24-1.122-.271C.103 5.033 0 4.982 0 4.898v-.455l.052-.045c.924-.005 5.401 0 5.401 0l.051.045v.434c0 .119-.075.176-.225.176l-.564.031c-.485.029-.727.164-.727.436 0 .135.053.33.166.601 1.082 2.646 4.818 10.521 4.818 10.521l.136.046 2.411-4.81-.482-1.067-1.658-3.264s-.318-.654-.428-.872c-.728-1.443-.712-1.518-1.447-1.617-.207-.023-.313-.05-.313-.149v-.468l.06-.045h4.292l.113.037v.451c0 .105-.076.15-.227.15l-.308.047c-.792.061-.661.381-.136 1.422l1.582 3.252 1.758-3.504c.293-.64.233-.801.111-.947-.07-.084-.305-.22-.812-.24l-.201-.021c-.052 0-.098-.015-.145-.051-.045-.031-.067-.076-.067-.129v-.427l.061-.045c1.247-.008 4.043 0 4.043 0l.059.045v.436c0 .121-.059.178-.193.178-.646.03-.782.095-1.023.439-.12.186-.375.589-.646 1.039l-2.301 4.273-.065.135 2.792 5.712.17.048 4.396-10.438c.154-.422.129-.722-.064-.895-.197-.172-.346-.273-.857-.295l-.42-.016c-.061 0-.105-.014-.152-.045-.043-.029-.072-.075-.072-.119v-.436l.059-.045h4.961l.041.045v.437c0 .119-.074.18-.209.18-.648.03-1.127.18-1.443.421-.314.255-.557.616-.736 1.067 0 0-4.043 9.258-5.426 12.339-.525 1.007-1.053.917-1.503-.031-.571-1.171-1.773-3.786-2.646-5.71l.053-.036z"/>
</svg>
</a>
</div>
<div id="disable-all-wrapper" class="action-wrapper truegray-alpha-1">
<div class="main-controls">
<label id="disableAll-label" i18n-text="disableAllStyles">
<label id="disableAll-label" class="classicUI-el" i18n-text="disableAllStyles">
<input id="disableAll" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
<a id="disable-all-icon" class="iconUI-el" href="#" tabindex="0">
<div i18n-title="disableAllStyles">
<svg class="svg-icon toggle-all-off" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
</svg>
</div>
<div class="main-controls">
<div id="find-styles">
<a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesForSite"></a>
<span id="find-styles-inline-group">
<label i18n-title="findStylesInlineTooltip">
<input id="popup.findStylesInline" class="checker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n-text="findStylesInline"></span>
</label>
</span>
</div>
<div id="write-style">
<span id="write-style-for" i18n-text="writeStyleFor"></span>
<div i18n-title="reEnableAllStyles">
<svg class="svg-icon toggle-all-on" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
</svg>
</div>
</a>
</div>
<!-- Actions -->
<div id="popup-options">
<button id="popup-manage-button" i18n-text="openManage"
data-href="manage.html" i18n-title="popupManageTooltip"></button>
<button id="popup-options-button" i18n-text="openOptionsPopup"></button>
<button id="popup-wiki-button"
i18n-text="linkStylusWiki"
i18n-title="linkGetHelp"
data-href="https://github.com/openstyles/stylus/wiki"></button>
<div id="write-style-wrapper" class="truegray-alpha-1">
<div id="write-style">
<span id="write-style-for" i18n-text="writeStyleFor">
<div id="popup-write-style-icon" i18n-title="writeStyleForInfo">
<svg class="svg-icon write-style iconUI-el" viewBox="0 0 1024 1024">
<path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
<path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
</svg>
</div>
</span>
</div>
</div>
<div id="search-results-error" class="hidden"></div>
<div id="search-results" class="hidden">
<div id="search-results" class="hidden truegray-alpha-1">
<div class="search-results-nav" data-type="top"></div>
<div id="search-results-list"></div>
<div class="search-results-nav" data-type="bottom"></div>
@ -240,8 +328,8 @@
<path d="M6.2,0C5.8,0,5.4,0.4,5.4,0.8v0.7C5,1.7,4.6,1.8,4.3,2L3.8,1.5C3.6,1.4,3.4,1.3,3.2,1.3S2.7,1.4,2.6,1.5L1.5,2.6c-0.3,0.3-0.3,0.9,0,1.2L2,4.3C1.8,4.6,1.7,5,1.5,5.4H0.8C0.4,5.4,0,5.8,0,6.2v1.5c0,0.5,0.4,0.8,0.8,0.8h0.7C1.7,9,1.8,9.4,2,9.7l-0.5,0.5c-0.3,0.3-0.3,0.8,0,1.2l1.1,1.1c0.3,0.3,0.9,0.3,1.2,0L4.3,12c0.4,0.2,0.8,0.4,1.2,0.5v0.7c0,0.5,0.4,0.8,0.8,0.8h1.5c0.5,0,0.8-0.4,0.8-0.8v-0.7C9,12.3,9.4,12.2,9.7,12l0.5,0.5c0.3,0.3,0.9,0.3,1.2,0l1.1-1.1c0.3-0.3,0.3-0.8,0-1.2L12,9.7c0.2-0.4,0.4-0.8,0.5-1.2h0.7c0.5,0,0.8-0.4,0.8-0.8V6.2c0-0.5-0.4-0.8-0.8-0.8h-0.7C12.3,5,12.2,4.6,12,4.3l0.5-0.5c0.3-0.3,0.3-0.9,0-1.2l-1.1-1.1c-0.2-0.2-0.4-0.2-0.6-0.2s-0.4,0.1-0.6,0.2L9.7,2C9.4,1.8,9,1.7,8.6,1.5V0.8C8.6,0.4,8.2,0,7.8,0L6.2,0z M6.8,0.8h0.4c0.2,0,0.4,0.2,0.4,0.4v1.2c0.8,0.1,1.6,0.4,2.3,0.9l0.8-0.8c0.2-0.2,0.4-0.2,0.6,0l0.3,0.3c0.2,0.2,0.2,0.4,0,0.6l-0.8,0.8c0.5,0.7,0.8,1.4,0.9,2.3h1.2c0.2,0,0.4,0.2,0.4,0.4v0.4c0,0.2-0.2,0.4-0.4,0.4h-1.2c-0.1,0.8-0.4,1.6-0.9,2.3l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l-0.3,0.3c-0.2,0.2-0.4,0.2-0.6,0l-0.8-0.8c-0.7,0.5-1.4,0.8-2.3,0.9v1.2c0,0.2-0.2,0.4-0.4,0.4H6.8c-0.2,0-0.4-0.2-0.4-0.4v-1.2c-0.8-0.1-1.6-0.4-2.3-0.9l-0.8,0.8c-0.2,0.2-0.4,0.2-0.6,0l-0.3-0.3c-0.2-0.2-0.2-0.4,0-0.6l0.8-0.8C2.8,9.2,2.5,8.4,2.4,7.6H1.2C1,7.6,0.8,7.4,0.8,7.2V6.8c0-0.2,0.2-0.4,0.4-0.4h1.2c0.1-0.8,0.4-1.6,0.9-2.3L2.5,3.3c-0.2-0.2-0.2-0.4,0-0.6l0.3-0.3c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.7-0.5,1.4-0.8,2.3-0.9V1.2C6.4,1,6.6,0.8,6.8,0.8L6.8,0.8z M7,3.6C5.1,3.6,3.6,5.1,3.6,7c0,0,0,0,0,0c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4C10.4,5.1,8.9,3.6,7,3.6C7,3.6,7,3.6,7,3.6z M7,4.8c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2C4.8,5.8,5.8,4.8,7,4.8z"/>
</symbol>
<symbol id="svg-icon-config-uso" viewBox="0 0 14 14">
<path d="M2,3h4v2H4v6h6V9h2v4H2V3z M8,1h6v6l-2.2-2.2l-4,4L6.2,7.2l4-4L8,1z"/>
<symbol id="svg-icon-config-uso" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</symbol>
<symbol id="svg-icon-help" viewBox="0 0 14 16">