// ============================================ // STYL "UMAMUSUME" (volitelný, výchozí je jednoduchý styl) // Inspirováno Umamusume: Pretty Derby — trávník dostihové dráhy, růžové // a nebesky modré akcenty, zlaté lemy, zaoblené tučné písmo a „tlačítka z her". // Aktivní, pokud má atribut data-luncher-theme="umamusume". // Jednoduchý styl (data-luncher-theme="simple") zůstává beze změny v App.scss. // ============================================ $uma: 'html[data-luncher-theme="umamusume"]'; #{$uma} { --uma-font: 'M PLUS Rounded 1c', 'Nunito', 'Inter', -apple-system, sans-serif; --uma-turf: #5cc23d; --uma-turf-deep: #2e9a3a; --uma-turf-shadow: #1f7a2c; --uma-pink: #ff6fa3; --uma-pink-deep: #e84d86; --uma-sky: #43b8f0; --uma-gold: #ffc531; --uma-card-border: #c6ebb2; --uma-stripe: rgb(92 194 61 / 0.06); --luncher-primary: var(--uma-turf-deep); --luncher-primary-hover: #268a31; --luncher-primary-light: #e7f8dc; --luncher-bg: #f4fbef; --luncher-bg-card: #ffffff; --luncher-bg-hover: #eef8e7; --luncher-text: #1d3322; --luncher-text-secondary: #4a6450; --luncher-text-muted: #8aa290; --luncher-border: #d7ecca; --luncher-border-light: #e6f4dc; --luncher-navbar-bg: var(--uma-turf-deep); --luncher-navbar-text: #ffffff; --luncher-action-icon: var(--uma-turf-deep); --luncher-buyer-icon: #f08c00; --luncher-success: var(--uma-turf-deep); --luncher-warning: #f08c00; --luncher-danger: #e8436a; --luncher-radius-sm: 10px; --luncher-radius: 14px; --luncher-radius-lg: 18px; --luncher-radius-xl: 22px; --luncher-shadow: 0 4px 0 rgb(46 154 58 / 0.12), 0 8px 18px -8px rgb(29 51 34 / 0.18); --luncher-shadow-lg: 0 6px 0 rgb(46 154 58 / 0.14), 0 14px 28px -10px rgb(29 51 34 / 0.25); &[data-bs-theme="dark"] { // Noční dostih pod reflektory --uma-turf: #58c93a; --uma-turf-deep: #3cae3f; --uma-turf-shadow: #1c5e25; --uma-card-border: #2c3a66; --uma-stripe: rgb(255 255 255 / 0.025); --luncher-primary: #6fdc4a; --luncher-primary-hover: #8ae86a; --luncher-primary-light: #1d3a24; --luncher-bg: #10172b; --luncher-bg-card: #19223d; --luncher-bg-hover: #222d4f; --luncher-text: #f3f6ff; --luncher-text-secondary: #b8c2e0; --luncher-text-muted: #7d89ad; --luncher-border: #2c3a66; --luncher-border-light: #232e52; --luncher-navbar-bg: #1b6b2c; --luncher-action-icon: #6fdc4a; --luncher-buyer-icon: var(--uma-gold); --luncher-success: #6fdc4a; --luncher-warning: var(--uma-gold); --luncher-danger: #ff6f93; --luncher-shadow: 0 4px 0 rgb(0 0 0 / 0.35), 0 10px 20px -8px rgb(0 0 0 / 0.5); --luncher-shadow-lg: 0 6px 0 rgb(0 0 0 / 0.4), 0 16px 30px -10px rgb(0 0 0 / 0.6); } body { font-family: var(--uma-font); background-color: var(--luncher-bg); background-image: repeating-linear-gradient(135deg, var(--uma-stripe) 0 18px, transparent 18px 36px); background-attachment: fixed; } .app-container { background: transparent; } h1, h2, h3, h4, .navbar-brand, .btn { font-family: var(--uma-font); } // ---------- Navbar: zelený pruh se šikmými proužky a zlatým lemem ---------- .navbar { background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.10) 0 14px, transparent 14px 28px), linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf)) !important; border-bottom: 4px solid var(--uma-gold); box-shadow: 0 3px 0 rgb(0 0 0 / 0.08); .navbar-brand { font-weight: 800; letter-spacing: 0.5px; text-shadow: 0 2px 0 var(--uma-turf-shadow), 0 0 12px rgb(255 255 255 / 0.25); &::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%; background: var(--uma-pink); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9); vertical-align: super; } } .dropdown-menu { border: 2px solid var(--uma-card-border); } } // ---------- Titulek dne: šikmá stuha jako název dostihu ---------- .day-navigator .title { position: relative; display: inline-block; padding: 6px 28px; font-weight: 800; font-size: 1.7rem; color: #fff !important; background: linear-gradient(90deg, var(--uma-pink-deep), var(--uma-pink)); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); text-shadow: 0 2px 0 rgb(0 0 0 / 0.15); &.text-muted { background: linear-gradient(90deg, #8aa290, #a9bfae); } } // ---------- Karty podniků ---------- .restaurant-card { border: 3px solid var(--uma-card-border); border-radius: var(--luncher-radius-lg); &:hover { transform: translateY(-3px); border-color: var(--uma-turf); } .restaurant-header { position: relative; background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.12) 0 10px, transparent 10px 20px), linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf)); border-bottom: 3px solid var(--uma-gold); &:hover { background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.12) 0 10px, transparent 10px 20px), linear-gradient(90deg, var(--uma-pink-deep), var(--uma-pink)); } h3 { font-weight: 800; text-shadow: 0 2px 0 rgb(0 0 0 / 0.18); } small { color: rgb(255 255 255 / 0.85); } } } .food-table tbody tr:hover > td { background: #fff0f6; } &[data-bs-theme="dark"] .food-table tbody tr:hover > td { background: #2a2344; } .food-price { color: var(--uma-pink-deep); font-weight: 800; } &[data-bs-theme="dark"] .food-price { color: var(--uma-pink); } // ---------- Panely a tabulka voleb ---------- .choice-section, .choices-table, .pizza-section, .no-votes { border: 3px solid var(--uma-card-border); border-radius: var(--luncher-radius-lg); box-shadow: var(--luncher-shadow); } // s border-collapse: collapse ignoruje border-radius — kulaté rohy jen se „separate" .choices-table { border-collapse: separate; border-spacing: 0; } .choices-table > tbody > tr > td:first-child { background: linear-gradient(90deg, #ffe3ee, #fff3f8); color: var(--uma-pink-deep); font-weight: 800; border-right: 3px solid var(--uma-card-border); } &[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child { background: linear-gradient(90deg, #3b2446, #2a2140); color: var(--uma-pink); } // Bootstrap karty (skupinové objednávky apod.) a seznamy — stejné zaoblení a lem jako ostatní panely .card { border: 3px solid var(--uma-card-border); 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: 3px solid var(--uma-card-border); &:first-child { border-radius: calc(var(--luncher-radius-lg) - 3px) calc(var(--luncher-radius-lg) - 3px) 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(--uma-card-border); > .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: 999px; border-width: 2px; } // ---------- Tlačítka „ze hry": pilulka s vystouplým spodním okrajem ---------- .btn { border-radius: 999px; font-weight: 800; letter-spacing: 0.2px; transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.2s ease; &:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--uma-btn-shadow, transparent) !important; } } .btn-primary { --uma-btn-shadow: var(--uma-turf-shadow); background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep)); box-shadow: 0 4px 0 var(--uma-turf-shadow); text-shadow: 0 1px 0 rgb(0 0 0 / 0.2); &:hover { background: linear-gradient(180deg, #8be26b, #35a940); } &:disabled { background: #b9cbbd; box-shadow: 0 4px 0 #97aa9b; } } .btn-outline-primary { --uma-btn-shadow: var(--uma-card-border); background: var(--luncher-bg-card); border: 2px solid var(--uma-turf); color: var(--luncher-primary); box-shadow: 0 4px 0 var(--uma-card-border); &:hover { background: var(--luncher-primary-light); color: var(--luncher-primary); } } .btn-secondary { --uma-btn-shadow: #c9d3cb; background: var(--luncher-bg-card); border: 2px solid var(--luncher-border); box-shadow: 0 4px 0 var(--luncher-border); } .btn-danger { --uma-btn-shadow: #b3264b; background: linear-gradient(180deg, #ff7f9d, var(--luncher-danger)); box-shadow: 0 4px 0 #b3264b; } .action-icon:hover { background: #ffe3ee; color: var(--uma-pink-deep); } &[data-bs-theme="dark"] .action-icon:hover { background: #3b2446; color: var(--uma-pink); } // ---------- Modaly ---------- .modal-content { border: 3px solid var(--uma-card-border); border-radius: var(--luncher-radius-xl); overflow: hidden; } .modal-header { background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.12) 0 12px, transparent 12px 24px), linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf)); border-bottom: 3px solid var(--uma-gold); .modal-title, .modal-title h2 { color: #fff; font-weight: 800; text-shadow: 0 2px 0 rgb(0 0 0 / 0.18); } .btn-close { filter: invert(1) grayscale(1) brightness(2); } } .footer { border-top: 4px solid var(--uma-gold); } }