打开/关闭搜索
打开/关闭菜单
1706
4999
924
6.3万
RIA | Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

RIA Wiki 已更新到 1.41！部分 CSS 在新版本下可能有不同的表现，请编辑者注意检查和修改。 目前wiki关闭了自行注册账号的功能，如需注册账号，请查阅Help:注册账号。

模板:Fstpagetest styles：修订间差异

来自RIA | Wiki
更多操作
←上一编辑
ChenM0M​（留言 | 贡献）
63次编辑
ChenM0M​（留言 | 贡献）
63次编辑
无编辑摘要
ChenM0M​（留言 | 贡献）
63次编辑
无编辑摘要
 
（未显示同一用户的7个中间版本）
第1行： 第1行：
/* ============================================
/* TemplateStyles for fstpagetest.wiki
   FST 门户首页样式表
   Design goals:
   主题色：绿色系（森林绿 #3a8f5c）
   - Portal-like wiki homepage, not a web app
   设计原则：扁平通透、不滥用圆角、不做框中框
   - Clear section separation (esp. mobile)
   兼容：MediaWiki 1.39 TemplateStyles
   - No rounded corners anywhere
   ============================================ */
   - Avoid nested card-on-card framing
*/


/* === 变量定义（通过类复用） === */
.fst-page {
  width: 100%;
  color: #221b50;
}
 
/* Hard rule: absolutely no rounded corners in this portal */
.fst-page,
.fst-page * {
  border-radius: 0 !important;
}
 
.fst-page * {
  box-sizing: border-box;
}
 
/* MediaWiki parser often injects <p>; neutralize default margins */
.fst-page p {
  margin: 0;
}
 
/* External-link icon removal (keep portal clean) */
.fst-page a.external {
  background: none !important;
  padding-right: 0 !important;
}
 
.fst-page a.external::after {
  display: none !important;
}
 
.fst-page .fst-muted {
  color: #5d5a7d;
  font-size: 0.95em;
}
 
.fst-page .fst-mt10 {
  margin-top: 10px;
}
 
.fst-page .fst-kicker {
  color: #4a4570;
  font-size: 0.95em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
 
.fst-page .fst-zone {
  margin-top: 34px;
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 2px solid #e3e1ee;
}
 
.fst-page .fst-zone-hero {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
 
.fst-page .fst-zone-mid {
  background:
    repeating-linear-gradient(0deg, rgba(100, 211, 150, 0.045), rgba(100, 211, 150, 0.045) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(100, 211, 150, 0.045), rgba(100, 211, 150, 0.045) 1px, transparent 1px, transparent 26px),
    #f9f8fb;
  padding: 18px 12px 18px 12px;
}
 
.fst-page .fst-zone-nav {
  background: #f9f8fb;
  padding-left: 12px;
  padding-right: 12px;
}
 
.fst-page .fst-zone-landmarks {
  background: #f9f8fb;
  padding-left: 12px;
  padding-right: 12px;
}
 
.fst-page .fst-zone-footer {
  border-top: 2px solid #e3e1ee;
  padding-top: 18px;
}
 
.fst-page .fst-section-h {
  font-size: 1.25em;
  font-weight: 900;
  margin: 0 0 12px 0;
  border-left: 10px solid #e3e1ee;
  padding-left: 10px;
}
 
.fst-page .fst-h-nav {
  border-left-color: #64d396;
}
 
.fst-page .fst-h-worlds {
  border-left-color: #8bccff;
}
 
.fst-page .fst-h-track {
  border-left-color: #64d396;
}
 
.fst-page .fst-h-news {
  border-left-color: #8bccff;
}
 
.fst-page .fst-h-landmarks {
  border-left-color: #64d396;
}
 
.fst-page .fst-h-footer {
  border-left-color: #64d396;
}
 
/* Hero */
 
.fst-page .fst-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  opacity: 0.22;
}
 
.fst-page .fst-hero-media p {
  margin: 0;
}
 
.fst-page .fst-hero-media a {
  display: block;
}
 
.fst-page .fst-hero-media img {
  width: 100%;
  height: auto;
}
 
.fst-page .fst-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f9f8fb 0%, #eafff3 54%, #eef7ff 100%);
  border-top: 1px solid #e3e1ee;
  border-bottom: 1px solid #e3e1ee;
  padding: 18px 18px 16px 18px;
}
 
.fst-page .fst-title {
  font-size: 2.2em;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 6px;
}
 
.fst-page .fst-sub {
  margin-top: 8px;
  color: #3b365f;
  font-size: 1.05em;
  line-height: 1.5;
}
 
.fst-page .fst-meta {
  margin-top: 10px;
  color: #4a4570;
  font-size: 0.95em;
}
 
.fst-page .fst-jump {
  margin-top: 8px;
  color: #4a4570;
  font-size: 0.95em;
  line-height: 1.7;
}
 
.fst-page .fst-jump a {
  text-decoration: none;
  border-bottom: 1px dotted #8bccff;
}
 
.fst-page .fst-jump a:hover {
  border-bottom-style: solid;
}
 
/* Banner */
 
.fst-page .fst-banner {
  padding: 10px 12px;
  border: 1px solid #e3e1ee;
  border-left: 10px solid #64d396;
  background: #ffffff;
}


/* === 主容器 === */
.fst-page .fst-banner-tag {
.fst-portal {
  display: inline-block;
    max-width: 1100px;
  padding: 3px 10px;
    margin: 0 auto;
  margin-right: 10px;
    padding: 0;
  border: 1px solid #64d396;
    font-size: 14px;
  background: #f9f8fb;
    line-height: 1.7;
  font-weight: 900;
    color: #1a1a1a;
  font-size: 0.92em;
  color: #221b50;
}
}


/* === 1. Hero 横幅 === */
.fst-page .fst-banner-text {
.fst-hero {
  color: #3b365f;
    background: linear-gradient(135deg, #3a8f5c 0%, #2d7048 60%, #1b5e3a 100%);
    color: #fff;
    padding: 40px 30px 30px;
    text-align: center;
    border-radius: 0 0 6px 6px;
    margin-bottom: 0;
}
}


.fst-hero-title {
/* Layout */
    font-size: 2.4em;
 
    font-weight: 700;
.fst-page .fst-row {
    letter-spacing: 0.05em;
  display: flex;
    margin: 0 0 6px;
  flex-wrap: wrap;
  margin: -10px;
}
}


.fst-hero-subtitle {
.fst-page .fst-col {
    font-size: 1.1em;
  margin: 10px;
    opacity: 0.85;
  flex: 1 1 420px;
    margin: 0 0 12px;
  min-width: 320px;
    font-weight: 400;
}
}


.fst-hero-meta {
/* Quick nav */
    font-size: 0.85em;
 
    opacity: 0.65;
.fst-page .fst-navrow {
    margin: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px;
  padding-left: 12px;
  border-left: 10px solid #e3e1ee;
}
}


/* === 2. 动态 Banner（静态公告条） === */
.fst-page .fst-navrow + .fst-navrow {
.fst-banner {
  margin-top: 12px;
    background-color: #e8f5e9;
    color: #2d7048;
    padding: 8px 20px;
    font-size: 0.9em;
    text-align: center;
    border-bottom: 1px solid #c8e6c9;
}
}


.fst-banner a {
.fst-page .fst-navrow-1 {
    color: #2d7048;
  border-left-color: #64d396;
    font-weight: 600;
    text-decoration: underline;
}
}


/* === 3. 三列主体区域 === */
.fst-page .fst-navrow-2 {
.fst-main {
  border-left-color: #8bccff;
    display: flex;
    gap: 0;
    padding: 20px 0 0;
}
}


/* 左列：功能入口 */
.fst-page .fst-navtile {
.fst-sidebar-left {
  margin: 6px;
    flex: 0 0 200px;
  flex: 1 1 calc(33.333% - 12px);
    padding: 0 16px 0 0;
  min-width: 150px;
    border-right: 1px solid #e0e0e0;
}
}


/* 中列：核心内容 */
.fst-page .fst-navtile a {
.fst-content {
  display: block;
    flex: 1;
  padding: 10px 8px;
    padding: 0 20px;
  border: 0;
    min-width: 0;
  background: transparent;
  text-decoration: none;
  text-align: center;
  color: #221b50;
  transition: background 120ms ease;
}
}


/* 右列：公告资讯 */
.fst-page .fst-navtile a:hover {
.fst-sidebar-right {
  background: #ffffff;
    flex: 0 0 220px;
    padding: 0 0 0 16px;
    border-left: 1px solid #e0e0e0;
}
}


/* === 区块标题统一样式 === */
/* Suppress default external-link icon inside portal tiles */
.fst-section-title {
.fst-page .fst-navtile a.external {
    font-size: 1.05em;
  background: none !important;
    font-weight: 700;
  padding-right: 0 !important;
    color: #3a8f5c;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #3a8f5c;
}
}


/* === 4. 功能入口网格（左列） === */
.fst-page .fst-navtile a.external:hover {
.fst-quicknav {
  background: #ffffff !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
}


.fst-nav-item {
.fst-page .fst-navicon {
    display: flex;
  display: inline-block;
    flex-direction: column;
  width: 56px;
    align-items: center;
  height: 56px;
    justify-content: center;
  line-height: 54px;
    width: calc(50% - 3px);
  border: 2px solid #e3e1ee;
    padding: 12px 4px;
  background: transparent;
    text-align: center;
  font-weight: 900;
    font-size: 0.82em;
  font-size: 1.05em;
    color: #333;
  letter-spacing: 0.02em;
    text-decoration: none;
  color: #221b50;
    background: #f5f5f5;
    transition: background 0.15s;
}
}


.fst-nav-item:hover {
.fst-page .fst-navrow-1 .fst-navicon {
    background: #e8f5e9;
  border-color: #64d396;
    color: #2d7048;
  color: #221b50;
}
}


/* 图标区域（用 emoji 或 Unicode 字符） */
.fst-page .fst-navrow-2 .fst-navicon {
.fst-nav-icon {
  border-color: #8bccff;
    font-size: 1.6em;
  color: #221b50;
    margin-bottom: 4px;
    line-height: 1;
}
}


.fst-nav-label {
.fst-page .fst-navtitle {
    font-size: 0.85em;
  display: block;
    line-height: 1.3;
  font-weight: 900;
  font-size: 1.02em;
  margin-top: 10px;
}
}


/* === 5. 世界图标区（中列上方） === */
.fst-page .fst-navsub {
.fst-worlds {
  display: block;
    display: flex;
  margin-top: 6px;
    justify-content: center;
  color: #5d5a7d;
    gap: 24px;
  font-size: 0.9em;
    padding: 10px 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}
}


.fst-world-icon {
.fst-page .fst-navnote {
    display: flex;
  margin-top: 12px;
    flex-direction: column;
  padding-left: 12px;
    align-items: center;
  border-left: 10px solid #e3e1ee;
    text-decoration: none;
  color: #4a4570;
    color: #333;
  line-height: 1.6;
    transition: color 0.15s;
}
}


.fst-world-icon:hover {
/* Worlds */
    color: #3a8f5c;
 
.fst-page .fst-world-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}
}


/* 世界符号：无边框极简图标 */
.fst-page .fst-world {
.fst-world-symbol {
  margin: 8px;
    font-size: 2.2em;
  padding: 8px 0 12px 0;
    line-height: 1;
  border-bottom: 2px solid #e3e1ee;
    margin-bottom: 4px;
  background: transparent;
  flex: 1 1 calc(50% - 16px);
  min-width: 240px;
}
}


.fst-world-name {
.fst-page .fst-world-wide {
    font-size: 0.8em;
  flex-basis: 100%;
    color: #666;
}
}


.fst-world-icon:hover .fst-world-name {
.fst-page .fst-world-laputa {
    color: #3a8f5c;
  border-bottom-color: #64d396;
}
}


/* === 6. Tab 切换区域（中列） === */
.fst-page .fst-world-eden {
.fst-tabs {
  border-bottom-color: #8bccff;
    margin-bottom: 20px;
}
}


/* Tab 导航栏 */
.fst-page .fst-world-sat {
.fst-tabbar {
  border-bottom-color: #e3e1ee;
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 0;
}
}


.fst-tabbar a {
.fst-page .fst-world-head {
    padding: 8px 16px;
  display: flex;
    font-size: 0.92em;
  flex-wrap: wrap;
    color: #666;
  align-items: center;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s;
}
}


.fst-tabbar a:hover {
.fst-page .fst-world-icon {
    color: #3a8f5c;
  display: inline-block;
  width: 58px;
  height: 58px;
  line-height: 56px;
  text-align: center;
  border: 2px solid #e3e1ee;
  background: transparent;
  margin-right: 12px;
  font-weight: 900;
  font-size: 1.05em;
  color: #221b50;
  transition: border-color 120ms ease;
}
}


/* 当前 Tab 高亮（通过 :target 关联的 panel 来间接标识，
.fst-page .fst-world-icon-laputa {
  但因 CSS-only 限制，tabbar 高亮需用 :target 面板配合）*/
  border-color: #64d396;
.fst-tabbar a.fst-tab-active {
  color: #221b50;
    color: #3a8f5c;
    border-bottom-color: #3a8f5c;
    font-weight: 600;
}
}


/* Tab 面板 */
.fst-page .fst-world-icon-eden {
.fst-panel {
  border-color: #8bccff;
    display: none;
  color: #221b50;
    padding: 14px 0 0;
}
}


/* 默认面板（虾仁起步）：在无 :target 时显示 */
.fst-page .fst-world-icon-sat {
.fst-panel-default {
  border-color: #e3e1ee;
    display: block;
  color: #221b50;
}
}


/* :target 激活时显示对应面板 */
.fst-page .fst-world-name {
.fst-panel:target {
  font-weight: 900;
    display: block;
  font-size: 1.08em;
  margin-right: 10px;
}
}


/* 当任意面板被 :target 激活时，隐藏默认面板
.fst-page .fst-world-badge {
  通过 :target 同级选择器实现 */
  display: inline-block;
.fst-panel:target~.fst-panel-default {
  padding: 0;
    display: none;
  border: 0;
  background: transparent;
  font-size: 0.88em;
  font-weight: 900;
  color: #4a4570;
}
}


/* Tab 面板内容样式 */
.fst-page .fst-world-desc {
.fst-panel-content {
  margin-top: 8px;
    font-size: 0.92em;
  color: #4a4570;
    color: #333;
  font-size: 0.95em;
    line-height: 1.8;
  line-height: 1.6;
}
}


.fst-panel-content ul {
.fst-page .fst-world-links {
    margin: 6px 0;
  margin-top: 10px;
    padding-left: 18px;
  padding-top: 10px;
  border-top: 1px solid #e3e1ee;
  color: #4a4570;
  line-height: 1.6;
}
}


.fst-panel-content li {
.fst-page .fst-world-note {
    margin-bottom: 4px;
  margin-top: 10px;
}
}


/* 面板内链接列表 */
/* Tabs */
.fst-link-list {
 
    margin: 10px 0;
.fst-page .fst-tabs {
    padding: 0;
  background: transparent;
    list-style: none;
  padding: 0;
}
}


.fst-link-list li {
.fst-page .fst-tab-anchor {
    padding: 6px 0;
  display: block;
    border-bottom: 1px solid #f0f0f0;
  height: 0;
  overflow: hidden;
}
}


.fst-link-list li:last-child {
.fst-page .fst-tabbar {
    border-bottom: none;
  margin-bottom: 10px;
}
}


/* === 7. 发展历程时间线（中列下方） === */
.fst-page .fst-tabbar p {
.fst-timeline {
  display: inline;
    margin: 20px 0;
  margin: 0;
    padding: 0;
}
}


.fst-timeline-item {
.fst-page .fst-tabbar br {
    display: flex;
  display: none;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-left: 2px solid #c8e6c9;
    margin-left: 6px;
    padding-left: 16px;
}
}


/* 时间线节点圆点 */
.fst-page .fst-tabbar a {
.fst-timeline-dot {
  display: inline-block;
    flex-shrink: 0;
  padding: 6px 10px;
    width: 10px;
  margin: 0 10px 8px 0;
    height: 10px;
  border: 1px solid transparent;
    background: #3a8f5c;
  background: transparent;
    border-radius: 50%;
  text-decoration: none;
    margin-top: 5px;
  font-weight: 900;
    margin-left: -23px;
  color: #221b50;
  transition: background 120ms ease, border-color 120ms ease;
}
}


.fst-timeline-date {
.fst-page .fst-tabbar a:hover {
    flex-shrink: 0;
  background: #ffffff;
    font-size: 0.82em;
  border-color: #c9d2dc;
    color: #999;
    min-width: 70px;
}
}


.fst-timeline-text {
.fst-page .fst-tabpanel {
    font-size: 0.88em;
  display: none;
    color: #333;
  padding: 10px 0 12px 12px;
  border-left: 6px solid #e3e1ee;
}
}


.fst-timeline-text a {
.fst-page .fst-tabpanel-beginner {
    color: #3a8f5c;
  display: block;
  border-left-color: #64d396;
}
}


/* === 8. 公告资讯（右列） === */
.fst-page .fst-tabpanel-intermediate {
.fst-news {
  border-left-color: #64d396;
    padding: 0;
}
}


.fst-news-list {
.fst-page .fst-tabpanel-advanced {
    list-style: none;
  border-left-color: #64d396;
    margin: 0;
    padding: 0;
}
}


.fst-news-list li {
.fst-page .fst-panel-h {
    padding: 8px 0;
  font-weight: 900;
    border-bottom: 1px solid #f0f0f0;
  font-size: 1.05em;
    font-size: 0.88em;
  margin: 0 0 6px 0;
    color: #333;
    line-height: 1.5;
}
}


.fst-news-list li:last-child {
.fst-page .fst-panel-p {
    border-bottom: none;
  color: #4a4570;
  line-height: 1.6;
}
}


/* 圆点装饰 */
.fst-page .fst-panel-links {
.fst-news-list li::before {
  margin-top: 8px;
    content: "●";
  color: #4a4570;
    color: #3a8f5c;
  line-height: 1.6;
    font-size: 0.6em;
    margin-right: 6px;
    vertical-align: middle;
}
}


/* === 9. 地标列表区（全宽） === */
/* Default highlighted tab */
.fst-landmarks {
.fst-page .fst-tabbar a[href="#tab-beginner"] {
    margin: 24px 0 0;
  background: #ffffff;
    padding: 20px 0 0;
  border-color: #64d396;
    border-top: 1px solid #e0e0e0;
}
}


.fst-landmarks-grid {
/* Target logic: show panel + highlight tab */
    display: flex;
.fst-page #tab-intermediate:target ~ .fst-tabpanels .fst-tabpanel-beginner,
    flex-wrap: wrap;
.fst-page #tab-advanced:target ~ .fst-tabpanels .fst-tabpanel-beginner {
    gap: 10px;
  display: none;
    margin-top: 10px;
}
}


.fst-landmark-item {
.fst-page #tab-intermediate:target ~ .fst-tabpanels .fst-tabpanel-intermediate {
    flex: 0 0 calc(33.333% - 7px);
  display: block;
    padding: 10px 12px;
    background: #fafafa;
    font-size: 0.88em;
    border-left: 3px solid #3a8f5c;
    transition: background 0.15s;
}
}


.fst-landmark-item:hover {
.fst-page #tab-advanced:target ~ .fst-tabpanels .fst-tabpanel-advanced {
    background: #e8f5e9;
  display: block;
}
}


.fst-landmark-name {
.fst-page #tab-intermediate:target ~ .fst-tabbar a[href="#tab-beginner"],
    font-weight: 600;
.fst-page #tab-advanced:target ~ .fst-tabbar a[href="#tab-beginner"] {
    color: #1a1a1a;
  background: transparent;
    margin-bottom: 2px;
  border-color: transparent;
}
}


.fst-landmark-desc {
.fst-page #tab-intermediate:target ~ .fst-tabbar a[href="#tab-intermediate"] {
    font-size: 0.85em;
  background: #ffffff;
    color: #888;
  border-color: #64d396;
}
}


/* === 10. 页脚 === */
.fst-page #tab-advanced:target ~ .fst-tabbar a[href="#tab-advanced"] {
.fst-footer {
  background: #ffffff;
    margin-top: 24px;
  border-color: #64d396;
    padding: 16px 0;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    font-size: 0.82em;
    color: #999;
}
}


.fst-footer a {
/* Timeline + topics */
    color: #3a8f5c;
 
.fst-page .fst-timeline {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e3e1ee;
  border-left: 2px solid #e3e1ee;
  padding-left: 12px;
}
}


/* === 11. 通用辅助 === */
.fst-page .fst-timeline-h {
  font-weight: 900;
  margin: 0 0 8px 0;
}


/* 链接默认样式 */
.fst-page .fst-timeline-item {
.fst-portal a {
  margin-top: 6px;
    color: #3a8f5c;
    text-decoration: none;
}
}


.fst-portal a:hover {
.fst-page .fst-timeline-date {
    text-decoration: underline;
  display: inline-block;
    color: #2d7048;
  min-width: 74px;
  font-weight: 900;
  color: #221b50;
}
}


/* 表格样式（在 panel 内使用） */
.fst-page .fst-timeline-text {
.fst-table {
  color: #4a4570;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    margin: 8px 0;
}
}


.fst-table th {
.fst-page .fst-topics {
    text-align: left;
  margin-top: 12px;
    padding: 6px 10px;
  padding-top: 12px;
    background: #e8f5e9;
  border-top: 1px solid #e3e1ee;
    color: #2d7048;
    font-weight: 600;
    border-bottom: 2px solid #c8e6c9;
}
}


.fst-table td {
.fst-page .fst-topics-h {
    padding: 6px 10px;
  font-weight: 900;
    border-bottom: 1px solid #f0f0f0;
  margin: 0 0 6px 0;
}
}


/* 模组徽章 */
.fst-page .fst-topics-line {
.fst-mod-tag {
  color: #4a4570;
    display: inline-block;
  line-height: 1.7;
    padding: 2px 8px;
    background: #e8f5e9;
    color: #2d7048;
    font-size: 0.82em;
    margin: 2px 4px 2px 0;
    border-radius: 3px;
}
}


/* === 12. 响应式 === */
/* News */
@media (max-width: 768px) {


    /* 三列转单列 */
.fst-page .fst-news {
    .fst-main {
  background: transparent;
        flex-direction: column;
  padding: 0;
    }
}


    .fst-sidebar-left {
.fst-page .fst-news-item {
        flex: none;
  padding: 10px 0 10px 12px;
        border-right: none;
  border-left: 6px solid #8bccff;
        border-bottom: 1px solid #e0e0e0;
  border-bottom: 0;
        padding: 0 0 16px;
}
        margin-bottom: 16px;
    }


    .fst-sidebar-right {
.fst-page .fst-news-item + .fst-news-item {
        flex: none;
  margin-top: 10px;
        border-left: none;
}
        border-top: 1px solid #e0e0e0;
        padding: 16px 0 0;
        margin-top: 16px;
    }


    .fst-content {
.fst-page .fst-news-item:last-child {
        padding: 0;
  border-bottom: 0;
    }
}


    /* 入口网格单列 */
.fst-page .fst-news-title {
    .fst-nav-item {
  font-weight: 900;
        width: calc(33.333% - 4px);
  margin: 0 0 4px 0;
    }
}


    /* 地标双列 */
/* Landmarks table (template output) */
    .fst-landmark-item {
        flex: 0 0 calc(50% - 5px);
    }


    /* Hero 缩小 */
.fst-page .fst-zone-landmarks table {
    .fst-hero {
  width: 100%;
        padding: 24px 16px 20px;
  background: #ffffff !important;
    }
}


    .fst-hero-title {
.fst-page .fst-zone-landmarks th,
        font-size: 1.8em;
.fst-page .fst-zone-landmarks td {
    }
  border: 1px solid #e3e1ee !important;
  padding: 6px 8px;
  background: #ffffff !important;
  color: #221b50 !important;
}
}


@media (max-width: 480px) {
.fst-page .fst-zone-landmarks th {
    .fst-nav-item {
  background: #f9f8fb !important;
        width: calc(50% - 3px);
}
    }


    .fst-landmark-item {
.fst-page .fst-zone-landmarks tr:nth-child(even) td {
        flex: 0 0 100%;
  background: #f9f8fb !important;
    }
}
 
/* Footer */
 
.fst-page .fst-footer-links {
  margin-top: 10px;
  color: #4a4570;
  line-height: 1.7;
}


    .fst-worlds {
/* Keep navbox/table styling tame inside this portal */
        gap: 16px;
.fst-page .navbox,
    }
.fst-page table {
  box-shadow: none;
}


    .fst-tabbar a {
@media (max-width: 720px) {
        padding: 6px 10px;
  .fst-page .fst-zone-mid {
        font-size: 0.85em;
    padding-left: 10px;
     }
    padding-right: 10px;
  }
 
  .fst-page .fst-col {
    min-width: 0;
  }
 
  .fst-page .fst-navtile {
    flex-basis: calc(50% - 12px);
    min-width: 0;
  }
 
  .fst-page .fst-world {
    min-width: 0;
     flex-basis: 100%;
  }
}
}

2026年2月14日 (六) 17:24的最新版本

/* TemplateStyles for fstpagetest.wiki
   Design goals:
   - Portal-like wiki homepage, not a web app
   - Clear section separation (esp. mobile)
   - No rounded corners anywhere
   - Avoid nested card-on-card framing
*/

.fst-page {
  width: 100%;
  color: #221b50;
}

/* Hard rule: absolutely no rounded corners in this portal */
.fst-page,
.fst-page * {
  border-radius: 0 !important;
}

.fst-page * {
  box-sizing: border-box;
}

/* MediaWiki parser often injects <p>; neutralize default margins */
.fst-page p {
  margin: 0;
}

/* External-link icon removal (keep portal clean) */
.fst-page a.external {
  background: none !important;
  padding-right: 0 !important;
}

.fst-page a.external::after {
  display: none !important;
}

.fst-page .fst-muted {
  color: #5d5a7d;
  font-size: 0.95em;
}

.fst-page .fst-mt10 {
  margin-top: 10px;
}

.fst-page .fst-kicker {
  color: #4a4570;
  font-size: 0.95em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fst-page .fst-zone {
  margin-top: 34px;
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 2px solid #e3e1ee;
}

.fst-page .fst-zone-hero {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fst-page .fst-zone-mid {
  background:
    repeating-linear-gradient(0deg, rgba(100, 211, 150, 0.045), rgba(100, 211, 150, 0.045) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(100, 211, 150, 0.045), rgba(100, 211, 150, 0.045) 1px, transparent 1px, transparent 26px),
    #f9f8fb;
  padding: 18px 12px 18px 12px;
}

.fst-page .fst-zone-nav {
  background: #f9f8fb;
  padding-left: 12px;
  padding-right: 12px;
}

.fst-page .fst-zone-landmarks {
  background: #f9f8fb;
  padding-left: 12px;
  padding-right: 12px;
}

.fst-page .fst-zone-footer {
  border-top: 2px solid #e3e1ee;
  padding-top: 18px;
}

.fst-page .fst-section-h {
  font-size: 1.25em;
  font-weight: 900;
  margin: 0 0 12px 0;
  border-left: 10px solid #e3e1ee;
  padding-left: 10px;
}

.fst-page .fst-h-nav {
  border-left-color: #64d396;
}

.fst-page .fst-h-worlds {
  border-left-color: #8bccff;
}

.fst-page .fst-h-track {
  border-left-color: #64d396;
}

.fst-page .fst-h-news {
  border-left-color: #8bccff;
}

.fst-page .fst-h-landmarks {
  border-left-color: #64d396;
}

.fst-page .fst-h-footer {
  border-left-color: #64d396;
}

/* Hero */

.fst-page .fst-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  opacity: 0.22;
}

.fst-page .fst-hero-media p {
  margin: 0;
}

.fst-page .fst-hero-media a {
  display: block;
}

.fst-page .fst-hero-media img {
  width: 100%;
  height: auto;
}

.fst-page .fst-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f9f8fb 0%, #eafff3 54%, #eef7ff 100%);
  border-top: 1px solid #e3e1ee;
  border-bottom: 1px solid #e3e1ee;
  padding: 18px 18px 16px 18px;
}

.fst-page .fst-title {
  font-size: 2.2em;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 6px;
}

.fst-page .fst-sub {
  margin-top: 8px;
  color: #3b365f;
  font-size: 1.05em;
  line-height: 1.5;
}

.fst-page .fst-meta {
  margin-top: 10px;
  color: #4a4570;
  font-size: 0.95em;
}

.fst-page .fst-jump {
  margin-top: 8px;
  color: #4a4570;
  font-size: 0.95em;
  line-height: 1.7;
}

.fst-page .fst-jump a {
  text-decoration: none;
  border-bottom: 1px dotted #8bccff;
}

.fst-page .fst-jump a:hover {
  border-bottom-style: solid;
}

/* Banner */

.fst-page .fst-banner {
  padding: 10px 12px;
  border: 1px solid #e3e1ee;
  border-left: 10px solid #64d396;
  background: #ffffff;
}

.fst-page .fst-banner-tag {
  display: inline-block;
  padding: 3px 10px;
  margin-right: 10px;
  border: 1px solid #64d396;
  background: #f9f8fb;
  font-weight: 900;
  font-size: 0.92em;
  color: #221b50;
}

.fst-page .fst-banner-text {
  color: #3b365f;
}

/* Layout */

.fst-page .fst-row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.fst-page .fst-col {
  margin: 10px;
  flex: 1 1 420px;
  min-width: 320px;
}

/* Quick nav */

.fst-page .fst-navrow {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px;
  padding-left: 12px;
  border-left: 10px solid #e3e1ee;
}

.fst-page .fst-navrow + .fst-navrow {
  margin-top: 12px;
}

.fst-page .fst-navrow-1 {
  border-left-color: #64d396;
}

.fst-page .fst-navrow-2 {
  border-left-color: #8bccff;
}

.fst-page .fst-navtile {
  margin: 6px;
  flex: 1 1 calc(33.333% - 12px);
  min-width: 150px;
}

.fst-page .fst-navtile a {
  display: block;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  text-decoration: none;
  text-align: center;
  color: #221b50;
  transition: background 120ms ease;
}

.fst-page .fst-navtile a:hover {
  background: #ffffff;
}

/* Suppress default external-link icon inside portal tiles */
.fst-page .fst-navtile a.external {
  background: none !important;
  padding-right: 0 !important;
}

.fst-page .fst-navtile a.external:hover {
  background: #ffffff !important;
}

.fst-page .fst-navicon {
  display: inline-block;
  width: 56px;
  height: 56px;
  line-height: 54px;
  border: 2px solid #e3e1ee;
  background: transparent;
  font-weight: 900;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  color: #221b50;
}

.fst-page .fst-navrow-1 .fst-navicon {
  border-color: #64d396;
  color: #221b50;
}

.fst-page .fst-navrow-2 .fst-navicon {
  border-color: #8bccff;
  color: #221b50;
}

.fst-page .fst-navtitle {
  display: block;
  font-weight: 900;
  font-size: 1.02em;
  margin-top: 10px;
}

.fst-page .fst-navsub {
  display: block;
  margin-top: 6px;
  color: #5d5a7d;
  font-size: 0.9em;
}

.fst-page .fst-navnote {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 10px solid #e3e1ee;
  color: #4a4570;
  line-height: 1.6;
}

/* Worlds */

.fst-page .fst-world-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}

.fst-page .fst-world {
  margin: 8px;
  padding: 8px 0 12px 0;
  border-bottom: 2px solid #e3e1ee;
  background: transparent;
  flex: 1 1 calc(50% - 16px);
  min-width: 240px;
}

.fst-page .fst-world-wide {
  flex-basis: 100%;
}

.fst-page .fst-world-laputa {
  border-bottom-color: #64d396;
}

.fst-page .fst-world-eden {
  border-bottom-color: #8bccff;
}

.fst-page .fst-world-sat {
  border-bottom-color: #e3e1ee;
}

.fst-page .fst-world-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.fst-page .fst-world-icon {
  display: inline-block;
  width: 58px;
  height: 58px;
  line-height: 56px;
  text-align: center;
  border: 2px solid #e3e1ee;
  background: transparent;
  margin-right: 12px;
  font-weight: 900;
  font-size: 1.05em;
  color: #221b50;
  transition: border-color 120ms ease;
}

.fst-page .fst-world-icon-laputa {
  border-color: #64d396;
  color: #221b50;
}

.fst-page .fst-world-icon-eden {
  border-color: #8bccff;
  color: #221b50;
}

.fst-page .fst-world-icon-sat {
  border-color: #e3e1ee;
  color: #221b50;
}

.fst-page .fst-world-name {
  font-weight: 900;
  font-size: 1.08em;
  margin-right: 10px;
}

.fst-page .fst-world-badge {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.88em;
  font-weight: 900;
  color: #4a4570;
}

.fst-page .fst-world-desc {
  margin-top: 8px;
  color: #4a4570;
  font-size: 0.95em;
  line-height: 1.6;
}

.fst-page .fst-world-links {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e3e1ee;
  color: #4a4570;
  line-height: 1.6;
}

.fst-page .fst-world-note {
  margin-top: 10px;
}

/* Tabs */

.fst-page .fst-tabs {
  background: transparent;
  padding: 0;
}

.fst-page .fst-tab-anchor {
  display: block;
  height: 0;
  overflow: hidden;
}

.fst-page .fst-tabbar {
  margin-bottom: 10px;
}

.fst-page .fst-tabbar p {
  display: inline;
  margin: 0;
}

.fst-page .fst-tabbar br {
  display: none;
}

.fst-page .fst-tabbar a {
  display: inline-block;
  padding: 6px 10px;
  margin: 0 10px 8px 0;
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  font-weight: 900;
  color: #221b50;
  transition: background 120ms ease, border-color 120ms ease;
}

.fst-page .fst-tabbar a:hover {
  background: #ffffff;
  border-color: #c9d2dc;
}

.fst-page .fst-tabpanel {
  display: none;
  padding: 10px 0 12px 12px;
  border-left: 6px solid #e3e1ee;
}

.fst-page .fst-tabpanel-beginner {
  display: block;
  border-left-color: #64d396;
}

.fst-page .fst-tabpanel-intermediate {
  border-left-color: #64d396;
}

.fst-page .fst-tabpanel-advanced {
  border-left-color: #64d396;
}

.fst-page .fst-panel-h {
  font-weight: 900;
  font-size: 1.05em;
  margin: 0 0 6px 0;
}

.fst-page .fst-panel-p {
  color: #4a4570;
  line-height: 1.6;
}

.fst-page .fst-panel-links {
  margin-top: 8px;
  color: #4a4570;
  line-height: 1.6;
}

/* Default highlighted tab */
.fst-page .fst-tabbar a[href="#tab-beginner"] {
  background: #ffffff;
  border-color: #64d396;
}

/* Target logic: show panel + highlight tab */
.fst-page #tab-intermediate:target ~ .fst-tabpanels .fst-tabpanel-beginner,
.fst-page #tab-advanced:target ~ .fst-tabpanels .fst-tabpanel-beginner {
  display: none;
}

.fst-page #tab-intermediate:target ~ .fst-tabpanels .fst-tabpanel-intermediate {
  display: block;
}

.fst-page #tab-advanced:target ~ .fst-tabpanels .fst-tabpanel-advanced {
  display: block;
}

.fst-page #tab-intermediate:target ~ .fst-tabbar a[href="#tab-beginner"],
.fst-page #tab-advanced:target ~ .fst-tabbar a[href="#tab-beginner"] {
  background: transparent;
  border-color: transparent;
}

.fst-page #tab-intermediate:target ~ .fst-tabbar a[href="#tab-intermediate"] {
  background: #ffffff;
  border-color: #64d396;
}

.fst-page #tab-advanced:target ~ .fst-tabbar a[href="#tab-advanced"] {
  background: #ffffff;
  border-color: #64d396;
}

/* Timeline + topics */

.fst-page .fst-timeline {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e3e1ee;
  border-left: 2px solid #e3e1ee;
  padding-left: 12px;
}

.fst-page .fst-timeline-h {
  font-weight: 900;
  margin: 0 0 8px 0;
}

.fst-page .fst-timeline-item {
  margin-top: 6px;
}

.fst-page .fst-timeline-date {
  display: inline-block;
  min-width: 74px;
  font-weight: 900;
  color: #221b50;
}

.fst-page .fst-timeline-text {
  color: #4a4570;
}

.fst-page .fst-topics {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e3e1ee;
}

.fst-page .fst-topics-h {
  font-weight: 900;
  margin: 0 0 6px 0;
}

.fst-page .fst-topics-line {
  color: #4a4570;
  line-height: 1.7;
}

/* News */

.fst-page .fst-news {
  background: transparent;
  padding: 0;
}

.fst-page .fst-news-item {
  padding: 10px 0 10px 12px;
  border-left: 6px solid #8bccff;
  border-bottom: 0;
}

.fst-page .fst-news-item + .fst-news-item {
  margin-top: 10px;
}

.fst-page .fst-news-item:last-child {
  border-bottom: 0;
}

.fst-page .fst-news-title {
  font-weight: 900;
  margin: 0 0 4px 0;
}

/* Landmarks table (template output) */

.fst-page .fst-zone-landmarks table {
  width: 100%;
  background: #ffffff !important;
}

.fst-page .fst-zone-landmarks th,
.fst-page .fst-zone-landmarks td {
  border: 1px solid #e3e1ee !important;
  padding: 6px 8px;
  background: #ffffff !important;
  color: #221b50 !important;
}

.fst-page .fst-zone-landmarks th {
  background: #f9f8fb !important;
}

.fst-page .fst-zone-landmarks tr:nth-child(even) td {
  background: #f9f8fb !important;
}

/* Footer */

.fst-page .fst-footer-links {
  margin-top: 10px;
  color: #4a4570;
  line-height: 1.7;
}

/* Keep navbox/table styling tame inside this portal */
.fst-page .navbox,
.fst-page table {
  box-shadow: none;
}

@media (max-width: 720px) {
  .fst-page .fst-zone-mid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .fst-page .fst-col {
    min-width: 0;
  }

  .fst-page .fst-navtile {
    flex-basis: calc(50% - 12px);
    min-width: 0;
  }

  .fst-page .fst-world {
    min-width: 0;
    flex-basis: 100%;
  }
}
检索自“https://wiki.ria.red/index.php?title=模板:Fstpagetest_styles&oldid=62287”
最后修改时间
此页面最后编辑于2026年2月14日 (星期六) 17:24。