Replace filters with filter vars

src/onedev.user.css

@@ -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
+    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) {
+  .btn.btn-outline-secondary:focus:not(.disabled):not(:disabled):not(
-        border-color: var(--fg4) !important
+      [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:hover:not(.disabled):not(:disabled):not([disabled]):not(
-    .btn.btn-primary:focus:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
+      .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: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
-    .dark-mode .btn.btn-secondary:active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
+    .btn.btn-secondary:hover:not(.disabled):not(:disabled):not([disabled]):not(
-    .dark-mode .btn.btn-secondary:hover:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
+      .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
-    .dark-mode .btn.btn-secondary.active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
+    .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]),
+  .dark-mode
-    .btn.btn-light:active:not(.disabled):not(:disabled):not([disabled]):not(.btn-text),
+    .btn.btn-active-secondary.active:not(.btn-text):not(:disabled):not(
-    .btn.btn-light:focus:not(.disabled):not(:disabled):not([disabled]):not(.btn-text) {
+      .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);
   }
 }