Migliora UI archivio replay società con play e azioni separate.
Anteprima cliccabile con pulsante play, badge stato, select visibilità compatti e colonna azioni senza sovrapposizioni. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1354,3 +1354,278 @@ label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: #c8c8d4; f
|
||||
body.cookie-banner-visible {
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
/* —— Archivio replay società —— */
|
||||
.replay-archive__card {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.replay-archive__table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.replay-archive-table {
|
||||
width: 100%;
|
||||
min-width: 920px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.replay-archive-table th,
|
||||
.replay-archive-table td {
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid #2a2a36;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.replay-archive-table th {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: #9a9aaa;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.replay-archive-table__col-thumb {
|
||||
width: 108px;
|
||||
}
|
||||
|
||||
.replay-archive-table__col-title {
|
||||
min-width: 11rem;
|
||||
}
|
||||
|
||||
.replay-archive-table__col-privacy {
|
||||
width: 8.5rem;
|
||||
}
|
||||
|
||||
.replay-archive-table__col-actions {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.replay-archive-table__nowrap {
|
||||
white-space: nowrap;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.replay-archive-table__sub {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.replay-archive__thumb {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 96px;
|
||||
height: 54px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #0f0f14;
|
||||
border: 1px solid #3a3a48;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
a.replay-archive__thumb:hover {
|
||||
border-color: #e53935;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.replay-archive__thumb--static {
|
||||
cursor: default;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.replay-archive__thumb-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.replay-archive__thumb-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.25rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.replay-archive__play-btn {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(229, 57, 53, 0.95);
|
||||
color: #fff;
|
||||
font-size: 0.85rem;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
padding-left: 3px;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.replay-archive__title-form,
|
||||
.replay-archive__privacy-form,
|
||||
.replay-archive__action-form {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.replay-archive__title-input {
|
||||
width: 100%;
|
||||
min-width: 10rem;
|
||||
max-width: 18rem;
|
||||
margin: 0;
|
||||
padding: 8px 10px;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.replay-archive__privacy-select {
|
||||
width: 100%;
|
||||
min-width: 7.5rem;
|
||||
margin: 0;
|
||||
padding: 8px 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.replay-archive__status {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.replay-archive__status--ready {
|
||||
background: rgba(76, 175, 80, 0.18);
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
.replay-archive__status--processing {
|
||||
background: rgba(255, 193, 7, 0.15);
|
||||
color: #ffca28;
|
||||
}
|
||||
|
||||
.replay-archive__status--failed,
|
||||
.replay-archive__status--expired {
|
||||
background: rgba(229, 57, 53, 0.15);
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
.replay-archive__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.replay-archive__action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-height: 34px;
|
||||
padding: 0 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3d3d4a;
|
||||
background: #1c1c26;
|
||||
color: #e8e8f0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.replay-archive__action:hover {
|
||||
background: #262632;
|
||||
border-color: #5a5a68;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.replay-archive__action--play {
|
||||
background: #e53935;
|
||||
border-color: #e53935;
|
||||
color: #fff;
|
||||
min-width: 34px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.replay-archive__action--play:hover {
|
||||
background: #c62828;
|
||||
border-color: #c62828;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.replay-archive__action--secondary {
|
||||
font-size: 0.75rem;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.replay-archive__action--danger {
|
||||
border-color: rgba(229, 57, 53, 0.45);
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
.replay-archive__action--danger:hover {
|
||||
background: rgba(229, 57, 53, 0.15);
|
||||
border-color: #e53935;
|
||||
color: #ffcdd2;
|
||||
}
|
||||
|
||||
.replay-archive .replay-filter-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 12px 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.replay-archive .replay-filter-form label {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.replay-archive .replay-filter-form .input {
|
||||
width: auto;
|
||||
min-width: 10rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.replay-archive__action-label {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.replay-archive__action--play {
|
||||
min-width: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user