daudix-UFO
d5b1e1a17e
All checks were successful
ci/woodpecker/manual/woodpecker Pipeline was successful
121 lines
2.7 KiB
SCSS
121 lines
2.7 KiB
SCSS
@use "sass:color";
|
|
|
|
$primary-color: #c061cb;
|
|
$primary-color-alpha: color.scale($primary-color, $alpha: -80%);
|
|
|
|
$bg-color-l: color.scale($primary-color, $lightness: 80%);
|
|
$bg-color-d: color.scale($primary-color, $lightness: -90%, $saturation: -50%);
|
|
|
|
$crt-bg: radial-gradient(
|
|
color.scale($primary-color, $lightness: -80%),
|
|
color.scale($primary-color, $lightness: -90%)
|
|
);
|
|
|
|
$nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%);
|
|
$nav-bg-d: color.scale($bg-color-d, $alpha: -20%, $lightness: 5%, $saturation: -50%);
|
|
|
|
$glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
|
0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
|
|
0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
|
|
|
|
:root {
|
|
--bg-color: #{$bg-color-l};
|
|
--crt-bg: #{$crt-bg};
|
|
--nav-bg: #{$nav-bg-l};
|
|
--primary-color-alpha: #{$primary-color-alpha};
|
|
--primary-color: #{$primary-color};
|
|
--glow: #{$glow};
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-color: #{$bg-color-d};
|
|
--nav-bg: #{$nav-bg-d};
|
|
}
|
|
}
|
|
|
|
.gradient-h1 {
|
|
display: inline-block;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
background-image: linear-gradient(
|
|
to bottom right,
|
|
var(--purple2),
|
|
var(--blue2)
|
|
);
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.media-grid {
|
|
display: grid;
|
|
gap: 2rem;
|
|
grid-auto-flow: row;
|
|
margin: 1rem 0 1rem;
|
|
padding: 0;
|
|
text-align: center;
|
|
justify-items: center;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
|
|
img:hover,
|
|
img {
|
|
all: unset;
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
a {
|
|
border-radius: var(--rounded-corner);
|
|
padding: 0.75rem;
|
|
text-decoration: none;
|
|
transition: var(--transition-bezier);
|
|
}
|
|
|
|
a:hover {
|
|
background-color: var(--fg05);
|
|
box-shadow: 0 0 0 8px var(--fg05);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
section#original-icons {
|
|
background-color: rgba(98, 160, 234, 0.5);
|
|
background-image: radial-gradient(circle, var(--fg05) 1px, transparent 1px);
|
|
background-size: 1rem 1rem;
|
|
}
|
|
|
|
section#redrawn-icons {
|
|
background-color: rgba(87, 227, 137, 0.5);
|
|
background-image: radial-gradient(circle, var(--fg05) 1px, transparent 1px);
|
|
background-size: 1rem 1rem;
|
|
}
|
|
|
|
section#wallpapers {
|
|
background-color: rgba(255, 163, 72, 0.5);
|
|
background-image: radial-gradient(circle, var(--fg05) 1px, transparent 1px);
|
|
background-size: 1rem 1rem;
|
|
|
|
img {
|
|
border-radius: var(--rounded-corner);
|
|
}
|
|
}
|
|
|
|
details.blurred ul li {
|
|
color: var(--primary-color);
|
|
filter: blur(6px);
|
|
transition: var(--transition-longer);
|
|
|
|
&:hover {
|
|
color: var(--fg-color);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
.drop-shadow {
|
|
filter:
|
|
/* Sharp drop shadow */
|
|
drop-shadow(0 0.08rem 0.1rem rgba(0, 0, 0, 0.35)
|
|
)
|
|
/* Diffuse ambient shadow */
|
|
drop-shadow(0 0.4rem 0.7rem rgba(0, 0, 0, 0.18));
|
|
}
|