336 lines
11 KiB
CSS
336 lines
11 KiB
CSS
/**
|
|
* Organic Tech / Earthy Digital — третья тема зоотехника.
|
|
* Подключать ПОСЛЕДНИМ в <head> (после page-inline стилей).
|
|
*/
|
|
|
|
/* —— Theme picker (3-way) —— */
|
|
.theme-picker {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0.35rem;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.theme-picker__btn {
|
|
flex: 1 1 auto;
|
|
min-width: 5.5rem;
|
|
padding: 0.55rem 0.75rem;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: 40px;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-family: var(--zootech-font);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
|
|
box-shadow 0.2s ease;
|
|
}
|
|
|
|
.theme-picker__btn:hover {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.theme-picker__btn.is-active {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: #fff;
|
|
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.22);
|
|
}
|
|
|
|
html[data-theme="dark"] .theme-picker__btn.is-active {
|
|
color: #fff;
|
|
}
|
|
|
|
/* —— Navbar glassmorphism —— */
|
|
html[data-theme="organic"] .mobile-navbar {
|
|
background: rgba(246, 246, 244, 0.9) !important;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
will-change: backdrop-filter;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
html[data-theme="organic"] .mobile-navbar {
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
}
|
|
}
|
|
|
|
/* —— Logo (дублируем с !important поверх page-inline) —— */
|
|
html[data-theme="organic"] .nav-brand .logo.logo--light-theme,
|
|
html[data-theme="organic"] .mobile-brand .logo.logo--light-theme {
|
|
filter: var(--organic-logo-filter) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .nav-logo-link::after {
|
|
background: linear-gradient(
|
|
105deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 0) 30%,
|
|
rgba(72, 129, 109, 0.35) 50%,
|
|
rgba(255, 255, 255, 0) 70%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
/* —— Cards & sections —— */
|
|
html[data-theme="organic"] .zt-card:hover,
|
|
html[data-theme="organic"] .zt-section:hover {
|
|
box-shadow: var(--box-shadow-hover);
|
|
}
|
|
|
|
html[data-theme="organic"] .zt-card,
|
|
html[data-theme="organic"] .zt-section {
|
|
transition: box-shadow 0.2s ease, border-color var(--transition);
|
|
}
|
|
|
|
/* —— Monospace accents —— */
|
|
html[data-theme="organic"] .zt-mono,
|
|
html[data-theme="organic"] code,
|
|
html[data-theme="organic"] .lab-sandbox-step span,
|
|
html[data-theme="organic"] .norm-calc-badge {
|
|
font-family: var(--zootech-font-mono);
|
|
}
|
|
|
|
/* —— Primary buttons (pill) —— */
|
|
html[data-theme="organic"] .zootech-app-body .btn-primary,
|
|
html[data-theme="organic"] .btn-primary {
|
|
background-color: var(--primary-color) !important;
|
|
border-color: var(--primary-color) !important;
|
|
border-radius: 40px;
|
|
}
|
|
|
|
html[data-theme="organic"] .zootech-app-body .btn-primary:hover:not(:disabled),
|
|
html[data-theme="organic"] .btn-primary:hover:not(:disabled) {
|
|
background-color: var(--primary-dark) !important;
|
|
border-color: var(--primary-dark) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .btn-outline-primary,
|
|
html[data-theme="organic"] .btn-outline-secondary {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* —— Settings cards —— */
|
|
html[data-theme="organic"] .settings-theme-card,
|
|
html[data-theme="organic"] .settings-user-card,
|
|
html[data-theme="organic"] .settings-sync-card {
|
|
background: var(--surface-muted);
|
|
border-color: var(--border-light);
|
|
}
|
|
|
|
html[data-theme="organic"] .settings-card-title {
|
|
color: var(--text);
|
|
}
|
|
|
|
html[data-theme="organic"] .settings-user-card--clickable:hover,
|
|
html[data-theme="organic"] .settings-sync-card--clickable:hover,
|
|
html[data-theme="organic"] .wesp-shell-bsmodal-body--settings .settings-user-card--clickable:hover,
|
|
html[data-theme="organic"] .wesp-shell-bsmodal-body--settings .settings-sync-card--clickable:hover {
|
|
border-color: var(--primary-color);
|
|
background: rgba(var(--primary-rgb), 0.06);
|
|
}
|
|
|
|
/* —— Login —— */
|
|
html[data-theme="organic"] body.zootech-login-body {
|
|
background-color: var(--z-login-bg, #f6f6f4);
|
|
}
|
|
|
|
/* —— Bootstrap tokens & ссылки —— */
|
|
html[data-theme="organic"] {
|
|
--bs-primary: #48816d;
|
|
--bs-primary-rgb: 72, 129, 109;
|
|
--bs-link-color: #48816d;
|
|
--bs-link-hover-color: #3a6b58;
|
|
--bs-success: #48816d;
|
|
--bs-success-rgb: 72, 129, 109;
|
|
}
|
|
|
|
html[data-theme="organic"] .text-primary,
|
|
html[data-theme="organic"] .text-primary i,
|
|
html[data-theme="organic"] i.text-primary {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .badge.bg-primary {
|
|
background-color: var(--primary-color) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .btn-outline-primary {
|
|
color: var(--primary-color) !important;
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .btn-outline-primary:hover:not(:disabled) {
|
|
background-color: var(--primary-color) !important;
|
|
border-color: var(--primary-color) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .zootech-app-body .btn-outline-success,
|
|
html[data-theme="organic"] .paste-recipe-btn.btn-outline-success {
|
|
color: var(--primary-color) !important;
|
|
border-color: rgba(var(--primary-rgb), 0.45) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .zootech-app-body .btn-outline-success:hover:not(:disabled),
|
|
html[data-theme="organic"] .paste-recipe-btn.btn-outline-success:hover:not(:disabled) {
|
|
color: var(--primary-darker) !important;
|
|
background: rgba(var(--primary-rgb), 0.1) !important;
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .btn-link {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .form-check-input:checked {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
html[data-theme="organic"] .form-control:focus,
|
|
html[data-theme="organic"] .form-select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.2);
|
|
}
|
|
|
|
/* —— Дашборд рецептов: иконки в строках (календарь и др.) —— */
|
|
html[data-theme="organic"] .dashboard-stat-card > .card-header i,
|
|
html[data-theme="organic"] .dashboard-stat-card > .card-header .route-icon,
|
|
html[data-theme="organic"] .dashboard-summary-row .list-item-title i,
|
|
html[data-theme="organic"] .dashboard-summary-row .list-item-title i.fas,
|
|
html[data-theme="organic"] .dashboard-summary-row .list-item-leading i {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .dashboard-summary-row .list-container .list-item.active {
|
|
border-color: var(--primary-color) !important;
|
|
background-color: rgba(var(--primary-rgb), 0.08) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .dashboard-summary-row .list-container .list-item:hover {
|
|
border-color: var(--primary-color) !important;
|
|
background-color: rgba(var(--primary-rgb), 0.05) !important;
|
|
}
|
|
|
|
/* —— Иконки по всему UI —— */
|
|
html[data-theme="organic"] .mobile-navbar i.fas:not(.fa-sign-out-alt),
|
|
html[data-theme="organic"] .mobile-navbar i.far,
|
|
html[data-theme="organic"] .zt-section__title > i,
|
|
html[data-theme="organic"] .zt-empty__icon,
|
|
html[data-theme="organic"] .page-title > i,
|
|
html[data-theme="organic"] .page-header i.fas,
|
|
html[data-theme="organic"] .settings-card-title > i:first-child,
|
|
html[data-theme="organic"] .lab-sandbox-header .text-primary,
|
|
html[data-theme="organic"] .lab-sandbox-header i.fas,
|
|
html[data-theme="organic"] .recipe-table-move-group .btn i,
|
|
html[data-theme="organic"] .recipe-drag-handle i,
|
|
html[data-theme="organic"] .zt-k-hub-card__icon,
|
|
html[data-theme="organic"] .zt-k-hub-card__icon i,
|
|
html[data-theme="organic"] .info-label i.fas,
|
|
html[data-theme="organic"] .dispenser-card .list-item-title i,
|
|
html[data-theme="organic"] .alert-info i.fas {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] #recipeEdit .recipe-help-icon-btn {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] #recipeEdit .recipe-help-icon-btn:hover,
|
|
html[data-theme="organic"] #recipeEdit .recipe-help-icon-btn:focus {
|
|
color: var(--primary-dark) !important;
|
|
background: rgba(var(--primary-rgb), 0.14) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .z-login-field-icon svg {
|
|
stroke: var(--primary-color);
|
|
}
|
|
|
|
html[data-theme="organic"] .zootech-app-body .magic-button,
|
|
html[data-theme="organic"] .zootech-app-body .btn-primary-modern {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
|
|
}
|
|
|
|
html[data-theme="organic"] .zt-spinner {
|
|
border-top-color: var(--primary-color) !important;
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
html:not([data-high-contrast="false"])[data-theme="organic"] .mobile-navbar,
|
|
html[data-high-contrast="true"][data-theme="organic"] .mobile-navbar {
|
|
background: var(--bg-white) !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
html:not([data-high-contrast="false"])[data-theme="organic"] .zt-card,
|
|
html:not([data-high-contrast="false"])[data-theme="organic"] .zt-section,
|
|
html[data-high-contrast="true"][data-theme="organic"] .zt-card,
|
|
html[data-high-contrast="true"][data-theme="organic"] .zt-section {
|
|
border-color: var(--border-light);
|
|
box-shadow: none;
|
|
}
|
|
|
|
html:not([data-high-contrast="false"]) .form-control:focus,
|
|
html:not([data-high-contrast="false"]) .form-select:focus,
|
|
html[data-high-contrast="true"] .form-control:focus,
|
|
html[data-high-contrast="true"] .form-select:focus {
|
|
box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--primary-color);
|
|
}
|
|
|
|
html:not([data-high-contrast="false"])[data-theme="organic"] .btn-outline-primary,
|
|
html:not([data-high-contrast="false"])[data-theme="organic"] .zootech-app-body .btn-outline-success,
|
|
html:not([data-high-contrast="false"])[data-theme="organic"] .paste-recipe-btn.btn-outline-success,
|
|
html[data-high-contrast="true"][data-theme="organic"] .btn-outline-primary,
|
|
html[data-high-contrast="true"][data-theme="organic"] .zootech-app-body .btn-outline-success,
|
|
html[data-high-contrast="true"][data-theme="organic"] .paste-recipe-btn.btn-outline-success {
|
|
border-width: 2px;
|
|
}
|
|
|
|
html:not([data-high-contrast="false"])[data-theme="organic"] .dashboard-summary-row .list-container .list-item.active,
|
|
html[data-high-contrast="true"] .dashboard-summary-row .list-container .list-item.active {
|
|
border-left-width: 3px;
|
|
border-left-style: solid;
|
|
border-left-color: var(--primary-color);
|
|
background-color: rgba(var(--primary-rgb), 0.12) !important;
|
|
}
|
|
}
|
|
|
|
html[data-high-contrast="true"][data-theme="organic"] .mobile-navbar {
|
|
background: var(--bg-white) !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
html[data-high-contrast="true"] .zt-card,
|
|
html[data-high-contrast="true"] .zt-section {
|
|
border-color: var(--border-light);
|
|
box-shadow: none;
|
|
}
|
|
|
|
html[data-high-contrast="true"] .form-control:focus,
|
|
html[data-high-contrast="true"] .form-select:focus {
|
|
box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--primary-color);
|
|
}
|
|
|
|
html[data-high-contrast="true"] .btn-outline-primary,
|
|
html[data-high-contrast="true"] .zootech-app-body .btn-outline-success,
|
|
html[data-high-contrast="true"] .paste-recipe-btn.btn-outline-success {
|
|
border-width: 2px;
|
|
}
|
|
|
|
html[data-high-contrast="true"] .dashboard-summary-row .list-container .list-item.active {
|
|
border-left-width: 3px;
|
|
border-left-style: solid;
|
|
border-left-color: var(--primary-color);
|
|
background-color: rgba(var(--primary-rgb), 0.12) !important;
|
|
}
|