/* * ===================================================== * Autors : Vladislavs Balajs * Grupa : 310. grupa * Gads : 2026 * Fails : style.css * Apraksts: Galvenā stila tabula — kopīga visām lapām. * Satur tumšo un gaišo tēmu, navigāciju, * formu elementus, pogas, tabulas un animācijas. * ===================================================== */ /* Ielādē Google fontus — Syne (virsrakstiem) un DM Mono (tekstam) */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&display=swap'); /* ═══════════════════════════════════════════ KRĀSU MAINĪGIE — TUMŠĀ TĒMA (noklusējums) Visi elementi izmanto šos mainīgos, lai nodrošinātu vienotu izskatu. ═══════════════════════════════════════════ */ :root { --bg: #0d0f12; /* galvenais fons */ --surface: #13161b; /* kartes fons */ --surface2: #1a1e25; /* sekundārais virsmas fons */ --border: #252a33; /* apmale */ --border2: #2e3542; /* sekundārā apmale */ --accent: #4f8ef7; /* galvenā akcenta krāsa (zila) */ --accent2: #7ab3ff; /* gaišāka akcenta krāsa */ --danger: #e05c5c; /* bīstamības krāsa (sarkana) */ --success: #3fcf8e; /* veiksmīga darbība (zaļa) */ --warn: #f0b429; /* brīdinājums (dzeltena) */ --text: #e8ecf2; /* galvenais teksts */ --text2: #8b95a6; /* sekundārais teksts */ --text3: #505968; /* trešā līmeņa teksts */ --radius: 10px; /* noapaļošanas rādiuss */ --radius-lg: 16px; /* lielāks noapaļošanas rādiuss */ --font-head: 'Syne', sans-serif; /* virsrakstu fonts */ --font-body: 'DM Mono', monospace; /* pamatteksta fonts */ --shadow: 0 4px 24px rgba(0,0,0,0.4); /* ēna */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); /* mazā ēna */ --grid-line: rgba(79,142,247,0.03); /* fona režģa līnija */ } /* ═══════════════════════════════════════════ GAIŠĀ TĒMA Aktivizējas, kad elementam ir pievienota klase "light-theme". ═══════════════════════════════════════════ */ html.light-theme { --bg: #f0f2f7; --surface: #ffffff; --surface2: #e8ecf5; --border: #d0d6e4; --border2: #b8c2d6; --accent: #2f6de0; --accent2: #4f8ef7; --danger: #c0392b; --success: #1e9e6b; --warn: #c47d10; --text: #1a1e2e; --text2: #4a5470; --text3: #8892aa; --shadow: 0 4px 24px rgba(0,0,0,0.10); --shadow-sm: 0 2px 8px rgba(0,0,0,0.07); --grid-line: rgba(47,109,224,0.04); } /* ═══════════════════════════════════════════ PAMATA RESET Noņem noklusēto atstarpi un apmales visiem elementiem. ═══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Pamatteksta stils un fona režģis */ body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.6; min-height: 100vh; /* Smalks fona režģis dekoratīvam efektam */ background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; transition: background-color 0.3s, color 0.3s; } /* ═══════════════════════════════════════════ NAVIGĀCIJAS JOSLA Fiksēta augšpusē, ar aizmiglojuma efektu. ═══════════════════════════════════════════ */ .nav { display: flex; align-items: center; gap: 4px; padding: 0 24px; height: 60px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); transition: background 0.3s, border-color 0.3s; } /* Vietnes nosaukums navigācijā */ .nav-brand { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--text); letter-spacing: -0.02em; margin-right: auto; white-space: nowrap; } /* Akcenta krāsa zīmola nosaukumā */ .nav-brand span { color: var(--accent); } /* Navigācijas saites */ .nav a { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--text2); text-decoration: none; padding: 6px 14px; border-radius: var(--radius); border: 1px solid transparent; transition: all 0.2s; white-space: nowrap; letter-spacing: 0.02em; } /* Saites efekts, uzbraucot ar peli */ .nav a:hover { color: var(--text); background: var(--surface2); border-color: var(--border); } /* Aktīvā navigācijas saite */ .nav a.active { color: var(--accent); background: rgba(79,142,247,0.1); border-color: rgba(79,142,247,0.3); } /* ═══════════════════════════════════════════ TĒMAS PĀRSLĒGŠANAS POGA Atrodas navigācijas joslas labajā pusē. ═══════════════════════════════════════════ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text2); cursor: pointer; font-size: 15px; transition: all 0.2s; flex-shrink: 0; margin-left: 4px; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: rgba(79,142,247,0.08); } /* ═══════════════════════════════════════════ LAPAS IZKĀRTOJUMS ═══════════════════════════════════════════ */ .page { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; } /* ═══════════════════════════════════════════ LAPAS GALVENE (virsraksts un apraksts) ═══════════════════════════════════════════ */ .page-header { margin-bottom: 32px; animation: fadeUp 0.4s ease both; } .page-header h1 { font-family: var(--font-head); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; color: var(--text); line-height: 1.2; } .page-header p { color: var(--text2); font-size: 13px; margin-top: 6px; } /* Mazais kategorijas birka virs virsraksta */ .page-header .tag { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: rgba(79,142,247,0.12); border: 1px solid rgba(79,142,247,0.25); border-radius: 4px; padding: 2px 8px; margin-bottom: 10px; } /* ═══════════════════════════════════════════ KARTE (satura bloks ar apmali) ═══════════════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); animation: fadeUp 0.4s ease both; transition: background 0.3s, border-color 0.3s; } .card + .card, .card + .section { margin-top: 20px; } /* ═══════════════════════════════════════════ FORMU ELEMENTI (lauki un iezīmes) ═══════════════════════════════════════════ */ .form-group { margin-bottom: 20px; } /* Lauka iezīme virs ievades lauka */ .form-group label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); margin-bottom: 8px; } /* Teksta ievades lauki un izvēlnes */ input[type="text"], select { width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: 14px; padding: 10px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.3s; appearance: none; } /* Fokusa efekts ievades laukiem */ input[type="text"]:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,142,247,0.15); } /* Viettura teksts ievades laukā */ input[type="text"]::placeholder { color: var(--text3); } /* Izvēlnes nolaižamā bultiņa */ select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b95a6' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } select option { background: var(--surface2); } /* ═══════════════════════════════════════════ POGAS (dažādi stili) ═══════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all 0.15s; text-decoration: none; white-space: nowrap; } /* Galvenā poga (zilā) */ .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent2); border-color: var(--accent2); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(79,142,247,0.35); } /* Caurspīdīga poga */ .btn-ghost { background: transparent; color: var(--text2); border-color: var(--border2); } .btn-ghost:hover { background: var(--surface2); color: var(--text); } /* Bīstamās darbības poga (sarkanā) */ .btn-danger { background: transparent; color: var(--danger); border-color: rgba(224,92,92,0.3); } .btn-danger:hover { background: rgba(224,92,92,0.1); border-color: var(--danger); } /* Veiksmīgas darbības poga (zaļā) */ .btn-success { background: rgba(63,207,142,0.12); color: var(--success); border-color: rgba(63,207,142,0.3); } .btn-success:hover { background: rgba(63,207,142,0.2); border-color: var(--success); } /* Atcelšanas poga */ .btn-cancel { background: transparent; color: var(--text3); border-color: var(--border); } .btn-cancel:hover { color: var(--text2); border-color: var(--border2); } /* Mazā poga */ .btn-sm { font-size: 11px; padding: 5px 12px; } /* ═══════════════════════════════════════════ STATUSA BIRKAS ═══════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; letter-spacing: 0.02em; } .badge:hover { opacity: 0.8; transform: scale(0.97); } /* Pabeigtā uzdevuma birka */ .badge-done { background: rgba(63,207,142,0.12); color: var(--success); border-color: rgba(63,207,142,0.25); } /* Gaidāmā uzdevuma birka */ .badge-pending { background: rgba(240,180,41,0.1); color: var(--warn); border-color: rgba(240,180,41,0.2); } /* ═══════════════════════════════════════════ TABULA ═══════════════════════════════════════════ */ .table-wrap { border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; background: var(--surface); transition: background 0.3s, border-color 0.3s; } table { width: 100%; border-collapse: collapse; } thead tr { background: var(--surface2); border-bottom: 1px solid var(--border); } /* Tabulas galvenes šūna */ th { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text3); padding: 12px 16px; text-align: left; } /* Tabulas datu šūna */ td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.15s; } tbody tr:hover { background: rgba(128,128,128,0.03); } tbody tr.editing { background: rgba(79,142,247,0.04); } tbody tr.saved { animation: flashSuccess 1.5s ease; } tbody tr.cancelled { animation: flashCancel 1.5s ease; } /* Ievades lauks tabulas šūnā */ td input[type="text"] { padding: 6px 10px; font-size: 13px; background: var(--bg); } td input[type="text"]:disabled { background: transparent; border-color: transparent; box-shadow: none; cursor: default; color: var(--text); } td select:disabled { background: transparent; border-color: transparent; box-shadow: none; cursor: default; color: var(--text2); background-image: none; padding-right: 14px; } /* ═══════════════════════════════════════════ FILTRU JOSLA ═══════════════════════════════════════════ */ .toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .toolbar input, .toolbar select { max-width: 220px; font-size: 13px; } /* ═══════════════════════════════════════════ STATISTIKAS RINDA (mazās birkas ar skaitļiem) ═══════════════════════════════════════════ */ .stats-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; animation: fadeUp 0.4s 0.1s ease both; } .stat-chip { font-size: 11px; color: var(--text2); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; letter-spacing: 0.03em; transition: background 0.3s, border-color 0.3s; } .stat-chip strong { color: var(--text); font-weight: 500; } /* ═══════════════════════════════════════════ SADAĻAS VIRSRAKSTS AR LĪNIJU ═══════════════════════════════════════════ */ .section { animation: fadeUp 0.4s 0.15s ease both; } .section-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ═══════════════════════════════════════════ TUKŠS STĀVOKLIS (kad nav datu) ═══════════════════════════════════════════ */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text3); font-size: 13px; } .empty-state .icon { font-size: 32px; margin-bottom: 12px; opacity: 0.4; } /* ═══════════════════════════════════════════ BRĪDINĀJUMA ZIŅOJUMI (kļūdas un veiksmes) ═══════════════════════════════════════════ */ .alert { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; border: 1px solid; display: none; } .alert.show { display: block; } /* Kļūdas ziņojums */ .alert-error { background: rgba(224,92,92,0.1); border-color: rgba(224,92,92,0.3); color: #f08080; } /* Veiksmes ziņojums */ .alert-success { background: rgba(63,207,142,0.1); border-color: rgba(63,207,142,0.3); color: var(--success); } /* ═══════════════════════════════════════════ ANIMĀCIJAS ═══════════════════════════════════════════ */ /* Parādīšanās no apakšas animācija */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Zaļā uzplaiksnījuma animācija saglabājot */ @keyframes flashSuccess { 0%,100% { background: transparent; } 20% { background: rgba(63,207,142,0.08); } } /* Dzeltenā uzplaiksnījuma animācija atceļot */ @keyframes flashCancel { 0%,100% { background: transparent; } 20% { background: rgba(240,180,41,0.06); } } /* ═══════════════════════════════════════════ RESPONSĪVS DIZAINS (maziem ekrāniem) ═══════════════════════════════════════════ */ @media (max-width: 600px) { .nav { padding: 0 12px; gap: 2px; } .nav-brand { font-size: 13px; } .nav a { padding: 5px 8px; font-size: 11px; } .page { padding: 24px 12px 60px; } .card { padding: 20px; } .toolbar { flex-direction: column; } .toolbar input, .toolbar select { max-width: 100%; } .stats-row { gap: 8px; } }