From 79a4c80f8d81e67371f6ff1f8d55bd003ab01208 Mon Sep 17 00:00:00 2001 From: silverwind 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. Screenshot 2023-05-04 at 01 21 43 Screenshot 2023-05-04 at 01 17 59 Screenshot 2023-05-04 at 01 18 07 Screenshot 2023-05-04 at 01 18 13 Screenshot 2023-05-04 at 01 18 30 Screenshot 2023-05-04 at 01 18 40 One misc change includes some fixes to editor and slightly darker selection. Screenshot 2023-05-28 at 19 16 19 --- 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 656a48791..e451c0afd 100644 --- a/templates/repo/clone_buttons.tmpl +++ b/templates/repo/clone_buttons.tmpl @@ -1,11 +1,11 @@ {{if $.CloneButtonShowHTTPS}} - {{end}} {{if $.CloneButtonShowSSH}} - {{end}} diff --git a/templates/repo/clone_script.tmpl b/templates/repo/clone_script.tmpl index 21e78727f..0797b400d 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 ef0193e13..204a9f0ce 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 62ac91550..444ee8c7e 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 03f9d53a3..90ee41f52 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 000000000..1f2d2a449 --- /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 be9a3ae58..05f001902 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 88dbe10d9..3c2a81470 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;