`Dark UI theme for Stylus browser extension (Stylish alternative)`
/* ==UserStyle==
@name [mod] Dark Comfort for Stylus
@namespace USO Archive
@author R3gi CZ
@description `Dark UI theme for Stylus browser extension (Stylish alternative)`
@version 20200331.16.6
@license CC-BY-NC-SA-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document regexp("chrome-extension://.*"), regexp("moz-extension://.*") {
/* Dark Comfort for Stylus by R3gi, Czech Republic
Version: 2020.03.21.15.05 */
/* ICONS INVERSION */
.svg-icon,
.svg-icon.info:hover {
filter: brightness(0) invert(1);
}
.select-resizer > .svg-icon.select-arrow,
.sorter-selection > .svg-icon.select-arrow {
filter: none;
fill: #424242;
}
/* REGULAR TEXT COLOR */
body,
a,
#notes,
#advanced.collapsible.collapsed h1,
#advanced.collapsible h1,
#footer a,
.search-result-title,
.applies-to label,
#backup-buttons .dropdown-content a,
.CodeMirror-search-hint,
#hotkey-info mark{
color: #E0E0E0;
}
/* LIGHT TEXT COLOR */
a:hover,
a:focus,
.style-name-link:hover,
#message-box-title,
.newUI .updater-icons > :not(.check-update):after,
#help-popup .title,
h1,
#confirm > div > b,
/*select[id^="manage."]:hover, select[id^="manage."]:focus, select[id^="manage."]:active,*/
select option,
#advanced.collapsible.collapsed:hover h1,
#advanced.collapsible:not(.collapsed) h1:hover,
#footer a:hover,
.newUI .entry.enabled .style-name:hover .style-name-link,
.disabled a:hover,
.search-result:hover .search-result-title,
#search-replace-dialog [data-action="case"],
#backup-buttons .dropdown-content a:hover {
color: #FAFAFA;
text-decoration: none;
}
/* GREY TEXT COLOR (disabled items) */
button:disabled,
select:disabled,
option:disabled,
select[disabled] > option {
color: #BDBDBD;
}
/* GREEN TEXT COLOR */
.regexp-report details[data-type="full"],
.search-result-meta [data-type="rating"][data-class="good"] dd,
.search-result-meta [data-type="rating"][data-class="okay"] dd,
.colorpicker-title-action[data-active] {
color: #4CAF50;
}
/* RED TEXT COLOR */
#disableAll-label:hover {
color: #F44336;
}
/* BORDER COLOR */
.CodeMirror,
#extension-options-overlay-header,
.applies-to,
#installed,
.config-body label:not(:first-child),
.color-swatch,
.applies-value-wrapper,
#hotkey-info[data-active],
#hotkey-info div,
#hotkey-info mark,
#options-title {
border-color: #37474F;
}
/**/
.entry,
.block,
.search-result,
body {
border-color: #546E7A;
}
/* LIGHTER BORDER COLOR */
.newUI .updater-icons > :not(.check-update):after,
#sections > div:not(:first-of-type),
.search-result:hover {
border-color: #78909C;
}
/* NO BORDER RADIUS */
.newUI .updater-icons > :not(.check-update):after,
#search,
.disabled h2::after,
.search-result,
#hotkey-info mark {
border-radius: 0;
}
/* DARK BACKGROUND COLOR */
#stylus,
body,
#filters label:hover,
#filters .filter-selection:hover,
.applies-to {
background-color: #37474F;
}
/* FRONT BACKGROUND COLOR */
#help-popup .title,
#message-box-title,
#message-box-buttons,
.newUI .updater-icons > :not(.check-update):after,
#confirm > div,
select option,
.search-result:hover,
#backup-buttons .dropdown-content,
#hotkey-info div,
.menu-items-wrapper,
#options-title {
background-color: #607D8B;
}
/* FRONT BACKGROUND COLOR 2 */
#backup-buttons .dropdown-content a:hover {
background-color: #546E7A;
}
/* TRANSPARENT FRONT BACKROUND COLOR */
.search-result:hover .search-result-meta {
background-color: hsla(200, 18%, 46%, .7);
}
#header,
#help-popup,
#message-box-contents,
#notes,
.search-result,
#options {
background-color: #455A64;
}
#hotkey-info mark {
background: #455A64;
}
.colorpicker-theme-dark {
--main-background-color: #455A64;
--main-border-color: #455A64;
--label-color: #E0E0E0;
--label-color-hover: #FAFAFA;
--input-background-color: #E0E0E0;
--input-background-color-hover: #FAFAFA;
--input-background-color-focus: #FAFAFA;
--input-color: #424242;
--input-color-focus: #000;
--input-border-color: #37474F;
--input-border-color-focus: #37474F;
--input-border-color-hover: #37474F;
}
/* GREEN BACKGROUND AND BORDER COLOR */
.newUI .can-update:not([data-details$="locally edited"]) .update:after {
background-color: #2E7D32;
border: 1px solid #388E3C;
}
/* TRANSPARENT BACKGROUND */
.search-result-meta {
background-color: rgba(69, 90, 100, .7);
}
#header {
border-right: 1px solid #546E7A;
}
@media (max-width: 737px) {
#header {
border-bottom: 1px solid #546E7A;
border-right: none;
}
}
/* NO BOX SHADOW */
#actions button,
.search-result,
#hotkey-info mark {
box-shadow: none;
}
/* BUTTON DEFAULT */
button,
#find-styles-link,
#actions button,
#search-results .search-result-actions button,
.beautify-options select {
background: #546E7A;
color: #FAFAFA;
border-color: #607D8B;
border-width: 1px;
border-radius: 0;
padding: 3px 8px;
text-shadow: 0 0 0 #000000;
}
/* BUTTON HOVER and FOCUS */
button:not(:disabled):hover,
button:focus,
#message-box-buttons button:not(:disabled):hover,
#find-styles-link:hover,
#find-styles-link:focus,
#actions button:hover,
#actions button:focus,
input[type="checkbox"]:not(.slider):not(:disabled):hover,
.style-name:hover input[type="checkbox"]:checked,
#search-results .search-result-actions button:hover,
#search-results .search-result-actions button:focus,
.beautify-options select:hover,
.beautify-options select:focus,
#backup-buttons .dropdown:hover .dropbtn {
background: #78909C;
color: #FFFFFF;
text-shadow: 0.5px 0.5px 0 #607D8B;
border-color: #90A4AE;
outline: none;
}
/* BUTTON ACTIVE */
button:active,
#find-styles-link:active,
#actions button:active,
#search-results .search-result-actions button:active,
.beautify-options select:active {
background: #546E7A;
color: #FFFFFF;
border-color: #607D8B;
}
/* CHECKBOX */
input[type="checkbox"]:not(.slider) {
border-color: #607D8B;
}
/* FORMS */
input:not([type]),
select,
textarea,
#search,
#search,
#manage\.newUI\.sort {
background-color: #E0E0E0;
color: #424242;
}
#search-replace-dialog textarea,
#search-replace-dialog textarea::placeholder {
color: #424242 !important;
}
input,
select,
textarea,
input:not([type]),
#search,
#search,
#manage\.newUI\.sort {
outline: none;
border: 1px solid #37474F;
}
input:not([type]):hover,
select:hover,
textarea:hover,
input:not([type]):focus,
select:focus,
textarea:focus,
#search:hover,
#search:focus {
background-color: #FAFAFA;
color: #000000;
transition-duration: 0.3s;
}
/* BUTTONS AND FORMS STYLE */
button,
input:not([type]),
select,
.applies-to li > *:not(button):not(.select-resizer),
#find-styles-link,
.filter-selection select,
#search {
display: inline-block;
padding: 0 .5rem;
min-height: 1.6rem !important;
line-height: 1.6rem !important;
box-sizing: border-box;
border-style: solid;
border-radius: 0;
border-width: 1px;
}
.aligned > select:not(svg) {
padding: 0 .5rem;
min-height: 1.6rem;
line-height: 1.6rem;
box-sizing: border-box;
}
#header .filter-selection label,
#newUIoptions input[type="number"],
#options [type="number"] {
min-height: 1.6rem;
line-height: 1.6rem;
}
button {
margin: .1em 0;
}
.applies-to-list button {
margin-left: .3em;
}
/* MISC FIXES */
fieldset {
border: none;
border-radius: 0;
}
.select-resizer select {
padding-right: 15px;
}
.filter-selection .select-resizer {
left: 25px;
}
a {
text-decoration: none;
}
#options [type="number"] {
height: 1.6rem;
}
:focus {
outline: none;
}
.CodeMirror-focused {
outline-color: #FFC107;
outline-style: solid;
outline-offset: 0;
outline-width: 1px;
}
#search-replace-dialog [data-type="hover"] svg {
filter: none;
}
/* SCROLLBAR Chromium */
*::-webkit-scrollbar {
background: #1E272B !important;
}
*::-webkit-scrollbar-button {
display: none !important;
}
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
border: 0 !important;
box-shadow: none !important;
}
*::-webkit-scrollbar-thumb {
background: #455A64 !important;
}
*::-webkit-scrollbar-thumb:hover {
background: #607D8B !important;
}
*::-webkit-scrollbar-corner,
*::-webkit-scrollbar-track {
background: #1E272B !important;
}
/* ANNOYING "error" background */
.cm-s-oceanic-next span.cm-error {
background: inherit;
font-style: italic;
}
/* Clearer comments */
x .CodeMirror pre.CodeMirror-line span.cm-comment,
x .cm-s-oceanic-next.CodeMirror .CodeMirror-activeline pre.CodeMirror-line span.cm-comment,
.cm-s-oceanic-next.CodeMirror .CodeMirror-line span.cm-comment {
color: #788;
}
.cm-s-oceanic-next.CodeMirror .CodeMirror-activeline span.cm-comment {
color: #899;
}
}