/*
* TabIS — Dark Mode
* Aktivace:
* Toggle: JS v @layout.latte (localStorage key: "tabis-theme")
*/
/* ===== Proměnné ===== */
html[data-theme="dark"] {
--dm-bg: #1a1d23;
--dm-bg2: #22262e;
--dm-bg3: #2a2f3a;
--dm-border: #383d4a;
--dm-text: #d8dce6;
--dm-text-muted: #8890a0;
--dm-link: #5ab3ff;
--dm-primary: #2979c4;
--dm-danger: #e05050;
--dm-sidebar-bg: #1e2229;
--dm-input-bg: #2a2f3a;
}
/* ===== Body ===== */
html[data-theme="dark"] body {
background-color: var(--dm-bg);
color: var(--dm-text);
}
/* ===== Sidebar ===== */
html[data-theme="dark"] .sidebar {
background-color: var(--dm-sidebar-bg) !important;
box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .sidebar .nav-link {
color: var(--dm-text);
}
html[data-theme="dark"] .sidebar .nav-link .feather,
html[data-theme="dark"] .sidebar .nav-link svg {
color: var(--dm-text-muted);
}
html[data-theme="dark"] .sidebar .nav-link.active {
color: var(--dm-link);
}
html[data-theme="dark"] .sidebar .nav-link:hover {
color: #fff;
}
html[data-theme="dark"] .sidebar .sidebar-heading,
html[data-theme="dark"] .sidebar .text-muted {
color: var(--dm-text-muted) !important;
}
/* ===== Navbar ===== */
/* Navbar je už tmavý (bg-dark), jen jemné doladění */
html[data-theme="dark"] header.navbar {
background-color: #111318 !important;
box-shadow: 0 1px 0 rgba(255,255,255,.05) !important;
}
html[data-theme="dark"] .navbar-brand {
background-color: rgba(0,0,0,.4);
}
/* ===== Karty ===== */
html[data-theme="dark"] .card {
background-color: var(--dm-bg2);
border-color: var(--dm-border);
color: var(--dm-text);
box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
html[data-theme="dark"] .card-header {
background-color: var(--dm-bg3);
border-bottom-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .card-footer {
background-color: var(--dm-bg3);
border-top-color: var(--dm-border);
}
/* ===== Tables ===== */
html[data-theme="dark"] .table {
color: var(--dm-text);
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
border-color: var(--dm-border);
}
html[data-theme="dark"] .table thead th {
border-bottom-color: var(--dm-border);
background-color: var(--dm-bg3);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(255,255,255,.03);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
background-color: rgba(255,255,255,.06);
color: var(--dm-text);
}
html[data-theme="dark"] .table-bordered {
border-color: var(--dm-border);
}
/* ===== Forms ===== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control {
background-color: var(--dm-input-bg);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .form-control:focus {
background-color: var(--dm-input-bg);
border-color: var(--dm-primary);
color: var(--dm-text);
box-shadow: 0 0 0 0.2rem rgba(41,121,196,.35);
}
html[data-theme="dark"] .form-control::placeholder {
color: var(--dm-text-muted);
}
html[data-theme="dark"] .input-group-text {
background-color: var(--dm-bg3);
border-color: var(--dm-border);
color: var(--dm-text);
}
/* ===== Buttons ===== */
html[data-theme="dark"] .btn-light {
background-color: var(--dm-bg3);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .btn-light:hover {
background-color: var(--dm-border);
color: #fff;
}
html[data-theme="dark"] .btn-outline-secondary {
border-color: var(--dm-border);
color: var(--dm-text-muted);
}
html[data-theme="dark"] .btn-outline-secondary:hover {
background-color: var(--dm-bg3);
color: var(--dm-text);
}
/* ===== Dropdowns ===== */
html[data-theme="dark"] .dropdown-menu {
background-color: var(--dm-bg2);
border-color: var(--dm-border);
}
html[data-theme="dark"] .dropdown-item {
color: var(--dm-text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
background-color: var(--dm-bg3);
color: #fff;
}
html[data-theme="dark"] .dropdown-divider {
border-color: var(--dm-border);
}
/* ===== Modals ===== */
html[data-theme="dark"] .modal-content {
background-color: var(--dm-bg2);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .modal-header {
border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .modal-footer {
border-top-color: var(--dm-border);
}
html[data-theme="dark"] .close {
color: var(--dm-text);
text-shadow: none;
}
html[data-theme="dark"] .modal-backdrop {
background-color: #000;
}
/* ===== Alerts ===== */
html[data-theme="dark"] .alert-info {
background-color: #1a3a4a;
border-color: #1e4d63;
color: #7ecfee;
}
html[data-theme="dark"] .alert-success {
background-color: #1a3a2a;
border-color: #1e4d35;
color: #6ddb9a;
}
html[data-theme="dark"] .alert-warning {
background-color: #3a2e14;
border-color: #524018;
color: #f0c060;
}
html[data-theme="dark"] .alert-danger {
background-color: #3a1a1a;
border-color: #521e1e;
color: #e07070;
}
/* ===== Badges ===== */
html[data-theme="dark"] .badge-secondary {
background-color: #445;
}
/* ===== List groups ===== */
html[data-theme="dark"] .list-group-item {
background-color: var(--dm-bg2);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .list-group-item-action:hover {
background-color: var(--dm-bg3);
color: var(--dm-text);
}
html[data-theme="dark"] .list-group-item.active {
background-color: var(--dm-primary);
border-color: var(--dm-primary);
}
/* ===== Nav tabs ===== */
html[data-theme="dark"] .nav-tabs {
border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .nav-tabs .nav-link {
color: var(--dm-text-muted);
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
border-color: var(--dm-border) var(--dm-border) transparent;
color: var(--dm-text);
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
background-color: var(--dm-bg2);
border-color: var(--dm-border) var(--dm-border) var(--dm-bg2);
color: var(--dm-text);
}
html[data-theme="dark"] .tab-content {
background-color: var(--dm-bg2);
}
/* ===== Pagination ===== */
html[data-theme="dark"] .page-link {
background-color: var(--dm-bg2);
border-color: var(--dm-border);
color: var(--dm-link);
}
html[data-theme="dark"] .page-link:hover {
background-color: var(--dm-bg3);
border-color: var(--dm-border);
color: #fff;
}
html[data-theme="dark"] .page-item.active .page-link {
background-color: var(--dm-primary);
border-color: var(--dm-primary);
}
html[data-theme="dark"] .page-item.disabled .page-link {
background-color: var(--dm-bg2);
color: var(--dm-text-muted);
}
/* ===== Breadcrumb ===== */
html[data-theme="dark"] .breadcrumb {
background-color: var(--dm-bg3);
}
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
color: var(--dm-text-muted);
}
/* ===== Text utilities ===== */
html[data-theme="dark"] .text-muted {
color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .text-dark {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .bg-light {
background-color: var(--dm-sidebar-bg) !important;
}
html[data-theme="dark"] .bg-white {
background-color: var(--dm-bg2) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right {
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] hr {
border-color: var(--dm-border);
}
/* ===== Links ===== */
html[data-theme="dark"] a {
color: var(--dm-link);
}
html[data-theme="dark"] a:hover {
color: #88ccff;
}
/* Sidebar nav links — jiná barva než global links */
html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .navbar a {
color: inherit;
}
/* ===== Timeline ===== */
html[data-theme="dark"] .timeline:before {
background: #3a4050;
}
html[data-theme="dark"] .timeline .timeline-icon a {
background: #3a4050;
border-color: #4a5060;
}
html[data-theme="dark"] .timeline .timeline-body {
background: var(--dm-bg2);
color: var(--dm-text);
}
html[data-theme="dark"] .timeline .timeline-body:before {
border-right-color: var(--dm-bg2);
}
html[data-theme="dark"] .timeline-header {
border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .timeline-header .username,
html[data-theme="dark"] .timeline-header .username a {
color: var(--dm-text);
}
html[data-theme="dark"] .timeline-footer {
background: var(--dm-bg2);
border-top-color: var(--dm-border);
}
html[data-theme="dark"] .timeline-footer a:not(.btn) {
color: var(--dm-text-muted);
}
html[data-theme="dark"] .timeline-footer a:not(.btn):hover {
color: var(--dm-text);
}
html[data-theme="dark"] .timeline-comment-box {
background: var(--dm-bg3);
}
html[data-theme="dark"] .timeline .timeline-time .time {
color: var(--dm-text);
}
/* ===== File manager ===== */
html[data-theme="dark"] .file_manager .file .file-name {
border-top-color: var(--dm-border);
background-color: var(--dm-bg2);
}
html[data-theme="dark"] .file_manager .file .file-name .file-title {
color: var(--dm-text);
}
html[data-theme="dark"] .file_manager .file .icon {
background-color: var(--dm-bg3);
}
html[data-theme="dark"] .file_manager .file .icon i {
color: var(--dm-text-muted);
}
html[data-theme="dark"] .folder {
color: var(--dm-text-muted);
}
/* ===== Reakce (reactions) ===== */
html[data-theme="dark"] .tabis-reaction-btn {
background: var(--dm-bg3);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] a.tabis-reaction-btn:hover {
background: var(--dm-border);
border-color: #505560;
color: #fff;
}
html[data-theme="dark"] .tabis-reaction-btn.active {
background: #1a3a5a;
border-color: #2a5a8a;
}
html[data-theme="dark"] .tabis-reaction-count {
color: var(--dm-text-muted);
}
html[data-theme="dark"] .tabis-reaction-btn.active .tabis-reaction-count {
color: #7ab8f0;
}
html[data-theme="dark"] .tabis-reaction-add-btn {
border-color: var(--dm-border);
color: var(--dm-text-muted);
}
html[data-theme="dark"] .tabis-reaction-add-btn:hover {
background: var(--dm-bg3);
color: var(--dm-text);
}
html[data-theme="dark"] .tabis-reaction-picker {
background: var(--dm-bg2);
border-color: var(--dm-border);
box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
html[data-theme="dark"] .tabis-reaction-pick:hover {
background: var(--dm-bg3);
}
/* ===== Fan avatarů ===== */
html[data-theme="dark"] .tabis-fan-item img {
border-color: var(--dm-bg2);
}
/* ===== Lightbox ===== */
html[data-theme="dark"] .lightbox-caption {
background: rgba(0,0,0,.8);
}
/* ===== Specifické Bootstrap utility ===== */
html[data-theme="dark"] .jumbotron {
background-color: var(--dm-bg2);
}
html[data-theme="dark"] code {
color: #f084a8;
background-color: var(--dm-bg3);
padding: 1px 4px;
border-radius: 3px;
}
html[data-theme="dark"] pre {
background-color: var(--dm-bg3);
border-color: var(--dm-border);
color: var(--dm-text);
}
/* ===== Toggle tlačítko — moon/sun ===== */
#dm-toggle {
background: transparent;
border: none;
color: rgba(255,255,255,.75);
font-size: 1.1rem;
padding: 0 .5rem;
cursor: pointer;
line-height: 1;
transition: color .15s;
}
#dm-toggle:hover {
color: #fff;
}