From 79a4c80f8d81e67371f6ff1f8d55bd003ab01208 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 29 May 2023 14:45:22 +0200
Subject: [PATCH] Rework button coloring, add focus and active colors (#24507)
We were missing overrides for `:focus` and `:active` styles which I've
added here along with two new color variants `dark-1` and `dark-2` for
them. Fomantic UI has 4 different colors but I think 3 are sufficient. I
also changed it on arc-green so button goes darker when pressed.
<img width="129" alt="Screenshot 2023-05-04 at 01 21 43"
src="https://user-images.githubusercontent.com/115237/236072060-7389276a-275b-4d3e-aa52-20b37c6e6d92.png">
<img width="130" alt="Screenshot 2023-05-04 at 01 17 59"
src="https://user-images.githubusercontent.com/115237/236071818-0e46414a-33db-4bb2-a3bd-35b514a8a2d0.png">
<img width="129" alt="Screenshot 2023-05-04 at 01 18 07"
src="https://user-images.githubusercontent.com/115237/236071819-562b1e38-541f-432b-b3b6-48e6d7594d00.png">
<img width="131" alt="Screenshot 2023-05-04 at 01 18 13"
src="https://user-images.githubusercontent.com/115237/236071820-89b7dba9-ce6c-48e5-a075-9053063e6ad3.png">
<img width="133" alt="Screenshot 2023-05-04 at 01 18 30"
src="https://user-images.githubusercontent.com/115237/236071823-b6fe2df4-b3f0-4dc8-97a8-f90ba6d19bec.png">
<img width="133" alt="Screenshot 2023-05-04 at 01 18 40"
src="https://user-images.githubusercontent.com/115237/236071824-b02ce61a-2367-4c29-8a25-45f231f5e5ee.png">
One misc change includes some fixes to editor and slightly darker
selection.
<img width="1245" alt="Screenshot 2023-05-28 at 19 16 19"
src="https://github.com/go-gitea/gitea/assets/115237/1ea4a4b6-26ba-45af-9cbc-5b8c476c2338">
---
templates/repo/clone_buttons.tmpl | 4 +-
templates/repo/clone_script.tmpl | 8 +-
web_src/css/base.css | 508 +--------------
web_src/css/editor/fileeditor.css | 2 -
web_src/css/index.css | 1 +
web_src/css/modules/button.css | 816 +++++++++++++++++++++++++
web_src/css/repo.css | 9 +
web_src/css/themes/theme-arc-green.css | 56 +-
8 files changed, 907 insertions(+), 497 deletions(-)
create mode 100644 web_src/css/modules/button.css
diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
index 656a487915..e451c0afd6 100644
--- a/templates/repo/clone_buttons.tmpl
+++ b/templates/repo/clone_buttons.tmpl
@@ -1,11 +1,11 @@
<!-- there is always at least one button (by context/repo.go) -->
{{if $.CloneButtonShowHTTPS}}
- <button class="ui basic small compact clone button gt-no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
+ <button class="ui small compact clone button gt-no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
HTTPS
</button>
{{end}}
{{if $.CloneButtonShowSSH}}
- <button class="ui basic small compact clone button gt-no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
+ <button class="ui small compact clone button gt-no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
SSH
</button>
{{end}}
diff --git a/templates/repo/clone_script.tmpl b/templates/repo/clone_script.tmpl
index 21e78727ff..0797b400d8 100644
--- a/templates/repo/clone_script.tmpl
+++ b/templates/repo/clone_script.tmpl
@@ -13,9 +13,13 @@
if (httpsBtn) {
httpsBtn.textContent = window.origin.split(':')[0].toUpperCase();
- httpsBtn.classList[!isSSH ? 'add' : 'remove']('primary');
+ httpsBtn.classList.toggle('primary', !isSSH);
+ httpsBtn.classList.toggle('basic', isSSH);
+ }
+ if (sshBtn) {
+ sshBtn.classList.toggle('primary', isSSH);
+ sshBtn.classList.toggle('basic', !isSSH);
}
- if (sshBtn) sshBtn.classList[isSSH ? 'add' : 'remove']('primary');
const btn = isSSH ? sshBtn : httpsBtn;
if (!btn) return;
diff --git a/web_src/css/base.css b/web_src/css/base.css
index ef0193e13c..204a9f0ce9 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -43,6 +43,8 @@
--color-primary-alpha-70: #4183c4b3;
--color-primary-alpha-80: #4183c4cc;
--color-primary-alpha-90: #4183c4e1;
+ --color-primary-hover: var(--color-primary-dark-1);
+ --color-primary-active: var(--color-primary-dark-2);
--color-secondary: #dedede;
--color-secondary-dark-1: #cecece;
--color-secondary-dark-2: #bfbfbf;
@@ -70,6 +72,8 @@
--color-secondary-alpha-70: #dededeb3;
--color-secondary-alpha-80: #dededecc;
--color-secondary-alpha-90: #dededee1;
+ --color-secondary-hover: var(--color-secondary-dark-1);
+ --color-secondary-active: var(--color-secondary-dark-2);
/* console colors */
--color-console-fg: #ffffff;
--color-console-bg: #252a2f;
@@ -102,6 +106,32 @@
--color-pink-light: #e86bb1;
--color-brown-light: #c58b66;
--color-black-light: #525558;
+ /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
+ --color-red-dark-1: #c82121;
+ --color-orange-dark-1: #e6630d;
+ --color-yellow-dark-1: #e5ac04;
+ --color-olive-dark-1: #a3b816;
+ --color-green-dark-1: #1ea73e;
+ --color-teal-dark-1: #00a39c;
+ --color-blue-dark-1: #1e78bb;
+ --color-violet-dark-1: #5a30b5;
+ --color-purple-dark-1: #932eb4;
+ --color-pink-dark-1: #db228a;
+ --color-brown-dark-1: #955d39;
+ --color-black-dark-1: #18191a;
+ /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
+ --color-red-dark-2: #b11e1e;
+ --color-orange-dark-2: #cc580c;
+ --color-yellow-dark-2: #cc9903;
+ --color-olive-dark-2: #91a313;
+ --color-green-dark-2: #1a9537;
+ --color-teal-dark-2: #00918a;
+ --color-blue-dark-2: #1a6aa6;
+ --color-violet-dark-2: #502aa1;
+ --color-purple-dark-2: #8229a0;
+ --color-pink-dark-2: #c21e7b;
+ --color-brown-dark-2: #845232;
+ --color-black-dark-2: #161617;
/* other colors */
--color-grey: #707070;
--color-grey-light: #838383;
@@ -394,338 +424,6 @@ a.label,
text-decoration: none !important;
}
-.ui.red.labels .label,
-.ui.ui.ui.red.label,
-.ui.red.button,
-.ui.red.buttons .button {
- background: var(--color-red);
-}
-
-.ui.red.button:hover,
-.ui.red.buttons .button:hover {
- background: var(--color-red-light);
-}
-
-.ui.basic.red.buttons .button,
-.ui.basic.red.button {
- color: var(--color-red);
- border-color: var(--color-red);
-}
-
-.ui.basic.red.buttons .button:hover,
-.ui.basic.red.button:hover {
- color: var(--color-red-light);
- border-color: var(--color-red-light);
-}
-
-.ui.orange.labels .label,
-.ui.ui.ui.orange.label,
-.ui.orange.button,
-.ui.orange.buttons .button {
- background: var(--color-orange);
-}
-
-.ui.orange.button:hover,
-.ui.orange.buttons .button:hover {
- background: var(--color-orange-light);
-}
-
-.ui.basic.orange.buttons .button,
-.ui.basic.orange.button {
- color: var(--color-orange);
- border-color: var(--color-orange);
-}
-
-.ui.basic.orange.buttons .button:hover,
-.ui.basic.orange.button:hover {
- color: var(--color-orange-light);
- border-color: var(--color-orange-light);
-}
-
-.ui.yellow.labels .label,
-.ui.ui.ui.yellow.label,
-.ui.yellow.button,
-.ui.yellow.buttons .button {
- background: var(--color-yellow);
-}
-
-.ui.yellow.button:hover,
-.ui.yellow.buttons .button:hover {
- background: var(--color-yellow-light);
-}
-
-.ui.basic.yellow.buttons .button,
-.ui.basic.yellow.button {
- color: var(--color-yellow);
- border-color: var(--color-yellow);
-}
-
-.ui.basic.yellow.buttons .button:hover,
-.ui.basic.yellow.button:hover {
- color: var(--color-yellow-light);
- border-color: var(--color-yellow-light);
-}
-
-.ui.olive.labels .label,
-.ui.ui.ui.olive.label,
-.ui.olive.button,
-.ui.olive.buttons .button {
- background: var(--color-olive);
-}
-
-.ui.olive.button:hover,
-.ui.olive.buttons .button:hover {
- background: var(--color-olive-light);
-}
-
-.ui.basic.olive.buttons .button,
-.ui.basic.olive.button {
- color: var(--color-olive);
- border-color: var(--color-olive);
-}
-
-.ui.basic.olive.buttons .button:hover,
-.ui.basic.olive.button:hover {
- color: var(--color-olive-light);
- border-color: var(--color-olive-light);
-}
-
-.ui.green.labels .label,
-.ui.ui.ui.green.label,
-.ui.green.button,
-.ui.green.buttons .button {
- background: var(--color-green);
-}
-
-.ui.green.button:hover,
-.ui.green.buttons .button:hover {
- background: var(--color-green-light);
-}
-
-.ui.basic.green.buttons .button,
-.ui.basic.green.button {
- color: var(--color-green);
- border-color: var(--color-green);
-}
-
-.ui.basic.green.buttons .button:hover,
-.ui.basic.green.button:hover {
- color: var(--color-green-light);
- border-color: var(--color-green-light);
-}
-
-.ui.teal.labels .label,
-.ui.ui.ui.teal.label,
-.ui.teal.button,
-.ui.teal.buttons .button {
- background: var(--color-teal);
-}
-
-.ui.teal.button:hover,
-.ui.teal.buttons .button:hover {
- background: var(--color-teal-light);
-}
-
-.ui.basic.teal.buttons .button,
-.ui.basic.teal.button {
- color: var(--color-teal);
- border-color: var(--color-teal);
-}
-
-.ui.basic.teal.buttons .button:hover,
-.ui.basic.teal.button:hover {
- color: var(--color-teal-light);
- border-color: var(--color-teal-light);
-}
-
-.ui.blue.labels .label,
-.ui.ui.ui.blue.label,
-.ui.blue.button,
-.ui.blue.buttons .button {
- background: var(--color-blue);
-}
-
-.ui.blue.button:hover,
-.ui.blue.buttons .button:hover {
- background: var(--color-blue-light);
-}
-
-.ui.basic.blue.buttons .button,
-.ui.basic.blue.button {
- color: var(--color-blue);
- border-color: var(--color-blue);
-}
-
-.ui.basic.blue.buttons .button:hover,
-.ui.basic.blue.button:hover {
- color: var(--color-blue-light);
- border-color: var(--color-blue-light);
-}
-
-.ui.violet.labels .label,
-.ui.ui.ui.violet.label,
-.ui.violet.button,
-.ui.violet.buttons .button {
- background: var(--color-violet);
-}
-
-.ui.violet.button:hover,
-.ui.violet.buttons .button:hover {
- background: var(--color-violet-light);
-}
-
-.ui.basic.violet.buttons .button,
-.ui.basic.violet.button {
- color: var(--color-violet);
- border-color: var(--color-violet);
-}
-
-.ui.basic.violet.buttons .button:hover,
-.ui.basic.violet.button:hover {
- color: var(--color-violet-light);
- border-color: var(--color-violet-light);
-}
-
-.ui.purple.labels .label,
-.ui.ui.ui.purple.label,
-.ui.purple.button,
-.ui.purple.buttons .button {
- background: var(--color-purple);
-}
-
-.ui.purple.button:hover,
-.ui.purple.buttons .button:hover {
- background: var(--color-purple-light);
-}
-
-.ui.basic.purple.buttons .button,
-.ui.basic.purple.button {
- color: var(--color-purple);
- border-color: var(--color-purple);
-}
-
-.ui.basic.purple.buttons .button:hover,
-.ui.basic.purple.button:hover {
- color: var(--color-purple-light);
- border-color: var(--color-purple-light);
-}
-
-.ui.pink.labels .label,
-.ui.ui.ui.pink.label,
-.ui.pink.button,
-.ui.pink.buttons .button {
- background: var(--color-pink);
-}
-
-.ui.pink.button:hover,
-.ui.pink.buttons .button:hover {
- background: var(--color-pink-light);
-}
-
-.ui.basic.pink.buttons .button,
-.ui.basic.pink.button {
- color: var(--color-pink);
- border-color: var(--color-pink);
-}
-
-.ui.basic.pink.buttons .button:hover,
-.ui.basic.pink.button:hover {
- color: var(--color-pink-light);
- border-color: var(--color-pink-light);
-}
-
-.ui.brown.labels .label,
-.ui.ui.ui.brown.label,
-.ui.brown.button,
-.ui.brown.buttons .button {
- background: var(--color-brown);
-}
-
-.ui.brown.button:hover,
-.ui.brown.buttons .button:hover {
- background: var(--color-brown-light);
-}
-
-.ui.basic.brown.buttons .button,
-.ui.basic.brown.button {
- color: var(--color-brown);
- border-color: var(--color-brown);
-}
-
-.ui.basic.brown.buttons .button:hover,
-.ui.basic.brown.button:hover {
- color: var(--color-brown-light);
- border-color: var(--color-brown-light);
-}
-
-.ui.grey.labels .label,
-.ui.ui.ui.grey.label,
-.ui.grey.button,
-.ui.grey.buttons .button {
- background: var(--color-grey);
-}
-
-.ui.grey.button:hover,
-.ui.grey.buttons .button:hover {
- background: var(--color-grey-light);
-}
-
-.ui.basic.grey.buttons .button,
-.ui.basic.grey.button {
- color: var(--color-grey);
- border-color: var(--color-grey);
-}
-
-.ui.basic.grey.buttons .button:hover,
-.ui.basic.grey.button:hover {
- color: var(--color-grey-light);
- border-color: var(--color-grey-light);
-}
-
-.ui.black.labels .label,
-.ui.ui.ui.black.label,
-.ui.black.button,
-.ui.black.buttons .button {
- background: var(--color-black);
-}
-
-.ui.black.button:hover,
-.ui.black.buttons .button:hover {
- background: var(--color-black-light);
-}
-
-.ui.basic.black.buttons .button,
-.ui.basic.black.button {
- color: var(--color-black);
- border-color: var(--color-black);
-}
-
-.ui.basic.black.buttons .button:hover,
-.ui.basic.black.button:hover {
- color: var(--color-black-light);
- border-color: var(--color-black-light);
-}
-
-.ui.negative.buttons .button,
-.ui.negative.button {
- background: var(--color-red);
-}
-
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover {
- background: var(--color-red-light);
-}
-
-.ui.positive.buttons .button,
-.ui.positive.button {
- background: var(--color-green);
-}
-
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover {
- background: var(--color-green-light);
-}
-
.ui.search > .results {
background: var(--color-body);
border-color: var(--color-secondary);
@@ -2192,152 +1890,6 @@ a.ui.active.label:hover {
font-size: 0.85714286rem;
}
-.ui.button {
- background: var(--color-button);
- border: 1px solid var(--color-light-border);
- color: var(--color-text);
-}
-
-.page-content .ui.button {
- box-shadow: none !important;
-}
-
-.ui.button:focus,
-.ui.button:hover {
- background: var(--color-hover);
- color: var(--color-text);
-}
-
-.ui.active.button,
-.ui.button:active,
-.ui.active.button:active,
-.ui.active.button:hover {
- background: var(--color-active);
- color: var(--color-text);
-}
-
-.ui.button.no-text .icon {
- margin: 0 !important;
-}
-
-.ui.buttons .button:first-child {
- border-left: 1px solid var(--color-light-border);
-}
-
-.ui.buttons .button + .button {
- border-left: none;
-}
-
-/* a ghost button is a button without border */
-.button.button-ghost {
- background: transparent;
- border: none;
- color: inherit;
- margin: 0;
- padding: 0;
-}
-
-.button.button-ghost:hover {
- background: var(--color-hover);
-}
-
-.button.button-ghost:active {
- background: var(--color-active);
-}
-
-.two-toggle-buttons .button:not(.active):first-of-type {
- border-right: none;
-}
-
-.two-toggle-buttons .button.active:last-of-type {
- border-left: 1px solid var(--color-light-border);
-}
-
-.ui.labeled.button.disabled > .button,
-.ui.basic.buttons .button,
-.ui.basic.button {
- color: var(--color-text-light);
- background: var(--color-light);
-}
-
-.ui.basic.buttons .button:hover,
-.ui.basic.button:hover {
- color: var(--color-text);
- background: var(--color-hover);
-}
-
-.ui.basic.buttons .button:focus,
-.ui.basic.button:focus,
-.ui.basic.buttons .button:active,
-.ui.basic.button:active,
-.ui.basic.buttons .active.button,
-.ui.basic.active.button,
-.ui.basic.buttons .active.button:hover,
-.ui.basic.active.button:hover {
- color: var(--color-text);
- background: var(--color-active);
-}
-
-.ui.labeled.button > .label {
- border-color: var(--color-light-border);
-}
-
-.ui.labeled.icon.buttons > .button > .icon,
-.ui.labeled.icon.button > .icon {
- background: var(--color-hover);
-}
-
-.ui.primary.button,
-.ui.primary.buttons .button {
- background-color: var(--color-primary) !important;
- color: var(--color-primary-contrast) !important;
-}
-
-.ui.primary.button:hover,
-.ui.primary.buttons .button:hover {
- background-color: var(--color-primary-dark-2) !important;
-}
-
-.ui.primary.button:focus,
-.ui.primary.buttons .button:focus {
- background-color: var(--color-primary-dark-3) !important;
-}
-
-.ui.basic.primary.button,
-.ui.basic.primary.buttons .button {
- box-shadow: inset 0 0 0 1px var(--color-primary) !important;
- color: var(--color-primary-contrast) !important;
-}
-
-.ui.basic.primary.button:hover,
-.ui.basic.primary.buttons .button:hover {
- box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important;
-}
-
-.ui.basic.primary.button:focus,
-.ui.basic.primary.buttons .button:focus {
- box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important;
-}
-
-.ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button {
- color: var(--color-secondary-dark-6) !important;
-}
-
-.ui.basic.secondary.buttons .button:hover,
-.ui.basic.secondary.button:hover,
-.ui.basic.secondary.buttons .button:active,
-.ui.basic.secondary.button:active {
- color: var(--color-secondary-dark-8) !important;
- border-color: var(--color-secondary-dark-1) !important;
-}
-
-.ui.basic.secondary.button:focus,
-.ui.basic.secondary.buttons .button:focus {
- color: var(--color-secondary-dark-8) !important;
- border-color: var(--color-secondary-dark-3) !important;
-}
-
.ui.primary.label,
.ui.primary.labels .label,
.ui.ui.ui.primary.label {
diff --git a/web_src/css/editor/fileeditor.css b/web_src/css/editor/fileeditor.css
index 62ac915505..444ee8c7e7 100644
--- a/web_src/css/editor/fileeditor.css
+++ b/web_src/css/editor/fileeditor.css
@@ -82,6 +82,4 @@
.edit-diff > div > .ui.table {
border-top: none !important;
border-bottom: none !important;
- border-left: 1px solid var(--color-secondary) !important;
- border-right: 1px solid var(--color-secondary) !important;
}
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 03f9d53a31..90ee41f524 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -1,5 +1,6 @@
@import "./modules/normalize.css";
@import "./modules/animations.css";
+@import "./modules/button.css";
@import "./modules/tippy.css";
@import "./modules/modal.css";
@import "./modules/breadcrumb.css";
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
new file mode 100644
index 0000000000..1f2d2a4494
--- /dev/null
+++ b/web_src/css/modules/button.css
@@ -0,0 +1,816 @@
+/* this contains override styles for buttons and related elements */
+
+.ui.button {
+ background: var(--color-button);
+ border: 1px solid var(--color-light-border);
+ color: var(--color-text);
+}
+
+/* a ghost button is a button without border */
+.button.button-ghost {
+ background: transparent;
+ border: none;
+ color: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+.button.button-ghost:hover {
+ background: var(--color-hover);
+}
+
+.button.button-ghost:active {
+ background: var(--color-active);
+}
+
+.ui.button.button-link {
+ background: transparent;
+ border: none;
+ color: inherit;
+}
+
+.page-content .ui.button {
+ box-shadow: none !important;
+}
+
+.ui.button:focus,
+.ui.button:hover {
+ background: var(--color-hover);
+ color: var(--color-text);
+}
+
+.ui.active.button,
+.ui.button:active,
+.ui.active.button:active,
+.ui.active.button:hover {
+ background: var(--color-active);
+ color: var(--color-text);
+}
+
+.ui.button.no-text .icon {
+ margin: 0 !important;
+}
+
+.ui.buttons .button:first-child {
+ border-left: 1px solid var(--color-light-border);
+}
+
+.ui.buttons .button + .button {
+ border-left: none;
+}
+
+.ui.button.button-link:hover {
+ color: var(--color-primary);
+}
+
+.two-toggle-buttons .button:not(.active):first-of-type {
+ border-right: none;
+}
+
+.two-toggle-buttons .button.active:last-of-type {
+ border-left: 1px solid var(--color-light-border);
+}
+
+.ui.labeled.button.disabled > .button,
+.ui.basic.buttons .button,
+.ui.basic.button {
+ color: var(--color-text-light);
+ background: var(--color-light);
+}
+
+.ui.basic.buttons .button:hover,
+.ui.basic.button:hover {
+ color: var(--color-text);
+ background: var(--color-hover);
+}
+
+.ui.basic.buttons .button:focus,
+.ui.basic.button:focus,
+.ui.basic.buttons .button:active,
+.ui.basic.button:active,
+.ui.basic.buttons .active.button,
+.ui.basic.active.button,
+.ui.basic.buttons .active.button:hover,
+.ui.basic.active.button:hover {
+ color: var(--color-text);
+ background: var(--color-active);
+}
+
+.ui.labeled.button > .label {
+ border-color: var(--color-light-border);
+}
+
+.ui.labeled.icon.buttons > .button > .icon,
+.ui.labeled.icon.button > .icon {
+ background: var(--color-hover);
+}
+
+/* primary */
+
+.ui.primary.labels .label,
+.ui.ui.ui.primary.label,
+.ui.primary.button,
+.ui.primary.buttons .button {
+ background: var(--color-primary);
+}
+
+.ui.primary.button:hover,
+.ui.primary.buttons .button:hover,
+.ui.primary.button:focus,
+.ui.primary.buttons .button:focus {
+ background: var(--color-primary-hover);
+}
+
+.ui.primary.button:active,
+.ui.primary.buttons .button:active {
+ background: var(--color-primary-active);
+}
+
+.ui.basic.primary.buttons .button,
+.ui.basic.primary.button {
+ color: var(--color-primary);
+ border-color: var(--color-primary);
+}
+
+.ui.basic.primary.buttons .button:hover,
+.ui.basic.primary.button:hover,
+.ui.basic.primary.buttons .button:focus,
+.ui.basic.primary.button:focus {
+ color: var(--color-primary-hover);
+ border-color: var(--color-primary-hover);
+}
+
+.ui.basic.primary.buttons .button:active,
+.ui.basic.primary.button:active {
+ color: var(--color-primary-active);
+ border-color: var(--color-primary-active);
+}
+
+/* secondary */
+
+.ui.secondary.labels .label,
+.ui.ui.ui.secondary.label,
+.ui.secondary.button,
+.ui.secondary.buttons .button {
+ background: var(--color-secondary);
+ color: var(--color-text);
+}
+
+.ui.secondary.button:hover,
+.ui.secondary.buttons .button:hover,
+.ui.secondary.button:focus,
+.ui.secondary.buttons .button:focus {
+ background: var(--color-secondary-dark-1);
+ color: var(--color-text);
+}
+
+.ui.secondary.button:active,
+.ui.secondary.buttons .button:active {
+ background: var(--color-secondary-dark-2);
+ color: var(--color-text);
+}
+
+.ui.basic.secondary.buttons .button,
+.ui.basic.secondary.button {
+ color: var(--color-secondary-dark-6) !important;
+}
+
+.ui.basic.secondary.buttons .button:hover,
+.ui.basic.secondary.button:hover,
+.ui.basic.secondary.buttons .button:active,
+.ui.basic.secondary.button:active {
+ color: var(--color-secondary-dark-8) !important;
+ border-color: var(--color-secondary-dark-1) !important;
+}
+
+.ui.basic.secondary.button:focus,
+.ui.basic.secondary.buttons .button:focus {
+ color: var(--color-secondary-dark-8) !important;
+ border-color: var(--color-secondary-dark-3) !important;
+}
+
+/* tertiary */
+
+.ui.tertiary.button {
+ color: var(--color-text-light);
+ border: none;
+}
+
+.ui.tertiary.button:hover {
+ color: var(--color-text);
+}
+
+.ui.tertiary.button:focus {
+ color: var(--color-text-dark);
+}
+
+/* red */
+
+.ui.red.labels .label,
+.ui.ui.ui.red.label,
+.ui.red.button,
+.ui.red.buttons .button {
+ background: var(--color-red);
+}
+
+.ui.red.button:hover,
+.ui.red.buttons .button:hover,
+.ui.red.button:focus,
+.ui.red.buttons .button:focus {
+ background: var(--color-red-dark-1);
+}
+
+.ui.red.button:active,
+.ui.red.buttons .button:active {
+ background: var(--color-red-dark-2);
+}
+
+.ui.basic.red.buttons .button,
+.ui.basic.red.button {
+ color: var(--color-red);
+ border-color: var(--color-red);
+}
+
+.ui.basic.red.buttons .button:hover,
+.ui.basic.red.button:hover,
+.ui.basic.red.buttons .button:focus,
+.ui.basic.red.button:focus {
+ color: var(--color-red-dark-1);
+ border-color: var(--color-red-dark-1);
+}
+
+.ui.basic.red.buttons .button:active,
+.ui.basic.red.button:active {
+ color: var(--color-red-dark-2);
+ border-color: var(--color-red-dark-2);
+}
+
+/* orange */
+
+.ui.orange.labels .label,
+.ui.ui.ui.orange.label,
+.ui.orange.button,
+.ui.orange.buttons .button {
+ background: var(--color-orange);
+}
+
+.ui.orange.button:hover,
+.ui.orange.buttons .button:hover,
+.ui.orange.button:focus,
+.ui.orange.buttons .button:focus {
+ background: var(--color-orange-dark-1);
+}
+
+.ui.orange.button:active,
+.ui.orange.buttons .button:active {
+ background: var(--color-orange-dark-2);
+}
+
+.ui.basic.orange.buttons .button,
+.ui.basic.orange.button {
+ color: var(--color-orange);
+ border-color: var(--color-orange);
+}
+
+.ui.basic.orange.buttons .button:hover,
+.ui.basic.orange.button:hover,
+.ui.basic.orange.buttons .button:focus,
+.ui.basic.orange.button:focus {
+ color: var(--color-orange-dark-1);
+ border-color: var(--color-orange-dark-1);
+}
+
+.ui.basic.orange.buttons .button:active,
+.ui.basic.orange.button:active {
+ color: var(--color-orange-dark-2);
+ border-color: var(--color-orange-dark-2);
+}
+
+/* yellow */
+
+.ui.yellow.labels .label,
+.ui.ui.ui.yellow.label,
+.ui.yellow.button,
+.ui.yellow.buttons .button {
+ background: var(--color-yellow);
+}
+
+.ui.yellow.button:hover,
+.ui.yellow.buttons .button:hover,
+.ui.yellow.button:focus,
+.ui.yellow.buttons .button:focus {
+ background: var(--color-yellow-dark-1);
+}
+
+.ui.yellow.button:active,
+.ui.yellow.buttons .button:active {
+ background: var(--color-yellow-dark-2);
+}
+
+.ui.basic.yellow.buttons .button,
+.ui.basic.yellow.button {
+ color: var(--color-yellow);
+ border-color: var(--color-yellow);
+}
+
+.ui.basic.yellow.buttons .button:hover,
+.ui.basic.yellow.button:hover,
+.ui.basic.yellow.buttons .button:focus,
+.ui.basic.yellow.button:focus {
+ color: var(--color-yellow-dark-1);
+ border-color: var(--color-yellow-dark-1);
+}
+
+.ui.basic.yellow.buttons .button:active,
+.ui.basic.yellow.button:active {
+ color: var(--color-yellow-dark-2);
+ border-color: var(--color-yellow-dark-2);
+}
+
+/* olive */
+
+.ui.olive.labels .label,
+.ui.ui.ui.olive.label,
+.ui.olive.button,
+.ui.olive.buttons .button {
+ background: var(--color-olive);
+}
+
+.ui.olive.button:hover,
+.ui.olive.buttons .button:hover,
+.ui.olive.button:focus,
+.ui.olive.buttons .button:focus {
+ background: var(--color-olive-dark-1);
+}
+
+.ui.olive.button:active,
+.ui.olive.buttons .button:active {
+ background: var(--color-olive-dark-2);
+}
+
+.ui.basic.olive.buttons .button,
+.ui.basic.olive.button {
+ color: var(--color-olive);
+ border-color: var(--color-olive);
+}
+
+.ui.basic.olive.buttons .button:hover,
+.ui.basic.olive.button:hover,
+.ui.basic.olive.buttons .button:focus,
+.ui.basic.olive.button:focus {
+ color: var(--color-olive-dark-1);
+ border-color: var(--color-olive-dark-1);
+}
+
+.ui.basic.olive.buttons .button:active,
+.ui.basic.olive.button:active {
+ color: var(--color-olive-dark-2);
+ border-color: var(--color-olive-dark-2);
+}
+
+/* green */
+
+.ui.green.labels .label,
+.ui.ui.ui.green.label,
+.ui.green.button,
+.ui.green.buttons .button {
+ background: var(--color-green);
+}
+
+.ui.green.button:hover,
+.ui.green.buttons .button:hover,
+.ui.green.button:focus,
+.ui.green.buttons .button:focus {
+ background: var(--color-green-dark-1);
+}
+
+.ui.green.button:active,
+.ui.green.buttons .button:active {
+ background: var(--color-green-dark-2);
+}
+
+.ui.basic.green.buttons .button,
+.ui.basic.green.button {
+ color: var(--color-green);
+ border-color: var(--color-green);
+}
+
+.ui.basic.green.buttons .button:hover,
+.ui.basic.green.button:hover,
+.ui.basic.green.buttons .button:focus,
+.ui.basic.green.button:focus {
+ color: var(--color-green-dark-1);
+ border-color: var(--color-green-dark-1);
+}
+
+.ui.basic.green.buttons .button:active,
+.ui.basic.green.button:active {
+ color: var(--color-green-dark-2);
+ border-color: var(--color-green-dark-2);
+}
+
+/* teal */
+
+.ui.teal.labels .label,
+.ui.ui.ui.teal.label,
+.ui.teal.button,
+.ui.teal.buttons .button {
+ background: var(--color-teal);
+}
+
+.ui.teal.button:hover,
+.ui.teal.buttons .button:hover,
+.ui.teal.button:focus,
+.ui.teal.buttons .button:focus {
+ background: var(--color-teal-dark-1);
+}
+
+.ui.teal.button:active,
+.ui.teal.buttons .button:active {
+ background: var(--color-teal-dark-2);
+}
+
+.ui.basic.teal.buttons .button,
+.ui.basic.teal.button {
+ color: var(--color-teal);
+ border-color: var(--color-teal);
+}
+
+.ui.basic.teal.buttons .button:hover,
+.ui.basic.teal.button:hover,
+.ui.basic.teal.buttons .button:focus,
+.ui.basic.teal.button:focus {
+ color: var(--color-teal-dark-1);
+ border-color: var(--color-teal-dark-1);
+}
+
+.ui.basic.teal.buttons .button:active,
+.ui.basic.teal.button:active {
+ color: var(--color-teal-dark-2);
+ border-color: var(--color-teal-dark-2);
+}
+
+/* blue */
+
+.ui.blue.labels .label,
+.ui.ui.ui.blue.label,
+.ui.blue.button,
+.ui.blue.buttons .button {
+ background: var(--color-blue);
+}
+
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover,
+.ui.blue.button:focus,
+.ui.blue.buttons .button:focus {
+ background: var(--color-blue-dark-1);
+}
+
+.ui.blue.button:active,
+.ui.blue.buttons .button:active {
+ background: var(--color-blue-dark-2);
+}
+
+.ui.basic.blue.buttons .button,
+.ui.basic.blue.button {
+ color: var(--color-blue);
+ border-color: var(--color-blue);
+}
+
+.ui.basic.blue.buttons .button:hover,
+.ui.basic.blue.button:hover,
+.ui.basic.blue.buttons .button:focus,
+.ui.basic.blue.button:focus {
+ color: var(--color-blue-dark-1);
+ border-color: var(--color-blue-dark-1);
+}
+
+.ui.basic.blue.buttons .button:active,
+.ui.basic.blue.button:active {
+ color: var(--color-blue-dark-2);
+ border-color: var(--color-blue-dark-2);
+}
+
+/* violet */
+
+.ui.violet.labels .label,
+.ui.ui.ui.violet.label,
+.ui.violet.button,
+.ui.violet.buttons .button {
+ background: var(--color-violet);
+}
+
+.ui.violet.button:hover,
+.ui.violet.buttons .button:hover,
+.ui.violet.button:focus,
+.ui.violet.buttons .button:focus {
+ background: var(--color-violet-dark-1);
+}
+
+.ui.violet.button:active,
+.ui.violet.buttons .button:active {
+ background: var(--color-violet-dark-2);
+}
+
+.ui.basic.violet.buttons .button,
+.ui.basic.violet.button {
+ color: var(--color-violet);
+ border-color: var(--color-violet);
+}
+
+.ui.basic.violet.buttons .button:hover,
+.ui.basic.violet.button:hover,
+.ui.basic.violet.buttons .button:focus,
+.ui.basic.violet.button:focus {
+ color: var(--color-violet-dark-1);
+ border-color: var(--color-violet-dark-1);
+}
+
+.ui.basic.violet.buttons .button:active,
+.ui.basic.violet.button:active {
+ color: var(--color-violet-dark-2);
+ border-color: var(--color-violet-dark-2);
+}
+
+/* purple */
+
+.ui.purple.labels .label,
+.ui.ui.ui.purple.label,
+.ui.purple.button,
+.ui.purple.buttons .button {
+ background: var(--color-purple);
+}
+
+.ui.purple.button:hover,
+.ui.purple.buttons .button:hover,
+.ui.purple.button:focus,
+.ui.purple.buttons .button:focus {
+ background: var(--color-purple-dark-1);
+}
+
+.ui.purple.button:active,
+.ui.purple.buttons .button:active {
+ background: var(--color-purple-dark-2);
+}
+
+.ui.basic.purple.buttons .button,
+.ui.basic.purple.button {
+ color: var(--color-purple);
+ border-color: var(--color-purple);
+}
+
+.ui.basic.purple.buttons .button:hover,
+.ui.basic.purple.button:hover,
+.ui.basic.purple.buttons .button:focus,
+.ui.basic.purple.button:focus {
+ color: var(--color-purple-dark-1);
+ border-color: var(--color-purple-dark-1);
+}
+
+.ui.basic.purple.buttons .button:active,
+.ui.basic.purple.button:active {
+ color: var(--color-purple-dark-2);
+ border-color: var(--color-purple-dark-2);
+}
+
+/* pink */
+
+.ui.pink.labels .label,
+.ui.ui.ui.pink.label,
+.ui.pink.button,
+.ui.pink.buttons .button {
+ background: var(--color-pink);
+}
+
+.ui.pink.button:hover,
+.ui.pink.buttons .button:hover,
+.ui.pink.button:focus,
+.ui.pink.buttons .button:focus {
+ background: var(--color-pink-dark-1);
+}
+
+.ui.pink.button:active,
+.ui.pink.buttons .button:active {
+ background: var(--color-pink-dark-2);
+}
+
+.ui.basic.pink.buttons .button,
+.ui.basic.pink.button {
+ color: var(--color-pink);
+ border-color: var(--color-pink);
+}
+
+.ui.basic.pink.buttons .button:hover,
+.ui.basic.pink.button:hover,
+.ui.basic.pink.buttons .button:focus,
+.ui.basic.pink.button:focus {
+ color: var(--color-pink-dark-1);
+ border-color: var(--color-pink-dark-1);
+}
+
+.ui.basic.pink.buttons .button:active,
+.ui.basic.pink.button:active {
+ color: var(--color-pink-dark-2);
+ border-color: var(--color-pink-dark-2);
+}
+
+/* brown */
+
+.ui.brown.labels .label,
+.ui.ui.ui.brown.label,
+.ui.brown.button,
+.ui.brown.buttons .button {
+ background: var(--color-brown);
+}
+
+.ui.brown.button:hover,
+.ui.brown.buttons .button:hover,
+.ui.brown.button:focus,
+.ui.brown.buttons .button:focus {
+ background: var(--color-brown-dark-1);
+}
+
+.ui.brown.button:active,
+.ui.brown.buttons .button:active {
+ background: var(--color-brown-dark-2);
+}
+
+.ui.basic.brown.buttons .button,
+.ui.basic.brown.button {
+ color: var(--color-brown);
+ border-color: var(--color-brown);
+}
+
+.ui.basic.brown.buttons .button:hover,
+.ui.basic.brown.button:hover,
+.ui.basic.brown.buttons .button:focus,
+.ui.basic.brown.button:focus {
+ color: var(--color-brown-dark-1);
+ border-color: var(--color-brown-dark-1);
+}
+
+.ui.basic.brown.buttons .button:active,
+.ui.basic.brown.button:active {
+ color: var(--color-brown-dark-2);
+ border-color: var(--color-brown-dark-2);
+}
+
+/* grey */
+
+.ui.grey.labels .label,
+.ui.ui.ui.grey.label,
+.ui.grey.button,
+.ui.grey.buttons .button {
+ background: var(--color-grey);
+}
+
+.ui.grey.button:hover,
+.ui.grey.buttons .button:hover,
+.ui.grey.button:focus,
+.ui.grey.buttons .button:focus {
+ background: var(--color-grey-dark-1);
+}
+
+.ui.grey.button:active,
+.ui.grey.buttons .button:active {
+ background: var(--color-grey-dark-2);
+}
+
+.ui.basic.grey.buttons .button,
+.ui.basic.grey.button {
+ color: var(--color-grey);
+ border-color: var(--color-grey);
+}
+
+.ui.basic.grey.buttons .button:hover,
+.ui.basic.grey.button:hover,
+.ui.basic.grey.buttons .button:focus,
+.ui.basic.grey.button:focus {
+ color: var(--color-grey-dark-1);
+ border-color: var(--color-grey-dark-1);
+}
+
+.ui.basic.grey.buttons .button:active,
+.ui.basic.grey.button:active {
+ color: var(--color-grey-dark-2);
+ border-color: var(--color-grey-dark-2);
+}
+
+/* black */
+
+.ui.black.labels .label,
+.ui.ui.ui.black.label,
+.ui.black.button,
+.ui.black.buttons .button {
+ background: var(--color-black);
+}
+
+.ui.black.button:hover,
+.ui.black.buttons .button:hover,
+.ui.black.button:focus,
+.ui.black.buttons .button:focus {
+ background: var(--color-black-dark-1);
+}
+
+.ui.black.button:active,
+.ui.black.buttons .button:active {
+ background: var(--color-black-dark-2);
+}
+
+.ui.basic.black.buttons .button,
+.ui.basic.black.button {
+ color: var(--color-black);
+ border-color: var(--color-black);
+}
+
+.ui.basic.black.buttons .button:hover,
+.ui.basic.black.button:hover,
+.ui.basic.black.buttons .button:focus,
+.ui.basic.black.button:focus {
+ color: var(--color-black-dark-1);
+ border-color: var(--color-black-dark-1);
+}
+
+.ui.basic.black.buttons .button:active,
+.ui.basic.black.button:active {
+ color: var(--color-black-dark-2);
+ border-color: var(--color-black-dark-2);
+}
+
+.ui.negative.buttons .button,
+.ui.negative.button {
+ background: var(--color-red);
+}
+
+.ui.negative.buttons .button:hover,
+.ui.negative.button:hover,
+.ui.negative.buttons .button:focus,
+.ui.negative.button:focus {
+ background: var(--color-red-dark-1);
+}
+
+.ui.negative.buttons .button:active,
+.ui.negative.button:active {
+ background: var(--color-red-dark-2);
+}
+
+/* negative */
+
+.ui.basic.negative.buttons .button,
+.ui.basic.negative.button {
+ color: var(--color-red);
+ border-color: var(--color-red);
+}
+
+.ui.basic.negative.buttons .button:hover,
+.ui.basic.negative.button:hover,
+.ui.basic.negative.buttons .button:focus,
+.ui.basic.negative.button:focus {
+ color: var(--color-red-dark-1);
+ border-color: var(--color-red-dark-1);
+}
+
+.ui.basic.negative.buttons .button:active,
+.ui.basic.negative.button:active {
+ color: var(--color-red-dark-2);
+ border-color: var(--color-red-dark-2);
+}
+
+/* positive */
+
+.ui.positive.buttons .button,
+.ui.positive.button {
+ background: var(--color-green);
+}
+
+.ui.positive.buttons .button:hover,
+.ui.positive.button:hover,
+.ui.positive.buttons .button:focus,
+.ui.positive.button:focus {
+ background: var(--color-green-dark-1);
+}
+
+.ui.positive.buttons .button:active,
+.ui.positive.button:active {
+ background: var(--color-green-dark-2);
+}
+
+.ui.basic.positive.buttons .button,
+.ui.basic.positive.button {
+ color: var(--color-green);
+ border-color: var(--color-green);
+}
+
+.ui.basic.positive.buttons .button:hover,
+.ui.basic.positive.button:hover,
+.ui.basic.positive.buttons .button:focus,
+.ui.basic.positive.button:focus {
+ color: var(--color-green-dark-1);
+ border-color: var(--color-green-dark-1);
+}
+
+.ui.basic.positive.buttons .button:active,
+.ui.basic.positive.button:active {
+ color: var(--color-green-dark-2);
+ border-color: var(--color-green-dark-2);
+}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index be9a3ae585..05f0019020 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1844,6 +1844,15 @@
scroll-margin-top: 47px; /* match .repository .diff-detail-box */
}
+.file.editor .diff-file-box {
+ border: none;
+}
+
+.file.editor .diff-file-box .ui.attached.table {
+ border: none;
+}
+
+
@media (max-width: 991px) {
.diff-file-box {
scroll-margin-top: 77px; /* match .repository .diff-detail-box */
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index 88dbe10d97..3c2a81470f 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -29,6 +29,8 @@
--color-primary-alpha-70: #87ab63b3;
--color-primary-alpha-80: #87ab63cc;
--color-primary-alpha-90: #87ab63e1;
+ --color-primary-hover: var(--color-primary-light-1);
+ --color-primary-active: var(--color-primary-light-2);
--color-secondary: #525767;
--color-secondary-dark-1: #5c6374;
--color-secondary-dark-2: #666e81;
@@ -56,6 +58,8 @@
--color-secondary-alpha-70: #525767b3;
--color-secondary-alpha-80: #525767cc;
--color-secondary-alpha-90: #525767e1;
+ --color-secondary-hover: var(--color-secondary-light-1);
+ --color-secondary-active: var(--color-secondary-light-2);
/* console colors */
--color-console-fg: #ffffff;
--color-console-bg: #262936;
@@ -75,19 +79,45 @@
--color-pink: #d22e8b;
--color-brown: #a47252;
--color-black: #2e323e;
- /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
- --color-red-light: #c23636;
- --color-orange-light: #b84f0b;
- --color-yellow-light: #b88a03;
- --color-olive-light: #839311;
- --color-green-light: #7a9e55;
- --color-teal-light: #00837c;
- --color-blue-light: #347cb3;
- --color-violet-light: #7b4edb;
- --color-purple-light: #a742c9;
- --color-pink-light: #be297d;
- --color-brown-light: #94674a;
- --color-black-light: #292d38;
+ /* light variants - produced via Sass scale-color(color, $lightness: +10%) */
+ --color-red-light: #d15a5a;
+ --color-orange-light: #f6a066;
+ --color-yellow-light: #eaaf03;
+ --color-olive-light: #abc016;
+ --color-green-light: #93b373;
+ --color-teal-light: #00b6ad;
+ --color-blue-light: #4e96cc;
+ --color-violet-light: #9b79e4;
+ --color-purple-light: #ba6ad5;
+ --color-pink-light: #d74397;
+ --color-brown-light: #b08061;
+ --color-black-light: #3f4555;
+ /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
+ --color-red-dark-1: #c23636;
+ --color-orange-dark-1: #f38236;
+ --color-yellow-dark-1: #b88a03;
+ --color-olive-dark-1: #839311;
+ --color-green-dark-1: #7a9e55;
+ --color-teal-dark-1: #00837c;
+ --color-blue-dark-1: #347cb3;
+ --color-violet-dark-1: #7b4edb;
+ --color-purple-dark-1: #a742c9;
+ --color-pink-dark-1: #be297d;
+ --color-brown-dark-1: #94674a;
+ --color-black-dark-1: #292d38;
+ /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
+ --color-red-dark-2: #ad3030;
+ --color-orange-dark-2: #f16e17;
+ --color-yellow-dark-2: #a37a02;
+ --color-olive-dark-2: #74820f;
+ --color-green-dark-2: #6c8c4c;
+ --color-teal-dark-2: #00746e;
+ --color-blue-dark-2: #2e6e9f;
+ --color-violet-dark-2: #6733d6;
+ --color-purple-dark-2: #9834b9;
+ --color-pink-dark-2: #a9246f;
+ --color-brown-dark-2: #835b42;
+ --color-black-dark-2: #252832;
/* other colors */
--color-grey: #505665;
--color-grey-light: #a1a6b7;