mates
f042a0b831
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
4181 lines
89 KiB
SCSS
4181 lines
89 KiB
SCSS
// Barvy výsečí — jednoduchý styl odvozuje odstíny od primární barvy,
|
||
// styl Umamusume je přebíjí vlastní paletou (viz níže)
|
||
:root {
|
||
--wheel-c0: var(--luncher-primary);
|
||
--wheel-c1: #0ea5e9;
|
||
--wheel-c2: #f59e0b;
|
||
--wheel-c3: #8b5cf6;
|
||
--wheel-c4: #ec4899;
|
||
--wheel-c5: #14b8a6;
|
||
--wheel-label: #ffffff;
|
||
--wheel-rim: var(--luncher-text);
|
||
--wheel-hub: var(--luncher-bg-card);
|
||
}
|
||
|
||
.spin-wheel-modal {
|
||
.spin-steps {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 12px;
|
||
font-size: 0.85rem;
|
||
font-weight: 700;
|
||
|
||
span {
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
background: var(--luncher-bg-hover);
|
||
color: var(--luncher-text-muted);
|
||
|
||
&.active {
|
||
background: var(--luncher-primary);
|
||
color: #fff;
|
||
}
|
||
|
||
&.done {
|
||
background: var(--luncher-primary-light);
|
||
color: var(--luncher-primary);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-source-info {
|
||
align-self: center;
|
||
margin-left: 4px;
|
||
color: var(--luncher-text-muted);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.spin-steps {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
// Přepínač zdroje jako segmentovaná „pilulka"
|
||
.spin-source {
|
||
display: inline-flex;
|
||
gap: 2px;
|
||
padding: 3px;
|
||
border-radius: 999px;
|
||
background: var(--luncher-bg-hover);
|
||
|
||
> .btn {
|
||
padding: 6px 16px;
|
||
font-size: 0.9rem;
|
||
border: none !important;
|
||
border-radius: 999px !important;
|
||
box-shadow: none !important;
|
||
margin: 0 !important;
|
||
transform: none !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--luncher-text-secondary);
|
||
|
||
&:hover {
|
||
background: var(--luncher-bg-card);
|
||
color: var(--luncher-primary);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 240px;
|
||
gap: 20px;
|
||
align-items: start;
|
||
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
}
|
||
|
||
.spin-wheel-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.spin-empty {
|
||
width: 100%;
|
||
max-width: 380px;
|
||
aspect-ratio: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 24px;
|
||
border: 2px dashed var(--luncher-border);
|
||
border-radius: 50%;
|
||
color: var(--luncher-text-muted);
|
||
}
|
||
|
||
.spin-result {
|
||
min-height: 1.6em;
|
||
font-size: 1.15rem;
|
||
text-align: center;
|
||
opacity: 0;
|
||
transform: translateY(6px);
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
|
||
&.visible {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
small {
|
||
color: var(--luncher-text-muted);
|
||
}
|
||
}
|
||
|
||
.spin-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.spin-button {
|
||
min-width: 160px;
|
||
}
|
||
|
||
.spin-options {
|
||
border: 1px solid var(--luncher-border);
|
||
border-radius: var(--luncher-radius);
|
||
background: var(--luncher-bg);
|
||
max-height: 440px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
|
||
ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 4px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 4px 6px;
|
||
border-radius: var(--luncher-radius-sm);
|
||
font-size: 0.85rem;
|
||
|
||
&:hover {
|
||
background: var(--luncher-bg-hover);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 10px;
|
||
border-bottom: 1px solid var(--luncher-border);
|
||
font-weight: 700;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.spin-restore {
|
||
background: none;
|
||
border: none;
|
||
color: var(--luncher-primary);
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
padding: 0;
|
||
}
|
||
|
||
.spin-dot {
|
||
flex: none;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.spin-option-label {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.spin-option-kind {
|
||
color: var(--luncher-text-muted);
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.spin-remove {
|
||
flex: none;
|
||
background: none;
|
||
border: none;
|
||
color: var(--luncher-text-muted);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
|
||
&:hover:not(:disabled) {
|
||
color: var(--luncher-danger);
|
||
background: var(--luncher-bg-hover);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-wheel {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 380px;
|
||
aspect-ratio: 1;
|
||
}
|
||
|
||
.spin-wheel-svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.18));
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
position: absolute;
|
||
top: -6px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 2;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14px solid transparent;
|
||
border-right: 14px solid transparent;
|
||
border-top: 26px solid var(--luncher-danger);
|
||
filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.3));
|
||
}
|
||
|
||
.spin-wheel-rim {
|
||
fill: var(--wheel-rim);
|
||
}
|
||
|
||
.spin-wheel-hub {
|
||
fill: var(--wheel-hub);
|
||
stroke: var(--wheel-rim);
|
||
stroke-width: 4;
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: var(--wheel-hub);
|
||
stroke-width: 1.5;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
fill: var(--wheel-label);
|
||
font-weight: 700;
|
||
pointer-events: none;
|
||
paint-order: stroke;
|
||
stroke: rgb(0 0 0 / 0.25);
|
||
stroke-width: 2px;
|
||
}
|
||
|
||
@for $i from 0 through 5 {
|
||
.spin-seg-#{$i} {
|
||
fill: var(--wheel-c#{$i});
|
||
background: var(--wheel-c#{$i});
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.spin-wheel-svg {
|
||
transition-duration: 0.6s !important;
|
||
}
|
||
}
|
||
|
||
.spin-wheel-modal .modal-header {
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
|
||
.modal-title {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
h2 {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL UMAMUSUME kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Trávník dostihové dráhy, růžové a nebeské akcenty, zlaté lemy,
|
||
// zaoblené tučné písmo a „herní" tlačítka s vystouplým spodkem.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-umamusume {
|
||
--uma-font: 'M PLUS Rounded 1c', 'Nunito', 'Inter', sans-serif;
|
||
--uma-turf: #5cc23d;
|
||
--uma-turf-deep: #2e9a3a;
|
||
--uma-turf-shadow: #1f7a2c;
|
||
--uma-pink: #ff6fa3;
|
||
--uma-pink-deep: #e84d86;
|
||
--uma-gold: #ffc531;
|
||
--uma-panel: #f4fbef;
|
||
--uma-border: #c6ebb2;
|
||
--uma-text: #1d3322;
|
||
--wheel-c0: var(--uma-turf);
|
||
--wheel-c1: var(--uma-pink);
|
||
--wheel-c2: #43b8f0;
|
||
--wheel-c3: #f2a91a;
|
||
--wheel-c4: #a078f0;
|
||
--wheel-c5: #ff8a3d;
|
||
--wheel-rim: var(--uma-gold);
|
||
--wheel-hub: #ffffff;
|
||
|
||
font-family: var(--uma-font);
|
||
|
||
.modal-content {
|
||
border: 4px solid var(--uma-border);
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
background-image: repeating-linear-gradient(135deg, rgb(92 194 61 / 0.06) 0 16px, transparent 16px 32px);
|
||
color: var(--uma-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
repeating-linear-gradient(115deg, rgb(255 255 255 / 0.13) 0 12px, transparent 12px 24px),
|
||
linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf));
|
||
border-bottom: 4px solid var(--uma-gold);
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-family: var(--uma-font);
|
||
font-weight: 800;
|
||
text-shadow: 0 2px 0 var(--uma-turf-shadow);
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 3px dashed var(--uma-border);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--uma-font);
|
||
background: #e7f3e0;
|
||
color: #7c9a82;
|
||
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
|
||
border-radius: 0;
|
||
padding: 4px 18px;
|
||
|
||
&.active {
|
||
background: linear-gradient(90deg, var(--uma-pink-deep), var(--uma-pink));
|
||
color: #fff;
|
||
}
|
||
|
||
&.done {
|
||
background: var(--uma-turf);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--uma-font);
|
||
font-weight: 800;
|
||
border-radius: 999px;
|
||
transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.2s ease;
|
||
|
||
&:active:not(:disabled) {
|
||
transform: translateY(3px);
|
||
box-shadow: 0 1px 0 var(--uma-btn-shadow, transparent);
|
||
}
|
||
}
|
||
|
||
.btn-primary {
|
||
--uma-btn-shadow: var(--uma-turf-shadow);
|
||
background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
|
||
box-shadow: 0 4px 0 var(--uma-turf-shadow);
|
||
color: #fff;
|
||
text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
|
||
|
||
&:disabled {
|
||
background: #b9cbbd;
|
||
box-shadow: 0 4px 0 #97aa9b;
|
||
}
|
||
}
|
||
|
||
.spin-button {
|
||
--uma-btn-shadow: #b8335f;
|
||
background: linear-gradient(180deg, #ff8db5, var(--uma-pink-deep));
|
||
box-shadow: 0 5px 0 #b8335f;
|
||
font-size: 1.15rem;
|
||
padding: 12px 36px;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
--uma-btn-shadow: var(--uma-border);
|
||
background: #fff;
|
||
border: 2px solid var(--uma-turf);
|
||
color: var(--uma-turf-deep);
|
||
box-shadow: 0 4px 0 var(--uma-border);
|
||
|
||
&:hover {
|
||
background: #eaf8e2;
|
||
color: var(--uma-turf-deep);
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
--uma-btn-shadow: #d4ddd6;
|
||
background: #fff;
|
||
border: 2px solid #d4ddd6;
|
||
color: var(--uma-text);
|
||
box-shadow: 0 4px 0 #d4ddd6;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #e7f3e0;
|
||
|
||
> .btn-primary {
|
||
background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
|
||
box-shadow: 0 2px 0 var(--uma-turf-shadow) !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--uma-turf-deep);
|
||
|
||
&:hover {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 800;
|
||
|
||
strong {
|
||
color: var(--uma-pink-deep);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--uma-panel);
|
||
border: 3px solid var(--uma-border);
|
||
border-radius: 16px;
|
||
|
||
li:hover {
|
||
background: #fff0f6;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 3px solid var(--uma-border);
|
||
color: var(--uma-turf-deep);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--uma-border);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--uma-pink-deep);
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #fff;
|
||
stroke-width: 2.5;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--uma-font);
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — noční dostih pod reflektory
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-umamusume {
|
||
--uma-panel: #19223d;
|
||
--uma-border: #2c3a66;
|
||
--uma-text: #f3f6ff;
|
||
--wheel-hub: #19223d;
|
||
|
||
.modal-content {
|
||
background-color: #10172b;
|
||
background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.03) 0 16px, transparent 16px 32px);
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #222d4f;
|
||
color: #7d89ad;
|
||
}
|
||
|
||
.btn-outline-primary, .btn-secondary {
|
||
background: #19223d;
|
||
color: #f3f6ff;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #222d4f;
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: #b8c2e0;
|
||
|
||
&:hover {
|
||
background: #19223d;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #2a2344;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL MY LITTLE PONY kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Výseče v barvách Mane 6, duhový lem Rainbow Dash, fialová Twilight
|
||
// a růžová Pinkie Pie, kulatá „bonbonová" tlačítka.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-mlp {
|
||
--mlp-font: 'Fredoka', 'Nunito', 'Inter', sans-serif;
|
||
--mlp-twilight: #8e4fd1;
|
||
--mlp-twilight-deep: #6a35b0;
|
||
--mlp-twilight-shadow: #4b2287;
|
||
--mlp-pinkie: #f06aa6;
|
||
--mlp-pinkie-deep: #d6417f;
|
||
--mlp-panel: #faf5ff;
|
||
--mlp-border: #e5d4f7;
|
||
--mlp-text: #2e1f47;
|
||
// Mane 6: Twilight, Pinkie, Rainbow Dash, Applejack, Fluttershy, Rarity
|
||
--wheel-c0: #9b5fe0;
|
||
--wheel-c1: #f06aa6;
|
||
--wheel-c2: #1e98d3;
|
||
--wheel-c3: #f37033;
|
||
--wheel-c4: #e3b829;
|
||
--wheel-c5: #5b4fc9;
|
||
--wheel-rim: #ec3d8f;
|
||
--wheel-hub: #ffffff;
|
||
|
||
font-family: var(--mlp-font);
|
||
|
||
.modal-content {
|
||
border: 4px solid var(--mlp-border);
|
||
border-radius: 26px;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
background-image:
|
||
radial-gradient(circle at 20% 30%, rgb(142 79 209 / 0.10) 0 2px, transparent 3px),
|
||
radial-gradient(circle at 70% 80%, rgb(240 106 166 / 0.10) 0 2px, transparent 3px);
|
||
background-size: 120px 120px, 170px 170px;
|
||
color: var(--mlp-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
linear-gradient(90deg, #ee4144 0 16.6%, #f37033 16.6% 33.3%, #fdf6af 33.3% 50%, #62bc4d 50% 66.6%, #1e98d3 66.6% 83.3%, #672f89 83.3% 100%) bottom / 100% 5px no-repeat,
|
||
linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-twilight) 60%, var(--mlp-pinkie));
|
||
border-bottom: none;
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-family: var(--mlp-font);
|
||
font-weight: 700;
|
||
text-shadow: 0 2px 0 var(--mlp-twilight-shadow);
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 3px dotted var(--mlp-border);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--mlp-font);
|
||
background: #f1e6fc;
|
||
color: #9a8ab3;
|
||
border-radius: 999px;
|
||
padding: 4px 16px;
|
||
|
||
&.active {
|
||
background: linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-pinkie));
|
||
color: #fff;
|
||
}
|
||
|
||
&.done {
|
||
background: var(--mlp-twilight);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--mlp-font);
|
||
font-weight: 600;
|
||
border-radius: 999px;
|
||
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
|
||
|
||
&:active:not(:disabled) {
|
||
transform: translateY(3px);
|
||
box-shadow: 0 1px 0 var(--mlp-btn-shadow, transparent);
|
||
}
|
||
}
|
||
|
||
.btn-primary {
|
||
--mlp-btn-shadow: var(--mlp-twilight-shadow);
|
||
background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
|
||
border: none;
|
||
box-shadow: 0 4px 0 var(--mlp-twilight-shadow);
|
||
color: #fff;
|
||
text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
|
||
|
||
&:disabled {
|
||
background: #c9bdd9;
|
||
box-shadow: 0 4px 0 #a99cbc;
|
||
}
|
||
}
|
||
|
||
.spin-button {
|
||
--mlp-btn-shadow: #a52c63;
|
||
background: linear-gradient(180deg, #ff94c4, var(--mlp-pinkie-deep));
|
||
box-shadow: 0 5px 0 #a52c63, 0 0 18px rgb(240 106 166 / 0.45);
|
||
font-size: 1.15rem;
|
||
padding: 12px 36px;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
--mlp-btn-shadow: var(--mlp-border);
|
||
background: #fff;
|
||
border: 2px solid var(--mlp-twilight);
|
||
color: var(--mlp-twilight-deep);
|
||
box-shadow: 0 4px 0 var(--mlp-border);
|
||
|
||
&:hover {
|
||
background: #f1e6fc;
|
||
color: var(--mlp-twilight-deep);
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
--mlp-btn-shadow: var(--mlp-border);
|
||
background: #fff;
|
||
border: 2px solid var(--mlp-border);
|
||
color: var(--mlp-text);
|
||
box-shadow: 0 4px 0 var(--mlp-border);
|
||
}
|
||
|
||
.spin-source {
|
||
background: #f1e6fc;
|
||
|
||
> .btn-primary {
|
||
background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
|
||
box-shadow: 0 2px 0 var(--mlp-twilight-shadow) !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--mlp-twilight-deep);
|
||
|
||
&:hover {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 700;
|
||
|
||
strong {
|
||
color: var(--mlp-pinkie-deep);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--mlp-panel);
|
||
border: 3px solid var(--mlp-border);
|
||
border-radius: 18px;
|
||
|
||
li:hover {
|
||
background: #fff0f7;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 3px solid var(--mlp-border);
|
||
color: var(--mlp-twilight-deep);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--mlp-border);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--mlp-pinkie-deep);
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #fff;
|
||
stroke-width: 2.5;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--mlp-font);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — noční obloha princezny Luny
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-mlp {
|
||
--mlp-panel: #1d1745;
|
||
--mlp-border: #362c6e;
|
||
--mlp-text: #f2edff;
|
||
--wheel-hub: #1d1745;
|
||
|
||
.modal-content {
|
||
background-color: #120e2e;
|
||
background-image:
|
||
radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.5) 0 1.5px, transparent 2.5px),
|
||
radial-gradient(circle at 70% 80%, rgb(183 198 255 / 0.35) 0 1px, transparent 2px);
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #282058;
|
||
color: #8a7fb5;
|
||
}
|
||
|
||
.btn-outline-primary, .btn-secondary {
|
||
background: #1d1745;
|
||
color: #f2edff;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #282058;
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: #c2b6e6;
|
||
|
||
&:hover {
|
||
background: #1d1745;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #2e2160;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL HELL GIRL kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Výseče v barvách soumraku a pekla, rudá nit jako lem,
|
||
// černá tuš, papír washi a ostrá tlačítka s písmem mincho.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-hellgirl {
|
||
--hg-font: 'Shippori Mincho', 'Noto Serif JP', 'Georgia', serif;
|
||
--hg-crimson: #a3122a;
|
||
--hg-crimson-deep: #7a0c1f;
|
||
--hg-crimson-shadow: #4a0612;
|
||
--hg-panel: #fffbf5;
|
||
--hg-border: #dccbbb;
|
||
--hg-text: #1c1012;
|
||
--wheel-c0: #a3122a;
|
||
--wheel-c1: #1f1416;
|
||
--wheel-c2: #c8452a;
|
||
--wheel-c3: #4b1a4f;
|
||
--wheel-c4: #6e0b1a;
|
||
--wheel-c5: #9a6b1f;
|
||
--wheel-rim: #c8102e;
|
||
--wheel-hub: #12070a;
|
||
|
||
font-family: var(--hg-font);
|
||
|
||
.modal-content {
|
||
border: 1px solid var(--hg-crimson);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
background: linear-gradient(180deg, #f3d9cc, #f4ece0 220px);
|
||
color: var(--hg-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
linear-gradient(90deg, transparent, #c8102e 12%, #e8344f 50%, #c8102e 88%, transparent) bottom / 100% 2px no-repeat,
|
||
linear-gradient(90deg, #1e0a1c, #4a0f2a 35%, #8e0f24 70%, #c8452a);
|
||
border-bottom: none;
|
||
|
||
h2 {
|
||
color: #fff4ee;
|
||
font-family: var(--hg-font);
|
||
font-weight: 800;
|
||
letter-spacing: 0.5px;
|
||
text-shadow: 0 0 10px rgb(232 52 79 / 0.5);
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 1px solid var(--hg-border);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--hg-font);
|
||
background: #eadfd2;
|
||
color: #8c7672;
|
||
border-radius: 2px;
|
||
padding: 4px 16px;
|
||
|
||
&.active {
|
||
background: linear-gradient(90deg, #1c0a10, var(--hg-crimson-deep));
|
||
color: #fff4ee;
|
||
}
|
||
|
||
&.done {
|
||
background: var(--hg-crimson);
|
||
color: #fff4ee;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--hg-font);
|
||
font-weight: 700;
|
||
border-radius: 2px;
|
||
transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||
|
||
&:active:not(:disabled) {
|
||
transform: translateY(1px);
|
||
}
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(180deg, #c01733, var(--hg-crimson-deep));
|
||
border: 1px solid var(--hg-crimson-shadow);
|
||
color: #fff4ee;
|
||
box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.12);
|
||
|
||
&:disabled {
|
||
background: #b9a3a0;
|
||
border-color: #9c8582;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
// Tlačítko roztočení — černá deska s rudou září
|
||
.spin-button {
|
||
background: linear-gradient(180deg, #2a1216, #12070a);
|
||
border: 1px solid #c8102e;
|
||
box-shadow: 0 0 0 3px rgb(200 16 46 / 0.25), 0 0 18px rgb(200 16 46 / 0.45);
|
||
letter-spacing: 1px;
|
||
font-size: 1.15rem;
|
||
padding: 12px 36px;
|
||
|
||
&:hover:not(:disabled) {
|
||
background: linear-gradient(180deg, #3a1219, #1c0a10);
|
||
box-shadow: 0 0 0 3px rgb(200 16 46 / 0.4), 0 0 24px rgb(200 16 46 / 0.65);
|
||
}
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
background: transparent;
|
||
border: 1px solid var(--hg-crimson);
|
||
color: var(--hg-crimson);
|
||
|
||
&:hover {
|
||
background: var(--hg-crimson);
|
||
color: #fff4ee;
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--hg-panel);
|
||
border: 1px solid var(--hg-border);
|
||
color: var(--hg-text);
|
||
}
|
||
|
||
.spin-source {
|
||
background: #eadfd2;
|
||
|
||
> .btn-primary {
|
||
background: linear-gradient(180deg, #c01733, var(--hg-crimson-deep));
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--hg-crimson-deep);
|
||
|
||
&:hover {
|
||
background: var(--hg-panel);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 700;
|
||
|
||
strong {
|
||
color: var(--hg-crimson);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--hg-panel);
|
||
border: 1px solid var(--hg-border);
|
||
border-top: 3px solid var(--hg-crimson);
|
||
border-radius: 3px;
|
||
|
||
li:hover {
|
||
background: #f8e6e2;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 1px solid var(--hg-border);
|
||
color: var(--hg-crimson-deep);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--hg-border);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: #c8102e;
|
||
filter: drop-shadow(0 0 4px rgb(200 16 46 / 0.7));
|
||
}
|
||
|
||
.spin-wheel-rim {
|
||
filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.6));
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #12070a;
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--hg-font);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — půlnoc Pekelné korespondence
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-hellgirl {
|
||
--hg-crimson: #e0334f;
|
||
--hg-crimson-deep: #b81c38;
|
||
--hg-panel: #170c0f;
|
||
--hg-border: #3d1c22;
|
||
--hg-text: #f3e6e2;
|
||
--wheel-c1: #2e1a1e;
|
||
|
||
.modal-content {
|
||
background:
|
||
radial-gradient(ellipse 120% 45% at 50% 115%, rgb(140 12 36 / 0.35), transparent 70%),
|
||
linear-gradient(180deg, #1c0a12, #0c0608 260px);
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #221216;
|
||
color: #8a6c6a;
|
||
}
|
||
|
||
.btn-outline-primary, .btn-secondary {
|
||
background: #170c0f;
|
||
color: #f3e6e2;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #221216;
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: #c9aeaa;
|
||
|
||
&:hover {
|
||
background: #170c0f;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #2a1218;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL K-ON! kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Výseče v barvách členek Houkago Tea Time, tmavě modré školní sako,
|
||
// notový sešit a tlačítko roztočení jako kytara Gitah (cherry sunburst).
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-kon {
|
||
--kon-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
||
--kon-blazer: #27315f;
|
||
--kon-blazer-light: #3a4782;
|
||
--kon-blazer-shadow: #171d3d;
|
||
--kon-cherry: #c43358;
|
||
--kon-cherry-deep: #a3234a;
|
||
--kon-sunburst: #f2a33a;
|
||
--kon-panel: #fffaf0;
|
||
--kon-border: #e6d8c0;
|
||
--kon-text: #222849;
|
||
// Yui, Mio, Ritsu, Azusa, Ui a tmavě modrá školní
|
||
--wheel-c0: #d43f62;
|
||
--wheel-c1: #3d6fc4;
|
||
--wheel-c2: #f2b81d;
|
||
--wheel-c3: #8a6bc7;
|
||
--wheel-c4: #e46f9a;
|
||
--wheel-c5: #27315f;
|
||
--wheel-rim: #27315f;
|
||
--wheel-hub: #fffaf0;
|
||
|
||
font-family: var(--kon-font);
|
||
|
||
.modal-content {
|
||
border: 3px solid var(--kon-border);
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
background:
|
||
repeating-linear-gradient(180deg, transparent 0 27px, rgb(61 111 196 / 0.07) 27px 28px),
|
||
var(--kon-panel);
|
||
color: var(--kon-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
linear-gradient(90deg, #d43f62 0 20%, #3d6fc4 20% 40%, #f2b81d 40% 60%, #e8cf7a 60% 80%, #8a6bc7 80% 100%) bottom / 100% 4px no-repeat,
|
||
linear-gradient(90deg, var(--kon-blazer-shadow), var(--kon-blazer) 40%, var(--kon-blazer-light));
|
||
border-bottom: none;
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-family: var(--kon-font);
|
||
font-weight: 900;
|
||
text-shadow: 0 2px 0 var(--kon-blazer-shadow);
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 2px dashed var(--kon-border);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--kon-font);
|
||
background: #f3e8d4;
|
||
color: #8a8aa3;
|
||
border-radius: 10px;
|
||
padding: 4px 16px;
|
||
|
||
&.active {
|
||
background: var(--kon-blazer);
|
||
color: #fff;
|
||
}
|
||
|
||
&.done {
|
||
background: var(--kon-cherry);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--kon-font);
|
||
font-weight: 700;
|
||
border-radius: 10px;
|
||
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
|
||
|
||
&:active:not(:disabled) {
|
||
transform: translateY(3px);
|
||
box-shadow: 0 1px 0 var(--kon-btn-shadow, transparent);
|
||
}
|
||
}
|
||
|
||
.btn-primary {
|
||
--kon-btn-shadow: var(--kon-blazer);
|
||
background: linear-gradient(180deg, #e0567a, var(--kon-cherry-deep));
|
||
border: none;
|
||
box-shadow: 0 4px 0 var(--kon-blazer);
|
||
color: #fff;
|
||
text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
|
||
|
||
&:disabled {
|
||
background: #c8c3cf;
|
||
box-shadow: 0 4px 0 #a5a1b0;
|
||
}
|
||
}
|
||
|
||
// Tlačítko roztočení — lak kytary Gitah (jantarový střed, třešňové okraje)
|
||
.spin-button {
|
||
--kon-btn-shadow: var(--kon-blazer);
|
||
background: radial-gradient(ellipse 70% 130% at 50% 45%, #ffd27a, var(--kon-sunburst) 25%, var(--kon-cherry) 65%, #6e1530);
|
||
box-shadow: 0 5px 0 var(--kon-blazer), 0 0 18px rgb(242 163 58 / 0.45);
|
||
font-size: 1.15rem;
|
||
padding: 12px 36px;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
--kon-btn-shadow: var(--kon-border);
|
||
background: #fff;
|
||
border: 2px solid var(--kon-blazer);
|
||
color: var(--kon-blazer);
|
||
box-shadow: 0 4px 0 var(--kon-border);
|
||
|
||
&:hover {
|
||
background: var(--kon-blazer);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
--kon-btn-shadow: var(--kon-border);
|
||
background: #fff;
|
||
border: 2px solid var(--kon-border);
|
||
color: var(--kon-text);
|
||
box-shadow: 0 4px 0 var(--kon-border);
|
||
}
|
||
|
||
.spin-source {
|
||
background: #f3e8d4;
|
||
|
||
> .btn-primary {
|
||
background: linear-gradient(180deg, #e0567a, var(--kon-cherry-deep));
|
||
box-shadow: 0 2px 0 var(--kon-blazer) !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--kon-blazer);
|
||
|
||
&:hover {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 700;
|
||
|
||
strong {
|
||
color: var(--kon-cherry);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--kon-panel);
|
||
border: 2px solid var(--kon-border);
|
||
border-radius: 16px;
|
||
|
||
li:hover {
|
||
background: #fdeee0;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 2px solid var(--kon-border);
|
||
color: var(--kon-blazer);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--kon-border);
|
||
}
|
||
|
||
// Ukazatel jako trsátko
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--kon-cherry);
|
||
filter: drop-shadow(0 2px 0 var(--kon-blazer));
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #fffaf0;
|
||
stroke-width: 2.5;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--kon-font);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — večerní koncert pod reflektory
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-kon {
|
||
--kon-cherry: #ff7a9a;
|
||
--kon-panel: #171c42;
|
||
--kon-border: #2c3566;
|
||
--kon-text: #f1f0ff;
|
||
--wheel-c5: #4a5ab0;
|
||
--wheel-rim: #8fb2ff;
|
||
--wheel-hub: #171c42;
|
||
|
||
.modal-content {
|
||
background:
|
||
radial-gradient(ellipse 45% 60% at 10% -10%, rgb(255 122 154 / 0.18), transparent 70%),
|
||
radial-gradient(ellipse 45% 60% at 90% -10%, rgb(255 209 102 / 0.14), transparent 70%),
|
||
#0e1230;
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #212858;
|
||
color: #8085b3;
|
||
}
|
||
|
||
.btn-outline-primary, .btn-secondary {
|
||
background: #171c42;
|
||
color: #f1f0ff;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
border-color: #8fb2ff;
|
||
|
||
&:hover {
|
||
background: #2b367a;
|
||
}
|
||
}
|
||
|
||
.spin-source {
|
||
background: #212858;
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: #bfc2e6;
|
||
|
||
&:hover {
|
||
background: #171c42;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
color: #c9d6ff;
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #232a5c;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL NEON GENESIS EVANGELION kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Výseče v barvách NERV a Evangelionů (oranžová, rudá, Unit-01 fialová a zelená,
|
||
// Unit-00 modrá), ostré hrany a výstražné pruhy, střed kola jako jádro Anděla.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-evangelion {
|
||
--eva-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
|
||
--eva-display: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||
--eva-orange: #f26b00;
|
||
--eva-orange-text: #b84d00;
|
||
--eva-red: #d81e1e;
|
||
--eva-line: #c9c6bd;
|
||
--eva-panel: #ffffff;
|
||
--eva-text: #111214;
|
||
// NERV oranžová, Unit-01 fialová a zelená, Unit-02 rudá, Unit-00 modrá a černá velína
|
||
--wheel-c0: #f26b00;
|
||
--wheel-c1: #5b2a86;
|
||
--wheel-c2: #d81e1e;
|
||
--wheel-c3: #3f8a2a;
|
||
--wheel-c4: #2f6fb3;
|
||
--wheel-c5: #111214;
|
||
--wheel-rim: #111214;
|
||
--wheel-hub: #d81e1e;
|
||
|
||
font-family: var(--eva-font);
|
||
|
||
.modal-content {
|
||
border: 1px solid var(--eva-orange);
|
||
border-radius: 0;
|
||
overflow: hidden;
|
||
background: #f1efe9;
|
||
color: var(--eva-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
repeating-linear-gradient(-45deg, #f26b00 0 10px, #111214 10px 20px) bottom / 100% 5px no-repeat,
|
||
#0d0e10;
|
||
border-bottom: none;
|
||
border-radius: 0;
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-family: var(--eva-display);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 1px solid var(--eva-line);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--eva-font);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
background: #e3e0d8;
|
||
color: #75777e;
|
||
border-radius: 0;
|
||
padding: 4px 16px;
|
||
|
||
&.active {
|
||
background: var(--eva-orange);
|
||
color: #000;
|
||
}
|
||
|
||
&.done {
|
||
background: #111214;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--eva-font);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--eva-orange);
|
||
border: 1px solid var(--eva-orange);
|
||
color: #000;
|
||
|
||
&:hover:not(:disabled) {
|
||
background: #ff8a1f;
|
||
border-color: #ff8a1f;
|
||
color: #000;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #c9c6bd;
|
||
border-color: #c9c6bd;
|
||
color: #5f6168;
|
||
}
|
||
}
|
||
|
||
// Tlačítko roztočení — aktivační spínač s výstražnými pruhy kolem
|
||
.spin-button {
|
||
font-size: 1.2rem;
|
||
letter-spacing: 0.2em;
|
||
padding: 12px 36px;
|
||
box-shadow: 0 0 0 3px #111214;
|
||
|
||
&:hover:not(:disabled) {
|
||
box-shadow: 0 0 0 3px #111214, 0 0 0 4px var(--eva-red), 0 0 16px rgb(216 30 30 / 0.5);
|
||
}
|
||
|
||
&:active:not(:disabled) {
|
||
background: var(--eva-red);
|
||
border-color: var(--eva-red);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
background: transparent;
|
||
border: 1px solid var(--eva-orange);
|
||
color: var(--eva-orange-text);
|
||
|
||
&:hover {
|
||
background: var(--eva-orange);
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #2b2d31;
|
||
border: 1px solid #2b2d31;
|
||
color: #fff;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #e3e0d8;
|
||
border-radius: 0;
|
||
|
||
> .btn {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
> .btn-primary {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
border-color: transparent;
|
||
color: var(--eva-text);
|
||
|
||
&:hover {
|
||
background: #fff;
|
||
color: var(--eva-text);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
|
||
strong {
|
||
color: var(--eva-orange-text);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--eva-panel);
|
||
border: 1px solid var(--eva-line);
|
||
border-top: 3px solid var(--eva-orange);
|
||
border-radius: 0;
|
||
|
||
li:hover {
|
||
background: #fff3e6;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 1px solid var(--eva-line);
|
||
color: var(--eva-orange-text);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--eva-line);
|
||
border-radius: 0;
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--eva-red);
|
||
filter: drop-shadow(0 0 4px rgb(216 30 30 / 0.6));
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #111214;
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--eva-font);
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — velín Central Dogma
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-evangelion {
|
||
--eva-orange: #ff8a1f;
|
||
--eva-orange-text: #ff8a1f;
|
||
--eva-red: #ff3b3b;
|
||
--eva-line: #4a2c10;
|
||
--eva-panel: #111317;
|
||
--eva-text: #f2efe6;
|
||
--wheel-c5: #2b2d31;
|
||
--wheel-rim: #000000;
|
||
|
||
.modal-content {
|
||
background:
|
||
repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
|
||
radial-gradient(ellipse 70% 45% at 50% 110%, rgb(216 30 30 / 0.18), transparent 70%),
|
||
#08090b;
|
||
box-shadow: 0 0 30px rgb(255 138 31 / 0.18);
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #1a1d22;
|
||
color: #8a8780;
|
||
}
|
||
|
||
.spin-steps span.done {
|
||
background: #2b2d31;
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background: #2b2d31;
|
||
border-color: #2b2d31;
|
||
color: #8a8780;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #1f2227;
|
||
border-color: #3a3c41;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #1a1d22;
|
||
|
||
> .btn-outline-primary:hover {
|
||
background: #111317;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #1f1408;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL YURU CAMP△ kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Výseče v barvách lesa, podzimního listí, jezera a šál Rin a Nadeshiko,
|
||
// okraj jako dřevěná obruč a střed jako žhavé uhlíky táboráku.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-yurucamp {
|
||
--yc-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
||
--yc-display: 'Kiwi Maru', 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
||
--yc-ember: #b5542a;
|
||
--yc-ember-bright: #e8833a;
|
||
--yc-forest: #3f6b4a;
|
||
--yc-line: #e2d5bd;
|
||
--yc-panel: #fffdf8;
|
||
--yc-text: #3a2e25;
|
||
--yc-kraft: #f3e3c3;
|
||
// Les, podzimní oranžová, javor, jezero Motosu, dřevo a růžová Nadeshiko
|
||
--wheel-c0: #3f6b4a;
|
||
--wheel-c1: #e8833a;
|
||
--wheel-c2: #c8553d;
|
||
--wheel-c3: #3b6fa8;
|
||
--wheel-c4: #8a5a3b;
|
||
--wheel-c5: #d9739b;
|
||
--wheel-rim: #5a3a24;
|
||
--wheel-hub: #f2b84b;
|
||
|
||
font-family: var(--yc-font);
|
||
|
||
.modal-content {
|
||
border: 1px solid var(--yc-line);
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
background: linear-gradient(180deg, #eef5f8 0, #fbf6ec 160px);
|
||
color: var(--yc-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 60L88 13Q96 8 104 9H136Q144 8 152 13L240 60Z' fill='%233e5374'/%3E%3Cpath d='M88 13Q96 8 104 9H136Q144 8 152 13L141 21L132 16L124 23L114 16L106 22L97 18Z' fill='%23e6edf5'/%3E%3C/svg%3E") right 60px bottom / auto 70% no-repeat,
|
||
linear-gradient(180deg, #24314a, #2b3a55);
|
||
border-bottom: 3px solid var(--yc-ember-bright);
|
||
|
||
h2 {
|
||
color: #fdf8ef;
|
||
font-family: var(--yc-display);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 2px dashed var(--yc-line);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--yc-font);
|
||
font-weight: 700;
|
||
background: #efe6d5;
|
||
color: #8f8275;
|
||
border-radius: 999px;
|
||
padding: 4px 16px;
|
||
|
||
&.active {
|
||
background: var(--yc-forest);
|
||
color: #fff;
|
||
}
|
||
|
||
&.done {
|
||
background: var(--yc-kraft);
|
||
color: #5a3a24;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--yc-font);
|
||
font-weight: 700;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(180deg, var(--yc-ember-bright), var(--yc-ember));
|
||
border: none;
|
||
color: #fff;
|
||
box-shadow: 0 3px 0 #7a3518;
|
||
|
||
&:hover:not(:disabled) {
|
||
background: linear-gradient(180deg, #f39a4f, #c45f2e);
|
||
color: #fff;
|
||
box-shadow: 0 3px 0 #7a3518, 0 0 14px rgb(232 131 58 / 0.55);
|
||
}
|
||
|
||
&:disabled {
|
||
background: #d9cfc2;
|
||
color: #8f8275;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
// Tlačítko roztočení — rozhořívající se táborák
|
||
.spin-button {
|
||
font-family: var(--yc-display);
|
||
font-weight: 500;
|
||
font-size: 1.2rem;
|
||
padding: 12px 38px;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
background: var(--yc-panel);
|
||
border: 2px solid var(--yc-ember-bright);
|
||
color: var(--yc-ember);
|
||
|
||
&:hover {
|
||
background: #fbe7d6;
|
||
color: var(--yc-ember);
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--yc-forest);
|
||
border: none;
|
||
color: #fff;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #efe6d5;
|
||
|
||
> .btn-primary {
|
||
background: var(--yc-forest);
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--yc-text);
|
||
|
||
&:hover {
|
||
background: var(--yc-panel);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 700;
|
||
|
||
strong {
|
||
color: var(--yc-ember);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--yc-panel);
|
||
border: 1px solid var(--yc-line);
|
||
border-radius: 16px;
|
||
|
||
li:hover {
|
||
background: #f8efe0;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 2px dashed var(--yc-line);
|
||
color: var(--yc-forest);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--yc-line);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--yc-ember);
|
||
filter: drop-shadow(0 2px 1px rgb(90 58 36 / 0.4));
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #fffdf8;
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--yc-font);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — noc u táboráku
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-yurucamp {
|
||
--yc-ember: #ff9a52;
|
||
--yc-ember-bright: #ffb36b;
|
||
--yc-forest: #2f5a3c;
|
||
--yc-line: #2f3a4f;
|
||
--yc-panel: #19223a;
|
||
--yc-text: #f3ece0;
|
||
--yc-kraft: #2e2519;
|
||
--wheel-c0: #2f5a3c;
|
||
--wheel-rim: #3a2618;
|
||
|
||
.modal-content {
|
||
background:
|
||
radial-gradient(1.2px 1.2px at 24px 38px, rgb(255 255 255 / 0.85), transparent) 0 0 / 180px 180px,
|
||
radial-gradient(1px 1px at 120px 100px, rgb(255 255 255 / 0.6), transparent) 0 0 / 180px 180px,
|
||
radial-gradient(ellipse 70% 45% at 50% 115%, rgb(255 140 60 / 0.25), transparent 70%),
|
||
#10172a;
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 60L88 13Q96 8 104 9H136Q144 8 152 13L240 60Z' fill='%23172038'/%3E%3Cpath d='M88 13Q96 8 104 9H136Q144 8 152 13L141 21L132 16L124 23L114 16L106 22L97 18Z' fill='%23aebbd0'/%3E%3C/svg%3E") right 60px bottom / auto 70% no-repeat,
|
||
#0b1120;
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #222d48;
|
||
color: #9189a0;
|
||
}
|
||
|
||
.spin-steps span.done {
|
||
color: #ffb36b;
|
||
}
|
||
|
||
.btn-primary {
|
||
color: #2a1608;
|
||
|
||
&:hover:not(:disabled) {
|
||
color: #2a1608;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #2f3a4f;
|
||
color: #9189a0;
|
||
}
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
background: #3a2618;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #222d48;
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #222d48;
|
||
}
|
||
|
||
.spin-options-header {
|
||
color: #7fc28c;
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #10172a;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL APOTHECARY DIARIES kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Výseče v barvách vnitřního paláce (rumělka, nefrit, zlato, inkoust,
|
||
// fialová Jinshiho, švestkový květ), zlaté linky a střed jako zlatá pečeť.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-apothecary {
|
||
--apo-font: 'Nunito', sans-serif;
|
||
--apo-display: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||
--apo-vermilion: #a8322a;
|
||
--apo-vermilion-deep: #84241d;
|
||
--apo-jade: #2f7d62;
|
||
--apo-gold: #c9a24a;
|
||
--apo-line: #e0d4bb;
|
||
--apo-panel: #fffcf4;
|
||
--apo-text: #24201c;
|
||
--wheel-c0: #a8322a;
|
||
--wheel-c1: #2f7d62;
|
||
--wheel-c2: #c9a24a;
|
||
--wheel-c3: #24201c;
|
||
--wheel-c4: #6b5aa6;
|
||
--wheel-c5: #c76a86;
|
||
--wheel-rim: #3a1f14;
|
||
--wheel-hub: #d9b65e;
|
||
|
||
font-family: var(--apo-font);
|
||
|
||
.modal-content {
|
||
border: 1px solid var(--apo-gold);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
background: #f5efe1;
|
||
color: var(--apo-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
linear-gradient(var(--apo-gold), var(--apo-gold)) left bottom / 100% 2px no-repeat,
|
||
linear-gradient(var(--apo-gold), var(--apo-gold)) left bottom 4px / 100% 1px no-repeat,
|
||
#24201c;
|
||
border-bottom: none;
|
||
|
||
h2 {
|
||
color: #fdf6e6;
|
||
font-family: var(--apo-display);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 3px double var(--apo-gold);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--apo-display);
|
||
font-weight: 800;
|
||
background: #ece3d0;
|
||
color: #8b7f70;
|
||
border-radius: 3px;
|
||
padding: 4px 16px;
|
||
|
||
&.active {
|
||
background: var(--apo-vermilion);
|
||
color: #fdf6e6;
|
||
box-shadow: inset 0 0 0 2px rgb(201 162 74 / 0.6);
|
||
}
|
||
|
||
&.done {
|
||
background: var(--apo-jade);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--apo-font);
|
||
font-weight: 800;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--apo-vermilion);
|
||
border: 1px solid var(--apo-vermilion-deep);
|
||
color: #fdf6e6;
|
||
box-shadow: inset 0 0 0 2px rgb(201 162 74 / 0.55);
|
||
|
||
&:hover:not(:disabled) {
|
||
background: var(--apo-vermilion-deep);
|
||
color: #fdf6e6;
|
||
box-shadow: inset 0 0 0 2px var(--apo-gold), 0 0 12px rgb(201 162 74 / 0.45);
|
||
}
|
||
|
||
&:disabled {
|
||
background: #d8cfbf;
|
||
border-color: #d8cfbf;
|
||
color: #8b7f70;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
// Tlačítko roztočení — zlatá pečeť
|
||
.spin-button {
|
||
font-family: var(--apo-display);
|
||
font-size: 1.2rem;
|
||
padding: 10px 38px;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
background: var(--apo-panel);
|
||
border: 1px solid var(--apo-gold);
|
||
color: var(--apo-vermilion);
|
||
|
||
&:hover {
|
||
background: #f6e2dc;
|
||
color: var(--apo-vermilion);
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--apo-jade);
|
||
border: 1px solid #22604a;
|
||
color: #fff;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #ece3d0;
|
||
border-radius: 4px;
|
||
|
||
> .btn {
|
||
border-radius: 3px !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--apo-text);
|
||
|
||
&:hover {
|
||
background: var(--apo-panel);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 800;
|
||
|
||
strong {
|
||
color: var(--apo-vermilion);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--apo-panel);
|
||
border: 1px solid var(--apo-line);
|
||
border-radius: 8px;
|
||
|
||
li:hover {
|
||
background: #f4ead6;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 3px double var(--apo-gold);
|
||
color: var(--apo-vermilion);
|
||
font-family: var(--apo-display);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--apo-line);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--apo-vermilion);
|
||
filter: drop-shadow(0 2px 1px rgb(58 31 20 / 0.4));
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #d9b65e;
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--apo-display);
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — noc v paláci pod lampiony
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-apothecary {
|
||
--apo-vermilion: #d6503f;
|
||
--apo-vermilion-deep: #b53b2d;
|
||
--apo-jade: #3f9474;
|
||
--apo-gold: #d9b65e;
|
||
--apo-line: #3a2e2a;
|
||
--apo-panel: #1e1a22;
|
||
--apo-text: #f2eadb;
|
||
--wheel-c0: #b53b2d;
|
||
--wheel-c3: #3a3036;
|
||
--wheel-rim: #0e0c10;
|
||
|
||
.modal-content {
|
||
background:
|
||
radial-gradient(circle at 8% 0%, rgb(214 80 63 / 0.22), transparent 35%),
|
||
radial-gradient(circle at 92% 0%, rgb(232 165 74 / 0.16), transparent 32%),
|
||
#14121a;
|
||
}
|
||
|
||
.modal-header {
|
||
background-color: #0e0c10;
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #29232d;
|
||
color: #948a80;
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background: #3a3036;
|
||
border-color: #3a3036;
|
||
color: #948a80;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
color: #e8a54a;
|
||
|
||
&:hover {
|
||
background: #3a2618;
|
||
color: #f2bd6a;
|
||
}
|
||
}
|
||
|
||
.spin-source {
|
||
background: #29232d;
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #29232d;
|
||
}
|
||
|
||
.spin-options-header {
|
||
color: #d9b65e;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL FRIEREN kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Výseče v barvách družiny a krajiny (fialová Fern, levandule, Himmelova
|
||
// modř, zlato, louka, růžová), zlaté linky a střed jako magický kruh.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-frieren {
|
||
--fr-font: 'Nunito', sans-serif;
|
||
--fr-display: 'Cormorant Garamond', Georgia, serif;
|
||
--fr-violet: #5b4a9e;
|
||
--fr-violet-deep: #463882;
|
||
--fr-lavender: #8e7cc3;
|
||
--fr-gold: #bf9b4a;
|
||
--fr-line: #dcd8ea;
|
||
--fr-panel: #ffffff;
|
||
--fr-text: #2e2a3d;
|
||
--wheel-c0: #5b4a9e;
|
||
--wheel-c1: #8e7cc3;
|
||
--wheel-c2: #5b8fc7;
|
||
--wheel-c3: #bf9b4a;
|
||
--wheel-c4: #6f9f6a;
|
||
--wheel-c5: #c76a96;
|
||
--wheel-rim: #3d3466;
|
||
--wheel-hub: #e9c86a;
|
||
|
||
font-family: var(--fr-font);
|
||
|
||
.modal-content {
|
||
border: 1px solid var(--fr-line);
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
background: linear-gradient(180deg, #e6ecf7 0, #f6f5fb 180px);
|
||
color: var(--fr-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
|
||
linear-gradient(90deg, #3d3466, #4b4380);
|
||
border-bottom: none;
|
||
|
||
h2 {
|
||
color: #f6f3ff;
|
||
font-family: var(--fr-display);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 1px solid var(--fr-line);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--fr-display);
|
||
font-weight: 700;
|
||
font-size: 1.05rem;
|
||
background: #ebe8f3;
|
||
color: #8a869b;
|
||
border-radius: 999px;
|
||
padding: 2px 16px;
|
||
|
||
&.active {
|
||
background: var(--fr-violet);
|
||
color: #fff;
|
||
box-shadow: 0 0 10px rgb(142 124 195 / 0.5);
|
||
}
|
||
|
||
&.done {
|
||
background: #e4def6;
|
||
color: var(--fr-violet-deep);
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--fr-font);
|
||
font-weight: 800;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--fr-violet), var(--fr-lavender));
|
||
border: none;
|
||
color: #fff;
|
||
box-shadow: 0 3px 10px rgb(91 74 158 / 0.25);
|
||
|
||
&:hover:not(:disabled) {
|
||
background: linear-gradient(135deg, var(--fr-violet-deep), var(--fr-violet));
|
||
color: #fff;
|
||
box-shadow: 0 0 0 3px rgb(191 155 74 / 0.35), 0 0 18px rgb(142 124 195 / 0.55);
|
||
}
|
||
|
||
&:disabled {
|
||
background: #d9d6e4;
|
||
color: #8a869b;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
// Tlačítko roztočení — seslání kouzla
|
||
.spin-button {
|
||
font-family: var(--fr-display);
|
||
font-weight: 700;
|
||
font-size: 1.35rem;
|
||
padding: 8px 40px;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
background: var(--fr-panel);
|
||
border: 1px solid var(--fr-lavender);
|
||
color: var(--fr-violet);
|
||
|
||
&:hover {
|
||
background: #ebe6f7;
|
||
color: var(--fr-violet);
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6f7a92;
|
||
border: none;
|
||
color: #fff;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #ebe8f3;
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--fr-text);
|
||
|
||
&:hover {
|
||
background: var(--fr-panel);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 800;
|
||
|
||
strong {
|
||
color: var(--fr-violet);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--fr-panel);
|
||
border: 1px solid var(--fr-line);
|
||
border-radius: 14px;
|
||
|
||
li:hover {
|
||
background: #f1eef9;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 1px solid var(--fr-gold);
|
||
color: var(--fr-violet);
|
||
font-family: var(--fr-display);
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--fr-line);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--fr-gold);
|
||
filter: drop-shadow(0 0 4px rgb(233 200 106 / 0.7));
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #e9c86a;
|
||
stroke-width: 1.5;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--fr-font);
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — noc pod hvězdami
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-frieren {
|
||
--fr-violet: #b3a3ea;
|
||
--fr-violet-deep: #9a88dc;
|
||
--fr-gold: #dcc07a;
|
||
--fr-line: #2e2b45;
|
||
--fr-panel: #1b1a2b;
|
||
--fr-text: #eeebf7;
|
||
--wheel-c0: #45397a;
|
||
--wheel-rim: #0c0b16;
|
||
|
||
.modal-content {
|
||
background:
|
||
radial-gradient(1.2px 1.2px at 30px 40px, rgb(255 255 255 / 0.85), transparent) 0 0 / 200px 200px,
|
||
radial-gradient(1px 1px at 140px 110px, rgb(220 210 255 / 0.7), transparent) 0 0 / 200px 200px,
|
||
radial-gradient(circle at 88% 8%, rgb(255 244 210 / 0.16) 0 24px, transparent 90px),
|
||
#11101d;
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
|
||
#0c0b16;
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #242238;
|
||
color: #8f8ba5;
|
||
}
|
||
|
||
.spin-steps span.active {
|
||
color: #17142a;
|
||
}
|
||
|
||
.spin-steps span.done {
|
||
background: #2b2646;
|
||
color: #c8bbf2;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #8e7cc3, #b3a3ea);
|
||
color: #17142a;
|
||
|
||
&:hover:not(:disabled) {
|
||
background: linear-gradient(135deg, #a593dc, #c8bbf2);
|
||
color: #17142a;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #2e2b45;
|
||
color: #8f8ba5;
|
||
}
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
background: #2b2646;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #2e2b45;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #242238;
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #242238;
|
||
}
|
||
|
||
.spin-options-header {
|
||
color: #dcc07a;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL MY LITTLE PONY (G5) kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Výseče v barvách Mane 5 a Misty, bílé linky a střed jako sluníčko Sunny.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-mlpg5 {
|
||
--g5-font: 'Nunito', sans-serif;
|
||
--g5-display: 'Baloo 2', 'Nunito', sans-serif;
|
||
--g5-sunny: #f08a3c;
|
||
--g5-sunny-deep: #c85a14;
|
||
--g5-pipp: #ee5fa8;
|
||
--g5-hitch: #2fa89c;
|
||
--g5-line: #f3dccb;
|
||
--g5-panel: #ffffff;
|
||
--g5-text: #2b2440;
|
||
--wheel-c0: #f08a3c;
|
||
--wheel-c1: #ee5fa8;
|
||
--wheel-c2: #9b6fe0;
|
||
--wheel-c3: #5a7bd8;
|
||
--wheel-c4: #2fa89c;
|
||
--wheel-c5: #6fb1d6;
|
||
--wheel-rim: #1f8f9a;
|
||
--wheel-hub: #ffd23f;
|
||
|
||
font-family: var(--g5-font);
|
||
|
||
.modal-content {
|
||
border: none;
|
||
border-radius: 26px;
|
||
overflow: hidden;
|
||
background: linear-gradient(180deg, #e2f6f6 0, #fff8f1 200px);
|
||
color: var(--g5-text);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 12V6Q20 0 40 6T80 6V12Z' fill='%23e2f6f6'/%3E%3C/svg%3E") left bottom / 80px 12px repeat-x,
|
||
linear-gradient(120deg, #1f8f9a, #2fa89c);
|
||
border-bottom: none;
|
||
padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 10px);
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-family: var(--g5-display);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 2px solid var(--g5-line);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--g5-display);
|
||
font-weight: 800;
|
||
background: #f3ece6;
|
||
color: #908aa3;
|
||
border-radius: 999px;
|
||
padding: 2px 16px;
|
||
|
||
&.active {
|
||
background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
|
||
color: #fff;
|
||
}
|
||
|
||
&.done {
|
||
background: var(--g5-hitch);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--g5-font);
|
||
font-weight: 800;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
|
||
border: none;
|
||
color: #fff;
|
||
text-shadow: 0 1px 0 rgb(0 0 0 / 0.15);
|
||
box-shadow: 0 4px 0 #c43d82;
|
||
|
||
&:hover:not(:disabled) {
|
||
background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
|
||
color: #fff;
|
||
filter: brightness(1.07) saturate(1.1);
|
||
}
|
||
|
||
&:active:not(:disabled) {
|
||
transform: translateY(3px);
|
||
box-shadow: 0 1px 0 #c43d82;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #e3dde9;
|
||
color: #908aa3;
|
||
text-shadow: none;
|
||
box-shadow: 0 4px 0 #cbc4d6;
|
||
}
|
||
}
|
||
|
||
// Tlačítko roztočení — velká buclatá pilulka
|
||
.spin-button {
|
||
font-family: var(--g5-display);
|
||
font-size: 1.35rem;
|
||
padding: 8px 40px 4px;
|
||
box-shadow: 0 5px 0 #c43d82, 0 10px 20px -6px rgb(238 95 168 / 0.6);
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
background: var(--g5-panel);
|
||
border: 2px solid var(--g5-pipp);
|
||
color: var(--g5-sunny-deep);
|
||
|
||
&:hover {
|
||
background: #ffeadb;
|
||
color: var(--g5-sunny-deep);
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--g5-hitch);
|
||
border: none;
|
||
color: #fff;
|
||
box-shadow: 0 4px 0 #1e7a70;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #f3ece6;
|
||
|
||
> .btn-primary {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--g5-text);
|
||
|
||
&:hover {
|
||
background: var(--g5-panel);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 800;
|
||
|
||
strong {
|
||
color: var(--g5-sunny-deep);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--g5-panel);
|
||
border: 1px solid var(--g5-line);
|
||
border-radius: 20px;
|
||
|
||
li:hover {
|
||
background: #fff1e5;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 2px solid var(--g5-line);
|
||
color: var(--g5-pipp);
|
||
font-family: var(--g5-display);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--g5-line);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--g5-pipp);
|
||
filter: drop-shadow(0 3px 2px rgb(196 61 130 / 0.45));
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #fff;
|
||
stroke-width: 3;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--g5-display);
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — noční Bridlewood
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-mlpg5 {
|
||
--g5-sunny: #ffa560;
|
||
--g5-sunny-deep: #ff9a4d;
|
||
--g5-pipp: #ff7cbb;
|
||
--g5-hitch: #1f8f86;
|
||
--g5-line: #2c3650;
|
||
--g5-panel: #1a2233;
|
||
--g5-text: #f1eefa;
|
||
--wheel-rim: #0c3a42;
|
||
|
||
.modal-content {
|
||
background:
|
||
radial-gradient(circle at 12% 20%, rgb(79 209 194 / 0.14) 0 40px, transparent 110px),
|
||
radial-gradient(circle at 88% 70%, rgb(184 148 242 / 0.16) 0 50px, transparent 130px),
|
||
#0f1724;
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 12V6Q20 0 40 6T80 6V12Z' fill='%230f1724'/%3E%3C/svg%3E") left bottom / 80px 12px repeat-x,
|
||
linear-gradient(120deg, #0c3a42, #12505a);
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #222c40;
|
||
color: #8e89a6;
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background: #2c3650;
|
||
color: #8e89a6;
|
||
box-shadow: 0 4px 0 #1f273a;
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
background: #3a2a26;
|
||
}
|
||
|
||
.btn-secondary {
|
||
box-shadow: 0 4px 0 #125a54;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #222c40;
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #222c40;
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #0f1724;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL SUMIKKO GURASHI kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Pastelové výseče v barvách postaviček s hnědými popisky a linkami,
|
||
// střed jako tapioková perlička.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-sumikko {
|
||
--sk-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
||
--sk-display: 'Klee One', 'Zen Maru Gothic', sans-serif;
|
||
--sk-brown: #8b5e3c;
|
||
--sk-brown-deep: #6b4428;
|
||
--sk-ink: #5a4636;
|
||
--sk-line: #e8dcc8;
|
||
--sk-panel: #fffdf8;
|
||
--wheel-c0: #b9dba3;
|
||
--wheel-c1: #ecd5b8;
|
||
--wheel-c2: #b6d9ea;
|
||
--wheel-c3: #f6c6d2;
|
||
--wheel-c4: #f2dc8f;
|
||
--wheel-c5: #d4c6e8;
|
||
--wheel-label: #5a4636;
|
||
--wheel-rim: #8b5e3c;
|
||
--wheel-hub: #5a4636;
|
||
|
||
font-family: var(--sk-font);
|
||
|
||
.modal-content {
|
||
border: 2px solid var(--sk-line);
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
background: #f8f3e8;
|
||
color: var(--sk-ink);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
repeating-linear-gradient(90deg, rgb(139 94 60 / 0.4) 0 8px, transparent 8px 14px) left bottom / 100% 2px no-repeat,
|
||
#f3e6cf;
|
||
border-bottom: none;
|
||
|
||
h2 {
|
||
color: var(--sk-ink);
|
||
font-family: var(--sk-display);
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 2px dashed var(--sk-line);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--sk-display);
|
||
font-weight: 600;
|
||
background: #efe6d8;
|
||
color: #a8988a;
|
||
border-radius: 12px;
|
||
padding: 2px 16px;
|
||
|
||
&.active {
|
||
background: var(--sk-brown);
|
||
color: #fffaf0;
|
||
}
|
||
|
||
&.done {
|
||
background: #b9dba3;
|
||
color: #2f3a2a;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--sk-font);
|
||
font-weight: 700;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--sk-brown);
|
||
border: none;
|
||
color: #fffaf0;
|
||
box-shadow: 0 3px 0 var(--sk-brown-deep);
|
||
|
||
&:hover:not(:disabled) {
|
||
background: #9c6c48;
|
||
color: #fffaf0;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #e4dbcf;
|
||
color: #a8988a;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
.spin-button {
|
||
font-family: var(--sk-display);
|
||
font-weight: 600;
|
||
font-size: 1.25rem;
|
||
padding: 8px 38px;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
background: var(--sk-panel);
|
||
border: 2px solid #c9a07a;
|
||
color: var(--sk-brown);
|
||
|
||
&:hover {
|
||
background: #f5e9d8;
|
||
color: var(--sk-brown);
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #a8cf8e;
|
||
border: none;
|
||
color: #2f3a2a;
|
||
box-shadow: 0 3px 0 #86ad6c;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #efe6d8;
|
||
|
||
> .btn-primary {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--sk-ink);
|
||
|
||
&:hover {
|
||
background: var(--sk-panel);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 700;
|
||
|
||
strong {
|
||
color: var(--sk-brown);
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--sk-panel);
|
||
border: 2px solid var(--sk-line);
|
||
border-radius: 16px;
|
||
|
||
li:hover {
|
||
background: #f7efe2;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 2px dashed var(--sk-line);
|
||
color: var(--sk-brown);
|
||
font-family: var(--sk-display);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--sk-line);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: var(--sk-brown);
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: var(--sk-brown);
|
||
stroke-width: 1.5;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--sk-display);
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — večer v koutku pod dekou
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-sumikko {
|
||
--sk-brown: #e0b48a;
|
||
--sk-brown-deep: #a87a50;
|
||
--sk-ink: #f3e8d8;
|
||
--sk-line: #3a302a;
|
||
--sk-panel: #26201d;
|
||
--wheel-rim: #e0b48a;
|
||
--wheel-hub: #e0b48a;
|
||
|
||
.modal-content {
|
||
background:
|
||
radial-gradient(circle at 0% 0%, rgb(255 210 150 / 0.14), transparent 45%),
|
||
#1d1816;
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
repeating-linear-gradient(90deg, rgb(224 180 138 / 0.4) 0 8px, transparent 8px 14px) left bottom / 100% 2px no-repeat,
|
||
#2f2620;
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
}
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #2f2824;
|
||
color: #93877a;
|
||
}
|
||
|
||
.spin-steps span.active {
|
||
color: #2a1f18;
|
||
}
|
||
|
||
.btn-primary {
|
||
color: #2a1f18;
|
||
|
||
&:hover:not(:disabled) {
|
||
background: #ecc8a4;
|
||
color: #2a1f18;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #3a302a;
|
||
color: #93877a;
|
||
}
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
background: #3a2e26;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #2f2824;
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #2f2824;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// STYL GUDETAMA kola štěstí (dle stylu zvoleného v nastavení).
|
||
// Kolo leží na litinové pánvi: výseče v barvách snídaně (žloutek, bílek,
|
||
// slanina, toust, sójová omáčka, nori), střed jako žloutek.
|
||
// ============================================
|
||
.spin-wheel-modal.spin-theme-gudetama {
|
||
--gt-font: 'Nunito', sans-serif;
|
||
--gt-display: 'Fredoka', 'Nunito', sans-serif;
|
||
--gt-yolk: #ffd23f;
|
||
--gt-yolk-shadow: #d99a00;
|
||
--gt-ink: #4a3520;
|
||
--gt-line: #efe3c4;
|
||
--gt-panel: #ffffff;
|
||
--wheel-c0: #ffd23f;
|
||
--wheel-c1: #f5e6b8;
|
||
--wheel-c2: #f2a7a0;
|
||
--wheel-c3: #e8c08a;
|
||
--wheel-c4: #c9a07a;
|
||
--wheel-c5: #b8d48f;
|
||
--wheel-label: #4a3520;
|
||
--wheel-rim: #2b2725;
|
||
--wheel-hub: #ffd23f;
|
||
|
||
font-family: var(--gt-font);
|
||
|
||
.modal-content {
|
||
border: 2px solid var(--gt-line);
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
background:
|
||
linear-gradient(rgb(74 53 32 / 0.05) 1.5px, transparent 1.5px) 0 0 / 46px 46px,
|
||
linear-gradient(90deg, rgb(74 53 32 / 0.05) 1.5px, transparent 1.5px) 0 0 / 46px 46px,
|
||
#fbf8f1;
|
||
color: var(--gt-ink);
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 3Q12 0 24 3T48 3V7Q36 10 24 7T0 7Z' fill='%23f2a7a0'/%3E%3Cpath d='M0 5Q12 2 24 5T48 5' stroke='%23c8553d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") left bottom / 48px 10px repeat-x,
|
||
linear-gradient(180deg, #ffdc5c, var(--gt-yolk));
|
||
border-bottom: none;
|
||
padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 8px);
|
||
|
||
h2 {
|
||
color: var(--gt-ink);
|
||
font-family: var(--gt-display);
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 2px solid var(--gt-line);
|
||
}
|
||
|
||
.spin-steps span {
|
||
font-family: var(--gt-display);
|
||
font-weight: 600;
|
||
background: #f5ecd6;
|
||
color: #a3927c;
|
||
border-radius: 999px;
|
||
padding: 2px 16px;
|
||
|
||
// Text na žloutku je vždy tmavý (i v tmavém režimu)
|
||
&.active {
|
||
background: var(--gt-yolk);
|
||
color: #4a3520;
|
||
box-shadow: 0 3px 0 var(--gt-yolk-shadow);
|
||
}
|
||
|
||
&.done {
|
||
background: #fffdf5;
|
||
color: #a8650a;
|
||
box-shadow: inset 0 0 0 2px var(--gt-yolk);
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--gt-font);
|
||
font-weight: 800;
|
||
border-radius: 999px;
|
||
transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--gt-yolk);
|
||
border: none;
|
||
color: #4a3520;
|
||
box-shadow: 0 4px 0 var(--gt-yolk-shadow);
|
||
|
||
&:hover:not(:disabled) {
|
||
background: #ffdc5c;
|
||
color: #4a3520;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #efe6cf;
|
||
color: #a3927c;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
// Tlačítko roztočení — „…tak jo, no"
|
||
.spin-button {
|
||
font-family: var(--gt-display);
|
||
font-weight: 600;
|
||
font-size: 1.3rem;
|
||
padding: 8px 40px;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
background: var(--gt-panel);
|
||
border: 2px solid #f5b301;
|
||
color: #a8650a;
|
||
|
||
&:hover {
|
||
background: #fff3c4;
|
||
color: #a8650a;
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6b4a2e;
|
||
border: none;
|
||
color: #fffdf5;
|
||
box-shadow: 0 4px 0 #4a3220;
|
||
}
|
||
|
||
.spin-source {
|
||
background: #f5ecd6;
|
||
|
||
> .btn-primary {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
> .btn-outline-primary {
|
||
background: transparent;
|
||
color: var(--gt-ink);
|
||
|
||
&:hover {
|
||
background: var(--gt-panel);
|
||
}
|
||
}
|
||
}
|
||
|
||
.spin-result {
|
||
font-weight: 800;
|
||
|
||
strong {
|
||
color: #a8650a;
|
||
}
|
||
}
|
||
|
||
.spin-options {
|
||
background: var(--gt-panel);
|
||
border: 2px solid var(--gt-line);
|
||
border-radius: 18px;
|
||
|
||
li:hover {
|
||
background: #fff8dc;
|
||
}
|
||
}
|
||
|
||
.spin-options-header {
|
||
border-bottom: 2px solid #f5dc8a;
|
||
color: #a8650a;
|
||
font-family: var(--gt-display);
|
||
}
|
||
|
||
.spin-empty {
|
||
border-color: var(--gt-line);
|
||
}
|
||
|
||
.spin-wheel-pointer {
|
||
border-top-color: #c8553d;
|
||
}
|
||
|
||
.spin-wheel-hub {
|
||
stroke: #fffdf5;
|
||
}
|
||
|
||
.spin-seg {
|
||
stroke: #2b2725;
|
||
stroke-width: 1.5;
|
||
}
|
||
|
||
.spin-seg-label {
|
||
font-family: var(--gt-display);
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
// Tmavý režim — litinová pánev
|
||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-gudetama {
|
||
--gt-ink: #f5ead2;
|
||
--gt-line: #3a332e;
|
||
--gt-panel: #211d1a;
|
||
--wheel-rim: #3a3430;
|
||
|
||
.modal-content {
|
||
background:
|
||
radial-gradient(circle at 50% 50%, rgb(255 210 63 / 0.08) 0 120px, transparent 300px),
|
||
#141210;
|
||
}
|
||
|
||
.modal-header {
|
||
background:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 3Q12 0 24 3T48 3V7Q36 10 24 7T0 7Z' fill='%23f2a7a0'/%3E%3Cpath d='M0 5Q12 2 24 5T48 5' stroke='%23c8553d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") left bottom / 48px 10px repeat-x,
|
||
#0e0d0c;
|
||
|
||
h2 {
|
||
color: #ffd23f;
|
||
}
|
||
|
||
.btn-close {
|
||
filter: invert(1) grayscale(1) brightness(2);
|
||
}
|
||
}
|
||
|
||
.spin-steps span:not(.active):not(.done) {
|
||
background: #2b2622;
|
||
color: #968a7a;
|
||
}
|
||
|
||
.spin-steps span.done {
|
||
background: #2b2622;
|
||
color: #ffd23f;
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background: #3a332e;
|
||
color: #968a7a;
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
color: #ffd23f;
|
||
|
||
&:hover {
|
||
background: #3a3018;
|
||
color: #ffe17a;
|
||
}
|
||
}
|
||
|
||
.spin-source {
|
||
background: #2b2622;
|
||
}
|
||
|
||
.spin-options li:hover {
|
||
background: #2b2622;
|
||
}
|
||
|
||
.spin-options-header {
|
||
color: #ffd23f;
|
||
border-bottom-color: #4a3d1c;
|
||
}
|
||
|
||
.spin-result strong {
|
||
color: #ffd23f;
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// 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;
|
||
|
||
&:hover {
|
||
transform: rotate(180deg) scale(1.15) !important;
|
||
}
|
||
}
|