/
guselnikov
/
inst
Обзор
Документация
Войти
/
guselnikov
/
inst
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
admin/src/components/auto-post/CarouselStrip.module.css
116 строк
2 KB
Viktor Guselnikov
first_commit
07 июл 2026, 11:54
07 июл 2026, 11:54
098126a
Код
Авторство
О чём код?
.carouselStrip { display: flex; flex-direction: column; gap: 10px; } .label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .track { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .item { position: relative; flex-shrink: 0; border-radius: var(--radius-sm); cursor: grab; transition: opacity var(--transition); } .itemActive { box-shadow: 0 0 0 2px var(--accent); } .itemDragging { opacity: 0.4; } .thumb { display: block; width: 80px; border-radius: var(--radius-xs); object-fit: cover; background: var(--bg-muted); pointer-events: none; } .thumbPortrait { height: 100px; } .thumbSquare { height: 80px; } .thumbLandscape { height: 46px; } .badge { position: absolute; top: 5px; left: 5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-xs); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; } .croppedDot { position: absolute; bottom: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity var(--transition); } .item:hover .actions { opacity: 1; } .iconBtn { width: 26px; height: 26px; border: none; border-radius: var(--radius-xs); background: rgba(0, 0, 0, 0.65); color: #fff; cursor: pointer; display: grid; place-items: center; } .hint { margin: 0; font-size: 11px; color: var(--text-faint); }