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">tags/v1.20.0-rc0
@@ -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}} |
@@ -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; |
@@ -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 { |
@@ -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; | |||
} |
@@ -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"; |
@@ -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); | |||
} |
@@ -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 */ |
@@ -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; |