feat: nový vzhled Aggretsuko
CI / Generate TypeScript types (push) Successful in 11s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 32s
CI / Build client (push) Successful in 42s
CI / Playwright E2E tests (push) Successful in 1m55s
CI / Build and push Docker image (push) Successful in 45s
CI / Notify (push) Successful in 2s
CI / Generate TypeScript types (push) Successful in 11s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 32s
CI / Build client (push) Successful in 42s
CI / Playwright E2E tests (push) Successful in 1m55s
CI / Build and push Docker image (push) Successful in 45s
CI / Notify (push) Successful in 2s
This commit is contained in:
10 files changed
+1054
-6
No files matched your search
@@ -3105,6 +3105,315 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// STYL AGGRETSUKO kola štěstí (dle stylu zvoleného v nastavení).
|
||||
// Výseče v barvách kanceláře (rezavá Retsuko, ocelově modrá, lepicí
|
||||
// papírek, razítko, růžová Tsunoda, šedá Haida), střed jako razítko hanko.
|
||||
// V rage mode černé kolo s rudými výsečemi.
|
||||
// ============================================
|
||||
.spin-wheel-modal.spin-theme-aggretsuko {
|
||||
--agg-font: 'Nunito', sans-serif;
|
||||
--agg-display: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
||||
--agg-metal: 'Metal Mania', 'M PLUS Rounded 1c', sans-serif;
|
||||
--agg-retsuko: #d9673a;
|
||||
--agg-retsuko-deep: #b4481f;
|
||||
--agg-office: #4a5d7a;
|
||||
--agg-line: #ecdccb;
|
||||
--agg-panel: #ffffff;
|
||||
--agg-text: #2f2a2a;
|
||||
--wheel-c0: #d9673a;
|
||||
--wheel-c1: #4a5d7a;
|
||||
--wheel-c2: #e8b923;
|
||||
--wheel-c3: #c8102e;
|
||||
--wheel-c4: #e08aa6;
|
||||
--wheel-c5: #6b6f7a;
|
||||
--wheel-rim: #394a63;
|
||||
--wheel-hub: #fff4e8;
|
||||
|
||||
font-family: var(--agg-font);
|
||||
|
||||
.modal-content {
|
||||
border: 1px solid var(--agg-line);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(rgb(74 93 122 / 0.07) 1px, transparent 1px) 0 0 / 100% 26px,
|
||||
linear-gradient(90deg, rgb(74 93 122 / 0.07) 1px, transparent 1px) 0 0 / 104px 100%,
|
||||
#fbf6ef;
|
||||
color: var(--agg-text);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background:
|
||||
linear-gradient(var(--agg-retsuko), var(--agg-retsuko)) left bottom / 100% 4px no-repeat,
|
||||
var(--agg-office);
|
||||
border-bottom: none;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-family: var(--agg-display);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1) grayscale(1) brightness(2);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid var(--agg-line);
|
||||
}
|
||||
|
||||
.spin-steps span {
|
||||
font-family: var(--agg-display);
|
||||
font-weight: 800;
|
||||
background: #f1e8de;
|
||||
color: #8f8584;
|
||||
border-radius: 6px;
|
||||
padding: 4px 16px;
|
||||
|
||||
&.active {
|
||||
background: var(--agg-retsuko);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.done {
|
||||
background: #ffe873;
|
||||
color: #3a3220;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--agg-font);
|
||||
font-weight: 800;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--agg-retsuko);
|
||||
border: 1px solid var(--agg-retsuko-deep);
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 0 var(--agg-retsuko-deep);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--agg-retsuko-deep);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #e4dcd4;
|
||||
border-color: #e4dcd4;
|
||||
color: #8f8584;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Tlačítko roztočení — Retsuko se chystá zařvat
|
||||
.spin-button {
|
||||
font-family: var(--agg-display);
|
||||
font-size: 1.2rem;
|
||||
padding: 10px 38px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #c8102e;
|
||||
border-color: #8f0a20;
|
||||
animation: agg-rage 0.35s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
background: var(--agg-panel);
|
||||
border: 1px solid var(--agg-retsuko);
|
||||
color: var(--agg-retsuko-deep);
|
||||
|
||||
&:hover {
|
||||
background: #fde6d8;
|
||||
color: var(--agg-retsuko-deep);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--agg-office);
|
||||
border: 1px solid #394a63;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #f1e8de;
|
||||
border-radius: 8px;
|
||||
|
||||
> .btn {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
> .btn-outline-primary {
|
||||
background: transparent;
|
||||
color: var(--agg-text);
|
||||
|
||||
&:hover {
|
||||
background: var(--agg-panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spin-result {
|
||||
font-weight: 800;
|
||||
|
||||
strong {
|
||||
color: var(--agg-retsuko-deep);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options {
|
||||
background: var(--agg-panel);
|
||||
border: 1px solid var(--agg-line);
|
||||
border-radius: 12px;
|
||||
|
||||
li:hover {
|
||||
background: #fff1e4;
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options-header {
|
||||
border-bottom: 2px solid var(--agg-retsuko);
|
||||
color: var(--agg-office);
|
||||
font-family: var(--agg-display);
|
||||
}
|
||||
|
||||
.spin-empty {
|
||||
border-color: var(--agg-line);
|
||||
}
|
||||
|
||||
.spin-wheel-pointer {
|
||||
border-top-color: #c8102e;
|
||||
filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.3));
|
||||
}
|
||||
|
||||
.spin-wheel-hub {
|
||||
stroke: #c8102e;
|
||||
}
|
||||
|
||||
.spin-seg {
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.spin-seg-label {
|
||||
font-family: var(--agg-display);
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
// Rage mode — karaoke box
|
||||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-aggretsuko {
|
||||
--agg-retsuko: #ff4a3d;
|
||||
--agg-retsuko-deep: #c8102e;
|
||||
--agg-line: #3a1c20;
|
||||
--agg-panel: #171314;
|
||||
--agg-text: #f2ecea;
|
||||
--wheel-c0: #c8102e;
|
||||
--wheel-c1: #5c2a30;
|
||||
--wheel-c2: #ff4a3d;
|
||||
--wheel-c3: #3a1c20;
|
||||
--wheel-c4: #8f0a20;
|
||||
--wheel-c5: #6b4a4e;
|
||||
--wheel-rim: #ff2e3f;
|
||||
--wheel-hub: #000000;
|
||||
|
||||
.modal-content {
|
||||
border-color: #ff2e3f;
|
||||
background:
|
||||
radial-gradient(ellipse 50% 40% at 50% -10%, rgb(255 46 63 / 0.3), transparent 70%),
|
||||
#0d0b0c;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 7L4 1L8 7L12 1L16 7' fill='none' stroke='%23ff2e3f' stroke-width='2'/%3E%3C/svg%3E") left bottom / 16px 8px repeat-x,
|
||||
#000;
|
||||
padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 6px);
|
||||
|
||||
h2 {
|
||||
font-family: var(--agg-metal);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.03em;
|
||||
text-shadow: 0 0 10px rgb(255 46 63 / 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-steps span:not(.active):not(.done) {
|
||||
background: #221a1b;
|
||||
color: #8f8584;
|
||||
}
|
||||
|
||||
.spin-steps span.active {
|
||||
background: #c8102e;
|
||||
}
|
||||
|
||||
.spin-steps span.done {
|
||||
background: #2a0f12;
|
||||
color: #ff4a3d;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #c8102e;
|
||||
border-color: #ff2e3f;
|
||||
box-shadow: 0 0 12px rgb(255 46 63 / 0.45);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #e0283f;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #2a1f20;
|
||||
border-color: #2a1f20;
|
||||
color: #8f8584;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spin-button {
|
||||
font-family: var(--agg-metal);
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: #3a1416;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #241c1d;
|
||||
border-color: #3a2a2c;
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #221a1b;
|
||||
}
|
||||
|
||||
.spin-options li:hover {
|
||||
background: #221a1b;
|
||||
}
|
||||
|
||||
.spin-options-header {
|
||||
color: #ff4a3d;
|
||||
font-family: var(--agg-metal);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.spin-wheel-hub {
|
||||
stroke: #ff2e3f;
|
||||
}
|
||||
|
||||
.spin-seg {
|
||||
stroke: #ff2e3f;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// Ikona kola se při najetí pootočí
|
||||
.spin-wheel-icon {
|
||||
transition: transform 0.4s ease !important;
|
||||
|
||||
Reference in new issue
Block a user