mirror of
https://github.com/go-gitea/gitea
synced 2025-07-22 18:28:37 +00:00
Simplify text color selectors and tweak arc-green colors (#21784)
Move the text color rules out of the unneeded `.ui` block, add missing colors, tweak colors on arc-green to be more readable (red was particulary bad to read). Also, this removes the previous inheritance of link colors. I think links should always be in primary color and if they are to be discolored, the color should be set on them explicitely. <img width="165" alt="Screenshot 2022-11-12 at 13 28 30" src="https://user-images.githubusercontent.com/115237/201474098-700d9fed-3133-43c7-b57e-d4cc5c2795cb.png"> <img width="152" alt="Screenshot 2022-11-12 at 13 18 48" src="https://user-images.githubusercontent.com/115237/201474156-b6de4cb5-bce8-4553-b3d4-8365aff9a3a7.png"> HTML to test with: ```html <div class="text red">some text with <a href="#foo">a link</a>.</div> <div class="text orange">some text with <a href="#foo">a link</a>.</div> <div class="text yellow">some text with <a href="#foo">a link</a>.</div> <div class="text olive">some text with <a href="#foo">a link</a>.</div> <div class="text green">some text with <a href="#foo">a link</a>.</div> <div class="text teal">some text with <a href="#foo">a link</a>.</div> <div class="text blue">some text with <a href="#foo">a link</a>.</div> <div class="text violet">some text with <a href="#foo">a link</a>.</div> <div class="text purple">some text with <a href="#foo">a link</a>.</div> <div class="text pink">some text with <a href="#foo">a link</a>.</div> <div class="text brown">some text with <a href="#foo">a link</a>.</div> <div class="text grey">some text with <a href="#foo">a link</a>.</div>
This commit is contained in:
@@ -1301,6 +1301,22 @@ a.ui.card:hover,
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.text.red { color: var(--color-red) !important; }
|
||||
.text.orange { color: var(--color-orange) !important; }
|
||||
.text.yellow { color: var(--color-yellow) !important; }
|
||||
.text.olive { color: var(--color-olive) !important; }
|
||||
.text.green { color: var(--color-green) !important; }
|
||||
.text.teal { color: var(--color-teal) !important; }
|
||||
.text.blue { color: var(--color-blue) !important; }
|
||||
.text.violet { color: var(--color-violet) !important; }
|
||||
.text.purple { color: var(--color-purple) !important; }
|
||||
.text.pink { color: var(--color-pink) !important; }
|
||||
.text.brown { color: var(--color-brown) !important; }
|
||||
.text.black { color: var(--color-text) !important; }
|
||||
.text.grey { color: var(--color-text-light) !important; }
|
||||
.text.light.grey { color: var(--color-grey-light) !important; }
|
||||
.text.gold { color: var(--color-gold) !important; }
|
||||
|
||||
.ui {
|
||||
&.left:not(.action) {
|
||||
float: left;
|
||||
@@ -1370,74 +1386,6 @@ a.ui.card:hover,
|
||||
}
|
||||
|
||||
.text {
|
||||
&.red {
|
||||
color: var(--color-red) !important;
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-red-light) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: var(--color-blue) !important;
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-blue-light) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.black {
|
||||
color: var(--color-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&.grey {
|
||||
color: var(--color-text-light) !important;
|
||||
|
||||
a {
|
||||
color: var(--color-text) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.light.grey {
|
||||
color: var(--color-text-light-2) !important;
|
||||
}
|
||||
|
||||
&.green {
|
||||
color: var(--color-green) !important;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
color: var(--color-purple) !important;
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
color: var(--color-yellow) !important;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
color: var(--color-orange) !important;
|
||||
}
|
||||
|
||||
&.gold {
|
||||
color: var(--color-gold) !important;
|
||||
}
|
||||
|
||||
&.left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
Reference in New Issue
Block a user