feat: přidání Bocchi the Rock! theme
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
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
This commit is contained in:
10 files changed
+871
-18
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&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&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'];
|
||||
var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi'];
|
||||
document.documentElement.setAttribute('data-luncher-theme', styles.indexOf(style) >= 0 ? style : 'simple');
|
||||
} catch (e) {
|
||||
// Fallback pokud localStorage není dostupný
|
||||
|
||||
@@ -14,6 +14,7 @@ import './themes/umamusume.scss';
|
||||
import './themes/mlp.scss';
|
||||
import './themes/hellgirl.scss';
|
||||
import './themes/kon.scss';
|
||||
import './themes/bocchi.scss';
|
||||
import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
|
||||
import { useSettings } from './context/settings';
|
||||
import Footer from './components/Footer';
|
||||
|
||||
@@ -51,6 +51,23 @@
|
||||
box-shadow: 0 0 0 2px #d43f62, 0 2px 0 3px #27315f;
|
||||
}
|
||||
|
||||
// Styl Bocchi the Rock!: emoji na žluté samolepce s černou linkou a růžovým stínem
|
||||
.eater-badge-bocchi {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
border-radius: 6px;
|
||||
border-color: #1d1a22;
|
||||
background: #ffe066;
|
||||
box-shadow: 2px 2px 0 #e0457b;
|
||||
transform: rotate(-4deg);
|
||||
|
||||
&:hover {
|
||||
transform: rotate(0deg) scale(2);
|
||||
}
|
||||
}
|
||||
|
||||
// Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
|
||||
.user-info:has(.eater-badge) {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -31,11 +31,18 @@ const KON_LEVELS = [
|
||||
{ minItems: 2, emoji: '☕', title: 'Úroveň Tea Time — k obědu ještě čaj a dortík' },
|
||||
];
|
||||
|
||||
/** Úrovně ve stylu Bocchi the Rock! — emoji na samolepce jako z flyeru live house. Seřazeno od nejvyšší úrovně. */
|
||||
const BOCCHI_LEVELS = [
|
||||
{ minItems: 3, emoji: '🌿', title: 'Úroveň Ryo — když dojdou peníze, sní i trávu u cesty' },
|
||||
{ minItems: 2, emoji: '🥭', title: 'Úroveň Bocchi — dvojitý oběd v klidu v krabici od manga' },
|
||||
];
|
||||
|
||||
/** Úrovně podle stylu pro odznaky s emoji. */
|
||||
const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
|
||||
mlp: MLP_LEVELS,
|
||||
hellgirl: HG_LEVELS,
|
||||
kon: KON_LEVELS,
|
||||
bocchi: BOCCHI_LEVELS,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
@@ -43,7 +50,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 a K-ON!. */
|
||||
/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony, Hell Girl, K-ON! a Bocchi the Rock!. */
|
||||
export default function EaterBadge({ items }: Readonly<Props>) {
|
||||
const styleTheme = useSettings()?.styleTheme;
|
||||
const isUma = styleTheme === 'umamusume';
|
||||
|
||||
@@ -400,3 +400,76 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Konfety ve stylu Bocchi the Rock!
|
||||
// ============================================
|
||||
.confetti-bocchi {
|
||||
filter: drop-shadow(3px 3px 0 rgb(29 26 34 / 0.85));
|
||||
}
|
||||
|
||||
// Samolepky z flyeru live house — černá linka a tvrdý stín
|
||||
.confetti-bocchi-badge {
|
||||
padding: 4px 14px;
|
||||
border-radius: 6px;
|
||||
border: 3px solid #1d1a22;
|
||||
color: #fff;
|
||||
font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
|
||||
font-size: 1.05rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Nápis „Kessoku Band" — žlutá samolepka s růžovým stínem, při dopadu se zachvěje jako Bocchi
|
||||
.confetti-bocchi-banner {
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 12px 40px;
|
||||
font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
|
||||
font-size: clamp(1.8rem, 7vw, 4rem);
|
||||
white-space: nowrap;
|
||||
color: #1d1a22;
|
||||
background: #ffcf33;
|
||||
border: 5px solid #1d1a22;
|
||||
border-radius: 10px;
|
||||
box-shadow: 10px 10px 0 #e0457b, 18px 18px 0 #1d1a22;
|
||||
animation: bocchi-banner 2.4s ease both;
|
||||
}
|
||||
|
||||
@keyframes bocchi-banner {
|
||||
0% { transform: translate(-50%, -50%) scale(2.2) rotate(-8deg); opacity: 0; }
|
||||
14% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
|
||||
17% { transform: translate(calc(-50% - 6px), -50%) rotate(-3deg); }
|
||||
20% { transform: translate(calc(-50% + 6px), -50%) rotate(-3deg); }
|
||||
23% { transform: translate(calc(-50% - 3px), -50%) rotate(-3deg); }
|
||||
26%, 80% { transform: translate(-50%, -50%) rotate(-3deg); opacity: 1; }
|
||||
100% { transform: translate(-50%, 60%) rotate(4deg); opacity: 0; }
|
||||
}
|
||||
|
||||
// Postava s hláškou — hranatý odznak a bublina jako z mangy s tvrdým stínem
|
||||
.confetti-bocchi-voice {
|
||||
.confetti-mlp-avatar {
|
||||
border-radius: 12px;
|
||||
border: 3px solid #1d1a22;
|
||||
background: #ffcf33;
|
||||
box-shadow: 5px 5px 0 var(--mlp-speaker, #e0457b);
|
||||
}
|
||||
|
||||
.confetti-mlp-bubble {
|
||||
background: #fff;
|
||||
color: #1d1a22;
|
||||
border: 3px solid #1d1a22;
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px 0 var(--mlp-speaker, #e0457b);
|
||||
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
||||
|
||||
p {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-right-color: #1d1a22;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -63,6 +63,30 @@ const KON_SPEAKERS = [
|
||||
{ name: 'Sawako Yamanaka', emoji: '👗', color: '#27315f', quote: 'Oběd? Výborně. Mezitím vám ušiju nové kostýmy!' },
|
||||
{ name: 'Ton-chan', emoji: '🐢', color: '#3c9a6b', quote: '(spokojeně mává ploutvičkou)' },
|
||||
];
|
||||
const BOCCHI_EMOJI = ['🎸', '🥁', '🎤', '📦', '🥭', '🟨', '🟦', '✨', '🌿', '🫠', '⭐', '🔊'];
|
||||
// Hlášky z Bocchi the Rock! (Kessoku Band, Kita-aura, krabice od manga, guitarhero, live house STARRY...)
|
||||
const BOCCHI_BADGES = ['結束バンド', 'Kessoku Band!', 'Kitaaan ✨', 'guitarhero', 'A-ano…', 'Live at STARRY', 'Bocchi-chan!', 'ぼっち・ざ・ろっく!', 'Mango box', 'Rock!'];
|
||||
const BOCCHI_BADGE_COLORS = ['#e0457b', '#e8b400', '#3a63c9', '#d93a30', '#1d1a22'];
|
||||
/** Kessoku Band a jejich okolí s „hláškou" po finálním výsledku. */
|
||||
const BOCCHI_SPEAKERS = [
|
||||
{ name: 'Hitori Gotoh', emoji: '🎸', color: '#e0457b', quote: 'A-ano… t-tohle by šlo… teda, pokud to nikomu nevadí…' },
|
||||
{ name: 'Nijika Ijichi', emoji: '🥁', color: '#e8b400', quote: 'Tak jo, kapelo, jdeme jíst! Bocchi, vylez z té krabice!' },
|
||||
{ name: 'Ryo Yamada', emoji: '🌿', color: '#3a63c9', quote: 'Dobrá volba. Mimochodem… nepůjčíš mi na oběd?' },
|
||||
{ name: 'Ikuyo Kita', emoji: '✨', color: '#d93a30', quote: 'Kitaaan! Tohle se mi děsně líbí, vyfotím to na Instagram!' },
|
||||
{ name: 'Seika Ijichi', emoji: '🎛️', color: '#7a4fc0', quote: 'Najezte se pořádně. Večer v STARRY neodfláknete zkoušku.' },
|
||||
{ name: 'Futari Gotoh', emoji: '🐕', color: '#f08fb4', quote: 'Ségra zase obědvá ve skříni! Jimihen, pojď se podívat!' },
|
||||
];
|
||||
/** 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[],
|
||||
speakers: { name: string, emoji: string, color: string, quote: string }[],
|
||||
banner: string,
|
||||
}>> = {
|
||||
mlp: { prefix: 'confetti-mlp', badges: MLP_BADGES, colors: MLP_BADGE_COLORS, emoji: MLP_EMOJI, speakers: MLP_SPEAKERS, banner: '🌈 Sonic Rainboom! 🌈' },
|
||||
hellgirl: { prefix: 'confetti-hg', badges: HG_BADGES, colors: HG_BADGE_COLORS, emoji: HG_EMOJI, speakers: HG_SPEAKERS, banner: '🏮 地獄流し 🏮' },
|
||||
kon: { prefix: 'confetti-kon', badges: KON_BADGES, colors: KON_BADGE_COLORS, emoji: KON_EMOJI, speakers: KON_SPEAKERS, banner: '🎸 放課後ティータイム 🍰' },
|
||||
bocchi: { prefix: 'confetti-bocchi', badges: BOCCHI_BADGES, colors: BOCCHI_BADGE_COLORS, emoji: BOCCHI_EMOJI, speakers: BOCCHI_SPEAKERS, banner: '🎸 結束バンド 🎸' },
|
||||
};
|
||||
const DURATION_MS = 6400;
|
||||
|
||||
const rand = (min: number, max: number) => min + Math.random() * (max - min);
|
||||
@@ -149,12 +173,9 @@ function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece
|
||||
}));
|
||||
}
|
||||
const count = big ? 50 : 24;
|
||||
if (theme === 'mlp' || theme === 'hellgirl' || theme === 'kon') {
|
||||
const [prefix, badges, colors, emoji] = theme === 'mlp'
|
||||
? ['confetti-mlp', MLP_BADGES, MLP_BADGE_COLORS, MLP_EMOJI]
|
||||
: theme === 'hellgirl'
|
||||
? ['confetti-hg', HG_BADGES, HG_BADGE_COLORS, HG_EMOJI]
|
||||
: ['confetti-kon', KON_BADGES, KON_BADGE_COLORS, KON_EMOJI];
|
||||
const emojiConfetti = EMOJI_CONFETTI[theme];
|
||||
if (emojiConfetti) {
|
||||
const { prefix, badges, colors, emoji } = emojiConfetti;
|
||||
return Array.from({ length: count }, (_, id) => {
|
||||
const base: React.CSSProperties = {
|
||||
...launchStyle(pick(LAUNCHES)),
|
||||
@@ -218,11 +239,10 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [burstKey]);
|
||||
|
||||
// MLP: hlášku pronese náhodná postava z Mane 6, Hell Girl: Ai Enma či některý z jejích služebníků,
|
||||
// K-ON!: některá z členek Houkago Tea Time
|
||||
// Ostatní tematické styly: hlášku pronese náhodná postava (Mane 6, Ai Enma, Houkago Tea Time, Kessoku Band...)
|
||||
const emojiConfetti = EMOJI_CONFETTI[theme];
|
||||
const emojiSpeaker = useMemo(
|
||||
() => big ? (theme === 'mlp' ? pick(MLP_SPEAKERS) : theme === 'hellgirl' ? pick(HG_SPEAKERS)
|
||||
: theme === 'kon' ? pick(KON_SPEAKERS) : undefined) : undefined,
|
||||
() => big && emojiConfetti ? pick(emojiConfetti.speakers) : undefined,
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[burstKey],
|
||||
);
|
||||
@@ -232,9 +252,7 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
|
||||
return createPortal(
|
||||
<div className={`wheel-confetti wheel-confetti-${theme}`} key={burstKey} aria-hidden>
|
||||
{theme === 'umamusume' && big && <div className="confetti-uma-banner">🏆 1着 🏆</div>}
|
||||
{theme === 'mlp' && big && <div className="confetti-mlp-banner">🌈 Sonic Rainboom! 🌈</div>}
|
||||
{theme === 'hellgirl' && big && <div className="confetti-hg-banner">🏮 地獄流し 🏮</div>}
|
||||
{theme === 'kon' && big && <div className="confetti-kon-banner">🎸 放課後ティータイム 🍰</div>}
|
||||
{emojiConfetti && big && <div className={`${emojiConfetti.prefix}-banner`}>{emojiConfetti.banner}</div>}
|
||||
{pieces.map(p => <span key={p.id} className={p.className} style={p.style}>{p.content}</span>)}
|
||||
{speaker && (
|
||||
<div className="confetti-uma-voice">
|
||||
|
||||
@@ -1268,6 +1268,274 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 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;
|
||||
|
||||
@@ -12,7 +12,7 @@ const SHOW_BUTTERFLIES_KEY = 'show_butterflies';
|
||||
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';
|
||||
export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi';
|
||||
|
||||
export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
|
||||
{ value: 'simple', label: 'Jednoduchý' },
|
||||
@@ -20,6 +20,7 @@ export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
|
||||
{ value: 'mlp', label: 'My Little Pony' },
|
||||
{ value: 'hellgirl', label: 'Hell Girl' },
|
||||
{ value: 'kon', label: 'K-ON!' },
|
||||
{ value: 'bocchi', label: 'Bocchi the Rock!' },
|
||||
];
|
||||
|
||||
export type SettingsContextProps = {
|
||||
@@ -235,7 +236,7 @@ function useProvideSettings(): SettingsContextProps {
|
||||
}, [showButterflies]);
|
||||
|
||||
// Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
|
||||
// Tematické styly (Umamusume, My Little Pony, Hell Girl, K-ON!) 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!) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
|
||||
useEffect(() => {
|
||||
localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
|
||||
if (styleTheme === 'simple') {
|
||||
|
||||
@@ -13,6 +13,8 @@ const ICONS: Record<StyleTheme, Record<GameId, string>> = {
|
||||
hellgirl: { reaction: '🔥', snake: '🪢', tetris: '🏮', pong: '🪆', drawing: '📜' },
|
||||
// Klub lehké hudby: bicí Ritsu, želva Ton-chan, dortíky k čaji, kytara Gitah a notový zápis
|
||||
kon: { reaction: '🥁', snake: '🐢', tetris: '🍰', pong: '🎸', drawing: '🎼' },
|
||||
// Kessoku Band: mikrofon Kity, kabel od kytary, krabice od manga, bicí Nijiky a sešit s texty Bocchi
|
||||
bocchi: { reaction: '🎤', snake: '🔌', tetris: '📦', pong: '🥁', drawing: '📝' },
|
||||
};
|
||||
|
||||
/** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
|
||||
|
||||
@@ -0,0 +1,466 @@
|
||||
// ============================================
|
||||
// STYL "BOCCHI THE ROCK!" (volitelný, výchozí je jednoduchý styl)
|
||||
// Inspirováno anime Bocchi the Rock! (ぼっち・ざ・ろっく!) a kapelou Kessoku Band (結束バンド).
|
||||
// Růžová tepláková bunda Bocchi, žlutá a modrá kostička z jejích vlasů,
|
||||
// černý Les Paul, flyery z live house STARRY — tlusté černé linky, tvrdé stíny,
|
||||
// rastr jako z kopírky a samolepky. Občas se nápis „zasekne" Bocchiinou úzkostí.
|
||||
// Tmavý režim = koncert v live house STARRY pod barevnými světly.
|
||||
// Aktivní, pokud má <html> atribut data-luncher-theme="bocchi".
|
||||
// ============================================
|
||||
|
||||
$bocchi: 'html[data-luncher-theme="bocchi"]';
|
||||
|
||||
// Kessoku Band: Bocchi (růžová), Nijika (žlutá), Ryo (modrá), Kita (červená)
|
||||
$bocchi-band: linear-gradient(90deg, #e0457b 0 25%, #ffcf33 25% 50%, #3a63c9 50% 75%, #d93a30 75% 100%);
|
||||
|
||||
#{$bocchi} {
|
||||
--bocchi-font: 'M PLUS Rounded 1c', 'Nunito', -apple-system, sans-serif;
|
||||
--bocchi-display: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
|
||||
--bocchi-pink: #cc3570; // tepláková bunda Bocchi
|
||||
--bocchi-pink-deep: #a8245a;
|
||||
--bocchi-pink-light: #ffd6e5;
|
||||
--bocchi-nijika: #ffcf33; // kostička ve vlasech / Nijika
|
||||
--bocchi-ryo: #3a63c9; // kostička ve vlasech / Ryo
|
||||
--bocchi-kita: #d93a30;
|
||||
--bocchi-ink: #1d1a22; // černý Les Paul, linky flyeru
|
||||
--bocchi-line: var(--bocchi-ink);
|
||||
--bocchi-hard-shadow: rgb(29 26 34 / 0.9);
|
||||
--bocchi-halftone: rgb(224 69 123 / 0.13);
|
||||
|
||||
--luncher-primary: var(--bocchi-pink);
|
||||
--luncher-primary-hover: var(--bocchi-pink-deep);
|
||||
--luncher-primary-light: #ffe4ee;
|
||||
--luncher-bg: #fff6f9;
|
||||
--luncher-bg-card: #ffffff;
|
||||
--luncher-bg-hover: #fff0f5;
|
||||
--luncher-text: var(--bocchi-ink);
|
||||
--luncher-text-secondary: #4a4252;
|
||||
--luncher-text-muted: #8f8597;
|
||||
--luncher-border: #e9d9e1;
|
||||
--luncher-border-light: #f5e9ef;
|
||||
--luncher-navbar-bg: var(--bocchi-ink);
|
||||
--luncher-navbar-text: #ffffff;
|
||||
--luncher-action-icon: var(--bocchi-pink);
|
||||
--luncher-buyer-icon: var(--bocchi-ryo);
|
||||
--luncher-success: #2e8a4f;
|
||||
--luncher-warning: #d08f00;
|
||||
--luncher-danger: var(--bocchi-kita);
|
||||
--luncher-radius-sm: 6px;
|
||||
--luncher-radius: 8px;
|
||||
--luncher-radius-lg: 10px;
|
||||
--luncher-radius-xl: 12px;
|
||||
--luncher-shadow: 4px 4px 0 var(--bocchi-hard-shadow);
|
||||
--luncher-shadow-lg: 6px 6px 0 var(--bocchi-pink);
|
||||
|
||||
&[data-bs-theme="dark"] {
|
||||
// Live house STARRY — tma, kouř a barevná světla nad pódiem
|
||||
--bocchi-pink: #ff6fa0;
|
||||
--bocchi-pink-deep: #e0457b;
|
||||
--bocchi-pink-light: #4a1f33;
|
||||
--bocchi-ryo: #7d9cff;
|
||||
--bocchi-kita: #ff6a5c;
|
||||
--bocchi-line: #5a4d66;
|
||||
--bocchi-hard-shadow: #8c2350;
|
||||
--bocchi-halftone: rgb(255 111 160 / 0.10);
|
||||
|
||||
--luncher-primary: #ff7aa8;
|
||||
--luncher-primary-hover: #ff9cbf;
|
||||
--luncher-primary-light: #3a1a2b;
|
||||
--luncher-bg: #121016;
|
||||
--luncher-bg-card: #1d1a24;
|
||||
--luncher-bg-hover: #282231;
|
||||
--luncher-text: #f5eff8;
|
||||
--luncher-text-secondary: #c9bfd2;
|
||||
--luncher-text-muted: #8f8499;
|
||||
--luncher-border: #3a3246;
|
||||
--luncher-border-light: #2a2433;
|
||||
--luncher-navbar-bg: #0a090c;
|
||||
--luncher-action-icon: #ff7aa8;
|
||||
--luncher-buyer-icon: #ffcf33;
|
||||
--luncher-success: #6fd59a;
|
||||
--luncher-warning: #ffcf33;
|
||||
--luncher-danger: #ff6a5c;
|
||||
--luncher-shadow: 4px 4px 0 var(--bocchi-hard-shadow);
|
||||
--luncher-shadow-lg: 6px 6px 0 var(--bocchi-ryo);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--bocchi-font);
|
||||
background-color: var(--luncher-bg);
|
||||
// Rastr jako z kopírovaného flyeru, nahoře růžový nádech
|
||||
background-image:
|
||||
radial-gradient(circle, var(--bocchi-halftone) 0 1.4px, transparent 1.9px),
|
||||
linear-gradient(180deg, #ffe0ec 0, var(--luncher-bg) 360px);
|
||||
background-size: 12px 12px, 100% 100%;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] body {
|
||||
// Růžové a modré světlo z rampy nad pódiem
|
||||
background-image:
|
||||
radial-gradient(circle, var(--bocchi-halftone) 0 1.4px, transparent 1.9px),
|
||||
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%),
|
||||
linear-gradient(180deg, #1c1622 0, var(--luncher-bg) 420px);
|
||||
background-size: 12px 12px, 100% 100%, 100% 100%, 100% 100%;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, .navbar-brand {
|
||||
font-family: var(--bocchi-display);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--bocchi-font);
|
||||
}
|
||||
|
||||
// ---------- Navbar: černá jako Les Paul, pod ním pruh Kessoku Band ----------
|
||||
.navbar {
|
||||
background:
|
||||
#{$bocchi-band} bottom / 100% 5px no-repeat,
|
||||
var(--luncher-navbar-bg) !important;
|
||||
padding-bottom: calc(var(--bs-navbar-padding-y, 0.5rem) + 5px);
|
||||
|
||||
.navbar-brand {
|
||||
letter-spacing: 0.5px;
|
||||
animation: bocchi-glitch 7s steps(1, end) infinite;
|
||||
|
||||
// Žlutá a modrá kostička z vlasů Bocchi
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0.42em;
|
||||
height: 0.42em;
|
||||
margin-left: 8px;
|
||||
margin-right: 0.6em;
|
||||
vertical-align: super;
|
||||
background: var(--bocchi-nijika);
|
||||
box-shadow: 0.55em 0.18em 0 var(--bocchi-ryo);
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: 2px solid var(--bocchi-line);
|
||||
border-radius: var(--luncher-radius);
|
||||
box-shadow: var(--luncher-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Titulek dne: žlutá samolepka z flyeru ----------
|
||||
.day-navigator .title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 6px 24px 8px;
|
||||
font-family: var(--bocchi-display);
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
color: var(--bocchi-ink) !important;
|
||||
background: var(--bocchi-nijika);
|
||||
border: 3px solid var(--bocchi-ink);
|
||||
border-radius: var(--luncher-radius-sm);
|
||||
box-shadow: 5px 5px 0 var(--bocchi-pink);
|
||||
transform: rotate(1.2deg);
|
||||
|
||||
&::before, &::after {
|
||||
content: '★';
|
||||
font-size: 0.7em;
|
||||
margin: 0 10px;
|
||||
vertical-align: middle;
|
||||
color: var(--bocchi-pink-deep);
|
||||
}
|
||||
|
||||
&.text-muted {
|
||||
background: #e6e0e8;
|
||||
color: #6b6273 !important;
|
||||
box-shadow: 5px 5px 0 #b9afbf;
|
||||
|
||||
&::before, &::after {
|
||||
color: #8f8597;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Karty podniků: flyery s tvrdým stínem ----------
|
||||
.restaurant-card {
|
||||
border: 2px solid var(--bocchi-line);
|
||||
border-radius: var(--luncher-radius-lg);
|
||||
box-shadow: var(--luncher-shadow);
|
||||
|
||||
&:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
border-color: var(--bocchi-line);
|
||||
box-shadow: var(--luncher-shadow-lg);
|
||||
}
|
||||
|
||||
.restaurant-header {
|
||||
position: relative;
|
||||
background:
|
||||
#{$bocchi-band} bottom / 100% 4px no-repeat,
|
||||
var(--bocchi-ink);
|
||||
|
||||
&:hover {
|
||||
background:
|
||||
#{$bocchi-band} bottom / 100% 4px no-repeat,
|
||||
linear-gradient(90deg, var(--bocchi-pink-deep), var(--bocchi-pink));
|
||||
}
|
||||
|
||||
h3 {
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
small {
|
||||
color: rgb(255 255 255 / 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .restaurant-card .restaurant-header:not(:hover) {
|
||||
background:
|
||||
#{$bocchi-band} bottom / 100% 4px no-repeat,
|
||||
#0a090c;
|
||||
}
|
||||
|
||||
.food-table tbody tr:hover > td {
|
||||
background: #fff0f5;
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .food-table tbody tr:hover > td {
|
||||
background: #2e2236;
|
||||
}
|
||||
|
||||
.food-price {
|
||||
color: var(--bocchi-pink);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
// ---------- Panely a tabulka voleb ----------
|
||||
.choice-section,
|
||||
.choices-table,
|
||||
.pizza-section,
|
||||
.no-votes {
|
||||
border: 2px solid var(--bocchi-line);
|
||||
border-radius: var(--luncher-radius-lg);
|
||||
box-shadow: var(--luncher-shadow);
|
||||
}
|
||||
|
||||
// <table> s border-collapse: collapse ignoruje border-radius — kulaté rohy jen se „separate"
|
||||
.choices-table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
// Sloupec s podnikem: světle žlutý jako Nijika, oddělený černou linkou
|
||||
.choices-table > tbody > tr > td:first-child {
|
||||
background: #fff4c7;
|
||||
color: var(--bocchi-ink);
|
||||
font-weight: 800;
|
||||
border-right: 2px solid var(--bocchi-line);
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
|
||||
background: #2a2416;
|
||||
color: var(--bocchi-nijika);
|
||||
}
|
||||
|
||||
// Bootstrap karty (skupinové objednávky apod.) a seznamy — stejné linky a stíny jako ostatní panely
|
||||
.card {
|
||||
border: 2px solid var(--bocchi-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(--bocchi-line);
|
||||
font-weight: 800;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(var(--luncher-radius-lg) - 2px) calc(var(--luncher-radius-lg) - 2px) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Průhledná tabulka — rohy pak zaobluje karta sama (i když nesmí ořezávat obsah)
|
||||
.table {
|
||||
--bs-table-bg: transparent;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Spodní linka posledního řádku by přečnívala přes zaoblené rohy
|
||||
> :last-child > tr:last-child > * {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
border-radius: var(--luncher-radius);
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--bocchi-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: 2px solid var(--bocchi-line);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--bocchi-pink);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-pink);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Tlačítka: samolepky s černou linkou, po stisku „zaklapnou" do stínu ----------
|
||||
.btn {
|
||||
border-radius: var(--luncher-radius-sm);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.2px;
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: translate(3px, 3px) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--bocchi-pink);
|
||||
border: 2px solid var(--bocchi-ink);
|
||||
color: #fff;
|
||||
box-shadow: 3px 3px 0 var(--bocchi-ink);
|
||||
|
||||
&:hover {
|
||||
background: var(--bocchi-pink-deep);
|
||||
border-color: var(--bocchi-ink);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-ink), 0 0 0 3px rgb(255 207 51 / 0.6);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #cfc6d3;
|
||||
border-color: #8f8597;
|
||||
box-shadow: 3px 3px 0 #8f8597;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-theme="dark"] .btn-primary {
|
||||
color: #1d1a22;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
background: var(--luncher-bg-card);
|
||||
border: 2px solid var(--bocchi-line);
|
||||
color: var(--luncher-primary);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-hard-shadow);
|
||||
|
||||
&:hover {
|
||||
background: var(--luncher-primary-light);
|
||||
border-color: var(--bocchi-line);
|
||||
color: var(--luncher-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--luncher-bg-card);
|
||||
border: 2px solid var(--bocchi-line);
|
||||
color: var(--luncher-text);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-hard-shadow);
|
||||
|
||||
&:hover {
|
||||
background: var(--luncher-bg-hover);
|
||||
border-color: var(--bocchi-line);
|
||||
color: var(--luncher-text);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--bocchi-kita);
|
||||
border: 2px solid var(--bocchi-ink);
|
||||
box-shadow: 3px 3px 0 var(--bocchi-ink);
|
||||
}
|
||||
|
||||
.action-icon:hover {
|
||||
background: var(--luncher-primary-light);
|
||||
color: var(--bocchi-pink);
|
||||
}
|
||||
|
||||
// ---------- Modaly ----------
|
||||
.modal-content {
|
||||
border: 3px solid var(--bocchi-line);
|
||||
border-radius: var(--luncher-radius-xl);
|
||||
box-shadow: 8px 8px 0 var(--bocchi-pink);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background:
|
||||
#{$bocchi-band} bottom / 100% 5px no-repeat,
|
||||
#0f0d12;
|
||||
border-bottom: none;
|
||||
padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 5px);
|
||||
|
||||
.modal-title, .modal-title h2 {
|
||||
color: #fff;
|
||||
font-family: var(--bocchi-display);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1) grayscale(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: none;
|
||||
background-image: #{$bocchi-band};
|
||||
background-size: 100% 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
}
|
||||
|
||||
// Bocchiina úzkost: nápis se na okamžik „rozpadne" do růžového a modrého posunu
|
||||
@keyframes bocchi-glitch {
|
||||
0%, 92%, 100% { text-shadow: none; transform: none; }
|
||||
93% { text-shadow: -3px 0 #ff6fa0, 3px 0 #7d9cff; transform: translateX(1px) skewX(-6deg); }
|
||||
94% { text-shadow: 2px 0 #ff6fa0, -2px 0 #7d9cff; transform: translateX(-2px); }
|
||||
95% { text-shadow: -1px 0 #ff6fa0, 1px 0 #7d9cff; transform: translateX(1px) skewX(4deg); }
|
||||
96% { text-shadow: none; transform: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
#{$bocchi} .day-navigator .title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#{$bocchi} .navbar .navbar-brand {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user