Загрузка данных
/* ==================== ПЕРЕМЕННЫЕ РОСАТОМ ==================== */
:root {
/* Основные цвета */
--rosatom-dark-blue: #003274;
--rosatom-medium-blue: #025EA1;
--rosatom-light-blue: #6CACE4;
--rosatom-gray: #7F7F7F;
--rosatom-dark-gray: #333333;
/* Дополнительные цвета */
--rosatom-teal: #259789;
--rosatom-orange: #FD6925;
--rosatom-magenta: #E20072;
/* Цвета-индикаторы */
--indicator-green: #56C02B;
--indicator-yellow: #FCC30B;
--indicator-red: #FF0000;
}
/* ==================== БАЗОВЫЕ СТИЛИ ==================== */
* {
box-sizing: border-box;
}
body {
/* В брендбуке указан шрифт Rosatom, но если его нет, используется Arial */
font-family: 'Rosatom', Arial, sans-serif;
color: var(--rosatom-dark-gray);
background-color: #f4f7f9;
line-height: 1.5;
margin: 0;
padding: 20px;
}
h1, h2, h3, h4 {
color: var(--rosatom-dark-blue);
font-weight: bold;
margin-top: 0;
}
/* ==================== КНОПКИ ==================== */
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: 0.5rem 1rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 4px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
color: #fff;
background-color: var(--rosatom-dark-blue);
}
.btn-primary:hover {
background-color: var(--rosatom-medium-blue);
}
.btn-success {
color: #fff;
background-color: var(--indicator-green);
}
.btn-success:hover {
background-color: #4aa324;
}
.btn-danger {
color: #fff;
background-color: var(--indicator-red);
}
/* ==================== ТАБЛИЦЫ ==================== */
.table-container {
overflow-x: auto;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
}
th {
background-color: var(--rosatom-dark-blue);
color: #ffffff;
font-weight: bold;
padding: 12px 8px;
border: 1px solid var(--rosatom-gray);
text-align: center;
vertical-align: middle;
}
td {
padding: 10px 8px;
border: 1px solid var(--rosatom-gray);
vertical-align: middle;
}
tr:nth-child(even) {
background-color: #f8f9fa;
}
/* ==================== ФОРМЫ ==================== */
.form-group {
margin-bottom: 1rem;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
font-weight: bold;
color: var(--rosatom-dark-gray);
}
input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: var(--rosatom-dark-gray);
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 4px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input:focus, select:focus, textarea:focus {
border-color: var(--rosatom-medium-blue);
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(2, 94, 161, 0.25);
}
/* ==================== СТАТУСЫ (ИНДИКАТОРЫ) ==================== */
.status-success { color: var(--indicator-green); font-weight: bold; }
.status-warning { color: var(--indicator-yellow); font-weight: bold; }
.status-danger { color: var(--indicator-red); font-weight: bold; }
/* ==================== УВЕДОМЛЕНИЯ (FLASH) ==================== */
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-error {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}