/* ========================================== */ /* КРАТКОЕ ОГЛАВЛЕНИЕ */ /* ========================================== */ /* * ФАЙЛ: storage.css * НАЗНАЧЕНИЕ: Стилизация основной области хранилища ссылок * * СОДЕРЖАНИЕ: * 1. .main - Основной контейнер страницы * 2. .storage - Секция хранилища с ограничением ширины * 3. .storage__card - Карточка хранилища с границами и фоном * * ОСОБЕННОСТИ: * - Анимации: нет * - Цвета: фон карточки (var(--card-bg)), граница (var(--card-border)) * - Адаптивность: нет * - Минимальная высота карточки: calc(100vh - 182px) */ /* ========================================== */ /* ========== STORAGE STYLES ==========*/ /* Основное хранилище */ /* Основной контейнер страницы с внутренними отступами */ .main { padding: 40px 0; } /* Секция хранилища с ограничением максимальной ширины */ .storage { max-width: 1000px; margin: 0px auto; } /* Карточка хранилища - основной контейнер для иконок ссылок */ .storage__card { position: relative; background-color: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 16px; min-height: 500px; /* Дефолтная высота (минимум 400px через resize) */ padding: 15px; overflow: visible; /* ВАЖНО: чтобы resize-handle был виден снаружи */ /* ВАЖНО: Используем min-height вместо height для автоматического расширения под контент */ height: auto; /* Glass morphism — карточка парит над фоном */ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.50) inset; } /* Ручка для растягивания хранилища по вертикали */ .storage__resize-handle { position: absolute; bottom: -10px; /* Размещаем НА нижней границе, слегка выступая за пределы */ left: 50%; transform: translateX(-50%); width: 250px; /* Ширина области для захвата */ height: 19px; /* Высота области для захвата */ cursor: ns-resize; display: flex; align-items: center; justify-content: center; padding: 4px 0px; z-index: 70000; /* Выше модальных окон (auth-modal: z-index: 60000) */ transition: all 0.3s ease; opacity: 0; /* По умолчанию скрыта */ pointer-events: none; /* Не перехватываем клики когда невидима */ background-color: rgba(255, 255, 255, 0.3); /* Полупрозрачный фон */ border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); } /* Показываем ручку при наведении на карточку — тогда включаем pointer-events */ .storage__card:hover .storage__resize-handle { opacity: 1; pointer-events: auto; } /* Ярче при наведении непосредственно на ручку */ .storage__card:hover .storage__resize-handle:hover { background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Включаем pointer-events при активном растягивании */ .storage__card.resizing .storage__resize-handle { pointer-events: auto; opacity: 1; } /* Иконка resize: стрелка вверх — вертикальная линия — стрелка вниз */ /* Используем mask-image + background-color, чтобы менять цвет через CSS переменные */ .storage__resize-handle::after { content: ''; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 28px; pointer-events: none; transition: background-color 0.3s ease; background-color: rgba(0, 0, 0, 0.45); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 0.5L2.5 5' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M7 0.5L11.5 5' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cline x1='7' y1='4' x2='7' y2='12' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M7 15.5L2.5 11' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M7 15.5L11.5 11' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 0.5L2.5 5' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M7 0.5L11.5 5' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cline x1='7' y1='4' x2='7' y2='12' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M7 15.5L2.5 11' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M7 15.5L11.5 11' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .storage__resize-handle:hover::after { background-color: var(--header-bg); } /* Активное состояние при перетаскивании */ .storage__card.resizing { -webkit-user-select: none; user-select: none; } .storage__card.resizing .storage__resize-handle { opacity: 1; } .storage__card.resizing .storage__resize-handle::after { background-color: var(--yellow-btn); } /* ========================================== */ /* RESPONSIVE - МОБИЛЬНАЯ АДАПТАЦИЯ */ /* ========================================== */ /* Touch-layout: ≤880px или планшет landscape с touch */ @media (max-width: 880px), ((min-width: 881px) and (max-width: 1024px) and (pointer: coarse)) { .main { padding: 0; } /* Секция хранилища */ .storage { max-width: none; margin: 0; padding: 0; } /* Карточка хранилища — до видимой нижней границы, оставляя место для 1 ряда вкладок */ /* Вычет: хедер(~60) + блок2(~50) + отступы(~25) + вкладки(~40) + 5px */ .storage__card { padding: 15px; min-height: calc(100vh - 185px); min-height: calc(100dvh - 185px); margin: 0; border-radius: 10px; height: auto; -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, 0.96); } .storage__resize-handle { display: none !important; } } /* Второй диапазон: от 490px до 340px */ @media (max-width: 490px) { .main { padding: 0; } .storage { max-width: none; margin: 0; padding: 0; } /* Карточка хранилища — до нижней границы с 1 рядом вкладок */ .storage__card { padding: 12px; min-height: calc(100vh - 170px); min-height: calc(100dvh - 170px); margin: 0; border-radius: 8px; height: auto; } .storage__resize-handle { display: none !important; } }