feat: nový vzhled Chiikawa
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 42s
CI / Playwright E2E tests (push) Successful in 1m58s
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 42s
CI / Playwright E2E tests (push) Successful in 1m58s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
This commit is contained in:
10 files changed
+1051
-6
No files matched your search
@@ -4433,6 +4433,283 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// STYL CHIIKAWA kola štěstí (dle stylu zvoleného v nastavení).
|
||||
// Pastelové výseče v barvách postav (Chiikawa, Hachiware, Usagi, tráva,
|
||||
// Momonga, Shisa) s hnědými popisky, silný obrys jako v manze
|
||||
// a střed jako bílé mochi.
|
||||
// ============================================
|
||||
.spin-wheel-modal.spin-theme-chiikawa {
|
||||
--ck-font: 'Zen Maru Gothic', 'Nunito', sans-serif;
|
||||
--ck-display: 'Hachi Maru Pop', 'Zen Maru Gothic', sans-serif;
|
||||
--ck-ink: #4a3f3a;
|
||||
--ck-line: #4a3f3a;
|
||||
--ck-pink: #f7a8b8;
|
||||
--ck-pink-deep: #c94f74;
|
||||
--ck-white-pink: #fff1f4;
|
||||
--ck-panel: #ffffff;
|
||||
--ck-text: #4a3f3a;
|
||||
--wheel-c0: #f7b6c6;
|
||||
--wheel-c1: #a9c8ec;
|
||||
--wheel-c2: #f7e08a;
|
||||
--wheel-c3: #bfe3a8;
|
||||
--wheel-c4: #d4c4ee;
|
||||
--wheel-c5: #f8c9a0;
|
||||
--wheel-rim: #4a3f3a;
|
||||
--wheel-hub: #ffffff;
|
||||
--wheel-label: #4a3f3a;
|
||||
|
||||
font-family: var(--ck-font);
|
||||
|
||||
.modal-content {
|
||||
border: 2.5px solid var(--ck-line);
|
||||
border-radius: 26px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 10% 0%, rgb(247 168 184 / 0.25), transparent 45%),
|
||||
radial-gradient(circle at 90% 100%, rgb(191 227 168 / 0.35), transparent 45%),
|
||||
#fff8f2;
|
||||
box-shadow: 0 6px 0 var(--ck-line);
|
||||
color: var(--ck-text);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: #ffe3ea;
|
||||
border-bottom: 2.5px solid var(--ck-line);
|
||||
|
||||
h2 {
|
||||
color: var(--ck-ink);
|
||||
font-family: var(--ck-display);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 2px dashed var(--ck-pink);
|
||||
}
|
||||
|
||||
.spin-steps span {
|
||||
font-family: var(--ck-display);
|
||||
background: #f6efeb;
|
||||
color: #a3938c;
|
||||
border: 2px solid #d9cbc4;
|
||||
border-radius: 999px;
|
||||
padding: 2px 16px;
|
||||
|
||||
&.active {
|
||||
background: var(--ck-pink-deep);
|
||||
color: #fff;
|
||||
border-color: var(--ck-line);
|
||||
box-shadow: 0 2px 0 var(--ck-line);
|
||||
}
|
||||
|
||||
&.done {
|
||||
background: #a9c8ec;
|
||||
color: var(--ck-ink);
|
||||
border-color: var(--ck-line);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--ck-font);
|
||||
font-weight: 900;
|
||||
border-radius: 999px;
|
||||
transition: transform 0.18s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--ck-pink-deep);
|
||||
border: 2px solid var(--ck-line);
|
||||
color: #fff;
|
||||
box-shadow: 0 3px 0 var(--ck-line);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #d6608a;
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 0 var(--ck-line);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #f1e6e2;
|
||||
border-color: #c9bab3;
|
||||
color: #a3938c;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Tlačítko roztočení — nálepka s jiskřičkou
|
||||
.spin-button {
|
||||
font-family: var(--ck-display);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
padding: 10px 38px;
|
||||
|
||||
&::before {
|
||||
content: '✦ ';
|
||||
color: #f7e08a;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
background: var(--ck-panel);
|
||||
border: 2px solid var(--ck-line);
|
||||
color: var(--ck-pink-deep);
|
||||
box-shadow: 0 3px 0 var(--ck-line);
|
||||
|
||||
&:hover {
|
||||
background: var(--ck-white-pink);
|
||||
color: var(--ck-pink-deep);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #7aa3d6;
|
||||
border: 2px solid var(--ck-line);
|
||||
color: #fff;
|
||||
box-shadow: 0 3px 0 var(--ck-line);
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #f6efeb;
|
||||
border: 2px solid var(--ck-line);
|
||||
border-radius: 999px;
|
||||
|
||||
> .btn {
|
||||
border-radius: 999px !important;
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
> .btn-outline-primary {
|
||||
background: transparent;
|
||||
color: var(--ck-text);
|
||||
|
||||
&:hover {
|
||||
background: var(--ck-panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spin-result {
|
||||
font-weight: 900;
|
||||
|
||||
strong {
|
||||
color: var(--ck-pink-deep);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options {
|
||||
background: var(--ck-panel);
|
||||
border: 2.5px solid var(--ck-line);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 3px 0 var(--ck-line);
|
||||
|
||||
li:hover {
|
||||
background: var(--ck-white-pink);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options-header {
|
||||
border-bottom: 2px dashed var(--ck-pink);
|
||||
color: var(--ck-pink-deep);
|
||||
font-family: var(--ck-display);
|
||||
}
|
||||
|
||||
.spin-empty {
|
||||
border-color: var(--ck-pink);
|
||||
}
|
||||
|
||||
.spin-wheel-pointer {
|
||||
border-top-color: var(--ck-pink-deep);
|
||||
filter: drop-shadow(0 2px 0 var(--ck-line));
|
||||
}
|
||||
|
||||
.spin-wheel-hub {
|
||||
stroke: var(--ck-line);
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.spin-seg {
|
||||
stroke: var(--ck-line);
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.spin-seg-label {
|
||||
font-family: var(--ck-display);
|
||||
font-weight: 400;
|
||||
stroke: rgb(255 255 255 / 0.7);
|
||||
stroke-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Tmavý režim — hvězdná noc
|
||||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-chiikawa {
|
||||
--ck-line: #12152b;
|
||||
--ck-pink-deep: #ff9fb8;
|
||||
--ck-white-pink: #3d2a42;
|
||||
--ck-panel: #262b4d;
|
||||
--ck-text: #f4eef6;
|
||||
--ck-ink: #f4eef6;
|
||||
--wheel-rim: #12152b;
|
||||
--wheel-hub: #3a4170;
|
||||
|
||||
.modal-content {
|
||||
border-color: #12152b;
|
||||
background:
|
||||
radial-gradient(circle at 92% 6%, #fff6c8 0 14px, rgb(255 246 200 / 0.2) 16px, transparent 50px),
|
||||
linear-gradient(180deg, #1b1f3a, #232a52);
|
||||
box-shadow: 0 6px 0 #12152b, 0 0 30px rgb(255 159 184 / 0.15);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: #2a2f55;
|
||||
}
|
||||
|
||||
.spin-steps span:not(.active):not(.done) {
|
||||
background: #2f355c;
|
||||
color: #8e8aab;
|
||||
border-color: #3a4170;
|
||||
}
|
||||
|
||||
.spin-steps span.active {
|
||||
color: #2a1f33;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #2a1f33;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #ffbfcf;
|
||||
color: #2a1f33;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #2f355c;
|
||||
border-color: #12152b;
|
||||
color: #8e8aab;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #9cc3f0;
|
||||
color: #1b1f3a;
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #2f355c;
|
||||
}
|
||||
|
||||
.spin-options li:hover {
|
||||
background: #2f355c;
|
||||
}
|
||||
|
||||
// Popisky výsečí zůstávají tmavé — pastelové výseče jsou světlé i v noci
|
||||
.spin-seg-label {
|
||||
fill: #4a3f3a;
|
||||
}
|
||||
}
|
||||
|
||||
// Ikona kola se při najetí pootočí
|
||||
.spin-wheel-icon {
|
||||
transition: transform 0.4s ease !important;
|
||||
|
||||
Reference in new issue
Block a user