/* --- Modern, responsive UI with light/dark mode --- */ /* Color system uses CSS variables and prefers-color-scheme. */ /* You can also force theme by setting . */ /* ===== Brand palette tuned to screenshot (light/dark) ===== */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Containers */ .container { width: 100%; max-width: 1100px; margin: 2rem auto; padding: 0 16px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); } /* Topbar */ .topbar { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; max-width: 1100px; margin: 0 auto; padding: 0 16px; } .brand { font-weight: 700; letter-spacing: 0.2px; } /* Typography */ h1, h2, h3 { margin: 0 0 12px; line-height: 1.2; } p { margin: 0 0 12px; color: var(--muted); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Forms */ form { display: flex; flex-direction: column; gap: 10px; } .input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); outline: none; transition: box-shadow .15s ease, border-color .15s ease; } input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: var(--focus); } /* Buttons */ .btn { appearance: none; border: 0; border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 600; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 16px color-mix(in oklab, var(--primary) 30%, transparent); } .btn-primary:hover { filter: brightness(1.05); } .btn-ghost { background: var(--primary-ghost); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border)); } /* Layout helpers */ .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; gap: 12px; align-items: center; } .grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); } @media (max-width: 860px) { .grid { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 560px) { .grid { grid-template-columns: repeat(4, 1fr); } } /* Lists */ .list { display: grid; gap: 12px; } .list-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); display: flex; justify-content: space-between; align-items: center; } /* Admin two-column responsive */ .admin { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .admin { grid-template-columns: 1fr; } } /* Badges */ .badge { font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .badge-ok { color: var(--success); border-color: color-mix(in oklab, var(--success) 50%, var(--border)); } .badge-warn { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 50%, var(--border)); } /* Tables (if you add any later) */ .table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); } .table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); } .table tr:last-child td { border-bottom: 0; } /* Spacing utilities */ .mt-1{ margin-top: 4px; } .mt-2{ margin-top: 8px; } .mt-3{ margin-top: 12px; } .mt-4{ margin-top: 16px; } .mb-1{ margin-bottom: 4px; } .mb-2{ margin-bottom: 8px; } .mb-3{ margin-bottom: 12px; } .mb-4{ margin-bottom: 16px; } /* Code-like pills (amounts etc.) */ .kbd { background: var(--card); border: 1px solid var(--border); padding: 4px 8px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; } /* Footer / small text */ .muted { color: var(--muted); } /* Nice focus-visible for keyboard users */ :focus-visible { outline: none; box-shadow: var(--focus); } /* Cards with header/footer sections */ .card-header, .card-footer { padding: 14px 16px; border-bottom: 1px solid var(--border); } .card-footer { border-top: 1px solid var(--border); border-bottom: 0; } /* Alerts */ .alert { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: color-mix(in oklab, var(--danger) 6%, var(--card)); color: var(--text); } /* Buttons should not look like links */ a.btn, a.btn:link, a.btn:visited, button.btn { text-decoration: none !important; } /* Input with unit addon (e.g., seconds) */ .input-group { display:flex; align-items:stretch; width: max-content; } .input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; width: 140px; /* enough for numbers */ } .input-group .addon { display:inline-flex; align-items:center; justify-content:center; padding: 0 10px; border: 1px solid var(--border); border-left: 0; background: var(--card); color: var(--muted); border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); font-weight: 600; min-width: 32px; } .help { font-size: 12px; color: var(--muted); margin-top: 6px; } /* --- Mobile-first tweaks --- */ /* Tighter vertical rhythm on small screens */ @media (max-width: 640px) { .container { margin: 1rem auto; padding: 0 12px; } .topbar-inner { height: 56px; padding: 0 12px; gap: 8px; } h1, h2, h3 { margin-bottom: 10px; } } /* Topbar: let controls wrap on narrow widths */ .topbar-inner { flex-wrap: wrap; } /* Generic row wrapper should be allowed to wrap */ .row { flex-wrap: wrap; } /* Admin two-column → break earlier and stretch children full width */ @media (max-width: 1024px) { .admin { grid-template-columns: 1fr; } } .admin > .card { width: 100%; } /* List items: allow wrapping and space nicely on mobile */ .list-item { flex-wrap: wrap; gap: 10px; align-items: flex-start; } .list-item > .row { flex-wrap: wrap; } /* Inputs: make comfortable tap targets and avoid iOS zoom */ input, textarea, select { font-size: 16px; } /* Buttons: allow block layout on mobile when needed */ @media (max-width: 560px) { .btn { padding: 12px 14px; } .btn-block { width: 100%; } } /* Input groups: full-width on mobile, units stay attached on the right */ .input-group { width: max-content; } @media (max-width: 560px) { .input-group { width: 100%; } .input-group .input { width: 100%; } } /* Date-time input should span full width */ input[type="datetime-local"] { width: 100%; } /* Cards: soften shadow and radius on tiny screens to reduce visual bulk */ @media (max-width: 560px) { .card { border-radius: 10px; box-shadow: var(--shadow-1); } } /* Language toggle button: keep it pinned right but not overlapping content */ @media (max-width: 560px) { .lang-toggle { margin-left: auto; } } :root { /* Light (soft grey UI) */ --bg: #e6e6e6; /* page background */ --card: #f4f4f4; /* panels/cards */ --text: #222; /* main text */ --muted: #6a6a6a; /* secondary text */ --border: #d3d3d3; /* subtle borders */ --primary: #2b6cb0; /* action blue (links/buttons) */ --primary-ink:#ffffff; --primary-ghost: #e8f0ff; /* soft blue fill for ghost */ --accent: #e53935; /* brand red (logo/destructive) */ --danger: #e53935; --success: #2e7d32; --radius: 16px; /* rounder cards */ --radius-sm: 12px; --shadow-1: 0 6px 20px rgba(0,0,0,.08); --shadow-2: 0 14px 40px rgba(0,0,0,.12); } /* Dark (charcoal panels) */ @media (prefers-color-scheme: dark) { :root { --bg: #2f3438; --card: #3a3f44; --text: #e8e8e8; --muted: #b0b6bb; --border: #444a52; --primary: #8ab4f8; /* muted azure */ --primary-ink:#0b1220; --primary-ghost:#23354f; /* dark ghost */ --accent: #ff6b6b; --danger: #ff6b6b; --success: #5ad28a; --shadow-1: 0 6px 20px rgba(0,0,0,.35); --shadow-2: 0 18px 50px rgba(0,0,0,.45); } } /* Optional manual override */ html[data-theme="dark"] { --bg: #2f3438; --card:#3a3f44; --text:#e8e8e8; --muted:#b0b6bb; --border:#444a52; --primary:#8ab4f8; --primary-ink:#0b1220; --primary-ghost:#23354f; --accent:#ff6b6b; --danger:#ff6b6b; --success:#5ad28a; --shadow-1:0 6px 20px rgba(0,0,0,.35); --shadow-2:0 18px 50px rgba(0,0,0,.45); } /* ===== Components fine-tuning to match look ===== */ /* Topbar: solid slab like in screenshot (no glassy look) */ .topbar { background: var(--card); border-bottom: 1px solid var(--border); backdrop-filter: none; } .topbar-inner { max-width: 1200px; } /* Cards more “slab” like */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); } /* Headings a bit larger & airy */ h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 600; } h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 600; } /* Links match action blue, underline only on hover */ a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Buttons: primary blue, ghost subtle, accent red for destructive */ .btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 8px 22px color-mix(in oklab, var(--primary) 24%, transparent); } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { background: color-mix(in oklab, var(--card) 85%, var(--primary-ghost)); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border)); } .btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 22px color-mix(in oklab, var(--accent) 24%, transparent); } /* Delete buttons → use accent */ form[action*="delete_"] .btn { background: transparent; color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); } form[action*="delete_"] .btn:hover { background: color-mix(in oklab, var(--accent) 10%, var(--card)); } /* Section “hero”/lead text (if you use) */ .lead { color: var(--muted); font-size: clamp(1rem, .9rem + .4vw, 1.2rem); } /* Images with big rounding like the mock */ .img-rounded { border-radius: 18px; box-shadow: var(--shadow-1); } /* Footer stripe (if needed) */ .footer { background: color-mix(in oklab, var(--card) 92%, var(--bg)); border-top: 1px solid var(--border); } /* Container a bit wider like the screenshot */ .container { max-width: 1200px; } /* === Enhancements: micro-animations & polish === */ /* Motion tokens */ :root { --ease-1: cubic-bezier(.2,.8,.2,1); --dur-1: .22s; --dur-2: .6s; } /* Keyframes */ @keyframes fadeSlideUp { from {opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} } @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(46,125,50,.28); } 70% { box-shadow: 0 0 0 10px rgba(46,125,50,0); } 100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); } } @keyframes flashFill { from { background: color-mix(in oklab, var(--success) 18%, transparent);} to { background: transparent; } } @keyframes blinkSoft { 0%,100%{opacity:1} 50%{opacity:.6} } /* List items: lift + soft border on hover */ .list-item { position: relative; transition: transform var(--dur-1) var(--ease-1), box-shadow .25s ease, border-color .25s ease; } .list-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); } /* „Vedete“ badge jemně pulzuje (jen .badge-ok, to je u leadu) */ .badge-ok { animation: pulseGlow 2.2s infinite; } /* Zbývající čas: tabulární číslice, zvýraznění při konci */ .remain { font-variant-numeric: tabular-nums; } .is-ending .remain { color: var(--danger); animation: blinkSoft 1.3s ease-in-out infinite; } /* Štítek „Aukce skončila“ hezky naskočí */ .ended-label { animation: fadeSlideUp .28s var(--ease-1); } /* Top price „blikne“ při změně */ #top.flash { animation: flashFill .6s ease 1; border-radius: 6px; } /* Tlačítka: jemnější interakce a pseudo-ripple */ .btn { position: relative; overflow: hidden; transform: translateZ(0); /* GPU */ } .btn:hover { box-shadow: 0 10px 24px color-mix(in oklab, var(--primary) 18%, transparent); } .btn::after { content:""; position:absolute; inset:-40% -40% auto auto; width:80%; height:80%; background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 18%, transparent), transparent 70%); opacity:0; transform: scale(.3); transition: opacity .25s, transform .35s; pointer-events:none; } .btn:active::after { opacity:.8; transform: scale(1); transition: none; } /* KBD pilulky – čitelnější */ .kbd { font-size: 12px; padding: 5px 8px; background: color-mix(in oklab, var(--card) 85%, #fff); } /* Topbar jemný vstup (na prvním vykreslení) */ .topbar { animation: fadeSlideUp .24s var(--ease-1); } /* Respektuj snížený pohyb */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Toggle button styles */ .toggle-btn { width: 56px; height: 32px; border-radius: 999px; border: 0; background: #dcdcdc; position: relative; padding: 0; cursor: pointer; transition: background .18s ease, box-shadow .12s ease; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.04); } .toggle-btn::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.12); transition: left .18s ease, background .18s ease, transform .12s ease; } /* ON state */ .toggle-btn.on { background: var(--primary); box-shadow: 0 6px 18px color-mix(in oklab, var(--primary) 18%, transparent); } .toggle-btn.on::after { left: 28px; background: var(--primary-ink); } /* Focus */ .toggle-btn:focus { outline: none; box-shadow: var(--focus); } :root { --topbar-height: 64px; } @media (max-width: 640px) { :root { --topbar-height: 76px; } } /* push page content below sticky topbar */ .container { margin-top: calc(var(--topbar-height) + 12px); } /* topbar tuning */ .topbar-inner { align-items: center; gap: 8px; padding: 8px 12px; height: var(--topbar-height); } .topbar-inner .brand { font-weight: 700; margin-right: 8px; } /* ensure controls wrap nicely */ .topbar-inner .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } /* auction list items — desktop: row, mobile: stacked */ .list-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .list-item .item-meta { min-width: 0; } /* allow truncation if needed */ .list-item .item-title { word-break: break-word; } /* CTA block (price + badge) keeps right alignment on large screens */ .list-item .item-cta { flex: 0 0 auto; align-items: center; gap: 8px; } /* Mobile: stack item content */ @media (max-width: 640px) { .list-item { flex-direction: column; align-items: stretch; padding: 12px; } .list-item .item-cta { display: flex; justify-content: space-between; margin-top: 8px; width: 100%; } .list-item .kbd { display: inline-block; max-width: 60%; text-overflow: ellipsis; overflow: hidden; } .list-item .badge { margin-left: 8px; } } /* slightly smaller, touch-friendly buttons in topbar on mobile */ @media (max-width: 560px) { .topbar-inner .row .btn { font-size: 14px; padding: 8px 10px; } .topbar-inner { height: var(--topbar-height); } }