feat: nový vzhled Spy x Family
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 26s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 2m2s
CI / Build and push Docker image (push) Successful in 51s
CI / Notify (push) Successful in 6s
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 26s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 2m2s
CI / Build and push Docker image (push) Successful in 51s
CI / Notify (push) Successful in 6s
This commit is contained in:
10 files changed
+973
-6
No files matched your search
@@ -2056,6 +2056,299 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// STYL SPY × FAMILY kola štěstí (dle stylu zvoleného v nastavení).
|
||||
// Výseče v retro barvách Forgerových (petrolejová, korálová, hořčicová,
|
||||
// růžová Anya, námořnická, olivová), krémové linky a střed jako hvězda Stella.
|
||||
// ============================================
|
||||
.spin-wheel-modal.spin-theme-spyfamily {
|
||||
--sxf-font: 'Nunito', sans-serif;
|
||||
--sxf-display: 'Playfair Display', Georgia, serif;
|
||||
--sxf-typewriter: 'Courier Prime', 'Courier New', monospace;
|
||||
--sxf-teal: #1e6f6c;
|
||||
--sxf-teal-deep: #155452;
|
||||
--sxf-coral: #d9483b;
|
||||
--sxf-line: #e3d7bf;
|
||||
--sxf-panel: #fffcf5;
|
||||
--sxf-text: #2b2620;
|
||||
--sxf-cream-line: #f7f0e1;
|
||||
--wheel-c0: #1e6f6c;
|
||||
--wheel-c1: #d9483b;
|
||||
--wheel-c2: #e2a93b;
|
||||
--wheel-c3: #e98aa8;
|
||||
--wheel-c4: #22303c;
|
||||
--wheel-c5: #6b8f4e;
|
||||
--wheel-rim: #22303c;
|
||||
--wheel-hub: #c9a44c;
|
||||
|
||||
font-family: var(--sxf-font);
|
||||
|
||||
.modal-content {
|
||||
border: 1px solid var(--sxf-line);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: #f7f0e1;
|
||||
color: var(--sxf-text);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background:
|
||||
linear-gradient(var(--sxf-coral), var(--sxf-coral)) left bottom / 100% 3px no-repeat,
|
||||
linear-gradient(var(--sxf-cream-line), var(--sxf-cream-line)) left bottom 5px / 100% 2px no-repeat,
|
||||
#22303c;
|
||||
border-bottom: none;
|
||||
|
||||
h2 {
|
||||
color: #fbf6ea;
|
||||
font-family: var(--sxf-display);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1) grayscale(1) brightness(2);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid var(--sxf-line);
|
||||
}
|
||||
|
||||
.spin-steps span {
|
||||
font-family: var(--sxf-typewriter);
|
||||
font-weight: 700;
|
||||
background: #efe6d3;
|
||||
color: #8c8274;
|
||||
border-radius: 4px;
|
||||
padding: 4px 16px;
|
||||
|
||||
&.active {
|
||||
background: var(--sxf-teal);
|
||||
color: #fffcf5;
|
||||
}
|
||||
|
||||
&.done {
|
||||
background: #f2e2b9;
|
||||
color: #2b2418;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--sxf-font);
|
||||
font-weight: 800;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--sxf-teal);
|
||||
border: 1px solid var(--sxf-teal-deep);
|
||||
color: #fffcf5;
|
||||
box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.25), 0 2px 0 var(--sxf-teal-deep);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--sxf-teal-deep);
|
||||
color: #fffcf5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #d6ccbb;
|
||||
border-color: #d6ccbb;
|
||||
color: #8c8274;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Tlačítko roztočení — korálové jako Yořiny růže
|
||||
.spin-button {
|
||||
font-family: var(--sxf-display);
|
||||
font-style: italic;
|
||||
font-size: 1.25rem;
|
||||
padding: 10px 38px;
|
||||
background: var(--sxf-coral);
|
||||
border-color: #a8332a;
|
||||
box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.3), 0 3px 0 #a8332a;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #c23a2e;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
background: var(--sxf-panel);
|
||||
border: 2px solid var(--sxf-teal);
|
||||
color: var(--sxf-teal);
|
||||
|
||||
&:hover {
|
||||
background: #dcefeb;
|
||||
color: var(--sxf-teal);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #22303c;
|
||||
border: 1px solid #22303c;
|
||||
color: #fbf6ea;
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #efe6d3;
|
||||
border-radius: 6px;
|
||||
|
||||
> .btn {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
> .btn-outline-primary {
|
||||
background: transparent;
|
||||
color: var(--sxf-text);
|
||||
|
||||
&:hover {
|
||||
background: var(--sxf-panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spin-result {
|
||||
font-weight: 800;
|
||||
|
||||
strong {
|
||||
color: var(--sxf-coral);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options {
|
||||
background: var(--sxf-panel);
|
||||
border: 1px solid var(--sxf-line);
|
||||
border-radius: 10px;
|
||||
|
||||
li:hover {
|
||||
background: #f6ecd8;
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options-header {
|
||||
border-bottom: 2px solid var(--sxf-coral);
|
||||
color: var(--sxf-teal);
|
||||
font-family: var(--sxf-typewriter);
|
||||
}
|
||||
|
||||
.spin-empty {
|
||||
border-color: var(--sxf-line);
|
||||
}
|
||||
|
||||
.spin-wheel-pointer {
|
||||
border-top-color: var(--sxf-coral);
|
||||
filter: drop-shadow(0 2px 1px rgb(34 48 60 / 0.4));
|
||||
}
|
||||
|
||||
.spin-seg {
|
||||
stroke: #f7f0e1;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.spin-seg-label {
|
||||
font-family: var(--sxf-font);
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
// Tmavý režim — noční mise Thorn Princess
|
||||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-spyfamily {
|
||||
--sxf-teal: #4fb3ac;
|
||||
--sxf-teal-deep: #3a8f89;
|
||||
--sxf-coral: #e0475a;
|
||||
--sxf-line: #3a2a34;
|
||||
--sxf-panel: #1f1720;
|
||||
--sxf-text: #f4ece2;
|
||||
--sxf-cream-line: #d8b866;
|
||||
--wheel-c0: #2f8f89;
|
||||
--wheel-c1: #b3263a;
|
||||
--wheel-c4: #3c2a3e;
|
||||
--wheel-rim: #0c080c;
|
||||
--wheel-hub: #d8b866;
|
||||
|
||||
.modal-content {
|
||||
background:
|
||||
radial-gradient(ellipse 60% 45% at 85% -5%, rgb(224 71 90 / 0.18), transparent 70%),
|
||||
#140e14;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #0c080c;
|
||||
}
|
||||
|
||||
.spin-steps span:not(.active):not(.done) {
|
||||
background: #2a1f2b;
|
||||
color: #968a90;
|
||||
}
|
||||
|
||||
.spin-steps span.done {
|
||||
background: #2e2418;
|
||||
color: #d8b866;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #d8b866;
|
||||
border-color: #a88a3f;
|
||||
color: #1c1410;
|
||||
box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.2), 0 2px 0 #7f682f;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #e8cc82;
|
||||
color: #1c1410;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #3a2e34;
|
||||
border-color: #3a2e34;
|
||||
color: #968a90;
|
||||
}
|
||||
}
|
||||
|
||||
.spin-button {
|
||||
background: var(--sxf-coral);
|
||||
border-color: #8f1d2c;
|
||||
color: #fffcf5;
|
||||
box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.25), 0 3px 0 #8f1d2c;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #c93a4d;
|
||||
color: #fffcf5;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border-color: #d8b866;
|
||||
color: #d8b866;
|
||||
|
||||
&:hover {
|
||||
background: #34281c;
|
||||
color: #e8cc82;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #2a1f2b;
|
||||
border-color: #3a2a34;
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #2a1f2b;
|
||||
}
|
||||
|
||||
.spin-options li:hover {
|
||||
background: #2a1f2b;
|
||||
}
|
||||
|
||||
.spin-options-header {
|
||||
color: #d8b866;
|
||||
}
|
||||
|
||||
.spin-seg {
|
||||
stroke: #140e14;
|
||||
}
|
||||
}
|
||||
|
||||
// Ikona kola se při najetí pootočí
|
||||
.spin-wheel-icon {
|
||||
transition: transform 0.4s ease !important;
|
||||
|
||||
Reference in new issue
Block a user