Consolidate more CSS colors into variables (#21402)

Move more colors into variables. The only real notable change is the dot in the release timeline. Also, made the variable comments a bit more clear. <img width="279" alt="Screen Shot 2022-10-10 at 21 10 23" src="https://user-images.githubusercontent.com/115237/194938496-e5a21056-67c4-4219-9c68-134b0edf0e61.png"> <img width="88" alt="Screen Shot 2022-10-10 at 21 31 53" src="https://user-images.githubusercontent.com/115237/194939712-f666c43e-fb1a-4045-be52-1176391bd8ea.png"> <img width="90" alt="Screen Shot 2022-10-10 at 21 31 44" src="https://user-images.githubusercontent.com/115237/194939710-2e620c06-75a9-41b7-a3e1-18eab7a57614.png"> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2025-10-26 12:27:06 +00:00 · 2022-10-12 18:26:27 +02:00
parent 42b803554c
commit ac3a61ea17
4 changed files with 30 additions and 65 deletions
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1,12 +1,16 @@
 :root {
-  /* documented customizable variables */
+  /* fonts */
  --fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial";
  --fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
  --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
-  /* other variables */
+  /* backgrounds */
+  --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
+  --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
+  /* non-color variables */
  --border-radius: .28571429rem;
  --opacity-disabled: .55;
  --height-loading: 12rem;
+  /* base colors */
  --color-primary: #4183c4;
  --color-primary-dark-1: #3876b3;
  --color-primary-dark-2: #31699f;
@@ -61,7 +65,7 @@
  /* console colors */
  --color-console-fg: #ffffff;
  --color-console-bg: #171717;
-  /* colors */
+  /* named colors */
  --color-red: #db2828;
  --color-orange: #f2711c;
  --color-yellow: #fbbd08;
@@ -113,7 +117,6 @@
  --color-info-border: #a9d5de;
  --color-info-bg: #f8ffff;
  --color-info-text: #276f86;
-  /* target-based colors */
  --color-body: #ffffff;
  --color-text-dark: #080808;
  --color-text: #212121;
@@ -159,12 +162,9 @@
  --color-tooltip-text: #ffffff;
  --color-header-bar: #ffffff;
  --color-label-active-bg: #d0d0d0;
-  /* accent */
  --color-small-accent: var(--color-primary-light-6);
  --color-accent: var(--color-primary-light-4);
-  /* backgrounds */
-  --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
-  --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
+  --color-active-line: #fffbdd;
 }

 :root * {
@@ -351,6 +351,10 @@ a.commit-statuses-trigger {
  border-bottom: none !important;
 }

+.ui.dividing.header {
+  border-bottom-color: var(--color-secondary);
+}
+
 .page-content {
  margin-top: 15px;
 }
@@ -1374,7 +1378,7 @@ footer {
    max-width: calc(100vw - 1rem) !important;

    .links > * {
-      border-left: 1px solid var(--color-secondary);
+      border-left: 1px solid var(--color-secondary-dark-1);
      padding-left: 8px;
      margin-left: 5px;

@@ -1712,7 +1716,7 @@ a.ui.label:hover {

 .lines-code.active,
 .lines-code .active {
-  background: #fffbdd !important;
+  background: var(--color-active-line) !important;
 }

 .blame .lines-num {
@@ -2114,6 +2118,10 @@ table th[data-sortt-desc] {
  vertical-align: -.15em;
 }

+.minicolors-panel {
+  background: var(--color-secondary-dark-1) !important;
+}
+
 .labelspage {
  list-style: none;
  padding-top: 0;
@@ -2215,6 +2223,10 @@ table th[data-sortt-desc] {
  margin-top: inherit;
 }

+.ui.header .sub.header {
+  color: var(--color-text-light-1);
+}
+
 .flash-error details code,
 .flash-warning details code {
  display: block;
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1944,16 +1944,16 @@
          }

          .dot {
-            width: 9px;
-            height: 9px;
-            background-color: #ddd;
+            width: 10px;
+            height: 10px;
+            background-color: var(--color-secondary-dark-3);
            z-index: 9;
            position: absolute;
            display: block;
-            left: -5px;
+            left: -6px;
            top: 40px;
-            border-radius: 6px;
-            border: 1px solid #ffffff;
+            border-radius: 100%;
+            border: 2.5px solid var(--color-body);
          }
        }
      }
--- a/web_src/less/animations.less
+++ b/web_src/less/animations.less
@@ -24,7 +24,7 @@
  animation: isloadingspin 500ms infinite linear;
  border-width: 4px;
  border-style: solid;
-  border-color: #ececec #ececec #666 #666;
+  border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
  border-radius: 100%;
 }

--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -136,6 +136,7 @@
  --color-label-active-bg: #4c525e;
  --color-small-accent: var(--color-primary-light-5);
  --color-accent: var(--color-primary-light-3);
+  --color-active-line: #534d1b;
 }

 ::-webkit-calendar-picker-indicator {
@@ -231,10 +232,6 @@ a.ui.basic.green.label:hover {
  background-color: #a0cc75;
 }

-.repository .diff-stats li {
-  border-color: var(--color-secondary);
-}
-
 .ui.red.button,
 .ui.red.buttons .button {
  background-color: #7d3434;
@@ -245,24 +242,6 @@ a.ui.basic.green.label:hover {
  background-color: #984646;
 }

-.lines-code.active,
-.lines-code .active {
-  background: #534d1b !important;
-}
-
-.ui.header .sub.header {
-  color: var(--color-secondary-dark-6);
-}
-
-.ui.dividing.header {
-  border-bottom: 1px solid var(--color-secondary);
-}
-
-.minicolors-panel {
-  background: var(--color-secondary) !important;
-  border-color: #6a737d !important;
-}
-
 /* invert emojis that are hard to read otherwise */
 .emoji[aria-label="check mark"],
 .emoji[aria-label="currency exchange"],
@@ -287,36 +266,10 @@ a.ui.basic.green.label:hover {
  filter: invert(100%) hue-rotate(180deg);
 }

-.edit-diff > div > .ui.table {
-  border-left-color: var(--color-secondary) !important;
-  border-right-color: var(--color-secondary) !important;
-}
-
-footer .container .links > * {
-  border-left-color: #888;
-}
-
-.repository.release #release-list > li .detail .dot {
-  background-color: #505667;
-  border-color: #383c4a;
-}
-
-.tribute-container {
-  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
-}
-
-.repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
-  color: #2a2e3a;
-}
-
 img[src$="/img/matrix.svg"] {
  filter: invert(80%);
 }

-.is-loading::after {
-  border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
-}
-
 .markup-block-error {
  border: 1px solid rgba(121, 71, 66, .5) !important;
  border-bottom: none !important;