Light grey theme
Give me a few minutes. I edited a bunch of files.
This commit is contained in:
narcolepticinsomniac
GitHub
parent
9266d6bbc5
commit
e19c63b65e
115
global.css
115
global.css
|
|
@ -1,3 +1,17 @@
|
|||
* {
|
||||
outline-color: hsl(180, 100%, 34%) !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: #fff;
|
||||
background-color: hsl(180, 50%, 34%)
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: #fff;
|
||||
background-color: hsl(180, 50%, 34%)
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
|
@ -7,44 +21,60 @@ button {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 2px 7px;
|
||||
border: 1px solid hsl(0, 0%, 62%);
|
||||
border: 1px solid hsl(0, 0%, 56%);
|
||||
font: 400 13.3333px Arial;
|
||||
color: #000;
|
||||
color: hsl(0, 0%, 24%);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
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;
|
||||
transition: color .25s, background-color .25s, border-color .25s;
|
||||
}
|
||||
|
||||
button:not(:disabled):hover {
|
||||
color: hsl(0, 0%, 10%);
|
||||
background-color: hsl(0, 0%, 95%);
|
||||
border-color: hsl(0, 0%, 52%);
|
||||
border-color: hsl(0, 0%, 46%);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: hsl(0, 0%, 95%);
|
||||
border-color: hsl(0, 0%, 52%);
|
||||
border-color: hsl(0, 0%, 46%);
|
||||
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 {
|
||||
#message-box.center #message-box-buttons button:not(:disabled):hover {
|
||||
background-color: hsl(0, 0%, 90%);
|
||||
border-color: hsl(0, 0%, 50%);
|
||||
}
|
||||
|
||||
input:not([type]) {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
input:not([type]),
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input.config-value {
|
||||
background: hsl(0, 0%, 92%);
|
||||
color: hsl(0, 0%, 30%);
|
||||
height: 22px;
|
||||
min-height: 22px!important;
|
||||
line-height: 22px;
|
||||
padding: 0 3px;
|
||||
font: 400 13.3333px Arial;
|
||||
border: 1px solid hsl(0, 0%, 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: hsl(180, 100%, 34%);
|
||||
}
|
||||
|
||||
.svg-icon.checked {
|
||||
|
|
@ -52,7 +82,7 @@ input:not([type]) {
|
|||
height: 8px;
|
||||
width: 8px;
|
||||
display: none;
|
||||
fill: #000;
|
||||
fill: hsl(0, 0%, 30%);
|
||||
margin: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
|
|
@ -61,6 +91,10 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
|
|||
transition: fill .1s;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(.slider):checked:hover + .svg-icon.checked {
|
||||
fill: hsl(0, 0%, 10%);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(.slider) {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
|
@ -72,14 +106,13 @@ input[type="checkbox"]:not(.slider) {
|
|||
width: 12px;
|
||||
display: inline-flex;
|
||||
border-radius: 2px;
|
||||
background-color: hsla(0, 0%, 0%, .1);
|
||||
background-color: hsl(0, 0%, 88%);
|
||||
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: hsl(0, 0%, 10%);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
|
||||
|
|
@ -91,31 +124,58 @@ 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: hsl(0, 0%, 60%);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
|
||||
fill: hsl(0, 0%, 50%);
|
||||
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked,
|
||||
input[type="checkbox"]:not(.slider):disabled:hover + .svg-icon.checked {
|
||||
fill: hsl(0, 0%, 60%);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
|
||||
color: hsl(0, 0%, 50%);
|
||||
input[type="checkbox"]:not(.slider):disabled ~ *,
|
||||
input[type="checkbox"]:not(.slider):disabled:hover ~ * {
|
||||
color: hsl(0, 0%, 60%);
|
||||
}
|
||||
|
||||
label {
|
||||
color: hsl(0, 0%, 30%);
|
||||
transition: color .1s;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
color: hsl(0, 0%, 10%);
|
||||
}
|
||||
|
||||
select {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
height: 22px;
|
||||
font: 400 13.3333px Arial;
|
||||
color: #000;
|
||||
background-color: transparent;
|
||||
color: hsl(0, 0%, 24%);
|
||||
border: 1px solid hsl(0, 0%, 66%);
|
||||
padding: 0 20px 0 6px;
|
||||
transition: color .5s;
|
||||
transition: color .25s, background-color .25s, border-color .25s, box-shadow .25s;
|
||||
box-shadow: 0 1px 1px hsla(0, 0%, 0%, .05);
|
||||
background-color: hsl(0, 0%, 90%);
|
||||
background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .5), hsla(0, 0%, 80%, .5));
|
||||
}
|
||||
|
||||
select:hover,
|
||||
select:focus {
|
||||
color: hsl(0, 0%, 14%);
|
||||
border: 1px solid hsl(0, 0%, 60%);
|
||||
background-color: hsl(0, 0%, 85%);
|
||||
box-shadow: 0 1px 1px hsla(0, 0%, 0%, .1);
|
||||
}
|
||||
|
||||
select option,
|
||||
select optgroup {
|
||||
background-color: hsl(0, 0%, 90%)
|
||||
}
|
||||
|
||||
select:hover + .svg-icon.select-arrow,
|
||||
select:focus + .svg-icon.select-arrow {
|
||||
fill: hsl(0, 0%, 30%);
|
||||
}
|
||||
|
||||
.select-resizer {
|
||||
|
|
@ -130,11 +190,11 @@ select {
|
|||
display: inline-flex;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
fill: #000;
|
||||
fill: hsl(0, 0%, 50%);
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
transition: fill .5s;
|
||||
transition: fill .25s;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
|
|
@ -208,6 +268,15 @@ select[disabled] > option {
|
|||
|
||||
.moz-appearance-bug input[type="checkbox"] {
|
||||
-moz-appearance: checkbox !important;
|
||||
opacity: .6;
|
||||
filter: brightness(.9)grayscale(1);
|
||||
transition: opacity .1s;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.moz-appearance-bug input[type="checkbox"]:hover,
|
||||
.moz-appearance-bug #stylus-popup .style-name:hover input[type="checkbox"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.moz-appearance-bug input[type="radio"] {
|
||||
|
|
|
|||
46
manage.html
46
manage.html
|
|
@ -171,12 +171,12 @@
|
|||
|
||||
<div id="header">
|
||||
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
||||
|
||||
|
||||
<div id="manage-settings">
|
||||
<div class="settings-column">
|
||||
<details id="filters" data-pref="manage.filters.expanded">
|
||||
<summary>
|
||||
<h2 i18n-text="manageFilters">:
|
||||
<h2 i18n-text="manageFilters">:
|
||||
<div class="filter-stats-wrapper">
|
||||
<span id="filters-stats"></span>
|
||||
<a id="reset-filters" href="#" tabindex="0">
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
</div>
|
||||
</h2>
|
||||
</summary>
|
||||
|
||||
|
||||
<div class="filter-selection">
|
||||
<label>
|
||||
<div class="checkmate">
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="filter-selection">
|
||||
<label>
|
||||
<div class="checkmate">
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="filter-selection">
|
||||
<label>
|
||||
<div class="checkmate">
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<label id="only-updates" class="hidden">
|
||||
<input type="checkbox"
|
||||
data-filter=".can-update, .update-problem, .update-done"
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<span i18n-text="manageOnlyUpdates"></span>
|
||||
</label>
|
||||
|
||||
|
||||
<div id="search-wrapper">
|
||||
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
|
||||
data-filter=":not(.not-matching)"
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="style-actions">
|
||||
<div id="update-check">
|
||||
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
|
||||
|
|
@ -282,13 +282,13 @@
|
|||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="update-all">
|
||||
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
|
||||
<span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
|
||||
<button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="add-style-wrapper">
|
||||
<a href="edit.html">
|
||||
<button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
|
||||
|
|
@ -309,30 +309,32 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="settings-column">
|
||||
<details id="options" data-pref="manage.options.expanded">
|
||||
|
||||
|
||||
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
||||
|
||||
|
||||
<label>
|
||||
<input id="manage.newUI" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<span i18n-text="manageNewUI"></span>
|
||||
</label>
|
||||
|
||||
|
||||
<div id="newUIoptions">
|
||||
<div>
|
||||
<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>
|
||||
<div class="favicon-help-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">
|
||||
|
|
@ -344,7 +346,7 @@
|
|||
</div>
|
||||
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="options-buttons">
|
||||
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
|
||||
<button id="manage-shortcuts-button" class="chromium-only"
|
||||
|
|
@ -355,9 +357,9 @@
|
|||
i18n-title="editorStylesButton"
|
||||
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
|
||||
</div>
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
<details id="backup" data-pref="manage.backup.expanded">
|
||||
<summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
|
||||
<span id="backup-message" i18n-text="backupMessage"></span>
|
||||
|
|
@ -366,7 +368,7 @@
|
|||
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
<div id="manage-text">
|
||||
<span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
|
||||
<span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</svg>
|
||||
</a>
|
||||
<a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
|
||||
<svg class="svg-icon remove" viewBox="0 0 14 16">
|
||||
<svg class="svg-icon remove" viewBox="0 0 12 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user