bo/earl-grey
2
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Numerous fixes (see description)

Browse source 
- Fix tooltips
- Fix dialog background scrim
- Fix button text contrast
- Fix chip background color label
- Fix secondary navigation background color (repo header)

Fixes #2
This commit is contained in:
Troplo 2024-12-09 16:21:41 +11:00
parent 2932cd508d
commit 15a15ba583
Signed by untrusted user: Troplo
GPG key ID: 24001724CDB51342
1 changed files with 41 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
theme-earl-grey.css
View file

@ -1,3 +1,9 @@
/*
Earl Grey theme for Gitea
Version: 1.0.37
Repository: https://github.com/Troplo/earl-grey
License: MIT (https://github.com/Troplo/earl-grey/blob/master/LICENSE) / Copyright (c) 2024 Troplo & Pinnoto
*/
.chroma .hl { .chroma .hl {
background-color: #3f424d; background-color: #3f424d;
} }
@ -162,6 +168,11 @@
color: #bbbbbb; color: #bbbbbb;
} }
:root { :root {
--color-secondary-nav-bg: var(--color-header-wrapper);
--color-label-bg: var(--color-light-border);
--color-label-bg-alt: var(--color-light-border);
--color-overlay-backdrop: #080808c0;
--color-primary-contrast: black;
--color-header-wrapper: #24262b; --color-header-wrapper: #24262b;
--color-nav-bg: #1D1F23; --color-nav-bg: #1D1F23;
--color-primary: #5993e6; --color-primary: #5993e6;
@ -292,10 +303,18 @@
background: var(--color-primary-alpha-20) !important; background: var(--color-primary-alpha-20) !important;
} }
[data-tooltip]:after, [data-tooltip]:after,
[data-tooltip]:before { [data-tooltip]:before,
background: #1b1c1d !important; .tippy-box {
border-color: #1b1c1d !important; background: var(--color-header-wrapper) !important;
color: #dbdbdb !important; color: #dbdbdb !important;
border: 1px solid var(--color-secondary-dark-1) !important;
}
.tippy-svg-arrow {
fill: var(--color-header-wrapper) !important;
}
.tippy-svg-arrow-outer {
stroke: var(--color-secondary-dark-1) !important;
stroke-width: 0.7px !important;
} }
[data-tooltip]:before { [data-tooltip]:before {
box-shadow: 1px 1px 0 0 #1b1c1d !important; box-shadow: 1px 1px 0 0 #1b1c1d !important;
@ -408,12 +427,16 @@ a.ui.ui.ui.green.label:hover {
color: #f9cbcb; color: #f9cbcb;
} }
.ui.green.button, .ui.green.button,
.ui.green.buttons .button { .ui.green.buttons .button,
background-color: #3683C0; .ui.primary.button,
.ui.primary.buttons .button {
background-color: var(--color-primary) !important;
} }
.ui.green.button:hover, .ui.green.button:hover,
.ui.green.buttons .button:hover { .ui.green.buttons .button:hover,
background-color: #40AAFF; .ui.primary.button:hover,
.ui.primary.buttons .button:hover {
background-color: var(--color-primary-light-2) !important;
} }
.ui.search > .results { .ui.search > .results {
background: #1D1F23; background: #1D1F23;
@ -468,19 +491,14 @@ a.ui.ui.ui.green.label:hover {
background-color: #2C2F35; background-color: #2C2F35;
color: #dbdbdb; color: #dbdbdb;
} }
.ui.green.button:active, .ui.green.buttons .button:active { .ui.green.button:active, .ui.green.buttons .button:active, .ui.primary.button:active, ui.primary.buttons .button:active {
background-color: #40AAFF; background-color: var(--color-primary);
color: #FFFFFF; color: var(--color-primary-contrast);
text-shadow: none;
}
.ui.green.button:active, .ui.green.buttons .button:active {
background-color: #40AAFF;
color: #FFFFFF;
text-shadow: none; text-shadow: none;
} }
.ui.green.button:focus, .ui.green.buttons .button:focus { .ui.green.button:focus, .ui.green.buttons .button:focus {
background-color: #40AAFF; background-color: var(--color-primary);
color: #FFFFFF; color: var(--color-primary-contrast);
text-shadow: none; text-shadow: none;
} }
.ui.active.button:hover { .ui.active.button:hover {
@ -552,10 +570,12 @@ td.blob-hunk {
.ui.red.button, .ui.red.button,
.ui.red.buttons .button { .ui.red.buttons .button {
background-color: #E14C4C; background-color: #E14C4C;
color: black;
} }
.ui.red.button:hover, .ui.red.button:hover,
.ui.red.buttons .button:hover { .ui.red.buttons .button:hover {
background-color: #984646; background-color: #984646;
color: black;
} }
.ui.positive.message { .ui.positive.message {
background-color: #48915A; background-color: #48915A;
@ -840,8 +860,10 @@ img[src$="/img/matrix.svg"] {
border-bottom: none !important; border-bottom: none !important;
} }
#navbar .item:hover:not(div) { #navbar .item:hover:not(div) {
background-color: var(--color-hover); background-color: var(--color-hover);
} }
.ui.secondary.pointing.menu {
border: 0 !important;
}