1
0
Fork 0
forked from forgejo/forgejo

Color and Style enhancements (#21784, #21799) (#21868)

Backport #21784
Backport #21799

These PRs provide tweaks and simplification to the less/css selectors, simplifying text color selectors and tweak arc-green colors with a follow-up to adjust the timeline 

See the original PRs for more details
This commit is contained in:
silverwind 2022-11-20 11:47:02 +01:00 committed by GitHub
parent 7a004ad7eb
commit ef08998bf6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 81 additions and 133 deletions

View file

@ -79,6 +79,7 @@
--color-pink: #e03997;
--color-brown: #a5673f;
--color-grey: #888888;
--color-black: #1b1c1d;
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-red-light: #e45e5e;
--color-orange-light: #f59555;
@ -92,9 +93,9 @@
--color-pink-light: #e86bb1;
--color-brown-light: #c58b66;
--color-grey-light: #a6a6a6;
--color-black-light: #525558;
/* other colors */
--color-gold: #a1882b;
--color-black: #1b1c1d;
--color-white: #ffffff;
--color-diff-removed-word-bg: #fdb8c0;
--color-diff-added-word-bg: #acf2bd;
@ -293,13 +294,15 @@ a,
text-decoration-skip-ink: all;
}
a.muted {
a.muted,
.muted-links a {
color: inherit;
}
a:hover,
a.muted:hover,
a.muted:hover [class*="color-text"],
.muted-links a:hover,
.ui.breadcrumb a:hover {
color: var(--color-primary);
}
@ -1301,6 +1304,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 +1389,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;
}

View file

@ -829,7 +829,7 @@
.timeline-avatar {
position: absolute;
left: -72px;
left: -68px;
img {
width: 40px !important;
@ -846,7 +846,6 @@
.avatar img {
width: 20px;
height: 20px;
margin: 0 .25rem;
vertical-align: middle;
}
@ -981,10 +980,6 @@
margin-top: 4px;
}
.author {
font-weight: 600;
}
.comment-form-reply .footer {
padding-bottom: 1em;
}
@ -1165,9 +1160,12 @@
padding-left: 15px;
.detail {
font-size: .9rem;
margin-top: 5px;
margin-left: 8px;
margin-top: 4px;
margin-left: 14px;
.svg {
margin-right: 2px;
}
}
.segments {
@ -2673,12 +2671,10 @@
a {
color: var(--color-text);
text-decoration: none;
}
a:hover {
color: var(--color-primary);
text-decoration: none;
}
}

View file

@ -91,6 +91,14 @@
border-radius: 3px;
vertical-align: 2px !important;
}
progress::-webkit-progress-value {
background-color: var(--color-secondary-dark-4);
}
progress::-moz-progress-bar {
background-color: var(--color-secondary-dark-4);
}
}
.conflicting {

View file

@ -56,34 +56,35 @@
--color-secondary-alpha-80: #454a57cc;
--color-secondary-alpha-90: #454a57e1;
/* colors */
--color-red: #7d3434;
--color-red: #cc4848;
--color-orange: #cc580c;
--color-yellow: #cc9903;
--color-olive: #91a313;
--color-green: #87ab63;
--color-teal: #00918a;
--color-blue: #1a6aa6;
--color-violet: #502aa1;
--color-purple: #8229a0;
--color-pink: #c21e7b;
--color-brown: #845232;
--color-grey: #5e626a;
/* light variants */
--color-red-light: #984646;
--color-orange-light: #e6630d;
--color-yellow-light: #e5ac04;
--color-olive-light: #a3b816;
--color-green-light: #9fbc82;
--color-teal-light: #00a39c;
--color-blue-light: #1e78bb;
--color-violet-light: #5a30b5;
--color-purple-light: #932eb4;
--color-pink-light: #db228a;
--color-brown-light: #955d39;
--color-grey-light: #6a6e78;
/* other colors */
--color-blue: #3a8ac6;
--color-violet: #906ae1;
--color-purple: #b259d0;
--color-pink: #d22e8b;
--color-brown: #a47252;
--color-grey: #9ea2aa;
--color-black: #1e222e;
--color-gold: #a1882b;
/* 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-grey-light: #8d919b;
--color-black-light: #1b1f29;
/* other colors */
--color-gold: #b1983b;
--color-white: #ffffff;
--color-diff-removed-word-bg: #6f3333;
--color-diff-added-word-bg: #3c653c;