This commit is contained in:
parent
51706d2d11
commit
853e99ca5f
21 changed files with 1402 additions and 77 deletions
|
|
@ -4,10 +4,14 @@
|
|||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
--bg: linear-gradient(180deg, #fffaf0 0%, #f3ede1 100%);
|
||||
--bg:
|
||||
radial-gradient(circle at 14% 8%, rgba(15, 111, 143, 0.12), transparent 28rem),
|
||||
radial-gradient(circle at 84% 0%, rgba(191, 125, 22, 0.12), transparent 24rem),
|
||||
linear-gradient(180deg, #fffaf0 0%, #f3ede1 100%);
|
||||
--panel: #fffdf8;
|
||||
--panel-hover: #f1eadf;
|
||||
--card: #ffffff;
|
||||
--card-elevated: #fffffc;
|
||||
--border: #ded5c7;
|
||||
--text: #1f2933;
|
||||
--muted: #667085;
|
||||
|
|
@ -24,6 +28,8 @@
|
|||
--disabled-bg: #ece6dc;
|
||||
--disabled-text: #8a8174;
|
||||
--error: #a64234;
|
||||
--shadow-soft: 0 1.25rem 3.5rem rgba(80, 65, 42, 0.11);
|
||||
--shadow-row: 0 0.65rem 1.6rem rgba(80, 65, 42, 0.08);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -60,9 +66,9 @@ textarea {
|
|||
}
|
||||
|
||||
.app-shell {
|
||||
width: min(72rem, 100%);
|
||||
width: min(76rem, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem 3rem;
|
||||
padding: 2.25rem 1rem 3.5rem;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
|
|
@ -76,6 +82,7 @@ textarea {
|
|||
border-bottom: 0.0625rem solid var(--accent-border);
|
||||
padding: 0.75rem clamp(1rem, 4vw, 2rem);
|
||||
background: var(--topbar-bg);
|
||||
box-shadow: 0 0.45rem 1.5rem rgba(31, 41, 51, 0.06);
|
||||
backdrop-filter: blur(1rem);
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +197,8 @@ textarea {
|
|||
.page-message {
|
||||
border: 0.0625rem solid var(--border);
|
||||
background: var(--panel);
|
||||
border-radius: 0.9rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.page-header,
|
||||
|
|
@ -201,6 +209,8 @@ textarea {
|
|||
|
||||
.page-header {
|
||||
margin-bottom: 1rem;
|
||||
border-color: var(--accent-border);
|
||||
background: linear-gradient(135deg, rgba(15, 111, 143, 0.09), transparent 42%), var(--panel);
|
||||
}
|
||||
|
||||
.page-header h1,
|
||||
|
|
@ -258,8 +268,8 @@ textarea {
|
|||
.activity-card,
|
||||
.reply-card {
|
||||
border: 0.0625rem solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
background: var(--card);
|
||||
border-radius: 0.9rem;
|
||||
background: var(--card-elevated);
|
||||
}
|
||||
|
||||
.card,
|
||||
|
|
@ -276,11 +286,44 @@ textarea {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.post-card-button {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
min-height: 13rem;
|
||||
align-content: start;
|
||||
border-color: rgba(15, 111, 143, 0.22);
|
||||
background:
|
||||
linear-gradient(145deg, rgba(15, 111, 143, 0.09), transparent 58%), var(--card-elevated);
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
background 160ms ease;
|
||||
}
|
||||
|
||||
.post-card-author-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.post-card-main {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.post-card-author {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.course-card-button:hover,
|
||||
.course-card-button:focus-visible,
|
||||
.post-card-button:hover,
|
||||
.post-card-button:focus-visible {
|
||||
background: var(--panel-hover);
|
||||
box-shadow: var(--shadow-row);
|
||||
transform: translateY(-0.0625rem);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -306,10 +349,18 @@ textarea {
|
|||
|
||||
.discussion-preview-card {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) minmax(6.5rem, auto);
|
||||
gap: 0.9rem;
|
||||
align-items: center;
|
||||
padding: 0.95rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
background 160ms ease;
|
||||
}
|
||||
|
||||
.activity-card-button {
|
||||
|
|
@ -324,9 +375,177 @@ textarea {
|
|||
.activity-card-button:hover,
|
||||
.activity-card-button:focus-visible {
|
||||
background: var(--panel-hover);
|
||||
box-shadow: var(--shadow-row);
|
||||
transform: translateY(-0.0625rem);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.discussion-preview-card.compact {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.65rem;
|
||||
align-items: stretch;
|
||||
padding: 0.9rem 0.95rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-grid;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
border: 0.125rem solid var(--panel);
|
||||
border-radius: 999rem;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent), var(--accent);
|
||||
box-shadow: 0 0.35rem 0.8rem rgba(15, 111, 143, 0.18);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 800;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-small {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.topic-main {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.topic-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topic-title-row h1,
|
||||
.topic-title-row h3 {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topic-title-row h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.status-pill,
|
||||
.topic-badge {
|
||||
display: inline-flex;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
border-radius: 999rem;
|
||||
white-space: nowrap;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
border: 0.0625rem solid rgba(15, 111, 143, 0.18);
|
||||
padding: 0.12rem 0.45rem;
|
||||
color: var(--accent-strong);
|
||||
background: rgba(15, 111, 143, 0.08);
|
||||
}
|
||||
|
||||
.topic-excerpt {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 0.93rem;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.topic-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.topic-meta-row-spaced {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.topic-badge {
|
||||
border: 0.0625rem solid var(--border);
|
||||
padding: 0.15rem 0.42rem;
|
||||
color: #5f513f;
|
||||
background: #f7efe2;
|
||||
}
|
||||
|
||||
.post-card-excerpt {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
|
||||
.topic-stats {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
justify-items: end;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.topic-stats strong {
|
||||
display: block;
|
||||
color: var(--text);
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.discussion-compact-meta {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.discussion-compact-author {
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
font-weight: 750;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.discussion-compact-preview {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.discussion-compact-title {
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.discussion-preview-card.compact .topic-excerpt {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.discussion-compact-replies {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.muted-copy,
|
||||
.meta-line,
|
||||
.empty-state {
|
||||
|
|
@ -407,6 +626,94 @@ textarea {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.discussion-detail-panel {
|
||||
display: grid;
|
||||
gap: 0.95rem;
|
||||
}
|
||||
|
||||
.discussion-detail-header {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.discussion-detail-meta {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.discussion-detail-replies {
|
||||
width: max-content;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.forum-thread-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.forum-thread-title {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.thread-count-card {
|
||||
display: grid;
|
||||
min-width: 5rem;
|
||||
justify-items: center;
|
||||
border: 0.0625rem solid var(--accent-border);
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.7rem;
|
||||
color: var(--muted);
|
||||
background: var(--accent-soft);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.thread-count-card strong {
|
||||
color: var(--text);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.post-hero-panel {
|
||||
overflow: hidden;
|
||||
border-color: var(--accent-border);
|
||||
background:
|
||||
radial-gradient(circle at 95% 0%, rgba(15, 111, 143, 0.16), transparent 15rem),
|
||||
radial-gradient(circle at 0% 100%, rgba(191, 125, 22, 0.12), transparent 14rem), var(--panel);
|
||||
}
|
||||
|
||||
.post-hero {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.post-hero-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.post-hero-summary {
|
||||
max-width: none;
|
||||
color: var(--muted);
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
|
||||
.post-reading-panel {
|
||||
width: 100%;
|
||||
padding: clamp(1.25rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
@ -417,7 +724,26 @@ textarea {
|
|||
}
|
||||
|
||||
.reply-author {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.reply-card {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.reply-meta-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.reply-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.outline-list,
|
||||
|
|
@ -744,6 +1070,34 @@ textarea {
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discussion-preview-card {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.discussion-preview-card.compact {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.topic-stats {
|
||||
grid-column: 2;
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.topic-title-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.forum-thread-header {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.thread-count-card {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.compose-actions,
|
||||
.auth-bar,
|
||||
.signin-callout,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue