645 lines
15 KiB
CSS
645 lines
15 KiB
CSS
/**
|
|
* Общая оболочка зоотех-страниц: тёмная палитра как у страницы входа,
|
|
* футер, модалка настроек, базовые тёмные стили Bootstrap.
|
|
* Подключать после bootstrap.min.css.
|
|
* Токены и навбар — wesp-zootech-layout.css (подключать после этого файла).
|
|
*/
|
|
|
|
/* Светлая тема: единый фон страницы */
|
|
body {
|
|
background-color: var(--bg-page, #f5f7fa);
|
|
}
|
|
|
|
/* Клик по логотипу в шапке → страница рецептов */
|
|
.nav-brand .nav-logo-link,
|
|
.mobile-brand .nav-logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 0;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
--wesp-accent: var(--primary-color, #2196f3);
|
|
--dm-bg: var(--bg-page, #12181b);
|
|
--dm-surface: var(--surface, #2c3338);
|
|
--dm-field: var(--field, #3e444a);
|
|
--dm-field-disabled: #353a40;
|
|
--dm-field-hover: #4a525a;
|
|
--dm-text: var(--text, #f5f5f5);
|
|
--dm-muted: var(--muted, #a8b0b8);
|
|
--dm-border: var(--border-light, rgba(255, 255, 255, 0.12));
|
|
--dm-border-hover: rgba(255, 255, 255, 0.25);
|
|
--locked-field-bg: var(--dm-field-disabled);
|
|
--locked-field-border: rgba(255, 255, 255, 0.22);
|
|
--locked-field-text: var(--dm-text);
|
|
--locked-field-stripe: rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"] body {
|
|
background-color: var(--dm-bg) !important;
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .app-footer {
|
|
color: var(--dm-muted) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .app-footer .text-muted {
|
|
color: var(--dm-muted) !important;
|
|
}
|
|
|
|
/* Bootstrap-модалки и формы в тёмной теме (не shell/settings — у них свои поверхности) */
|
|
html[data-theme="dark"] body {
|
|
background-color: var(--dm-bg) !important;
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .modal:not(.wesp-shell-modal) .modal-content,
|
|
html[data-theme="dark"] .modal:not(.wesp-shell-modal) .modal-body {
|
|
background-color: var(--dm-bg) !important;
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .modal:not(.wesp-shell-modal) .modal-content {
|
|
border-color: var(--dm-border) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .modal-header,
|
|
html[data-theme="dark"] .modal-footer {
|
|
border-color: var(--dm-border) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .modal-footer {
|
|
background-color: var(--dm-surface) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .form-control,
|
|
html[data-theme="dark"] input:not([readonly]),
|
|
html[data-theme="dark"] select,
|
|
html[data-theme="dark"] textarea {
|
|
background-color: var(--dm-field) !important;
|
|
color: var(--dm-text) !important;
|
|
border-color: var(--dm-border) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .form-control[readonly] {
|
|
background-color: var(--dm-field-disabled) !important;
|
|
color: var(--dm-muted) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .text-muted,
|
|
html[data-theme="dark"] .modal-body label {
|
|
color: var(--dm-muted) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] ::placeholder {
|
|
color: rgba(245, 245, 245, 0.65) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .btn {
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .btn-secondary {
|
|
background-color: var(--dm-field) !important;
|
|
border-color: var(--dm-border) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .btn-secondary:hover {
|
|
background-color: var(--dm-field-hover) !important;
|
|
border-color: var(--dm-border-hover) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .modal-footer .btn-secondary {
|
|
background-color: var(--dm-field) !important;
|
|
border-color: var(--dm-border) !important;
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .modal-footer .btn-secondary:hover {
|
|
background-color: var(--dm-field-hover) !important;
|
|
border-color: var(--dm-border-hover) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .btn-primary,
|
|
html[data-theme="dark"] .modal-footer .btn-primary {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color, #2196f3),
|
|
var(--primary-dark, #1976d2)
|
|
) !important;
|
|
border: none !important;
|
|
color: white !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .btn-primary:hover,
|
|
html[data-theme="dark"] .modal-footer .btn-primary:hover {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-dark, #1976d2),
|
|
var(--primary-darker, #1565c0)
|
|
) !important;
|
|
}
|
|
|
|
/* Модалка настроек */
|
|
.settings-modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 3000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.settings-modal-content {
|
|
background-color: #fff;
|
|
margin: 3vh auto;
|
|
padding: 0;
|
|
border-radius: 12px;
|
|
width: 90%;
|
|
max-width: 520px;
|
|
max-height: min(92vh, 720px);
|
|
box-shadow: 0 8px 18px rgba(17, 24, 39, 0.16), 0 0 0 1px rgba(17, 24, 39, 0.06);
|
|
overflow: hidden;
|
|
font-family: var(--zootech-font);
|
|
font-size: var(--zt-font-body, 0.9375rem);
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.settings-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid var(--border-light, #e2e8f0);
|
|
background: var(--surface, #ffffff);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.settings-modal-header h3 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--text, #1e293b);
|
|
}
|
|
|
|
.settings-modal-header h3 i {
|
|
margin-right: 0.5rem;
|
|
color: var(--primary-color, #2196f3);
|
|
}
|
|
|
|
.settings-close {
|
|
cursor: pointer;
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
opacity: 0.7;
|
|
user-select: none;
|
|
color: var(--text, #1e293b);
|
|
}
|
|
|
|
.settings-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.settings-modal-body {
|
|
padding: 1rem 1.25rem;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.settings-field-hint {
|
|
margin: 0 0 0.75rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.settings-modal-body .form-group {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.settings-user-card {
|
|
background: var(--surface-muted, #f8fafc);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
border: 1px solid var(--border-light, #e2e8f0);
|
|
}
|
|
|
|
.settings-user-card--clickable {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.settings-user-card--clickable:hover {
|
|
background: rgba(var(--primary-rgb, 33, 150, 243), 0.05);
|
|
border-color: var(--primary-color, #2196f3);
|
|
}
|
|
|
|
.settings-user-card--clickable .settings-card-title {
|
|
margin: 0;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.settings-chevron {
|
|
transition: transform 0.3s ease;
|
|
font-size: 0.8rem;
|
|
color: var(--muted, #64748b);
|
|
}
|
|
|
|
.settings-user-card--clickable.open .settings-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.settings-credentials-form {
|
|
background: var(--surface-muted, #f8fafc);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
border: 1px solid var(--border-light, #e2e8f0);
|
|
animation: wespSlideDown 0.3s ease;
|
|
}
|
|
|
|
@keyframes wespSlideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.settings-card-title {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
margin: 0 0 1rem 0;
|
|
color: var(--text, #1e293b);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.settings-card-title i {
|
|
color: var(--primary-color, #2196f3);
|
|
}
|
|
|
|
.settings-theme-card {
|
|
background: var(--surface-muted, #f8fafc);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.25rem;
|
|
border: 1px solid var(--border-light, #e2e8f0);
|
|
min-width: 380px;
|
|
}
|
|
|
|
.settings-theme-card .settings-card-title {
|
|
margin: 0 0 0.75rem 0;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.settings-theme-card .settings-card-title > i:first-child {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.theme-toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.theme-label {
|
|
font-size: 0.9rem;
|
|
color: var(--muted, #64748b);
|
|
}
|
|
|
|
.theme-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 26px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.theme-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.theme-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #e2e8f0;
|
|
border-radius: 26px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.theme-slider::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: 0.3s;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.theme-switch input:checked + .theme-slider {
|
|
background: var(--primary-color, #2196f3);
|
|
}
|
|
|
|
.theme-switch input:checked + .theme-slider::before {
|
|
transform: translateX(22px);
|
|
}
|
|
|
|
.settings-contrast-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--border-light, #e2e8f0);
|
|
}
|
|
|
|
.settings-contrast-row__label {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: var(--text, #1e293b);
|
|
}
|
|
|
|
.settings-modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
padding: 1rem 1.25rem;
|
|
border-top: 1px solid var(--border-light, #e2e8f0);
|
|
flex-shrink: 0;
|
|
background: var(--surface, #ffffff);
|
|
}
|
|
|
|
.settings-sync-card {
|
|
background: var(--surface-muted, #f8fafc);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
border: 1px solid var(--border-light, #e2e8f0);
|
|
}
|
|
|
|
.settings-sync-card.settings-sync-card--clickable {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.settings-sync-card.settings-sync-card--clickable:hover {
|
|
background: rgba(var(--primary-rgb, 33, 150, 243), 0.05);
|
|
border-color: var(--primary-color, #2196f3);
|
|
}
|
|
|
|
.settings-sync-card.settings-sync-card--clickable.open .settings-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.settings-sync-card .settings-card-title {
|
|
margin: 0;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.settings-sync-card .settings-card-title > i:first-child {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.settings-sync-card .settings-card-title .settings-chevron {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.settings-sync-form {
|
|
background: var(--surface-muted, #f8fafc);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
border: 1px solid var(--border-light, #e2e8f0);
|
|
animation: wespSlideDown 0.3s ease;
|
|
}
|
|
|
|
.settings-sync-client-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem 0;
|
|
border-bottom: 1px solid var(--border-light, #e2e8f0);
|
|
}
|
|
|
|
.settings-sync-client-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.settings-sync-client-name {
|
|
font-weight: 500;
|
|
color: var(--text, #1e293b);
|
|
}
|
|
|
|
.settings-sync-client-actions {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.settings-sync-client-actions .btn-sm {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.settings-sync-edit-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.settings-sync-edit-row select {
|
|
min-width: 140px;
|
|
}
|
|
|
|
/* Тёмная тема: модалка настроек и карточки */
|
|
html[data-theme="dark"] .settings-user-card--clickable:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: var(--dm-border-hover);
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-credentials-form {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-color: var(--dm-border);
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-content {
|
|
background-color: var(--dm-surface) !important;
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-header {
|
|
background: var(--dm-field) !important;
|
|
border-color: var(--dm-border) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-header h3 {
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-header h3 i {
|
|
color: var(--primary-color, #2196f3) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-card-title i {
|
|
color: var(--primary-color, #2196f3);
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-close {
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-sync-client-name {
|
|
color: #fff !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-sync-card,
|
|
html[data-theme="dark"] .settings-sync-form {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-color: var(--dm-border);
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-sync-card--clickable:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-user-card,
|
|
html[data-theme="dark"] .settings-theme-card {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-color: var(--dm-border);
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-card-title {
|
|
color: var(--dm-text);
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-body label,
|
|
html[data-theme="dark"] .settings-modal-body .form-label,
|
|
html[data-theme="dark"] .settings-credentials-form label,
|
|
html[data-theme="dark"] .settings-sync-form label {
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-body .text-muted,
|
|
html[data-theme="dark"] .settings-chevron {
|
|
color: var(--dm-muted) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .theme-label {
|
|
color: var(--dm-muted);
|
|
}
|
|
|
|
html[data-theme="dark"] .theme-switch input:checked + .theme-slider {
|
|
background: var(--primary-color, #2196f3) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-footer {
|
|
border-color: var(--dm-border);
|
|
background: var(--dm-field);
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-footer .btn-secondary {
|
|
background-color: var(--dm-field) !important;
|
|
border-color: var(--dm-border) !important;
|
|
color: var(--dm-text) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-footer .btn-primary {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color, #2196f3),
|
|
var(--primary-dark, #1976d2)
|
|
) !important;
|
|
border: none !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .settings-modal-footer .btn-primary:hover {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-dark, #1976d2),
|
|
var(--primary-darker, #1565c0)
|
|
) !important;
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
/* Верхняя панель и мобильное меню: в тёмной теме без яркого синего (как фон/карточки) */
|
|
html[data-theme="dark"] .mobile-navbar {
|
|
background: linear-gradient(180deg, #2c3338 0%, #1e2529 100%) !important;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
html[data-theme="dark"] .mobile-menu {
|
|
background: linear-gradient(180deg, #2c3338 0%, #252b30 100%) !important;
|
|
box-shadow: -4px 0 28px rgba(0, 0, 0, 0.55) !important;
|
|
}
|
|
|
|
#wesp-recipes-boot {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
z-index: 900;
|
|
background: #f5f7fa;
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
transition: opacity 0.28s ease;
|
|
}
|
|
|
|
html[data-theme="dark"] #wesp-recipes-boot {
|
|
background: #12181b;
|
|
}
|
|
|
|
#wesp-recipes-boot.wesp-recipes-boot--hide {
|
|
opacity: 0;
|
|
}
|