batmanisko
e281615cc3
CI / Generate TypeScript types (push) Successful in 11s
CI / Server unit tests (push) Successful in 25s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 39s
CI / Playwright E2E tests (push) Successful in 1m52s
CI / Build and push Docker image (push) Successful in 51s
CI / Notify (push) Successful in 2s
372 lines
10 KiB
SCSS
372 lines
10 KiB
SCSS
// ============================================
|
|
// 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á <html> 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);
|
|
}
|
|
|
|
// <table> 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);
|
|
}
|
|
}
|