mates
dc17fa0f0f
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 44s
CI / Playwright E2E tests (push) Successful in 2m4s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
1547 lines
33 KiB
SCSS
1547 lines
33 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;
|
|
}
|
|
}
|
|
|
|
// Ikona kola se při najetí pootočí
|
|
.spin-wheel-icon {
|
|
transition: transform 0.4s ease !important;
|
|
|
|
&:hover {
|
|
transform: rotate(180deg) scale(1.15) !important;
|
|
}
|
|
}
|