/* ============================================================ MOJA KNJIZNICA – CSS THEMES Three themes controlled via data-theme on . ============================================================ */ /* --- Theme variables ---------------------------------------- */ /* Rjava / Brown (default) */ :root, html[data-theme="brown"] { --app-navbar-bg: #3e2723; --app-primary: #795548; --app-primary-hover: #5d4037; --app-primary-active: #4e342e; --app-primary-rgb: 121, 85, 72; --app-body-bg: #fdf6f0; --app-card-bg: #fffaf7; --bs-link-color-rgb: 121, 85, 72; --bs-link-hover-color-rgb: 93, 64, 55; } /* Zelena / Forest Green */ html[data-theme="green"] { --app-navbar-bg: #1b3a1f; --app-primary: #388e3c; --app-primary-hover: #2e7d32; --app-primary-active: #1b5e20; --app-primary-rgb: 56, 142, 60; --app-body-bg: #f4faf4; --app-card-bg: #f9fff9; --bs-link-color-rgb: 46, 125, 50; --bs-link-hover-color-rgb: 27, 94, 32; } /* Modra / Navy Blue */ html[data-theme="navy"] { --app-navbar-bg: #0d2b4e; --app-primary: #1565c0; --app-primary-hover: #0d47a1; --app-primary-active: #0a3272; --app-primary-rgb: 21, 101, 192; --app-body-bg: #f0f4f9; --app-card-bg: #f7faff; --bs-link-color-rgb: 21, 101, 192; --bs-link-hover-color-rgb: 13, 71, 161; } /* --- Apply theme to components ------------------------------ */ body { background-color: var(--app-body-bg); display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } /* Navbar */ .app-navbar { background-color: var(--app-navbar-bg) !important; } /* Cards tinted with theme bg */ .card { background-color: var(--app-card-bg); transition: transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(var(--app-primary-rgb), .15) !important; } /* Buttons – primary */ .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: var(--app-primary-active); --bs-btn-active-border-color: var(--app-primary-active); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); } /* Buttons – outline primary */ .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover); --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); } /* Pagination – override Bootstrap's own CSS variables so all states work */ .pagination { --bs-pagination-color: var(--app-primary); --bs-pagination-hover-color: var(--app-primary-hover); --bs-pagination-hover-bg: rgba(var(--app-primary-rgb), .08); --bs-pagination-hover-border-color: var(--app-primary); --bs-pagination-focus-color: var(--app-primary-hover); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .25); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); } /* Alert links */ .alert-link { color: var(--app-primary-hover) !important; } /* Navbar active link */ .app-navbar .nav-link.active { color: #fff !important; font-weight: 600; } /* Theme dot – used in navbar switcher and dropdown */ .theme-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.55); flex-shrink: 0; } .dropdown-item .theme-dot { border-color: rgba(0, 0, 0, 0.2); } .dropdown-item.active .theme-dot { border-color: var(--app-primary); box-shadow: 0 0 0 2px rgba(var(--app-primary-rgb), .35); } /* Demo banner */ .demo-banner { background-color: #fff3cd; border-bottom: 1px solid #ffc107; font-size: .9rem; color: #664d03; } /* --- General layout ----------------------------------------- */ .card-body h6.card-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; margin-bottom: .75rem; } .alert { border-radius: .5rem; } /* Footer */ .app-footer { background-color: var(--app-navbar-bg) !important; border-top: none; color: rgba(255, 255, 255, 0.75) !important; } tr.table-danger td { font-weight: 500; } /* API field-fill highlight */ @keyframes field-highlight { 0%, 65% { border-color: #198754; background-color: #d1e7dd; } 100% { border-color: #dee2e6; background-color: transparent; } } @keyframes block-highlight { 0%, 65% { background-color: #d1e7dd; } 100% { background-color: transparent; } } .field-updated { animation: field-highlight 3s ease forwards !important; } .block-updated { animation: block-highlight 3s ease forwards !important; border-radius: .375rem; }