Cutlery/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2025-07-09 03:04:07 -04:00
Code Issues Packages Projects Releases Wiki Activity

CSS variable reorganization

Browse Source
This commit is contained in:
krateng 2023-10-23 02:34:36 +02:00
parent fbafbaf114
commit f10e22e6a0
1 changed files with 29 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
maloja/web/static/css/maloja.css
View File

@ -24,32 +24,27 @@ body {
body.certified { body.certified {
background: radial-gradient(circle at top left, rgba(var(--shine_color),0.2) 0%, var(--current-bg-color) 20%); background: radial-gradient(circle at top left, rgba(var(--certification-color),0.5) 0%, var(--current-bg-color) 20%);
background-position: 0px 0px; background-position: 0px 0px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
height:100%; height:100%;
} }
/* just make sure that whenever anything is certified, we set this variable.
how its used is the job of the specific elements */
.certified_diamond { .certified_diamond {
--shine_color: var(--color-certified-diamond); --certification-color: var(--color-certified-diamond);
} }
.certified_platinum{ .certified_platinum{
--shine_color: var(--color-certified-platinum); --certification-color: var(--color-certified-platinum);
} }
.certified_gold { .certified_gold {
--shine_color: var(--color-certified-gold); --certification-color: var(--color-certified-gold);
} }
.certified.smallcerticon svg { .certified.smallcerticon svg {
/* we just use shine color as the color variable that represents the respective color of the currently applicable fill: rgba(var(--certification-color),1);
certification - even when no shine is involved */
fill: rgba(var(--shine_color),1);
}
body.certified .top_info .image div {
position: relative;
} }
@ -516,14 +511,30 @@ h2.headerwithextra+span.afterheader {
margin:2px; margin:2px;
border-radius:2px; border-radius:2px;
color:black; color:black;
--shine_color: 255, 255, 255; --shine-color: 255, 255, 255;
background-color: rgba(var(--rank-color),1);
} }
.medal.gold {
--rank-color: var(--color-rank-gold);
}
.medal.silver {
--rank-color: var(--color-rank-silver);
}
.medal.bronze {
--rank-color: var(--color-rank-bronze);
}
.shiny { .shiny {
overflow: hidden; overflow: hidden;
position:relative; position:relative;
display: inline-block; display: inline-block;
} }
.alwaysshiny {
/* alwaysshiny elements in general use the certification color for their shine */
--shine-color: var(--certification-color);
}
.shiny:after { .shiny:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -537,10 +548,11 @@ h2.headerwithextra+span.afterheader {
background: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.13);
background: linear-gradient( background: linear-gradient(
to right, to right,
rgba(var(--shine_color), 0.0) 0%, rgba(var(--shine-color), 0.0) 0%,
rgba(var(--shine_color), 0.13) 77%, rgba(var(--shine-color), 0.13) 77%,
rgba(var(--shine_color), 0.5) 92%, rgba(var(--shine-color), 0.5) 92%,
rgba(var(--shine_color), 0.0) 100% rgba(var(--shine-color), 0.0) 100%
/* shiny things just use the shine-color var, they are unaware of cert status directly */
); );
} }
.shiny.hovershiny:hover:after { .shiny.hovershiny:hover:after {
@ -559,16 +571,6 @@ h2.headerwithextra+span.afterheader {
} }
.shiny.gold {
background-color: rgba(var(--color-rank-gold),1);
}
.shiny.silver {
background-color: rgba(var(--color-rank-silver),1);
}
.shiny.bronze {
background-color: rgba(var(--color-rank-bronze),1);
}
@keyframes shiny { @keyframes shiny {
0% { 0% {
top: -110%; top: -110%;