forked from wangziqi/gongxue-base
style: extend legacy student page polish
This commit is contained in:
Codex
@@ -1,7 +1,7 @@
|
||||
.rich-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
color: var(--tiku-text);
|
||||
}
|
||||
@@ -19,17 +19,17 @@
|
||||
display: block;
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
font-size: 28px;
|
||||
font-size: 23px;
|
||||
font-weight: 520;
|
||||
line-height: 1.62;
|
||||
line-height: 1.58;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.rich-content.compact .rich-paragraph {
|
||||
font-size: 24px;
|
||||
line-height: 1.55;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.rich-content.muted .rich-paragraph {
|
||||
@@ -38,18 +38,18 @@
|
||||
|
||||
.rich-heading {
|
||||
color: var(--tiku-text);
|
||||
font-size: 32px;
|
||||
font-size: 26px;
|
||||
font-weight: 820;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.rich-heading.level-2 {
|
||||
font-size: 30px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.rich-heading.level-3,
|
||||
.rich-heading.level-4 {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.rich-bold {
|
||||
@@ -60,13 +60,13 @@
|
||||
.rich-code-inline {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
padding: 0 8px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid var(--tiku-border);
|
||||
border-radius: 10px;
|
||||
border-radius: 7px;
|
||||
background: var(--tiku-card-soft);
|
||||
color: #334155;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 23px;
|
||||
font-size: 17px;
|
||||
line-height: 1.35;
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -75,12 +75,12 @@
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
margin: 0 4px;
|
||||
padding: 0 8px;
|
||||
border-radius: 10px;
|
||||
padding: 0 6px;
|
||||
border-radius: 7px;
|
||||
background: var(--tiku-card-soft);
|
||||
color: var(--tiku-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
line-height: 1.45;
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -105,13 +105,13 @@
|
||||
.rich-formula-block,
|
||||
.rich-code-block {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--tiku-border);
|
||||
border-radius: 18px;
|
||||
border-radius: 12px;
|
||||
background: var(--tiku-card-soft);
|
||||
color: var(--tiku-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 24px;
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
@@ -137,9 +137,9 @@
|
||||
|
||||
.rich-code-language {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
color: var(--tiku-muted);
|
||||
font-size: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -156,7 +156,7 @@
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--tiku-border);
|
||||
border-radius: 18px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -169,30 +169,30 @@
|
||||
|
||||
.rich-image-caption {
|
||||
display: block;
|
||||
padding: 10px 14px 14px;
|
||||
padding: 8px 12px 12px;
|
||||
color: var(--tiku-muted);
|
||||
font-size: 20px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.rich-blocked-image {
|
||||
padding: 16px;
|
||||
padding: 12px;
|
||||
border: 1px dashed #fca5a5;
|
||||
border-radius: 18px;
|
||||
border-radius: 12px;
|
||||
background: #fff1f2;
|
||||
color: #be123c;
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.rich-image-pending {
|
||||
padding: 18px;
|
||||
padding: 12px;
|
||||
border: 1px dashed #bfdbfe;
|
||||
border-radius: 18px;
|
||||
border-radius: 12px;
|
||||
background: var(--tiku-primary-soft);
|
||||
color: var(--tiku-primary);
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@@ -201,7 +201,7 @@
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--tiku-border);
|
||||
border-radius: 18px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -222,10 +222,10 @@
|
||||
.rich-table-cell {
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
padding: 14px 16px;
|
||||
padding: 10px 12px;
|
||||
border-left: 1px solid var(--tiku-border);
|
||||
color: #334155;
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -249,6 +249,17 @@
|
||||
|
||||
.rich-empty {
|
||||
color: #94a3b8;
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.rich-paragraph,
|
||||
.rich-heading {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.rich-content.compact .rich-paragraph {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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