feat: nový vzhled Hatsune Miku
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 26s
CI / Build server (push) Successful in 28s
CI / Build client (push) Successful in 42s
CI / Playwright E2E tests (push) Successful in 1m54s
CI / Build and push Docker image (push) Successful in 45s
CI / Notify (push) Successful in 2s
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 26s
CI / Build server (push) Successful in 28s
CI / Build client (push) Successful in 42s
CI / Playwright E2E tests (push) Successful in 1m54s
CI / Build and push Docker image (push) Successful in 45s
CI / Notify (push) Successful in 2s
This commit is contained in:
10 files changed
+931
-6
No files matched your search
@@ -3914,6 +3914,262 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// STYL HATSUNE MIKU kola štěstí (dle stylu zvoleného v nastavení).
|
||||
// Výseče v barvách Vocaloidů (Miku, Luka, Rin, Kaito, Meiko, šedá rukávů),
|
||||
// bílé linky a střed jako reproduktor s tyrkysovým lemem.
|
||||
// ============================================
|
||||
.spin-wheel-modal.spin-theme-miku {
|
||||
--miku-font: 'Nunito', sans-serif;
|
||||
--miku-display: 'Exo 2', 'Nunito', sans-serif;
|
||||
--miku-teal: #39c5bb;
|
||||
--miku-teal-deep: #138f87;
|
||||
--miku-teal-ink: #137a7f;
|
||||
--miku-pink: #e12885;
|
||||
--miku-grey: #3a3f44;
|
||||
--miku-line: #d8e3e6;
|
||||
--miku-panel: #ffffff;
|
||||
--miku-text: #263036;
|
||||
--wheel-c0: #2fb3a9;
|
||||
--wheel-c1: #e12885;
|
||||
--wheel-c2: #5a6268;
|
||||
--wheel-c3: #e0a000;
|
||||
--wheel-c4: #3a6fd8;
|
||||
--wheel-c5: #c8302c;
|
||||
--wheel-rim: #3a3f44;
|
||||
--wheel-hub: #2b2f33;
|
||||
|
||||
font-family: var(--miku-font);
|
||||
|
||||
.modal-content {
|
||||
border: 1px solid var(--miku-line);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(90deg, rgb(57 197 187 / 0.12) 1px, transparent 1px) 0 0 / 88px 100%,
|
||||
repeating-linear-gradient(180deg, #f6fafb 0 22px, #edf3f5 22px 44px);
|
||||
color: var(--miku-text);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='10'%3E%3Crect width='98' height='10' fill='%23ffffff'/%3E%3Cpath d='M14 0V10M28 0V10M42 0V10M56 0V10M70 0V10M84 0V10M98 0V10' stroke='%239aa3a8'/%3E%3Cpath d='M10 0h8v6h-8zM24 0h8v6h-8zM52 0h8v6h-8zM66 0h8v6h-8zM80 0h8v6h-8z' fill='%232b2f33'/%3E%3C/svg%3E") left bottom / 98px 10px repeat-x,
|
||||
linear-gradient(var(--miku-teal), var(--miku-teal)) left bottom 10px / 100% 3px no-repeat,
|
||||
linear-gradient(180deg, #454b51, var(--miku-grey));
|
||||
border-bottom: none;
|
||||
padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 13px);
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-family: var(--miku-display);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1) grayscale(1) brightness(2);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid var(--miku-line);
|
||||
}
|
||||
|
||||
.spin-steps span {
|
||||
font-family: var(--miku-display);
|
||||
font-weight: 700;
|
||||
background: #e3eaed;
|
||||
color: #8a979e;
|
||||
border-radius: 6px;
|
||||
padding: 3px 16px;
|
||||
|
||||
&.active {
|
||||
background: var(--miku-teal-deep);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 10px rgb(57 197 187 / 0.5);
|
||||
}
|
||||
|
||||
&.done {
|
||||
background: var(--miku-pink);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--miku-font);
|
||||
font-weight: 800;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(180deg, #23a99f, var(--miku-teal-deep));
|
||||
border: 1px solid #0e7a73;
|
||||
color: #fff;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: linear-gradient(180deg, #2fb3a9, #179a91);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 0 3px rgb(57 197 187 / 0.3), 0 0 16px rgb(57 197 187 / 0.55);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #cfd8dc;
|
||||
border-color: #cfd8dc;
|
||||
color: #8a979e;
|
||||
}
|
||||
}
|
||||
|
||||
// Tlačítko roztočení — „play"
|
||||
.spin-button {
|
||||
font-family: var(--miku-display);
|
||||
font-weight: 800;
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 10px 38px;
|
||||
|
||||
&::before {
|
||||
content: '▶ ';
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
background: var(--miku-panel);
|
||||
border: 1px solid var(--miku-teal);
|
||||
color: var(--miku-teal-ink);
|
||||
|
||||
&:hover {
|
||||
background: #e0f6f4;
|
||||
color: var(--miku-teal-ink);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--miku-pink);
|
||||
border: 1px solid #b81e6c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #e3eaed;
|
||||
border-radius: 8px;
|
||||
|
||||
> .btn {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
> .btn-outline-primary {
|
||||
background: transparent;
|
||||
color: var(--miku-text);
|
||||
|
||||
&:hover {
|
||||
background: var(--miku-panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spin-result {
|
||||
font-weight: 800;
|
||||
|
||||
strong {
|
||||
color: var(--miku-teal-ink);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options {
|
||||
background: var(--miku-panel);
|
||||
border: 1px solid var(--miku-line);
|
||||
border-radius: 12px;
|
||||
|
||||
li:hover {
|
||||
background: #eef8f7;
|
||||
}
|
||||
}
|
||||
|
||||
.spin-options-header {
|
||||
border-bottom: 2px solid var(--miku-teal);
|
||||
color: var(--miku-teal-ink);
|
||||
font-family: var(--miku-display);
|
||||
}
|
||||
|
||||
.spin-empty {
|
||||
border-color: var(--miku-line);
|
||||
}
|
||||
|
||||
.spin-wheel-pointer {
|
||||
border-top-color: var(--miku-pink);
|
||||
filter: drop-shadow(0 0 4px rgb(225 40 133 / 0.6));
|
||||
}
|
||||
|
||||
.spin-wheel-hub {
|
||||
stroke: var(--miku-teal);
|
||||
}
|
||||
|
||||
.spin-seg {
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.spin-seg-label {
|
||||
font-family: var(--miku-display);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
// Tmavý režim — koncert
|
||||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-miku {
|
||||
--miku-teal-ink: #5fd6cd;
|
||||
--miku-line: #23303a;
|
||||
--miku-panel: #14191d;
|
||||
--miku-text: #eef4f6;
|
||||
--wheel-c2: #3a4248;
|
||||
--wheel-rim: #050607;
|
||||
--wheel-hub: #050607;
|
||||
|
||||
.modal-content {
|
||||
border-color: #23303a;
|
||||
background:
|
||||
linear-gradient(115deg, transparent 38%, rgb(57 197 187 / 0.10) 46%, transparent 54%),
|
||||
linear-gradient(-115deg, transparent 38%, rgb(225 40 133 / 0.09) 46%, transparent 54%),
|
||||
#0b0d10;
|
||||
box-shadow: 0 0 30px rgb(57 197 187 / 0.2);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='10'%3E%3Crect width='98' height='10' fill='%23ffffff'/%3E%3Cpath d='M14 0V10M28 0V10M42 0V10M56 0V10M70 0V10M84 0V10M98 0V10' stroke='%239aa3a8'/%3E%3Cpath d='M10 0h8v6h-8zM24 0h8v6h-8zM52 0h8v6h-8zM66 0h8v6h-8zM80 0h8v6h-8z' fill='%232b2f33'/%3E%3C/svg%3E") left bottom / 98px 10px repeat-x,
|
||||
linear-gradient(var(--miku-teal), var(--miku-teal)) left bottom 10px / 100% 2px no-repeat,
|
||||
#101417;
|
||||
}
|
||||
|
||||
.spin-steps span:not(.active):not(.done) {
|
||||
background: #1b2328;
|
||||
color: #82919a;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #23303a;
|
||||
border-color: #23303a;
|
||||
color: #82919a;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: #12302e;
|
||||
}
|
||||
|
||||
.spin-source {
|
||||
background: #1b2328;
|
||||
}
|
||||
|
||||
.spin-options li:hover {
|
||||
background: #1b2328;
|
||||
}
|
||||
|
||||
.spin-seg {
|
||||
stroke: #0b0d10;
|
||||
}
|
||||
}
|
||||
|
||||
// Ikona kola se při najetí pootočí
|
||||
.spin-wheel-icon {
|
||||
transition: transform 0.4s ease !important;
|
||||
|
||||
Reference in new issue
Block a user