497 lines
8.4 KiB
CSS
497 lines
8.4 KiB
CSS
/* это самые простые стили, чтоб все было чисто и понятно */
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
background: #f2f2f2; /* серый фон */
|
||
color: #222; /* темный текст */
|
||
font-family: Arial, sans-serif; /* простой шрифт */
|
||
}
|
||
|
||
button, input, select {
|
||
font: inherit; /* шрифт как у всех */
|
||
}
|
||
|
||
button {
|
||
cursor: pointer; /* рука при наведении */
|
||
}
|
||
|
||
/* прячу то что не надо показывать */
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
/* экран входа */
|
||
.auth-screen {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* белая карточка входа */
|
||
.auth-card {
|
||
width: 380px;
|
||
max-width: 100%;
|
||
padding: 30px;
|
||
background: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* большой текст DEMO */
|
||
.auth-logo {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.auth-logo small {
|
||
display: block;
|
||
font-size: 12px;
|
||
color: #888;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* заголовок входа */
|
||
.auth-heading {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.auth-heading p {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* форма входа */
|
||
.auth-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px; /* отступы между полями */
|
||
}
|
||
|
||
.auth-form label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.auth-form input {
|
||
height: 40px;
|
||
padding: 0 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* синяя кнопка */
|
||
.auth-button {
|
||
height: 42px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: #3366ff;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* ссылка регистрация */
|
||
.auth-switch {
|
||
margin-top: 15px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
.auth-switch button {
|
||
border: 0;
|
||
background: none;
|
||
color: #3366ff;
|
||
}
|
||
|
||
/* красный текст ошибки */
|
||
.auth-error {
|
||
min-height: 18px;
|
||
color: red;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* главное окно */
|
||
.app {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* меню слева */
|
||
.sidebar {
|
||
width: 220px;
|
||
padding: 20px 12px;
|
||
background: white;
|
||
border-right: 1px solid #ddd;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* логотип */
|
||
.logo {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.logo span {
|
||
display: block;
|
||
font-size: 11px;
|
||
color: #888;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* кто вошел */
|
||
.user-panel {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin: 20px 0;
|
||
padding: 10px;
|
||
background: #f2f2f2;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* кружок с буквой */
|
||
.user-avatar {
|
||
width: 35px;
|
||
height: 35px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #3366ff;
|
||
color: white;
|
||
font-weight: bold;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.user-info strong {
|
||
display: block;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.user-info span {
|
||
font-size: 12px;
|
||
color: #888;
|
||
}
|
||
|
||
/* кнопки меню */
|
||
.nav-button {
|
||
width: 100%;
|
||
text-align: left;
|
||
padding: 10px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: none;
|
||
color: #444;
|
||
}
|
||
|
||
/* активная кнопка меню */
|
||
.nav-button.active {
|
||
background: #e6ecff;
|
||
color: #2244cc;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* кнопка выйти */
|
||
.logout-button {
|
||
margin-top: auto; /* прижимаю вниз */
|
||
padding: 10px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: none;
|
||
color: #666;
|
||
text-align: left;
|
||
}
|
||
|
||
/* правая часть */
|
||
.content {
|
||
flex: 1;
|
||
padding: 30px;
|
||
}
|
||
|
||
/* верх с названием */
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.header p {
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* синяя кнопка добавить */
|
||
.primary-button {
|
||
padding: 10px 16px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: #3366ff;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* сетка товаров */
|
||
.cards-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
/* одна карточка товара */
|
||
.card {
|
||
background: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.card h3 {
|
||
font-size: 16px;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.card-id {
|
||
font-size: 12px;
|
||
color: #888;
|
||
}
|
||
|
||
.card-price {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.card-info {
|
||
font-size: 13px;
|
||
color: #555;
|
||
}
|
||
|
||
.card-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* маленькие кнопки */
|
||
.action-button {
|
||
padding: 6px 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 6px;
|
||
background: white;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* кнопка удалить красная */
|
||
.action-button.delete {
|
||
color: red;
|
||
border-color: #ffaaaa;
|
||
}
|
||
|
||
/* таблица */
|
||
.table-wrapper {
|
||
background: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 10px;
|
||
overflow-x: auto; /* чтоб на телефоне листалась */
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse; /* убираю двойные линии */
|
||
}
|
||
|
||
th {
|
||
text-align: left;
|
||
padding: 10px;
|
||
background: #f5f5f5;
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
td {
|
||
padding: 10px;
|
||
border-top: 1px solid #eee;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.table-actions {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* плашка статуса */
|
||
.status {
|
||
background: #e6ecff;
|
||
padding: 3px 8px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* когда нет данных */
|
||
.empty-page {
|
||
background: white;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 10px;
|
||
padding: 40px;
|
||
text-align: center;
|
||
color: #888;
|
||
}
|
||
|
||
/* когда ошибка */
|
||
.error-page {
|
||
background: #ffe6e6;
|
||
border: 1px solid #ffaaaa;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
color: red;
|
||
}
|
||
|
||
/* темное окно формы */
|
||
.modal {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* затемнение сзади */
|
||
.modal-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* белая форма */
|
||
.modal-content {
|
||
position: relative;
|
||
width: 450px;
|
||
max-width: 100%;
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* верх формы */
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
/* кнопка X */
|
||
.close-button {
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 6px;
|
||
background: white;
|
||
}
|
||
|
||
/* поля формы */
|
||
.form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.form label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.form input, .form select {
|
||
height: 38px;
|
||
padding: 0 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* кнопки сохранить отмена */
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
}
|
||
|
||
.secondary-button {
|
||
padding: 8px 14px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 6px;
|
||
background: white;
|
||
}
|
||
|
||
/* товары внутри заказа */
|
||
.order-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
border: 1px solid #eee;
|
||
border-radius: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.order-item-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* сообщение снизу */
|
||
.toast {
|
||
position: fixed;
|
||
right: 20px;
|
||
bottom: 20px;
|
||
background: #333;
|
||
color: white;
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
opacity: 0; /* прячу */
|
||
}
|
||
|
||
/* показываю сообщение */
|
||
.toast.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* для телефона */
|
||
@media (max-width: 800px) {
|
||
.app {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 100%;
|
||
}
|
||
|
||
.content {
|
||
padding: 15px;
|
||
}
|
||
|
||
.header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
}
|