html, body {
background-color: #F8F9F9 !important; /* Явно задаем фон для светлой темы */
height: 100%;
margin: 0;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Темная тема */
html.dark-theme,
html.dark-theme body { /* Применяем к , если класс dark-theme на */
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
/* Общие элементы */
.dark-theme {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
/* Шапка */
.header {
background-color: #F8F9F9 !important; /* Белый фон в светлой теме */
padding-top: 50px;
padding-bottom: 50px;
}
.dark-theme .header {
background-color: #1a1a1a !important; /* Темный фон в темной теме */
}
/* Текст в шапке */
.dark-theme .display-4,
.dark-theme .lead {
color: #e0e0e0 !important;
}
/* Контейнер */
.container {
background-color: #F8F9F9 !important; /* Белый фон в светлой теме */
}
.dark-theme .container {
background-color: #1a1a1a !important; /* Темный фон в темной теме */
}
/* Заголовки и текст */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme .item-title,
.dark-theme .cart-item__title,
.dark-theme .cart-total,
.dark-theme .price__currency,
.dark-theme .cart-item__weight,
.dark-theme .price__weight {
color: #e0e0e0 !important;
}
/* Карточки товаров */
.dark-theme .card {
background-color: #2c2c2c !important;
border-color: #444 !important;
}
/* Корзина */
.dark-theme .cart-item {
border-bottom: 1px solid #444 !important;
}
.dark-theme .cart-item__desc {
color: #e0e0e0 !important;
}
/* Кнопки */
.dark-theme .btn-outline-warning {
color: #ff8c00 !important;
border-color: #ff8c00 !important;
}
.dark-theme .btn-outline-warning:hover {
background-color: #ff8c00 !important;
color: #fff !important;
}
.dark-theme .btn-primary {
background-color: #0056b3 !important;
border-color: #0056b3 !important;
}
.dark-theme .btn-primary:hover {
background-color: #003d82 !important;
border-color: #003d82 !important;
}
.dark-theme .btn-danger {
background-color: #a71d2a !important;
border-color: #a71d2a !important;
}
.dark-theme .btn-danger:hover {
background-color: #8b1722 !important;
border-color: #8b1722 !important;
}
.dark-theme .btn-secondary {
background-color: #444 !important;
border-color: #444 !important;
}
.dark-theme .btn-secondary:hover {
background-color: #555 !important;
border-color: #555 !important;
}
/* Кнопка переключения темы */
.dark-theme #theme-toggle {
background-color: #444 !important;
border-color: #444 !important;
color: #e0e0e0 !important;
}
.dark-theme #theme-toggle:hover {
background-color: #555 !important;
border-color: #555 !important;
}
/* Поле поиска */
.dark-theme .form-control {
background-color: #2c2c2c !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
.dark-theme .form-control::placeholder {
color: #888 !important;
}
/* Счетчики */
.dark-theme .items {
background: #444 !important;
}
.dark-theme .items__control:hover {
background: #ff8c00 !important;
color: #fff !important;
}
/* Уведомления */
.dark-theme .notification-success {
background-color: #1a7c34 !important;
}
.dark-theme .notification-danger {
background-color: #a71d2a !important;
}
/* Корзина: пустое состояние */
.dark-theme .alert-secondary {
background-color: #333 !important;
color: #e0e0e0 !important;
}
/* Кастомное расстояние между кнопками (если me-4 не сработает) */
#currency-select {
margin-right: 20px !important; /* Явный отступ */
}
/* Остальные стили без изменений */
h3, h4 {
font-family: 'Merriweather', serif;
}
.product-img {
width: 265px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.item-title {
font-size: 1.5rem;
font-weight: 500;
font-family: 'Merriweather', serif;
height: 70px;
}
.details-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.items {
font-family: 'Merriweather', serif;
background: #f2ede7;
border-radius: 8px;
width: 120px;
display: flex;
font-size: 18px;
height: 30px;
overflow: hidden;
}
.items__control {
width: 40px;
cursor: pointer;
transition: 0.2s ease-in;
text-align: center;
}
.items__control:hover {
background: #eb5a1e;
color: #FFF;
}
.items__current {
width: 40px;
}
.items.items--small {
width: 90px;
font-size: 16px;
height: 26px;
text-align: center;
}
.items.items--small .items__control {
width: 30px;
}
.items.items--small .items__current {
width: 30px;
}
.price {
text-align: left;
}
.price__weight {
color: #6c757d !important;
font-size: 80%;
line-height: 1;
}
.price__currency {
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
}
.btn-outline-warning {
color: #eb5a1e;
border-color: #eb5a1e;
}
.btn-outline-warning:hover {
color: #FFF;
background-color: #eb5a1e;
border-color: #eb5a1e;
}
.card {
transition: transform 0.2s ease-in-out;
}
.card:hover {
transform: scale(1.02);
}
.cart-item {
animation: slideIn 0.3s ease-in-out;
}
.cart-item__top {
display: flex;
align-items: flex-start;
padding-bottom: 15px;
border-bottom: 1px solid #dee2e6;
margin-bottom: 15px;
}
.cart-item__img img {
max-width: 100px;
height: auto;
}
.cart-item__desc {
padding-top: 15px;
padding-left: 15px;
}
.cart-item__title {
font-family: 'Merriweather', serif;
font-size: 16px;
line-height: 1.2;
font-weight: 600;
margin-bottom: 5px;
}
.cart-item__weight {
color: #6c757d !important;
font-size: 80%;
line-height: 1;
margin-bottom: 15px;
}
.cart-item__details {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.cart-item__details .price__currency {
font-size: 18px;
}
.cart-total {
font-size: 18px;
font-weight: 500;
}
.delivery-cost {
color: #0EA107;
}
.total-price {
color: #EB5A1E;
}
.rouble {
color: #EB5A1E;
}
.none {
display: none;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px;
background-color: #28a745;
color: #fff;
border-radius: 5px;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.notification.show {
opacity: 1;
}
.notification-success {
background-color: #28a745;
}
.notification-danger {
background-color: #dc3545;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Стили для отладки */
.col-md-6 {
box-sizing: border-box;
max-width: 50%;
}
.card {
width: 100%;
box-sizing: border-box;
}