html {
font-size: 14px;
height: 100%;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
body {
margin-bottom: 60px;
min-height: 100vh;
display: flex;
flex-direction: column;
/* Фоновое изображение с повторением (tiling pattern) */
background-image: url('/images/back.png');
background-repeat: repeat;
background-position: top left;
/* Адаптивный размер фона */
background-size: 130px 117px;
}
main {
flex: 1 0 auto;
/* ПОЛНОСТЬЮ ПРОЗРАЧНЫЙ - ФОН ВИДЕН! */
background-color: transparent;
box-shadow: none;
}
.footer {
flex-shrink: 0;
margin-top: auto;
background-color: transparent;
}
/* ================================================
АДАПТИВНЫЕ РАЗМЕРЫ ФОНОВОГО ПАТТЕРНА
Вертикальный размер = горизонтальный × 0.9
================================================ */
/* Смартфоны (до 767px) */
@media (max-width: 767px) {
body {
background-size: 130px 117px; /* 130 × 0.9 = 117 */
background-attachment: scroll; /* Для производительности */
}
main {
background-color: transparent;
}
}
/* Планшеты портретная ориентация (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
body {
background-size: 162px 146px; /* 162 × 0.9 = 146 */
}
main {
background-color: transparent;
}
}
/* Планшеты альбомная ориентация и маленькие ноутбуки (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
body {
background-size: 195px 176px; /* 195 × 0.9 = 176 */
}
main {
background-color: transparent;
}
}
/* Десктопы и большие ноутбуки (1200px+) */
@media (min-width: 1200px) {
body {
background-size: 195px 176px; /* 195 × 0.9 = 176 */
}
main {
background-color: transparent;
}
}
/* Аккордеон вопросов — фиксированное расположение баллов */
.accordion-button {
display: flex;
align-items: center;
gap: 0;
}
.question-preview {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Увеличенный шрифт для MathJax-формул */
.mathjax-content {
font-size: 1.2em;
}
.question-content.mathjax-content {
font-size: 1.25em;
}
/* Очень большие экраны (1920px+) */
@media (min-width: 1920px) {
body {
background-size: 225px 203px; /* 225 × 0.9 = 203 */
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ================================================
ТЁМНАЯ ТЕМА
Активируется атрибутом data-bs-theme="dark" на
================================================ */
[data-bs-theme="dark"] {
--bs-body-bg: #1a1d23;
--bs-body-color: #e0e0e0;
color-scheme: dark;
}
/* Фон и body */
[data-bs-theme="dark"] body {
background-color: #1a1d23;
background-image: none;
color: #e0e0e0;
}
/* Navbar */
.navbar {
position: relative;
z-index: 1030;
}
[data-bs-theme="dark"] .navbar {
background-color: #22262e !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .navbar .navbar-brand {
color: #d0d0d0 !important;
}
[data-bs-theme="dark"] .navbar .nav-link:hover {
color: #fff !important;
}
[data-bs-theme="dark"] .dropdown-menu {
background-color: #2a2e36;
border-color: #3a3e46;
}
[data-bs-theme="dark"] .dropdown-item {
color: #d0d0d0;
}
[data-bs-theme="dark"] .dropdown-item:hover {
background-color: #3a3e46;
color: #fff;
}
/* Карточки */
[data-bs-theme="dark"] .card {
background-color: #22262e;
border-color: #3a3e46;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
[data-bs-theme="dark"] .card:hover {
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
/* Аккордеон */
[data-bs-theme="dark"] .accordion-item {
background-color: #22262e;
border-color: #3a3e46;
}
[data-bs-theme="dark"] .accordion-button {
background-color: #22262e;
color: #e0e0e0;
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
background-color: #2a2e36;
color: #fff;
}
[data-bs-theme="dark"] .accordion-button::after {
filter: invert(1) grayscale(100%) brightness(200%);
}
[data-bs-theme="dark"] .accordion-body {
background-color: #1e2228;
}
/* Формы */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
background-color: #2a2e36;
border-color: #3a3e46;
color: #e0e0e0;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
background-color: #2e323a;
border-color: #667eea;
color: #f0f0f0;
}
[data-bs-theme="dark"] .form-control::placeholder {
color: #888;
}
/* Таблицы */
[data-bs-theme="dark"] .table {
--bs-table-bg: #22262e;
--bs-table-color: #e0e0e0;
--bs-table-border-color: #3a3e46;
--bs-table-striped-bg: #282c34;
--bs-table-hover-bg: #2e323a;
--bs-table-hover-color: #f0f0f0;
color: #e0e0e0;
border-color: #3a3e46;
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td {
--bs-table-bg: #282c34 !important;
background-color: #282c34 !important;
color: #e0e0e0 !important;
border-color: #3a3e46 !important;
}
/* Модальные окна */
[data-bs-theme="dark"] .modal-content {
background-color: #22262e;
border-color: #3a3e46;
color: #e0e0e0;
}
[data-bs-theme="dark"] .modal-header {
border-bottom-color: #3a3e46;
}
[data-bs-theme="dark"] .modal-footer {
border-top-color: #3a3e46;
}
/* Alerts */
[data-bs-theme="dark"] .alert-success {
background-color: #1a3a2a;
border-color: #2a5a3a;
color: #7dcea0;
}
[data-bs-theme="dark"] .alert-danger {
background-color: #3a1a1a;
border-color: #5a2a2a;
color: #e08080;
}
/* bg-light → тёмный */
[data-bs-theme="dark"] .bg-light {
background-color: #2a2e36 !important;
}
/* Breadcrumbs */
[data-bs-theme="dark"] .btn-outline-primary {
color: #8ea4f0;
border-color: #667eea;
}
[data-bs-theme="dark"] .btn-outline-secondary {
color: #b0b0b0;
border-color: #555;
}
[data-bs-theme="dark"] .btn-outline-danger {
color: #ff8888;
border-color: #cc5555;
}
/* List group */
[data-bs-theme="dark"] .list-group-item {
background-color: #22262e;
border-color: #3a3e46;
color: #e0e0e0;
}
[data-bs-theme="dark"] .list-group-item-success {
background-color: #1a3a2a;
border-color: #2a5a3a;
color: #7dcea0;
}
/* Question cards */
[data-bs-theme="dark"] .question-card {
background-color: #22262e;
}
[data-bs-theme="dark"] .answer-option {
background-color: #2a2e36;
border-color: #3a3e46;
color: #e0e0e0;
}
[data-bs-theme="dark"] .answer-option:hover {
background-color: #2e323a;
}
[data-bs-theme="dark"] .answer-option.selected {
background-color: rgba(102, 126, 234, 0.2);
}
/* Timer */
[data-bs-theme="dark"] .test-timer {
background-color: #22262e;
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
/* Nav tabs (LaTeX help) */
[data-bs-theme="dark"] .nav-tabs .nav-link {
color: #b0b0b0;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
background-color: #2a2e36;
border-color: #3a3e46;
color: #fff;
}
/* code blocks */
[data-bs-theme="dark"] code {
color: #e0a0ff;
}
/* Текст */
[data-bs-theme="dark"] .text-muted {
color: #888 !important;
}
/* Footer */
[data-bs-theme="dark"] .footer {
background-color: transparent;
}
/* Контейнеры остаются прозрачными */
[data-bs-theme="dark"] main .container,
[data-bs-theme="dark"] main .container-fluid {
background-color: transparent !important;
}
/* Иконки навигации — тёмная тема */
/* SVG-картинки — инвертируем */
[data-bs-theme="dark"] .navbar img.nav-icon,
[data-bs-theme="dark"] .navbar .navbar-brand img {
filter: invert(1);
}
/* Bootstrap Icons (шрифтовые) — белый цвет */
[data-bs-theme="dark"] .navbar i.nav-icon,
[data-bs-theme="dark"] .navbar .nav-link i,
[data-bs-theme="dark"] .navbar .dropdown-item i {
color: #fff !important;
}
/* Иконка выхода (img) */
[data-bs-theme="dark"] .navbar .btn-link img {
filter: invert(1);
}
/* Toggler (гамбургер) */
[data-bs-theme="dark"] .navbar-toggler-icon {
filter: invert(1);
}
/* Переключатель темы */
.theme-switch {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 4px 8px;
border-radius: 8px;
user-select: none;
}
.theme-switch:hover {
background-color: rgba(128,128,128,0.15);
}
.theme-switch input {
display: none;
}
.theme-switch-track {
width: 36px;
height: 20px;
background: #ccc;
border-radius: 10px;
position: relative;
transition: background 0.3s;
}
.theme-switch input:checked + .theme-switch-track {
background: #667eea;
}
.theme-switch-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.theme-switch input:checked + .theme-switch-track::after {
transform: translateX(16px);
}