diff --git a/frontend/library.html b/frontend/library.html index 6693a90..34d4c0d 100644 --- a/frontend/library.html +++ b/frontend/library.html @@ -109,17 +109,17 @@ .tag-type { background: rgba(15,23,42,0.06); color: var(--text-3); } .tag-private{ background: rgba(241,91,181,0.1); color: var(--pink); } .tag-public { background: rgba(6,214,100,0.1); color: var(--green); } - .file-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } + /* Подвал карточки: метаданные строкой, действия — отдельным рядом (не теснятся) */ + .file-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } + .file-meta-text { min-width: 0; } .file-size { font-size: 0.75rem; color: var(--text-3); } - .file-actions { display: flex; gap: 6px; } - .btn-dl { padding: 6px 16px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity var(--tr); } + .file-actions { display: flex; gap: 6px; align-items: center; } + .btn-dl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 14px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity var(--tr); white-space: nowrap; } .btn-dl:hover { opacity: 0.85; } - .btn-del { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); } - .btn-del:hover { border-color: var(--pink); color: var(--pink); } - .btn-assign { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); } - .btn-assign:hover { border-color: var(--violet); color: var(--violet); } - .btn-move { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); } - .btn-move:hover { border-color: var(--cyan); color: #0aa6b0; } + .btn-del, .btn-assign, .btn-move { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid transparent; border-radius: 10px; background: rgba(15,23,42,0.04); color: var(--text-3); cursor: pointer; transition: all var(--tr); } + .btn-del:hover { border-color: var(--pink); color: var(--pink); background: rgba(241,91,181,0.08); } + .btn-assign:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.08); } + .btn-move:hover { border-color: var(--cyan); color: #0aa6b0; background: rgba(6,214,224,0.08); } /* assign modal */ .src-toggle { display: flex; gap: 6px; margin-bottom: 16px; } @@ -131,7 +131,7 @@ .assign-list-type { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(155,93,229,0.1); color: var(--violet); } .btn-rm-assign { padding: 4px 10px; border: 1.5px solid transparent; border-radius: 99px; background: transparent; font-size: 0.76rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.18s; } .btn-rm-assign:hover { border-color: var(--pink); color: var(--pink); } - .uploader { font-size: 0.72rem; color: var(--text-3); } + .uploader { font-size: 0.72rem; color: var(--text-3); margin-top: 3px; } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 60px auto; display: block; } .empty { text-align: center; padding: 60px 20px; color: var(--text-3); } @@ -640,7 +640,7 @@ ${f.is_public ? ' Публичный' : ' Приватный'}