forked from wangziqi/gongxue-base
style: extend legacy student page polish
This commit is contained in:
Codex
@@ -2578,3 +2578,405 @@
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Legacy student long-tail pages: commerce, assets, video, vocabulary, scoreline. */
|
||||
.checkout-page,
|
||||
.order-detail-page,
|
||||
.assets-page,
|
||||
.video-page,
|
||||
.vocabulary-page,
|
||||
.scoreline-page,
|
||||
.notifications-page {
|
||||
background:
|
||||
linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
|
||||
#f4f6f9;
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
.checkout-page .student-topbar,
|
||||
.order-detail-page .student-topbar,
|
||||
.assets-page .student-topbar,
|
||||
.video-page .student-topbar,
|
||||
.vocabulary-page .student-topbar,
|
||||
.scoreline-page .student-topbar,
|
||||
.notifications-page .student-topbar {
|
||||
margin-bottom: 18px;
|
||||
padding: 22px;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.checkout-page .student-kicker,
|
||||
.order-detail-page .student-kicker,
|
||||
.assets-page .student-kicker,
|
||||
.video-page .student-kicker,
|
||||
.vocabulary-page .student-kicker,
|
||||
.scoreline-page .student-kicker,
|
||||
.notifications-page .student-kicker {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.checkout-page .student-title,
|
||||
.order-detail-page .student-title,
|
||||
.assets-page .student-title,
|
||||
.video-page .student-title,
|
||||
.vocabulary-page .student-title,
|
||||
.scoreline-page .student-title,
|
||||
.notifications-page .student-title {
|
||||
font-size: 28px;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.checkout-page .student-subtitle,
|
||||
.order-detail-page .student-subtitle,
|
||||
.assets-page .student-subtitle,
|
||||
.video-page .student-subtitle,
|
||||
.vocabulary-page .student-subtitle,
|
||||
.scoreline-page .student-subtitle,
|
||||
.notifications-page .student-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.checkout-page .section-block,
|
||||
.order-detail-page .section-block,
|
||||
.assets-page .section-block,
|
||||
.video-page .section-block,
|
||||
.vocabulary-page .section-block,
|
||||
.scoreline-page .section-block,
|
||||
.notifications-page .section-block {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.checkout-page .section-heading,
|
||||
.order-detail-page .section-heading,
|
||||
.assets-page .section-heading,
|
||||
.video-page .section-heading,
|
||||
.vocabulary-page .section-heading,
|
||||
.scoreline-page .section-heading,
|
||||
.notifications-page .section-heading {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.checkout-page .quiet-panel,
|
||||
.order-detail-page .quiet-panel,
|
||||
.assets-page .asset-preview-panel,
|
||||
.assets-page .asset-security-strip,
|
||||
.video-page .video-frame,
|
||||
.vocabulary-page .vocabulary-card,
|
||||
.vocabulary-page .vocabulary-answer,
|
||||
.scoreline-page .scoreline-filter-panel,
|
||||
.notifications-page .metric {
|
||||
border-color: #f1f5f9;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.checkout-page .list-stack,
|
||||
.order-detail-page .list-stack,
|
||||
.assets-page .list-stack,
|
||||
.video-page .list-stack,
|
||||
.notifications-page .list-stack {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.checkout-page .list-row,
|
||||
.order-detail-page .list-row,
|
||||
.assets-page .list-row,
|
||||
.video-page .list-row,
|
||||
.notifications-page .list-row {
|
||||
position: relative;
|
||||
padding: 16px 18px 16px 20px;
|
||||
border-color: #f1f5f9;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.checkout-page .list-row::before,
|
||||
.order-detail-page .list-row::before,
|
||||
.assets-page .list-row::before,
|
||||
.video-page .list-row::before,
|
||||
.notifications-page .list-row::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
border-radius: 0 999px 999px 0;
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.checkout-page .list-row:nth-child(3n + 2)::before,
|
||||
.order-detail-page .list-row:nth-child(3n + 2)::before,
|
||||
.assets-page .list-row:nth-child(3n + 2)::before,
|
||||
.video-page .list-row:nth-child(3n + 2)::before,
|
||||
.notifications-page .list-row:nth-child(3n + 2)::before {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.checkout-page .list-row:nth-child(3n)::before,
|
||||
.order-detail-page .list-row:nth-child(3n)::before,
|
||||
.assets-page .list-row:nth-child(3n)::before,
|
||||
.video-page .list-row:nth-child(3n)::before,
|
||||
.notifications-page .list-row:nth-child(3n)::before {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.checkout-page .list-row.active,
|
||||
.video-page .list-row.active,
|
||||
.notifications-page .notification-row.active {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
box-shadow: 0 3px 10px rgba(17, 82, 212, 0.08);
|
||||
}
|
||||
|
||||
.checkout-page .checkout-toolbar,
|
||||
.notifications-page .notification-filterbar,
|
||||
.notifications-page .notification-typebar,
|
||||
.vocabulary-page .vocabulary-modebar {
|
||||
padding: 10px;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.checkout-page .amount-text,
|
||||
.order-detail-page .amount-text {
|
||||
color: #1152d4;
|
||||
font-size: 34px;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.checkout-page .break-text,
|
||||
.order-detail-page .break-text {
|
||||
margin-top: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.assets-page .asset-preview-panel {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.assets-page .asset-preview-frame {
|
||||
min-height: 560px;
|
||||
border-color: #e5e7eb;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.assets-page .asset-preview-iframe {
|
||||
height: 560px;
|
||||
}
|
||||
|
||||
.assets-page .asset-download-confirm {
|
||||
padding: 42px 24px;
|
||||
}
|
||||
|
||||
.assets-page .asset-security-strip {
|
||||
margin-top: 12px;
|
||||
padding: 13px 14px;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.assets-page .asset-watermark-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.video-page .video-frame {
|
||||
width: 100%;
|
||||
min-height: 440px;
|
||||
overflow: hidden;
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.video-page .empty-state + .section-block,
|
||||
.video-page .video-frame + .section-block {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-overview-panel {
|
||||
border-left: 5px solid #1152d4;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-card {
|
||||
min-height: 430px;
|
||||
padding: 26px;
|
||||
border-left: 5px solid #1152d4;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-card.revealed {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-word {
|
||||
margin-top: 28px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-phonetic {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-answer {
|
||||
margin-top: 24px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-word-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-word-chip {
|
||||
padding: 14px;
|
||||
border-color: #f1f5f9;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-word-chip.active {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-chip-word {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.vocabulary-page .vocabulary-chip-meta {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-filter-panel {
|
||||
padding: 18px;
|
||||
border-left: 5px solid #1152d4;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-filter-label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-chip-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-chip {
|
||||
min-width: 92px;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-chip.small {
|
||||
min-width: 76px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-chip.active {
|
||||
border-color: #1152d4;
|
||||
background: #1152d4;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-chip.active .scoreline-chip-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-chip-text {
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-field-grid,
|
||||
.scoreline-page .scoreline-field-chip-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-field-chip {
|
||||
min-height: 60px;
|
||||
padding: 10px 12px;
|
||||
border-color: #f1f5f9;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-field-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-field-value {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-trend-item {
|
||||
flex-basis: 180px;
|
||||
min-height: 94px;
|
||||
padding: 14px;
|
||||
border-color: #f1f5f9;
|
||||
border-left: 5px solid #1152d4;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-trend-year {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.scoreline-page .scoreline-trend-value {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.notifications-page .notification-summary-grid {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.notifications-page .notification-message {
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.checkout-page,
|
||||
.order-detail-page,
|
||||
.assets-page,
|
||||
.video-page,
|
||||
.vocabulary-page,
|
||||
.scoreline-page,
|
||||
.notifications-page {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.checkout-page {
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
.order-detail-page,
|
||||
.video-page {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.scoreline-page,
|
||||
.assets-page {
|
||||
max-width: 1120px;
|
||||
}
|
||||
|
||||
.vocabulary-page {
|
||||
max-width: 980px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user