feat: přidání Bocchi the Rock! theme
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 44s
CI / Playwright E2E tests (push) Successful in 2m4s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 44s
CI / Playwright E2E tests (push) Successful in 2m4s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
This commit is contained in:
10 files changed
+871
-18
No files matched your search
@@ -1268,6 +1268,274 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// STYL BOCCHI THE ROCK! kola štěstí (dle stylu zvoleného v nastavení).
|
||||
// Výseče v barvách Kessoku Band, černé linky a tvrdé stíny jako na flyeru
|
||||
// z live house STARRY, střed kola jako žlutá kostička z vlasů Bocchi.
|
||||
// ============================================
|
||||
.spin-wheel-modal.spin-theme-bocchi {
|
||||
--bocchi-font: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
||||
--bocchi-display: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
|
||||
--bocchi-pink: #cc3570;
|
||||
--bocchi-pink-deep: #a8245a;
|
||||
--bocchi-ink: #1d1a22;
|
||||
--bocchi-line: #1d1a22;
|
||||
--bocchi-panel: #ffffff;
|
||||
--bocchi-text: #1d1a22;
|
||||
// Bocchi, Nijika, Ryo, Kita, Les Paul a světle růžová
|
||||
--wheel-c0: #e0457b;
|
||||
--wheel-c1: #e8b400;
|
||||
--wheel-c2: #3a63c9;
|
||||
--wheel-c3: #d93a30;
|
||||
--wheel-c4: #2b2530;
|
||||
--wheel-c5: #f07fa8;
|
||||
--wheel-rim: #1d1a22;
|
||||
--wheel-hub: #ffcf33;
|
||||
|
||||
font-family: var(--bocchi-font);
|
||||
|
||||
.modal-content {
|
||||
border: 3px solid var(--bocchi-line);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle, rgb(224 69 123 / 0.12) 0 1.4px, transparent 1.9px) 0 0 / 12px 12px,
|
||||
#fff6f9;
|
||||
color: var(--bocchi-text);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background:
|
||||
linear-gradient(90deg, #e0457b 0 25%, #ffcf33 25% 50%, #3a63c9 50% 75%, #d93a30 75% 100%) bottom / 100% 5px no-repeat,
|
||||
#0f0d12;
|
||||
border-bottom: none;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-family: var(--bocchi-display);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1) grayscale(1) brightness(2);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 2px solid var(--bocchi-line);
|
||||
}
|
||||
|
||||
.spin-steps span {
|
||||
font-family: var(--bocchi-font);
|
||||
font-weight: 800;
|
||||
background: #f3e7ed;
|
||||
color: #8f8597;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
padding: 4px 16px;
|
||||
|
||||
&.active {
|
||||
background: #ffcf33;
|
||||
color: var(--bocchi-ink);
|
||||
border-color: var(--bocchi-ink);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-pink);
|
||||
}
|
||||
|
||||
&.done {
|
||||
background: var(--bocchi-ink);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--bocchi-font);
|
||||
font-weight: 800;
|
||||
border-radius: 6px;
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translate(3px, 3px);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--bocchi-pink);
|
||||
border: 2px solid var(--bocchi-ink);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-ink);
|
||||
color: #fff;
|
||||
|
||||
&:disabled {
|
||||
background: #cfc6d3;
|
||||
border-color: #8f8597;
|
||||
box-shadow: 3px 3px 0 #8f8597;
|
||||
}
|
||||
}
|
||||
|
||||
// Tlačítko roztočení — žlutá samolepka s růžovým a černým stínem
|
||||
.spin-button {
|
||||
font-family: var(--bocchi-display);
|
||||
font-weight: 400;
|
||||
background: #ffcf33;
|
||||
color: var(--bocchi-ink);
|
||||
border: 3px solid var(--bocchi-ink);
|
||||
box-shadow: 4px 4px 0 var(--bocchi-pink), 7px 7px 0 var(--bocchi-ink);
|
||||
font-size: 1.15rem;
|
||||
padding: 12px 36px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #ffd94f;
|
||||
color: var(--bocchi-ink);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
background: #fff;
|
||||
border: 2px solid var(--bocchi-line);
|
||||
color: var(--bocchi-pink);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-ink);
|
||||
|
||||
&:hover {
|
||||
background: #ffe4ee;
|
||||
color: var(--bocchi-pink-deep);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
border: 2px solid var(--bocchi-line);
|
||||
color: var(--bocchi-text);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-ink);
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #f3e7ed;
|
||||
|
||||
> .btn-primary {
|
||||
background: var(--bocchi-pink);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
> .btn-outline-primary {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--bocchi-ink);
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spin-result {
|
||||
font-weight: 800;
|
||||
|
||||
strong {
|
||||
color: var(--bocchi-pink);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options {
|
||||
background: var(--bocchi-panel);
|
||||
border: 2px solid var(--bocchi-line);
|
||||
border-radius: 10px;
|
||||
box-shadow: 4px 4px 0 var(--bocchi-ink);
|
||||
|
||||
li:hover {
|
||||
background: #fff0f5;
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options-header {
|
||||
border-bottom: 2px solid var(--bocchi-line);
|
||||
color: var(--bocchi-ink);
|
||||
}
|
||||
|
||||
.spin-empty {
|
||||
border-color: var(--bocchi-line);
|
||||
}
|
||||
|
||||
.spin-wheel-pointer {
|
||||
border-top-color: var(--bocchi-pink);
|
||||
filter: drop-shadow(2px 2px 0 var(--bocchi-ink));
|
||||
}
|
||||
|
||||
.spin-seg {
|
||||
stroke: #1d1a22;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.spin-seg-label {
|
||||
font-family: var(--bocchi-font);
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
// Tmavý režim — koncert v live house STARRY
|
||||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-bocchi {
|
||||
--bocchi-pink: #ff6fa0;
|
||||
--bocchi-pink-deep: #e0457b;
|
||||
--bocchi-line: #5a4d66;
|
||||
--bocchi-panel: #1d1a24;
|
||||
--bocchi-text: #f5eff8;
|
||||
--wheel-c4: #4a3f58;
|
||||
|
||||
.modal-content {
|
||||
background:
|
||||
radial-gradient(circle, rgb(255 111 160 / 0.10) 0 1.4px, transparent 1.9px) 0 0 / 12px 12px,
|
||||
radial-gradient(ellipse 40% 55% at 15% -10%, rgb(255 111 160 / 0.22), transparent 70%),
|
||||
radial-gradient(ellipse 40% 55% at 85% -10%, rgb(125 156 255 / 0.20), transparent 70%),
|
||||
#121016;
|
||||
}
|
||||
|
||||
.spin-steps span:not(.active):not(.done) {
|
||||
background: #282231;
|
||||
color: #8f8499;
|
||||
}
|
||||
|
||||
.spin-steps span.done {
|
||||
background: #3a3246;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #1d1a22;
|
||||
}
|
||||
|
||||
.btn-outline-primary, .btn-secondary {
|
||||
background: #1d1a24;
|
||||
color: #f5eff8;
|
||||
box-shadow: 3px 3px 0 #8c2350;
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #282231;
|
||||
|
||||
> .btn-outline-primary {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #c9bfd2;
|
||||
|
||||
&:hover {
|
||||
background: #1d1a24;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options {
|
||||
box-shadow: 4px 4px 0 #8c2350;
|
||||
}
|
||||
|
||||
.spin-options-header {
|
||||
color: #ffcf33;
|
||||
}
|
||||
|
||||
.spin-options li:hover {
|
||||
background: #2e2236;
|
||||
}
|
||||
}
|
||||
|
||||
// Ikona kola se při najetí pootočí
|
||||
.spin-wheel-icon {
|
||||
transition: transform 0.4s ease !important;
|
||||
|
||||
Reference in new issue
Block a user