@charset "UTF-8"; @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; src: url('fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-display: swap; } /* ============================================================ ЦВЕТОВАЯ ПАЛИТРА (цвета заданы как R,G,B тройки) Чтобы сменить всю гамму — поменяй 6 строк ниже, либо повесь класс темы на (theme-gold / theme-red / theme-blue). Схемы взяты из color-schema.png (Primary / Secondary #1 / #2 / Complement). ============================================================ */ :root { --c-bg-rgb: 34, 33, 29; /* фон страницы / модалок */ --c-text-rgb: 255, 245, 234; /* основной текст */ --c-head-rgb: 229, 187, 142; /* заголовки, шапки таблиц, лейблы */ --c-accent-rgb: 172, 114, 54; /* акцент: прогресс, ссылки, strong */ --c-th-rgb: 58, 41, 0; /* фон шапки таблицы */ --c-danger-rgb: 172, 72, 54; /* «красный» акцент (итоги/алерты) */ } /* Золотая гамма (Secondary #1) */ body.theme-gold { --c-bg-rgb: 34, 33, 29; --c-text-rgb: 255, 249, 234; --c-head-rgb: 229, 204, 142; --c-accent-rgb: 172, 137, 54; --c-th-rgb: 58, 41, 0; --c-danger-rgb: 172, 72, 54; } /* Красная гамма (Secondary #2) */ body.theme-red { --c-bg-rgb: 36, 29, 27; --c-text-rgb: 255, 238, 234; --c-head-rgb: 229, 155, 142; --c-accent-rgb: 172, 72, 54; --c-th-rgb: 58, 9, 0; --c-danger-rgb: 118, 21, 3; } /* Сине-бирюзовая гамма (Complement) */ body.theme-blue { --c-bg-rgb: 0, 27, 36; --c-text-rgb: 215, 226, 230; --c-head-rgb: 174, 185, 189; --c-accent-rgb: 91, 130, 143; --c-th-rgb: 5, 56, 73; --c-danger-rgb: 172, 72, 54; } /* Reset basic styles */ * { margin: 0; padding: 0; box-sizing: border-box; } * { font-family: 'Inter', sans-serif !important; font-weight: 400; /* default weight */ font-style: normal; font-variation-settings: "wdth" 100, "wght" 400; } /* Styles for headings */ h4, h5 { color: rgb(var(--c-head-rgb)); } h6 { color: rgb(var(--c-accent-rgb)); } /* Basic styles for body */ body { color-scheme: dark; --bs-body-color: rgb(var(--c-bg-rgb)); background-color: var(--bs-body-color); width: 100vw; overflow-x: hidden; } body.background-default { color-scheme: dark; --bs-body-color: rgb(var(--c-bg-rgb)); background-color: var(--bs-body-color); width: 100vw; overflow-x: hidden; } /* Background with lines */ body.background-lines { background-image: repeating-linear-gradient( 45deg, transparent, transparent 5px, rgba(var(--c-text-rgb), 0.04) 5px, rgba(var(--c-text-rgb), 0.04) 10px ); } /* Background with dots */ body.background-dots { background-image: radial-gradient( circle at center, rgba(var(--c-text-rgb), 0.05) 1px, transparent 1px ); background-size: 20px 20px; } /* Background with rings */ body.background-rings { background-image: radial-gradient( circle at center, transparent 0, transparent 70%, rgba(var(--c-text-rgb), 0.02) 70%, rgba(var(--c-text-rgb), 0.02) 100% ), radial-gradient( circle at center, transparent 0, transparent 70%, rgba(var(--c-text-rgb), 0.02) 70%, rgba(var(--c-text-rgb), 0.02) 100% ); background-size: 60px 60px; background-position: 0 0, 30px 30px; } .bg-dark { background-color: rgb(var(--c-bg-rgb)) !important; color: rgb(var(--c-text-rgb)) !important; } th { background-color: rgba(var(--c-th-rgb), 0.9) !important; color: rgb(var(--c-head-rgb)) !important; } tr { background-color: transparent !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } thead tr th { overflow: hidden !important; } tr input{ background-color:transparent !important; border: none; color: rgb(var(--c-head-rgb)) !important; font-size: 1rem !important; } .bg-secondary { background-color: rgb(var(--c-head-rgb)) !important; } .progress-bar { background-color: rgb(var(--c-accent-rgb)); box-shadow: 0 4px 8px rgba(var(--c-danger-rgb), 0.1); /* depth, as volume */ border-radius: 10px; } .progress-custom { height: 20px; border-radius: 10px; background-color: rgba(var(--c-text-rgb), 0.01) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } /* Styles for tables on the main screen after the first table*/ .table { table-layout: fixed; color: rgb(var(--c-text-rgb)); max-width: 100%; min-width: -moz-fit-content; min-width: fit-content; margin-bottom: 10px; border-collapse: collapse; border-color: rgba(0, 0, 0, 0) !important; } .table th, .table td { padding: 0.1rem; font-size: 0.9rem; white-space: nowrap; border: none !important; } .table tfoot td { border: none; } /* Styles for the table container */ .table-responsive { padding: 0.1rem; font-size: 0.9rem; max-height: 30em; } /* Reduce margins around the table */ .border { margin-top: 1px; border: none !important; } /* Styles for charts */ .chart { width: 100%; height: 500px; } .type-icon { max-width: 20px !important; height: auto !important; vertical-align: middle; margin-right: 5px; } .modal-content { background-color: rgba(var(--c-bg-rgb), 0.95) !important; } .form-control { background-color: rgba(var(--c-bg-rgb), 0.95) !important; } /* Styles for text inside rows */ tr strong { color: rgb(var(--c-accent-rgb)) !important; text-decoration: none; } tr strong:hover { color: rgb(var(--c-text-rgb)) !important; text-decoration: none; } /* Styles for tables in charts */ .table-responsive-charts { width: 100%; max-height: 5em; overflow-y: auto; font-size: 1em; } .table-responsive-charts thead th { position: sticky; top: 0; z-index: 10; font-size: 0.9em; max-width: -moz-fit-content; max-width: fit-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table-responsive-charts input { color-scheme: light; width: -moz-fit-content; width: fit-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.1em; } /* Styles for the side menu */ .sidebar { position: fixed; top: 0; right: -250px; width: 250px; height: 100%; background-color: rgba(var(--c-bg-rgb), 0.3); backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; color: rgb(var(--c-text-rgb)); transition: right 0.3s; z-index: 999; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Added for creating shadow */ } .sidebar.active { right: 0; } .sidebar a { color: white; } .btn-close { color: white !important; } /* Button to open the side menu */ .toggle-btn { position: fixed; top: 1em; right: 1em; z-index: 100; } .btn-primary { background: none !important; border: none !important; outline: none !important; box-shadow: none !important; } .btn-primary:hover { transform: scale(1.2) !important; transition: transform 0.3s ease-in !important; } .btn-secondary { background: none !important; border: none !important; outline: none !important; box-shadow: none !important; } .btn-secondary:hover { transform: scale(1.2) !important; transition: transform 0.3s ease-in !important; } .btn-danger { background: none !important; border: none !important; outline: none !important; box-shadow: none !important; } .btn-danger:hover { transform: scale(1.2) !important; transition: transform 0.3s ease-in !important; } /* Hover effect on table icons */ .table .btn-link img { vertical-align: middle; transition: opacity 0.3s; } .table .btn-link:hover img { opacity: 0.7; } /* Styles for category and source containers */ .category-container, .source-container { display: inline-flex; align-items: center; gap: 5px; } .category-icon, .source-icon { max-width: 20px; } .category-link { color: white; text-decoration: none; } .category-link:hover { text-decoration: none; color: rgb(var(--c-accent-rgb)); } .balance-left, .balance-right { flex: 1; min-width: 300px; } .source-item { display: flex; align-items: center; margin-bottom: 5px; padding: 10px; border-radius: 8px; color: rgb(var(--c-text-rgb)); } .source-icon-circle { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: rgba(var(--c-accent-rgb), 0.26); margin-right: 15px; } .source-info { flex: 1; } .source-name { font-size: 1.1rem; color: rgb(var(--c-text-rgb)); margin: 0; } .source-amount { font-size: 1.2rem; font-weight: bold; color: rgb(var(--c-text-rgb)); } .total-balance { margin-top: 20px; padding: 15px; background-color: none; border-radius: 8px; text-align: center; } .total-balance h5 { color: rgb(var(--c-danger-rgb)); margin: 0; } .filter-form { background-color: none; padding: 20px; border-radius: 8px; margin-bottom: 20px; } .category-icon { max-width: 20px; vertical-align: middle; margin-right: 5px; } .category-container { display: inline-flex; align-items: center; } .btn-sm img { width: 20px; height: 20px; } .balance-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; } /* Hide text on mobile devices */ @media (max-width: 600px) { .category-text, .source-text, .type-text { display: none; } .btn-sm img { width: 10px; height: 10px; padding: 0; margin: 0; } .table { font-size: 1.1em; } .table td { font-size: 1em; white-space: nowrap; } .table-responsive { padding: 0.1rem; max-height: 30em; } .table-responsive thead th, .table-responsive tbody td { font-size: 1em; overflow: hidden; } .table-responsive table.table { display: block; width: 100%; } .table-responsive table.table thead { display: none; } .table-responsive table.table tbody { display: block; } .table-responsive table.table tbody tr { display: block; margin-bottom: 15px; padding: 10px; border: 2px solid rgba(var(--c-text-rgb), 0.1); border-radius: 8px; background-color: rgba(var(--c-bg-rgb), 0.8); backdrop-filter: blur(5px); } .table-responsive table.table tbody tr td { display: block; width: 100%; padding: 1px 0; font-size: 1.2rem; text-align: left; word-wrap: break-word; } /* Labels for cells (by index) */ .table-responsive table.table tbody tr td:nth-child(1)::before { content: "Дата: "; font-weight: bold; color: rgb(var(--c-head-rgb)); } .table-responsive table.table tbody tr td:nth-child(2)::before { content: "Категория: "; font-weight: bold; color: rgb(var(--c-head-rgb)); } .table-responsive table.table tbody tr td:nth-child(3)::before { content: "Описание: "; font-weight: bold; color: rgb(var(--c-head-rgb)); } .table-responsive table.table tbody tr td:nth-child(4)::before { content: "Сумма: "; font-weight: bold; color: rgb(var(--c-head-rgb)); } .table-responsive table.table tbody tr td:nth-child(5)::before { content: "Тип: "; font-weight: bold; color: rgb(var(--c-head-rgb)); } .table-responsive table.table tbody tr td:nth-child(6)::before { content: "Источник: "; font-weight: bold; color: rgb(var(--c-head-rgb)); } /* Buttons at the bottom */ .table-responsive table.table tbody tr td:last-child { width: 100%; text-align: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(var(--c-text-rgb), 0.1); } /* Icons */ .table-responsive table.table tbody tr td .category-icon, .table-responsive table.table tbody tr td .type-icon, .table-responsive table.table tbody tr td .source-icon { max-width: 25px; height: auto; vertical-align: middle; margin-right: 3px; } /* Buttons */ .table-responsive table.table tbody tr td .btn-sm img { width: 25px; height: 25px; } .totalSum-index { display: none; } .modal-content { background-color: rgb(var(--c-bg-rgb)) !important; } .form-control { background-color: rgb(var(--c-bg-rgb)) !important; } /* Таблицы вне .table-responsive (месячные сводки и модалка деталей): запрет nowrap — иначе текст рисуется поверх соседних колонок */ .col-md-4 .table, .modal .table { table-layout: fixed; width: 100%; min-width: 0; } .col-md-4 .table th, .col-md-4 .table td, .modal .table th, .modal .table td { white-space: normal; word-break: break-word; overflow: hidden; } /* Месячные сводки: Категория / Факт / Прогресс */ .col-md-4 .table th:nth-child(1), .col-md-4 .table td:nth-child(1) { width: 42%; } .col-md-4 .table th:nth-child(2), .col-md-4 .table td:nth-child(2) { width: 26%; text-align: right; } .col-md-4 .table th:nth-child(3), .col-md-4 .table td:nth-child(3) { width: 32%; } .col-md-4 .table td { font-size: 0.85rem; } /* Модалка деталей: Дата / Описание / Сумма */ .modal .table th:nth-child(1), .modal .table td:nth-child(1) { width: 30%; } .modal .table th:nth-child(2), .modal .table td:nth-child(2) { width: 45%; } .modal .table th:nth-child(3), .modal .table td:nth-child(3) { width: 25%; text-align: right; } }