Replace filters with filter vars

This commit is contained in:
Mars Niermann 2023-03-10 12:29:47 +00:00
parent 1134a27308
commit 94ffddf462

View file

@ -1,4 +1,4 @@
/* ==UserStyle==
/* ==UserStyle==
@name Gruvbox for OneDev
@namespace git.m3.fyi/Marsn3
@version 1.0.0
@ -42,6 +42,68 @@ domain("code.onedev.io") {
--aqua-dim: #689d6a;
--gray-dim: #a89984;
--orange-dim: #d65d0e;
--filter-reset: brightness(0) saturate(100%);
--filter-bg_h: invert(8%) sepia(12%) saturate(391%) hue-rotate(149deg)
brightness(101%) contrast(91%);
--filter-bg: invert(13%) sepia(0%) saturate(250%) hue-rotate(148deg)
brightness(97%) contrast(91%);
--filter-bg_s: invert(12%) sepia(4%) saturate(785%) hue-rotate(336deg)
brightness(90%) contrast(79%);
--filter-bg1: invert(17%) sepia(8%) saturate(565%) hue-rotate(335deg)
brightness(92%) contrast(81%);
--filter-bg2: invert(27%) sepia(6%) saturate(756%) hue-rotate(338deg)
brightness(93%) contrast(85%);
--filter-bg3: invert(35%) sepia(8%) saturate(665%) hue-rotate(345deg)
brightness(99%) contrast(89%);
--filter-bg4: invert(45%) sepia(21%) saturate(297%) hue-rotate(346deg)
brightness(93%) contrast(84%);
--filter-fg: invert(96%) sepia(7%) saturate(1789%) hue-rotate(320deg)
brightness(108%) contrast(97%);
--filter-fg1: invert(93%) sepia(10%) saturate(848%) hue-rotate(351deg)
brightness(95%) contrast(95%);
--filter-fg2: invert(88%) sepia(47%) saturate(265%) hue-rotate(328deg)
brightness(88%) contrast(89%);
--filter-fg3: invert(79%) sepia(29%) saturate(224%) hue-rotate(360deg)
brightness(85%) contrast(90%);
--filter-fg4: invert(74%) sepia(5%) saturate(1427%) hue-rotate(356deg)
brightness(85%) contrast(81%);
--filter-red: invert(37%) sepia(65%) saturate(2977%) hue-rotate(342deg)
brightness(101%) contrast(97%);
--filter-green: invert(72%) sepia(11%) saturate(2587%) hue-rotate(21deg)
brightness(99%) contrast(85%);
--filter-yellow: invert(65%) sepia(85%) saturate(394%) hue-rotate(359deg)
brightness(102%) contrast(96%);
--filter-blue: invert(69%) sepia(13%) saturate(453%) hue-rotate(105deg)
brightness(89%) contrast(90%);
--filter-purple: invert(69%) sepia(7%) saturate(2391%) hue-rotate(295deg)
brightness(89%) contrast(84%);
--filter-aqua: invert(72%) sepia(24%) saturate(546%) hue-rotate(59deg)
brightness(94%) contrast(91%);
--filter-gray: invert(56%) sepia(10%) saturate(586%) hue-rotate(349deg)
brightness(92%) contrast(87%);
--filter-orange: invert(57%) sepia(14%) saturate(5166%) hue-rotate(348deg)
brightness(102%) contrast(99%);
--filter-red-dim: invert(21%) sepia(86%) saturate(3086%) hue-rotate(354deg)
brightness(81%) contrast(98%);
--filter-green-dim: invert(51%) sepia(66%) saturate(488%) hue-rotate(21deg)
brightness(96%) contrast(93%);
--filter-yellow-dim: invert(67%) sepia(94%) saturate(516%)
hue-rotate(343deg) brightness(88%) contrast(90%);
--filter-blue-dim: invert(47%) sepia(10%) saturate(1569%) hue-rotate(134deg)
brightness(96%) contrast(91%);
--filter-purple-dim: invert(48%) sepia(12%) saturate(1818%)
hue-rotate(280deg) brightness(91%) contrast(81%);
--filter-aqua-dim: invert(58%) sepia(7%) saturate(2100%) hue-rotate(72deg)
brightness(98%) contrast(79%);
--filter-gray-dim: invert(76%) sepia(6%) saturate(1061%) hue-rotate(356deg)
brightness(82%) contrast(82%);
--filter-orange-dim: invert(37%) sepia(99%) saturate(2942%)
hue-rotate(12deg) brightness(98%) contrast(89%);
--monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono",
monospace, emoji;
@ -71,19 +133,19 @@ domain("code.onedev.io") {
--dark-mode-dark-gray: var(--bg3);
}
.CodeMirror {
font-family: var(--monospaceFontFamily)
font-family: var(--monospaceFontFamily);
}
.nav .nav-link {
color: var(--fg4)
color: var(--fg4);
}
.dark-mode .badge.badge-light-info {
color: var(--fg1);
background: var(--purple-dim)
background: var(--purple-dim);
}
.dark-mode li.feedbackPanelINFO {
background-color: var(--bg)
background-color: var(--bg);
}
input::placeholder,
@ -94,23 +156,23 @@ domain("code.onedev.io") {
.dark-mode .text-diff > tbody > tr > td.new.content,
.dark-mode .text-diff > tbody > tr > td.new.operation {
background: #999c2654;
border-color: var(--green-dim)
border-color: var(--green-dim);
}
.dark-mode .blob-text-diff > tbody > tr > td.old.number,
.dark-mode .text-diff > tbody > tr > td.old.content,
.dark-mode .text-diff > tbody > tr > td.old.operation {
background: #fb493457;
border-color: var(--red-dim)
border-color: var(--red-dim);
}
.dark-mode .text-diff > tbody > tr > td.new .insert {
background-color: #689d6a5c
background-color: #689d6a5c;
}
.dark-mode .text-diff>tbody>tr>td.old .delete {
background-color: #cc2412a8
.dark-mode .text-diff > tbody > tr > td.old .delete {
background-color: #cc2412a8;
}
.sidebar-header {
background: var(--bg_s)
background: var(--bg_s);
}
.dark-mode .CodeMirror-simplescroll-vertical div {
@ -118,11 +180,11 @@ domain("code.onedev.io") {
}
.dark-mode .blob-text-diff > tbody > tr.expander > td.skipped,
.dark-mode .blob-text-diff > tbody > tr.expander > td.expander a {
background: var(--bg1)
background: var(--bg1);
}
.dark-mode ::-webkit-scrollbar {
background-color: var(--bg1)
background-color: var(--bg1);
}
.sidebar-menu .menu-body .menu-link:hover,
@ -130,51 +192,56 @@ domain("code.onedev.io") {
.sidebar-menu .menu-body .menu-link.open,
.sidebar-menu .menu-body .menu-link.active,
.dark-mode .switch input:empty ~ span:after {
background-color: var(--bg3)
background-color: var(--bg3);
}
.dark-mode .btn.btn-light-danger {
color: var(--fg);
background-color: var(--red)
background-color: var(--red);
}
.dark-mode a,
.dark-mode a:not([href]):not([class]) {
color: var(--blue)
color: var(--blue);
}
.dark-mode ::-webkit-scrollbar-thumb,
.dark-mode .CodeMirror-simplescroll-vertical div,
.dark-mode .alert.alert-light {
background-color: var(--bg2)
background-color: var(--bg2);
}
.sidebar-footer {
background: var(--bg_s)
background: var(--bg_s);
}
.sidebar-menu .menu-header-text {
color: var(--fg2)
color: var(--fg2);
}
.dark-mode .btn.btn-outline-secondary,
.dark-mode .form-control,
.dark-mode .btn.btn-outline-secondary:hover:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.dark-mode
.btn.btn-outline-secondary:hover:not(.disabled):not(:disabled):not(
[disabled]
):not(.btn-text),
.dark-mode .select2-container-active .select2-choice,
.dark-mode li.selectable.active a,
.dark-mode a.selectable.active,
.dark-mode .select2-container .select2-choice,
.dark-mode .select2-container .select2-choices {
border-color: var(--bg4) !important
border-color: var(--bg4) !important;
}
.dark-mode a.link-primary:hover {
color: var(--green-dim) !important
color: var(--green-dim) !important;
}
.dark-mode .form-control:focus,
.btn.btn-outline-secondary:focus:not(.disabled):not(:disabled):not([disabled]):not(.btn-text) {
border-color: var(--fg4) !important
.btn.btn-outline-secondary:focus:not(.disabled):not(:disabled):not(
[disabled]
):not(.btn-text) {
border-color: var(--fg4) !important;
}
.dark-mode .text-muted,
@ -186,16 +253,16 @@ domain("code.onedev.io") {
.dark-mode .btn.btn-light-primary,
.markdown-rendered a:hover {
color: var(--green)
color: var(--green);
}
.sidebar-menu .menu-bullet {
background-color: var(--bg4)
background-color: var(--bg4);
}
.dark-mode .select2-container-multi .select2-choices .select2-search-choice {
color: var(--fg);
border-color: var(--bg4)
border-color: var(--bg4);
}
.dark-mode a {
@ -203,54 +270,62 @@ domain("code.onedev.io") {
}
.SimplePage.dark-mode:not(.force-ordinary-style) .main .form-control {
color: var(--fg)
color: var(--fg);
}
.dark-mode li.feedbackPanelERROR,
li.feedbackPanelFATAL {
background: var(--bg)
background: var(--bg);
}
.commit-dot-color1,
.commit-dot,
.commit-line-color1 {
fill: var(--blue);
stroke: var(--blue)
stroke: var(--blue);
}
.commit-dot-color2,
.commit-line-color2 {
stroke: var(--green);
fill: var(--green)
fill: var(--green);
}
.dark-mode .select2-results .select2-no-results {
color: var(--orange);
background-color: var(--bg2)
background-color: var(--bg2);
}
.websocket-error {
color: var(--fg);
}
.btn.btn-primary:hover:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.btn.btn-primary:focus:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.btn.btn-primary:active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.btn.btn-primary.active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.btn.btn-primary:hover:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.btn.btn-primary:focus:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.btn.btn-primary:active:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.btn.btn-primary.active:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.show > .btn.btn-primary.dropdown-toggle,
.show .btn.btn-primary.btn-dropdown,
.btn.btn-primary {
border-color: var(--green);
color: var(--fg);
background-color: var(--green-dim)
background-color: var(--green-dim);
}
.dark-mode .alert.alert-light-warning {
background-color: var(--bg_h)
background-color: var(--bg_h);
}
.dark-mode a.link-success:hover {
color: var(--blue) !important
color: var(--blue) !important;
}
a[href*="/~issues?query=%22Project%22+is+current+and+%22State%22+is+%22Open%22"] {
@ -266,7 +341,7 @@ domain("code.onedev.io") {
img[src*="/wicket/resource/io.onedev.commons.jsymbol.flowscript.symbols.ui.icon.iconlocator/local_function"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.python.symbols.ui.icons.iconlocator/methpri_obj"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.java.symbols.ui.icon.iconlocator/methpri_obj"] {
filter: brightness(0) saturate(100%) invert(38%) sepia(64%) saturate(3531%) hue-rotate(342deg) brightness(102%) contrast(97%);
filter: var(--fitler-reset) var(--filter-red);
}
/*blue*/
@ -276,21 +351,21 @@ domain("code.onedev.io") {
img[src*="/wicket/resource/io.onedev.commons.jsymbol.python.symbols.ui.icons.iconlocator/field_public_obj"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.python.symbols.ui.icons.iconlocator/class_obj"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.java.symbols.ui.icon.iconlocator/methdef_obj"] {
filter: brightness(0) saturate(100%) invert(74%) sepia(5%) saturate(1368%) hue-rotate(105deg) brightness(86%) contrast(80%);
filter: var(--filter-reset) var(--filter-red);
}
/*yellow*/
img[src*="/wicket/resource/io.onedev.commons.jsymbol.flowscript.symbols.ui.icon.iconlocator/class"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.scss.symbols.icon.iconlocator/css"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.java.symbols.ui.icon.iconlocator/methpro_obj"] {
filter: brightness(0) saturate(100%) invert(84%) sepia(27%) saturate(2230%) hue-rotate(335deg) brightness(106%) contrast(96%);
filter: var(--filter-reset) var(--filter-yellow);
}
/*aqua*/
img[src*="/wicket/resource/io.onedev.commons.jsymbol.flowscript.symbols.ui.icon.iconlocator/method"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.java.symbols.ui.icon.iconlocator/class_obj"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.java.symbols.ui.icon.iconlocator/annotation_obj"] {
filter: brightness(0) saturate(100%)invert(69%) sepia(19%) saturate(713%) hue-rotate(59deg) brightness(100%) contrast(85%);
filter: var(--filter-reset) var(--filter-aqua);
}
/*green*/
@ -298,18 +373,16 @@ domain("code.onedev.io") {
img[src*="/wicket/resource/io.onedev.commons.jsymbol.flowscript.symbols.ui.icon.iconlocator/exported_object"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.flowscript.symbols.ui.icon.iconlocator/exported_class"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.java.symbols.ui.icon.iconlocator/methpub_obj"] {
filter: brightness(0) saturate(100%) invert(63%) sepia(79%) saturate(429%) hue-rotate(21deg) brightness(98%) contrast(85%);
filter: var(--filter-reset) var(--filter-green);
}
/*purple*/
img[src*="/wicket/resource/io.onedev.commons.jsymbol.python.symbols.ui.icons.iconlocator/field_private_obj"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.java.symbols.ui.icon.iconlocator/field_private_obj"],
img[src*="/wicket/resource/io.onedev.commons.jsymbol.java.symbols.ui.icon.iconlocator/int_obj"] {
filter: brightness(0) saturate(100%) invert(80%) sepia(48%) saturate(1019%) hue-rotate(291deg) brightness(92%) contrast(77%);
filter: var(--filter-reset) var(--filter-purple);
}
.dark-mode .select2-results .select2-result-label {
color: var(--fg2);
}
@ -317,26 +390,29 @@ domain("code.onedev.io") {
code,
.dark-mode .code {
color: var(--blue);
background-color: var(--bg) !important
background-color: var(--bg) !important;
}
.select2-search input,
.dark-mode .select2-search input,
.dark-mode .btn.btn-light:hover:not(.disabled):not(:disabled):not([disabled]):not(.btn-text) {
.dark-mode
.btn.btn-light:hover:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
) {
background: var(--bg1) !important;
border-color: var(--bg4) !important;
color: var(--fg2) !important
color: var(--fg2) !important;
}
.dark-mode .markdown-rendered table.table tr:nth-child(odd) td {
background: var(--bg)
background: var(--bg);
}
.dark-mode .btn.btn-light,
.dark-mode .select2-drop-active,
.dark-mode .btn.btn-secondary {
background-color: var(--bg3);
border-color: var(--bg4)
border-color: var(--bg4);
}
.project-contribs .top-contributors .head .total-contribution span.additions,
@ -349,7 +425,7 @@ domain("code.onedev.io") {
}
.project-contribs .top-contributors .head .total-contribution span.deletions {
color: var(--red)
color: var(--red);
}
.sidebar a,
@ -366,61 +442,86 @@ domain("code.onedev.io") {
color: var(--fg) !important;
}
.dark-mode .btn.btn-secondary:hover:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.dark-mode .btn.btn-secondary:active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.dark-mode .btn.btn-secondary:hover:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.dark-mode .btn.btn-secondary:focus:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.dark-mode .btn.btn-secondary:active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.dark-mode .btn.btn-secondary.active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.dark-mode
.btn.btn-secondary:hover:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.dark-mode
.btn.btn-secondary:active:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.dark-mode
.btn.btn-secondary:hover:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.dark-mode
.btn.btn-secondary:focus:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.dark-mode
.btn.btn-secondary:active:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.dark-mode
.btn.btn-secondary.active:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.dark-mode .show > .btn.btn-secondary.dropdown-toggle,
.dark-mode .show .btn.btn-secondary.btn-dropdown,
.dark-mode .btn.btn-active-secondary.active:not(.btn-text):not(:disabled):not(.disabled):not([disabled]),
.btn.btn-light:active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
.btn.btn-light:focus:not(.disabled):not(:disabled):not([disabled]):not(.btn-text) {
.dark-mode
.btn.btn-active-secondary.active:not(.btn-text):not(:disabled):not(
.disabled
):not([disabled]),
.btn.btn-light:active:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
),
.btn.btn-light:focus:not(.disabled):not(:disabled):not([disabled]):not(
.btn-text
) {
border-color: var(--bg3) !important;
background-color: var(--bg1) !important
background-color: var(--bg1) !important;
}
.dark-mode a.link-info:hover,
.dark-mode a.link-info:focus {
color: var(--purple) !important
color: var(--purple) !important;
}
.CodeMirror-mark {
background: var(--green)
background: var(--green);
}
.dark-mode .cm-s-eclipse span.cm-comment,
.dark-mode .cm-s-eclipse span.cm-type {
color: var(--fg4)
color: var(--fg4);
}
.dark-mode .cm-s-eclipse span.cm-tag,
.dark-mode .cm-s-eclipse span.cm-attribute {
color: var(--blue)
color: var(--blue);
}
.dark-mode .cm-s-eclipse span.cm-keyword,
.dark-mode .cm-s-eclipse span.cm-error {
color: var(--red)
color: var(--red);
}
.dark-mode .cm-s-eclipse span.cm-qualifier {
color: var(--red)
color: var(--red);
}
.dark-mode .cm-s-eclipse span.cm-variable-2 {
color: var(--fg)
color: var(--fg);
}
.dark-mode .cm-s-eclipse span.cm-property,
.dark-mode .cm-s-eclipse span.cm-def {
color: var(--aqua)
color: var(--aqua);
}
.dark-mode .cm-s-eclipse span.cm-operator,
.dark-mode .cm-s-eclipse span.cm-atom {
color: var(--orange)
color: var(--orange);
}
.dark-mode .cm-s-eclipse span.cm-variable-3,
@ -428,21 +529,21 @@ domain("code.onedev.io") {
.dark-mode .cm-s-eclipse span.cm-string-2,
.dark-mode .cm-s-eclipse span.cm-string,
.dark-mode .cm-s-eclipse span.cm-number {
color: var(--yellow)
color: var(--yellow);
}
.dark-mode .cm-s-eclipse span.cm-builtin,
.dark-mode .cm-s-eclipse span.cm-variable {
color: var(--green)
color: var(--green);
}
.CodeMirror-linenumber,
.dark-mode .tree-theme-human span.tree-content a {
color: var(--fg3) !important
color: var(--fg3) !important;
}
.dark-mode .cm-s-eclipse.CodeMirror {
background: var(--bg);
color: var(--fg)
color: var(--fg);
}
}