4206 lines
82 KiB
HTML
4206 lines
82 KiB
HTML
|
<!DOCTYPE html><html lang="ru"><head>
|
|||
|
|
<script type="module" src="/@vite/client"></script>
|
|||
|
|
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta name="description" content="Admin Panel">
|
|||
|
|
<title>Admin Panel</title>
|
|||
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
|||
|
|
<meta name="theme-color" content="#228be6">
|
|||
|
|
<style type="text/css" data-vite-dev-id="/Users/tony/code/new.discours.io/core/panel/styles/Form.module.css">/* =================================================================
|
|||
|
|
СОВРЕМЕННАЯ МИНИМАЛИСТИЧНАЯ ДИЗАЙН-СИСТЕМА
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
/* CSS Переменные */
|
|||
|
|
:root {
|
|||
|
|
--form-primary: #3b82f6;
|
|||
|
|
--form-primary-hover: #2563eb;
|
|||
|
|
--form-primary-light: #dbeafe;
|
|||
|
|
--form-success: #10b981;
|
|||
|
|
--form-error: #ef4444;
|
|||
|
|
--form-warning: #f59e0b;
|
|||
|
|
--form-text: #1f2937;
|
|||
|
|
--form-text-light: #6b7280;
|
|||
|
|
--form-text-muted: #9ca3af;
|
|||
|
|
--form-bg: #ffffff;
|
|||
|
|
--form-bg-light: #f9fafb;
|
|||
|
|
--form-bg-hover: #f3f4f6;
|
|||
|
|
--form-divider: #e5e7eb;
|
|||
|
|
--form-divider-hover: #d1d5db;
|
|||
|
|
--form-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
--form-transition-fast: all 0.15s ease;
|
|||
|
|
--form-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|||
|
|
--form-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
КОНТЕЙНЕРЫ И СТРУКТУРА
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._form_9xjdu_31 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
padding: 2rem;
|
|||
|
|
background: var(--form-bg);
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 0.75rem;
|
|||
|
|
animation: _formSlideIn_9xjdu_1 0.3s ease-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fieldGroup_9xjdu_42 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._content_9xjdu_49 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
ЛЕЙБЛЫ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._label_9xjdu_59 {
|
|||
|
|
display: block;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._label_9xjdu_59 > span:first-child {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._labelText_9xjdu_77 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
transition: var(--form-transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._labelIcon_9xjdu_89 {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
opacity: 0.7;
|
|||
|
|
transition: var(--form-transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fieldGroup_9xjdu_42:focus-within ._labelText_9xjdu_77 {
|
|||
|
|
color: var(--form-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fieldGroup_9xjdu_42:focus-within ._labelIcon_9xjdu_89 {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._required_9xjdu_104 {
|
|||
|
|
color: var(--form-error);
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-left: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._labelInfo_9xjdu_110 {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
margin-left: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
ПОЛЯ ВВОДА - СОВРЕМЕННЫЙ МИНИМАЛИЗМ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._input_9xjdu_121,
|
|||
|
|
._textarea_9xjdu_122,
|
|||
|
|
._select_9xjdu_123 {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0.875rem 0;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
border-bottom: 2px solid var(--form-divider);
|
|||
|
|
outline: none;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
font-family: inherit;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._input_9xjdu_121::placeholder,
|
|||
|
|
._textarea_9xjdu_122::placeholder {
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
opacity: 1;
|
|||
|
|
transition: var(--form-transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Эффект плавающего placeholder */
|
|||
|
|
._input_9xjdu_121:focus::placeholder,
|
|||
|
|
._textarea_9xjdu_122:focus::placeholder {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Фокус состояния с микро-анимацией */
|
|||
|
|
._input_9xjdu_121:focus,
|
|||
|
|
._textarea_9xjdu_122:focus,
|
|||
|
|
._select_9xjdu_123:focus {
|
|||
|
|
border-bottom-color: var(--form-primary);
|
|||
|
|
background: transparent;
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Эффект ripple для фокуса */
|
|||
|
|
._fieldGroup_9xjdu_42:focus-within::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 0;
|
|||
|
|
height: 2px;
|
|||
|
|
background: var(--form-primary);
|
|||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fieldGroup_9xjdu_42:focus-within::after {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Состояние ошибки с анимацией */
|
|||
|
|
._input_9xjdu_121._error_9xjdu_179,
|
|||
|
|
._textarea_9xjdu_122._error_9xjdu_179,
|
|||
|
|
._select_9xjdu_123._error_9xjdu_179 {
|
|||
|
|
border-bottom-color: var(--form-error);
|
|||
|
|
animation: _shake_9xjdu_1 0.3s ease-in-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._inputError_9xjdu_186 {
|
|||
|
|
border-bottom-color: var(--form-error) !important;
|
|||
|
|
color: var(--form-error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes _shake_9xjdu_1 {
|
|||
|
|
0%, 100% { transform: translateX(0); }
|
|||
|
|
25% { transform: translateX(-3px); }
|
|||
|
|
75% { transform: translateX(3px); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Состояние успеха */
|
|||
|
|
._input_9xjdu_121._success_9xjdu_198,
|
|||
|
|
._textarea_9xjdu_122._success_9xjdu_198,
|
|||
|
|
._select_9xjdu_123._success_9xjdu_198 {
|
|||
|
|
border-bottom-color: var(--form-success);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Отключенное состояние с улучшенным дизайном */
|
|||
|
|
._input_9xjdu_121._disabled_9xjdu_205,
|
|||
|
|
._textarea_9xjdu_122._disabled_9xjdu_205,
|
|||
|
|
._select_9xjdu_123._disabled_9xjdu_205 {
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border-bottom-style: dashed;
|
|||
|
|
border-bottom-color: var(--form-divider-hover);
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
opacity: 0.7;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Эффект "замочка" для disabled полей (кроме communityDisplay) */
|
|||
|
|
._input_9xjdu_121._disabled_9xjdu_205:not(._communityDisplay_9xjdu_218)::after,
|
|||
|
|
._textarea_9xjdu_122._disabled_9xjdu_205::after,
|
|||
|
|
._select_9xjdu_123._disabled_9xjdu_205::after {
|
|||
|
|
content: "🔒";
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0.5rem;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Специальные стили для отображения сообщества */
|
|||
|
|
._communityDisplay_9xjdu_218 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
background: var(--form-bg-light) !important;
|
|||
|
|
border: 1px solid var(--form-divider) !important;
|
|||
|
|
border-bottom: 1px solid var(--form-divider) !important; /* Переопределяем стиль input */
|
|||
|
|
border-radius: 0.375rem;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
color: var(--form-text-light);
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._communityDisplay_9xjdu_218::before {
|
|||
|
|
content: "🏢";
|
|||
|
|
font-size: 1rem;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._communityDisplay_9xjdu_218::after {
|
|||
|
|
content: "🔒";
|
|||
|
|
margin-left: auto;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Hover эффект для интерактивных элементов */
|
|||
|
|
._input_9xjdu_121:not(._disabled_9xjdu_205):not(:focus):hover,
|
|||
|
|
._textarea_9xjdu_122:not(._disabled_9xjdu_205):not(:focus):hover,
|
|||
|
|
._select_9xjdu_123:not(._disabled_9xjdu_205):not(:focus):hover {
|
|||
|
|
border-bottom-color: var(--form-divider-hover);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Специальная обработка textarea */
|
|||
|
|
._textarea_9xjdu_122 {
|
|||
|
|
min-height: 6rem;
|
|||
|
|
resize: vertical;
|
|||
|
|
padding-top: 0.75rem;
|
|||
|
|
padding-bottom: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Обновленный select с современным дизайном */
|
|||
|
|
._select_9xjdu_123 {
|
|||
|
|
appearance: none;
|
|||
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-position: right 0.75rem center;
|
|||
|
|
background-size: 1rem;
|
|||
|
|
padding-right: 2.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._select_9xjdu_123._disabled_9xjdu_205 {
|
|||
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
СООБЩЕНИЯ ОБ ОШИБКАХ И ПОДСКАЗКИ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._fieldError_9xjdu_294 {
|
|||
|
|
color: var(--form-error);
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
margin-top: 0.375rem;
|
|||
|
|
padding-left: 0.75rem;
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(-0.5rem);
|
|||
|
|
animation: _slideInError_9xjdu_1 0.3s ease forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes _slideInError_9xjdu_1 {
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._errorIcon_9xjdu_311 {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-right: 0.375rem;
|
|||
|
|
animation: _pulse_9xjdu_1 1s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes _pulse_9xjdu_1 {
|
|||
|
|
0%, 100% { opacity: 1; }
|
|||
|
|
50% { opacity: 0.5; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Улучшенные hints с иконками */
|
|||
|
|
._hint_9xjdu_323 {
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
margin-top: 0.375rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
transition: var(--form-transition-fast);
|
|||
|
|
padding-left: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._hint_9xjdu_323::before {
|
|||
|
|
content: "💡";
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Специальные стили для информационных hint'ов */
|
|||
|
|
._hint_9xjdu_323._warningHint_9xjdu_343 {
|
|||
|
|
color: var(--form-warning);
|
|||
|
|
background: rgba(245, 158, 11, 0.08);
|
|||
|
|
padding: 0.5rem 0.75rem;
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
border-left: 3px solid var(--form-warning);
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._hint_9xjdu_323._warningHint_9xjdu_343::before {
|
|||
|
|
content: "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
ТАБЫ И НАВИГАЦИЯ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._tabs_9xjdu_360 {
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 1px solid var(--form-divider);
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360 {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 1rem 1.5rem;
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--form-text-light);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 2px;
|
|||
|
|
background: var(--form-primary);
|
|||
|
|
transform: scaleX(0);
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
transform-origin: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360:hover {
|
|||
|
|
color: var(--form-text);
|
|||
|
|
background: var(--form-bg-hover);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360:hover::before {
|
|||
|
|
transform: scaleX(0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360._active_9xjdu_406 {
|
|||
|
|
color: var(--form-primary);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360._active_9xjdu_406::before {
|
|||
|
|
transform: scaleX(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tabIcon_9xjdu_415 {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
transition: var(--form-transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360:hover ._tabIcon_9xjdu_415,
|
|||
|
|
._tab_9xjdu_360._active_9xjdu_406 ._tabIcon_9xjdu_415 {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
КНОПКИ НОВОГО ПОКОЛЕНИЯ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._button_9xjdu_429 {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
line-height: 1.25;
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-decoration: none;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: -100%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|||
|
|
transition: left 0.5s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429:hover::before {
|
|||
|
|
left: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429:active {
|
|||
|
|
transform: translateY(1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429:disabled {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
transform: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429:disabled::before {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429._primary_9xjdu_478 {
|
|||
|
|
background: linear-gradient(135deg, var(--form-primary), var(--form-primary-hover));
|
|||
|
|
color: white;
|
|||
|
|
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429._primary_9xjdu_478:hover:not(:disabled) {
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429._secondary_9xjdu_489 {
|
|||
|
|
background: var(--form-bg);
|
|||
|
|
color: var(--form-text);
|
|||
|
|
border: 2px solid var(--form-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429._secondary_9xjdu_489:hover:not(:disabled) {
|
|||
|
|
background: var(--form-bg-hover);
|
|||
|
|
border-color: var(--form-divider-hover);
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
box-shadow: var(--form-shadow-subtle);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
СПЕЦИАЛЬНЫЕ КОМПОНЕНТЫ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._codePreview_9xjdu_506 {
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._codePreview_9xjdu_506:hover {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
background: var(--form-primary-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._spinner_9xjdu_526 {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 1rem;
|
|||
|
|
height: 1rem;
|
|||
|
|
border: 2px solid var(--form-text-muted);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border-top-color: var(--form-primary);
|
|||
|
|
animation: _spin_9xjdu_526 1s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes _spin_9xjdu_526 {
|
|||
|
|
to { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
АНИМАЦИИ И ПЕРЕХОДЫ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
@keyframes _slideIn_9xjdu_1 {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(1rem);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes _fadeIn_9xjdu_1 {
|
|||
|
|
from { opacity: 0; }
|
|||
|
|
to { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
КОНТЕЙНЕРЫ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._fieldGroup_9xjdu_42 {
|
|||
|
|
animation: _slideIn_9xjdu_1 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._form_9xjdu_31 {
|
|||
|
|
animation: _fadeIn_9xjdu_1 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
АДАПТИВНОСТЬ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
._form_9xjdu_31 {
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fieldGroup_9xjdu_42 {
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._input_9xjdu_121,
|
|||
|
|
._textarea_9xjdu_122,
|
|||
|
|
._select_9xjdu_123 {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
padding: 0.75rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tabs_9xjdu_360 {
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
border-bottom: 1px solid var(--form-divider);
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tabs_9xjdu_360::-webkit-scrollbar {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360 {
|
|||
|
|
padding: 0.875rem 1rem;
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429 {
|
|||
|
|
padding: 0.75rem 1.25rem;
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._labelText_9xjdu_77 {
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._hint_9xjdu_323 {
|
|||
|
|
font-size: 0.6875rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 480px) {
|
|||
|
|
._form_9xjdu_31 {
|
|||
|
|
padding: 1rem;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fieldGroup_9xjdu_42 {
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._tab_9xjdu_360 {
|
|||
|
|
padding: 0.75rem 0.875rem;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._labelText_9xjdu_77 {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._input_9xjdu_121,
|
|||
|
|
._textarea_9xjdu_122,
|
|||
|
|
._select_9xjdu_123 {
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
padding: 0.625rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_9xjdu_429 {
|
|||
|
|
padding: 0.625rem 1rem;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._hint_9xjdu_323 {
|
|||
|
|
font-size: 0.625rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._labelIcon_9xjdu_89 {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
ACCESSIBILITY
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._visuallyHidden_9xjdu_666 {
|
|||
|
|
position: absolute !important;
|
|||
|
|
width: 1px !important;
|
|||
|
|
height: 1px !important;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
margin: -1px !important;
|
|||
|
|
overflow: hidden !important;
|
|||
|
|
clip: rect(0, 0, 0, 0) !important;
|
|||
|
|
white-space: nowrap !important;
|
|||
|
|
border: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
РОЛИ - КОМПОНЕНТ ДЛЯ ВЫБОРА РОЛЕЙ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._rolesGrid_9xjdu_682 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689 {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 1.25rem;
|
|||
|
|
background: var(--form-bg);
|
|||
|
|
border: 2px solid var(--form-divider);
|
|||
|
|
border-radius: 0.75rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: -100%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
|
|||
|
|
transition: left 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689:hover {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689:hover::before {
|
|||
|
|
left: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689._roleCardSelected_9xjdu_724 {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
background: var(--form-primary-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689._roleCardSelected_9xjdu_724::before {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689:active {
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleHeader_9xjdu_737 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleName_9xjdu_744 {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
margin: 0;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCardSelected_9xjdu_724 ._roleName_9xjdu_744 {
|
|||
|
|
color: var(--form-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleDescription_9xjdu_756 {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
color: var(--form-text-light);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCardSelected_9xjdu_724 ._roleDescription_9xjdu_756 {
|
|||
|
|
color: var(--form-text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCheckmark_9xjdu_767 {
|
|||
|
|
width: 1.5rem;
|
|||
|
|
height: 1.5rem;
|
|||
|
|
border: 2px solid var(--form-divider);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: relative;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
background: var(--form-bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689:hover ._roleCheckmark_9xjdu_767 {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCardSelected_9xjdu_724 ._roleCheckmark_9xjdu_767 {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
background: var(--form-primary);
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCheckmark_9xjdu_767::before {
|
|||
|
|
content: '✓';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%) scale(0);
|
|||
|
|
color: white;
|
|||
|
|
font-weight: bold;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCardSelected_9xjdu_724 ._roleCheckmark_9xjdu_767::before {
|
|||
|
|
transform: translate(-50%, -50%) scale(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689._adminRole_9xjdu_804 {
|
|||
|
|
border-color: var(--form-warning);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689._adminRole_9xjdu_804::before {
|
|||
|
|
background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689._adminRole_9xjdu_804._roleCardSelected_9xjdu_724 {
|
|||
|
|
background: rgba(245, 158, 11, 0.1);
|
|||
|
|
border-color: var(--form-warning);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689._systemRole_9xjdu_817 {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689._systemRole_9xjdu_817 ._roleDescription_9xjdu_756::after {
|
|||
|
|
content: ' (системная роль)';
|
|||
|
|
font-style: italic;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
СЕКЦИИ ФОРМЫ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._section_9xjdu_831 {
|
|||
|
|
background: var(--form-bg);
|
|||
|
|
border-radius: 0.75rem;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._section_9xjdu_831::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 3px;
|
|||
|
|
background: linear-gradient(90deg, var(--form-primary), var(--form-primary-light));
|
|||
|
|
border-radius: 0.75rem 0.75rem 0 0;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._section_9xjdu_831:hover::before,
|
|||
|
|
._section_9xjdu_831:focus-within::before {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._section_9xjdu_831:hover {
|
|||
|
|
border-color: var(--form-divider-hover);
|
|||
|
|
box-shadow: var(--form-shadow-subtle);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._section_9xjdu_831:focus-within {
|
|||
|
|
border-color: var(--form-primary-light);
|
|||
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._sectionTitle_9xjdu_868 {
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
margin: 0 0 0.75rem 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._sectionDescription_9xjdu_878 {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
color: var(--form-text-light);
|
|||
|
|
margin: 0 0 1.5rem 0;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._actions_9xjdu_885 {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1rem;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
padding-top: 2rem;
|
|||
|
|
border-top: 1px solid var(--form-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._actions_9xjdu_885 ._button_9xjdu_429 {
|
|||
|
|
min-width: 120px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
._rolesGrid_9xjdu_682 {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689 {
|
|||
|
|
padding: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleName_9xjdu_744 {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleDescription_9xjdu_756 {
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._actions_9xjdu_885 {
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._actions_9xjdu_885 ._button_9xjdu_429 {
|
|||
|
|
min-width: 100px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 480px) {
|
|||
|
|
._rolesGrid_9xjdu_682 {
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCard_9xjdu_689 {
|
|||
|
|
padding: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleHeader_9xjdu_737 {
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleCheckmark_9xjdu_767 {
|
|||
|
|
width: 1.25rem;
|
|||
|
|
height: 1.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleName_9xjdu_744 {
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._roleDescription_9xjdu_756 {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._sectionTitle_9xjdu_868 {
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._sectionDescription_9xjdu_878 {
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
МОДАЛЬНЫЕ ОКНА
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._modalContent_9xjdu_965 {
|
|||
|
|
max-height: 80vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._modalActions_9xjdu_970 {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1rem;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
padding-top: 1.5rem;
|
|||
|
|
border-top: 1px solid var(--form-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._modalWide_9xjdu_980 {
|
|||
|
|
max-width: 90vw;
|
|||
|
|
width: 900px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
TEXTAREA С ДЕЙСТВИЯМИ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._textareaContainer_9xjdu_989 {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._textareaActions_9xjdu_993 {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._formHelp_9xjdu_1004 {
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
margin: 1rem 0;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._formError_9xjdu_1014 {
|
|||
|
|
background: rgba(239, 68, 68, 0.1);
|
|||
|
|
border: 1px solid var(--form-error);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
margin: 1rem 0;
|
|||
|
|
color: var(--form-error);
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._formActions_9xjdu_1025 {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1rem;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
padding-top: 2rem;
|
|||
|
|
border-top: 1px solid var(--form-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._title_9xjdu_1035 {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
margin: 0 0 1.5rem 0;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._errorMessage_9xjdu_1043 {
|
|||
|
|
color: var(--form-error);
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
margin-top: 0.375rem;
|
|||
|
|
padding-left: 0.75rem;
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(-0.5rem);
|
|||
|
|
animation: _slideInError_9xjdu_1 0.3s ease forwards;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
._modalActions_9xjdu_970,
|
|||
|
|
._textareaActions_9xjdu_993,
|
|||
|
|
._formActions_9xjdu_1025 {
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._modalActions_9xjdu_970 ._button_9xjdu_429,
|
|||
|
|
._textareaActions_9xjdu_993 ._button_9xjdu_429 {
|
|||
|
|
min-width: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._textareaActions_9xjdu_993 {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._textareaActions_9xjdu_993 ._button_9xjdu_429 {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
СТИЛИ ДЛЯ ТОПИК МОДАЛКИ
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._inputGroup_9xjdu_1081 {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._inputGroup_9xjdu_1081 ._input_9xjdu_121 {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Текущие родительские топики */
|
|||
|
|
._currentParents_9xjdu_1092 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadge_9xjdu_1098 {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background: var(--form-primary-light);
|
|||
|
|
border: 1px solid var(--form-primary);
|
|||
|
|
border-radius: 1rem;
|
|||
|
|
padding: 0.375rem 0.75rem;
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
color: var(--form-primary);
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
max-width: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadge_9xjdu_1098:hover {
|
|||
|
|
background: var(--form-primary);
|
|||
|
|
color: var(--form-bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadge_9xjdu_1098:hover ._parentRemoveBtn_9xjdu_1117 {
|
|||
|
|
color: var(--form-bg);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadgeTitle_9xjdu_1122 {
|
|||
|
|
font-weight: 500;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadgeTitle_9xjdu_1122::before {
|
|||
|
|
content: '#';
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-right: 0.125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentRemoveBtn_9xjdu_1117 {
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--form-primary);
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
line-height: 1;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentRemoveBtn_9xjdu_1117:hover {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._selectedParents_9xjdu_1159 {
|
|||
|
|
margin: 1rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentsList_9xjdu_1163 {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0.75rem 0 0 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentItem_9xjdu_1172 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0.75rem 1rem;
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentItem_9xjdu_1172:hover {
|
|||
|
|
background: var(--form-primary-light);
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentInfo_9xjdu_1188 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentTitle_9xjdu_1195 {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
font-size: 0.9375rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentSlug_9xjdu_1201 {
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
font-family: monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentDepth_9xjdu_1207 {
|
|||
|
|
color: var(--form-text-light);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._sectionHeader_9xjdu_1212 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._availableParents_9xjdu_1219 {
|
|||
|
|
margin-top: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentsGrid_9xjdu_1223 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentCheckbox_9xjdu_1230 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
background: var(--form-bg);
|
|||
|
|
border: 2px solid var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentCheckbox_9xjdu_1230:hover {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
background: var(--form-primary-light);
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentCheckbox_9xjdu_1230 input[type="checkbox"] {
|
|||
|
|
margin: 0;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentLabel_9xjdu_1253 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentStats_9xjdu_1261 {
|
|||
|
|
color: var(--form-text-light);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._noParents_9xjdu_1266 {
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
padding: 2rem;
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border: 1px dashed var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._showMoreHint_9xjdu_1277 {
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._bodyPreview_9xjdu_1287 {
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border: 2px dashed var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
min-height: 4rem;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._bodyPreview_9xjdu_1287:hover {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
background: var(--form-primary-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._bodyContent_9xjdu_1305 {
|
|||
|
|
color: var(--form-text);
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
word-break: break-word;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._bodyPlaceholder_9xjdu_1313 {
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._bodyHint_9xjdu_1320 {
|
|||
|
|
color: var(--form-text-light);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
TOPIC PILLS CLOUD COMPONENT
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._topicPillsCloud_9xjdu_1332 {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsCloudHeader_9xjdu_1339 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._headerSection_9xjdu_1348 {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsCloudControls_9xjdu_1355 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsSearchInput_9xjdu_1362 {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0.5rem 0.75rem;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
border-radius: 0.375rem;
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
background: white;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsSearchInput_9xjdu_1362:focus {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
box-shadow: 0 0 0 2px var(--form-primary-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsCloudTitle_9xjdu_1377 {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._selectedTopicsDisplay_9xjdu_1384 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._selectedLabel_9xjdu_1390 {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._selectedTopicsContainer_9xjdu_1396 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
min-height: 2rem;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillCompact_9xjdu_1404 {
|
|||
|
|
padding: 0.25rem 0.5rem !important;
|
|||
|
|
font-size: 0.75rem !important;
|
|||
|
|
border-radius: 0.875rem !important;
|
|||
|
|
gap: 0.25rem !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsSearchContainer_9xjdu_1411 {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._clearSearchBtn_9xjdu_1418 {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0.5rem;
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
line-height: 1;
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 0.25rem;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 1.5rem;
|
|||
|
|
height: 1.5rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._clearSearchBtn_9xjdu_1418:hover {
|
|||
|
|
background: var(--form-divider);
|
|||
|
|
color: var(--form-text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._selectionCounter_9xjdu_1442 {
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-weight: 500;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
padding: 0.25rem 0.5rem;
|
|||
|
|
border-radius: 0.25rem;
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsContainer_9xjdu_1453 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 200px;
|
|||
|
|
padding: 1rem;
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
background: white;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
align-content: flex-start;
|
|||
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
|
|||
|
|
scrollbar-width: thin;
|
|||
|
|
scrollbar-color: var(--form-divider) transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsContainer_9xjdu_1453::-webkit-scrollbar {
|
|||
|
|
width: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsContainer_9xjdu_1453::-webkit-scrollbar-track {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsContainer_9xjdu_1453::-webkit-scrollbar-thumb {
|
|||
|
|
background: var(--form-divider);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsContainer_9xjdu_1453::-webkit-scrollbar-thumb:hover {
|
|||
|
|
background: var(--form-text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicPill_9xjdu_1332 {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0.5rem 0.875rem;
|
|||
|
|
background: var(--form-bg);
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
border-radius: 1.25rem;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
position: relative;
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
max-width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicPill_9xjdu_1332:hover {
|
|||
|
|
background: var(--form-primary-light);
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillSelected_9xjdu_1515 {
|
|||
|
|
background: var(--form-primary);
|
|||
|
|
color: white;
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
font-weight: 600;
|
|||
|
|
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillSelected_9xjdu_1515:hover {
|
|||
|
|
background: var(--form-primary-hover);
|
|||
|
|
border-color: var(--form-primary-hover);
|
|||
|
|
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillDisabled_9xjdu_1530 {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillNested_9xjdu_1536 {
|
|||
|
|
background: var(--form-bg-subtle);
|
|||
|
|
border-left: 3px solid var(--form-primary-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillDepthIndicator_9xjdu_1541 {
|
|||
|
|
font-family: monospace;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillTitle_9xjdu_1547 {
|
|||
|
|
font-weight: 500;
|
|||
|
|
word-break: break-word;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
max-width: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillTitle_9xjdu_1547::before {
|
|||
|
|
content: '#';
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-right: 0.125rem;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillRemoveIcon_9xjdu_1563 {
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 0.25rem;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillRemoveIcon_9xjdu_1563:hover {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._emptyState_9xjdu_1574 {
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Адаптивный макет для модального окна */
|
|||
|
|
._modalFormGrid_9xjdu_1583 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 768px) {
|
|||
|
|
._modalFormGrid_9xjdu_1583 {
|
|||
|
|
grid-template-columns: 400px 1fr;
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
align-items: start;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 1200px) {
|
|||
|
|
._modalFormGrid_9xjdu_1583 {
|
|||
|
|
grid-template-columns: 450px 1fr;
|
|||
|
|
gap: 2rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._formMainSection_9xjdu_1604 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._formSideSection_9xjdu_1610 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._compactSection_9xjdu_1616 {
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._compactSection_9xjdu_1616 ._sectionTitle_9xjdu_868 {
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
font-size: 0.9375rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Адаптивность для топик модалки */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
._parentsGrid_9xjdu_1223 {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentCheckbox_9xjdu_1230 {
|
|||
|
|
padding: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._currentParents_9xjdu_1092 {
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadge_9xjdu_1098 {
|
|||
|
|
padding: 0.3125rem 0.625rem;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
max-width: 140px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadgeTitle_9xjdu_1122 {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentRemoveBtn_9xjdu_1117 {
|
|||
|
|
width: 14px;
|
|||
|
|
height: 14px;
|
|||
|
|
font-size: 9px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._inputGroup_9xjdu_1081 {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._sectionHeader_9xjdu_1212 {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._modalFormGrid_9xjdu_1583 {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsContainer_9xjdu_1453 {
|
|||
|
|
min-height: 120px;
|
|||
|
|
max-height: 200px;
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicPill_9xjdu_1332 {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
padding: 0.1875rem 0.4375rem;
|
|||
|
|
border-radius: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillTitle_9xjdu_1547 {
|
|||
|
|
max-width: 120px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsCloudHeader_9xjdu_1339 {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._headerSection_9xjdu_1348 {
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._selectedTopicsContainer_9xjdu_1396 {
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillCompact_9xjdu_1404 {
|
|||
|
|
padding: 0.1875rem 0.4375rem !important;
|
|||
|
|
font-size: 0.6875rem !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillsSearchInput_9xjdu_1362 {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._clearSearchBtn_9xjdu_1418 {
|
|||
|
|
width: 1.25rem;
|
|||
|
|
height: 1.25rem;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
right: 0.375rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._compactSection_9xjdu_1616 {
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 480px) {
|
|||
|
|
._topicModalContent_9xjdu_1729 {
|
|||
|
|
height: 75vh;
|
|||
|
|
max-height: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalBody_9xjdu_1734 {
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalActions_9xjdu_1738 {
|
|||
|
|
padding: 0.5rem 0.75rem;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicSelectionFullHeight_9xjdu_1744 {
|
|||
|
|
padding: 0.5rem;
|
|||
|
|
min-height: 250px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicSelectionFullHeight_9xjdu_1744 ._pillsContainer_9xjdu_1453 {
|
|||
|
|
padding: 0.5rem;
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
min-height: 120px;
|
|||
|
|
max-height: 180px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicPill_9xjdu_1332 {
|
|||
|
|
padding: 0.375rem 0.625rem;
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._pillCompact_9xjdu_1404 {
|
|||
|
|
padding: 0.1875rem 0.375rem !important;
|
|||
|
|
font-size: 0.625rem !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._selectedLabel_9xjdu_1390 {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentItem_9xjdu_1172 {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentCheckbox_9xjdu_1230 {
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._currentParents_9xjdu_1092 {
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadge_9xjdu_1098 {
|
|||
|
|
padding: 0.25rem 0.5rem;
|
|||
|
|
font-size: 0.6875rem;
|
|||
|
|
max-width: 120px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadgeTitle_9xjdu_1122 {
|
|||
|
|
font-size: 0.6875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentRemoveBtn_9xjdu_1117 {
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
font-size: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Топик модальное окно - специальная структура */
|
|||
|
|
._topicModalContent_9xjdu_1729 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 85vh;
|
|||
|
|
max-height: 750px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 0;
|
|||
|
|
border-radius: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalBody_9xjdu_1734 {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 1rem;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 0;
|
|||
|
|
background: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalActions_9xjdu_1738 {
|
|||
|
|
padding: 0.75rem 1rem;
|
|||
|
|
border-top: 1px solid var(--form-divider);
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 0 0 0.75rem 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalActions_9xjdu_1738 ._button_9xjdu_429 {
|
|||
|
|
min-width: 120px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalActions_9xjdu_1738 ._button_9xjdu_429:hover {
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicSelectionFullHeight_9xjdu_1744 {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1rem;
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
border-radius: 0.75rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
min-height: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicSelectionFullHeight_9xjdu_1744 ._topicPillsCloud_9xjdu_1332 {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicSelectionFullHeight_9xjdu_1744 ._pillsContainer_9xjdu_1453 {
|
|||
|
|
flex: 1;
|
|||
|
|
background: white;
|
|||
|
|
border: 1px solid var(--form-divider);
|
|||
|
|
overflow-y: auto;
|
|||
|
|
min-height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicSelectionFullHeight_9xjdu_1744 ._errorMessage_9xjdu_1043 {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Адаптация модальной сетки для топиков */
|
|||
|
|
._topicModalBody_9xjdu_1734 ._modalFormGrid_9xjdu_1583 {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
min-height: 0;
|
|||
|
|
align-items: stretch;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalBody_9xjdu_1734 ._formMainSection_9xjdu_1604 {
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding-right: 0.5rem;
|
|||
|
|
min-height: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
max-height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalBody_9xjdu_1734 ._formSideSection_9xjdu_1610 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 0;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Мобильная адаптация для топик модалки */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
._topicModalContent_9xjdu_1729 {
|
|||
|
|
height: 90vh;
|
|||
|
|
max-height: 650px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalBody_9xjdu_1734 {
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalActions_9xjdu_1738 {
|
|||
|
|
padding: 0.5rem 0.75rem;
|
|||
|
|
height: 50px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicModalBody_9xjdu_1734 ._modalFormGrid_9xjdu_1583 {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicSelectionFullHeight_9xjdu_1744 {
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
min-height: 300px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicSelectionFullHeight_9xjdu_1744 ._pillsContainer_9xjdu_1453 {
|
|||
|
|
min-height: 200px;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._topicPill_9xjdu_1332 {
|
|||
|
|
padding: 0.375rem 0.625rem;
|
|||
|
|
font-size: 0.8125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._currentParents_9xjdu_1092 {
|
|||
|
|
gap: 0.375rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentBadge_9xjdu_1098 {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
padding: 0.25rem 0.5rem;
|
|||
|
|
max-width: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._parentRemoveBtn_9xjdu_1117 {
|
|||
|
|
width: 14px;
|
|||
|
|
height: 14px;
|
|||
|
|
font-size: 9px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =================================================================
|
|||
|
|
HTML РЕДАКТОР С CONTENTEDITABLE
|
|||
|
|
================================================================= */
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 {
|
|||
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
border: 2px solid var(--form-divider);
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
background: var(--form-bg) !important;
|
|||
|
|
color: var(--form-text);
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
tab-size: 2;
|
|||
|
|
outline: none;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
resize: vertical;
|
|||
|
|
transition: var(--form-transition);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
min-height: 6rem;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968:focus {
|
|||
|
|
border-color: var(--form-primary);
|
|||
|
|
background: var(--form-bg) !important;
|
|||
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968:empty:before {
|
|||
|
|
content: attr(data-placeholder);
|
|||
|
|
color: var(--form-text-muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
pointer-events: none;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0.75rem;
|
|||
|
|
left: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 div {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 br {
|
|||
|
|
display: block;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Улучшенная подсветка Prism */
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._tag_9xjdu_2017 {
|
|||
|
|
color: #0066cc;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._attr-name_9xjdu_2022 {
|
|||
|
|
color: #8B5CF6;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._attr-value_9xjdu_2027 {
|
|||
|
|
color: #059669;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._punctuation_9xjdu_2032 {
|
|||
|
|
color: #374151;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._comment_9xjdu_2037 {
|
|||
|
|
color: #9CA3AF;
|
|||
|
|
font-style: italic;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 code {
|
|||
|
|
font-family: inherit;
|
|||
|
|
font-size: inherit;
|
|||
|
|
line-height: inherit;
|
|||
|
|
background: transparent !important;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
border: none;
|
|||
|
|
display: block;
|
|||
|
|
white-space: inherit;
|
|||
|
|
word-wrap: inherit;
|
|||
|
|
tab-size: inherit;
|
|||
|
|
color: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Убираем фон у всех элементов Prism и других элементов */
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 *,
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017,
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._tag_9xjdu_2017,
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._attr-name_9xjdu_2022,
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._attr-value_9xjdu_2027,
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._punctuation_9xjdu_2032,
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 ._token_9xjdu_2017._comment_9xjdu_2037,
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 span,
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 pre {
|
|||
|
|
background: transparent !important;
|
|||
|
|
background-color: transparent !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Выделение текста */
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968::selection {
|
|||
|
|
background: rgba(59, 130, 246, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 *::selection {
|
|||
|
|
background: rgba(59, 130, 246, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968 {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
padding: 0.625rem;
|
|||
|
|
min-height: 5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlEditorContenteditable_9xjdu_1968:empty:before {
|
|||
|
|
top: 0.625rem;
|
|||
|
|
left: 0.625rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Убираем старые стили */
|
|||
|
|
._htmlEditorContainer_9xjdu_2095,
|
|||
|
|
._htmlEditorHighlight_9xjdu_2096,
|
|||
|
|
._htmlEditorTextarea_9xjdu_2097,
|
|||
|
|
._htmlEditor_9xjdu_1968 {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для HTML подсказки */
|
|||
|
|
._hint_9xjdu_323._htmlHint_9xjdu_2103 {
|
|||
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
background: var(--form-bg-light);
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
border-radius: 0.375rem;
|
|||
|
|
border-left: 3px solid var(--form-primary);
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlHint_9xjdu_2103 code {
|
|||
|
|
background: rgba(59, 130, 246, 0.1);
|
|||
|
|
padding: 0.125rem 0.25rem;
|
|||
|
|
border-radius: 0.25rem;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
color: var(--form-primary);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
._htmlEditor_9xjdu_1968 {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
padding: 0.75rem !important;
|
|||
|
|
min-height: 6rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlHint_9xjdu_2103 {
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
padding: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._htmlHint_9xjdu_2103 code {
|
|||
|
|
font-size: 0.65rem;
|
|||
|
|
padding: 0.1rem 0.2rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Улучшенные стили для select с иконкой */
|
|||
|
|
._select_9xjdu_123 {
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding-right: 2.5rem;
|
|||
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
|
|||
|
|
background-position: right 0.75rem center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 1rem;
|
|||
|
|
appearance: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._select_9xjdu_123._disabled_9xjdu_205 {
|
|||
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Анимация появления формы */
|
|||
|
|
@keyframes _formSlideIn_9xjdu_1 {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(1rem);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._form_9xjdu_31 {
|
|||
|
|
animation: _formSlideIn_9xjdu_1 0.3s ease-out;
|
|||
|
|
}
|
|||
|
|
</style><style type="text/css" data-vite-dev-id="/Users/tony/code/new.discours.io/core/panel/styles/Login.module.css">._login-container_19wxo_1 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: var(--background-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._login-header_19wxo_8 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
padding: 1rem 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._login-form-container_19wxo_14 {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._login-form_19wxo_14 {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 400px;
|
|||
|
|
padding: 2rem;
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: var(--border-radius-lg);
|
|||
|
|
box-shadow: var(--shadow-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._login-logo_19wxo_30 {
|
|||
|
|
display: block;
|
|||
|
|
margin: 0 auto 1.5rem;
|
|||
|
|
height: 3rem;
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._login-form_19wxo_14 h1 {
|
|||
|
|
margin: 0 0 2rem;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-size: var(--font-size-2xl);
|
|||
|
|
font-weight: var(--font-weight-bold);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._form-group_19wxo_45 {
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._form-group_19wxo_45 label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-size: var(--font-size-sm);
|
|||
|
|
font-weight: var(--font-weight-medium);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._form-group_19wxo_45 input {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
font-size: var(--font-size-base);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
transition: border-color var(--transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._form-group_19wxo_45 input:focus {
|
|||
|
|
outline: none;
|
|||
|
|
border-color: var(--primary-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._form-group_19wxo_45 input:disabled {
|
|||
|
|
background-color: var(--secondary-color-light);
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._error-message_19wxo_77 {
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
background-color: var(--error-color-light);
|
|||
|
|
color: var(--error-color-dark);
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
font-size: var(--font-size-sm);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsive Design */
|
|||
|
|
@media (max-width: 480px) {
|
|||
|
|
._login-form_19wxo_14 {
|
|||
|
|
margin: 1rem;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._login-form_19wxo_14 h1 {
|
|||
|
|
font-size: var(--font-size-xl);
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style><style type="text/css" data-vite-dev-id="/Users/tony/code/new.discours.io/core/panel/styles/Button.module.css">._button_19ghh_1 {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: var(--border-radius-md, 8px);
|
|||
|
|
font-weight: var(--font-weight-medium, 500);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all var(--transition-fast, 0.2s ease);
|
|||
|
|
position: relative;
|
|||
|
|
user-select: none;
|
|||
|
|
outline: none;
|
|||
|
|
/* Default size */
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
font-size: var(--font-size-base, 1rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Variants */
|
|||
|
|
._button-primary_19ghh_20 {
|
|||
|
|
background-color: var(--primary-color);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-primary_19ghh_20:hover:not(:disabled) {
|
|||
|
|
background-color: var(--primary-color-dark);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-secondary_19ghh_29 {
|
|||
|
|
background-color: var(--secondary-color-light, #f8f9fa);
|
|||
|
|
color: var(--secondary-color-dark, #6c757d);
|
|||
|
|
border: 1px solid var(--border-color, #dee2e6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-secondary_19ghh_29:hover:not(:disabled) {
|
|||
|
|
background-color: var(--secondary-color, #6c757d);
|
|||
|
|
color: white;
|
|||
|
|
border-color: var(--secondary-color, #6c757d);
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-secondary_19ghh_29:active:not(:disabled) {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-danger_19ghh_47 {
|
|||
|
|
background-color: var(--error-color);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-danger_19ghh_47:hover:not(:disabled) {
|
|||
|
|
background-color: var(--error-color-dark);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Sizes */
|
|||
|
|
._small_19ghh_57 {
|
|||
|
|
padding: 0.5rem 1rem;
|
|||
|
|
font-size: var(--font-size-sm, 0.875rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._medium_19ghh_62 {
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
font-size: var(--font-size-base, 1rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._large_19ghh_67 {
|
|||
|
|
padding: 1rem 2rem;
|
|||
|
|
font-size: var(--font-size-lg, 1.125rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Legacy support */
|
|||
|
|
._button-small_19ghh_73 {
|
|||
|
|
padding: 0.5rem 1rem;
|
|||
|
|
font-size: var(--font-size-sm, 0.875rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-medium_19ghh_78 {
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
font-size: var(--font-size-base, 1rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-large_19ghh_83 {
|
|||
|
|
padding: 1rem 2rem;
|
|||
|
|
font-size: var(--font-size-lg, 1.125rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button_19ghh_1:disabled {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-loading_19ghh_93 {
|
|||
|
|
color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._button-full-width_19ghh_97 {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Loading Spinner */
|
|||
|
|
._loading-spinner_19ghh_102 {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 1.25em;
|
|||
|
|
height: 1.25em;
|
|||
|
|
border: 2px solid currentColor;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border-right-color: transparent;
|
|||
|
|
animation: _spin_19ghh_1 0.75s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Индикатор загрузки языка */
|
|||
|
|
._language-loader_19ghh_116 {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border-top-color: #fff;
|
|||
|
|
animation: _spin_19ghh_1 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для кнопки переключения языка */
|
|||
|
|
._language-button_19ghh_127 {
|
|||
|
|
min-width: 52px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes _spin_19ghh_1 {
|
|||
|
|
from {
|
|||
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Исправление для индикатора языка */
|
|||
|
|
._language-loader_19ghh_116 {
|
|||
|
|
transform: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes _spin-simple_19ghh_1 {
|
|||
|
|
0% { transform: rotate(0deg); }
|
|||
|
|
100% { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._language-loader_19ghh_116 {
|
|||
|
|
animation: _spin-simple_19ghh_1 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
</style><style type="text/css" data-vite-dev-id="/Users/tony/code/new.discours.io/core/panel/styles.css">/**
|
|||
|
|
* Global Styles and CSS Variables
|
|||
|
|
* Minimal global styling with focus on CSS variables and reset
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* Global Styles */
|
|||
|
|
|
|||
|
|
/* Global CSS Variables */
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
/* Colors */
|
|||
|
|
--primary-color: #2563eb;
|
|||
|
|
--primary-color-light: #dbeafe;
|
|||
|
|
--primary-color-dark: #1e40af;
|
|||
|
|
|
|||
|
|
--secondary-color: #4b5563;
|
|||
|
|
--secondary-color-light: #f3f4f6;
|
|||
|
|
--secondary-color-dark: #1f2937;
|
|||
|
|
|
|||
|
|
--success-color: #059669;
|
|||
|
|
--success-color-light: #d1fae5;
|
|||
|
|
--success-color-dark: #065f46;
|
|||
|
|
|
|||
|
|
--warning-color: #d97706;
|
|||
|
|
--warning-color-light: #fef3c7;
|
|||
|
|
--warning-color-dark: #92400e;
|
|||
|
|
|
|||
|
|
--error-color: #dc2626;
|
|||
|
|
--error-color-light: #fee2e2;
|
|||
|
|
--error-color-dark: #991b1b;
|
|||
|
|
|
|||
|
|
--info-color: #0284c7;
|
|||
|
|
--info-color-light: #e0f2fe;
|
|||
|
|
--info-color-dark: #075985;
|
|||
|
|
|
|||
|
|
/* Text Colors */
|
|||
|
|
--text-color: #111827;
|
|||
|
|
--text-color-light: #6b7280;
|
|||
|
|
--text-color-lighter: #9ca3af;
|
|||
|
|
|
|||
|
|
/* Background Colors */
|
|||
|
|
--background-color: #ffffff;
|
|||
|
|
--header-background: #f9fafb;
|
|||
|
|
--hover-color: #f3f4f6;
|
|||
|
|
|
|||
|
|
/* Border Colors */
|
|||
|
|
--border-color: #e5e7eb;
|
|||
|
|
|
|||
|
|
/* Spacing */
|
|||
|
|
--spacing-xs: 0.25rem;
|
|||
|
|
--spacing-sm: 0.5rem;
|
|||
|
|
--spacing-md: 1rem;
|
|||
|
|
--spacing-lg: 1.5rem;
|
|||
|
|
--spacing-xl: 2rem;
|
|||
|
|
|
|||
|
|
/* Border Radius */
|
|||
|
|
--border-radius-sm: 0.25rem;
|
|||
|
|
--border-radius-md: 0.375rem;
|
|||
|
|
--border-radius-lg: 0.5rem;
|
|||
|
|
|
|||
|
|
/* Box Shadow */
|
|||
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|||
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|||
|
|
--shadow-lg:
|
|||
|
|
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|||
|
|
|
|||
|
|
/* Font Sizes */
|
|||
|
|
--font-size-xs: 0.75rem;
|
|||
|
|
--font-size-sm: 0.875rem;
|
|||
|
|
--font-size-base: 1rem;
|
|||
|
|
--font-size-lg: 1.125rem;
|
|||
|
|
--font-size-xl: 1.25rem;
|
|||
|
|
--font-size-2xl: 1.5rem;
|
|||
|
|
|
|||
|
|
/* Font Weights */
|
|||
|
|
--font-weight-normal: 400;
|
|||
|
|
--font-weight-medium: 500;
|
|||
|
|
--font-weight-semibold: 600;
|
|||
|
|
--font-weight-bold: 700;
|
|||
|
|
|
|||
|
|
/* Line Heights */
|
|||
|
|
--line-height-tight: 1.25;
|
|||
|
|
--line-height-normal: 1.5;
|
|||
|
|
--line-height-relaxed: 1.75;
|
|||
|
|
|
|||
|
|
/* Transitions */
|
|||
|
|
--transition-fast: 150ms;
|
|||
|
|
--transition-normal: 200ms;
|
|||
|
|
--transition-slow: 300ms;
|
|||
|
|
|
|||
|
|
/* Z-Index */
|
|||
|
|
--z-index-dropdown: 1000;
|
|||
|
|
--z-index-sticky: 1020;
|
|||
|
|
--z-index-fixed: 1030;
|
|||
|
|
--z-index-modal-backdrop: 1040;
|
|||
|
|
--z-index-modal: 1050;
|
|||
|
|
--z-index-popover: 1060;
|
|||
|
|
--z-index-tooltip: 1070;
|
|||
|
|
|
|||
|
|
/* Dark Mode Colors */
|
|||
|
|
--dark-bg-color: #1f2937;
|
|||
|
|
--dark-bg-color-dark: #111827;
|
|||
|
|
--dark-hover-bg: #374151;
|
|||
|
|
--dark-disabled-bg: #4b5563;
|
|||
|
|
--dark-text-color: #f9fafb;
|
|||
|
|
--dark-text-color-light: #d1d5db;
|
|||
|
|
--dark-text-color-lighter: #9ca3af;
|
|||
|
|
--dark-border-color: #374151;
|
|||
|
|
--dark-border-color-dark: #4b5563;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* CSS Reset and Base Styles */
|
|||
|
|
|
|||
|
|
* {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body,
|
|||
|
|
html {
|
|||
|
|
font-family:
|
|||
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
|||
|
|
Arial, sans-serif;
|
|||
|
|
background-color: var(--background-color);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#root {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.app-container {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Minimal Accessibility and Utility Styles */
|
|||
|
|
|
|||
|
|
.visually-hidden {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 1px;
|
|||
|
|
height: 1px;
|
|||
|
|
margin: -1px;
|
|||
|
|
border: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
clip: rect(0 0 0 0);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsive Typography */
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
:root {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Print Styles */
|
|||
|
|
|
|||
|
|
@media print {
|
|||
|
|
body {
|
|||
|
|
background: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Общие стили */
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
/* Color variables */
|
|||
|
|
--primary-color: #4f46e5;
|
|||
|
|
--primary-color-light: #a5b4fc;
|
|||
|
|
--primary-color-dark: #3730a3;
|
|||
|
|
--secondary-color: #6c757d;
|
|||
|
|
--secondary-color-light: #f8f9fa;
|
|||
|
|
--secondary-color-dark: #495057;
|
|||
|
|
--success-color: #10b981;
|
|||
|
|
--success-color-light: #a7f3d0;
|
|||
|
|
--success-color-dark: #047857;
|
|||
|
|
--info-color: #3b82f6;
|
|||
|
|
--info-color-light: #bfdbfe;
|
|||
|
|
--info-color-dark: #1d4ed8;
|
|||
|
|
--error-color: #ef4444;
|
|||
|
|
--error-color-light: #fecaca;
|
|||
|
|
--error-color-dark: #dc2626;
|
|||
|
|
|
|||
|
|
/* Background colors */
|
|||
|
|
--bg-color: #ffffff;
|
|||
|
|
--bg-color-dark: #f8f9fa;
|
|||
|
|
--hover-bg: #f5f5f5;
|
|||
|
|
--background-color: #ffffff;
|
|||
|
|
|
|||
|
|
/* Text colors */
|
|||
|
|
--text-color: #212529;
|
|||
|
|
--text-color-light: #6c757d;
|
|||
|
|
--text-muted: #6c757d;
|
|||
|
|
|
|||
|
|
/* Typography */
|
|||
|
|
--font-size-sm: 0.875rem;
|
|||
|
|
--font-size-base: 1rem;
|
|||
|
|
--font-size-lg: 1.125rem;
|
|||
|
|
--font-weight-medium: 500;
|
|||
|
|
|
|||
|
|
/* Transitions */
|
|||
|
|
--transition-fast: 0.2s ease;
|
|||
|
|
|
|||
|
|
/* Границы и тени */
|
|||
|
|
--border-color: #e0e0e0;
|
|||
|
|
--border-radius-sm: 4px;
|
|||
|
|
--border-radius-md: 8px;
|
|||
|
|
--border-radius-lg: 12px;
|
|||
|
|
--border-radius-xl: 16px;
|
|||
|
|
--border-radius-full: 9999px;
|
|||
|
|
|
|||
|
|
/* Шрифты */
|
|||
|
|
--font-family: "Inter", system-ui, -apple-system, sans-serif;
|
|||
|
|
--font-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
|
|||
|
|
|
|||
|
|
/* Размеры */
|
|||
|
|
--container-max-width: 1400px;
|
|||
|
|
--header-height: 60px;
|
|||
|
|
|
|||
|
|
/* Анимации */
|
|||
|
|
--transition-normal: 0.3s ease;
|
|||
|
|
|
|||
|
|
/* Z-индексы */
|
|||
|
|
--z-modal: 1000;
|
|||
|
|
--z-dropdown: 100;
|
|||
|
|
--z-header: 50;
|
|||
|
|
|
|||
|
|
/* Code colors */
|
|||
|
|
--code-bg: #fff;
|
|||
|
|
--code-text: #222;
|
|||
|
|
--code-comment: #888;
|
|||
|
|
--code-keyword: #a626a4;
|
|||
|
|
--code-property: #005cc5;
|
|||
|
|
--code-string: #22863a;
|
|||
|
|
--code-operator: #b76e00;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: var(--font-family);
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background-color: var(--bg-color);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Общие элементы интерфейса */
|
|||
|
|
|
|||
|
|
.loading-screen {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: var(--background-color);
|
|||
|
|
color: var(--text-color-light);
|
|||
|
|
font-size: var(--font-size-lg);
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-spinner {
|
|||
|
|
width: 2rem;
|
|||
|
|
height: 2rem;
|
|||
|
|
border: 3px solid var(--border-color);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border-top-color: var(--primary-color);
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
from {
|
|||
|
|
transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-message {
|
|||
|
|
background-color: var(--danger-light);
|
|||
|
|
border-left: 4px solid var(--danger-color);
|
|||
|
|
color: var(--danger-color);
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
font-size: 14px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.success-message {
|
|||
|
|
background-color: var(--success-light);
|
|||
|
|
border-left: 4px solid var(--success-color);
|
|||
|
|
color: var(--success-color);
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
font-size: 14px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для формы и кнопок */
|
|||
|
|
|
|||
|
|
.form-group {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group input {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 12px;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group input:focus {
|
|||
|
|
outline: none;
|
|||
|
|
border-color: var(--text-color);
|
|||
|
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
border: none;
|
|||
|
|
background: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button:disabled,
|
|||
|
|
input:disabled,
|
|||
|
|
select:disabled,
|
|||
|
|
textarea:disabled {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для страницы входа */
|
|||
|
|
|
|||
|
|
.login-page {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: var(--bg-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-container {
|
|||
|
|
background-color: var(--card-bg);
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
|||
|
|
padding: 40px;
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 440px;
|
|||
|
|
border: none;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-container h1 {
|
|||
|
|
margin-top: 0;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-logo {
|
|||
|
|
width: 120px;
|
|||
|
|
height: auto;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
display: block;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для админ-панели */
|
|||
|
|
|
|||
|
|
.admin-page {
|
|||
|
|
max-width: var(--container-max-width);
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
background-color: var(--card-bg);
|
|||
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|||
|
|
padding: 15px 20px;
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
max-width: var(--container-max-width);
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header h1 {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logout-button {
|
|||
|
|
background-color: transparent;
|
|||
|
|
color: var(--danger-color);
|
|||
|
|
border: 1px solid var(--danger-color);
|
|||
|
|
width: auto;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logout-button:hover {
|
|||
|
|
background-color: var(--danger-color);
|
|||
|
|
color: white;
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
box-shadow: 0 2px 4px rgba(211, 47, 47, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.admin-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 1px solid #ddd;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
gap: 10px;
|
|||
|
|
max-width: var(--container-max-width);
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.admin-tabs button {
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
padding: 10px 16px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border-bottom: 2px solid transparent;
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
width: auto;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.admin-tabs button.active {
|
|||
|
|
border-bottom-color: var(--text-color);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-weight: 600;
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.admin-tabs button:hover:not(.active) {
|
|||
|
|
color: var(--text-color);
|
|||
|
|
border-bottom-color: #e5e9f2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.admin-tabs button:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
main {
|
|||
|
|
padding: 1.5rem 3rem;
|
|||
|
|
max-width: var(--container-max-width);
|
|||
|
|
margin: 0 auto;
|
|||
|
|
width: 100%;
|
|||
|
|
flex-grow: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Таблица пользователей */
|
|||
|
|
|
|||
|
|
.authors-list {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: separate;
|
|||
|
|
border-spacing: 0;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|||
|
|
background-color: var(--card-bg);
|
|||
|
|
min-width: 900px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
thead {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th,
|
|||
|
|
td {
|
|||
|
|
padding: 18px 20px;
|
|||
|
|
text-align: left;
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
font-size: 15px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
font-size: 13px;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tr:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для редактирования ролей */
|
|||
|
|
|
|||
|
|
.roles-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.roles-text {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-roles-button {
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding: 0;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
width: auto;
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-roles-button:hover {
|
|||
|
|
opacity: 1;
|
|||
|
|
background-color: rgba(52, 152, 219, 0.1);
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Модальное окно */
|
|||
|
|
|
|||
|
|
.modal-overlay {
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
backdrop-filter: blur(4px);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: var(--z-modal);
|
|||
|
|
padding: var(--spacing-4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-content {
|
|||
|
|
background-color: var(--card-bg);
|
|||
|
|
border-radius: var(--border-radius-lg);
|
|||
|
|
width: 90%;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
max-height: 90vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
box-shadow: var(--shadow-lg);
|
|||
|
|
animation: modal-slide-up 0.3s ease-out;
|
|||
|
|
padding: 32px 32px 24px 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 0 20px 0;
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: var(--spacing-3);
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: var(--text-lg);
|
|||
|
|
font-weight: var(--font-semibold);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-button {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
min-width: 32px;
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
font-size: var(--text-xl);
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 0;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-button:hover {
|
|||
|
|
background-color: var(--primary-light);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-body {
|
|||
|
|
padding: 0 0 24px 0;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-content,
|
|||
|
|
.body-content code {
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
word-break: break-word;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-content {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
font-size: var(--text-sm);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
tab-size: 2;
|
|||
|
|
hyphens: none;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: var(--spacing-4);
|
|||
|
|
background-color: var(--code-bg);
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
color: var(--code-text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.language-badge {
|
|||
|
|
font-size: var(--text-xs);
|
|||
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|||
|
|
background-color: var(--primary-light);
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
font-weight: var(--font-medium);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Анимации для модального окна */
|
|||
|
|
|
|||
|
|
@keyframes modal-slide-up {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(20px);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Адаптивный дизайн */
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.pagination {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
padding: var(--spacing-3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-controls {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-per-page {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-content {
|
|||
|
|
width: 100%;
|
|||
|
|
max-height: 100vh;
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-header {
|
|||
|
|
padding: var(--spacing-3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-body {
|
|||
|
|
padding: var(--spacing-3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-content {
|
|||
|
|
padding: var(--spacing-3);
|
|||
|
|
font-size: var(--text-xs);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Темная тема для кода */
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--code-bg: #2d2d2d;
|
|||
|
|
--code-text: #f8f8f2;
|
|||
|
|
--code-comment: #999;
|
|||
|
|
--code-keyword: #e68ac6;
|
|||
|
|
--code-property: #0099ff;
|
|||
|
|
--code-string: #92d692;
|
|||
|
|
--code-operator: #9a6e3a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-content {
|
|||
|
|
color: var(--code-text);
|
|||
|
|
background-color: var(--code-bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.token.comment,
|
|||
|
|
.token.prolog,
|
|||
|
|
.token.doctype,
|
|||
|
|
.token.cdata {
|
|||
|
|
color: var(--code-comment);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.token.property,
|
|||
|
|
.token.tag,
|
|||
|
|
.token.boolean,
|
|||
|
|
.token.number,
|
|||
|
|
.token.constant,
|
|||
|
|
.token.symbol {
|
|||
|
|
color: var(--code-property);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.token.selector,
|
|||
|
|
.token.attr-name,
|
|||
|
|
.token.string,
|
|||
|
|
.token.char,
|
|||
|
|
.token.builtin {
|
|||
|
|
color: var(--code-string);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.token.operator,
|
|||
|
|
.token.entity,
|
|||
|
|
.token.url,
|
|||
|
|
.language-css .token.string,
|
|||
|
|
.token.variable,
|
|||
|
|
.token.inserted {
|
|||
|
|
color: var(--code-operator);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.token.keyword {
|
|||
|
|
color: var(--code-keyword);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для пагинации */
|
|||
|
|
|
|||
|
|
.pagination-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: var(--spacing-4);
|
|||
|
|
margin-top: var(--spacing-5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: var(--spacing-4);
|
|||
|
|
padding: var(--spacing-4);
|
|||
|
|
background: #ededed;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-info {
|
|||
|
|
font-size: var(--text-sm);
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-controls {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: var(--spacing-1);
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-button {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #181818;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1px solid #222;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
border-radius: 0 !important;
|
|||
|
|
box-shadow: none !important;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
transition:
|
|||
|
|
background 0.15s,
|
|||
|
|
color 0.15s,
|
|||
|
|
border 0.15s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-button.active {
|
|||
|
|
background: #fff;
|
|||
|
|
color: #111;
|
|||
|
|
border: 2px solid #fff;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-button:hover:not(:disabled) {
|
|||
|
|
background: #333;
|
|||
|
|
color: #fff;
|
|||
|
|
border-color: #111;
|
|||
|
|
transform: none;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-button:disabled {
|
|||
|
|
background: #aaa;
|
|||
|
|
color: #fff;
|
|||
|
|
opacity: 0.5;
|
|||
|
|
border-color: #888;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-ellipsis {
|
|||
|
|
background: transparent;
|
|||
|
|
color: #888;
|
|||
|
|
min-width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border: none;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-per-page {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: var(--spacing-3);
|
|||
|
|
font-size: var(--text-sm);
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-per-page select {
|
|||
|
|
background: #181818;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1px solid #222;
|
|||
|
|
border-radius: 0 !important;
|
|||
|
|
box-shadow: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Поиск */
|
|||
|
|
|
|||
|
|
.authors-controls {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-container {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input-group {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 10px 14px;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input:focus {
|
|||
|
|
border-color: var(--text-color);
|
|||
|
|
outline: none;
|
|||
|
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-button {
|
|||
|
|
padding: 10px 16px;
|
|||
|
|
background-color: var(--primary-color);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-button:hover {
|
|||
|
|
background-color: var(--primary-dark);
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Адаптивные стили */
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.pagination {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actions {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.authors-list {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th,
|
|||
|
|
td {
|
|||
|
|
padding: 8px 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-per-page {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-container {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-spinner {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: spin 6s linear infinite;
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для вкладки с переменными окружения */
|
|||
|
|
|
|||
|
|
.env-variables-container {
|
|||
|
|
margin-top: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.env-section {
|
|||
|
|
background-color: var(--card-bg);
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|||
|
|
padding: 24px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-name {
|
|||
|
|
margin-top: 0;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-size: 20px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-description {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.variable-edit-form {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.variable-description {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
font-style: italic;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-value {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button.edit-button {
|
|||
|
|
background-color: var(--primary-color);
|
|||
|
|
color: white;
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
width: auto;
|
|||
|
|
font-weight: 500;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button.edit-button:hover {
|
|||
|
|
background-color: var(--primary-dark);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.success-message {
|
|||
|
|
background-color: var(--success-light);
|
|||
|
|
color: var(--success-color);
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-message {
|
|||
|
|
background-color: var(--danger-light);
|
|||
|
|
color: var(--danger-color);
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для компонентов ролей */
|
|||
|
|
|
|||
|
|
.roles-cell {
|
|||
|
|
max-width: 250px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.roles-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.role-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 4px 10px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
margin: 2px 0;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.role-badge:hover {
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-role-badge {
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
border: 1px dashed #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-role-badge:hover {
|
|||
|
|
background-color: #d0d0d0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.role-icon {
|
|||
|
|
margin-right: 6px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для сортировки таблицы */
|
|||
|
|
|
|||
|
|
th.sortable {
|
|||
|
|
cursor: pointer;
|
|||
|
|
user-select: none;
|
|||
|
|
position: relative;
|
|||
|
|
padding-right: 24px;
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th.sortable:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th.sortable.sorted {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sort-icon {
|
|||
|
|
display: inline-block;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 5px;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th.sortable.sorted .sort-icon {
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
text-decoration: none;
|
|||
|
|
margin-left: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Стили для таблицы публикаций */
|
|||
|
|
|
|||
|
|
.shouts-controls {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-filter select {
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
background-color: white;
|
|||
|
|
font-size: 14px;
|
|||
|
|
min-width: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shouts-list {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shouts-list table {
|
|||
|
|
min-width: 1200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-align: center;
|
|||
|
|
min-width: 70px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-published {
|
|||
|
|
background-color: #d4edda;
|
|||
|
|
color: #155724;
|
|||
|
|
border: 1px solid #c3e6cb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-draft {
|
|||
|
|
background-color: #fff3cd;
|
|||
|
|
color: #856404;
|
|||
|
|
border: 1px solid #ffeaa7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-deleted {
|
|||
|
|
background-color: #f8d7da;
|
|||
|
|
color: #721c24;
|
|||
|
|
border: 1px solid #f5c6cb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.authors-list,
|
|||
|
|
.topics-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 4px;
|
|||
|
|
max-width: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.author-badge,
|
|||
|
|
.topic-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
border: 1px solid #dee2e6;
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #495057;
|
|||
|
|
max-width: 100px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.author-badge {
|
|||
|
|
background-color: #e3f2fd;
|
|||
|
|
border-color: #bbdefb;
|
|||
|
|
color: #1565c0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topic-badge {
|
|||
|
|
background-color: #f3e5f5;
|
|||
|
|
border-color: #e1bee7;
|
|||
|
|
color: #7b1fa2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-preview {
|
|||
|
|
max-width: 300px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.media-count {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #6c757d;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-data {
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Адаптивные стили для публикаций */
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.shouts-controls {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-filter select {
|
|||
|
|
min-width: unset;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shouts-list table {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.authors-list,
|
|||
|
|
.topics-list {
|
|||
|
|
max-width: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-preview {
|
|||
|
|
max-width: 200px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Оптимизируем медиа-запросы */
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
:root {
|
|||
|
|
--container-max-width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination,
|
|||
|
|
.actions,
|
|||
|
|
.header-container,
|
|||
|
|
.shouts-controls {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-per-page {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th,
|
|||
|
|
td {
|
|||
|
|
padding: 8px 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.authors-list,
|
|||
|
|
.shouts-list table {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.authors-list,
|
|||
|
|
.topics-list {
|
|||
|
|
max-width: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-preview {
|
|||
|
|
max-width: 200px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Оптимизируем анимации */
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-spinner {
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Оптимизируем повторяющиеся стили */
|
|||
|
|
|
|||
|
|
.flex-center {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-ellipsis {
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-data,
|
|||
|
|
.empty-state {
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Обновляем все border-radius на переменные */
|
|||
|
|
|
|||
|
|
.error-message,
|
|||
|
|
.success-message,
|
|||
|
|
.form-group input,
|
|||
|
|
button,
|
|||
|
|
.login-container,
|
|||
|
|
header,
|
|||
|
|
.pagination-button,
|
|||
|
|
.search-input,
|
|||
|
|
.search-button,
|
|||
|
|
.env-section,
|
|||
|
|
.modal-content,
|
|||
|
|
.role-badge,
|
|||
|
|
.author-badge,
|
|||
|
|
.topic-badge {
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge {
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Обновляем все transition на переменные */
|
|||
|
|
|
|||
|
|
button,
|
|||
|
|
.search-input,
|
|||
|
|
.edit-roles-button,
|
|||
|
|
.pagination-button,
|
|||
|
|
.role-badge {
|
|||
|
|
transition: var(--transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Обновляем все z-index на переменные */
|
|||
|
|
|
|||
|
|
.modal-overlay {
|
|||
|
|
z-index: var(--z-modal);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Обновляем все шрифты на переменные */
|
|||
|
|
|
|||
|
|
.body-content {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Обновляем все max-width на переменные */
|
|||
|
|
|
|||
|
|
.admin-page,
|
|||
|
|
.header-container,
|
|||
|
|
.admin-tabs,
|
|||
|
|
main {
|
|||
|
|
max-width: var(--container-max-width);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Добавляем утилитарные классы */
|
|||
|
|
|
|||
|
|
.flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-col {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.items-center {
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.justify-center {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.justify-between {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gap-1 {
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gap-2 {
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gap-3 {
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gap-4 {
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gap-5 {
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Отступы */
|
|||
|
|
|
|||
|
|
.m-0 {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mt-1 {
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mt-2 {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mt-3 {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mt-4 {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mt-5 {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb-1 {
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb-2 {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb-3 {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb-4 {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb-5 {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-0 {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-1 {
|
|||
|
|
padding: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-2 {
|
|||
|
|
padding: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-3 {
|
|||
|
|
padding: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-4 {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-5 {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Типографика */
|
|||
|
|
|
|||
|
|
.text-xs {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-sm {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-base {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-lg {
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-xl {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2xl {
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-normal {
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-medium {
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-semibold {
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.font-bold {
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Цвета текста */
|
|||
|
|
|
|||
|
|
.text-primary {
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-secondary {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-muted {
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-success {
|
|||
|
|
color: var(--success-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-danger {
|
|||
|
|
color: var(--danger-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-warning {
|
|||
|
|
color: var(--warning-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Фоны */
|
|||
|
|
|
|||
|
|
.bg-white {
|
|||
|
|
background-color: var(--bg-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-card {
|
|||
|
|
background-color: var(--card-bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-success-light {
|
|||
|
|
background-color: var(--success-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-danger-light {
|
|||
|
|
background-color: var(--danger-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-warning-light {
|
|||
|
|
background-color: var(--warning-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Границы */
|
|||
|
|
|
|||
|
|
.border {
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border-t {
|
|||
|
|
border-top: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border-b {
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border-l {
|
|||
|
|
border-left: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border-r {
|
|||
|
|
border-right: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Тени */
|
|||
|
|
|
|||
|
|
.shadow-sm {
|
|||
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shadow {
|
|||
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shadow-md {
|
|||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shadow-lg {
|
|||
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Состояния */
|
|||
|
|
|
|||
|
|
.hover\:bg-gray-50:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hover\:bg-gray-100:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hover\:shadow-md:hover {
|
|||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disabled\:opacity-50:disabled {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disabled\:cursor-not-allowed:disabled {
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Анимации */
|
|||
|
|
|
|||
|
|
.animate-spin {
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.animate-fade {
|
|||
|
|
animation: fade 0.3s ease-in-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.animate-slide-up {
|
|||
|
|
animation: slideUp 0.3s ease-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fade {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideUp {
|
|||
|
|
from {
|
|||
|
|
transform: translateY(10px);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Предотвращаем FOUC */
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
visibility: visible;
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Оптимизация для GPU */
|
|||
|
|
|
|||
|
|
.modal-overlay,
|
|||
|
|
.modal-content,
|
|||
|
|
button:hover,
|
|||
|
|
.pagination-button:hover,
|
|||
|
|
.role-badge:hover {
|
|||
|
|
transform: translateZ(0);
|
|||
|
|
backface-visibility: hidden;
|
|||
|
|
perspective: 1000px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Оптимизация для анимаций */
|
|||
|
|
|
|||
|
|
@media (prefers-reduced-motion: reduce) {
|
|||
|
|
*,
|
|||
|
|
::before,
|
|||
|
|
::after {
|
|||
|
|
animation-duration: 0.01ms !important;
|
|||
|
|
animation-iteration-count: 1 !important;
|
|||
|
|
transition-duration: 0.01ms !important;
|
|||
|
|
scroll-behavior: auto !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Оптимизация для печати */
|
|||
|
|
|
|||
|
|
@media print {
|
|||
|
|
.no-print {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
table {
|
|||
|
|
break-inside: avoid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style></head>
|
|||
|
|
<body>
|
|||
|
|
<div id="root"><div style="display: contents;"><div class="app-container"><div class="_login-container_19wxo_1"><div class="_login-header_19wxo_8"><button class="_button_19ghh_1 undefined _small_19ghh_57 _language-button_19ghh_127" title="Switch to English" aria-label="Switch to English">EN</button></div><div class="_login-form-container_19wxo_14"><form class="_form_9xjdu_31"><img alt="Logo" src="data:image/svg+xml,%3csvg%20width='96'%20height='32'%20viewBox='0%200%2096%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3c!--%20p%20(без%20перекладины,%20чистая%20петля)%20--%3e%3cpath%20d='M15%2028V6C15%203%2020%203%2020%206V16C20%2019%2015%2019%2015%2016'%20fill='none'%20stroke='currentColor'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c!--%20u%20(симметричный,%20вписан%20в%20высоту%206-28)%20--%3e%3cpath%20d='M30%206V22C30%2026%2036%2026%2036%2022V6'%20fill='none'%20stroke='currentColor'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c!--%20b%20(без%20перекладины,%20чистая%20петля,%20p%20вверх%20ногами,%20отражён%20по%20горизонтали,%20вписан%20в%20высоту%206-28)%20--%3e%3cg%20transform='translate(48.5,17)%20scale(-1,1)%20translate(-48.5,-17)'%3e%3cpath%20d='M51%206V28C51%2031%2046%2031%2046%2028V18C46%2015%2051%2015%2051%2018'%20fill='none'%20stroke='currentColor'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3c!--%20l%20(симметричный,%20вписан%20в%20высоту%206-28)%20--%3e%3cpath%20d='M62%206V28'%20fill='none'%20stroke='currentColor'%20stroke-width='2.2'%20stroke-linecap='round'/%3e%3c!--%20y%20(симметричный,%20вписан%20в%20высоту%206-28)%20--%3e%3cpath%20d='M75%206V18C75%2024%2080%2024%2080%2018V6M80%2018C80%2028%2072%2028%2072%2028'%20fill='none'%20stroke='currentColor'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e" class="_login-logo_19wxo_30"><div class="_fieldGroup_9xjdu_42"><input type="email" placeholder="admin@media" required="" class="_input_9xjdu_121 _error_9xjdu_179" style=""></div><div class="_fieldGroup_9xjdu_42"><input type="password" placeholder="••••••••" required="" class="_input_9xjdu_121 _error_9xjdu_179" style=""></div><div class="_fieldError_9xjdu_294"><span class="_errorIcon_9xjdu_311">⚠️</span>Неверные учетные данные</div><div class="_actions_9xjdu_885" style="margin: auto;"><button type="submit" class="_button_19ghh_1 _button-primary_19ghh_20 _button-medium_19ghh_78">Войти</button></div></form></div></div></div></div></div>
|
|||
|
|
<script type="module" src="/panel/index.tsx"></script>
|
|||
|
|
<noscript>
|
|||
|
|
<div style="text-align: center; padding: 20px;">
|
|||
|
|
Для работы приложения необходим JavaScript
|
|||
|
|
</div>
|
|||
|
|
</noscript>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body></html>
|