Use CSS Vars for primary color (#13361)

* Use CSS Vars for primary color - Create 15 color shades derived from primary color - Change blue-ish colors to use that primary color - Move styles for scrollbars, selection from arc-green to base - Remove obsolete arc-green styles that now use those variables * simplify webkit scrollbar style Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2025-10-31 21:28:11 +09:00 · 2020-10-31 04:52:10 +01:00
parent b5e974c8a5
commit 6c323678d0
4 changed files with 125 additions and 121 deletions
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -6,6 +6,22 @@
  /* other variables */
  --fonts-regular: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
  --border-radius: .28571429rem;
+  --color-primary: #4183c4;
+  --color-primary-dark-1: #3876b3;
+  --color-primary-dark-2: #31699f;
+  --color-primary-dark-3: #2b5c8b;
+  --color-primary-dark-4: #254f77;
+  --color-primary-dark-5: #193450;
+  --color-primary-dark-6: #0c1a28;
+  --color-primary-dark-7: #04080c;
+  --color-primary-light-1: #548fca;
+  --color-primary-light-2: #679cd0;
+  --color-primary-light-3: #7aa8d6;
+  --color-primary-light-4: #8db5dc;
+  --color-primary-light-5: #b3cde7;
+  --color-primary-light-6: #d9e6f3;
+  --color-primary-light-7: #f4f8fb;
+  --color-body: #fff;
 }

 :root:lang(ja) {
@@ -96,7 +112,7 @@ h5,
 }

 body {
-  background-color: #ffffff;
+  background-color: var(--color-body);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
@@ -110,10 +126,47 @@ table {
  border-collapse: collapse;
 }

-a {
+/* firefox scroll bars */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-primary) transparent;
+}
+
+/* webkit scrollbars */
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 6px var(--color-primary);
+  border: 2px solid transparent;
+  border-radius: 5px !important;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  box-shadow: inset 0 0 0 6px var(--color-primary);
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 6px var(--color-primary-dark-2);
+}
+
+::selection,
+.CodeMirror-selected {
+  background: var(--color-primary-light-1) !important;
+  color: #fff !important;
+}
+
+a,
+.ui.breadcrumb a {
+  color: var(--color-primary);
  cursor: pointer;
 }

+a:hover,
+.ui.breadcrumb a:hover {
+  color: var(--color-primary-dark-2);
+}
+
 .rounded {
  border-radius: var(--border-radius) !important;
 }
@@ -331,13 +384,13 @@ code,
    }

    &.blue {
-      color: #428bca !important;
+      color: var(--color-primary-dark-1) !important;

      a {
-        color: #1155cc !important;
+        color: var(--color-primary) !important;

        &:hover {
-          color: #428bca !important;
+          color: var(--color-primary-dark-2) !important;
        }
      }
    }
@@ -568,7 +621,7 @@ code,
    }

    &.blue {
-      background-color: #428bca !important;
+      background-color: var(--color-primary) !important;
    }

    &.black {
@@ -623,7 +676,7 @@ code,
    }

    &.blue {
-      border-color: #428bca !important;
+      border-color: var(--color-primary) !important;
    }

    &.black {
@@ -740,7 +793,7 @@ footer {
    .fa {
      width: 16px;
      text-align: center;
-      color: #428bca;
+      color: var(--color-primary);
    }

    .links > * {
@@ -1150,10 +1203,42 @@ i.icon.centerlock {
  font-size: .85714286rem;
 }

+.ui.blue.button,
+.ui.blue.buttons .button {
+  background-color: var(--color-primary) !important;
+}
+
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover {
+  background-color: var(--color-primary-dark-2) !important;
+}
+
+.ui.blue.button:focus,
+.ui.blue.buttons .button:focus {
+  background-color: var(--color-primary-dark-3) !important;
+}
+
 .ui.basic.blue.button,
 .ui.basic.blue.buttons .button {
-  box-shadow: inset 0 0 0 1px #1678c2 !important;
-  color: #1678c2 !important;
+  box-shadow: inset 0 0 0 1px var(--color-primary) !important;
+  color: #fff !important;
+}
+
+.ui.basic.blue.button:hover,
+.ui.basic.blue.buttons .button:hover {
+  box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important;
+}
+
+.ui.basic.blue.button:focus,
+.ui.basic.blue.buttons .button:focus {
+  box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important;
+}
+
+.ui.blue.label,
+.ui.blue.labels .label,
+.repository .segment.reactions .ui.label.basic.blue {
+  background-color: var(--color-primary) !important;
+  border-color: var(--color-primary-dark-2) !important;
 }

 .ui.label > img {
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -345,7 +345,7 @@

          &.octicon-file-directory,
          &.octicon-file-submodule {
-            color: #1e70bf;
+            color: var(--color-primary);
          }
        }
      }
@@ -717,7 +717,7 @@

    .pull-desc {
      code {
-        color: #0166e6;
+        color: var(--color-primary);
      }
    }

--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -145,11 +145,11 @@ a.blob-excerpt {
  justify-content: center;
  align-items: center;
  width: 100%;
-  background: #daecfe;
+  background: var(--color-primary-light-5);
 }

 a.blob-excerpt:hover {
-  background: #428bca;
+  background: var(--color-primary);
  color: #fff;
 }

--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1,3 +1,22 @@
+:root {
+  --color-primary: #87ab63;
+  --color-primary-dark-1: #93b373;
+  --color-primary-dark-2: #9fbc82;
+  --color-primary-dark-3: #abc492;
+  --color-primary-dark-4: #b7cda1;
+  --color-primary-dark-5: #cfddc1;
+  --color-primary-dark-6: #e7eee0;
+  --color-primary-dark-7: #f8faf6;
+  --color-primary-light-1: #7a9e55;
+  --color-primary-light-2: #6c8c4c;
+  --color-primary-light-3: #5f7b42;
+  --color-primary-light-4: #516939;
+  --color-primary-light-5: #364626;
+  --color-primary-light-6: #1b2313;
+  --color-primary-light-7: #080b06;
+  --color-body: #383c4a;
+}
+
 /* Background */

 .chroma {
@@ -401,63 +420,13 @@
 }

 body {
-  background: #383c4a;
  color: #9e9e9e;
 }

-/* firefox scroll bars */
-
-* {
-  scrollbar-width: thin;
-  scrollbar-color: #87ab63 rgba(255, 255, 255, .1);
-}
-
-/* webkit scrollbars */
-
-::-webkit-scrollbar {
-  -webkit-appearance: none !important;
-  width: 10px !important;
-  height: 10px !important;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 0 !important;
-  background: rgba(255, 255, 255, .1) !important;
-}
-
-::-webkit-scrollbar-thumb {
-  cursor: pointer !important;
-  border-radius: 5px !important;
-  -webkit-transition: color .2s ease !important;
-  transition: color .2s ease !important;
-  background: #87ab63 !important;
-}
-
-::-webkit-scrollbar-thumb:window-inactive {
-  background: #87ab63 !important;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #87ab63 !important;
-}
-
-::selection {
-  background: #87ab63 !important;
-  color: #fff !important;
-}
-
 ::placeholder {
  color: #7f7f7f !important;
 }

-a {
-  color: #87ab63;
-}
-
-a:hover {
-  color: #a0cc75;
-}
-
 .ui.card > .extra a:not(.ui):hover,
 .ui.cards > .card > .extra a:not(.ui):hover {
  color: #a0cc75;
@@ -718,16 +687,7 @@ a.ui.basic.green.label:hover {
  color: #9e9e9e;
 }

-.ui.blue.label,
-.ui.blue.labels .label,
 .repository .segment.reactions .ui.label.basic.blue {
-  background-color: #26577b !important;
-  border-color: #26577b !important;
-}
-
-.repository .segment.reactions .ui.label.basic.blue {
-  color: #a0cc75 !important;
-  background: #305020 !important;
  border-color: #404552 !important;
 }

@@ -739,16 +699,6 @@ a.ui.basic.green.label:hover {
  background: #565454;
 }

-.ui.blue.button,
-.ui.blue.buttons .button {
-  background-color: #87ab63;
-}
-
-.ui.blue.button:hover,
-.ui.blue.buttons .button:hover {
-  background-color: #a0cc75;
-}
-
 .ui.form input:not([type]),
 .ui.form textarea,
 .ui.form input[type="date"],
@@ -893,6 +843,13 @@ a.ui.basic.green.label:hover {
  box-shadow: none;
 }

+.ui.blue.label,
+.ui.blue.labels .label,
+.repository .segment.reactions .ui.label.basic.blue {
+  background-color: var(--color-primary-light-2) !important;
+  border-color: var(--color-primary) !important;
+}
+
 .ui.labeled.button:not([class*="left labeled"]) > .label,
 .ui[class*="left labeled"].button > .button {
  background: #404552;
@@ -1250,10 +1207,6 @@ td.blob-hunk {
  border-top: 1px solid #4c505c;
 }

-.ui .text.blue {
-  color: #87ab63 !important;
-}
-
 .ui.selection.active.dropdown,
 .ui.selection.active.dropdown .menu {
  border-color: #4e5361;
@@ -1573,23 +1526,6 @@ input {
  color: #7c9b5e;
 }

-.ui.blue.button:focus,
-.ui.blue.buttons .button:focus {
-  background-color: #a27558;
-}
-
-.ui.basic.blue.button:hover,
-.ui.basic.blue.buttons .button:hover {
-  box-shadow: 0 0 0 1px #87ab63 inset !important;
-  color: #87ab63 !important;
-}
-
-.ui.basic.blue.button:focus,
-.ui.basic.blue.buttons .button:focus {
-  box-shadow: 0 0 0 1px #87ab63 inset !important;
-  color: #87ab63 !important;
-}
-
 .repository.labels .ui.basic.black.label {
  background-color: #bbbbbb !important;
 }
@@ -1712,12 +1648,6 @@ a.ui.labels .label:hover {
  border-bottom: 1px dashed #4c505c;
 }

-.ui.basic.blue.button,
-.ui.basic.blue.buttons .button {
-  box-shadow: 0 0 0 1px #87ab63 inset !important;
-  color: #87ab63 !important;
-}
-
 .ui.text.yellow,
 .yellow.icon.icon.icon {
  color: #e4ac07 !important;
@@ -1768,11 +1698,6 @@ a.ui.labels .label:hover {
  color: #9e9e9e;
 }

-.ui.blue.button:active,
-.ui.blue.buttons .button:active {
-  background-color: #a27558;
-}
-
 #git-graph-container li a {
  color: #c79575;
 }
@@ -1952,12 +1877,6 @@ a.ui.labels .label:hover {
    background-color: #2e323e;
  }

-  ::selection,
-  ::-moz-selection,
-  .CodeMirror-selected {
-    background: #42402f !important;
-  }
-
  &.cm-s-default,
  &.cm-s-paper {
    .cm-property {