* {
box-sizing: border-box;
font-family: 'system-ui', '-apple-system', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue','sans-serif';
font-size: 0.9rem;
}
:root {
--link: #3b82f6;
--link-active: #3b82f6;
--link-hover: dodgerblue;
--main-contrast-color: #FDE400;
--text-black-color: #171717;
--border-na: #DADADA;
--button-na: #D3D3D3;
--hightlighted-text: #0B5EAA;
--alt-container-bg: #0B5EAA;
--cabinet-bg: var(--cabinet-section-bg);
--cabinet-bg-gradient: linear-gradient(270deg, #374151 0%, #3880C2 100%);
--content-bg: #F5FAFF;
--white-bg: #FFFFFF;
--hover-bg: #deecf9;
--active-bg: #deecf9;
/* --hover-bg: #bbc4cd47;
--active-bg: #bbc4cd47; */
--hover-border: #0B5EAA;
--text-non-contrast-color: #FFFFFF5C;
--max-width: 1440px;
--max-content-width: 1280px;
--delete-action: #FC0000;
--delete-action-hover: #C90000;
--sc-active: #1a8607;
--sc-drafts: #55B4E8;
--sc-awaiting_moderation: #D59C0A;
--sc-rejected: #CF0B0B;
--sc-archive: #888888;
--sc-not_paid: #B27418;
--vh: 100%;
--toast-border-color: #eceeef; /* Колір рамки */
--toast-success-bg: #d4edda; /* Фон success */
--toast-success-text: #155724; /* Текст success */
--toast-error-bg: #f8d7da; /* Фон error */
--toast-error-text: #721c24; /* Текст error */
--toast-warning-bg: #fff3cd; /* Фон warning */
--toast-warning-text: #856404; /* Текст warning */
--toast-info-bg: #cce5ff; /* Фон info */
--toast-info-text: #0c5460; /* Текст info */
--toast-flash-green-bg: #c3e6cb; /* Flash green фон */
/* Світла тема періоди*/
--color-breakfast-bg: #FFF4E6; /* Ніжний кремовий */
--color-breakfast-text: #B45F06; /* Теплий коричневий */
--color-second-breakfast-bg: #FFF7D6; /* Світло-жовтий */
--color-second-breakfast-text: #B8860B; /* Насичений жовтий-коричневий */
--color-lunch-bg: #E6F7FF; /* Ніжно-блакитний */
--color-lunch-text: #005B96; /* Глибокий блакитний */
--color-afternoon-snack-bg: #FDF6E3; /* Теплий світло-бежевий */
--color-afternoon-snack-text: #8B4513; /* Шоколадний коричневий */
--color-dinner-bg: #EDE7F6; /* Світло-лавандовий */
--color-dinner-text: #4A148C; /* Темний фіолетовий */
--second-color: #9ca3af;
--cabinet-section-bg: white;
--cabinet-section-bg-light: #f3f5f7;
--main-hover-bg: #f3f5f7;
--main-color: #333;
--main-bg: #f9fafb;
--animation-speed: 300;
--slide-ease: cubic-bezier(0.86, 0, 0.07, 1);
--slide-duration: calc(400ms * 100 / var(--animation-speed));
--slide-delay: calc(450ms * 100 / var(--animation-speed));
--circle-duration: calc(900ms * 100 / var(--animation-speed));
--svg-icon-delete: url('data:image/svg+xml;utf8,');
--svg-icon-add: url('data:image/svg+xml;utf8,');
--svg-icon-projection: url('data:image/svg+xml;utf8,');
/* fill="none" stroke="#121923" можна встановити потім */
--chevron-icon: url('data:image/svg+xml,');
--svg-icon-save: url('data:image/svg+xml;utf8,');
--highlighted-bg: #FFFF80;
--highlighted-text: #000000;
--color-product-bg: #E6FFE6;
--color-product-text: #2E7D32;
--color-dish-bg: #FFF3E0;
--color-dish-text: #EF6C00;
--color-org-bg: #E0F7FA;
--color-org-text: #006064;
--color-student-group-bg: #F3E5F5;
--color-student-group-text: #6A1B9A;
--color-user-bg: #FFFDE7;
--color-user-text: #F9A825;
--color-client-bg: #E8F5E9;
--color-client-text: #388E3C;
--color-menu-bg: #E0F2F1;
--color-menu-text: #00695C;
--color-allowed-menu-bg: #C8E6C9;
--color-allowed-menu-text: #1B5E20;
--color-order-bg: #FFEBEE;
--color-order-text: #C2185B;
--color-invoice-bg: #ECEFF1;
--color-invoice-text: #37474F;
--color-worker-bg: #FFF8E1;
--color-worker-text: #FF8F00;
--color-settings-bg: #EFEBE9;
--color-settings-text: #4E342E;
--color-logout-bg: #FFCDD2;
--color-logout-text: #B71C1C;
--color-feed-bg: #E1F5FE;
--color-feed-text: #01579B;
--color-report-bg: #ECEFF1;
--color-report-text: #455A64;
}
body.dark-theme {
/* Темна тема */
--link-hover: deepskyblue;
--main-color: #f9fafb;
--main-bg: #1e293b;
--cabinet-section-bg: #343f51;
--cabinet-section-bg-light: #455369;
--main-hover-bg: #455369;
/*--hover-bg: #53a0e7ab;*/
--hover-bg: #455369;
--active-bg: #455369;
--hover-border: #0B5EAA;
--toast-border-color: #343a40; /* Колір рамки */
--toast-success-bg: #1e7e34; /* Фон success */
--toast-success-text: #ffffff; /* Текст success */
--toast-error-bg: #b02a37; /* Фон error */
--toast-error-text: #ffffff; /* Текст error */
--toast-warning-bg: #8f6f04; /* Фон warning */
--toast-warning-text: #ffffff; /* Текст warning */
--toast-info-bg: #0069d9; /* Фон info */
--toast-info-text: #ffffff; /* Текст info */
--toast-flash-green-bg: #28a745; /* Flash green фон */
/* Темна тема періоди*/
--color-breakfast-bg: #5D3A00; /* Темний коричневий */
--color-breakfast-text: #FFD7A1; /* Кремовий для тексту */
--color-second-breakfast-bg: #705B00; /* Темно-жовтий */
--color-second-breakfast-text: #FFECB3; /* Світло-жовтий */
--color-lunch-bg: #003B59; /* Темний блакитний */
--color-lunch-text: #ADE3FF; /* Світло-блакитний текст */
--color-afternoon-snack-bg: #4A2C1A; /* Темний шоколадний */
--color-afternoon-snack-text: #FAD4A2; /* Світло-бежевий текст */
--color-dinner-bg: #2E1B36; /* Темний фіолетовий */
--color-dinner-text: #D1BCE3; /* Лавандовий текст */
--ss-disabled-color: #999;
--highlighted-bg: #717101;
--highlighted-text: #FFFFFF;
--color-product-bg: #1B5E20;
--color-product-text: #A5D6A7;
--color-dish-bg: #EF6C00;
--color-dish-text: #FFCCBC;
--color-org-bg: #006064;
--color-org-text: #B2EBF2;
--color-student-group-bg: #4A1B9A;
--color-student-group-text: #CE93D8;
--color-user-bg: #F9A825;
--color-user-text: #FFF9C4;
--color-client-bg: #1B5E20;
--color-client-text: #A5D6A7;
--color-menu-bg: #00695C;
--color-menu-text: #B2DFDB;
--color-allowed-menu-bg: #1B5E20;
--color-allowed-menu-text: #A5D6A7;
--color-order-bg: #B71C1C;
--color-order-text: #FFCDD2;
--color-invoice-bg: #37474F;
--color-invoice-text: #CFD8DC;
--color-worker-bg: #FF8F00;
--color-worker-text: #FFECB3;
--color-settings-bg: #4E342E;
--color-settings-text: #D7CCC8;
--color-logout-bg: #B71C1C;
--color-logout-text: #FFCDD2;
--color-feed-bg: #01579B;
--color-feed-text: #B3E5FC;
--color-report-bg: #37474F;
--color-report-text: #CFD8DC;
}
a {color: var(--link); }
.ui-btn.btn-success {background-color: var(--sc-active); opacity: 0.9;}
.ui-btn.btn-success:hover {background-color: var(--sc-active); opacity: 1;}
.ui-btn.add-btn {
background-image: var(--svg-icon-add); background-size: contain; background-repeat: no-repeat; background-position: left; padding-left: 33px !important; font-size: 13px !important;
}
.ui-btn.save-btn {
background-image: var(--svg-icon-save); background-size: contain; background-repeat: no-repeat; background-position: left; padding-left: 33px; font-size: 13px;
}
.breakfast {background-color: var(--color-breakfast-bg); color: var(--color-breakfast-text);}
.second_breakfast {background-color: var(--color-second-breakfast-bg); color: var(--color-second-breakfast-text);}
.lunch {background-color: var(--color-lunch-bg); color: var(--color-lunch-text);}
.afternoon_snack {background-color: var(--color-afternoon-snack-bg); color: var(--color-afternoon-snack-text);}
.dinner {background-color: var(--color-dinner-bg); color: var(--color-dinner-text);}
.highlighted {background-color: var(--highlighted-bg); color: var(--highlighted-text);}
.tac {text-align: center !important;}
.tar {text-align: right !important;}
.fs-1, .fs-13 { font-size: 13px; }
.fs-4, .fs-24 { font-size: 24px; }
.font-small {font-size: small !important;}
.font-smaller {font-size: smaller !important;}
.fw-7 {font-weight: 700 !important;}
.fw-6 {font-weight: 600 !important;}
.fw-5 {font-weight: 500 !important;}
.fw-3 {font-weight: 300 !important;}
.p-1 {padding: 1em !important;}
.pb-1 {padding-bottom: 1em !important;}
.pb-0 {padding-bottom: 0 !important;}
.pt-1 {padding-top: 1em !important;}
.pl-1 {padding-left: 1em !important;}
.mb-0 {margin-bottom: 0 !important;}
.m-1 {margin: 1em !important;}
.mb-1 {margin-bottom: 1em !important;}
.mb-2 {margin-bottom: 2em !important;}
.mt-0 {margin-top: 0 !important;}
.mt-1 {margin-top: 1em !important;}
.mt-2 {margin-top: 2em !important;}
.lh-2 {line-height: 2em;}
.lh-3 {line-height: 3em;}
.bt-1s {border-top: 1px solid var(--second-color);}
.bb-1s {border-bottom: 1px solid var(--second-color);}
/* .br-1s {border-right: 1px solid var(--second-color);}
.bl-1s {border-left: 1px solid var(--second-color);} */
.bg-gold { background-color: gold !important; }
.nowrap {white-space: nowrap;}
div.ox-auto { overflow-x: auto; }
#categories-tabs{ margin-left: 5px; }
/* tabs styles */
.tabs {
display: flex;
gap: 2px;
position: relative;
}
.tab {
padding: 4px 8px;
background-color: var(--cabinet-section-bg);
border-radius: 10px 10px 0 0;
cursor: pointer;
position: relative;
transition: background 0.2s, color 0.2s;
/* color: #555; */
}
/* .tab:not(.active):hover {
background: #d6d6d6;
} */
.tab:not(.active):hover,
.tab.active {
background-color: var(--active-bg);
/* color: #000; */
/* z-index: 1; */
}
/* General styles */
body, html {
margin: 0;
padding: 0;
font-family: 'system-ui', 'sans-serif';
color: var(--main-color);
background-color: var(--main-bg);
}
div, i, label, option, span {
-webkit-tap-highlight-color: transparent;
}
img, svg {vertical-align: middle;}
table {border-collapse: collapse;}
table.bordered tr:not(:last-of-type) {border-bottom: 1px solid var(--second-color);}
table.f12 {font-size: 12px;}
table.full-bordered tr td, table.full-bordered th {border: 1px solid var(--cabinet-section-bg-light);}
table.full-bordered thead tr {line-height: 2em;}
/* table.bordered tr:first-of-type {border-top: 1px solid var(--second-color);} */
/* table.hover tr {opacity: 0.75;} */
table.hover tr:hover {background-color: #99999912;}
/* App container */
.app-container {
/* display: flex; */
min-height: 100vh;
}
.header-with-button {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.history-back{ display: flex; cursor: pointer; gap: 10px; align-items: center; }
.block-title {
position: absolute;
top: -13px;
left: 20px;
background-color: var(--cabinet-section-bg);
padding: 0 10px;
/* font-size: 18px; */
font-weight: bold;
color: var(--second-color);
border-radius: 8px;
}
.relative {position: relative;}
form input.warning {border-color: var(--main-contrast-color);}
form input[readonly] {cursor: not-allowed;}
/* Sidebar */
.sidebar {
width: 250px;
background-color: #38598e;
color: white;
padding: 10px;
display: flex;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
bottom: 0;
transform: translateX(0);
transition: transform 0.3s;
z-index: 10;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li.user-name {text-align: center; font-weight: 700; color: chartreuse;}
.sidebar li {margin-bottom: 5px;}
.sidebar a {
text-decoration: none;
color: white;
padding: 6px 15px;
display: block;
border-radius: 4px;
transition: background-color 0.3s;
}
.sidebar a:hover {background-color: #3b82f660;}
.sidebar a.active {
outline: 2px solid currentColor;
/*outline-offset: -5px;*/
}
div:not(.user-section) .sidebar li:has(a.active) {
margin-right: -10px;
}
/* Main content */
.main-content {
flex: 1;
margin-left: 250px;
display: flex;
flex-direction: column;
padding: 20px;
transition: margin-left 0.3s;
}
header {margin-bottom: 20px;}
header h1 {
font-size: 24px;
margin: 0;
}
.form-group .error {
border-color: var(--toast-error-bg);
}
.form-group .error-msg {
/* border-bottom-right-radius: 6px; */
/* border-bottom-left-radius: 6px; */
border: 1px solid var(--toast-error-bg);
width: 100%;
background-color: var(--toast-error-bg);
color: var(--toast-error-text);
font-size: small;
border-top: none;
padding: 0 7px;
text-overflow: ellipsis;
}
.vertical-text {
transform: rotate(180deg);
white-space: nowrap;
writing-mode: vertical-rl;
}
.row-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* Загальний стиль для row-item (анімація hover) */
.row-item {
justify-content: space-between;
padding: 10px 15px;
background-color: var(--cabinet-section-bg); /* Темний фон */
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, background-color 0.3s, color 0.3s;
/* line-height: 32px; */
}
div.row-item {display: flex; gap: 10px; align-items: center;}
.row-item:hover, .row-item.active {
/* transform: scale(1.02); */
/* background-color: var(--alt-container-bg);
color: var(--main-contrast-color); */
box-shadow: 0px 0px 5px #999;
}
.row-sender {
font-weight: bold;
}
.row-subject {
color: #6b7280;
}
.second-color {
color: var(--second-color);
}
/* Sidebar toggle button (for mobile) */
.sidebar-toggle {
display: none;
position: fixed;
top: 10px;
right: 10px;
background-color: #3b82f6;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
z-index: 20;
box-shadow: 0px 0px 5px #555;
}
/* Responsive design */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.sidebar-toggle {
display: block;
opacity: 0.8;
}
.sidebar-toggle:hover {opacity: 1;}
}
.display-none {display: none;}
/* Світла тема (основна) */
/* body.light-theme {
background-color: #f9fafb;
color: var(--main-color);
} */
.sidebar.light-theme {
background-color: #1e293b;
color: white;
}
.light-theme .row-item {
border: 1px solid #e5e7eb;
}
.dark-theme .sidebar {
background-color: #111827;
color: #d1d5db;
}
input {
transition: border-color 0.3s, background-color 0.3s;
background-color: var(--cabinet-section-bg);
border: 1px solid var(--active-bg);
color: var(--main-color);
}
input:focus {
outline: none;
border-color: var(--link-hover);
}
/* Кнопка перемикання теми */
.ui-btn {
background-color: #3b82f6;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
/* margin-left: auto;
box-shadow: 0px 0px 5px #555; */
}
.ui-btn.theme-toggle {
width: 50px;
height: 40px;
font-size: x-large;
padding: 0;
font-family: sans-serif;
}
.ui-btn:hover {
background-color: #2563eb;
}
/* Загальний стиль для секції форм */
.ui-form:not(.clean) {
max-width: 650px;
/* margin: 0 auto; */
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 15px;
transition: background-color 0.3s, color 0.3s;
}
.ui-form.w-100 {
max-width: 100%;
}
/* Ховати неактивні форми */
.ui-form.hidden {
display: none;
}
/* Заголовок форми */
.ui-form h2 {
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
/* Поля вводу */
.ui-form textarea:not(.clean){min-height: 5rem;}
.ui-form input:not(.clean),
.ui-form textarea:not(.clean),
.ui-form select:not(.clean) {
width: 100%;
padding: 5px 10px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s, background-color 0.3s;
margin-bottom: 10px;
}
.ui-form input:disabled:not(.clean), .ui-form button:disabled:not(.clean) {
background-color: #d1d5db;
}
body.dark-theme .ui-form input:disabled:not(.clean), body.dark-theme .ui-form button:disabled:not(.clean) {
background-color: var(--cabinet-section-bg);
border-color: var(--cabinet-section-bg);
}
.ui-form .form-group.inline {display: flex; gap: 10px;}
.ui-form .form-group input, .ui-form .form-group select, .ui-form .form-group textarea {margin-bottom: 0;}
.form-group:not(:last-of-type) {
margin-bottom: 10px;
}
.form-group.submit-group {
display: flex;
justify-content: flex-end;
gap: 20px;
}
.ui-form input:focus,
.ui-form textarea:focus,
.ui-form select:focus {
outline: none;
border-color: #3b82f6;
background-color: #f1f5f9;
}
/* Кнопки */
.ui-form button:not(.clean) {
padding: 10px;
font-size: 14px;
/* font-weight: 600; */
color: white;
background-color: #3b82f6;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
/* box-shadow: 0px 0px 5px #555;
margin-bottom: 10px; */
}
.ui-form button:not(.clean):hover {
background-color: #2563eb;
}
.ui-form button.btn-success {
background-color: #1e952b;
}
.ui-form button.btn-secondary {
background-color: var(--second-color);
}
.ui-form button.btn-success:hover {
background-color: #197c25;
}
/* Посилання */
.ui-form p {
text-align: center;
font-size: 14px;
margin: 0;
}
.ui-form a:not(.clean) {
color: #3b82f6;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.ui-form a:hover {
color: #2563eb;
}
/* form-switch wo bootstrap */
.ui-form-switch {display: block; margin: 0 auto; width: 40px; height: 20px; position: relative;}
.ui-form-switch .form-check-input {width: 0; height: 0; opacity: 0;} /*display: inline-block*/
.ui-form-switch .form-check-label {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; border-radius: 12px; cursor: pointer; transition: background-color 0.3s;}
.ui-form-switch .form-check-label::before {content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background-color: white; border-radius: 50%; transition: transform 0.3s;}
.ui-form-switch .form-check-input:checked + .form-check-label {background-color: #4caf50;}
.ui-form-switch .form-check-input:checked + .form-check-label::before {transform: translateX(20px);}
.ui-form .form-group.fieldType-id {text-align: center; font-weight: 700;}
/* Темна тема для форм */
body.dark-theme .ui-form:not(.clean) {
background-color: var(--cabinet-section-bg); /* Темний фон */
color: #d1d5db; /* Світлий текст */
}
body.dark-theme .ui-form input,
body.dark-theme .ui-form textarea,
body.dark-theme .ui-form select {
background-color: #4b5563;
color: #d1d5db;
border-color: #6b7280;
}
body.dark-theme .ui-form input:focus,
body.dark-theme .ui-form textarea:focus,
body.dark-theme .ui-form select:focus {
background-color: #1f2937;
border-color: #3b82f6;
}
input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
box-shadow: 0 0 0px 1000px var(--main-bg) inset !important; /* заміни на свій колір */
-webkit-text-fill-color: var(--main-color) !important; /* заміни на бажаний колір тексту */
transition: background-color 5000s ease-in-out 0s;
}
/* body.dark-theme .ui-form button {
background-color: #2563eb;
}
body.dark-theme .ui-form button:hover {
background-color: #1d4ed8;
} */
.ui-form .form-group {display: flex; gap: 10px; justify-content: flex-start;}
.ui-form .form-group label {min-width: 120px; text-align: left; /*white-space: nowrap;*/ }
.ui-form .form-group.submit-group {justify-content: space-between;}
@media (max-width: 600px) {
.ui-form:not(.clean), .main-content {
padding: 10px;
}
}
@media (max-width: 500px) {
.ui-form .form-group {flex-wrap: wrap;}
}
/* Стилі для підказки (tooltip) */
/* *[data-tooltip] { cursor: pointer; }
.tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
display: none;
margin-top: -20px;
}
.tooltip.show { opacity: 1; display: block; } */
#tooltip {
position: absolute;
display: none;
background: #333;
color: #fff;
padding: 8px;
border-radius: 4px;
pointer-events: none;
z-index: 1000;
max-width: 300px; /* Обмеження ширини */
white-space: normal;
word-wrap: break-word;
}
#tooltip.show {
display: block;
}
/* Стрілки для різних позицій */
#tooltip.position-right:after {
content: '';
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-right-color: #333;
}
#tooltip.position-left:after {
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: #333;
}
#tooltip.position-bottom:after {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-bottom-color: #333;
}
#tooltip.position-top:after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #333;
}
.day-colored .day-1 {background-color: yellow; color: black;}
.day-colored .day-2 {background-color: lightpink; color: black;}
.day-colored .day-3 {background-color: lightgreen; color: black;}
.day-colored .day-4 {background-color: orange; color: black;}
.day-colored .day-5 {background-color: lightblue; color: black;}
.day-colored .day-6 {background-color: purple; color: white;}
.day-colored .day-0 {background-color: firebrick; color: white;}
body .tail-btn.green {background-color: #4CAF50;}
body .tail-btn.green:hover {background-color: #6bc46e;}
body .tail-btn {background-color: #2563eb;}
body .tail-btn:hover {background-color: #3b82f6;}
body .tail-btn {
font-size: 14px;
padding: 4px 12px;
border-radius: 4px;
color: #ffffff;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
box-shadow: none;
font-weight: normal;
}
.daylist-item.active, .daylist-item:hover{opacity: 1; cursor: pointer; box-shadow: 0px 0px 2px 3px #999;}
.daylist-item {
color: black;
opacity: 0.6;
flex: 1 0 14.25%;
text-align: center;
padding: 5px;
margin: 2px;
background-color: var(--cabinet-section-bg);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, background-color 0.3s, color 0.3s;
}
.daylist {max-width: 600px; margin-bottom: 10px;}
@supports (display: grid) {
.daylist {
display: grid;
display: -ms-grid;
display: -moz-grid;
}
.daylist-7 {
grid-template-columns: repeat(auto-fill,minmax(14.25%, 1fr));
}
.daylist-6 {
grid-template-columns: repeat(auto-fill,minmax(16.625%, 1fr));
}
.daylist-5 {
grid-template-columns: repeat(auto-fill,minmax(19.95%, 1fr));
}
}
.sidebar ul li a {
display: flex;
align-items: center;
gap: 8px; /* Відстань між іконкою, текстом і сумою */
}
.cart-icon {
width: 18px;
height: 18px;
vertical-align: middle;
}
#cartTotal, #accountAmount {margin-left: auto; font-weight: bold;}
#cartTotal, .coral {color: coral !important;}
#accountAmount, .chartreuse {color: chartreuse !important;}
.ss-content { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7); }
/* Темна тема для Slim Select */
body.dark-theme .ss-main, body.dark-theme .ss-single-selected, body.dark-theme .ss-content, body.dark-theme .ss-search input {
background-color: #4b5563; /* Фон контейнера вибору */
color: #d1d5db; /* Колір тексту */
border-color: #6b7280; /* Колір рамки */
}
body.dark-theme .ss-list .ss-option {
background-color: #4b5563; /* Фон опцій */
color: #d1d5db;
}
body.dark-theme .ss-list .ss-option:hover,
body.dark-theme .ss-list .ss-option.ss-highlighted {
background-color: #1f2937; /* Фон при наведенні або виділенні */
color: #d1d5db;
}
body.dark-theme .ss-main:focus .ss-single-selected,
body.dark-theme .ss-main.ss-open .ss-single-selected, body.dark-theme .ss-search input:focus {
background-color: #1f2937; /* Фон при фокусі або коли список відкритий */
border-color: #3b82f6; /* Колір рамки при фокусі */
}
section.error-message {
margin-bottom: 20px;
}
section.error-message .row-item {
color: indianred;
}
section.success-message .row-item {
color: limegreen;
}
.d-flex {display: flex;}
.flex-column {flex-direction: column;}
.gap-20 {gap: 20px;}
td.controls {white-space: nowrap;}
td.controls > * {visibility: hidden;}
tr:hover td.controls > *, tr.active td.controls > *, tr.selected td.controls > *, tr.focused td.controls > *, td.controls:hover > * {visibility: visible;}
.row-item .controls {
height: 32px;
}
.controls svg {
stroke: #d1d5db;
}
.controls svg:hover {
stroke: #3b82f6;
cursor: pointer;
}
.controls svg.red:hover {
stroke: var(--delete-action);
}
.hidden { display: none !important; }
.w-100 {width: 100%;}
.mw-100 {max-width: 100%;}
.pointer {cursor: pointer;}
/* loading indicator */
.fetch-loading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.fetch-loading {
/* background: url('/img/preloader.gif') 50% 50% no-repeat rgb(255 255 255 / 0.8); */
background: url(/img/preloader.gif) 50% 50% no-repeat rgb(45 41 41 / 1%)
}
body.dark-theme .fetch-loading {
background: url(/img/preloader.gif) 50% 50% no-repeat rgb(45 41 41 / 1%)
}
body.loading .fetch-loading {
display: block;
}
body.loading > *:not(.fetch-loading) {
filter: blur(2px);
}
/* modal dialog
.x-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.x-modal .modal__dialog {
background: var(--main-bg);
border-radius: 8px;
width: 100%;
max-width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
padding: 20px;
margin: 5px;
}
.x-modal .modal__header {
position: relative;
padding: 0;
margin: 0;
border-bottom: 1px solid #ddd;
}
.x-modal .modal__title {
margin: 0;
font-size: 1.25rem;
font-weight: bold;
}
.x-modal .modal__content {
font-size: 1rem;
line-height: 1.5;
}
.x-modal .modal__footer {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.x-modal .modal__footer button {
margin: 0;
}
.x-modal .modal__close {
position: absolute;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
right: -15px;
top: -22px;
}
.x-modal.is-modal-active {
display: flex;
}
@media (min-width: 768px) {
.x-modal .modal__dialog {
width: auto;
}
}
*/
/** новий стиль для модалки */
.x-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
align-items: flex-start; /* щоб починалося зверху */
justify-content: center;
overflow-y: auto; /* скрол для довгого контенту */
z-index: 1000;
padding: 20px; /* щоб модалка не прилипала до країв */
box-sizing: border-box;
}
/* modal dialog */
.x-modal .modal__dialog {
background: var(--main-bg, #fff);
border-radius: 8px;
width: 100%;
max-width: 600px; /* обмежуємо ширину на ПК */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 100%; /* щоб не виходило за межі екрану */
}
/* header */
.x-modal .modal__header {
position: relative;
/* padding: 1rem; */
border-bottom: 1px solid #ddd;
flex-shrink: 0;
margin-bottom: 0;
}
/* title */
.x-modal .modal__title {
margin: 0;
font-size: 1.25rem;
font-weight: bold;
}
/* content */
.x-modal .modal__content {
/* padding: 1rem; */
font-size: 1rem;
/* line-height: 1.5; */
overflow-y: auto; /* скрол у середині */
flex: 1; /* займає весь простір між header і footer */
}
/* footer */
.x-modal .modal__footer {
padding: 1rem;
display: flex;
justify-content: flex-end;
gap: 1rem;
border-top: 1px solid #ddd;
flex-shrink: 0;
}
.x-modal .modal__footer button {
margin: 0;
}
/* close button */
.x-modal .modal__close {
position: absolute;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
right: 0px;
top: -10px;
}
/* active state */
.x-modal.is-modal-active {
display: flex;
}
/* адаптація */
@media (max-width: 767px) {
.x-modal .modal__dialog {
max-width: 100%;
/* border-radius: 0; /* на моб краще без округлення? */
height: auto;
max-height: 100%;
}
}
body.is-modal-open {
overflow: hidden; /* блокує скрол фону */
}
/* Стилі для фіксованого меню внизу */
.bottom-menu {
border-top-left-radius: 24px;
border-top-right-radius: 24px;
z-index: 999;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #1e293b;
color: white;
display: none;
justify-content: space-around;
align-items: center;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}
.bottom-menu .menu-item {
display: flex;
flex-direction: column;
justify-content: space-around;
color: white;
text-decoration: none;
align-items: center;
align-content: space-between;
height: 100%;
padding-top: 5px;
}
.menu-item .icon.user {
mask: var(--svg-icon-user) no-repeat center;
-webkit-mask: var(--svg-icon-user) no-repeat center;
}
.menu-item .icon.new-listing {
mask: var(--svg-icon-new-listing) no-repeat center;
-webkit-mask: var(--svg-icon-new-listing) no-repeat center;
}
.menu-item .icon.payments {
mask: var(--svg-icon-paymets) no-repeat center;
-webkit-mask: var(--svg-icon-paymets) no-repeat center;
}
.menu-item .icon.contacts {
mask: var(--svg-icon-contacts) no-repeat center;
-webkit-mask: var(--svg-icon-contacts) no-repeat center;
}
.menu-item .icon.prices {
mask: var(--svg-icon-prices) no-repeat center;
-webkit-mask: var(--svg-icon-prices) no-repeat center;
}
.menu-item .icon {
width: 24px;
height: 21px;
position: relative;
}
.menu-item .icon:hover {
/* background-color: var(--main-contrast-color); Ваш бажаний колір */
}
.menu-item .icon.new-listing:hover {
mask: var(--svg-icon-new-listing-active) no-repeat center;
-webkit-mask: var(--svg-icon-new-listing-active) no-repeat center;
}
.menu-item .menu-label {
font-size: 12px;
margin-top: 5px;
color: white;
}
/* Медіа-запит для портретного режиму */
@media screen and (orientation: portrait) {
.bottom-menu {
display: flex;
gap: 5px;
padding-bottom: 5px;
}
.app-container {padding-bottom: 50px;}
/* div.orderCalendar {margin: 0px -15px;} */
#studentList td img.photo_url{
max-width: 80px;
/* margin: -10px; */
}
.fs-1 { font-size: 11px; }
}
/* Медіа-запит для ландшафтного режиму
@media screen and (orientation: landscape) {
.bottom-menu {
height: 50px;
}
.menu-item .icon {
width: 20px;
height: 20px;
}
.menu-label {
font-size: 10px;
}
}
*/
/* mui checkbox */
.mui-checkbox {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.mui-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mui-checkbox .mui-icon {
width: 24px;
height: 24px;
border: 2px solid rgba(0, 0, 0, 0.54);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease;
}
.mui-checkbox .mui-icon svg {
opacity: 0;
transform: scale(0.6);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.mui-checkbox input[type="checkbox"]:checked + .mui-icon {
background-color: #1976d2;
border-color: #1976d2;
}
.mui-checkbox input[type="checkbox"]:checked + .mui-icon svg {
opacity: 1;
transform: scale(1);
}
.mui-checkbox input[type="checkbox"]:focus + .mui-icon {
box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.3);
}
.mui-checkbox:hover .mui-icon {
border-color: #115293;
}
.mui-checkbox input[type="checkbox"]:disabled + .mui-icon {
background-color: rgba(0, 0, 0, 0.12);
border-color: rgba(0, 0, 0, 0.12);
cursor: not-allowed;
}
.mui-checkbox input[type="checkbox"]:disabled + .mui-icon svg {
fill: rgba(0, 0, 0, 0.26);
}
.mui-checkbox .mui-label {
padding-left: 30px;
position: absolute;
width: max-content;
font-size: 16px;
/* color: rgba(0, 0, 0, 0.87); */
}
.mui-checkbox input[type="checkbox"]:disabled ~ .mui-label {
color: rgba(0, 0, 0, 0.38);
}
/* mui checkbox end */
/* Контейнер для toast-повідомлень */
#toast-container {
position: fixed;
z-index: 9999;
display: flex;
flex-direction: column;
padding: 1em;
pointer-events: none; /* Недоступні для взаємодії */
}
/* Toast-повідомлення */
.toast {
position: relative;
background-color: var(--main-bg);
color: var(--main-color);
border: 1px solid var(--toast-border-color);
border-radius: 0.25rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 300px;
margin-bottom: 10px;
pointer-events: auto; /* Дозволяє взаємодію */
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
/* Заголовок toast */
.toast-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: transparent;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--toast-border-color);
}
.toast-header strong {
font-size: 1rem;
font-weight: bold;
}
.toast-header small {
font-size: 0.875rem;
color: var(--main-color);
}
/* Кнопка закриття */
.toast .close {
font-size: 1em;
line-height: 1em;
color: var(--text-black-color);
text-shadow: 0 1px 0 #ffffff;
opacity: 0.5;
padding: 0;
margin-left: 10px;
cursor: pointer;
}
.toast .close:hover {
opacity: 0.75;
}
/* Тіло повідомлення */
.toast-body {
padding: 0.75rem 1.25rem;
word-wrap: break-word;
}
/* Різні типи повідомлень */
.success-message {
background-color: var(--toast-success-bg);
color: var(--toast-success-text);
border-color: var(--toast-success-bg);
}
.error-message {
background-color: var(--toast-error-bg);
color: var(--toast-error-text);
border-color: var(--toast-error-bg);
}
.warning-message {
background-color: var(--toast-warning-bg);
color: var(--toast-warning-text);
border-color: var(--toast-warning-bg);
}
.info-message {
background-color: var(--toast-info-bg);
color: var(--toast-info-text);
border-color: var(--toast-info-bg);
}
/* Flash зелений ефект */
.flash-green {
background-color: var(--toast-flash-green-bg);
color: #ffffff;
}
/* .accordion {
cursor: pointer;
border: none;
outline: none;
transition: 0.4s;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion:after {
content: "";
left: 0;
top: 0;
width: 0.65rem;
aspect-ratio: 3/4;
display: inline-block;
margin-right: 0.25rem;
transform: rotate(180deg);
transition: transform var(--slide-ease) var(--slide-duration) var(--slide-delay);
mask-image: var(--chevron-icon);
mask-size: 100% 100%;
-webkit-mask-image: var(--chevron-icon);
-webkit-mask-size: 100% 100%;
background-color: currentColor;
}
.accordion.is-expanded:after {
transform: rotate(90deg);
}
.accordion-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.chevron a::before {
content: "";
left: 0;
top: 0;
width: 0.65rem;
aspect-ratio: 3/4;
display: inline-block;
margin-right: 0.25rem;
transform: rotate(90deg);
transition: transform var(--slide-ease) var(--slide-duration)
var(--slide-delay);
mask-image: var(--chevron-icon);
mask-size: 100% 100%;
-webkit-mask-image: var(--chevron-icon);
-webkit-mask-size: 100% 100%;
background-color: currentColor;
}
.chevron.closed a::before {
transform: rotate(0deg);
} */
.gap-1 {gap: 1em;}
.gap-05 {gap: .5rem;}
.flex {display: flex;}
.faic {display: flex; align-items: center;}
.flex-grow, .grow {flex-grow: 1;}
.items-center {align-items: center;}
.fd-column {flex-direction: column;}
.wrap {flex-wrap: wrap;}
.j-between {justify-content: space-between;}
.j-center {justify-content: center;}
.j-end {justify-content: end;}
.j-start {justify-content: start;}
.j-around {justify-content: space-around;}
.j-evenly {justify-content: space-evenly;}
.a-center {align-items: center;}
.a-end {align-items: end;}
.a-start {align-items: start;}
.a-stretch {align-items: stretch;}
.x-scroll-container {
display: flex;
gap: 20px;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
justify-content: center;
}
.x-scroll-block {
padding: 10px;
margin: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid var(--border-na);
border-radius: 24px;
cursor: pointer;
text-align: center;
background-color: var(--cabinet-bg);
min-width: 137px;
color: var(--alt-container-bg);
font-weight: 600;
}
.x-scroll-block img {max-width: 120px;}
/* dropdown menu */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
min-width: 9rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
/* color: #212529; */
text-align: left;
list-style: none;
/* background-color: #fff; */
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
will-change: transform;
}
.dropdown:hover .dropdown-menu {
display: block;
}
table tbody tr td.vertical { font-weight: 600; writing-mode: sideways-lr; text-orientation: mixed; text-align: center; }
@keyframes hvr-buzz-out{
10%,
30%{transform:translateX(3px) rotate(2deg)}
20%,
40%{transform:translateX(-3px) rotate(-2deg)}
50%,
70%{transform:translateX(2px) rotate(1deg)}
60%,
80%{transform:translateX(-2px) rotate(-1deg)}
90%{transform:translateX(1px) rotate(0)}
100%{transform:translateX(-1px) rotate(0)}
}
.hvr-buzz-out{transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent}
.hvr-buzz-out:active,
.hvr-buzz-out:focus,
.hvr-buzz-out:hover{animation-name:hvr-buzz-out;animation-duration:.75s;animation-timing-function:linear;animation-iteration-count:1 }
.payorder_box > div{
align-items: center;
height: 100%;
justify-content: space-between;
}
/* випадаюче меню з кнопками */
.order-buttons .order-buttons-holder .buttons {
background: var(--hover-bg);
border-radius: 8px;
box-shadow: 0 4px 8px 0 rgba(32,33,36,.1);
/* display: none; */
padding: 10px;
position: absolute;
top: unset;
bottom: 0;
white-space: nowrap;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
border: 1px solid #c7c7c770;
}
.order-buttons .order-buttons-holder { opacity: 1; position: relative; transition: .35s; /*display: none;*/ }
.order-buttons .order-buttons-holder svg { fill: var(--main-color); }
.order-item-box.active .order-buttons .order-buttons-holder { display: block; }
.order-buttons .order-buttons-holder .buttons-menu { transform: rotate(90deg); }
.order-buttons .order-buttons-holder a.btn-icon-holder { display: flex; align-items: center; }
.order-buttons li {display: flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 500; border-radius: 6px; padding: 2px 7px 2px 1px; transition: .2s ease-in-out; }
.order-buttons li:hover { background-color: var(--highlighted-bg); }
/* .order-buttons li:hover svg {stroke: var(--main-contrast-color); } */
.bottom-menu-badge {
position: absolute;
top: -15px;
right: -6px;
background: #14812f;
color: #fff;
font-size: 10px;
/* font-weight: bold; */
padding: 1px 5px;
border-radius: 12px;
white-space: nowrap;
}
#cartBadgeAmount.bottom-menu-badge {
background: coral;
color: #000;
}
li.user-name {
display: flex;
align-items: center;
justify-content: space-between;
}
.theme-switch {
position: relative;
display: inline-block;
width: 60px;
min-width: 60px;
height: 34px;
transform: scale(0.7);
}
.theme-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--second-color);
transition: 0.4s;
border-radius: 34px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
font-size: 18px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--hover-bg);
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider .icon-light,
.slider .icon-dark {
position: absolute;
top: 46%;
transform: translateY(-50%);
font-size: 19px;
color: black;
filter: drop-shadow(3px 9px 9px black);
}
.slider .icon-light { top: 47%; }
.slider .icon-dark { top: 47%; }
.slider .icon-light {
left: 8px;
}
.slider .icon-dark {
right: 8px;
}
input:checked + .slider .icon-dark {
opacity: 0;
}
input:not(:checked) + .slider .icon-light {
opacity: 0;
}
@media (pointer: coarse), (hover: none) {
/* Стилі для пристроїв із сенсорним екраном pointer: coarse — для сенсорних екранів */
/* Стилі для пристроїв, де hover не підтримується */
tr td.controls > *, tr.active td.controls > *, tr.selected td.controls > *, tr.focused td.controls > *, td.controls > * {
visibility: visible;
}
}
@media (max-width: 768px) {
header .history-back h1 { font-size: 18px; }
}