396 lines
7.1 KiB
CSS
396 lines
7.1 KiB
CSS
/* Стили для различных макетов дашборда */
|
|
|
|
/* Общие стили */
|
|
.layout-option {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.layout-option:hover {
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.layout-option.selected {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
|
|
}
|
|
|
|
/* Компактный макет */
|
|
.compact-layout .card {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.compact-layout .card-body {
|
|
padding: 0.75rem !important;
|
|
}
|
|
|
|
.compact-layout .badge-sm {
|
|
font-size: 0.7rem;
|
|
padding: 0.2em 0.4em;
|
|
}
|
|
|
|
/* Временная шкала */
|
|
.timeline {
|
|
position: relative;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.timeline::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 4px;
|
|
background: linear-gradient(to bottom, #007bff, #6c757d);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-left: -2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.timeline-item {
|
|
padding: 10px 40px;
|
|
position: relative;
|
|
background-color: inherit;
|
|
width: 50%;
|
|
}
|
|
|
|
.timeline-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
right: -10px;
|
|
background: #007bff;
|
|
border: 4px solid #fff;
|
|
top: 20px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.timeline-item.left {
|
|
left: 0;
|
|
}
|
|
|
|
.timeline-item.right {
|
|
left: 50%;
|
|
}
|
|
|
|
.timeline-item.right::after {
|
|
left: -10px;
|
|
}
|
|
|
|
.timeline-content {
|
|
padding: 20px 30px;
|
|
background: white;
|
|
position: relative;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.timeline-content:hover {
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.timeline-item.left .timeline-content {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.timeline-item.right .timeline-content {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
/* Адаптивность для временной шкалы */
|
|
@media screen and (max-width: 768px) {
|
|
.timeline::after {
|
|
left: 31px;
|
|
}
|
|
|
|
.timeline-item {
|
|
width: 100%;
|
|
padding-left: 70px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
left: 60px;
|
|
border: medium solid white;
|
|
border-width: 10px 10px 10px 0;
|
|
border-color: transparent white transparent transparent;
|
|
}
|
|
|
|
.timeline-item.left::after,
|
|
.timeline-item.right::after {
|
|
left: 21px;
|
|
}
|
|
|
|
.timeline-item.right {
|
|
left: 0%;
|
|
}
|
|
|
|
.timeline-item.left .timeline-content,
|
|
.timeline-item.right .timeline-content {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
/* Журнальный макет */
|
|
.magazine-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.magazine-item.featured .card {
|
|
border: 2px solid #007bff;
|
|
box-shadow: 0 8px 24px rgba(0, 123, 255, 0.15);
|
|
}
|
|
|
|
.magazine-item.featured .card-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.magazine-image-placeholder {
|
|
min-height: 200px;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
|
|
.magazine-item:nth-child(even) .row {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.magazine-item:nth-child(even) .magazine-image-placeholder {
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.links-preview {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Кладка (Masonry) адаптивная сетка */
|
|
.masonry-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
grid-gap: 1rem;
|
|
grid-auto-rows: min-content;
|
|
}
|
|
|
|
.masonry-item {
|
|
break-inside: avoid;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Анимации появления */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slideInLeft 0.6s ease-out;
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slideInRight 0.6s ease-out;
|
|
}
|
|
|
|
/* Стили для разных размеров карточек в сетке */
|
|
.grid-layout .col-md-6:nth-child(3n+1) {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.grid-layout .col-lg-4:nth-child(4n+1) {
|
|
grid-row: span 2;
|
|
}
|
|
|
|
/* Улучшенные стили для боковой панели */
|
|
.sidebar-layout .list-group-item-action.active {
|
|
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
|
|
border-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.sidebar-layout .list-group-item-action:hover {
|
|
background-color: #f8f9fa;
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
/* Hover эффекты для карточек */
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Цветовые акценты для разных типов контента */
|
|
.group-card-primary {
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
|
|
.group-card-secondary {
|
|
border-left: 4px solid #6c757d;
|
|
}
|
|
|
|
.group-card-success {
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
.group-card-warning {
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
|
|
.group-card-info {
|
|
border-left: 4px solid #17a2b8;
|
|
}
|
|
|
|
/* Стили для пустого состояния */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 3rem 1rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-state h4 {
|
|
margin-bottom: 0.5rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.empty-state p {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Адаптивность для мобильных устройств */
|
|
@media (max-width: 768px) {
|
|
.magazine-item .row {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.magazine-image-placeholder {
|
|
border-radius: 8px 8px 0 0 !important;
|
|
min-height: 150px;
|
|
}
|
|
|
|
.sidebar-layout .row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-layout .col-md-3 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.compact-layout {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.timeline-item {
|
|
padding-left: 50px;
|
|
}
|
|
}
|
|
|
|
/* Улучшенные состояния загрузки */
|
|
.loading-skeleton {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
/* Микроанимации для интерактивных элементов */
|
|
.btn-enhanced {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-enhanced::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
transition: width 0.3s ease, height 0.3s ease;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.btn-enhanced:hover::before {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Кастомные скроллбары */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
} |