/* ═══════════════════════════════════════════════════════════════════ */
/* RESET */
/* ═══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Высота #app-chrome — обновляется из JS при старте и ресайзе.
Значение по умолчанию — запасное, на случай если JS не успел. */
:root { --chrome-h: 61px; }
/* ═══════════════════════════════════════════════════════════════════ */
/* ТЕМЫ */
/* ═══════════════════════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
--bg: #1a1a1c;
--bg-2: #26262a;
--bg-3: #33333a;
--fg: #e8e8ea;
--fg-dim: #9a9aa2;
--accent: #8b5cf6;
--accent-hover: #7c3aed;
--accent-soft: rgba(139, 92, 246, 0.14);
--accent-soft-2: rgba(139, 92, 246, 0.22);
--danger: #e05252;
--danger-hover: #c94242;
--success: #4ade80;
--warning: #fbbf24;
--border: #3a3a42;
--overlay: rgba(0, 0, 0, 0.92);
--overlay-soft: rgba(0, 0, 0, 0.55);
--shadow: rgba(0, 0, 0, 0.4);
--thumb-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] {
--bg: #f4f4f6;
--bg-2: #ffffff;
--bg-3: #eaeaef;
--fg: #1c1c1e;
--fg-dim: #6c6c70;
--accent: #7c3aed;
--accent-hover: #6d28d9;
--accent-soft: rgba(124, 58, 237, 0.10);
--accent-soft-2: rgba(124, 58, 237, 0.18);
--danger: #d23b3b;
--danger-hover: #b02e2e;
--success: #16a34a;
--warning: #d97706;
--border: #dcdce1;
--overlay: rgba(0, 0, 0, 0.78);
--overlay-soft: rgba(0, 0, 0, 0.4);
--shadow: rgba(0, 0, 0, 0.12);
--thumb-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--fg);
min-height: 100vh;
overflow-x: hidden;
transition: background 0.2s, color 0.2s;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ЭКРАНЫ */
/* ═══════════════════════════════════════════════════════════════════ */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }
.hidden { display: none !important; }
/* Экраны, над которыми висит #app-chrome. Высота = 100vh - реальная высота chrome. */
#app-screen.active,
#profile-screen.active,
#admin-screen.active {
min-height: 0;
height: calc(100vh - var(--chrome-h));
}
#app-screen.active { overflow: hidden; }
#profile-screen.active,
#admin-screen.active { overflow-y: auto; }
/* ═══════════════════════════════════════════════════════════════════ */
/* AUTH — ОБЩЕЕ */
/* ═══════════════════════════════════════════════════════════════════ */
#login-screen,
#register-screen,
#pending-screen,
#rejected-screen,
#guest-screen,
#mfa-setup-screen,
#recovery-screen {
background: linear-gradient(135deg, var(--bg) 0%, var(--bg-3) 100%);
}
#login-screen.active,
#register-screen.active,
#pending-screen.active,
#rejected-screen.active,
#guest-screen.active,
#mfa-setup-screen.active,
#recovery-screen.active {
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
overflow-y: auto;
}
.auth-box {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 40px;
width: 100%;
max-width: 400px;
text-align: center;
box-shadow: 0 8px 32px var(--shadow);
position: relative;
margin: auto 0;
}
.auth-box.wide { max-width: 520px; }
.auth-box h1 {
font-size: 32px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 6px;
color: var(--accent);
}
.auth-box .subtitle {
color: var(--fg-dim);
font-size: 13px;
margin-bottom: 26px;
}
.auth-box input {
width: 100%;
padding: 12px 16px;
margin-bottom: 12px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
font-size: 15px;
outline: none;
transition: border-color 0.15s;
}
.auth-box input:focus { border-color: var(--accent); }
.auth-box button[type="submit"],
.auth-box .primary {
width: 100%;
padding: 12px;
background: var(--accent);
border: none;
border-radius: 8px;
color: white;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
.auth-box button[type="submit"]:hover,
.auth-box .primary:hover { background: var(--accent-hover); }
.auth-box button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-switch {
margin-top: 18px;
font-size: 13px;
color: var(--fg-dim);
}
.auth-switch a {
color: var(--accent);
text-decoration: none;
cursor: pointer;
font-weight: 500;
}
.auth-switch a:hover { text-decoration: underline; }
.auth-logout {
position: absolute;
top: 14px;
right: 14px;
background: transparent;
border: 1px solid var(--border);
color: var(--fg-dim);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, color 0.15s;
padding-bottom: 3px;
}
.auth-logout:hover { border-color: var(--danger); color: var(--danger); }
.auth-topbar-right {
position: absolute;
top: 12px;
right: 12px;
display: flex;
gap: 8px;
align-items: center;
}
.auth-topbar-right .auth-logout { position: static; }
.mfa-hint {
color: var(--fg-dim);
font-size: 13px;
margin-bottom: 12px;
margin-top: 8px;
}
.error {
color: var(--danger);
font-size: 13px;
margin-top: 12px;
}
.info-box {
padding: 16px;
border-radius: 8px;
font-size: 14px;
margin-top: 8px;
text-align: left;
line-height: 1.5;
}
.info-box.pending {
background: var(--accent-soft);
border: 1px solid var(--accent);
color: var(--fg);
}
.info-box.rejected {
background: rgba(224, 82, 82, 0.14);
border: 1px solid var(--danger);
color: var(--fg);
}
.info-icon {
font-size: 44px;
margin-bottom: 12px;
display: block;
}
/* ─── MFA SETUP ─── */
#mfa-setup-content { text-align: left; }
.qr-wrap {
display: flex;
justify-content: center;
padding: 20px;
background: #ffffff;
border-radius: 12px;
margin-bottom: 16px;
}
.qr-wrap img { width: 240px; height: 240px; display: block; }
.mfa-secret-label {
font-size: 12px;
color: var(--fg-dim);
text-align: center;
margin-bottom: 8px;
}
.mfa-secret {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 17px;
letter-spacing: 2px;
line-height: 1.4;
text-align: center;
padding: 16px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
word-break: break-all;
user-select: all;
-webkit-user-select: all;
cursor: pointer;
transition: background 0.15s;
}
.mfa-secret:hover {
background: var(--bg-2);
border-color: var(--accent);
}
.mfa-code-actions {
display: flex;
gap: 10px;
margin-top: 12px;
margin-bottom: 4px;
}
.mfa-code-actions .ghost { flex: 1; }
#mfa-show-code { margin-top: 4px; }
#mfa-setup-form input {
width: 100%;
padding: 12px 16px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
font-size: 15px;
outline: none;
}
#mfa-setup-form input:focus { border-color: var(--accent); }
.mfa-input {
width: 100%;
padding: 12px 16px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
font-size: 15px;
text-align: center;
outline: none;
transition: border-color 0.15s, letter-spacing 0.15s;
letter-spacing: normal;
margin-bottom: 12px;
}
.mfa-input:focus { border-color: var(--accent); }
.mfa-input:not(:placeholder-shown) {
font-size: 22px;
letter-spacing: 8px;
text-indent: 8px;
}
.mfa-input::placeholder {
letter-spacing: normal;
font-size: 15px;
color: var(--fg-dim);
text-indent: 0;
}
.recovery-codes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 16px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 16px;
}
.recovery-codes code {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 13px;
letter-spacing: 1.5px;
padding: 8px 10px;
background: var(--bg-2);
border-radius: 6px;
text-align: center;
color: var(--fg);
user-select: all;
}
.recovery-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.recovery-actions .ghost { flex: 1; min-width: 140px; }
/* ═══════════════════════════════════════════════════════════════════ */
/* APP CHROME — sticky topbar над app / profile / admin */
/* ═══════════════════════════════════════════════════════════════════ */
.app-chrome {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-2);
}
.app-chrome.hidden { display: none; }
/* ─── TOPBAR ─── */
.topbar {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
transition: background 0.2s;
flex-shrink: 0;
position: relative;
}
.brand {
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
color: var(--accent);
cursor: pointer;
user-select: none;
flex-shrink: 0;
}
a.brand {
text-decoration: none;
cursor: pointer;
transition: opacity 0.15s;
}
a.brand:hover { opacity: 0.85; }
/* Логотип скрывается, если в одну строку с ним не влезает вся навигация
и иконки. Переключением класса управляет JS (updateTopbarBrandVisibility). */
.topbar.hide-brand .brand { display: none; }
.search-box {
/* В state 3/4 — обычный flex-элемент. Стоит в DOM сразу после плеера,
значит с margin-left: auto (только на state 4, когда плеера нет)
прижмётся к user-info. В остальных состояниях порядок даёт правильный результат. */
width: 480px;
height: 38px;
display: flex;
align-items: center;
z-index: 5;
position: static;
}
/* state 1 / 2 — search absolute, координаты задаёт JS через style.left */
.topbar.tb-search-abs .search-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* state 4 — плеер скрыт, search прижимаем вправо к user-info */
.topbar.tb-player-hidden .search-box {
margin-left: auto;
}
.search-box input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
padding: 8px 14px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
font-size: 14px;
outline: none;
font-family: inherit;
}
.search-box input:focus { border-color: var(--accent); }
.search-box input:disabled {
opacity: 0.45;
cursor: not-allowed;
background: var(--bg-2);
}
/* Мобильные контролы поиска — на десктопе не нужны. */
.search-box .search-icon,
.search-box .search-toggle,
.search-box .search-close {
display: none;
}
.user-info {
display: flex;
align-items: center;
gap: 6px;
color: var(--fg-dim);
font-size: 14px;
flex-shrink: 0;
}
.user-info #user-name {
padding: 0 6px;
color: var(--fg);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
/* ─── Квадратная иконка-кнопка (единый стиль) ─── */
.icon-btn {
position: relative;
background: transparent;
border: 1px solid transparent;
color: var(--fg);
width: 38px;
height: 38px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s, border-color 0.15s;
padding: 0;
line-height: 1;
font-family: inherit;
flex-shrink: 0;
}
.icon-btn:hover {
color: var(--fg);
background: var(--bg-3);
}
.icon-btn.active {
color: var(--accent);
background: var(--accent-soft);
border-color: var(--accent);
}
.icon-btn .ico {
width: 20px;
height: 20px;
vertical-align: 0;
}
/* ─── Общие кнопки ─── */
.ghost {
background: transparent;
border: 1px solid var(--border);
color: var(--fg);
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: border-color 0.15s, background 0.15s;
font-family: inherit;
}
.ghost:hover { border-color: var(--accent); background: var(--bg-3); }
.ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.danger {
background: transparent;
border: 1px solid var(--danger);
color: var(--danger);
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: background 0.15s, color 0.15s;
font-family: inherit;
}
.danger:hover { background: var(--danger); color: white; }
.danger:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary,
.primary {
background: var(--accent);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
font-family: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
button.primary:hover,
.primary:hover { background: var(--accent-hover); }
button.primary:disabled,
.primary:disabled { opacity: 0.5; cursor: not-allowed; }
/* ═══════════════════════════════════════════════════════════════════ */
/* ЕДИНЫЙ TOOLBAR — вкладки галереи + section-toolbar */
/* ═══════════════════════════════════════════════════════════════════ */
.section-toolbar,
.tabs {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
min-height: 52px;
position: relative;
}
/* Левая часть — label / breadcrumbs / стрелка */
.files-toolbar-path {
flex: 0 0 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
font-size: 13px;
padding: 0 8px;
display: flex;
align-items: center;
gap: 4px;
}
.files-toolbar-path::-webkit-scrollbar { height: 4px; }
.files-toolbar-path::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.files-toolbar-path .crumb {
color: var(--accent);
cursor: pointer;
padding: 4px 8px;
border-radius: 5px;
transition: background 0.15s;
flex-shrink: 0;
}
.files-toolbar-path .crumb:hover { background: var(--bg-3); }
.files-toolbar-path .crumb.current {
color: var(--fg);
font-weight: 500;
cursor: default;
}
.files-toolbar-path .crumb.current:hover { background: transparent; }
.files-toolbar-path .crumb-sep { color: var(--fg-dim); opacity: 0.5; flex-shrink: 0; }
.files-toolbar-path .crumb.drop-target { background: var(--accent); color: white; }
/* Правая часть — кнопки */
.files-toolbar-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
padding-left: 8px;
border-left: 1px solid var(--border);
margin-left: auto;
}
/* Вкладки галереи — по центру */
.tabs-buttons {
display: flex;
gap: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
flex-shrink: 0;
z-index: 1;
}
/* Кнопки тулбара */
.toolbar-btn {
position: relative;
background: transparent;
border: 1px solid transparent;
color: var(--fg);
width: 34px;
height: 34px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s, border-color 0.12s, color 0.12s;
flex-shrink: 0;
padding: 0;
line-height: 1;
font-family: inherit;
}
.toolbar-btn:hover:not(:disabled) {
background: var(--bg-3);
border-color: var(--border);
}
.toolbar-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.toolbar-btn .ico {
width: 18px;
height: 18px;
vertical-align: 0;
}
/* Кнопки-вкладки галереи — тот же стиль, что toolbar-btn,
но с активным состоянием. */
.tab {
position: relative;
background: transparent;
border: 1px solid transparent;
color: var(--fg-dim);
width: 38px;
height: 38px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s, border-color 0.15s;
padding: 0;
line-height: 1;
font-family: inherit;
flex-shrink: 0;
}
.tab:hover { color: var(--fg); background: var(--bg-3); }
.tab.active {
color: var(--accent);
background: var(--accent-soft);
border-color: var(--accent);
}
.tab .ico {
width: 20px;
height: 20px;
vertical-align: 0;
}
/* ─── Бейдж-уведомление ─── */
.icon-btn .badge,
.section-btn .badge,
.tab .badge,
.toolbar-btn .badge {
position: absolute;
top: -4px;
right: -4px;
background: var(--danger);
color: white;
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid var(--bg-2);
pointer-events: none;
z-index: 2;
}
.icon-btn .badge.hidden,
.section-btn .badge.hidden,
.tab .badge.hidden,
.toolbar-btn .badge.hidden { display: none; }
/* ═══════════════════════════════════════════════════════════════════ */
/* TRASH ACTIONS */
/* ═══════════════════════════════════════════════════════════════════ */
.trash-actions {
display: flex;
gap: 10px;
padding: 16px 24px 0;
align-items: center;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* GALLERY */
/* ═══════════════════════════════════════════════════════════════════ */
#gallery { padding: 20px 24px 60px; }
.loading, .empty {
text-align: center;
color: var(--fg-dim);
padding: 60px 20px;
font-size: 14px;
}
.date-group { margin-bottom: 30px; }
.date-header {
font-size: 14px;
font-weight: 500;
color: var(--fg-dim);
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.date-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.thumb {
position: relative;
aspect-ratio: 1;
background: var(--bg-2);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.15s;
}
.thumb:hover {
transform: scale(1.02);
box-shadow: var(--thumb-shadow-hover);
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.thumb .type-badge {
position: absolute;
bottom: 6px;
right: 6px;
background: rgba(0, 0, 0, 0.72);
color: white;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.6px;
font-variant-numeric: tabular-nums;
z-index: 2;
}
.thumb .fav-badge {
position: absolute;
top: 6px;
left: 6px;
color: #ffc940;
font-size: 18px;
line-height: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
pointer-events: none;
z-index: 2;
}
.thumb .file-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 48px;
color: var(--fg-dim);
background: var(--bg-3);
}
.thumb .file-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
color: white;
font-size: 11px;
padding: 20px 8px 8px;
padding-right: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1;
}
.thumb.is-trash {
opacity: 0.55;
filter: grayscale(0.5);
}
.thumb.is-trash::before {
content: "🗑";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
z-index: 2;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
}
.more { text-align: center; padding: 20px; }
#load-more-btn {
background: var(--bg-2);
border: 1px solid var(--border);
color: var(--fg);
padding: 10px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}
#load-more-btn:hover { border-color: var(--accent); }
/* ═══════════════════════════════════════════════════════════════════ */
/* VIEWER (старый, не используется) */
/* ═══════════════════════════════════════════════════════════════════ */
.viewer {
position: fixed;
inset: 0;
z-index: 100;
}
.viewer.hidden { display: none; }
.viewer-backdrop {
position: absolute;
inset: 0;
background: var(--overlay);
}
.viewer-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 100px 120px;
z-index: 1;
pointer-events: none;
}
.viewer-content > * { pointer-events: auto; }
#viewer-media {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
#viewer-media img,
#viewer-media video {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
display: block;
object-fit: contain;
}
#viewer-media .file-view {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 60px 80px;
text-align: center;
color: var(--fg-dim);
}
#viewer-media .file-view .icon { font-size: 80px; margin-bottom: 16px; }
#viewer-media .file-view .name { color: var(--fg); font-size: 16px; margin-bottom: 8px; }
#viewer-media .file-view .size { font-size: 13px; }
.viewer-info {
margin-top: 16px;
text-align: center;
max-width: 100%;
}
#viewer-title {
color: white;
font-size: 14px;
margin-bottom: 12px;
opacity: 0.85;
}
.viewer-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.viewer-actions a.button {
background: var(--accent);
color: white;
border: none;
padding: 8px 18px;
border-radius: 6px;
text-decoration: none;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.viewer-actions a.button:hover { background: var(--accent-hover); }
.viewer-actions .ghost {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: white;
}
.viewer-actions .ghost:hover {
background: rgba(255, 255, 255, 0.2);
border-color: white;
}
.viewer-actions .danger {
border-color: var(--danger);
color: var(--danger);
}
.viewer-actions .danger:hover { background: var(--danger); color: white; }
.viewer-close,
.viewer-nav {
position: fixed;
background: rgba(0, 0, 0, 0.55);
border: none;
color: white;
cursor: pointer;
width: 52px;
height: 52px;
border-radius: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.viewer-close:hover,
.viewer-nav:hover { background: rgba(0, 0, 0, 0.85); }
.viewer-close {
top: 24px;
right: 24px;
font-size: 28px;
line-height: 1;
padding-bottom: 4px;
}
.viewer-nav {
top: 50%;
transform: translateY(-50%);
font-size: 34px;
line-height: 1;
padding-bottom: 6px;
}
.viewer-nav.prev { left: 24px; }
.viewer-nav.next { right: 24px; }
.viewer-nav.hidden { display: none; }
/* ═══════════════════════════════════════════════════════════════════ */
/* DROP OVERLAY */
/* ═══════════════════════════════════════════════════════════════════ */
.drop-overlay {
position: fixed;
inset: 0;
background: var(--accent-soft);
border: 4px dashed var(--accent);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
animation: drop-pulse 1.5s infinite;
}
.drop-overlay.hidden { display: none; }
@keyframes drop-pulse {
0%, 100% { border-color: var(--accent); background: var(--accent-soft); }
50% { border-color: var(--accent-hover); background: var(--accent-soft-2); }
}
.drop-message {
background: var(--bg-2);
color: var(--fg);
padding: 24px 48px;
border-radius: 12px;
font-size: 20px;
font-weight: 500;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
/* ═══════════════════════════════════════════════════════════════════ */
/* TOAST */
/* ═══════════════════════════════════════════════════════════════════ */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--bg-2);
color: var(--fg);
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 6px 20px var(--shadow);
border: 1px solid var(--border);
/* Выше оверлея поиска (650) и drag-ghost (500): иначе сообщения об
ошибке («Яндекс.Музыка не подключена», «Не удалось запустить трек»),
которые показываются прямо во время поиска, остаются невидимыми. */
z-index: 700;
font-size: 14px;
min-width: 200px;
max-width: 480px;
text-align: center;
}
.toast.hidden { display: none; }
#toast-text { display: block; line-height: 1.4; }
.toast-progress {
height: 4px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
margin-top: 10px;
}
.toast-progress.hidden { display: none; }
.toast-progress-bar {
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
border-radius: 2px;
transition: width 0.2s ease-out;
box-shadow: 0 0 8px var(--accent);
}
/* ═══════════════════════════════════════════════════════════════════ */
/* MODAL */
/* ═══════════════════════════════════════════════════════════════════ */
.modal {
position: fixed;
inset: 0;
z-index: 400;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.hidden { display: none; }
/* Широкая модалка: пикер музыки с двумя колонками. */
.modal-box.modal-wide {
max-width: 940px;
max-height: 88vh;
}
/* Если в модалке открыт пикер музыки — растягиваем её. */
.modal-box:has(.music-picker) {
max-width: 940px;
max-height: 88vh;
}
.modal-box:has(.music-picker) .modal-body {
display: flex;
flex-direction: column;
padding: 12px 16px;
min-height: 0;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
}
.modal-box {
position: relative;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 12px;
max-width: 560px;
width: 100%;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.modal-header h3 {
font-size: 17px;
font-weight: 600;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 12px;
}
.modal-body {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.modal-footer {
padding: 12px 20px;
border-top: 1px solid var(--border);
display: flex;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
.modal-footer .primary,
.modal-footer .ghost,
.modal-footer .danger {
padding: 8px 16px;
font-size: 13px;
border-radius: 6px;
}
.form-field { margin-bottom: 14px; }
.form-field label {
display: block;
font-size: 12px;
color: var(--fg-dim);
margin-bottom: 6px;
font-weight: 500;
}
.form-field input,
.form-field textarea,
.form-field select {
width: 100%;
padding: 10px 12px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
font-size: 14px;
outline: none;
font-family: inherit;
resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color: var(--accent); }
.form-field .hint {
font-size: 11px;
color: var(--fg-dim);
margin-top: 4px;
}
/* ─── Список участников ─── */
.member-row {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: none; }
.member-row .info { flex: 1; min-width: 0; }
.member-row .name { font-size: 14px; color: var(--fg); }
.member-row .sub { font-size: 11px; color: var(--fg-dim); }
.member-row .badge {
display: inline-flex;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
background: var(--bg-3);
color: var(--fg-dim);
}
.member-row .badge.owner { background: var(--accent-soft-2); color: var(--accent); }
.member-row .badge.edit { background: rgba(74, 222, 128, 0.15); color: var(--success); }
.member-row .actions { display: flex; gap: 6px; }
.member-row .actions button { padding: 4px 10px; font-size: 11px; border-radius: 5px; }
/* ─── Ссылки ─── */
.share-row {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.share-row:last-child { border-bottom: none; }
.share-row .info { flex: 1; min-width: 0; }
.share-row .url {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px;
color: var(--accent);
word-break: break-all;
user-select: all;
}
.share-row .sub { font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
/* ─── Фото-пикер ─── */
.photo-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 8px;
max-height: 400px;
overflow-y: auto;
padding: 4px;
}
.photo-picker .pick-item {
aspect-ratio: 1;
border-radius: 6px;
overflow: hidden;
position: relative;
cursor: pointer;
background: var(--bg-3);
border: 2px solid transparent;
transition: border-color 0.15s;
}
.photo-picker .pick-item:hover { border-color: var(--accent); }
.photo-picker .pick-item.selected { border-color: var(--accent); }
.photo-picker .pick-item.selected::after {
content: "✓";
position: absolute;
top: 4px;
right: 4px;
background: var(--accent);
color: white;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
}
.photo-picker .pick-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pick-item .type-badge {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.72);
color: white;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 3px;
letter-spacing: 0.4px;
font-variant-numeric: tabular-nums;
pointer-events: none;
z-index: 3;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* CONTEXT MENU */
/* ═══════════════════════════════════════════════════════════════════ */
.context-menu {
position: fixed;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 4px;
z-index: 400;
min-width: 220px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
animation: context-appear 0.1s;
}
@keyframes context-appear {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.context-item {
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
border-radius: 5px;
color: var(--fg);
transition: background 0.1s;
user-select: none;
}
.context-item:hover { background: var(--bg-3); }
.context-item.danger { color: var(--danger); }
.context-item.danger:hover { background: rgba(224, 82, 82, 0.15); }
.context-sep {
height: 1px;
background: var(--border);
margin: 4px 6px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ADMIN PANEL */
/* ═══════════════════════════════════════════════════════════════════ */
.admin-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px 0;
flex-wrap: wrap;
}
.admin-header h2 { font-size: 20px; font-weight: 600; color: var(--fg); }
.admin-summary { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-summary .pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 12px;
background: var(--bg-3);
color: var(--fg-dim);
font-size: 12px;
border: 1px solid var(--border);
}
.admin-summary .pill.warn {
background: rgba(251, 191, 36, 0.14);
border-color: var(--warning);
color: var(--warning);
}
.admin-users {
display: grid;
gap: 10px;
padding: 20px 24px 60px;
}
.user-card {
display: flex;
gap: 16px;
padding: 16px;
background: var(--bg-2);
border: 1px solid var(--border);
border-left-width: 4px;
border-radius: 10px;
align-items: center;
transition: border-color 0.15s;
}
.user-card.pending { border-left-color: var(--warning); }
.user-card.approved { border-left-color: var(--success); }
.user-card.rejected { border-left-color: var(--danger); opacity: 0.7; }
.user-card.blocked { border-left-color: var(--fg-dim); opacity: 0.7; }
.user-info-col { flex: 1; min-width: 0; }
.user-name-row {
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 4px;
}
.user-display-name { font-size: 15px; font-weight: 600; color: var(--fg); }
.user-username {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 12px;
color: var(--fg-dim);
}
.user-meta { font-size: 12px; color: var(--fg-dim); margin-top: 2px; }
.user-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.user-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
background: var(--bg-3);
color: var(--fg-dim);
border: 1px solid transparent;
}
.user-badge.role-Admin { background: var(--accent-soft-2); color: var(--accent); }
.user-badge.role-Guest { background: rgba(251, 191, 36, 0.18); color: var(--warning); }
.user-badge.role-User { background: var(--bg-3); color: var(--fg-dim); }
.user-badge.status-Pending { background: rgba(251, 191, 36, 0.18); color: var(--warning); }
.user-badge.status-Rejected { background: rgba(224, 82, 82, 0.18); color: var(--danger); }
.user-badge.status-Approved { background: rgba(74, 222, 128, 0.15); color: var(--success); }
.user-badge.blocked { background: rgba(224, 82, 82, 0.15); color: var(--danger); }
.user-badge.superadmin {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
border: none;
}
.user-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.user-actions .ghost,
.user-actions .danger,
.user-actions .primary {
padding: 6px 12px;
font-size: 12px;
border-radius: 6px;
}
.user-actions .icon-action {
padding: 6px 10px;
font-size: 12px;
border-radius: 6px;
background: var(--bg-3);
border: 1px solid var(--border);
color: var(--fg);
cursor: pointer;
transition: border-color 0.15s;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: inherit;
}
.user-actions .icon-action:hover { border-color: var(--accent); }
.user-actions .icon-action:disabled { opacity: 0.4; cursor: not-allowed; }
.role-select {
background: var(--bg-3);
border: 1px solid var(--border);
color: var(--fg);
font-size: 12px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
outline: none;
font-family: inherit;
}
.role-select:focus { border-color: var(--accent); }
.role-select:disabled { opacity: 0.5; cursor: not-allowed; }
/* ═══════════════════════════════════════════════════════════════════ */
/* PROFILE */
/* ═══════════════════════════════════════════════════════════════════ */
.profile-container {
max-width: 720px;
margin: 0 auto;
padding: 24px 24px 60px;
}
.profile-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 24px;
text-align: center;
margin-bottom: 20px;
}
.profile-avatar {
font-size: 48px;
width: 80px;
height: 80px;
margin: 0 auto 14px;
background: var(--accent-soft);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--accent);
}
.profile-display-name {
font-size: 22px;
font-weight: 600;
color: var(--fg);
margin-bottom: 4px;
}
.profile-username {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 13px;
color: var(--fg-dim);
margin-bottom: 10px;
}
.profile-role {
display: inline-block;
background: var(--bg-3);
border: 1px solid var(--border);
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
color: var(--fg-dim);
}
.profile-section {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
}
.profile-row {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.profile-row:last-child { border-bottom: none; }
.profile-row-info { flex: 1; min-width: 0; }
.profile-row-title {
font-size: 14px;
font-weight: 500;
color: var(--fg);
margin-bottom: 2px;
}
.profile-row-sub { font-size: 12px; color: var(--fg-dim); line-height: 1.4; }
.profile-danger-zone { border-color: rgba(224, 82, 82, 0.3); }
/* ═══════════════════════════════════════════════════════════════════ */
/* ALBUMS */
/* ═══════════════════════════════════════════════════════════════════ */
.albums-container {
padding: 20px 24px 60px;
max-width: 1400px;
margin: 0 auto;
}
.albums-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.album-card {
cursor: pointer;
transition: transform 0.15s;
position: relative;
}
.album-card:hover { transform: translateY(-2px); }
.album-stack {
position: relative;
width: 100%;
aspect-ratio: 1.15;
margin-bottom: 10px;
perspective: 800px;
}
.album-stack-layer {
position: absolute;
inset: 0;
border-radius: 10px;
background: var(--bg-3);
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--border);
}
.album-stack-layer img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.album-stack-layer.empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
font-size: 48px;
background: var(--bg-3);
}
.album-stack-layer:nth-child(1) { transform: translate(0, 0) rotate(0deg); z-index: 4; }
.album-stack-layer:nth-child(2) { transform: translate(4px, -4px) rotate(1.5deg); z-index: 3; opacity: 0.85; }
.album-stack-layer:nth-child(3) { transform: translate(8px, -8px) rotate(3deg); z-index: 2; opacity: 0.65; }
.album-stack-layer:nth-child(4) { transform: translate(12px, -12px) rotate(4.5deg); z-index: 1; opacity: 0.45; }
.album-card:hover .album-stack-layer:nth-child(1) { transform: translate(0, -2px) rotate(-1deg); }
.album-card:hover .album-stack-layer:nth-child(2) { transform: translate(6px, -7px) rotate(2deg); }
.album-card:hover .album-stack-layer:nth-child(3) { transform: translate(11px, -12px) rotate(3.5deg); }
.album-card:hover .album-stack-layer:nth-child(4) { transform: translate(16px, -17px) rotate(5deg); }
.album-card-badges {
position: absolute;
top: -6px;
left: -6px;
display: flex;
gap: 6px;
z-index: 10;
}
.album-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--bg-2);
border: 1px solid var(--border);
color: var(--fg);
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.album-badge.owner {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
border: none;
}
.album-badge.pending {
background: var(--danger);
color: white;
border: none;
animation: pulse-badge 1.5s infinite;
}
.album-badge.public {
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent);
}
@keyframes pulse-badge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.album-card-title {
font-size: 14px;
font-weight: 600;
color: var(--fg);
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.album-card-meta {
font-size: 12px;
color: var(--fg-dim);
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.album-detail-container {
padding: 20px 24px 60px;
max-width: 1400px;
margin: 0 auto;
}
.album-detail-info { margin-bottom: 20px; color: var(--fg-dim); font-size: 13px; }
.album-detail-info h2 {
font-size: 22px;
color: var(--fg);
font-weight: 600;
margin-bottom: 6px;
}
.album-detail-info .desc {
color: var(--fg-dim);
font-size: 14px;
line-height: 1.5;
margin-bottom: 8px;
white-space: pre-wrap;
}
.album-photo-wrap { position: relative; }
.album-photo-remove {
position: absolute;
top: 6px;
right: 6px;
background: rgba(224, 82, 82, 0.9);
color: white;
border: none;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
display: none;
align-items: center;
justify-content: center;
z-index: 5;
padding-bottom: 3px;
}
.album-photo-wrap:hover .album-photo-remove { display: flex; }
/* ═══════════════════════════════════════════════════════════════════ */
/* СЕКЦИИ — flex-column, скролл внутри */
/* ═══════════════════════════════════════════════════════════════════ */
.app-section { display: none; }
.app-section.active {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
/* Вложенные виды внутри секции (альбомы) */
.app-section-view { display: none; }
.app-section-view.active {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
/* Скроллируемое тело секции */
.app-section-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
}
/* ─── Files: своя обёртка с padding ─── */
#files-container {
user-select: none;
-webkit-user-select: none;
}
.files-container-inner {
padding: 16px 24px;
}
#files-content {
display: block;
width: 100%;
}
/* ─── STATUSBAR ─── */
.files-statusbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 16px;
background: var(--bg-2);
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--fg-dim);
flex-shrink: 0;
min-height: 34px;
}
.files-statusbar-left { display: flex; gap: 8px; align-items: center; }
#files-status-selected,
#gallery-status-selected,
#album-status-selected {
color: var(--accent);
font-weight: 500;
}
.files-statusbar-right {
display: flex;
gap: 2px;
align-items: center;
}
.view-btn {
background: transparent;
border: 1px solid transparent;
color: var(--fg-dim);
width: 28px;
height: 26px;
border-radius: 5px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
padding: 0;
line-height: 1;
font-family: inherit;
}
.view-btn:hover { background: var(--bg-3); color: var(--fg); }
.view-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
/* ═══════════════════════════════════════════════════════════════════ */
/* СЕТКА — ЗНАЧКИ */
/* ═══════════════════════════════════════════════════════════════════ */
.files-grid:not(.hidden) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
width: 100%;
align-content: start;
}
.file-card {
display: flex;
flex-direction: column;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 6px;
cursor: pointer;
transition: border-color 0.1s, background 0.1s, transform 0.1s;
position: relative;
user-select: none;
-webkit-user-select: none;
overflow: hidden;
}
.file-card:hover {
border-color: var(--accent);
background: var(--bg-3);
}
.file-card.selected {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: 0 0 0 2px var(--accent);
}
.file-card.dragging { opacity: 0.35; }
.file-card.cut { opacity: 0.4; }
.file-card.drop-target {
background: var(--accent-soft);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent);
}
.file-card-preview {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--bg-3);
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.file-card-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.file-card-preview > .ico {
width: 56px;
height: 56px;
color: var(--fg-dim);
transition: transform 0.15s;
}
.file-card:hover .file-card-preview > .ico {
transform: scale(1.06);
}
.file-card-name {
margin-top: 6px;
padding: 0 2px;
font-size: 12px;
font-weight: 500;
color: var(--fg);
line-height: 1.3;
text-align: center;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 2.6em;
}
.file-card-badge {
position: absolute;
bottom: 5px;
left: 5px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 3px 6px;
border-radius: 4px;
letter-spacing: 0.2px;
font-variant-numeric: tabular-nums;
pointer-events: none;
z-index: 3;
max-width: calc(100% - 10px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.file-card-badges-overlay {
position: absolute;
top: 5px;
right: 5px;
display: flex;
gap: 3px;
z-index: 4;
pointer-events: none;
}
.folder-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 1px 5px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.folder-badge.public {
background: var(--accent);
color: white;
border: none;
}
.folder-badge.pending {
background: var(--danger);
color: white;
border: none;
}
.folder-badge.members {
background: rgba(0, 0, 0, 0.6);
color: white;
}
.folder-badge.shared {
background: var(--accent);
color: white;
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
}
/* ─── СПИСОК ─── */
.files-list:not(.hidden) {
display: flex;
flex-direction: column;
width: 100%;
align-items: stretch;
text-align: left;
padding-right: 40px;
}
.files-list-header {
display: grid;
grid-template-columns: 1fr 180px 120px 100px;
gap: 12px;
padding: 6px 12px;
font-size: 11px;
color: var(--fg-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
font-weight: 600;
user-select: none;
}
.files-list-row {
display: grid;
grid-template-columns: 1fr 180px 120px 100px;
gap: 12px;
padding: 6px 12px;
align-items: center;
border-radius: 6px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
border: 1px solid transparent;
font-size: 13px;
transition: background 0.1s;
color: var(--fg);
text-align: left;
}
.files-list-row:hover { background: var(--bg-3); }
.files-list-row.selected {
background: var(--accent-soft);
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
.files-list-row.dragging { opacity: 0.35; }
.files-list-row.cut { opacity: 0.4; }
.files-list-row.drop-target {
background: var(--accent-soft);
border-color: var(--accent);
}
.files-list-name {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
overflow: hidden;
justify-content: flex-start;
}
.files-list-name .icon { font-size: 18px; flex-shrink: 0; }
.files-list-name .text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Бейдж рядом с именем в списке файлов: владелец расшаренной папки и
число участников. Без него иконка и текст слипались с именем. */
.row-badge {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 6px;
padding: 1px 5px;
border-radius: 4px;
background: var(--bg-3);
color: var(--fg-dim);
font-size: 11px;
line-height: 1.5;
vertical-align: middle;
}
.row-badge .ico {
width: 12px;
height: 12px;
}
.files-list-cell {
color: var(--fg-dim);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
justify-content: flex-start;
}
.files-list-name .files-list-thumb {
width: 28px;
height: 28px;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
background: var(--bg-3);
}
.files-list-name .icon-svg {
width: 20px;
height: 20px;
color: var(--fg-dim);
flex-shrink: 0;
}
/* ─── RUBBER BAND ─── */
.rubber-band {
position: fixed;
background: rgba(139, 92, 246, 0.15);
border: 1px solid var(--accent);
border-radius: 2px;
pointer-events: none;
z-index: 350;
}
/* ─── Простой file-view (в модалке) ─── */
.file-view {
text-align: center;
padding: 40px 20px;
color: var(--fg-dim);
}
.file-view .icon { font-size: 64px; margin-bottom: 12px; }
.file-view .icon > .ico { width: 64px; height: 64px; }
.file-view .name { color: var(--fg); font-size: 16px; margin-bottom: 6px; }
.file-view .size { font-size: 13px; }
/* ═══════════════════════════════════════════════════════════════════ */
/* ЕДИНОЕ ОКНО «ПОДЕЛИТЬСЯ» */
/* ═══════════════════════════════════════════════════════════════════ */
.share-section {
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.share-section:first-child { padding-top: 0; }
.share-section:last-child { padding-bottom: 0; border-bottom: none; }
.share-section-title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
color: var(--fg);
margin-bottom: 12px;
}
.share-section-title .count {
color: var(--fg-dim);
font-weight: 400;
font-size: 12px;
}
.share-empty {
text-align: center;
color: var(--fg-dim);
padding: 14px;
font-size: 13px;
}
.pending-requests-block {
background: rgba(251, 191, 36, 0.08);
border: 1px solid var(--warning);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 12px;
}
.pending-requests-block .pr-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
color: var(--warning);
margin-bottom: 8px;
}
.pending-request-row {
background: var(--bg-3);
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 6px;
display: flex;
flex-direction: column;
gap: 6px;
}
.pending-request-row:last-child { margin-bottom: 0; }
.pending-request-row .who {
font-size: 13px;
color: var(--fg);
}
.pending-request-row .msg {
font-size: 12px;
color: var(--fg-dim);
background: var(--bg-2);
padding: 6px 8px;
border-radius: 4px;
line-height: 1.4;
}
.pending-request-row .actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.pending-request-row .actions button {
padding: 4px 10px;
font-size: 11px;
border-radius: 5px;
}
.pending-request-row .actions label {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--fg-dim);
cursor: pointer;
}
.share-create-form {
background: var(--bg-3);
border-radius: 8px;
padding: 12px;
margin-top: 10px;
}
.share-create-form .form-field { margin-bottom: 10px; }
.share-create-form .form-field:last-of-type { margin-bottom: 12px; }
/* ═══════════════════════════════════════════════════════════════════ */
/* НАВИГАЦИЯ ПО РАЗДЕЛАМ */
/* ═══════════════════════════════════════════════════════════════════ */
.section-nav {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.section-btn {
position: relative;
background: transparent;
border: 1px solid transparent;
color: var(--fg-dim);
width: 38px;
height: 38px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s, border-color 0.15s;
padding: 0;
line-height: 1;
font-family: inherit;
flex-shrink: 0;
}
.section-btn:hover {
color: var(--fg);
background: var(--bg-3);
}
.section-btn.active {
color: var(--accent);
background: var(--accent-soft);
border-color: var(--accent);
}
.section-btn .ico {
width: 20px;
height: 20px;
vertical-align: 0;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ARCHIVE STATUS */
/* ═══════════════════════════════════════════════════════════════════ */
.archive-status {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 10px;
padding: 2px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
background: var(--bg-3);
color: var(--fg-dim);
border: 1px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
vertical-align: middle;
}
.archive-status:empty { display: none; }
.archive-status.preparing {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
.archive-status.ready {
background: rgba(74, 222, 128, 0.15);
color: var(--success);
border-color: var(--success);
}
.archive-status.failed {
background: rgba(224, 82, 82, 0.15);
color: var(--danger);
border-color: var(--danger);
}
/* ═══════════════════════════════════════════════════════════════ */
/* СПИННЕР АВТО-ПОДГРУЗКИ ГАЛЕРЕИ */
/* ═══════════════════════════════════════════════════════════════ */
.gallery-more-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: gallery-spin 0.7s linear infinite;
margin: 24px auto;
}
@keyframes gallery-spin {
to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════════════════════════ */
/* ИКОНКИ */
/* ═══════════════════════════════════════════════════════════════ */
.ico {
display: inline-block;
width: 1.2em;
height: 1.2em;
vertical-align: -0.22em;
flex-shrink: 0;
pointer-events: none;
}
.folder-badge .ico,
.user-badge .ico,
.album-badge .ico,
.badge .ico {
width: 12px;
height: 12px;
vertical-align: -2px;
}
.modal-footer .ico,
.form-field .ico,
.ghost .ico,
.primary .ico,
.danger .ico {
width: 15px;
height: 15px;
vertical-align: -3px;
margin-right: 4px;
}
.ico-folder {
color: currentColor;
fill: none;
}
/* ═══════════════════════════════════════════════════════════════ */
/* МУЛЬТИВЫДЕЛЕНИЕ В ГАЛЕРЕЕ И АЛЬБОМАХ */
/* ═══════════════════════════════════════════════════════════════ */
.thumb.selected {
outline: 3px solid var(--accent);
outline-offset: -3px;
box-shadow: 0 0 0 3px var(--accent-soft);
}
.thumb.selected::after {
content: "✓";
position: absolute;
top: 6px;
right: 6px;
background: var(--accent);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
z-index: 5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* ═══════════════════════════════════════════════════════════════ */
/* АДАПТИВ */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.viewer-nav { width: 44px; height: 44px; font-size: 28px; }
.viewer-nav.prev { left: 12px; }
.viewer-nav.next { right: 12px; }
.viewer-close { top: 12px; right: 12px; width: 44px; height: 44px; font-size: 24px; }
.viewer-content { padding: 60px 60px 100px; }
.topbar {
/* Не переносим содержимое на вторую строку.
Если всё не влезает — JS скрывает логотип (.hide-brand). */
flex-wrap: nowrap;
padding: 8px 12px;
gap: 6px;
}
.topbar .user-info { gap: 2px; }
.topbar .user-info #user-name { display: none; }
.section-btn,
.icon-btn,
.tab {
width: 34px;
height: 34px;
}
.section-btn .ico,
.icon-btn .ico,
.tab .ico {
width: 18px;
height: 18px;
}
.date-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.recovery-codes { grid-template-columns: 1fr; }
.auth-box.wide { padding: 24px; }
.qr-wrap img { width: 200px; height: 200px; }
.profile-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.profile-row .ghost,
.profile-row .danger { width: 100%; }
.user-card {
flex-direction: column;
align-items: stretch;
}
.user-actions { justify-content: flex-start; }
.albums-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.section-toolbar,
.tabs { padding: 6px 12px; min-height: 46px; }
.files-statusbar { padding: 4px 12px; min-height: 34px; }
.files-toolbar-path { font-size: 12px; }
.toolbar-btn { width: 30px; height: 30px; }
.toolbar-btn .ico { width: 16px; height: 16px; }
.files-grid:not(.hidden) {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 8px;
}
.file-card { padding: 4px; }
.file-card-preview { border-radius: 5px; }
.file-card-preview > .ico { width: 40px; height: 40px; }
.file-card-name { font-size: 11px; margin-top: 4px; }
.file-card-badge { font-size: 9px; padding: 2px 5px; }
.files-list-header,
.files-list-row { grid-template-columns: 1fr 90px 60px; }
.files-list-header > *:nth-child(3),
.files-list-row > *:nth-child(3) { display: none; }
.files-container-inner { padding: 12px 16px; }
/* ─── ТУЛБАРЫ НА МОБИЛЬНОМ ───
Раскладка: [up] [path] [tabs-buttons] [actions].
• path не сжимается — показывает крошки полностью;
• tabs с margin:0 auto центрируются, если в панели есть запас;
• если суммарная ширина больше экрана — панель скроллится. */
.section-toolbar,
.tabs {
flex-wrap: nowrap;
align-items: center;
gap: 6px;
padding: 6px 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.section-toolbar::-webkit-scrollbar,
.tabs::-webkit-scrollbar { display: none; }
/* Path занимает свою натуральную ширину и не сжимается.
Если места мало — уезжает вместе с панелью влево, не мешая вкладкам. */
.files-toolbar-path {
flex: 0 0 auto;
max-width: none;
min-width: 0;
overflow: visible;
white-space: nowrap;
font-size: 12px;
}
.files-toolbar-path .crumb,
.files-toolbar-path .crumb-sep {
flex-shrink: 0;
}
/* Вкладки — в потоке, центрируются в свободном месте.
При переполнении скроллятся вместе с панелью. */
.tabs-buttons {
position: static;
transform: none;
margin: 0 auto;
flex-shrink: 0;
}
/* Actions не сжимаются */
.files-toolbar-actions {
flex: 0 0 auto;
margin-left: 0;
}
.section-toolbar > .toolbar-btn,
.files-toolbar-actions > .toolbar-btn,
.archive-status {
flex-shrink: 0;
}
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ВИДЫ ОТОБРАЖЕНИЯ — МЕЛКИЕ ЗНАЧКИ */
/* ═══════════════════════════════════════════════════════════════════ */
/* Включается классом .view-small на корневой секции.
Галерея: #section-gallery.view-small
Список альбомов: #albums-list-view.view-small
Детали альбома: #album-detail-view.view-small
Файлы: #files-main-view.view-small */
/* ─── Галерея ─── */
#section-gallery.view-small .date-grid {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px;
}
#section-gallery.view-small .date-group { margin-bottom: 20px; }
#section-gallery.view-small .date-header { font-size: 12px; margin-bottom: 8px; }
#section-gallery.view-small .thumb .fav-badge { font-size: 14px; top: 4px; left: 4px; }
#section-gallery.view-small .thumb .type-badge {
font-size: 9px;
padding: 2px 5px;
bottom: 4px;
right: 4px;
}
/* ─── Список альбомов ─── */
#albums-list-view.view-small .albums-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
#albums-list-view.view-small .album-card-title { font-size: 12px; }
#albums-list-view.view-small .album-card-meta { font-size: 11px; gap: 4px; }
#albums-list-view.view-small .album-card-badges { top: -4px; left: -4px; gap: 4px; }
#albums-list-view.view-small .album-badge {
padding: 2px 6px;
font-size: 10px;
border-radius: 8px;
}
#albums-list-view.view-small .album-stack { margin-bottom: 6px; }
/* ─── Детали альбома ─── */
#album-detail-view.view-small #album-detail-grid {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px;
}
#album-detail-view.view-small .thumb .fav-badge { font-size: 14px; top: 4px; left: 4px; }
#album-detail-view.view-small .thumb .type-badge {
font-size: 9px;
padding: 2px 5px;
bottom: 4px;
right: 4px;
}
#album-detail-view.view-small .album-photo-remove {
width: 20px;
height: 20px;
font-size: 11px;
top: 4px;
right: 4px;
}
/* ─── Файлы ─── */
#files-main-view.view-small .files-grid:not(.hidden) {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px;
}
#files-main-view.view-small .file-card {
padding: 4px;
border-radius: 8px;
}
#files-main-view.view-small .file-card-preview { border-radius: 5px; }
#files-main-view.view-small .file-card-preview > .ico {
width: 36px;
height: 36px;
}
#files-main-view.view-small .file-card-name {
font-size: 10px;
-webkit-line-clamp: 1;
min-height: 1.4em;
margin-top: 3px;
padding: 0;
}
#files-main-view.view-small .file-card-badge {
font-size: 9px;
padding: 2px 4px;
bottom: 3px;
left: 3px;
border-radius: 3px;
}
#files-main-view.view-small .file-card-badges-overlay { top: 3px; right: 3px; }
#files-main-view.view-small .folder-badge {
font-size: 9px;
padding: 0 4px;
border-radius: 4px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* КНОПКА СМЕНЫ ВИДА — DISABLED */
/* ═══════════════════════════════════════════════════════════════════ */
.view-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.view-btn:disabled:hover {
background: transparent;
color: var(--fg-dim);
}
/* ═══════════════════════════════════════════════════════════════════ */
/* КОРЗИНЫ (АЛЬБОМЫ И ФАЙЛЫ) — сетка, как в галерее */
/* ═══════════════════════════════════════════════════════════════════ */
/* Сетки корзин переиспользуют .albums-grid и .files-grid,
но карточки — облегчённые (.trash-card). */
.trash-card {
display: flex;
flex-direction: column;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 6px;
cursor: pointer;
transition: border-color 0.1s, background 0.1s;
position: relative;
user-select: none;
-webkit-user-select: none;
overflow: hidden;
}
.trash-card:hover {
border-color: var(--accent);
background: var(--bg-3);
}
.trash-card.selected {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: 0 0 0 2px var(--accent);
}
.trash-card-preview {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--bg-3);
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trash-card-preview > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.trash-card-preview > .ico {
width: 56px;
height: 56px;
color: var(--fg-dim);
transition: transform 0.15s;
}
.trash-card:hover .trash-card-preview > .ico {
transform: scale(1.06);
}
.trash-card-name {
margin-top: 6px;
padding: 0 2px;
font-size: 12px;
font-weight: 500;
color: var(--fg);
line-height: 1.3;
text-align: center;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 2.6em;
}
.trash-card-badge {
position: absolute;
bottom: 5px;
left: 5px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 3px 6px;
border-radius: 4px;
letter-spacing: 0.2px;
font-variant-numeric: tabular-nums;
pointer-events: none;
z-index: 3;
max-width: calc(100% - 10px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ─── Мелкие значки в корзинах ─── */
#albums-trash-view.view-small .albums-grid,
#files-trash-view.view-small .files-grid:not(.hidden) {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px;
}
#albums-trash-view.view-small .trash-card,
#files-trash-view.view-small .trash-card {
padding: 4px;
border-radius: 8px;
}
#albums-trash-view.view-small .trash-card-preview,
#files-trash-view.view-small .trash-card-preview {
border-radius: 5px;
}
#albums-trash-view.view-small .trash-card-preview > .ico,
#files-trash-view.view-small .trash-card-preview > .ico {
width: 40px;
height: 40px;
}
#albums-trash-view.view-small .trash-card-name,
#files-trash-view.view-small .trash-card-name {
font-size: 10px;
-webkit-line-clamp: 1;
min-height: 1.4em;
margin-top: 4px;
padding: 0;
}
#albums-trash-view.view-small .trash-card-badge,
#files-trash-view.view-small .trash-card-badge {
font-size: 9px;
padding: 2px 4px;
bottom: 3px;
left: 3px;
border-radius: 3px;
}
/* ─── Список в корзине файлов (только файлы) ─── */
#files-trash-view .files-list:not(.hidden) {
padding-right: 40px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* МОБИЛЬНЫЙ АДАПТИВ ДЛЯ НОВЫХ БЛОКОВ */
/* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
#section-gallery.view-small .date-grid,
#album-detail-view.view-small #album-detail-grid,
#files-main-view.view-small .files-grid:not(.hidden) {
grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
gap: 6px;
}
#albums-list-view.view-small .albums-grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
}
.albums-trash-list,
.files-trash-list {
padding: 12px 16px;
}
.trash-row {
padding: 8px 10px;
gap: 10px;
}
.trash-row .trash-icon,
.trash-row .trash-thumb {
width: 32px;
height: 32px;
}
.trash-row .trash-name { font-size: 13px; }
.trash-row .trash-actions .toolbar-btn { width: 28px; height: 28px; }
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ГАЛОЧКА В УГЛУ ВЫДЕЛЕННОЙ КАРТОЧКИ */
/* ═══════════════════════════════════════════════════════════════════ */
/* Общий стиль галочки для всех выделяемых карточек.
Галерея уже имеет через .thumb.selected::after — расширяем на остальные. */
.album-card.selected::after,
.album-trash-card.selected::after,
.file-trash-card.selected::after,
#files-main-view .file-card.selected::after,
#files-trash-view .files-list-row.selected::after,
.albums-trash-grid .album-trash-card.selected::after {
content: "";
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent) url("data:image/svg+xml;utf8,") center / 14px no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
z-index: 5;
pointer-events: none;
}
.album-card,
.album-trash-card,
.file-trash-card {
position: relative;
}
/* Для мелкого вида — уменьшенная галочка */
#albums-trash-view.view-small .album-trash-card.selected::after,
#files-trash-view.view-small .file-trash-card.selected::after,
#files-main-view.view-small .file-card.selected::after {
width: 18px;
height: 18px;
background-size: 11px;
top: 4px;
right: 4px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ЗАПРЕТ ВЫДЕЛЕНИЯ ТЕКСТА ПРИ DRAG-RUBBER-BAND */
/* ═══════════════════════════════════════════════════════════════════ */
/* Чтобы при перетаскивании rubber band не выделялись текст/даты/иконки. */
#gallery-body,
#gallery-grid,
.date-grid,
.date-group,
#album-detail-grid,
#albums-body,
#albums-grid,
#albums-trash-grid,
#files-container,
#files-trash-view,
.files-grid,
.files-list,
.albums-grid,
.trash-card,
.file-card,
.thumb {
user-select: none;
-webkit-user-select: none;
}
#gallery-body img,
#album-detail-grid img,
#albums-grid img,
#albums-trash-grid img,
.files-grid img,
.files-list img,
.trash-card img,
.file-card img,
.thumb img {
-webkit-user-drag: none;
user-drag: none;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* РАЗМЕРЫ SVG-ИКОНОК В КОНТЕКСТАХ, ГДЕ РАНЬШЕ БЫЛИ ЭМОДЗИ */
/* ═══════════════════════════════════════════════════════════════════ */
.thumb .file-icon > .ico {
width: 48px;
height: 48px;
}
.files-list-name > .ico {
width: 20px;
height: 20px;
vertical-align: middle;
flex-shrink: 0;
color: var(--fg-dim);
}
.files-list-name > .ico.ico-folder {
color: #f6c345;
}
.file-preview-icon .icon > .ico {
width: 96px;
height: 96px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ПРИОРИТЕТНЫЙ OVERRIDE: вкладки возвращаются в поток на мобильном */
/* Обязательно в конце файла — чтобы перебить базовое правило */
/* .tabs-buttons { position: absolute; ... } из основной части. */
/* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.tabs-buttons {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: 0 auto !important;
flex-shrink: 0;
}
}
/* ─── ТАЧ-ВЗАИМОДЕЙСТВИЕ НА КАРТОЧКАХ ─── */
.file-card,
.files-list-row,
.file-trash-card {
-webkit-touch-callout: none;
}
#files-container,
#files-trash-view .app-section-body {
touch-action: manipulation;
}
/* Подсветка перетаскиваемого на тач */
body.touch-dragging .file-card.selected,
body.touch-dragging .files-list-row.selected {
opacity: 0.55;
transition: opacity 0.15s;
}
/* Тач: не показывать системный callout и не выделять текст */
.file-card,
.files-list-row,
.trash-card,
.file-trash-card {
-webkit-touch-callout: none;
}
/* Браузерный вертикальный скролл разрешён в обычном состоянии.
При long-press мы динамически ставим touch-action: none через JS,
чтобы перехватить и вертикаль тоже — до этого момента скролл работает штатно. */
#files-container {
touch-action: pan-y;
}
/* Пока карточку тащат — блокируем любые жесты браузера */
body.touch-dragging #files-container {
touch-action: none;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ТАЧ: убираем системную подсветку и мигание карточек */
/* ═══════════════════════════════════════════════════════════════════ */
.file-card,
.folder-card,
.files-list-row,
.trash-card,
.file-trash-card,
.album-card,
.thumb {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
/* На время тач-drag отключаем transition — при быстрой подсветке
папок/выделении карточек нет белых миганий. */
body.touch-dragging .file-card,
body.touch-dragging .files-list-row {
transition: none !important;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ПРИЗРАК ПЕРЕТАСКИВАНИЯ (тач + ПК) */
/* Размер подстраивается под вид: .view-grid / .view-grid-small / */
/* .view-list — эти классы ставит JS на корневой элемент призрака. */
/* ═══════════════════════════════════════════════════════════════════ */
.touch-drag-ghost,
.drag-ghost-pc {
position: fixed;
z-index: 500;
pointer-events: none;
border-radius: 10px;
background: var(--bg-2);
border: 2px solid var(--accent);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
0 0 0 3px var(--accent-soft);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.95;
box-sizing: border-box;
}
/* Мобильный призрак — следует за пальцем */
.touch-drag-ghost {
left: 0;
top: 0;
transform: translate(-50%, -120%);
will-change: transform, left, top;
}
/* ПК-призрак — только для setDragImage, в потоке не участвует */
.drag-ghost-pc {
left: -9999px;
top: -9999px;
}
/* ─── Размеры по виду отображения ─── */
.touch-drag-ghost.view-grid,
.drag-ghost-pc.view-grid {
width: 120px;
height: 120px;
}
.touch-drag-ghost.view-grid-small,
.drag-ghost-pc.view-grid-small {
width: 84px;
height: 84px;
}
.touch-drag-ghost.view-list,
.drag-ghost-pc.view-list {
width: 56px;
height: 56px;
border-radius: 8px;
}
/* ─── Содержимое ─── */
.touch-drag-ghost img,
.drag-ghost-pc img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.touch-drag-ghost.view-grid .ico,
.drag-ghost-pc.view-grid .ico { width: 72px; height: 72px; }
.touch-drag-ghost.view-grid-small .ico,
.drag-ghost-pc.view-grid-small .ico { width: 48px; height: 48px; }
.touch-drag-ghost.view-list .ico,
.drag-ghost-pc.view-list .ico { width: 32px; height: 32px; }
.touch-drag-ghost .ico,
.drag-ghost-pc .ico {
color: var(--accent);
}
/* ─── Счётчик выделенных ─── */
.touch-drag-ghost .ghost-count,
.drag-ghost-pc .ghost-count {
position: absolute;
bottom: 4px;
right: 4px;
background: var(--accent);
color: white;
font-size: 12px;
font-weight: 700;
min-width: 22px;
height: 22px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
border: 2px solid var(--bg-2);
font-variant-numeric: tabular-nums;
z-index: 2;
}
/* В мелком списке бейдж меньше */
.touch-drag-ghost.view-list .ghost-count,
.drag-ghost-pc.view-list .ghost-count {
min-width: 18px;
height: 18px;
font-size: 10px;
border-width: 1px;
bottom: 2px;
right: 2px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* МУЗЫКА */
/* ═══════════════════════════════════════════════════════════════════ */
.music-container {
padding: 16px 24px 40px;
max-width: 1400px;
margin: 0 auto;
}
/* ─── Комбинированный поиск (локальные треки + Яндекс.Музыка) ─── */
/*
Открывается при начале ввода в общем поле поиска в разделе «Музыка».
Две равные колонки: слева своя музыка, справа каталог Яндекса.
На узких экранах — вертикально.
*/
.music-search-overlay {
position: fixed;
inset: 0;
z-index: 650;
background: var(--bg);
display: flex;
flex-direction: column;
}
.music-search-overlay.hidden { display: none; }
.music-search-head {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
border-bottom: 1px solid var(--border);
background: var(--bg-2);
flex-shrink: 0;
}
.music-search-query {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1 1 auto;
font-size: 15px;
color: var(--fg);
}
.music-search-query .search-icon {
color: var(--fg-dim);
display: inline-flex;
flex-shrink: 0;
}
#music-search-input {
flex: 1 1 auto;
min-width: 0;
padding: 8px 12px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
font-size: 15px;
font-family: inherit;
outline: none;
}
#music-search-input:focus { border-color: var(--accent); }
#music-search-input::placeholder { color: var(--fg-dim); }
/*
Переключатель области поиска (Треки / Исполнители / Альбомы).
Элемент намеренно несёт ещё и класс `.tabs-buttons`, но тот рассчитан на
вкладки галереи и позиционирует группу абсолютно в ЦЕНТР родителя
(`left:50%; top:50%; transform:translate(-50%,-50%)`). Здесь родитель —
шапка поиска, поэтому переключатель улетал в середину экрана. Возвращаем
его в поток: это обычная inline-группа иконок справа от поля ввода.
*/
.music-search-scope {
position: static;
left: auto;
top: auto;
transform: none;
flex-shrink: 0;
display: flex;
gap: 4px;
}
/* Иконки в общем стиле сайта: квадрат, как у .tab в остальных разделах. */
.music-search-scope .tab {
width: 34px;
height: 34px;
padding: 0;
font-size: 0; /* текст в кнопке не нужен — только иконка */
}
.music-search-scope .tab .ico {
width: 18px;
height: 18px;
}
.music-search-columns {
flex: 1 1 auto;
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 0;
min-height: 0;
}
/* Вертикальный разделитель между половинами */
.music-search-columns::before {
content: '';
display: block;
background: var(--border);
}
.music-search-col {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
grid-row: 1;
}
#music-search-local-col { grid-column: 1; }
#music-search-yandex-col { grid-column: 3; }
.music-search-col-head {
padding: 12px 20px 8px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.music-search-col-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-dim);
font-weight: 600;
}
.music-search-count { color: var(--fg-dim); font-weight: 500; }
.music-search-col-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0 20px 32px;
min-height: 0;
}
.music-search-cards {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 8px;
}
/* Карточка исполнителя / альбома */
.music-search-card {
display: grid;
grid-template-columns: 48px 1fr;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
border: 1px solid transparent;
}
.music-search-card:hover { background: var(--bg-3); }
.music-search-card-cover {
width: 48px;
height: 48px;
border-radius: 6px;
overflow: hidden;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
}
.music-search-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.music-search-card-title {
font-size: 14px;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-search-card-meta {
font-size: 12px;
color: var(--fg-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Кнопка «назад» к результатам поиска (после открытия альбома/исполнителя) */
.music-search-back {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
color: var(--accent);
cursor: pointer;
font-size: 13px;
padding: 4px 0 8px;
}
.music-search-back:hover { color: var(--accent-hover); }
.music-search-hint {
font-size: 12px;
color: var(--fg-dim);
padding: 10px 12px;
}
/* Пометка «нужно скачать» у результатов Яндекса */
.music-track-download-badge {
font-size: 11px;
color: var(--fg-dim);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
white-space: nowrap;
}
.music-track.is-downloading .music-track-play { opacity: 0.6; cursor: progress; }
@media (max-width: 900px) {
.music-search-columns {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1px 1fr;
}
.music-search-columns::before { grid-row: 2; grid-column: 1; }
#music-search-local-col { grid-row: 1; grid-column: 1; }
#music-search-yandex-col { grid-row: 3; grid-column: 1; }
.music-search-head { flex-wrap: wrap; }
.music-search-col-body { padding: 0 12px 24px; }
}
/* ─── Список треков ─── */
.music-tracks {
display: flex;
flex-direction: column;
gap: 2px;
}
.music-track {
display: grid;
grid-template-columns: 48px 1fr auto auto auto auto;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.1s, border-color 0.1s;
position: relative;
}
.music-track:hover {
background: var(--bg-3);
}
.music-track.is-favorite .music-track-title > span:last-child {
color: var(--accent);
}
.music-track-cover {
position: relative;
width: 48px;
height: 48px;
border-radius: 6px;
overflow: hidden;
background: var(--bg-3);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.music-track-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.music-cover-stub {
color: var(--fg-dim);
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.music-cover-stub .ico {
width: 22px;
height: 22px;
}
.music-track-play {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.15s;
padding: 0;
font-family: inherit;
}
.music-track-play .ico {
width: 20px;
height: 20px;
}
.music-track:hover .music-track-play {
opacity: 1;
}
.music-track-play:hover {
background: rgba(0, 0, 0, 0.8);
}
.music-track-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.music-track-title {
font-size: 14px;
font-weight: 500;
color: var(--fg);
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-track-title > span:last-child {
overflow: hidden;
text-overflow: ellipsis;
}
.music-source-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.music-source-badge.yandex {
background: #fc3f1d;
color: #fff;
}
.music-track-meta {
font-size: 12px;
color: var(--fg-dim);
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-track-meta .dot {
opacity: 0.5;
}
.music-track-format {
flex-shrink: 0;
}
.music-format-badge {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.4px;
background: var(--bg-3);
color: var(--fg-dim);
border: 1px solid var(--border);
}
.music-track-size,
.music-track-duration {
font-size: 12px;
color: var(--fg-dim);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
min-width: 48px;
text-align: right;
}
.music-track-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
opacity: 0.6;
transition: opacity 0.15s;
}
.music-track:hover .music-track-actions {
opacity: 1;
}
.music-fav-btn,
.music-queue-btn,
.music-menu-btn {
background: transparent;
border: 1px solid transparent;
color: var(--fg-dim);
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
padding: 0;
font-family: inherit;
flex: 0 0 auto;
}
.music-fav-btn .ico,
.music-queue-btn .ico,
.music-menu-btn .ico {
width: 16px;
height: 16px;
}
.music-fav-btn:hover,
.music-queue-btn:hover,
.music-menu-btn:hover {
background: var(--bg-2);
color: var(--fg);
}
.music-queue-btn:hover {
color: var(--accent);
}
.music-fav-btn.active {
color: #e05252;
}
.music-fav-btn.active:hover {
color: #ff6b6b;
}
/* ─── Плейлисты (сетка карточек) ─── */
.music-playlists {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding-top: 8px;
}
.music-playlist-card {
cursor: pointer;
transition: transform 0.15s;
}
.music-playlist-card:hover {
transform: translateY(-2px);
}
.music-playlist-cover-stack {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
margin-bottom: 10px;
perspective: 800px;
}
.music-playlist-cover-layer {
position: absolute;
inset: 0;
border-radius: 10px;
background: var(--bg-3);
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
}
.music-playlist-cover-layer img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.music-playlist-cover-layer.empty .ico {
width: 48px;
height: 48px;
opacity: 0.4;
}
.music-playlist-cover-layer:nth-child(1) { transform: translate(0, 0) rotate(0deg); z-index: 4; }
.music-playlist-cover-layer:nth-child(2) { transform: translate(4px, -4px) rotate(1.5deg); z-index: 3; opacity: 0.85; }
.music-playlist-cover-layer:nth-child(3) { transform: translate(8px, -8px) rotate(3deg); z-index: 2; opacity: 0.65; }
.music-playlist-cover-layer:nth-child(4) { transform: translate(12px, -12px) rotate(4.5deg); z-index: 1; opacity: 0.45; }
.music-playlist-card:hover .music-playlist-cover-layer:nth-child(1) { transform: translate(0, -2px) rotate(-1deg); }
.music-playlist-card:hover .music-playlist-cover-layer:nth-child(2) { transform: translate(6px, -7px) rotate(2deg); }
.music-playlist-card:hover .music-playlist-cover-layer:nth-child(3) { transform: translate(11px, -12px) rotate(3.5deg); }
.music-playlist-card:hover .music-playlist-cover-layer:nth-child(4) { transform: translate(16px, -17px) rotate(5deg); }
.music-playlist-title {
font-size: 14px;
font-weight: 600;
color: var(--fg);
margin-bottom: 4px;
overflow: hidden;
}
.music-playlist-title > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-playlist-meta {
font-size: 12px;
color: var(--fg-dim);
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.music-playlist-meta > span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-playlist-badge.system {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
background: var(--accent-soft-2);
color: var(--accent);
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1.4;
}
/* Бейджи шаринга: чужой плейлист, заявки, публичная ссылка */
.music-playlist-badge.shared {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
border-radius: 3px;
font-size: 10px;
background: rgba(74, 222, 128, 0.14);
color: var(--success);
flex-shrink: 0;
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.5;
}
.music-playlist-badge.shared .ico { width: 12px; height: 12px; }
.music-playlist-badge.requests {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 5px;
border-radius: 8px;
font-size: 10px;
font-weight: 700;
background: var(--danger);
color: #fff;
flex-shrink: 0;
line-height: 1;
}
.music-playlist-badge.link {
display: inline-flex;
align-items: center;
color: var(--fg-dim);
flex-shrink: 0;
}
.music-playlist-badge.link .ico { width: 12px; height: 12px; }
.music-playlist-owner {
margin-top: 4px;
font-size: 13px;
color: var(--fg-dim);
}
.member-row.join-request-row {
background: var(--accent-soft);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 6px;
}
/* ─── Детали плейлиста ─── */
.music-playlist-info {
margin-bottom: 20px;
color: var(--fg-dim);
font-size: 13px;
}
.music-playlist-info h2 {
font-size: 22px;
color: var(--fg);
font-weight: 600;
margin-bottom: 6px;
}
.music-playlist-info .desc {
color: var(--fg-dim);
font-size: 14px;
line-height: 1.5;
margin-bottom: 8px;
white-space: pre-wrap;
}
.music-playlist-info .meta {
color: var(--fg-dim);
font-size: 13px;
}
/* ─── Заглушка для «Яндекс» и «Волна» ─── */
.music-stub-icon {
font-size: 48px;
color: var(--fg-dim);
margin-bottom: 16px;
display: flex;
justify-content: center;
}
.music-stub-icon .ico {
width: 48px;
height: 48px;
}
#music-stub {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
color: var(--fg-dim);
font-size: 14px;
}
/* ─── Плейлист-пикер (модалка «Добавить в плейлист») ─── */
.music-playlist-picker {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 340px;
overflow-y: auto;
}
.music-playlist-picker-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 14px;
transition: border-color 0.15s, background 0.15s;
}
.music-playlist-picker-item:hover {
border-color: var(--accent);
background: var(--bg-2);
}
.music-playlist-picker-item .name {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-playlist-picker-item .count {
font-size: 12px;
color: var(--fg-dim);
flex-shrink: 0;
}
/* ─── Пометка "системный" в панели деталей ─── */
#music-playlist-parent {
font-size: 12px;
}
/* ─── Мобильная адаптация ─── */
@media (max-width: 768px) {
.music-container {
padding: 12px 16px 30px;
}
.music-track {
grid-template-columns: 40px 1fr auto;
gap: 10px;
padding: 6px 8px;
}
.music-track-cover {
width: 40px;
height: 40px;
}
.music-track-format,
.music-track-size,
.music-track-duration {
display: none;
}
.music-track-actions {
opacity: 1;
}
.music-track-title {
font-size: 13px;
}
.music-track-meta {
font-size: 11px;
}
.music-playlists {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 14px;
}
.music-playlist-title {
font-size: 13px;
}
.music-fav-btn,
.music-queue-btn,
.music-menu-btn {
width: 30px;
height: 30px;
}
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ПЛЕЕР — ОБЩЕЕ */
/* ═══════════════════════════════════════════════════════════════════ */
/* Закрашивание ползунков — единая логика для прогресса и громкости */
input[type="range"].music-mini-seek,
input[type="range"].music-full-seek,
input[type="range"].music-full-volume-slider {
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 2px;
outline: none;
cursor: pointer;
background: linear-gradient(
to right,
var(--accent) 0%,
var(--accent) var(--fill, 0%),
var(--bg-3) var(--fill, 0%),
var(--bg-3) 100%
);
transition: background 0.05s linear;
}
input[type="range"].music-mini-seek::-webkit-slider-thumb,
input[type="range"].music-full-seek::-webkit-slider-thumb,
input[type="range"].music-full-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
input[type="range"].music-mini-seek::-moz-range-thumb,
input[type="range"].music-full-seek::-moz-range-thumb,
input[type="range"].music-full-volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
border: none;
}
input[type="range"].music-full-seek::-webkit-slider-thumb {
width: 14px;
height: 14px;
}
input[type="range"].music-full-seek::-moz-range-thumb {
width: 14px;
height: 14px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ПЛЕЕР В ТОПБАРЕ */
/* ═══════════════════════════════════════════════════════════════════ */
.music-top-player {
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px;
height: 38px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
width: 300px;
flex: 0 0 300px;
margin-left: auto;
margin-right: 4px;
user-select: none;
overflow: hidden;
}
.music-top-player:hover {
background: var(--bg-3);
}
.music-top-cover {
position: relative;
width: 32px;
height: 32px;
border-radius: 5px;
overflow: hidden;
background: var(--bg-3);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.music-top-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.music-top-cover-stub {
color: var(--fg-dim);
display: inline-flex;
align-items: center;
justify-content: center;
}
.music-top-cover-stub .ico {
width: 16px;
height: 16px;
}
.music-top-title {
font-size: 13px;
font-weight: 500;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 auto;
}
.music-top-controls {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.music-top-btn {
background: transparent;
border: 1px solid transparent;
color: var(--fg);
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
padding: 0;
font-family: inherit;
flex-shrink: 0;
}
.music-top-btn:hover {
background: var(--bg-2);
}
.music-top-btn .ico {
width: 16px;
height: 16px;
}
.music-top-play {
background: var(--accent);
color: white;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 2px;
}
.music-top-play:hover {
background: var(--accent-hover);
}
.music-top-play .ico {
width: 14px;
height: 14px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ПЛЕЕР ВНИЗУ (под statusbar'ом) */
/* ═══════════════════════════════════════════════════════════════════ */
.music-mini-player {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: grid;
grid-template-columns: 44px 1fr auto auto auto;
align-items: center;
gap: 12px;
padding: 8px 16px;
background: var(--bg-2);
border-top: 1px solid var(--border);
cursor: pointer;
}
.music-mini-player.hidden {
display: none;
}
/* Сдвигаем весь app-screen, чтобы плеер не перекрывал statusbar */
body.has-mini-player #app-screen {
padding-bottom: 60px;
}
/* Профиль/админка — тоже сдвигаем, там нет statusbar, но плеер прижат к низу */
body.has-mini-player #profile-screen,
body.has-mini-player #admin-screen {
padding-bottom: 60px;
}
.music-mini-cover {
position: relative;
width: 44px;
height: 44px;
border-radius: 6px;
overflow: hidden;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
pointer-events: none;
}
.music-mini-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.music-mini-cover-stub {
color: var(--fg-dim);
display: inline-flex;
align-items: center;
justify-content: center;
}
.music-mini-cover-stub .ico {
width: 20px;
height: 20px;
}
.music-mini-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: none;
}
.music-mini-title {
font-size: 13px;
font-weight: 500;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-mini-artist {
font-size: 11px;
color: var(--fg-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-mini-progress {
flex-shrink: 0;
width: 220px;
max-width: 30vw;
display: flex;
align-items: center;
}
.music-mini-progress input[type="range"] {
width: 100%;
}
.music-mini-time {
font-size: 11px;
color: var(--fg-dim);
font-variant-numeric: tabular-nums;
display: flex;
gap: 4px;
flex-shrink: 0;
min-width: 84px;
justify-content: flex-end;
pointer-events: none;
}
.music-mini-time .sep {
opacity: 0.5;
}
.music-mini-controls {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.music-mini-btn {
background: transparent;
border: 1px solid transparent;
color: var(--fg);
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
padding: 0;
font-family: inherit;
flex-shrink: 0;
}
.music-mini-btn:hover {
background: var(--bg-3);
}
.music-mini-btn .ico {
width: 18px;
height: 18px;
}
.music-mini-play {
background: var(--accent);
color: white;
width: 40px;
height: 40px;
}
.music-mini-play:hover {
background: var(--accent-hover);
}
.music-mini-play .ico {
width: 16px;
height: 16px;
}
@media (max-width: 768px) {
.music-mini-player {
grid-template-columns: 40px 1fr auto;
gap: 10px;
padding: 6px 12px;
}
.music-mini-cover {
width: 40px;
height: 40px;
}
.music-mini-progress,
.music-mini-time {
display: none;
}
.music-mini-btn {
width: 32px;
height: 32px;
}
.music-mini-play {
width: 36px;
height: 36px;
}
body.has-mini-player #app-screen,
body.has-mini-player #profile-screen,
body.has-mini-player #admin-screen {
padding-bottom: 52px;
}
}
/* ═══════════════════════════════════════════════════════════════════ */
/* КНОПКА ПОКАЗА/СКРЫТИЯ ПЛЕЕРА В STATUSBAR'АХ */
/* ═══════════════════════════════════════════════════════════════════ */
.music-mini-toggle-sep {
display: inline-block;
width: 1px;
height: 18px;
background: var(--border);
margin: 0 4px;
flex-shrink: 0;
align-self: center;
}
.music-mini-toggle-sep.hidden {
display: none;
}
.music-mini-toggle-btn {
position: relative;
background: transparent;
border: 1px solid transparent;
color: var(--fg-dim);
width: 28px;
height: 26px;
border-radius: 5px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
padding: 0;
font-family: inherit;
flex-shrink: 0;
}
.music-mini-toggle-btn.hidden {
display: none;
}
.music-mini-toggle-btn:hover {
background: var(--bg-3);
color: var(--fg);
}
.music-mini-toggle-btn .ico {
width: 16px;
height: 16px;
}
/* Пульсирующая точка — если музыка играет, а плеер скрыт */
.music-mini-toggle-dot {
position: absolute;
top: 2px;
right: 2px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 2px var(--bg-2);
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
.music-mini-toggle-btn.has-activity .music-mini-toggle-dot {
opacity: 1;
animation: music-mini-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes music-mini-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ПОЛНЫЙ ПЛЕЕР */
/* ═══════════════════════════════════════════════════════════════════ */
.music-full-player {
position: fixed;
inset: 0;
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.music-full-player.hidden {
display: none;
}
.music-full-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.music-full-box {
position: relative;
z-index: 1;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 14px;
width: 100%;
max-width: 900px;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.music-full-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 24px 0;
flex-shrink: 0;
}
.music-full-context {
font-size: 12px;
color: var(--fg-dim);
text-transform: uppercase;
letter-spacing: 0.6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-full-icon-btn {
background: transparent;
border: 1px solid transparent;
color: var(--fg);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
padding: 0;
font-family: inherit;
flex-shrink: 0;
position: relative;
}
.music-full-icon-btn:hover {
background: var(--bg-3);
}
.music-full-icon-btn .ico {
width: 20px;
height: 20px;
}
.music-full-icon-btn.active {
color: var(--accent);
background: var(--accent-soft);
}
.music-full-icon-btn.active.one::after {
content: "1";
position: absolute;
font-size: 9px;
font-weight: 700;
transform: translate(8px, 8px);
color: inherit;
}
.music-full-icon-btn.muted {
color: var(--fg-dim);
}
/* ─── Верхняя часть: обложка + контролы ─── */
.music-full-top {
display: grid;
grid-template-columns: 240px 1fr;
gap: 28px;
padding: 16px 28px 20px;
flex-shrink: 0;
}
.music-full-cover {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.music-full-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.music-full-cover-stub {
color: var(--fg-dim);
display: flex;
align-items: center;
justify-content: center;
}
.music-full-cover-stub .ico {
width: 72px;
height: 72px;
opacity: 0.5;
}
.music-full-details {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.music-full-track {
margin-bottom: 18px;
}
.music-full-title {
font-size: 22px;
font-weight: 600;
color: var(--fg);
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-full-artist {
font-size: 14px;
color: var(--fg-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-full-progress {
margin-bottom: 14px;
}
.music-full-seek {
width: 100%;
}
.music-full-time {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--fg-dim);
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.music-full-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 14px;
}
.music-full-play {
width: 56px;
height: 56px;
background: var(--accent);
color: white;
}
.music-full-play:hover {
background: var(--accent-hover);
}
.music-full-play .ico {
width: 24px;
height: 24px;
}
.music-full-secondary {
display: flex;
align-items: center;
gap: 8px;
}
.music-full-secondary .music-full-icon-btn {
width: 36px;
height: 36px;
}
.music-full-secondary .music-full-icon-btn .ico {
width: 18px;
height: 18px;
}
.music-full-secondary .music-full-icon-btn.active {
color: #e05252;
background: rgba(224, 82, 82, 0.14);
}
.music-full-volume {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
min-width: 0;
}
.music-full-volume-slider {
width: 110px;
}
/* ─── Нижняя часть: очередь ─── */
.music-full-queue-wrap {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
padding: 14px 28px 20px;
}
.music-full-queue-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
flex-shrink: 0;
}
.music-full-queue-title {
font-size: 12px;
font-weight: 600;
color: var(--fg-dim);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.music-full-queue-count {
font-size: 12px;
color: var(--fg-dim);
}
.music-full-queue {
flex: 1;
min-height: 120px;
max-height: 40vh;
overflow-y: auto;
padding-right: 6px;
margin-right: -6px;
}
.music-full-queue::-webkit-scrollbar {
width: 8px;
}
.music-full-queue::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
.music-full-queue::-webkit-scrollbar-thumb:hover {
background: var(--fg-dim);
}
.music-full-queue-empty {
text-align: center;
color: var(--fg-dim);
font-size: 13px;
padding: 24px 0;
}
.music-full-queue-row {
display: grid;
grid-template-columns: 20px 1fr auto auto 28px;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: var(--fg);
transition: background 0.1s;
user-select: none;
border: 1px solid transparent;
position: relative;
}
.music-full-queue-row.no-drag {
grid-template-columns: 1fr auto auto 28px;
}
.music-full-queue-row:hover {
background: var(--bg-3);
}
.music-full-queue-row.is-current {
background: var(--accent-soft);
color: var(--accent);
}
.music-full-queue-row.is-current .music-full-queue-title {
font-weight: 600;
}
.music-full-queue-row.dragging {
opacity: 0.4;
}
.music-full-queue-row.drop-above::before {
content: '';
position: absolute;
left: 8px;
right: 8px;
top: -1px;
height: 2px;
background: var(--accent);
border-radius: 1px;
}
.music-full-queue-row.drop-below::after {
content: '';
position: absolute;
left: 8px;
right: 8px;
bottom: -1px;
height: 2px;
background: var(--accent);
border-radius: 1px;
}
.music-full-queue-handle {
color: var(--fg-dim);
cursor: grab;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.5;
}
.music-full-queue-handle .ico {
width: 14px;
height: 14px;
}
.music-full-queue-row:hover .music-full-queue-handle {
opacity: 1;
}
.music-full-queue-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.music-full-queue-artist {
font-size: 11px;
color: var(--fg-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}
.music-full-queue-duration {
font-size: 11px;
color: var(--fg-dim);
font-variant-numeric: tabular-nums;
min-width: 42px;
text-align: right;
}
.music-full-queue-remove {
background: transparent;
border: none;
color: var(--fg-dim);
width: 24px;
height: 24px;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
transition: opacity 0.15s, background 0.15s, color 0.15s;
font-family: inherit;
}
.music-full-queue-row:hover .music-full-queue-remove {
opacity: 1;
}
.music-full-queue-remove:hover {
background: rgba(224, 82, 82, 0.15);
color: var(--danger);
}
.music-full-queue-remove .ico {
width: 14px;
height: 14px;
}
/* ─── Нижняя часть: текст песни ─── */
.music-full-lyrics-wrap {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
padding: 14px 28px 20px;
}
.music-full-lyrics-tools {
display: flex;
align-items: center;
gap: 6px;
}
.music-full-lyrics-tools .music-full-icon-btn {
width: 30px;
height: 30px;
font-size: 12px;
font-weight: 600;
font-family: inherit;
line-height: 1;
}
.music-full-lyrics-tools .music-full-icon-btn .ico {
width: 15px;
height: 15px;
}
.music-full-lyrics-tools .music-lyrics-offset-btn {
width: auto;
min-width: 52px;
padding: 0 8px;
font-variant-numeric: tabular-nums;
color: var(--accent);
}
.music-full-lyrics {
flex: 1;
min-height: 120px;
max-height: 40vh;
overflow-y: auto;
scroll-behavior: smooth;
padding: 4px 4px 40vh;
}
.music-lyrics-line {
font-size: 14px;
line-height: 1.9;
color: var(--fg-dim);
cursor: pointer;
padding: 2px 8px;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.music-lyrics-line:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--fg);
}
.music-lyrics-line.is-active {
color: var(--fg);
font-weight: 600;
background: rgba(255, 255, 255, 0.07);
}
.music-lyrics-plain {
font-size: 14px;
line-height: 1.9;
color: var(--fg);
white-space: pre-wrap;
word-break: break-word;
padding: 2px 8px;
}
.music-lyrics-note {
font-size: 13px;
color: var(--fg-dim);
padding: 12px 8px;
}
.music-full-icon-btn:disabled {
opacity: 0.35;
cursor: default;
}
/* ─── Мобильный full player ─── */
@media (max-width: 768px) {
.music-full-player {
padding: 0;
}
.music-full-box {
max-width: none;
max-height: none;
width: 100%;
height: 100%;
border-radius: 0;
border: none;
}
.music-full-header {
padding: 12px 16px 0;
}
.music-full-top {
grid-template-columns: 1fr;
gap: 16px;
padding: 8px 20px 16px;
text-align: center;
}
.music-full-cover {
max-width: 220px;
margin: 0 auto;
}
.music-full-title { font-size: 18px; }
.music-full-artist { font-size: 13px; }
.music-full-controls { gap: 4px; margin-bottom: 12px; }
.music-full-play { width: 52px; height: 52px; }
.music-full-secondary {
justify-content: center;
flex-wrap: nowrap;
gap: 6px;
}
.music-full-volume {
margin-left: 8px;
flex-basis: auto;
justify-content: flex-start;
margin-top: 0;
}
.music-full-volume-slider {
width: 80px;
}
.music-full-queue-wrap {
padding: 12px 16px 16px;
}
.music-full-queue-artist {
max-width: 90px;
}
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ПОДСВЕТКА ИГРАЮЩЕГО ТРЕКА В СПИСКАХ */
/* ═══════════════════════════════════════════════════════════════════ */
.music-track.is-playing .music-track-title > span:last-child {
color: var(--accent);
font-weight: 600;
}
.music-track.is-playing::before {
content: '';
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 22px;
background: var(--accent);
border-radius: 2px;
}
.music-track.is-not-playable {
opacity: 0.6;
cursor: default;
}
.music-track.is-not-playable .music-track-play {
display: none;
}
/* Волна: трек ещё не скачан */
.music-track.wave-track-preview.is-not-downloaded {
opacity: 0.75;
}
.music-track.wave-track-preview.is-not-downloaded .music-track-play {
background: rgba(139, 92, 246, 0.35);
}
.music-track.wave-track-preview[data-clickable="1"] {
cursor: pointer;
}
.music-track.wave-track-preview[data-clickable="1"]:hover {
background: var(--bg-3);
}
/* ═══════════════════════════════════════════════════════════════════ */
/* TOPBAR — АДАПТИВНЫЕ СОСТОЯНИЯ */
/* ═══════════════════════════════════════════════════════════════════ */
/* state 3 / 4: поиск — компактная иконка справа */
.topbar.tb-search-icon .search-box {
width: 38px;
flex: 0 0 38px;
margin-right: -10px;
cursor: pointer;
}
.topbar.tb-search-icon .search-box input#search {
display: none;
}
.topbar.tb-search-icon .search-box .search-icon {
display: none;
}
.topbar.tb-search-icon .search-box .search-close {
display: none;
}
.topbar.tb-search-icon .search-box .search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--fg-dim);
cursor: pointer;
padding: 0;
font-family: inherit;
transition: color 0.15s, background 0.15s;
}
.topbar.tb-search-icon .search-box .search-toggle:hover:not(:disabled) {
color: var(--fg);
background: var(--bg-3);
}
.topbar.tb-search-icon .search-box .search-toggle:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.topbar.tb-search-icon .search-box .search-toggle .ico {
width: 20px;
height: 20px;
}
/* В иконочном режиме, когда search раскрыт — занимает весь topbar поверх */
.topbar.tb-search-icon .search-box.expanded {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
flex: none;
height: auto;
transform: none;
padding: 6px 12px;
box-sizing: border-box;
background: var(--bg-2);
z-index: 20;
display: flex;
align-items: center;
gap: 8px;
cursor: default;
margin-left: 0;
}
.topbar.tb-search-icon .search-box.expanded .search-toggle { display: none; }
.topbar.tb-search-icon .search-box.expanded .search-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
flex-shrink: 0;
}
.topbar.tb-search-icon .search-box.expanded .search-icon .ico {
width: 20px;
height: 20px;
}
.topbar.tb-search-icon .search-box.expanded input#search {
display: block;
flex: 1 1 auto;
min-width: 0;
width: auto;
}
.topbar.tb-search-icon .search-box.expanded .search-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--fg-dim);
cursor: pointer;
padding: 0;
font-family: inherit;
flex-shrink: 0;
}
.topbar.tb-search-icon .search-box.expanded .search-close:hover {
color: var(--fg);
background: var(--bg-3);
}
.topbar.tb-search-icon .search-box.expanded .search-close .ico {
width: 20px;
height: 20px;
}
/* state 4: плеер уходит вниз */
.topbar.tb-player-hidden .music-top-player {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* МОБИЛЬНЫЙ TOPBAR — ДОПОЛНИТЕЛЬНЫЕ ПРАВКИ */
/* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.topbar.tb-search-icon .search-box {
margin-right: -4px;
}
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ВЫДЕЛЕНИЕ ТРЕКОВ */
/* ═══════════════════════════════════════════════════════════════════ */
.music-track.selected {
background: var(--accent-soft);
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
.music-track.selected .music-track-title > span:last-child {
color: var(--accent);
font-weight: 600;
}
/* На тач-устройствах padding-left поменьше и точка-индикатор */
.music-track.selected::after {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 24px;
background: var(--accent);
border-radius: 2px;
}
/* Тулбар-кнопки в музыке — disabled серые, активные фиолетовые */
.files-toolbar-actions .toolbar-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Статус-бар: "Выбрано: N" — уже есть общий стиль, но уточним цвет */
#music-status-selected,
#music-playlist-status-selected {
color: var(--accent);
font-weight: 500;
}
/* touch-drag для треков — как в файлах */
.music-track,
.music-playlist-card {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
#music-body,
#music-playlist-body {
touch-action: pan-y;
}
body.music-touch-dragging #music-body,
body.music-touch-dragging #music-playlist-body {
touch-action: none;
}
/* Кнопка «В избранное» в тулбаре активна, если все выделенные уже в избранном */
#music-fav-btn.active .ico,
#music-playlist-fav-btn.active .ico {
color: #e05252;
}
/* Кнопка disabled — приглушённая */
#music-fav-btn:disabled,
#music-playlist-fav-btn:disabled,
#music-add-playlist-btn:disabled,
#music-playlist-add-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ВЫДЕЛЕНИЕ ПЛЕЙЛИСТОВ */
/* ═══════════════════════════════════════════════════════════════════ */
.music-playlist-card {
position: relative;
}
/* Выделение плейлиста — только галочка в углу, без рамки и подсветки */
.music-playlist-card.selected::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent) url("data:image/svg+xml;utf8,") center / 14px no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
z-index: 10;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ЯНДЕКС.МУЗЫКА — БЕЙДЖ И ДЕЙСТВИЯ В ПРОФИЛЕ */
/* ═══════════════════════════════════════════════════════════════════ */
.yandex-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 5px;
background: #fc3f1d;
color: white;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
line-height: 1;
}
.profile-yandex-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.profile-yandex-actions button {
white-space: nowrap;
}
#profile-yandex-status {
line-height: 1.5;
}
#profile-yandex-status code {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 12px;
padding: 1px 5px;
background: var(--bg-3);
border-radius: 4px;
color: var(--accent);
}
@media (max-width: 768px) {
.profile-yandex-actions {
width: 100%;
justify-content: stretch;
}
.profile-yandex-actions button {
flex: 1;
}
}
/* Виртуальная папка Яндекс.Музыки */
.ico-folder-yandex {
color: var(--fg-dim);
}
/* Обложки аудио в файлах — как у медиа */
.file-card-thumb[data-audio="1"] {
object-fit: cover;
}
.file-thumb-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--fg-dim);
}
.file-thumb-fallback .ico {
width: 48px;
height: 48px;
}
.files-list-row .file-thumb-fallback .ico {
width: 24px;
height: 24px;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ВОЛНА */
/* ═══════════════════════════════════════════════════════════════════ */
.music-wave {
padding-top: 8px;
}
.music-wave.hidden {
display: none;
}
/* ─── Большая кнопка «Начать волну» ─── */
.wave-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.wave-empty-icon {
width: 96px;
height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, #fc3f1d, #d63384);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
box-shadow: 0 12px 40px rgba(252, 63, 29, 0.35);
}
.wave-empty-icon .ico {
width: 48px;
height: 48px;
color: white;
}
.wave-empty-title {
font-size: 22px;
font-weight: 600;
color: var(--fg);
margin-bottom: 8px;
}
.wave-empty-subtitle {
font-size: 14px;
color: var(--fg-dim);
max-width: 420px;
line-height: 1.5;
margin-bottom: 28px;
}
.wave-empty-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
background: linear-gradient(135deg, #fc3f1d, #d63384);
color: white;
border: none;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 6px 24px rgba(252, 63, 29, 0.4);
}
.wave-empty-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 32px rgba(252, 63, 29, 0.55);
}
.wave-empty-btn:active {
transform: translateY(0);
}
.wave-empty-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.wave-empty-btn .ico {
width: 20px;
height: 20px;
}
/* ─── Hero с текущим треком ─── */
.wave-hero {
display: grid;
grid-template-columns: 200px 1fr;
gap: 28px;
align-items: center;
padding: 24px;
margin-bottom: 32px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.wave-hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(252, 63, 29, 0.15), transparent 70%);
pointer-events: none;
}
.wave-hero-cover {
position: relative;
width: 200px;
height: 200px;
border-radius: 12px;
overflow: hidden;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
flex-shrink: 0;
}
.wave-hero-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wave-hero-cover-stub {
color: var(--fg-dim);
}
.wave-hero-cover-stub .ico {
width: 64px;
height: 64px;
opacity: 0.5;
}
.wave-hero-info {
min-width: 0;
position: relative;
z-index: 1;
}
.wave-hero-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #fc3f1d;
margin-bottom: 12px;
padding: 4px 10px;
background: rgba(252, 63, 29, 0.12);
border-radius: 6px;
}
.wave-hero-label .ico {
width: 14px;
height: 14px;
}
.wave-hero-title {
font-size: 24px;
font-weight: 700;
color: var(--fg);
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.wave-hero-artist {
font-size: 15px;
color: var(--fg-dim);
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wave-hero-album {
font-size: 13px;
color: var(--fg-dim);
opacity: 0.75;
margin-bottom: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wave-hero-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.wave-hero-actions button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
font-family: inherit;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.wave-hero-actions .wave-act-primary {
background: linear-gradient(135deg, #fc3f1d, #d63384);
color: white;
box-shadow: 0 4px 16px rgba(252, 63, 29, 0.4);
}
.wave-hero-actions .wave-act-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(252, 63, 29, 0.55);
}
.wave-hero-actions .wave-act-secondary {
background: var(--bg-3);
color: var(--fg);
border-color: var(--border);
}
.wave-hero-actions .wave-act-secondary:hover {
border-color: var(--accent);
background: var(--bg-2);
}
.wave-hero-actions .wave-act-like.active {
color: #e05252;
background: rgba(224, 82, 82, 0.14);
border-color: #e05252;
}
.wave-hero-actions .wave-act-dislike.active {
color: var(--warning);
background: rgba(251, 191, 36, 0.14);
border-color: var(--warning);
}
.wave-hero-actions button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.wave-hero-actions button .ico {
width: 16px;
height: 16px;
}
/* ─── Секции истории и очереди ─── */
.wave-section {
margin-bottom: 28px;
}
.wave-section.hidden {
display: none;
}
.wave-section-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--fg-dim);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.wave-track-preview .music-track-cover {
position: relative;
}
.wave-track-preview.is-queued {
opacity: 0.7;
}
.wave-badge-next {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
background: var(--accent-soft-2);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 6px;
}
/* ─── Мобильная адаптация ─── */
@media (max-width: 768px) {
.wave-hero {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
text-align: center;
}
.wave-hero-cover {
width: 160px;
height: 160px;
margin: 0 auto;
}
.wave-hero-title {
font-size: 18px;
}
.wave-hero-artist {
font-size: 13px;
}
.wave-hero-actions {
justify-content: center;
}
.wave-hero-actions button {
padding: 8px 16px;
font-size: 13px;
}
.wave-empty-icon {
width: 72px;
height: 72px;
}
.wave-empty-icon .ico {
width: 36px;
height: 36px;
}
.wave-empty-title {
font-size: 18px;
}
.wave-empty-subtitle {
font-size: 13px;
}
.wave-empty-btn {
padding: 12px 24px;
font-size: 14px;
}
}
/* Волна: трек ещё не скачан */
.music-track.wave-track-preview.is-not-downloaded {
opacity: 0.75;
}
.music-track.wave-track-preview.is-not-downloaded .music-track-play {
background: rgba(139, 92, 246, 0.35);
}
.music-track.wave-track-preview[data-clickable="1"] {
cursor: pointer;
}
.music-track.wave-track-preview[data-clickable="1"]:hover {
background: var(--bg-3);
}
/* ─── Пикер музыки (добавление треков в плейлист и альбом) ─── */
.music-picker {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
.music-picker-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
flex-shrink: 0;
}
.music-picker-switch {
display: inline-flex;
gap: 2px;
background: var(--bg-3);
border-radius: 8px;
padding: 3px;
flex-shrink: 0;
}
/* Переключатель источника в пикере — две квадратные иконки в стиле сайта:
папка (моя музыка) и глобус (каталог Яндекс.Музыки). */
.music-picker-switch .tab {
width: 34px;
height: 34px;
border-radius: 6px;
}
.music-picker-switch .tab .ico {
width: 18px;
height: 18px;
}
.music-picker-search {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0 12px;
flex: 1 1 220px;
min-width: 180px;
margin: 0;
}
.music-picker-search:focus-within { border-color: var(--accent); }
.music-picker-search .ico {
display: inline-flex;
color: var(--fg-dim);
flex-shrink: 0;
}
.music-picker-search .ico .ico,
.music-picker-search .ico svg { width: 18px; height: 18px; }
.music-picker-search input {
flex: 1;
min-width: 0;
padding: 9px 0;
background: transparent;
border: none;
outline: none;
color: var(--fg);
font-size: 14px;
font-family: inherit;
}
.music-picker-list-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
position: relative;
}
/* Список треков — как в разделе «Всё» */
.music-picker-list {
padding-bottom: 8px;
}
/* Строка пикера: галочка → обложка → название → формат → длительность */
.music-track.music-picker-row {
grid-template-columns: 20px 48px 1fr auto auto auto auto;
cursor: pointer;
}
.music-track.music-picker-row.is-disabled {
opacity: 0.5;
cursor: default;
}
.music-track.music-picker-row.is-disabled:hover { background: transparent; }
.music-track.music-picker-row.selected {
background: var(--accent-soft);
border-color: var(--accent);
}
.music-picker-check {
display: flex;
align-items: center;
justify-content: center;
}
.music-picker-check input[type=checkbox] {
width: 16px;
height: 16px;
accent-color: var(--accent);
pointer-events: none;
margin: 0;
}
.music-picker-note {
font-size: 11px;
color: var(--success);
border: 1px solid currentColor;
border-radius: 4px;
padding: 0 5px;
flex-shrink: 0;
line-height: 1.5;
}
.music-picker-note.muted {
color: var(--fg-dim);
}
.music-picker-footer {
flex-shrink: 0;
padding-top: 10px;
font-size: 12px;
color: var(--fg-dim);
}
.music-picker-status { margin: 0; }
/* ─── Общие куски модалок (ссылки, участники, подсказки) ─── */
.share-hint {
font-size: 12px;
color: var(--fg-dim);
margin-top: 12px;
line-height: 1.5;
}
.share-divider {
border: none;
border-top: 1px solid var(--border);
margin: 20px 0;
}
.share-section-title {
font-size: 13px;
font-weight: 600;
color: var(--fg);
margin-bottom: 12px;
}
.share-row .actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.share-row .actions button {
padding: 4px 10px;
font-size: 11px;
border-radius: 5px;
display: inline-flex;
align-items: center;
}
.share-row .actions button .ico { width: 14px; height: 14px; }
.member-row .info .sub { line-height: 1.4; }
/* Пикер плейлиста в модалке «Добавить в плейлист» */
.music-playlist-picker {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 320px;
overflow-y: auto;
}
.music-playlist-picker-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 10px 12px;
background: var(--bg-3);
border: 1px solid transparent;
border-radius: 8px;
color: var(--fg);
font-size: 14px;
font-family: inherit;
cursor: pointer;
text-align: left;
transition: border-color 0.15s, background 0.15s;
}
.music-playlist-picker-item:hover {
border-color: var(--accent);
background: var(--bg-2);
}
.music-playlist-picker-item .name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.music-playlist-picker-item .count {
font-size: 12px;
color: var(--fg-dim);
flex-shrink: 0;
}
/* Пустой текст внутри модалки */
.modal-empty-text {
font-size: 13px;
color: var(--fg-dim);
text-align: center;
padding: 12px 0;
}
/* Чекбокс с подписью в строку */
.form-check {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--fg);
margin: 0;
}
.form-check input[type="checkbox"] {
width: auto;
flex-shrink: 0;
}
/* Чекбокс «правки» в строке заявки */
.req-canedit-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--fg-dim);
flex-shrink: 0;
cursor: pointer;
}
/* Подсказка-заглушка в пикере музыки: вкладка «Яндекс.Музыка» до ввода запроса */
.empty.is-hint {
padding: 40px 24px;
font-size: 13px;
line-height: 1.5;
color: var(--fg-dim);
opacity: 0.75;
}