/* ===================================================================== HALORED ÜHTNE DISAINITEEMA (halored-theme.css) Eeskuju: configurator.halored.com Montserrat · mustvalge minimalism · punane (#c62828) rõhuks. TAASKASUTAMINE teises Halored tööriistas: 1) Kopeeri see fail + kaust fonts/ (Montserrat woff2-failid). 2) Lisa -i: 3) Kasuta klasse: .btn / .btn.secondary / .card / .field / .fields / .msg / .badge / .pill / .ac (autocomplete) / .stat / table jne. Värve muuda ainult :root muutujate kaudu. ===================================================================== */ /* --- Font (lokaalselt hostitud, ei sõltu Google'ist, töötab offline) --- */ @font-face { font-family:"Montserrat"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/montserrat-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/montserrat-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/montserrat-500-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/montserrat-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/montserrat-600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/montserrat-600-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/montserrat-700-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/montserrat-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* --- Disainisümbolid (muuda värve ainult siin) --- */ :root { --color-bg: #f7f7f7; --color-surface: #ffffff; --color-text: #1a1a1a; --color-muted: #666666; --color-border: #e0e0e0; --color-accent: #1a1a1a; /* põhinupp / rõhk = must */ --color-accent-dark: #000000; --color-brand: #c62828; /* Halored punane - lingid, vead, rõhk */ --color-danger: #c62828; --color-warning: #b45309; --color-surface-active: #f0f0f0; --radius: 6px; --transition: .15s ease; --shadow: 0 1px 2px rgba(0,0,0,.05); --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Tagasiühilduvuse aliased (vanemad klassid) */ --bg: var(--color-bg); --card: var(--color-surface); --text: var(--color-text); --muted: var(--color-muted); --border: var(--color-border); --primary: var(--color-accent); --primary-dark: var(--color-accent-dark); --brand: var(--color-brand); --danger: var(--color-danger); --warning: var(--color-warning); --success: var(--color-accent); --surface-active: var(--color-surface-active); } /* --- Baas --- */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--color-brand); } h1, h2, h3 { margin: 0 0 .6rem; font-weight: 700; letter-spacing: -.01em; } h1 { font-size: 1.35rem; } h2 { font-size: 1.05rem; font-weight: 600; } .muted { color: var(--color-muted); } .center { text-align: center; } .hidden { display: none !important; } .row { display: flex; gap: 1rem; flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .spacer { flex: 1; } .toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; } /* --- Kaardid --- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; } /* --- Vormid --- */ label { display: block; font-size: .8rem; color: var(--color-muted); margin-bottom: .25rem; font-weight: 500; } input, select, textarea { width: 100%; padding: .55rem .65rem; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-size: .9rem; background: #fff; color: var(--color-text); font-family: inherit; transition: border-color var(--transition); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); } .field { margin-bottom: .8rem; } /* align-items:end hoiab sisendkastid ühel joonel, ka kui mõni silt murdub kahele reale */ .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; align-items: end; } .fields .field { margin-bottom: 0; } /* --- Nupud --- */ button.btn { background: var(--color-accent); color: #fff; border: 1.5px solid var(--color-accent); padding: .6rem 1.4rem; border-radius: var(--radius); font-size: .9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity var(--transition), background var(--transition); } button.btn:hover { opacity: .85; } button.btn.secondary { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border); } button.btn.secondary:hover { opacity: 1; border-color: var(--color-accent); background: var(--color-surface-active); } button.btn.danger { background: var(--color-danger); border-color: var(--color-danger); } button.btn.small { padding: .35rem .8rem; font-size: .82rem; } button.link { background: none; border: none; color: var(--color-brand); cursor: pointer; padding: .2rem; font-size: .88rem; font-family: inherit; } button.link.danger { color: var(--color-danger); } /* --- Tabelid --- */ table { width: 100%; border-collapse: collapse; font-size: .88rem; } th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--color-border); } th { color: var(--color-muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; } tr:hover td { background: #fafafa; } .num { text-align: right; font-variant-numeric: tabular-nums; } /* --- Teated --- */ .msg { padding: .6rem .8rem; border-radius: var(--radius); margin-bottom: .8rem; font-size: .88rem; } .msg.error { background: #fdecea; color: var(--color-danger); border: 1px solid #f5c6cb; } .msg.ok { background: #f0f0f0; color: var(--color-text); border: 1px solid var(--color-border); } /* --- Sildid --- */ .badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; } .badge.admin { background: #fbeae0; color: var(--color-warning); } .pill { font-size: .76rem; background: var(--color-surface-active); padding: .15rem .55rem; border-radius: 999px; color: var(--color-muted); font-weight: 500; } /* --- Statistikakaardid --- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1rem; } .stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); } .stat .v { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; } .stat .l { color: var(--color-muted); font-size: .8rem; font-weight: 500; } /* --- Autocomplete (taaskasutatav komponent) --- */ .ac { position: relative; } .ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,.08); max-height: 240px; overflow-y: auto; margin-top: 2px; } .ac-item { padding: .5rem .65rem; cursor: pointer; font-size: .9rem; transition: background var(--transition); } .ac-item:hover, .ac-item.active { background: var(--color-surface-active); } .ac-item .uses { float: right; color: var(--color-muted); font-size: .78rem; } .ac-item.new { color: var(--color-brand); font-weight: 600; }