模板:动态信息命名空间首页/styles.css:修订间差异
来自Ac-Wiki
更多操作
创建动态信息命名空间首页 |
小 重做动态信息命名空间首页结构 |
||
| (未显示同一用户的1个中间版本) | |||
| 第1行: | 第1行: | ||
.acw-ns-home { | .acw-ns-home { | ||
--acw | --acw-radius: 8px; | ||
--acw- | --acw-gap: 1rem; | ||
--acw-pad: 1rem; | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: var(--acw | gap: var(--acw-gap); | ||
margin-block: 0.5rem 1.5rem; | margin-block: 0.5rem 1.5rem; | ||
color: var(--color-base, #202122); | color: var(--color-base, #202122); | ||
| 第11行: | 第12行: | ||
.acw-ns-hero { | .acw-ns-hero { | ||
border: 1px solid var(--border-color-base, #a2a9b1); | border: 1px solid var(--border-color-base, #a2a9b1); | ||
border-radius: var(--acw | border-radius: var(--acw-radius); | ||
background: var(--background-color-base, #fff); | background: var(--background-color-base, #fff); | ||
padding: 1. | padding: 1.2rem; | ||
} | } | ||
.acw-ns- | .acw-ns-kicker { | ||
margin: 0 0 0. | margin: 0 0 0.4rem; | ||
color: var(--color-progressive, #36c); | color: var(--color-progressive, #36c); | ||
font-size: var(--font-size-small, 0.875rem); | font-size: var(--font-size-small, 0.875rem); | ||
font-weight: | font-weight: 800; | ||
} | } | ||
.acw-ns-title { | .acw-ns-title { | ||
| 第28行: | 第29行: | ||
font-weight: 800; | font-weight: 800; | ||
} | } | ||
.acw-ns- | .acw-ns-lede { | ||
max-width: | max-width: 58rem; | ||
margin: 0.65rem 0 0; | margin: 0.65rem 0 0; | ||
color: var(--color-subtle, #54595d); | color: var(--color-subtle, #54595d); | ||
line-height: 1.7; | line-height: 1.7; | ||
} | } | ||
.acw-ns- | .acw-ns-layout { | ||
display: grid; | display: grid; | ||
grid-template-columns: minmax(0, 1. | grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.75fr); | ||
gap: var(--acw | gap: var(--acw-gap); | ||
align-items: start; | align-items: start; | ||
} | } | ||
.acw-ns-panel { | .acw-ns-panel { | ||
border: 1px solid var(--border-color-base, #a2a9b1); | border: 1px solid var(--border-color-base, #a2a9b1); | ||
border-radius: var(--acw | border-radius: var(--acw-radius); | ||
background: var(--background-color-base, #fff); | background: var(--background-color-base, #fff); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.acw-ns- | .acw-ns-section-title { | ||
margin: 0; | |||
padding: 0.8rem 0.95rem; | padding: 0.8rem 0.95rem; | ||
border-bottom: 1px solid var(--border-color-subtle, #eaecf0); | border-bottom: 1px solid var(--border-color-subtle, #eaecf0); | ||
background: var(--background-color-neutral-subtle, #f8f9fa); | background: var(--background-color-neutral-subtle, #f8f9fa); | ||
color: var(--color-emphasized, #101418); | color: var(--color-emphasized, #101418); | ||
font-size: 1rem; | font-size: 1rem; | ||
| 第89行: | 第57行: | ||
font-weight: 800; | font-weight: 800; | ||
} | } | ||
.acw-ns- | .acw-ns-section-body { padding: 0.9rem 0.95rem; } | ||
.acw-ns-list { | |||
.acw-ns | |||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
list-style: none; | list-style: none; | ||
} | } | ||
.acw-ns- | .acw-ns-list li { | ||
padding: 0. | padding: 0.62rem 0; | ||
border: 1px solid var(--border-color-subtle, #eaecf0); | border-bottom: 1px solid var(--border-color-subtle, #eaecf0); | ||
line-height: 1.6; | |||
} | } | ||
.acw-ns- | .acw-ns-list li:first-child { padding-top: 0; } | ||
.acw-ns-list li:last-child { padding-bottom: 0; border-bottom: 0; } | |||
.acw-ns-muted { | |||
} | |||
.acw-ns- | |||
color: var(--color-subtle, #54595d); | color: var(--color-subtle, #54595d); | ||
font-size: var(--font-size-small, 0.875rem); | font-size: var(--font-size-small, 0.875rem); | ||
line-height: 1.6; | line-height: 1.6; | ||
} | } | ||
.acw-ns-meta { | .acw-ns-meta { | ||
display: inline- | display: inline-block; | ||
min-width: 3.25rem; | |||
margin-right: 0.4rem; | margin-right: 0.4rem; | ||
color: var(--color-subtle, #54595d); | color: var(--color-subtle, #54595d); | ||
font-size: var(--font-size-small, 0.875rem); | font-size: var(--font-size-small, 0.875rem); | ||
font-weight: | font-weight: 800; | ||
} | } | ||
.acw-ns-dpl { | .acw-ns-dpl { | ||
line-height: 1.7; | line-height: 1.7; | ||
} | } | ||
.acw-ns-dpl ul { margin-block: 0; } | .acw-ns-dpl ul { margin-block: 0; } | ||
.acw-ns-dpl li { margin: 0. | .acw-ns-dpl li { margin: 0.28rem 0; } | ||
.acw- | .acw-news-grid { | ||
display: grid; | |||
grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.85fr); | |||
gap: var(--acw-gap); | |||
} | } | ||
.acw- | .acw-news-feature { | ||
min-height: 14rem; | |||
padding: 1rem; | |||
border: 1px solid var(--border-color-base, #a2a9b1); | |||
border-radius: var(--acw-radius); | |||
background: var(--background-color-neutral-subtle, #f8f9fa); | |||
} | |||
.acw-news-feature-title { | |||
margin: 0 0 0.6rem; | |||
color: var(--color-emphasized, #101418); | |||
font-size: 1.25rem; | |||
line-height: 1.35; | |||
font-weight: 800; | |||
} | |||
.acw-news-topic-grid, | |||
.acw-exam-grid, | |||
.acw-jobs-lanes { | |||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: var(--acw-gap); | |||
} | |||
.acw-topic, | |||
.acw-exam-card, | |||
.acw-job-lane { | |||
border: 1px solid var(--border-color-base, #a2a9b1); | |||
border-radius: var(--acw-radius); | |||
background: var(--background-color-base, #fff); | |||
padding: 0.9rem; | |||
} | |||
.acw-topic-title, | |||
.acw-exam-title, | |||
.acw-job-title { | |||
margin: 0 0 0.35rem; | |||
color: var(--color-emphasized, #101418); | |||
font-size: 1rem; | |||
line-height: 1.35; | |||
font-weight: 800; | |||
} | |||
.acw-topic p, | |||
.acw-exam-card p, | |||
.acw-job-lane p { | |||
margin: 0; | margin: 0; | ||
color: var(--color-subtle, #54595d); | color: var(--color-subtle, #54595d); | ||
| 第158行: | 第139行: | ||
line-height: 1.6; | line-height: 1.6; | ||
} | } | ||
@media screen and (max-width: | .acw-exam-tags, | ||
.acw-ns-grid, | .acw-job-tags { | ||
.acw- | display: flex; | ||
flex-wrap: wrap; | |||
gap: 0.4rem; | |||
margin-top: 0.7rem; | |||
} | |||
.acw-tag { | |||
display: inline-flex; | |||
align-items: center; | |||
min-height: 1.65rem; | |||
padding: 0.18rem 0.5rem; | |||
border: 1px solid var(--border-color-subtle, #eaecf0); | |||
border-radius: 999px; | |||
background: var(--background-color-neutral-subtle, #f8f9fa); | |||
color: var(--color-base, #202122); | |||
font-size: var(--font-size-small, 0.875rem); | |||
} | |||
.acw-jobs-board { | |||
display: grid; | |||
grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.8fr); | |||
gap: var(--acw-gap); | |||
} | |||
.acw-create-box input[type="text"] { max-width: 100%; border-radius: 6px; } | |||
@media screen and (max-width: 980px) { | |||
.acw-ns-layout, | |||
.acw-news-grid, | |||
.acw-jobs-board { grid-template-columns: 1fr; } | |||
.acw-news-topic-grid, | |||
.acw-exam-grid, | |||
.acw-jobs-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |||
} | } | ||
@media screen and (max-width: 640px) { | @media screen and (max-width: 640px) { | ||
.acw-ns-hero { padding: 1rem; } | .acw-ns-hero { padding: 1rem; } | ||
.acw-ns-title { font-size: 1.35rem; } | .acw-ns-title { font-size: 1.35rem; } | ||
.acw- | .acw-news-topic-grid, | ||
.acw- | .acw-exam-grid, | ||
.acw-jobs-lanes { grid-template-columns: 1fr; } | |||
} | } | ||
2026年6月22日 (一) 21:09的最新版本
.acw-ns-home {
--acw-radius: 8px;
--acw-gap: 1rem;
--acw-pad: 1rem;
display: flex;
flex-direction: column;
gap: var(--acw-gap);
margin-block: 0.5rem 1.5rem;
color: var(--color-base, #202122);
}
.acw-ns-home * { box-sizing: border-box; }
.acw-ns-hero {
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: var(--acw-radius);
background: var(--background-color-base, #fff);
padding: 1.2rem;
}
.acw-ns-kicker {
margin: 0 0 0.4rem;
color: var(--color-progressive, #36c);
font-size: var(--font-size-small, 0.875rem);
font-weight: 800;
}
.acw-ns-title {
margin: 0;
color: var(--color-emphasized, #101418);
font-size: 1.65rem;
line-height: 1.25;
font-weight: 800;
}
.acw-ns-lede {
max-width: 58rem;
margin: 0.65rem 0 0;
color: var(--color-subtle, #54595d);
line-height: 1.7;
}
.acw-ns-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.75fr);
gap: var(--acw-gap);
align-items: start;
}
.acw-ns-panel {
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: var(--acw-radius);
background: var(--background-color-base, #fff);
overflow: hidden;
}
.acw-ns-section-title {
margin: 0;
padding: 0.8rem 0.95rem;
border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
background: var(--background-color-neutral-subtle, #f8f9fa);
color: var(--color-emphasized, #101418);
font-size: 1rem;
line-height: 1.35;
font-weight: 800;
}
.acw-ns-section-body { padding: 0.9rem 0.95rem; }
.acw-ns-list {
margin: 0;
padding: 0;
list-style: none;
}
.acw-ns-list li {
padding: 0.62rem 0;
border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
line-height: 1.6;
}
.acw-ns-list li:first-child { padding-top: 0; }
.acw-ns-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.acw-ns-muted {
color: var(--color-subtle, #54595d);
font-size: var(--font-size-small, 0.875rem);
line-height: 1.6;
}
.acw-ns-meta {
display: inline-block;
min-width: 3.25rem;
margin-right: 0.4rem;
color: var(--color-subtle, #54595d);
font-size: var(--font-size-small, 0.875rem);
font-weight: 800;
}
.acw-ns-dpl {
line-height: 1.7;
}
.acw-ns-dpl ul { margin-block: 0; }
.acw-ns-dpl li { margin: 0.28rem 0; }
.acw-news-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.85fr);
gap: var(--acw-gap);
}
.acw-news-feature {
min-height: 14rem;
padding: 1rem;
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: var(--acw-radius);
background: var(--background-color-neutral-subtle, #f8f9fa);
}
.acw-news-feature-title {
margin: 0 0 0.6rem;
color: var(--color-emphasized, #101418);
font-size: 1.25rem;
line-height: 1.35;
font-weight: 800;
}
.acw-news-topic-grid,
.acw-exam-grid,
.acw-jobs-lanes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--acw-gap);
}
.acw-topic,
.acw-exam-card,
.acw-job-lane {
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: var(--acw-radius);
background: var(--background-color-base, #fff);
padding: 0.9rem;
}
.acw-topic-title,
.acw-exam-title,
.acw-job-title {
margin: 0 0 0.35rem;
color: var(--color-emphasized, #101418);
font-size: 1rem;
line-height: 1.35;
font-weight: 800;
}
.acw-topic p,
.acw-exam-card p,
.acw-job-lane p {
margin: 0;
color: var(--color-subtle, #54595d);
font-size: var(--font-size-small, 0.875rem);
line-height: 1.6;
}
.acw-exam-tags,
.acw-job-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.7rem;
}
.acw-tag {
display: inline-flex;
align-items: center;
min-height: 1.65rem;
padding: 0.18rem 0.5rem;
border: 1px solid var(--border-color-subtle, #eaecf0);
border-radius: 999px;
background: var(--background-color-neutral-subtle, #f8f9fa);
color: var(--color-base, #202122);
font-size: var(--font-size-small, 0.875rem);
}
.acw-jobs-board {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.8fr);
gap: var(--acw-gap);
}
.acw-create-box input[type="text"] { max-width: 100%; border-radius: 6px; }
@media screen and (max-width: 980px) {
.acw-ns-layout,
.acw-news-grid,
.acw-jobs-board { grid-template-columns: 1fr; }
.acw-news-topic-grid,
.acw-exam-grid,
.acw-jobs-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px) {
.acw-ns-hero { padding: 1rem; }
.acw-ns-title { font-size: 1.35rem; }
.acw-news-topic-grid,
.acw-exam-grid,
.acw-jobs-lanes { grid-template-columns: 1fr; }
}