opensource/gitea
1
0
Fork 0
mirror of https://gitcode.com/gitea/gitea.git synced 2025-05-31 07:08:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move all remaining colors into CSS variables (#21903)

Browse Source 
This should eliminate all non-variable color usage in the styles, making
gitea fully themeable via CSS variables. Also, it adds a linter to
enforce variables for colors.
This commit is contained in:
silverwind
2022-11-23 01:22:27 +01:00
committed by GitHub
parent 68e934ab5d
commit ee21d5453f
8 changed files with 199 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web_src/less/_base.less
View File

@ -118,6 +118,20 @@
--color-info-border: #a9d5de;
--color-info-bg: #f8ffff;
--color-info-text: #276f86;
--color-red-badge: #db2828;
--color-red-badge-bg: #db28281a;
--color-red-badge-hover-bg: #db28284d;
--color-green-badge: #21ba45;
--color-green-badge-bg: #21ba451a;
--color-green-badge-hover-bg: #21ba454d;
--color-yellow-badge: #fbbd08;
--color-yellow-badge-bg: #fbbd081a;
--color-yellow-badge-hover-bg: #fbbd084d;
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
/* target-based colors */
--color-body: #ffffff;
--color-text-dark: #080808;
--color-text: #212121;
@ -1196,11 +1210,7 @@ a.ui.card:hover,
}
.searchbox {
background-color: #f4f4f4 !important;
&:focus {
background-color: #e9e9e9 !important;
}
background-color: var(--color-input-background) !important;
}
.text .svg {
@ -1932,7 +1942,7 @@ footer {
}
.archived-icon {
color: lighten(#000000, 70%) !important;
color: var(--color-secondary-dark-2) !important;
}
.oauth2-authorize-application-box {
@ -2085,7 +2095,7 @@ a.ui.label:hover {
.lines-commit {
&:extend(.unselectable);
vertical-align: top;
color: #999999;
color: var(--color-grey);
padding: 0 !important;
background: var(--color-code-sidebar-bg);
width: 1%;
@ -2161,6 +2171,7 @@ a.ui.label:hover {
color: var(--color-text);
}
.ui.active.button,
.ui.button:active,
.ui.active.button:active,
.ui.active.button:hover {
@ -2312,7 +2323,7 @@ a.ui.basic.label:hover {
}
.migrate .svg.gitea-git {
color: #f05133; /* from https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg */
color: var(--color-git);
}
.color-icon {

2
web_src/less/_dashboard.less
View File

@ -183,7 +183,7 @@
}
#privateFilterCheckbox .svg {
color: #888888;
color: var(--color-grey);
margin-right: .25rem;
}

2
web_src/less/_install.less
View File

@ -59,7 +59,7 @@
.reinstall-message {
width: 70%;
margin: 20px auto;
color: red;
color: var(--color-red);
text-align: left;
font-weight: bold;
}

66
web_src/less/_repository.less
View File

@ -548,7 +548,7 @@
position: absolute;
top: 9px;
left: 10px;
color: #b0c4ce;
color: var(--color-grey);
}
}
}
@ -915,8 +915,8 @@
border: 1px solid var(--color-light-border);
&.isSigned.isWarning {
border: 1px solid #db2828;
background: fade(#db2828, 10%);
border: 1px solid var(--color-red-badge);
background: var(--color-red-badge-bg);
.shortsha {
display: inline-block;
@ -924,13 +924,13 @@
}
&:hover {
background: fade(#db2828, 30%) !important;
background: var(--color-red-badge-hover-bg) !important;
}
}
&.isSigned.isVerified {
border: 1px solid #21ba45;
background: fade(#21ba45, 10%);
border: 1px solid var(--color-green-badge);
background: var(--color-green-badge-bg);
.shortsha {
display: inline-block;
@ -938,13 +938,13 @@
}
&:hover {
background: fade(#21ba45, 30%) !important;
background: var(--color-green-badge-hover-bg) !important;
}
}
&.isSigned.isVerifiedUntrusted {
border: 1px solid #fbbd08;
background: fade(#fbbd08, 10%);
border: 1px solid var(--color-yellow-badge);
background: var(--color-yellow-badge-bg);
.shortsha {
display: inline-block;
@ -952,13 +952,13 @@
}
&:hover {
background: fade(#fbbd08, 30%) !important;
background: var(--color-yellow-badge-hover-bg) !important;
}
}
&.isSigned.isVerifiedUnmatched {
border: 1px solid #f2711c;
background: fade(#f2711c, 10%);
border: 1px solid var(--color-orange-badge);
background: var(--color-orange-badge-bg);
.shortsha {
display: inline-block;
@ -966,7 +966,7 @@
}
&:hover {
background: fade(#f2711c, 30%) !important;
background: var(--color-orange-badge-hover-bg) !important;
}
}
}
@ -1433,8 +1433,8 @@
}
&.isSigned.isWarning {
border: 1px solid #db2828;
background: fade(#db2828, 10%);
border: 1px solid var(--color-red-badge);
background: var(--color-red-badge-bg);
.shortsha {
display: inline-block;
@ -1442,18 +1442,18 @@
}
.detail.icon {
border-left: 1px solid #db2828;
color: #db2828;
border-left: 1px solid var(--color-red-badge);
color: var(--color-red-badge);
}
&:hover {
background: fade(#db2828, 30%) !important;
background: var(--color-red-badge-hover-bg) !important;
}
}
&.isSigned.isVerified {
border: 1px solid #21ba45;
background: fade(#21ba45, 10%);
border: 1px solid var(--color-green-badge);
background: var(--color-green-badge-bg);
.shortsha {
display: inline-block;
@ -1461,18 +1461,18 @@
}
.detail.icon {
border-left: 1px solid #21ba45;
color: #21ba45;
border-left: 1px solid var(--color-green-badge);
color: var(--color-green-badge);
}
&:hover {
background: fade(#21ba45, 30%) !important;
background: var(--color-green-badge-hover-bg) !important;
}
}
&.isSigned.isVerifiedUntrusted {
border: 1px solid #fbbd08;
background: fade(#fbbd08, 10%);
border: 1px solid var(--color-yellow-badge);
background: var(--color-yellow-badge-bg);
.shortsha {
display: inline-block;
@ -1480,18 +1480,18 @@
}
.detail.icon {
border-left: 1px solid #fbbd08;
color: #fbbd08;
border-left: 1px solid var(--color-yellow-badge);
color: var(--color-yellow-badge);
}
&:hover {
background: fade(#fbbd08, 30%) !important;
background: var(--color-yellow-badge-hover-bg) !important;
}
}
&.isSigned.isVerifiedUnmatched {
border: 1px solid #f2711c;
background: fade(#f2711c, 10%);
border: 1px solid var(--color-orange-badge);
background: var(--color-orange-badge-bg);
.shortsha {
display: inline-block;
@ -1499,12 +1499,12 @@
}
.detail.icon {
border-left: 1px solid #f2711c;
color: #f2711c;
border-left: 1px solid var(--color-orange-badge);
color: var(--color-orange-badge);
}
&:hover {
background: fade(#f2711c, 30%) !important;
background: var(--color-orange-badge-hover-bg) !important;
}
}
}

13
web_src/less/themes/theme-arc-green.less
View File

@ -107,6 +107,19 @@
--color-info-border: #306090;
--color-info-bg: #26354c;
--color-info-text: #38a8e8;
--color-red-badge: #db2828;
--color-red-badge-bg: #db28281a;
--color-red-badge-hover-bg: #db28284d;
--color-green-badge: #21ba45;
--color-green-badge-bg: #21ba451a;
--color-green-badge-hover-bg: #21ba454d;
--color-yellow-badge: #fbbd08;
--color-yellow-badge-bg: #fbbd081a;
--color-yellow-badge-hover-bg: #fbbd084d;
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
/* target-based colors */
--color-body: #383c4a;
--color-box-header: #404652;