feat: nový vzhled Dungeon Meshi
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 1m58s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 44s
CI / Playwright E2E tests (push) Successful in 1m58s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
This commit is contained in:
10 files changed
+1007
-6
No files matched your search
+2
-2
@@ -11,7 +11,7 @@
|
|||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<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&family=Cormorant+Garamond:wght@600;700&family=Baloo+2:wght@600;800&family=Metal+Mania&family=Klee+One:wght@600&family=Exo+2:wght@700;800&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&family=Baloo+2:wght@600;800&family=Metal+Mania&family=Klee+One:wght@600&family=Exo+2:wght@700;800&family=Almendra:wght@700&family=Alegreya:wght@500;700;800&display=swap" rel="stylesheet" />
|
||||||
<title>Luncher</title>
|
<title>Luncher</title>
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
}
|
}
|
||||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||||
var style = localStorage.getItem('style_theme');
|
var style = localStorage.getItem('style_theme');
|
||||||
var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi', 'evangelion', 'yurucamp', 'spyfamily', 'apothecary', 'frieren', 'mlpg5', 'aggretsuko', 'sumikko', 'gudetama', 'miku'];
|
var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi', 'evangelion', 'yurucamp', 'spyfamily', 'apothecary', 'frieren', 'mlpg5', 'aggretsuko', 'sumikko', 'gudetama', 'miku', 'dungeonmeshi'];
|
||||||
document.documentElement.setAttribute('data-luncher-theme', styles.indexOf(style) >= 0 ? style : 'simple');
|
document.documentElement.setAttribute('data-luncher-theme', styles.indexOf(style) >= 0 ? style : 'simple');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Fallback pokud localStorage není dostupný
|
// Fallback pokud localStorage není dostupný
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ import './themes/aggretsuko.scss';
|
|||||||
import './themes/sumikko.scss';
|
import './themes/sumikko.scss';
|
||||||
import './themes/gudetama.scss';
|
import './themes/gudetama.scss';
|
||||||
import './themes/miku.scss';
|
import './themes/miku.scss';
|
||||||
|
import './themes/dungeonmeshi.scss';
|
||||||
import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
|
import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
|
||||||
import { useSettings } from './context/settings';
|
import { useSettings } from './context/settings';
|
||||||
import Footer from './components/Footer';
|
import Footer from './components/Footer';
|
||||||
|
|||||||
@@ -186,6 +186,17 @@
|
|||||||
box-shadow: 0 0 0 2px #39c5bb, 0 0 8px rgb(57 197 187 / 0.7);
|
box-shadow: 0 0 0 2px #39c5bb, 0 0 8px rgb(57 197 187 / 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Styl Dungeon Meshi: emoji na pergamenu v kožené obrubě s mosazným lemem
|
||||||
|
.eater-badge-dungeonmeshi {
|
||||||
|
display: inline-grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1;
|
||||||
|
border-color: #b8862b;
|
||||||
|
background: radial-gradient(circle at 40% 35%, #fbf1da, #e8d4a8);
|
||||||
|
box-shadow: 0 0 0 2px #6b4226, 0 2px 4px rgb(59 42 26 / 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
// Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
|
// Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
|
||||||
.user-info:has(.eater-badge) {
|
.user-info:has(.eater-badge) {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
@@ -97,6 +97,12 @@ const MIKU_LEVELS = [
|
|||||||
{ minItems: 2, emoji: '🥬', title: 'Úroveň Miku — k obědu ještě pórek, ať se dá točit nad hlavou' },
|
{ minItems: 2, emoji: '🥬', title: 'Úroveň Miku — k obědu ještě pórek, ať se dá točit nad hlavou' },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
/** Úrovně ve stylu Dungeon Meshi — emoji na pergamenovém štítku v kožené obrubě. Seřazeno od nejvyšší úrovně. */
|
||||||
|
const DM_LEVELS = [
|
||||||
|
{ minItems: 3, emoji: '🐉', title: 'Úroveň červeného draka — tolik jídla by nasytilo celou družinu až do sedmého patra' },
|
||||||
|
{ minItems: 2, emoji: '🍄', title: 'Úroveň Senshiho — maso, zelenina a houby, vyvážená strava i v podzemí' },
|
||||||
|
];
|
||||||
|
|
||||||
/** Úrovně podle stylu pro odznaky s emoji. */
|
/** Úrovně podle stylu pro odznaky s emoji. */
|
||||||
const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
|
const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
|
||||||
mlp: MLP_LEVELS,
|
mlp: MLP_LEVELS,
|
||||||
@@ -113,6 +119,7 @@ const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
|
|||||||
sumikko: SK_LEVELS,
|
sumikko: SK_LEVELS,
|
||||||
gudetama: GT_LEVELS,
|
gudetama: GT_LEVELS,
|
||||||
miku: MIKU_LEVELS,
|
miku: MIKU_LEVELS,
|
||||||
|
dungeonmeshi: DM_LEVELS,
|
||||||
};
|
};
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@@ -120,7 +127,7 @@ type Props = {
|
|||||||
items: number,
|
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, Apothecary Diaries, Frieren, My Little Pony G5, Aggretsuko, Sumikko Gurashi, Gudetama a Hatsune Miku. */
|
/** 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, Frieren, My Little Pony G5, Aggretsuko, Sumikko Gurashi, Gudetama, Hatsune Miku a Dungeon Meshi. */
|
||||||
export default function EaterBadge({ items }: Readonly<Props>) {
|
export default function EaterBadge({ items }: Readonly<Props>) {
|
||||||
const styleTheme = useSettings()?.styleTheme;
|
const styleTheme = useSettings()?.styleTheme;
|
||||||
const isUma = styleTheme === 'umamusume';
|
const isUma = styleTheme === 'umamusume';
|
||||||
|
|||||||
@@ -1275,3 +1275,90 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Konfety ve stylu Dungeon Meshi
|
||||||
|
// ============================================
|
||||||
|
.confetti-dm {
|
||||||
|
filter: drop-shadow(0 3px 3px rgb(59 42 26 / 0.35));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Štítky jako kožené visačky na receptech — prošívaný okraj a mosazný nýt
|
||||||
|
.confetti-dm-badge {
|
||||||
|
padding: 3px 14px 4px 22px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px dashed rgb(255 236 200 / 0.7);
|
||||||
|
outline: 2px solid rgb(0 0 0 / 0.15);
|
||||||
|
background-image: radial-gradient(circle at 10px 50%, #e9c46a 3px, transparent 3.5px);
|
||||||
|
color: #fff6e6;
|
||||||
|
font-family: 'Almendra', 'Alegreya', 'Palatino Linotype', Palatino, serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-shadow: 0 1px 0 rgb(0 0 0 / 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nápis „🍲 ダンジョン飯 🔥" — štítek kuchařky vypálený do kůže, plamen zpod něj
|
||||||
|
.confetti-dm-banner {
|
||||||
|
position: absolute;
|
||||||
|
top: 38%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
padding: 18px 48px 22px;
|
||||||
|
font-family: 'Almendra', 'Alegreya', 'Palatino Linotype', Palatino, serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: clamp(2rem, 7vw, 4.2rem);
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #fbefd5;
|
||||||
|
text-shadow: 0 2px 0 #4a2c18, 0 0 18px rgb(255 140 50 / 0.6);
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(90deg, #e9cf9f 0 10px, transparent 10px 18px) left 8px top 8px / calc(100% - 16px) 2px no-repeat,
|
||||||
|
repeating-linear-gradient(90deg, #e9cf9f 0 10px, transparent 10px 18px) left 8px bottom 8px / calc(100% - 16px) 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #7a4b2b, #4a2c18);
|
||||||
|
border: 3px solid #b8862b;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 0 4px #4a2c18, 0 10px 40px rgb(255 120 40 / 0.55);
|
||||||
|
animation: dm-banner 2.6s ease both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dm-banner {
|
||||||
|
0% { transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); opacity: 0; }
|
||||||
|
12% { transform: translate(-50%, -50%) scale(1.05) rotate(1deg); opacity: 1; }
|
||||||
|
18%, 80% { transform: translate(-50%, -50%) scale(1) rotate(-1deg); opacity: 1; }
|
||||||
|
// Oheň pod štítkem šlehá
|
||||||
|
30%, 54% { box-shadow: 0 0 0 4px #4a2c18, 0 14px 50px rgb(255 120 40 / 0.8); }
|
||||||
|
42%, 66% { box-shadow: 0 0 0 4px #4a2c18, 0 8px 30px rgb(255 120 40 / 0.45); }
|
||||||
|
100% { transform: translate(-50%, -50%) scale(0.92) rotate(-1deg); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Člen družiny s hláškou — kruh v kožené obrubě a bublina jako stránka kuchařky
|
||||||
|
.confetti-dungeonmeshi-voice {
|
||||||
|
.confetti-mlp-avatar {
|
||||||
|
border: 3px solid #b8862b;
|
||||||
|
background: radial-gradient(circle at 40% 35%, #fbf1da, #e8d4a8);
|
||||||
|
box-shadow: 0 0 0 3px var(--mlp-speaker, #6b4226), 0 4px 10px rgb(59 42 26 / 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confetti-mlp-bubble {
|
||||||
|
background: #fbf3e0;
|
||||||
|
color: #3b2a1a;
|
||||||
|
border: 2px solid #6b4226;
|
||||||
|
border-top: 5px solid var(--mlp-speaker, #6b4226);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: inset 0 0 0 2px #fbf1da, inset 0 0 0 3px #d9c294, 0 8px 20px rgb(0 0 0 / 0.3);
|
||||||
|
font-family: 'Alegreya', 'Palatino Linotype', Palatino, serif;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-family: 'Almendra', 'Alegreya', 'Palatino Linotype', Palatino, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-right-color: #6b4226;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -226,6 +226,20 @@ const MIKU_SPEAKERS = [
|
|||||||
{ name: 'GUMI', emoji: '🥕', color: '#6fbf3a', quote: 'Mrkvičku si k tomu dám taky! Ať mám hlas jako zvonek.' },
|
{ name: 'GUMI', emoji: '🥕', color: '#6fbf3a', quote: 'Mrkvičku si k tomu dám taky! Ať mám hlas jako zvonek.' },
|
||||||
{ name: 'Kasane Teto', emoji: '🥖', color: '#d9405e', quote: 'Já si dám bagetu. Jako vždycky. Jsem přece Teto!' },
|
{ name: 'Kasane Teto', emoji: '🥖', color: '#d9405e', quote: 'Já si dám bagetu. Jako vždycky. Jsem přece Teto!' },
|
||||||
];
|
];
|
||||||
|
const DM_EMOJI = ['🍲', '🍄', '🐉', '🦂', '🔥', '🗡️', '🛡️', '🥘', '🍖', '🌿', '🧄', '🥕', '📜', '🐟', '🧪', '🍳'];
|
||||||
|
// Hlášky a pokrmy z Dungeon Meshi (chodící houba, mandragora, bazilišek, mimik, živé brnění...)
|
||||||
|
const DM_BADGES = ['ダンジョン飯', 'Itadakimasu!', 'Recept dne', 'Chodící houba', 'Mandragora', 'Bazilišek', 'Mimik?!', 'Živé brnění', 'Vyvážená strava!', 'Kotlík od Senshiho', 'Jíst znamená žít'];
|
||||||
|
const DM_BADGE_COLORS = ['#a0441a', '#5c7a3a', '#6b4226', '#b8862b', '#3d5a80', '#b3261e'];
|
||||||
|
/** Družina z podzemí s „hláškou" po finálním výsledku. */
|
||||||
|
const DM_SPEAKERS = [
|
||||||
|
{ name: 'Laios', emoji: '🐉', color: '#3d5a80', quote: 'Výborně! A nevíte, jestli tam vaří i něco z příšer? Jen se ptám.' },
|
||||||
|
{ name: 'Marcille', emoji: '🧪', color: '#d4a017', quote: 'Hlavně ať to není z příšer! …Zkontrolujte to. Prosím. Vážně.' },
|
||||||
|
{ name: 'Chilchuck', emoji: '🗝️', color: '#8a6d3b', quote: 'Fajn. Ale nejdřív zkontroluju, jestli ten talíř není mimik.' },
|
||||||
|
{ name: 'Senshi', emoji: '🍲', color: '#6b4226', quote: 'Dobrá volba. Jen nezapomeň — maso, zelenina a houby. Vyvážená strava!' },
|
||||||
|
{ name: 'Izutsumi', emoji: '🐟', color: '#4a4a4a', quote: 'Nebudu jíst nic, co se předtím hýbalo. …Rybu ale klidně.' },
|
||||||
|
{ name: 'Falin', emoji: '🌼', color: '#c9a227', quote: 'To zní dobře! Hlavně ať jíme všichni spolu.' },
|
||||||
|
{ name: 'Kabru', emoji: '🗡️', color: '#3b6e4f', quote: 'Zajímavá volba. Kdo z vás to vybíral? Jen ať vím, s kým si promluvit.' },
|
||||||
|
];
|
||||||
/** Styly, jejichž konfety tvoří emoji a samolepky s hláškami (a po finále promluví postava s emoji). */
|
/** Styly, jejichž konfety tvoří emoji a samolepky s hláškami (a po finále promluví postava s emoji). */
|
||||||
const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
|
const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
|
||||||
prefix: string, badges: string[], colors: string[], emoji: string[],
|
prefix: string, badges: string[], colors: string[], emoji: string[],
|
||||||
@@ -246,6 +260,7 @@ const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
|
|||||||
sumikko: { prefix: 'confetti-sk', badges: SK_BADGES, colors: SK_BADGE_COLORS, emoji: SK_EMOJI, speakers: SK_SPEAKERS, banner: '🍤 すみっコぐらし 🐧' },
|
sumikko: { prefix: 'confetti-sk', badges: SK_BADGES, colors: SK_BADGE_COLORS, emoji: SK_EMOJI, speakers: SK_SPEAKERS, banner: '🍤 すみっコぐらし 🐧' },
|
||||||
gudetama: { prefix: 'confetti-gt', badges: GT_BADGES, colors: GT_BADGE_COLORS, emoji: GT_EMOJI, speakers: GT_SPEAKERS, banner: '🍳 ぐでたま… 🥓' },
|
gudetama: { prefix: 'confetti-gt', badges: GT_BADGES, colors: GT_BADGE_COLORS, emoji: GT_EMOJI, speakers: GT_SPEAKERS, banner: '🍳 ぐでたま… 🥓' },
|
||||||
miku: { prefix: 'confetti-miku', badges: MIKU_BADGES, colors: MIKU_BADGE_COLORS, emoji: MIKU_EMOJI, speakers: MIKU_SPEAKERS, banner: '♪ 初音ミク ♪' },
|
miku: { prefix: 'confetti-miku', badges: MIKU_BADGES, colors: MIKU_BADGE_COLORS, emoji: MIKU_EMOJI, speakers: MIKU_SPEAKERS, banner: '♪ 初音ミク ♪' },
|
||||||
|
dungeonmeshi: { prefix: 'confetti-dm', badges: DM_BADGES, colors: DM_BADGE_COLORS, emoji: DM_EMOJI, speakers: DM_SPEAKERS, banner: '🍲 ダンジョン飯 🔥' },
|
||||||
};
|
};
|
||||||
const DURATION_MS = 6400;
|
const DURATION_MS = 6400;
|
||||||
|
|
||||||
@@ -399,7 +414,7 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [burstKey]);
|
}, [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, družina Frieren, poníci z Maretime Bay, kancelář Retsuko, postavičky z koutků, Gudetama, Vocaloidi...)
|
// 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, poníci z Maretime Bay, kancelář Retsuko, postavičky z koutků, Gudetama, Vocaloidi, družina z Dungeon Meshi...)
|
||||||
const emojiConfetti = EMOJI_CONFETTI[theme];
|
const emojiConfetti = EMOJI_CONFETTI[theme];
|
||||||
const emojiSpeaker = useMemo(
|
const emojiSpeaker = useMemo(
|
||||||
() => big && emojiConfetti ? pick(emojiConfetti.speakers) : undefined,
|
() => big && emojiConfetti ? pick(emojiConfetti.speakers) : undefined,
|
||||||
|
|||||||
@@ -4170,6 +4170,269 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// STYL DUNGEON MESHI kola štěstí (dle stylu zvoleného v nastavení).
|
||||||
|
// Výseče v barvách podzemní kuchyně (rez, mech, kůže, mosaz, modř Laiose,
|
||||||
|
// červený drak), okraj jako litinová pánev a střed jako kotlík.
|
||||||
|
// ============================================
|
||||||
|
.spin-wheel-modal.spin-theme-dungeonmeshi {
|
||||||
|
--dm-font: 'Alegreya', 'Palatino Linotype', Palatino, serif;
|
||||||
|
--dm-display: 'Almendra', 'Alegreya', 'Palatino Linotype', Palatino, serif;
|
||||||
|
--dm-leather: #6b4226;
|
||||||
|
--dm-leather-deep: #4a2c18;
|
||||||
|
--dm-brass: #b8862b;
|
||||||
|
--dm-rust: #a0441a;
|
||||||
|
--dm-moss: #5c7a3a;
|
||||||
|
--dm-line: #d9c294;
|
||||||
|
--dm-panel: #fbf3e0;
|
||||||
|
--dm-text: #3b2a1a;
|
||||||
|
--wheel-c0: #a0441a;
|
||||||
|
--wheel-c1: #5c7a3a;
|
||||||
|
--wheel-c2: #6b4226;
|
||||||
|
--wheel-c3: #b8862b;
|
||||||
|
--wheel-c4: #3d5a80;
|
||||||
|
--wheel-c5: #b3261e;
|
||||||
|
--wheel-rim: #2b2420;
|
||||||
|
--wheel-hub: #3a302a;
|
||||||
|
|
||||||
|
font-family: var(--dm-font);
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
border: 2px solid var(--dm-leather);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgb(140 90 40 / 0.2) 100%),
|
||||||
|
#f4e7c9;
|
||||||
|
color: var(--dm-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(90deg, #e9cf9f 0 8px, transparent 8px 14px) left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #7a4b2b, var(--dm-leather-deep));
|
||||||
|
border-bottom: 3px solid var(--dm-brass);
|
||||||
|
padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 6px);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #fbefd5;
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close {
|
||||||
|
filter: invert(1) sepia(0.3) brightness(1.6);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
border-top: 3px double var(--dm-line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-steps span {
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
background: #e8d4a8;
|
||||||
|
color: #94795a;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 3px 16px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: var(--dm-rust);
|
||||||
|
color: #fff6e6;
|
||||||
|
box-shadow: 0 0 10px rgb(232 135 63 / 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.done {
|
||||||
|
background: var(--dm-moss);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: var(--dm-font);
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(180deg, #b8541f, #8a3810);
|
||||||
|
border: 1px solid #6e2b0a;
|
||||||
|
color: #fff6e6;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: linear-gradient(180deg, #cc6326, #9c4013);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 0 14px rgb(232 135 63 / 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #dccaa6;
|
||||||
|
border-color: #cbb68d;
|
||||||
|
color: #94795a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tlačítko roztočení — do boje (a pak k jídlu)
|
||||||
|
.spin-button {
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
padding: 10px 38px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '⚔ ';
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-primary {
|
||||||
|
background: var(--dm-panel);
|
||||||
|
border: 1px solid var(--dm-rust);
|
||||||
|
color: var(--dm-rust);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #f6e2c4;
|
||||||
|
color: var(--dm-rust);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: var(--dm-moss);
|
||||||
|
border: 1px solid #45602a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-source {
|
||||||
|
background: #e8d4a8;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
> .btn {
|
||||||
|
border-radius: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn-outline-primary {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--dm-text);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--dm-panel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-result {
|
||||||
|
font-weight: 800;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: var(--dm-rust);
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-options {
|
||||||
|
background: var(--dm-panel);
|
||||||
|
border: 1px solid var(--dm-line);
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
background: #f3e3c2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-options-header {
|
||||||
|
border-bottom: 3px double var(--dm-leather);
|
||||||
|
color: var(--dm-leather);
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-empty {
|
||||||
|
border-color: var(--dm-line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-wheel-pointer {
|
||||||
|
border-top-color: var(--dm-brass);
|
||||||
|
filter: drop-shadow(0 2px 2px rgb(59 42 26 / 0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-wheel-hub {
|
||||||
|
stroke: var(--dm-brass);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-seg {
|
||||||
|
stroke: #f4e7c9;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-seg-label {
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tmavý režim — podzemí za světla loučí
|
||||||
|
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-dungeonmeshi {
|
||||||
|
--dm-line: #3d3226;
|
||||||
|
--dm-panel: #221c16;
|
||||||
|
--dm-text: #f1e2c3;
|
||||||
|
--dm-rust: #e8873f;
|
||||||
|
--wheel-rim: #0d0b09;
|
||||||
|
--wheel-hub: #1a1511;
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
border-color: #5a3a22;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 0% 0%, rgb(255 140 50 / 0.16), transparent 40%),
|
||||||
|
radial-gradient(circle at 100% 0%, rgb(255 140 50 / 0.16), transparent 40%),
|
||||||
|
#15120f;
|
||||||
|
box-shadow: 0 0 30px rgb(232 135 63 / 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(90deg, rgb(232 135 63 / 0.45) 0 8px, transparent 8px 14px) left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #3e2716, #2a1a0f);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-steps span:not(.active):not(.done) {
|
||||||
|
background: #2c241c;
|
||||||
|
color: #8f7d63;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-steps span.active {
|
||||||
|
background: #b8541f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
background: #2c241c;
|
||||||
|
border-color: #3d3226;
|
||||||
|
color: #8f7d63;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-primary:hover {
|
||||||
|
background: #3a2416;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-source {
|
||||||
|
background: #2c241c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-options li:hover {
|
||||||
|
background: #2c241c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-options-header {
|
||||||
|
color: #e8b27a;
|
||||||
|
border-bottom-color: #8a5a33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-seg {
|
||||||
|
stroke: #15120f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Ikona kola se při najetí pootočí
|
// Ikona kola se při najetí pootočí
|
||||||
.spin-wheel-icon {
|
.spin-wheel-icon {
|
||||||
transition: transform 0.4s ease !important;
|
transition: transform 0.4s ease !important;
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ const AUTO_ORDER_CHOICE_KEY = 'auto_order_choice';
|
|||||||
export type ThemePreference = 'system' | 'light' | 'dark';
|
export type ThemePreference = 'system' | 'light' | 'dark';
|
||||||
|
|
||||||
/** Vizuální styl aplikace (nezávislý na světlém/tmavém režimu). */
|
/** 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' | 'frieren' | 'mlpg5' | 'aggretsuko' | 'sumikko' | 'gudetama' | 'miku';
|
export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi' | 'evangelion' | 'yurucamp' | 'spyfamily' | 'apothecary' | 'frieren' | 'mlpg5' | 'aggretsuko' | 'sumikko' | 'gudetama' | 'miku' | 'dungeonmeshi';
|
||||||
|
|
||||||
export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
|
export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
|
||||||
{ value: 'simple', label: 'Jednoduchý' },
|
{ value: 'simple', label: 'Jednoduchý' },
|
||||||
@@ -32,6 +32,7 @@ export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
|
|||||||
{ value: 'sumikko', label: 'Sumikko Gurashi' },
|
{ value: 'sumikko', label: 'Sumikko Gurashi' },
|
||||||
{ value: 'gudetama', label: 'Gudetama' },
|
{ value: 'gudetama', label: 'Gudetama' },
|
||||||
{ value: 'miku', label: 'Hatsune Miku' },
|
{ value: 'miku', label: 'Hatsune Miku' },
|
||||||
|
{ value: 'dungeonmeshi', label: 'Dungeon Meshi' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export type SettingsContextProps = {
|
export type SettingsContextProps = {
|
||||||
@@ -263,7 +264,7 @@ function useProvideSettings(): SettingsContextProps {
|
|||||||
}, [autoOrderChoice]);
|
}, [autoOrderChoice]);
|
||||||
|
|
||||||
// Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
|
// 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, Frieren, My Little Pony G5, Aggretsuko, Sumikko Gurashi, Gudetama, Hatsune Miku) 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, My Little Pony G5, Aggretsuko, Sumikko Gurashi, Gudetama, Hatsune Miku, Dungeon Meshi) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
|
localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
|
||||||
if (styleTheme === 'simple') {
|
if (styleTheme === 'simple') {
|
||||||
|
|||||||
@@ -35,6 +35,8 @@ const ICONS: Record<StyleTheme, Record<GameId, string>> = {
|
|||||||
gudetama: { drawing: '🥚' },
|
gudetama: { drawing: '🥚' },
|
||||||
// Klávesy zpěvového editoru
|
// Klávesy zpěvového editoru
|
||||||
miku: { drawing: '🎹' },
|
miku: { drawing: '🎹' },
|
||||||
|
// Laiosův bestiář — náčrty příšer (a jak je uvařit)
|
||||||
|
dungeonmeshi: { drawing: '📖' },
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
|
/** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
|
||||||
|
|||||||
@@ -0,0 +1,614 @@
|
|||||||
|
// ============================================
|
||||||
|
// STYL "DUNGEON MESHI" (volitelný, výchozí je jednoduchý styl)
|
||||||
|
// Inspirováno mangou a anime Dungeon Meshi (ダンジョン飯, Delicious in Dungeon).
|
||||||
|
// Světlý režim = Senshiho kuchařka a deník výpravy: pergamen, hnědý inkoust,
|
||||||
|
// kožená vazba se stehy a mosaznými nýty. Karty podniků jsou karty receptů,
|
||||||
|
// titulek dne štítek receptu s kotlíkem, ze kterého stoupá pára.
|
||||||
|
// U loga plápolá ohníček, na kterém Senshi vaří.
|
||||||
|
// Tmavý režim = podzemí za světla loučí: kamenné zdivo a teplá záře pochodní.
|
||||||
|
// Aktivní, pokud má <html> atribut data-luncher-theme="dungeonmeshi".
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
$dm: 'html[data-luncher-theme="dungeonmeshi"]';
|
||||||
|
|
||||||
|
// Zrnitost pergamenu — jemný hnědý šum
|
||||||
|
$dm-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||||
|
|
||||||
|
// Kamenné zdivo podzemí — řady kvádrů s posunutými spárami
|
||||||
|
$dm-bricks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cpath d='M0 .5H96M0 24.5H96M.5 0V24M48.5 24V48' stroke='%23000' stroke-opacity='.45'/%3E%3Cpath d='M0 1.5H96M0 25.5H96M1.5 1V24M49.5 25V48' stroke='%23fff' stroke-opacity='.035'/%3E%3C/svg%3E");
|
||||||
|
|
||||||
|
// Pára nad kotlíkem — tři vlnky
|
||||||
|
$dm-steam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22'%3E%3Cg fill='none' stroke='%239a8466' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 21Q2 17 5 13T5 5'/%3E%3Cpath d='M12 21Q9 15 12 10T12 1'/%3E%3Cpath d='M19 21Q16 17 19 13T19 5'/%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
|
||||||
|
// Prošívání kůže — přerušovaná linka stehů
|
||||||
|
$dm-stitch-light: repeating-linear-gradient(90deg, #e9cf9f 0 8px, transparent 8px 14px);
|
||||||
|
|
||||||
|
#{$dm} {
|
||||||
|
--dm-font: 'Alegreya', 'Palatino Linotype', Palatino, serif;
|
||||||
|
--dm-display: 'Almendra', 'Alegreya', 'Palatino Linotype', Palatino, serif;
|
||||||
|
--dm-parchment: #f4e7c9;
|
||||||
|
--dm-parchment-deep: #e8d4a8;
|
||||||
|
--dm-ink: #3b2a1a; // inkoust kuchařky
|
||||||
|
--dm-leather: #6b4226; // kožená vazba
|
||||||
|
--dm-leather-deep: #4a2c18;
|
||||||
|
--dm-brass: #b8862b; // mosazné nýty a kování
|
||||||
|
--dm-rust: #a0441a; // rez na kotlíku, plamen
|
||||||
|
--dm-moss: #5c7a3a; // houby a bylinky
|
||||||
|
--dm-dragon: #b3261e; // červený drak
|
||||||
|
--dm-line: #d9c294;
|
||||||
|
|
||||||
|
--luncher-primary: var(--dm-rust);
|
||||||
|
--luncher-primary-hover: #82350f;
|
||||||
|
--luncher-primary-light: #f6e2c4;
|
||||||
|
--luncher-bg: #efe0bd;
|
||||||
|
--luncher-bg-card: #fbf3e0;
|
||||||
|
--luncher-bg-hover: #f6e9cc;
|
||||||
|
--luncher-text: var(--dm-ink);
|
||||||
|
--luncher-text-secondary: #5e4630;
|
||||||
|
--luncher-text-muted: #94795a;
|
||||||
|
--luncher-border: var(--dm-line);
|
||||||
|
--luncher-border-light: #e8d8b4;
|
||||||
|
--luncher-navbar-bg: var(--dm-leather);
|
||||||
|
--luncher-navbar-text: #f6e7c8;
|
||||||
|
--luncher-action-icon: var(--dm-rust);
|
||||||
|
--luncher-buyer-icon: var(--dm-moss);
|
||||||
|
--luncher-success: var(--dm-moss);
|
||||||
|
--luncher-warning: #c98a12;
|
||||||
|
--luncher-danger: var(--dm-dragon);
|
||||||
|
--luncher-radius-sm: 4px;
|
||||||
|
--luncher-radius: 6px;
|
||||||
|
--luncher-radius-lg: 8px;
|
||||||
|
--luncher-radius-xl: 10px;
|
||||||
|
--luncher-shadow: 0 2px 0 rgb(107 66 38 / 0.12), 0 6px 16px rgb(59 42 26 / 0.12);
|
||||||
|
--luncher-shadow-lg: 0 3px 0 rgb(107 66 38 / 0.2), 0 12px 26px rgb(59 42 26 / 0.22);
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] {
|
||||||
|
// Podzemí za světla loučí
|
||||||
|
--dm-parchment: #2a2119;
|
||||||
|
--dm-parchment-deep: #3a2d20;
|
||||||
|
--dm-ink: #f1e2c3;
|
||||||
|
--dm-line: #3d3226;
|
||||||
|
|
||||||
|
--luncher-primary: #e8873f;
|
||||||
|
--luncher-primary-hover: #f4a462;
|
||||||
|
--luncher-primary-light: #3a2416;
|
||||||
|
--luncher-bg: #15120f;
|
||||||
|
--luncher-bg-card: #221c16;
|
||||||
|
--luncher-bg-hover: #2c241c;
|
||||||
|
--luncher-text: var(--dm-ink);
|
||||||
|
--luncher-text-secondary: #d2bf9c;
|
||||||
|
--luncher-text-muted: #8f7d63;
|
||||||
|
--luncher-border-light: #2c241c;
|
||||||
|
--luncher-navbar-bg: #2a1a0f;
|
||||||
|
--luncher-action-icon: #e8873f;
|
||||||
|
--luncher-buyer-icon: #9cc26a;
|
||||||
|
--luncher-success: #9cc26a;
|
||||||
|
--luncher-warning: #f0b44a;
|
||||||
|
--luncher-danger: #ef5a4a;
|
||||||
|
--luncher-shadow: 0 4px 16px rgb(0 0 0 / 0.55);
|
||||||
|
--luncher-shadow-lg: 0 0 0 1px rgb(232 135 63 / 0.5), 0 10px 30px rgb(232 135 63 / 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--dm-font);
|
||||||
|
// Alegreya má výchozí skloněné (minuskové) číslice — ceny a alergeny chceme zarovnané
|
||||||
|
font-variant-numeric: lining-nums;
|
||||||
|
background-color: var(--luncher-bg);
|
||||||
|
// Pergamen s ohořelými okraji
|
||||||
|
background-image:
|
||||||
|
radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgb(140 90 40 / 0.22) 100%),
|
||||||
|
#{$dm-paper};
|
||||||
|
background-size: 100% 100%, 220px 220px;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] body {
|
||||||
|
// Kamenné zdivo, dvě pochodně po stranách a tma uprostřed chodby
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 0% 18%, rgb(255 140 50 / 0.2), transparent 32%),
|
||||||
|
radial-gradient(circle at 100% 18%, rgb(255 140 50 / 0.2), transparent 32%),
|
||||||
|
radial-gradient(ellipse 80% 60% at 50% 60%, transparent 40%, rgb(0 0 0 / 0.45) 100%),
|
||||||
|
#{$dm-bricks};
|
||||||
|
background-size: 100% 100%, 100% 100%, 100% 100%, 96px 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, .navbar-brand {
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: var(--dm-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- Navbar: kožený hřbet knihy se stehy a ohníček u loga ----------
|
||||||
|
.navbar {
|
||||||
|
background:
|
||||||
|
$dm-stitch-light left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(var(--dm-brass), var(--dm-brass)) left bottom / 100% 3px no-repeat,
|
||||||
|
linear-gradient(180deg, #7a4b2b, var(--luncher-navbar-bg)) !important;
|
||||||
|
padding-bottom: calc(var(--bs-navbar-padding-y, 0.5rem) + 3px);
|
||||||
|
border-bottom: none;
|
||||||
|
box-shadow: 0 3px 12px rgb(59 42 26 / 0.35);
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
|
||||||
|
// Ohníček pod Senshiho kotlíkem
|
||||||
|
&::after {
|
||||||
|
content: '🔥';
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-right: 0.6em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
transform-origin: 50% 90%;
|
||||||
|
animation: dm-flame 1.4s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
border: 1px solid var(--dm-line);
|
||||||
|
border-radius: var(--luncher-radius);
|
||||||
|
box-shadow: var(--luncher-shadow-lg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .navbar {
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(90deg, rgb(232 135 63 / 0.55) 0 8px, transparent 8px 14px) left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(var(--dm-brass), var(--dm-brass)) left bottom / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #3a2414, var(--luncher-navbar-bg)) !important;
|
||||||
|
box-shadow: 0 2px 18px rgb(232 135 63 / 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- Titulek dne: štítek receptu a kotlík s párou ----------
|
||||||
|
.day-navigator .title {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 26px 8px;
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: var(--dm-ink) !important;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 10px 10px, var(--dm-brass) 3px, transparent 3.5px),
|
||||||
|
radial-gradient(circle at calc(100% - 10px) 10px, var(--dm-brass) 3px, transparent 3.5px),
|
||||||
|
#{$dm-paper},
|
||||||
|
linear-gradient(180deg, #fbf1da, var(--dm-parchment-deep));
|
||||||
|
border: 2px solid var(--dm-leather);
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: inset 0 0 0 3px #fbf1da, inset 0 0 0 4px var(--dm-line), 0 6px 14px rgb(59 42 26 / 0.22);
|
||||||
|
transform: rotate(-1deg);
|
||||||
|
|
||||||
|
// Kotlík vedle štítku
|
||||||
|
&::before {
|
||||||
|
content: '🍲';
|
||||||
|
position: absolute;
|
||||||
|
right: -40px;
|
||||||
|
bottom: -2px;
|
||||||
|
font-size: 0.95em;
|
||||||
|
transform: rotate(1deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pára, která z kotlíku stoupá
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: -35px;
|
||||||
|
bottom: 1.15em;
|
||||||
|
width: 24px;
|
||||||
|
height: 22px;
|
||||||
|
background: $dm-steam center / contain no-repeat;
|
||||||
|
animation: dm-steam 2.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-muted {
|
||||||
|
color: var(--luncher-text-muted) !important;
|
||||||
|
background: #ead9b6;
|
||||||
|
border-color: #b9a07a;
|
||||||
|
box-shadow: inset 0 0 0 3px #f0e2c4, inset 0 0 0 4px #d8c49e;
|
||||||
|
|
||||||
|
// Vyhaslý kotlík — jen prázdná miska
|
||||||
|
&::before {
|
||||||
|
content: '🥣';
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .day-navigator .title {
|
||||||
|
color: #fbefd5 !important;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 10px 10px, var(--dm-brass) 3px, transparent 3.5px),
|
||||||
|
radial-gradient(circle at calc(100% - 10px) 10px, var(--dm-brass) 3px, transparent 3.5px),
|
||||||
|
linear-gradient(180deg, #4a3522, #33251a);
|
||||||
|
border-color: #8a5a33;
|
||||||
|
box-shadow: inset 0 0 0 3px #3e2d1e, inset 0 0 0 4px #6b4a2c, 0 0 26px rgb(255 140 50 / 0.3);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
filter: invert(1) sepia(0.4);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-muted {
|
||||||
|
color: var(--luncher-text-muted) !important;
|
||||||
|
background: #241d16;
|
||||||
|
border-color: #3d3226;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- Karty podniků: karty receptů s koženou hlavičkou ----------
|
||||||
|
.restaurant-card {
|
||||||
|
border: 1px solid var(--dm-line);
|
||||||
|
border-radius: var(--luncher-radius-lg);
|
||||||
|
box-shadow: var(--luncher-shadow);
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--luncher-bg-card);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: var(--dm-brass);
|
||||||
|
box-shadow: var(--luncher-shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.restaurant-header {
|
||||||
|
background:
|
||||||
|
$dm-stitch-light left top 6px / 100% 2px no-repeat,
|
||||||
|
$dm-stitch-light left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #7a4b2b, var(--dm-leather-deep));
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 3px solid var(--dm-brass);
|
||||||
|
|
||||||
|
// Při najetí se kůže rozpálí jako nad ohněm
|
||||||
|
&:hover {
|
||||||
|
background:
|
||||||
|
$dm-stitch-light left top 6px / 100% 2px no-repeat,
|
||||||
|
$dm-stitch-light left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #b0532a, #7a2f12);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #fbefd5;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
text-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
color: rgb(251 239 213 / 0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .restaurant-card .restaurant-header:not(:hover) {
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(90deg, rgb(232 135 63 / 0.45) 0 8px, transparent 8px 14px) left top 6px / 100% 2px no-repeat,
|
||||||
|
repeating-linear-gradient(90deg, rgb(232 135 63 / 0.45) 0 8px, transparent 8px 14px) left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #3e2716, #2a1a0f);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tabulka jídel bez vlastního (bílého / modrošedého) pozadí — prosvítá pergamen karty
|
||||||
|
.food-table {
|
||||||
|
--bs-table-bg: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.food-table tbody tr:hover > td {
|
||||||
|
background: #f3e3c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .food-table tbody tr:hover > td {
|
||||||
|
background: #2c241c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.food-price {
|
||||||
|
color: var(--dm-rust);
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .food-price {
|
||||||
|
color: #e8873f;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- Panely a tabulka voleb ----------
|
||||||
|
.choice-section,
|
||||||
|
.choices-table,
|
||||||
|
.pizza-section,
|
||||||
|
.no-votes {
|
||||||
|
border: 1px solid var(--dm-line);
|
||||||
|
border-radius: var(--luncher-radius-lg);
|
||||||
|
box-shadow: var(--luncher-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tabulka voleb i vnořená tabulka strávníků na pergamenu karty (ne bílá / modrošedá z Bootstrapu)
|
||||||
|
.choices-table,
|
||||||
|
.choices-table .nested-table {
|
||||||
|
--bs-table-bg: var(--luncher-bg-card);
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices-table {
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sloupec s podnikem: hřbet kuchařky
|
||||||
|
.choices-table > tbody > tr > td:first-child {
|
||||||
|
background: #f1dfbb;
|
||||||
|
color: var(--dm-leather);
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
border-right: 3px double var(--dm-leather);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
|
||||||
|
background: #2e2218;
|
||||||
|
color: #e8b27a;
|
||||||
|
border-right-color: #8a5a33;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bootstrap karty (skupinové objednávky apod.) a seznamy
|
||||||
|
.card {
|
||||||
|
border: 1px solid var(--dm-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: 2px solid var(--dm-leather);
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .card > .card-header {
|
||||||
|
border-bottom-color: #8a5a33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group {
|
||||||
|
border-radius: var(--luncher-radius);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--dm-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(--dm-line);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--dm-brass);
|
||||||
|
box-shadow: 0 0 0 3px rgb(184 134 43 / 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- Tlačítka: kovaná měď, při najetí se rozžhaví ----------
|
||||||
|
.btn {
|
||||||
|
border-radius: var(--luncher-radius-sm);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(180deg, #b8541f, #8a3810);
|
||||||
|
border: 1px solid #6e2b0a;
|
||||||
|
color: #fff6e6;
|
||||||
|
box-shadow: inset 0 1px 0 rgb(255 220 170 / 0.35);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(180deg, #cc6326, #9c4013);
|
||||||
|
border-color: #6e2b0a;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: inset 0 1px 0 rgb(255 220 170 / 0.35), 0 0 14px rgb(232 135 63 / 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(1px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #dccaa6;
|
||||||
|
border-color: #cbb68d;
|
||||||
|
color: #94795a;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .btn-primary:disabled {
|
||||||
|
background: #2c241c;
|
||||||
|
border-color: #3d3226;
|
||||||
|
color: #8f7d63;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-primary {
|
||||||
|
background: var(--luncher-bg-card);
|
||||||
|
border: 1px solid var(--dm-rust);
|
||||||
|
color: var(--luncher-primary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--luncher-primary-light);
|
||||||
|
border-color: var(--dm-rust);
|
||||||
|
color: var(--luncher-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .btn-outline-primary {
|
||||||
|
border-color: #e8873f;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #e8873f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sekundární — mechově zelená jako Senshiho bylinky
|
||||||
|
.btn-secondary {
|
||||||
|
background: var(--dm-moss);
|
||||||
|
border: 1px solid #45602a;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #4d6930;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 0 12px rgb(92 122 58 / 0.45);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: var(--dm-dragon);
|
||||||
|
border: 1px solid #8a1c15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon:hover {
|
||||||
|
background: var(--luncher-primary-light);
|
||||||
|
color: var(--luncher-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- Modaly: stránka kuchařky v kožené vazbě ----------
|
||||||
|
.modal-content {
|
||||||
|
border: 2px solid var(--dm-leather);
|
||||||
|
border-radius: var(--luncher-radius-xl);
|
||||||
|
background:
|
||||||
|
#{$dm-paper},
|
||||||
|
var(--luncher-bg-card);
|
||||||
|
box-shadow: 0 16px 40px rgb(59 42 26 / 0.35);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background:
|
||||||
|
$dm-stitch-light left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #7a4b2b, var(--dm-leather-deep));
|
||||||
|
border-bottom: 3px solid var(--dm-brass);
|
||||||
|
padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 6px);
|
||||||
|
|
||||||
|
.modal-title, .modal-title h2 {
|
||||||
|
color: #fbefd5;
|
||||||
|
font-family: var(--dm-display);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close {
|
||||||
|
filter: invert(1) sepia(0.3) brightness(1.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] {
|
||||||
|
.modal-content {
|
||||||
|
border-color: #5a3a22;
|
||||||
|
background: var(--luncher-bg-card);
|
||||||
|
box-shadow: 0 0 30px rgb(232 135 63 / 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(90deg, rgb(232 135 63 / 0.45) 0 8px, transparent 8px 14px) left bottom 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, #3e2716, #2a1a0f);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Patička jako spodní kožená deska kuchařky se stehy
|
||||||
|
.footer {
|
||||||
|
background:
|
||||||
|
$dm-stitch-light left top 6px / 100% 2px no-repeat,
|
||||||
|
linear-gradient(180deg, var(--dm-leather-deep), var(--luncher-navbar-bg));
|
||||||
|
border-top: 3px solid var(--dm-brass);
|
||||||
|
padding-top: 22px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #e9c46a;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fbefd5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-theme="dark"] .footer {
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(90deg, rgb(232 135 63 / 0.45) 0 8px, transparent 8px 14px) left top 6px / 100% 2px no-repeat,
|
||||||
|
var(--luncher-navbar-bg);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #e8873f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Plamínek se mihotá
|
||||||
|
@keyframes dm-flame {
|
||||||
|
0% { transform: scale(1, 1) rotate(-4deg); filter: brightness(1); }
|
||||||
|
50% { transform: scale(0.92, 1.1) rotate(3deg); filter: brightness(1.15); }
|
||||||
|
100% { transform: scale(1.05, 0.95) rotate(-2deg); filter: brightness(0.95); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pára stoupá a rozplývá se
|
||||||
|
@keyframes dm-steam {
|
||||||
|
0% { transform: translateY(6px) scaleY(0.7); opacity: 0; }
|
||||||
|
30% { opacity: 0.9; }
|
||||||
|
100% { transform: translateY(-10px) scaleY(1.1); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
#{$dm} .day-navigator .title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
padding: 5px 18px 6px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
right: -32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
right: -28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
#{$dm} .navbar .navbar-brand::after,
|
||||||
|
#{$dm} .day-navigator .title::after {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in new issue
Block a user