mirror of
https://gitlab.com/vyla-entertainment/documentation.git
synced 2026-11-14 22:47:26 -05:00
updated a bit
This commit is contained in:
250
src/css/themes.css
Normal file
250
src/css/themes.css
Normal file
@@ -0,0 +1,250 @@
|
||||
:root {
|
||||
--snow-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='white'%3E%3Ccircle cx='22' cy='38' r='2.4' fill-opacity='.9'/%3E%3Ccircle cx='96' cy='126' r='1.8' fill-opacity='.7'/%3E%3Ccircle cx='168' cy='28' r='3' fill-opacity='.85'/%3E%3Ccircle cx='236' cy='204' r='2' fill-opacity='.75'/%3E%3Ccircle cx='272' cy='92' r='2.8' fill-opacity='.9'/%3E%3Ccircle cx='58' cy='252' r='2.2' fill-opacity='.8'/%3E%3Ccircle cx='196' cy='282' r='1.6' fill-opacity='.7'/%3E%3Ccircle cx='140' cy='190' r='2.4' fill-opacity='.85'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='.9' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath transform='translate(126 72)' d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4'/%3E%3Cpath transform='translate(246 150)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3Cpath transform='translate(40 160)' d='M0 -7V7M-6 -3.5L6 3.5M-6 3.5L6 -3.5'/%3E%3Cpath transform='translate(210 250)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3C/g%3E%3C/svg%3E");
|
||||
--leaf-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg transform='translate(50 60) rotate(25) scale(1.2)' fill='%23e8710a'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(190 40) rotate(-40)' fill='%23c2410c'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(300 130) rotate(70) scale(1.3)' fill='%23eab308'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(120 200) rotate(-15) scale(1.1)' fill='%23b45309'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(250 280) rotate(140) scale(1.2)' fill='%23d97706'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(40 310) rotate(-80)' fill='%23ca8a04'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
|
||||
--lights-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56'%3E%3Cpath d='M0 4Q40 32 80 4Q120 32 160 4' fill='none' stroke='%23245c3a' stroke-width='1.6'/%3E%3Cg fill='%23222'%3E%3Crect x='18' y='13' width='4' height='4'/%3E%3Crect x='38' y='17' width='4' height='4'/%3E%3Crect x='58' y='13' width='4' height='4'/%3E%3Crect x='98' y='13' width='4' height='4'/%3E%3Crect x='118' y='17' width='4' height='4'/%3E%3Crect x='138' y='13' width='4' height='4'/%3E%3C/g%3E%3Cellipse cx='20' cy='22' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='40' cy='26' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3Cellipse cx='60' cy='22' rx='4' ry='5.5' fill='%234dff88'/%3E%3Cellipse cx='100' cy='22' rx='4' ry='5.5' fill='%234da6ff'/%3E%3Cellipse cx='120' cy='26' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='140' cy='22' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.snowfall,
|
||||
.leaf-fall {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.snowfall {
|
||||
display: var(--snow-display);
|
||||
}
|
||||
|
||||
.leaf-fall {
|
||||
display: var(--leaf-display);
|
||||
}
|
||||
|
||||
.snowfall::before,
|
||||
.snowfall::after,
|
||||
.leaf-fall::before,
|
||||
.leaf-fall::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-repeat: repeat;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.snowfall::before {
|
||||
top: -600px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: var(--snow-tile);
|
||||
background-size: 300px 300px;
|
||||
opacity: 0.9;
|
||||
animation: snowFallNear 18s linear infinite;
|
||||
}
|
||||
|
||||
.snowfall::after {
|
||||
top: -500px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: var(--snow-tile);
|
||||
background-size: 500px 500px;
|
||||
opacity: 0.6;
|
||||
animation: snowFallFar 30s linear infinite;
|
||||
}
|
||||
|
||||
.leaf-fall::before {
|
||||
top: -720px;
|
||||
left: 0;
|
||||
right: -360px;
|
||||
bottom: 0;
|
||||
background-image: var(--leaf-tile);
|
||||
background-size: 360px 360px;
|
||||
opacity: 0.9;
|
||||
animation: leafFallNear 26s linear infinite;
|
||||
}
|
||||
|
||||
.leaf-fall::after {
|
||||
top: -540px;
|
||||
left: -540px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: var(--leaf-tile);
|
||||
background-size: 540px 540px;
|
||||
opacity: 0.7;
|
||||
animation: leafFallFar 40s linear infinite;
|
||||
}
|
||||
|
||||
.light-string {
|
||||
display: var(--lights-display);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
background-image: var(--lights-tile);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 160px 56px;
|
||||
animation: lightTwinkle 2.6s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes snowFallNear {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 600px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowFallFar {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 500px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leafFallNear {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(-360px, 720px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leafFallFar {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(540px, 540px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightTwinkle {
|
||||
from {
|
||||
opacity: 0.65;
|
||||
filter: drop-shadow(0 0 3px rgba(255, 214, 120, 0.5));
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
filter: drop-shadow(0 0 8px rgba(255, 214, 120, 0.9));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.snowfall::before,
|
||||
.snowfall::after,
|
||||
.leaf-fall::before,
|
||||
.leaf-fall::after,
|
||||
.light-string {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar .brand {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#navbar .brand::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
right: -9px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:root[data-theme="halloween"] #navbar .brand::after {
|
||||
content: "🎃";
|
||||
}
|
||||
|
||||
:root[data-theme="autumn"] #navbar .brand::after {
|
||||
content: "🍂";
|
||||
}
|
||||
|
||||
:root[data-theme="winter"] #navbar .brand::after {
|
||||
content: "❄️";
|
||||
}
|
||||
|
||||
:root[data-theme="christmas"] #navbar .brand::after {
|
||||
content: "🎄";
|
||||
}
|
||||
|
||||
.st-themes {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.st-sub {
|
||||
margin: 0 0 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.st-theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.st-theme-grid:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.st-theme {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 100px;
|
||||
background: var(--search-bg);
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.st-theme .ico {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.st-theme span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.st-theme:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.st-theme.on {
|
||||
border-color: var(--text);
|
||||
background: var(--hover-bg);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
Reference in New Issue
Block a user