.
[mod] Dark Comfort for Stylus by void
Details
Authorvoid
LicenseNo License
Category.
Created
Updated
Size8.8 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name 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;
}
}