feat: nový vzhled Frieren
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 28s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 1m55s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 28s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 1m55s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
This commit is contained in:
10 files changed
+949
-6
No files matched your search
+2
-2
@@ -11,7 +11,7 @@
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Nunito:wght@600;800;900&family=Fredoka:wght@500;600;700&family=Shippori+Mincho:wght@600;700;800&family=Zen+Maru+Gothic:wght@500;700;900&family=Yusei+Magic&family=Dela+Gothic+One&family=Barlow+Condensed:wght@500;600;700&family=Kiwi+Maru:wght@400;500&family=Playfair+Display:ital,wght@0,800;1,800&family=Courier+Prime:wght@700&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Nunito:wght@600;800;900&family=Fredoka:wght@500;600;700&family=Shippori+Mincho:wght@600;700;800&family=Zen+Maru+Gothic:wght@500;700;900&family=Yusei+Magic&family=Dela+Gothic+One&family=Barlow+Condensed:wght@500;600;700&family=Kiwi+Maru:wght@400;500&family=Playfair+Display:ital,wght@0,800;1,800&family=Courier+Prime:wght@700&family=Cormorant+Garamond:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<title>Luncher</title>
|
||||
<script>
|
||||
(function() {
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
var style = localStorage.getItem('style_theme');
|
||||
var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi', 'evangelion', 'yurucamp', 'spyfamily', 'apothecary'];
|
||||
var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi', 'evangelion', 'yurucamp', 'spyfamily', 'apothecary', 'frieren'];
|
||||
document.documentElement.setAttribute('data-luncher-theme', styles.indexOf(style) >= 0 ? style : 'simple');
|
||||
} catch (e) {
|
||||
// Fallback pokud localStorage není dostupný
|
||||
|
||||
@@ -19,6 +19,7 @@ import './themes/evangelion.scss';
|
||||
import './themes/yurucamp.scss';
|
||||
import './themes/spyfamily.scss';
|
||||
import './themes/apothecary.scss';
|
||||
import './themes/frieren.scss';
|
||||
import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
|
||||
import { useSettings } from './context/settings';
|
||||
import Footer from './components/Footer';
|
||||
|
||||
@@ -116,6 +116,17 @@
|
||||
box-shadow: 0 0 0 2px #a8322a;
|
||||
}
|
||||
|
||||
// Styl Frieren: emoji ve stříbrném kruhu se zlatým lemem a levandulovou září
|
||||
.eater-badge-frieren {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
border-color: #e9c86a;
|
||||
background: radial-gradient(circle at 40% 35%, #ffffff, #e4def6);
|
||||
box-shadow: 0 0 0 2px #8e7cc3, 0 0 8px rgb(179 163 234 / 0.7);
|
||||
}
|
||||
|
||||
// Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
|
||||
.user-info:has(.eater-badge) {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -61,6 +61,12 @@ const APO_LEVELS = [
|
||||
{ minItems: 2, emoji: '🍡', title: 'Úroveň Xiaolan — k obědu ještě sladkosti a klepy z paláce' },
|
||||
];
|
||||
|
||||
/** Úrovně ve stylu Frieren — emoji ve stříbrném kruhu s levandulovou září. Seřazeno od nejvyšší úrovně. */
|
||||
const FR_LEVELS = [
|
||||
{ minItems: 3, emoji: '📦', title: 'Úroveň mimik — spolkne cokoli, klidně i Frieren' },
|
||||
{ minItems: 2, emoji: '🍖', title: 'Úroveň Stark — obří hamburger steak, který mu k narozeninám udělala Fern' },
|
||||
];
|
||||
|
||||
/** Úrovně podle stylu pro odznaky s emoji. */
|
||||
const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
|
||||
mlp: MLP_LEVELS,
|
||||
@@ -71,6 +77,7 @@ const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
|
||||
yurucamp: YC_LEVELS,
|
||||
spyfamily: SXF_LEVELS,
|
||||
apothecary: APO_LEVELS,
|
||||
frieren: FR_LEVELS,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
@@ -78,7 +85,7 @@ type Props = {
|
||||
items: number,
|
||||
};
|
||||
|
||||
/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony, Hell Girl, K-ON!, Bocchi the Rock!, Evangelion, Yuru Camp△, Spy × Family a Apothecary Diaries. */
|
||||
/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony, Hell Girl, K-ON!, Bocchi the Rock!, Evangelion, Yuru Camp△, Spy × Family, Apothecary Diaries a Frieren. */
|
||||
export default function EaterBadge({ items }: Readonly<Props>) {
|
||||
const styleTheme = useSettings()?.styleTheme;
|
||||
const isUma = styleTheme === 'umamusume';
|
||||
|
||||
@@ -788,3 +788,98 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Konfety ve stylu Frieren
|
||||
// ============================================
|
||||
.confetti-fr {
|
||||
filter: drop-shadow(0 0 6px rgb(179 163 234 / 0.55)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
|
||||
}
|
||||
|
||||
// Štítky jako zápisky v grimoáru — oblé, se zlatým lemem
|
||||
.confetti-fr-badge {
|
||||
padding: 3px 16px 4px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #e9c86a;
|
||||
color: #fff;
|
||||
font-family: 'Cormorant Garamond', Georgia, serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Nápis „葬送のフリーレン" — vynoří se z magického kruhu, který se za ním roztáčí
|
||||
.confetti-fr-banner {
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
isolation: isolate;
|
||||
padding: 14px 44px 16px;
|
||||
font-family: 'Shippori Mincho', 'Cormorant Garamond', serif;
|
||||
font-weight: 800;
|
||||
font-size: clamp(1.8rem, 6.5vw, 3.8rem);
|
||||
letter-spacing: 0.06em;
|
||||
white-space: nowrap;
|
||||
color: #fffaf0;
|
||||
text-shadow: 0 0 16px rgb(179 163 234 / 0.95), 0 0 4px #5b4a9e;
|
||||
background: linear-gradient(90deg, transparent, rgb(61 52 102 / 0.88) 15%, rgb(61 52 102 / 0.88) 85%, transparent);
|
||||
border-top: 1px solid #e9c86a;
|
||||
border-bottom: 1px solid #e9c86a;
|
||||
animation: fr-banner 2.8s ease both;
|
||||
|
||||
// Magický kruh za nápisem
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: -150px 0 0 -150px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgb(233 200 106 / 0.8);
|
||||
outline: 2px dashed rgb(233 200 106 / 0.6);
|
||||
outline-offset: -22px;
|
||||
background:
|
||||
radial-gradient(circle, transparent 0 46%, rgb(233 200 106 / 0.55) 47% 48%, transparent 49%),
|
||||
radial-gradient(circle, rgb(179 163 234 / 0.35), transparent 70%);
|
||||
animation: fr-banner-circle 2.8s ease-out both;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fr-banner {
|
||||
0% { opacity: 0; filter: blur(8px); }
|
||||
22%, 78% { opacity: 1; filter: blur(0); }
|
||||
100% { opacity: 0; filter: blur(6px); }
|
||||
}
|
||||
|
||||
@keyframes fr-banner-circle {
|
||||
0% { transform: scale(0.2) rotate(0deg); opacity: 0; }
|
||||
25% { transform: scale(1) rotate(90deg); opacity: 1; }
|
||||
100% { transform: scale(1.15) rotate(240deg); opacity: 0.7; }
|
||||
}
|
||||
|
||||
// Postava s hláškou — stříbrný kruh s levandulovou září a bublina jako stránka grimoáru
|
||||
.confetti-frieren-voice {
|
||||
.confetti-mlp-avatar {
|
||||
border: 3px solid #e9c86a;
|
||||
background: radial-gradient(circle at 40% 35%, #ffffff, #e4def6);
|
||||
box-shadow: 0 0 0 3px var(--mlp-speaker, #5b4a9e), 0 0 18px rgb(179 163 234 / 0.7);
|
||||
}
|
||||
|
||||
.confetti-mlp-bubble {
|
||||
background: #fdfcff;
|
||||
color: #2e2a3d;
|
||||
border: 1px solid #e9c86a;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 0 3px var(--mlp-speaker, #5b4a9e), 0 6px 16px rgb(0 0 0 / 0.25);
|
||||
font-family: 'Cormorant Garamond', Georgia, serif;
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -136,6 +136,21 @@ const APO_SPEAKERS = [
|
||||
{ name: 'Lakan', emoji: '♟️', color: '#7a5c3a', quote: 'Lidi vidím jen jako figurky na desce… ale tahle figurka je k snědku.' },
|
||||
{ name: 'Konkubína Lishu', emoji: '🌸', color: '#c98fb0', quote: 'J-já si dám to samé… když to Maomao ochutnala.' },
|
||||
];
|
||||
const FR_EMOJI = ['✨', '🌸', '🌼', '💐', '📖', '🪄', '📦', '🍇', '🌙', '⭐', '💜', '🦋', '🍖', '🔮'];
|
||||
// Hlášky z Frieren (Zoltraak, mimik, kouzlo květinového pole, „Himmel by to udělal"...)
|
||||
const FR_BADGES = ['葬送のフリーレン', 'Zoltraak', 'Mimik!', 'Pole květin', 'Himmel by to udělal', 'Fern se zlobí', 'O 1000 let později', 'Grimoár ✦', 'Potlačená mana', 'Zbytečné kouzlo'];
|
||||
const FR_BADGE_COLORS = ['#5b4a9e', '#8e7cc3', '#5b8fc7', '#bf9b4a', '#6f7a92', '#c76a96'];
|
||||
/** Družina Frieren (dnešní i Himmelova) s „hláškou" po finálním výsledku. */
|
||||
const FR_SPEAKERS = [
|
||||
{ name: 'Frieren', emoji: '✨', color: '#8a9a7a', quote: 'Dobře. Ale potom mi pomůžete otevřít tu truhlu… určitě to není mimik.' },
|
||||
{ name: 'Fern', emoji: '💜', color: '#5b4a9e', quote: 'Paní Frieren, jestli zase zaspíte, sním vaši porci.' },
|
||||
{ name: 'Stark', emoji: '🪓', color: '#a5523a', quote: 'J-já se vůbec nebojím! …Jen mám trochu hlad.' },
|
||||
{ name: 'Himmel', emoji: '💐', color: '#5b8fc7', quote: 'Tohle by udělal Himmel Hrdina. Tedy… já. Pojďme!' },
|
||||
{ name: 'Heiter', emoji: '🍷', color: '#8a6d9e', quote: 'Výborně. A k obědu malou sklenku — z Boží vůle, samozřejmě.' },
|
||||
{ name: 'Eisen', emoji: '🪨', color: '#8a7a5a', quote: '…Jídlo je dobré. To stačí.' },
|
||||
{ name: 'Aura', emoji: '⚖️', color: '#c76a96', quote: 'Poklekněte před tímto obědem! Váhy rozhodly.' },
|
||||
{ name: 'Mimik', emoji: '📦', color: '#8a6a3a', quote: '(cvak!) …(spokojeně žvýká Frieren)' },
|
||||
];
|
||||
/** Styly, jejichž konfety tvoří emoji a samolepky s hláškami (a po finále promluví postava s emoji). */
|
||||
const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
|
||||
prefix: string, badges: string[], colors: string[], emoji: string[],
|
||||
@@ -150,6 +165,7 @@ const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
|
||||
yurucamp: { prefix: 'confetti-yc', badges: YC_BADGES, colors: YC_BADGE_COLORS, emoji: YC_EMOJI, speakers: YC_SPEAKERS, banner: '⛺ ゆるキャン△ 🔥' },
|
||||
spyfamily: { prefix: 'confetti-sxf', badges: SXF_BADGES, colors: SXF_BADGE_COLORS, emoji: SXF_EMOJI, speakers: SXF_SPEAKERS, banner: '🥜 わくわく! 🥜' },
|
||||
apothecary: { prefix: 'confetti-apo', badges: APO_BADGES, colors: APO_BADGE_COLORS, emoji: APO_EMOJI, speakers: APO_SPEAKERS, banner: '🏮 薬屋のひとりごと 🏮' },
|
||||
frieren: { prefix: 'confetti-fr', badges: FR_BADGES, colors: FR_BADGE_COLORS, emoji: FR_EMOJI, speakers: FR_SPEAKERS, banner: '✦ 葬送のフリーレン ✦' },
|
||||
};
|
||||
const DURATION_MS = 6400;
|
||||
|
||||
@@ -303,7 +319,7 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [burstKey]);
|
||||
|
||||
// Ostatní tematické styly: hlášku pronese náhodná postava (Mane 6, Ai Enma, Houkago Tea Time, Kessoku Band, piloti NERV, Nokuru, Forgerovi, vnitřní palác...)
|
||||
// Ostatní tematické styly: hlášku pronese náhodná postava (Mane 6, Ai Enma, Houkago Tea Time, Kessoku Band, piloti NERV, Nokuru, Forgerovi, vnitřní palác, družina Frieren...)
|
||||
const emojiConfetti = EMOJI_CONFETTI[theme];
|
||||
const emojiSpeaker = useMemo(
|
||||
() => big && emojiConfetti ? pick(emojiConfetti.speakers) : undefined,
|
||||
|
||||
@@ -2595,6 +2595,266 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// Ikona kola se při najetí pootočí
|
||||
.spin-wheel-icon {
|
||||
transition: transform 0.4s ease !important;
|
||||
|
||||
@@ -13,7 +13,7 @@ const AUTO_ORDER_CHOICE_KEY = 'auto_order_choice';
|
||||
export type ThemePreference = 'system' | 'light' | 'dark';
|
||||
|
||||
/** Vizuální styl aplikace (nezávislý na světlém/tmavém režimu). */
|
||||
export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi' | 'evangelion' | 'yurucamp' | 'spyfamily' | 'apothecary';
|
||||
export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi' | 'evangelion' | 'yurucamp' | 'spyfamily' | 'apothecary' | 'frieren';
|
||||
|
||||
export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
|
||||
{ value: 'simple', label: 'Jednoduchý' },
|
||||
@@ -26,6 +26,7 @@ export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
|
||||
{ value: 'yurucamp', label: 'Yuru Camp△' },
|
||||
{ value: 'spyfamily', label: 'Spy × Family' },
|
||||
{ value: 'apothecary', label: 'Apothecary Diaries' },
|
||||
{ value: 'frieren', label: 'Frieren' },
|
||||
];
|
||||
|
||||
export type SettingsContextProps = {
|
||||
@@ -257,7 +258,7 @@ function useProvideSettings(): SettingsContextProps {
|
||||
}, [autoOrderChoice]);
|
||||
|
||||
// Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
|
||||
// Tematické styly (Umamusume, My Little Pony, Hell Girl, K-ON!, Bocchi the Rock!, Evangelion, Yuru Camp△, Spy × Family, Apothecary Diaries) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
|
||||
// Tematické styly (Umamusume, My Little Pony, Hell Girl, K-ON!, Bocchi the Rock!, Evangelion, Yuru Camp△, Spy × Family, Apothecary Diaries, Frieren) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
|
||||
useEffect(() => {
|
||||
localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
|
||||
if (styleTheme === 'simple') {
|
||||
|
||||
@@ -23,6 +23,8 @@ const ICONS: Record<StyleTheme, Record<GameId, string>> = {
|
||||
spyfamily: { drawing: '🖍️' },
|
||||
// Lékárna Maomao: pero a tuš na recepty
|
||||
apothecary: { drawing: '🖋️' },
|
||||
// Hůl mágyně Frieren
|
||||
frieren: { drawing: '🪄' },
|
||||
};
|
||||
|
||||
/** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
|
||||
|
||||
@@ -0,0 +1,550 @@
|
||||
// ============================================
|
||||
// STYL "FRIEREN" (volitelný, výchozí je jednoduchý styl)
|
||||
// Inspirováno anime Sōsō no Frieren (葬送のフリーレン).
|
||||
// Cesta krajinou po boku elfí mágyně: světlé nebe, levandulová Fern,
|
||||
// stříbro a zlato z pláště Frieren a dole pole květin — její oblíbené
|
||||
// kouzlo, které tolik miloval Himmel. Titulek dne leží v grimoáru
|
||||
// mezi dvěma magickými kruhy, které se pomalu otáčejí.
|
||||
// Tmavý režim = noc pod hvězdami se svítícími modrými květy.
|
||||
// Aktivní, pokud má <html> atribut data-luncher-theme="frieren".
|
||||
// ============================================
|
||||
|
||||
$fr: 'html[data-luncher-theme="frieren"]';
|
||||
|
||||
// Pole květin (kouzlo květinového pole) — opakuje se vodorovně
|
||||
@function fr-flowers($a, $b, $c, $stem) {
|
||||
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='30'%3E%3Cpath d='M12 30V14M34 30V19M56 30V12M22 30Q24 24 28 22M46 30Q44 25 40 24' stroke='#{$stem}' stroke-width='1.4' fill='none'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='#{$a}'/%3E%3Ccircle cx='34' cy='17' r='3.6' fill='#{$b}'/%3E%3Ccircle cx='56' cy='10' r='4.2' fill='#{$c}'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23e9c86a'/%3E%3Ccircle cx='34' cy='17' r='1.2' fill='%23e9c86a'/%3E%3Ccircle cx='56' cy='10' r='1.4' fill='%23e9c86a'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
// Hvězdy na noční obloze
|
||||
$fr-stars:
|
||||
radial-gradient(1.2px 1.2px at 30px 40px, rgb(255 255 255 / 0.85), transparent),
|
||||
radial-gradient(1px 1px at 140px 110px, rgb(220 210 255 / 0.7), transparent),
|
||||
radial-gradient(1.5px 1.5px at 200px 30px, rgb(255 244 210 / 0.9), transparent),
|
||||
radial-gradient(1px 1px at 90px 180px, rgb(255 255 255 / 0.55), transparent);
|
||||
|
||||
// Magický kruh — vnější linka, čárkovaný vnitřní kruh, prstenec a tečka uprostřed
|
||||
@mixin fr-magic-circle($size) {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--fr-gold);
|
||||
outline: 1px dashed var(--fr-gold);
|
||||
outline-offset: -6px;
|
||||
background:
|
||||
radial-gradient(circle, var(--fr-gold) 0 1.5px, transparent 2px),
|
||||
radial-gradient(circle, transparent 0 22%, var(--fr-gold) 23% 27%, transparent 28%);
|
||||
opacity: 0.9;
|
||||
animation: fr-spin 24s linear infinite;
|
||||
}
|
||||
|
||||
#{$fr} {
|
||||
--fr-font: 'Nunito', -apple-system, sans-serif;
|
||||
--fr-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
|
||||
--fr-violet: #5b4a9e; // vlasy Fern
|
||||
--fr-violet-deep: #463882;
|
||||
--fr-lavender: #8e7cc3;
|
||||
--fr-sky: #5b8fc7; // modrá Himmela a květů blue moon weed
|
||||
--fr-gold: #bf9b4a; // zlaté lemy pláště Frieren
|
||||
--fr-silver: #c9ced8;
|
||||
--fr-meadow: #7fae7a;
|
||||
--fr-line: #dcd8ea;
|
||||
|
||||
--luncher-primary: var(--fr-violet);
|
||||
--luncher-primary-hover: var(--fr-violet-deep);
|
||||
--luncher-primary-light: #ebe6f7;
|
||||
--luncher-bg: #f6f5fb;
|
||||
--luncher-bg-card: #ffffff;
|
||||
--luncher-bg-hover: #f1eef9;
|
||||
--luncher-text: #2e2a3d;
|
||||
--luncher-text-secondary: #545069;
|
||||
--luncher-text-muted: #8a869b;
|
||||
--luncher-border: var(--fr-line);
|
||||
--luncher-border-light: #ebe8f3;
|
||||
--luncher-navbar-bg: #3d3466;
|
||||
--luncher-navbar-text: #f6f3ff;
|
||||
--luncher-action-icon: var(--fr-violet);
|
||||
--luncher-buyer-icon: var(--fr-sky);
|
||||
--luncher-success: #4f8f5a;
|
||||
--luncher-warning: #c9952e;
|
||||
--luncher-danger: #c0485a;
|
||||
--luncher-radius-sm: 8px;
|
||||
--luncher-radius: 12px;
|
||||
--luncher-radius-lg: 14px;
|
||||
--luncher-radius-xl: 18px;
|
||||
--luncher-shadow: 0 4px 16px rgb(61 52 102 / 0.08);
|
||||
--luncher-shadow-lg: 0 10px 30px rgb(91 74 158 / 0.18);
|
||||
|
||||
&[data-bs-theme="dark"] {
|
||||
// Noc pod hvězdami
|
||||
--fr-violet: #b3a3ea;
|
||||
--fr-violet-deep: #9a88dc;
|
||||
--fr-lavender: #8e7cc3;
|
||||
--fr-sky: #8fb8e6;
|
||||
--fr-gold: #dcc07a;
|
||||
--fr-line: #2e2b45;
|
||||
|
||||
--luncher-primary: #b3a3ea;
|
||||
--luncher-primary-hover: #c8bbf2;
|
||||
--luncher-primary-light: #2b2646;
|
||||
--luncher-bg: #11101d;
|
||||
--luncher-bg-card: #1b1a2b;
|
||||
--luncher-bg-hover: #242238;
|
||||
--luncher-text: #eeebf7;
|
||||
--luncher-text-secondary: #c6c2d8;
|
||||
--luncher-text-muted: #8f8ba5;
|
||||
--luncher-border: var(--fr-line);
|
||||
--luncher-border-light: #232136;
|
||||
--luncher-navbar-bg: #0c0b16;
|
||||
--luncher-action-icon: #b3a3ea;
|
||||
--luncher-buyer-icon: #8fb8e6;
|
||||
--luncher-success: #8fcf95;
|
||||
--luncher-warning: #e6c06a;
|
||||
--luncher-danger: #e47a8c;
|
||||
--luncher-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
|
||||
--luncher-shadow-lg: 0 10px 30px rgb(179 163 234 / 0.16);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--fr-font);
|
||||
background-color: var(--luncher-bg);
|
||||
// Nebe nahoře a pole květin u spodního okraje okna
|
||||
background-image:
|
||||
fr-flowers('%238fb8de', '%23ffffff', '%23b9a8e6', '%237fae7a'),
|
||||
linear-gradient(180deg, #dde6f5 0, var(--luncher-bg) 400px);
|
||||
background-size: 96px 40px, 100% 100%;
|
||||
background-position: left bottom, 0 0;
|
||||
background-repeat: repeat-x, no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] body {
|
||||
// Hvězdy, měsíc a svítící modré květy
|
||||
background-image:
|
||||
fr-flowers('%235f8fd6', '%238fb8f0', '%237f6fc9', '%232f4a3a'),
|
||||
$fr-stars,
|
||||
radial-gradient(circle at 86% 6%, rgb(255 244 210 / 0.22) 0 28px, rgb(255 244 210 / 0.06) 29px 90px, transparent 160px),
|
||||
linear-gradient(180deg, #1b1934 0, var(--luncher-bg) 440px);
|
||||
background-size: 96px 40px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, 100% 100%, 100% 100%;
|
||||
background-position: left bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
|
||||
background-repeat: repeat-x, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, .navbar-brand {
|
||||
font-family: var(--fr-display);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--fr-font);
|
||||
}
|
||||
|
||||
// ---------- Navbar: soumrak nad krajinou se zlatou linkou ----------
|
||||
.navbar {
|
||||
background:
|
||||
linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
|
||||
linear-gradient(90deg, #3d3466, #4b4380 60%, #3d3466) !important;
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.45rem;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
// Třpyt many
|
||||
&::after {
|
||||
content: '✦';
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
margin-right: 0.6em;
|
||||
font-size: 0.7em;
|
||||
color: #e9c86a;
|
||||
animation: fr-shimmer 3.2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: 1px solid var(--fr-line);
|
||||
border-radius: var(--luncher-radius);
|
||||
box-shadow: var(--luncher-shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .navbar {
|
||||
background:
|
||||
linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
|
||||
var(--luncher-navbar-bg) !important;
|
||||
}
|
||||
|
||||
// ---------- Titulek dne: zápis v grimoáru mezi dvěma magickými kruhy ----------
|
||||
.day-navigator .title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 6px 22px 8px;
|
||||
font-family: var(--fr-display);
|
||||
font-weight: 700;
|
||||
font-size: 1.85rem;
|
||||
color: var(--fr-violet-deep) !important;
|
||||
background: rgb(255 255 255 / 0.75);
|
||||
border: 1px solid var(--fr-gold);
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 0 0 4px rgb(255 255 255 / 0.6), 0 0 24px rgb(142 124 195 / 0.25);
|
||||
|
||||
&::before, &::after {
|
||||
@include fr-magic-circle(26px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-left: 14px;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
&.text-muted {
|
||||
color: #8a869b !important;
|
||||
border-color: #c9c5d6;
|
||||
box-shadow: 0 0 0 4px rgb(255 255 255 / 0.5);
|
||||
|
||||
&::before, &::after {
|
||||
opacity: 0.35;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .day-navigator .title {
|
||||
color: #e6defc !important;
|
||||
background: rgb(27 26 43 / 0.8);
|
||||
box-shadow: 0 0 0 4px rgb(27 26 43 / 0.5), 0 0 28px rgb(179 163 234 / 0.3);
|
||||
|
||||
&.text-muted {
|
||||
color: #8f8ba5 !important;
|
||||
border-color: #3a3654;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Karty podniků: stránky grimoáru, v hlavičce slabý magický kruh ----------
|
||||
.restaurant-card {
|
||||
border: 1px solid var(--fr-line);
|
||||
border-radius: var(--luncher-radius-lg);
|
||||
box-shadow: var(--luncher-shadow);
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--fr-lavender);
|
||||
box-shadow: var(--luncher-shadow-lg);
|
||||
}
|
||||
|
||||
.restaurant-header {
|
||||
background:
|
||||
linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 2px no-repeat,
|
||||
radial-gradient(circle at calc(100% - 34px) 50%, transparent 0 22px, rgb(255 255 255 / 0.22) 23px 24px, transparent 25px 30px, rgb(255 255 255 / 0.14) 31px 32px, transparent 33px),
|
||||
linear-gradient(135deg, var(--fr-violet), var(--fr-lavender));
|
||||
|
||||
// Při najetí nebeská modř Himmela
|
||||
&:hover {
|
||||
background:
|
||||
linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 2px no-repeat,
|
||||
radial-gradient(circle at calc(100% - 34px) 50%, transparent 0 22px, rgb(255 255 255 / 0.3) 23px 24px, transparent 25px 30px, rgb(255 255 255 / 0.2) 31px 32px, transparent 33px),
|
||||
linear-gradient(135deg, #3f74ad, #5b8fc7);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
small {
|
||||
color: rgb(255 255 255 / 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .restaurant-card .restaurant-header:not(:hover) {
|
||||
background:
|
||||
linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 2px no-repeat,
|
||||
radial-gradient(circle at calc(100% - 34px) 50%, transparent 0 22px, rgb(220 192 122 / 0.22) 23px 24px, transparent 25px 30px, rgb(220 192 122 / 0.14) 31px 32px, transparent 33px),
|
||||
linear-gradient(135deg, #2e2756, #45397a);
|
||||
}
|
||||
|
||||
.food-table tbody tr:hover > td {
|
||||
background: #f1eef9;
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .food-table tbody tr:hover > td {
|
||||
background: #242238;
|
||||
}
|
||||
|
||||
.food-price {
|
||||
color: var(--fr-violet);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
// ---------- Panely a tabulka voleb ----------
|
||||
.choice-section,
|
||||
.choices-table,
|
||||
.pizza-section,
|
||||
.no-votes {
|
||||
border: 1px solid var(--fr-line);
|
||||
border-radius: var(--luncher-radius-lg);
|
||||
box-shadow: var(--luncher-shadow);
|
||||
}
|
||||
|
||||
.choices-table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
// Sloupec s podnikem: levandulová stránka se zlatou linkou
|
||||
.choices-table > tbody > tr > td:first-child {
|
||||
background: #efebf9;
|
||||
color: var(--fr-violet-deep);
|
||||
font-family: var(--fr-display);
|
||||
font-size: 1.1em;
|
||||
font-weight: 700;
|
||||
border-right: 1px solid var(--fr-gold);
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
|
||||
background: #24203d;
|
||||
color: var(--fr-violet);
|
||||
}
|
||||
|
||||
// Bootstrap karty (skupinové objednávky apod.) a seznamy
|
||||
.card {
|
||||
border: 1px solid var(--fr-line);
|
||||
border-radius: var(--luncher-radius-lg);
|
||||
box-shadow: var(--luncher-shadow);
|
||||
overflow: hidden;
|
||||
background: var(--luncher-bg-card);
|
||||
|
||||
// Rozbalovací výběr z nabídky nesmí karta oříznout
|
||||
&:has(.select-search-container) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
> .card-header {
|
||||
background: var(--luncher-primary-light);
|
||||
border-bottom: 1px solid var(--fr-gold);
|
||||
font-weight: 800;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(var(--luncher-radius-lg) - 1px) calc(var(--luncher-radius-lg) - 1px) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
--bs-table-bg: transparent;
|
||||
margin-bottom: 0;
|
||||
|
||||
> :last-child > tr:last-child > * {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
border-radius: var(--luncher-radius);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--fr-line);
|
||||
|
||||
> .list-group-item {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-select, .form-control,
|
||||
input[type="text"], input[type="email"], input[type="password"] {
|
||||
border-radius: var(--luncher-radius-sm);
|
||||
border: 1px solid var(--fr-line);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--fr-lavender);
|
||||
box-shadow: 0 0 0 3px rgb(142 124 195 / 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Tlačítka: fialová many, při najetí se rozzáří ----------
|
||||
.btn {
|
||||
border-radius: 999px;
|
||||
font-weight: 800;
|
||||
transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.25s ease;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #d9d6e4;
|
||||
color: #8a869b;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .btn-primary {
|
||||
background: linear-gradient(135deg, #8e7cc3, #b3a3ea);
|
||||
color: #17142a;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #a593dc, #c8bbf2);
|
||||
color: #17142a;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #2e2b45;
|
||||
color: #8f8ba5;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
background: var(--luncher-bg-card);
|
||||
border: 1px solid var(--fr-lavender);
|
||||
color: var(--luncher-primary);
|
||||
|
||||
&:hover {
|
||||
background: var(--luncher-primary-light);
|
||||
border-color: var(--fr-lavender);
|
||||
color: var(--luncher-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6f7a92;
|
||||
border: none;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: #5d6780;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .btn-secondary {
|
||||
background: #2e2b45;
|
||||
|
||||
&:hover {
|
||||
background: #3a3654;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #c0485a;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-icon:hover {
|
||||
background: var(--luncher-primary-light);
|
||||
color: var(--luncher-primary);
|
||||
}
|
||||
|
||||
// ---------- Modaly: noční nebe se zlatou linkou ----------
|
||||
.modal-content {
|
||||
border: 1px solid var(--fr-line);
|
||||
border-radius: var(--luncher-radius-xl);
|
||||
box-shadow: 0 16px 44px rgb(61 52 102 / 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background:
|
||||
linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
|
||||
radial-gradient(circle at calc(100% - 70px) 50%, transparent 0 18px, rgb(233 200 106 / 0.25) 19px 20px, transparent 21px 26px, rgb(233 200 106 / 0.15) 27px 28px, transparent 29px),
|
||||
linear-gradient(90deg, #3d3466, #4b4380);
|
||||
border-bottom: none;
|
||||
|
||||
.modal-title, .modal-title h2 {
|
||||
color: #f6f3ff;
|
||||
font-family: var(--fr-display);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1) grayscale(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .modal-header {
|
||||
background-color: #0c0b16;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: none;
|
||||
background-image: linear-gradient(var(--fr-gold), var(--fr-gold));
|
||||
background-size: 100% 1px;
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
a {
|
||||
color: #e9c86a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pomalé otáčení magického kruhu
|
||||
@keyframes fr-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Třpyt many u loga
|
||||
@keyframes fr-shimmer {
|
||||
0%, 100% { opacity: 0.55; transform: scale(0.9); }
|
||||
50% { opacity: 1; transform: scale(1.15); text-shadow: 0 0 8px rgb(233 200 106 / 0.8); }
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
#{$fr} .day-navigator .title {
|
||||
font-size: 1.4rem;
|
||||
padding: 5px 14px 6px;
|
||||
|
||||
&::before, &::after {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#{$fr} .navbar .navbar-brand::after,
|
||||
#{$fr} .day-navigator .title::before,
|
||||
#{$fr} .day-navigator .title::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user