- 更新前端支持触控操作
This commit is contained in:
Pine
+117
-13
@@ -431,6 +431,25 @@
|
||||
color: var(--danger);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-return {
|
||||
padding: var(--space-8) var(--space-16);
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-return:hover {
|
||||
background: rgba(0, 189, 125, 0.08);
|
||||
border-color: rgba(0, 189, 125, 0.3);
|
||||
color: var(--primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ============ Main Grid ============ */
|
||||
.main-grid {
|
||||
@@ -468,6 +487,7 @@
|
||||
transform: perspective(1000px) translateZ(4px);
|
||||
}
|
||||
.card.full { grid-column: 1 / -1; }
|
||||
.playback-controls-card { display: none; }
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -601,8 +621,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
|
||||
align-items: end;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.form-inline .form-group { flex: 1; margin-bottom: 0; }
|
||||
.form-inline .form-group { flex: 1; margin-bottom: 0; min-width: 0; }
|
||||
|
||||
/* ============ Buttons ============ */
|
||||
button { font-family: "Poppins", "PingFang SC", sans-serif; cursor: pointer; transition: all var(--transition); }
|
||||
@@ -642,6 +663,29 @@ button { font-family: "Poppins", "PingFang SC", sans-serif; cursor: pointer; tra
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-accent:active { transform: translateY(1px); }
|
||||
.btn-outline {
|
||||
padding: var(--space-10) var(--space-20);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-default);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.btn-outline:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--text);
|
||||
background: rgba(0, 189, 125, 0.06);
|
||||
}
|
||||
.btn-outline.active {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
background: rgba(0, 189, 125, 0.1);
|
||||
}
|
||||
.btn-danger {
|
||||
padding: var(--space-12) var(--space-24);
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -984,17 +1028,25 @@ button { font-family: "Poppins", "PingFang SC", sans-serif; cursor: pointer; tra
|
||||
@media (max-width: 768px) {
|
||||
.login-card { padding: var(--space-24) var(--space-16) var(--space-32); margin: var(--space-12); max-width: none; }
|
||||
.login-brand h2 { font-size: 20px; }
|
||||
.topbar { padding: 0 var(--space-16); height: 56px; gap: var(--space-8); }
|
||||
.topbar-left h1 { font-size: 15px; }
|
||||
.topbar { padding: 0 var(--space-16); height: 56px; gap: var(--space-4); }
|
||||
.topbar-left h1 { font-size: 14px; }
|
||||
.topbar-center { display: none; }
|
||||
.btn-control { width: 36px; height: 36px; font-size: 14px; }
|
||||
.btn-control.play-btn { width: 42px; height: 42px; font-size: 16px; }
|
||||
.btn-logout { padding: var(--space-4) var(--space-12); font-size: 12px; }
|
||||
.topbar-divider { display: none; }
|
||||
.main-grid { grid-template-columns: 1fr; gap: var(--space-16); padding: var(--space-16); }
|
||||
.card { padding: var(--space-16); }
|
||||
.topbar-right { gap: var(--space-2); }
|
||||
/* Hide playback controls in topbar on mobile — they're in their own card */
|
||||
.topbar-right .btn-control,
|
||||
.topbar-right .play-btn,
|
||||
.topbar-right .topbar-divider { display: none; }
|
||||
.btn-logout, .btn-return { padding: var(--space-4) var(--space-10); font-size: 11px; }
|
||||
.main-grid { grid-template-columns: 1fr; gap: var(--space-12); padding: var(--space-12); }
|
||||
.card { padding: var(--space-12) var(--space-16); }
|
||||
.card.full { grid-column: 1; }
|
||||
.form-inline { flex-direction: column; gap: var(--space-16); }
|
||||
.card-header { margin-bottom: var(--space-16); }
|
||||
.card-header h3 { font-size: 14px; }
|
||||
.card-header .card-icon { width: 30px; height: 30px; }
|
||||
.card-header .card-icon svg { width: 16px; height: 16px; }
|
||||
.form-inline { flex-direction: column; gap: var(--space-12); align-items: stretch; }
|
||||
.form-group { margin-bottom: var(--space-12); }
|
||||
.form-group label { font-size: 11px; }
|
||||
.media-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
|
||||
.media-card .thumb { height: 88px; }
|
||||
.thumb-video-wrap { height: 88px; }
|
||||
@@ -1004,18 +1056,70 @@ button { font-family: "Poppins", "PingFang SC", sans-serif; cursor: pointer; tra
|
||||
.toast-container { top: var(--space-12); right: var(--space-12); left: var(--space-12); }
|
||||
.toast { max-width: none; font-size: 12px; }
|
||||
.btn-primary, .btn-accent, .btn-danger { padding: var(--space-12) var(--space-16); font-size: 12px; }
|
||||
.btn-outline { padding: var(--space-8) var(--space-14); font-size: 12px; }
|
||||
.modal-overlay { padding: var(--space-16); }
|
||||
.modal-panel { max-width: 100%; max-height: 90vh; }
|
||||
.modal-body { padding: var(--space-12); max-height: 55vh; }
|
||||
.modal-body img, .modal-body video { max-height: 50vh; }
|
||||
.modal-header { padding: var(--space-12) var(--space-16); }
|
||||
.modal-footer { padding: var(--space-8) var(--space-16); }
|
||||
|
||||
/* Mobile playback control card */
|
||||
.playback-controls-card { display: block; }
|
||||
.playback-controls-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-8);
|
||||
padding: var(--space-4) 0;
|
||||
}
|
||||
.playback-controls-row .btn-control {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: #f9fafb;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition);
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
.playback-controls-row .btn-control:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.playback-controls-row .btn-control.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
box-shadow: 0 0 16px rgba(0, 189, 125, 0.3);
|
||||
}
|
||||
.playback-controls-row .play-btn {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.playback-controls-row .btn-control:active { transform: translateY(1px); }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.topbar-left h1 { font-size: 13px; }
|
||||
.topbar-left h1 { font-size: 12px; }
|
||||
.topbar-right { gap: 2px; }
|
||||
.btn-control { width: 32px; height: 32px; font-size: 12px; }
|
||||
.btn-control.play-btn { width: 38px; height: 38px; font-size: 14px; }
|
||||
.topbar-right .btn-logout, .topbar-right .btn-return { font-size: 10px; padding: var(--space-2) var(--space-8); }
|
||||
.main-grid { gap: var(--space-8); padding: var(--space-8); }
|
||||
.card { padding: var(--space-12); }
|
||||
.media-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
|
||||
.playback-controls-row { gap: var(--space-4); }
|
||||
.playback-controls-row .btn-control { width: 38px; height: 38px; font-size: 14px; }
|
||||
.playback-controls-row .play-btn { width: 44px; height: 44px; font-size: 17px; }
|
||||
.form-inline { gap: var(--space-8); align-items: stretch; }
|
||||
.form-group { margin-bottom: var(--space-8); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user