MediaWiki:Tweeki.css:修订间差异
MediaWiki界面页面
更多操作
Maintenance script(留言 | 贡献) Improve Tweeki accessibility link and footer targets |
Maintenance script(留言 | 贡献) Refine Tweeki knowledge-base visual rhythm |
||
| 第1行: | 第1行: | ||
/* Tweeki rehearsal site polish. Loaded only for users selecting the Tweeki skin. */ | /* Tweeki rehearsal site polish. Loaded only for users selecting the Tweeki skin. */ | ||
body.skin-tweeki { | body.skin-tweeki { | ||
--mucwiki-page: # | --mucwiki-page: #f7f8fb; | ||
--mucwiki-surface: #ffffff; | --mucwiki-surface: #ffffff; | ||
--mucwiki-text: #172033; | --mucwiki-text: #172033; | ||
--mucwiki-muted: #566273; | --mucwiki-muted: #566273; | ||
--mucwiki-border: # | --mucwiki-border: #d9e2ee; | ||
--mucwiki-accent: # | --mucwiki-border-soft: #e8edf4; | ||
--mucwiki-accent-strong: # | --mucwiki-accent: #245b9f; | ||
--mucwiki-accent-strong: #173f75; | |||
--mucwiki-accent-soft: #edf4ff; | |||
background: #f7f8fb; | |||
color: var(--mucwiki-text); | color: var(--mucwiki-text); | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
} | |||
body.skin-tweeki #contentwrapper.with-navbar-fixed { | |||
padding-top: 60px; | |||
} | |||
body.skin-tweeki #maincontentwrapper { | |||
padding-top: 0; | |||
} | } | ||
body.skin-tweeki .navbar { | body.skin-tweeki .navbar { | ||
min-height: | min-height: 3.75rem; | ||
border-bottom: 1px solid rgba( | border-bottom: 1px solid rgba(198, 208, 222, .85); | ||
background: rgba(255, 255, 255, . | background: rgba(255, 255, 255, .96) !important; | ||
box-shadow: 0 | box-shadow: 0 1px 0 rgba(17, 24, 39, .02); | ||
} | } | ||
body.skin-tweeki .navbar .container { | body.skin-tweeki .navbar .container { | ||
max-width: | max-width: 76rem; | ||
} | } | ||
body.skin-tweeki .navbar-brand { | body.skin-tweeki .navbar-brand { | ||
color: # | color: #111827; | ||
font-size: 1.18rem; | |||
font-weight: 800; | font-weight: 800; | ||
letter-spacing: 0; | letter-spacing: 0; | ||
| 第32行: | 第42行: | ||
body.skin-tweeki .navbar .navbar-nav { | body.skin-tweeki .navbar .navbar-nav { | ||
gap: . | gap: .08rem; | ||
} | } | ||
body.skin-tweeki .navbar .nav-link, | body.skin-tweeki .navbar .nav-link, | ||
body.skin-tweeki .navbar .dropdown-toggle { | body.skin-tweeki .navbar .dropdown-toggle { | ||
min-height: 2. | min-height: 2.25rem; | ||
padding: . | padding: .42rem .66rem; | ||
border-radius: | border-radius: 8px; | ||
color: #344054; | color: #344054; | ||
font-weight: 700; | font-weight: 700; | ||
| 第48行: | 第58行: | ||
body.skin-tweeki .navbar .dropdown-toggle:hover, | body.skin-tweeki .navbar .dropdown-toggle:hover, | ||
body.skin-tweeki .navbar .dropdown-toggle:focus { | body.skin-tweeki .navbar .dropdown-toggle:focus { | ||
background: # | background: #f1f5f9; | ||
color: | color: var(--mucwiki-accent-strong); | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| 第55行: | 第65行: | ||
body.skin-tweeki .navbar .nav-link.active, | body.skin-tweeki .navbar .nav-link.active, | ||
body.skin-tweeki .navbar .nav-item.active > .nav-link { | body.skin-tweeki .navbar .nav-item.active > .nav-link { | ||
background: | background: var(--mucwiki-accent-soft); | ||
color: | color: var(--mucwiki-accent-strong); | ||
} | } | ||
body.skin-tweeki .navbar-toggler { | body.skin-tweeki .navbar-toggler { | ||
border-color: #cfd9e7; | border-color: #cfd9e7; | ||
border-radius: | border-radius: 8px; | ||
} | } | ||
| 第68行: | 第78行: | ||
body.skin-tweeki #searchInput { | body.skin-tweeki #searchInput { | ||
min-height: 2.35rem; | min-height: 2.35rem; | ||
border-color: # | border-color: #cfd9e7; | ||
border-radius: | border-radius: 9px; | ||
background: #fff; | background: #fff; | ||
box-shadow: none; | box-shadow: none; | ||
| 第92行: | 第102行: | ||
body.skin-tweeki #content.mw-body { | body.skin-tweeki #content.mw-body { | ||
max-width: | max-width: 76rem; | ||
margin: | margin: 1.7rem auto 0; | ||
padding: | padding: 2rem 2.25rem 2.5rem; | ||
border: 1px solid var(--mucwiki-border); | border: 1px solid var(--mucwiki-border-soft); | ||
border-radius: | border-radius: 12px; | ||
background: rgba(255, 255, 255, . | background: rgba(255, 255, 255, .96); | ||
box-shadow: 0 | box-shadow: 0 1px 2px rgba(37, 55, 82, .04); | ||
} | } | ||
body.skin-tweeki #bodyContent { | body.skin-tweeki #bodyContent { | ||
max-width: | max-width: 68rem; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
body.skin-tweeki .mw-parser-output { | body.skin-tweeki .mw-parser-output { | ||
max-width: | max-width: 64rem; | ||
margin: 0 auto; | margin: 0 auto; | ||
color: var(--mucwiki-text); | color: var(--mucwiki-text); | ||
| 第115行: | 第125行: | ||
body.skin-tweeki:not(.page-首页) .mw-parser-output { | body.skin-tweeki:not(.page-首页) .mw-parser-output { | ||
max-width: | max-width: 58rem; | ||
} | } | ||
body.skin-tweeki #firstHeading { | body.skin-tweeki #firstHeading { | ||
max-width: | max-width: 58rem; | ||
margin: 0 auto | margin: 0 auto 1rem; | ||
color: #0f172a; | color: #0f172a; | ||
font-size: | font-size: 2rem; | ||
font-weight: 800; | font-weight: 800; | ||
line-height: 1.18; | line-height: 1.18; | ||
| 第131行: | 第141行: | ||
body.skin-tweeki.page-首页 #bodyContent, | body.skin-tweeki.page-首页 #bodyContent, | ||
body.skin-tweeki.page-首页 .mw-parser-output { | body.skin-tweeki.page-首页 .mw-parser-output { | ||
max-width: | max-width: 76rem; | ||
} | } | ||
body.skin-tweeki.page-首页 #content.mw-body { | body.skin-tweeki.page-首页 #content.mw-body { | ||
margin-top: | margin-top: 1.45rem; | ||
padding: 0 1. | padding: 0 1.25rem 2.1rem; | ||
border: 0; | border: 0; | ||
border-radius: 0; | border-radius: 0; | ||
| 第148行: | 第158行: | ||
body.skin-tweeki .mw-parser-output h2 { | body.skin-tweeki .mw-parser-output h2 { | ||
margin-top: 1. | margin-top: 1.55rem; | ||
padding-bottom: .3rem; | padding-bottom: .3rem; | ||
border-bottom: 1px solid var(--mucwiki-border); | border-bottom: 1px solid var(--mucwiki-border); | ||
color: #111827; | color: #111827; | ||
font-size: 1. | font-size: 1.42rem; | ||
font-weight: 800; | font-weight: 800; | ||
} | } | ||
body.skin-tweeki .mw-parser-output h3 { | body.skin-tweeki .mw-parser-output h3 { | ||
margin-top: 1. | margin-top: 1.18rem; | ||
color: #172033; | color: #172033; | ||
font-size: 1. | font-size: 1.12rem; | ||
font-weight: 800; | font-weight: 800; | ||
} | } | ||
| 第197行: | 第207行: | ||
body.skin-tweeki .oo-ui-panelLayout-framed { | body.skin-tweeki .oo-ui-panelLayout-framed { | ||
border-color: var(--mucwiki-border); | border-color: var(--mucwiki-border); | ||
border-radius: | border-radius: 10px; | ||
background: #fff; | background: #fff; | ||
box-shadow: 0 | box-shadow: 0 1px 2px rgba(37, 55, 82, .035); | ||
} | } | ||
| 第214行: | 第224行: | ||
overflow: hidden; | overflow: hidden; | ||
border-color: var(--mucwiki-border); | border-color: var(--mucwiki-border); | ||
border-radius: | border-radius: 8px; | ||
background: #fff; | background: #fff; | ||
} | } | ||
| 第235行: | 第245行: | ||
body.skin-tweeki textarea { | body.skin-tweeki textarea { | ||
border-color: #cfd9e7; | border-color: #cfd9e7; | ||
border-radius: | border-radius: 8px; | ||
background: #fff; | background: #fff; | ||
box-shadow: none; | box-shadow: none; | ||
| 第254行: | 第264行: | ||
body.skin-tweeki input[type="button"], | body.skin-tweeki input[type="button"], | ||
body.skin-tweeki input[type="submit"] { | body.skin-tweeki input[type="submit"] { | ||
border-radius: | border-radius: 8px; | ||
font-weight: 700; | font-weight: 700; | ||
} | } | ||
| 第260行: | 第270行: | ||
body.skin-tweeki .oo-ui-buttonElement-button, | body.skin-tweeki .oo-ui-buttonElement-button, | ||
body.skin-tweeki .oo-ui-inputWidget-input { | body.skin-tweeki .oo-ui-inputWidget-input { | ||
border-radius: | border-radius: 8px; | ||
} | } | ||
| 第266行: | 第276行: | ||
body.skin-tweeki footer, | body.skin-tweeki footer, | ||
body.skin-tweeki .mw-footer { | body.skin-tweeki .mw-footer { | ||
max-width: | max-width: 76rem; | ||
margin: 2. | margin: 2.25rem auto 0; | ||
padding: 1. | padding: 1.1rem 1.25rem; | ||
border-top: 1px solid var(--mucwiki-border); | border-top: 1px solid var(--mucwiki-border); | ||
background: transparent; | background: transparent; | ||
| 第305行: | 第315行: | ||
body.skin-tweeki footer a, | body.skin-tweeki footer a, | ||
body.skin-tweeki .mw-footer a { | body.skin-tweeki .mw-footer a { | ||
display: inline-flex; | |||
align-items: center; | |||
min-height: 1.75rem; | |||
padding: .12rem .18rem; | |||
color: #536070; | color: #536070; | ||
text-decoration: none; | text-decoration: none; | ||
| 第321行: | 第335行: | ||
@media (max-width: 992px) { | @media (max-width: 992px) { | ||
body.skin-tweeki .navbar-collapse { | body.skin-tweeki .navbar-collapse { | ||
margin-top: . | margin-top: .6rem; | ||
padding: . | padding: .65rem; | ||
border: 1px solid var(--mucwiki-border); | border: 1px solid var(--mucwiki-border); | ||
border-radius: | border-radius: 12px; | ||
background: #fff; | background: #fff; | ||
box-shadow: 0 | box-shadow: 0 12px 28px rgba(37, 55, 82, .08); | ||
} | } | ||
| 第337行: | 第351行: | ||
@media (max-width: 720px) { | @media (max-width: 720px) { | ||
body.skin-tweeki #content.mw-body { | body.skin-tweeki #content.mw-body { | ||
margin-top: | margin-top: 1rem; | ||
padding: 1. | padding: 1.1rem .95rem 1.55rem; | ||
border-radius: | border-radius: 10px; | ||
} | } | ||
body.skin-tweeki.page-首页 #content.mw-body { | body.skin-tweeki.page-首页 #content.mw-body { | ||
margin-top: | margin-top: .9rem; | ||
padding: 0 | padding: 0 .88rem 1.5rem; | ||
} | } | ||
body.skin-tweeki #firstHeading { | body.skin-tweeki #firstHeading { | ||
font-size: 1. | font-size: 1.62rem; | ||
} | } | ||
| 第355行: | 第369行: | ||
line-height: 1.72; | line-height: 1.72; | ||
} | } | ||
} | } | ||
2026年6月4日 (四) 04:18的版本
/* Tweeki rehearsal site polish. Loaded only for users selecting the Tweeki skin. */
body.skin-tweeki {
--mucwiki-page: #f7f8fb;
--mucwiki-surface: #ffffff;
--mucwiki-text: #172033;
--mucwiki-muted: #566273;
--mucwiki-border: #d9e2ee;
--mucwiki-border-soft: #e8edf4;
--mucwiki-accent: #245b9f;
--mucwiki-accent-strong: #173f75;
--mucwiki-accent-soft: #edf4ff;
background: #f7f8fb;
color: var(--mucwiki-text);
-webkit-font-smoothing: antialiased;
}
body.skin-tweeki #contentwrapper.with-navbar-fixed {
padding-top: 60px;
}
body.skin-tweeki #maincontentwrapper {
padding-top: 0;
}
body.skin-tweeki .navbar {
min-height: 3.75rem;
border-bottom: 1px solid rgba(198, 208, 222, .85);
background: rgba(255, 255, 255, .96) !important;
box-shadow: 0 1px 0 rgba(17, 24, 39, .02);
}
body.skin-tweeki .navbar .container {
max-width: 76rem;
}
body.skin-tweeki .navbar-brand {
color: #111827;
font-size: 1.18rem;
font-weight: 800;
letter-spacing: 0;
}
body.skin-tweeki .navbar .navbar-nav {
gap: .08rem;
}
body.skin-tweeki .navbar .nav-link,
body.skin-tweeki .navbar .dropdown-toggle {
min-height: 2.25rem;
padding: .42rem .66rem;
border-radius: 8px;
color: #344054;
font-weight: 700;
}
body.skin-tweeki .navbar .nav-link:hover,
body.skin-tweeki .navbar .nav-link:focus,
body.skin-tweeki .navbar .dropdown-toggle:hover,
body.skin-tweeki .navbar .dropdown-toggle:focus {
background: #f1f5f9;
color: var(--mucwiki-accent-strong);
text-decoration: none;
}
body.skin-tweeki .navbar .nav-link.active,
body.skin-tweeki .navbar .nav-item.active > .nav-link {
background: var(--mucwiki-accent-soft);
color: var(--mucwiki-accent-strong);
}
body.skin-tweeki .navbar-toggler {
border-color: #cfd9e7;
border-radius: 8px;
}
body.skin-tweeki .navbar .form-control,
body.skin-tweeki .navbar input[type="search"],
body.skin-tweeki #searchInput {
min-height: 2.35rem;
border-color: #cfd9e7;
border-radius: 9px;
background: #fff;
box-shadow: none;
}
body.skin-tweeki .navbar form {
max-width: 18rem;
}
body.skin-tweeki .navbar .form-control:focus,
body.skin-tweeki .navbar input[type="search"]:focus,
body.skin-tweeki #searchInput:focus {
border-color: #8eb0dc;
box-shadow: 0 0 0 .18rem rgba(49, 95, 158, .16);
}
body.skin-tweeki #siteSub,
body.skin-tweeki #jump-to-nav,
body.skin-tweeki .printfooter {
display: none;
}
body.skin-tweeki #content.mw-body {
max-width: 76rem;
margin: 1.7rem auto 0;
padding: 2rem 2.25rem 2.5rem;
border: 1px solid var(--mucwiki-border-soft);
border-radius: 12px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 1px 2px rgba(37, 55, 82, .04);
}
body.skin-tweeki #bodyContent {
max-width: 68rem;
margin: 0 auto;
}
body.skin-tweeki .mw-parser-output {
max-width: 64rem;
margin: 0 auto;
color: var(--mucwiki-text);
font-size: 1rem;
line-height: 1.78;
}
body.skin-tweeki:not(.page-首页) .mw-parser-output {
max-width: 58rem;
}
body.skin-tweeki #firstHeading {
max-width: 58rem;
margin: 0 auto 1rem;
color: #0f172a;
font-size: 2rem;
font-weight: 800;
line-height: 1.18;
text-align: left;
}
body.skin-tweeki.page-首页 #content.mw-body,
body.skin-tweeki.page-首页 #bodyContent,
body.skin-tweeki.page-首页 .mw-parser-output {
max-width: 76rem;
}
body.skin-tweeki.page-首页 #content.mw-body {
margin-top: 1.45rem;
padding: 0 1.25rem 2.1rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.skin-tweeki.page-首页 .mw-parser-output {
margin-top: 0;
}
body.skin-tweeki .mw-parser-output h2 {
margin-top: 1.55rem;
padding-bottom: .3rem;
border-bottom: 1px solid var(--mucwiki-border);
color: #111827;
font-size: 1.42rem;
font-weight: 800;
}
body.skin-tweeki .mw-parser-output h3 {
margin-top: 1.18rem;
color: #172033;
font-size: 1.12rem;
font-weight: 800;
}
body.skin-tweeki .mw-parser-output p,
body.skin-tweeki .mw-parser-output li {
color: #253044;
}
body.skin-tweeki .mw-parser-output a {
color: #075fc7;
text-decoration: underline;
}
body.skin-tweeki .mw-parser-output a:hover,
body.skin-tweeki .mw-parser-output a:focus {
color: #064b9c;
}
body.skin-tweeki .mw-parser-output ul,
body.skin-tweeki .mw-parser-output ol {
padding-left: 1.35rem;
}
body.skin-tweeki .mw-parser-output blockquote,
body.skin-tweeki .mw-parser-output pre,
body.skin-tweeki .mw-parser-output .toc,
body.skin-tweeki .mw-parser-output #toc,
body.skin-tweeki .catlinks,
body.skin-tweeki .mw-search-profile-tabs,
body.skin-tweeki .searchresults,
body.skin-tweeki .mw-search-createlink,
body.skin-tweeki .mw-warning-with-logexcerpt,
body.skin-tweeki .mw-rcfilters-ui-filterTagMultiselectWidget,
body.skin-tweeki .mw-rcfilters-ui-filterWrapperWidget,
body.skin-tweeki .mw-recentchanges-toplinks,
body.skin-tweeki .oo-ui-panelLayout-framed {
border-color: var(--mucwiki-border);
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(37, 55, 82, .035);
}
body.skin-tweeki .mw-parser-output blockquote {
padding: .85rem 1rem;
border-left: 4px solid #8eb0dc;
}
body.skin-tweeki .mw-parser-output pre {
padding: 1rem;
}
body.skin-tweeki .mw-parser-output .wikitable {
overflow: hidden;
border-color: var(--mucwiki-border);
border-radius: 8px;
background: #fff;
}
body.skin-tweeki .mw-parser-output .wikitable th {
background: #f1f5fb;
color: #172033;
}
body.skin-tweeki .mw-parser-output img {
max-width: 100%;
height: auto;
}
body.skin-tweeki input[type="text"],
body.skin-tweeki input[type="search"],
body.skin-tweeki input[type="password"],
body.skin-tweeki input[type="email"],
body.skin-tweeki select,
body.skin-tweeki textarea {
border-color: #cfd9e7;
border-radius: 8px;
background: #fff;
box-shadow: none;
}
body.skin-tweeki input[type="text"]:focus,
body.skin-tweeki input[type="search"]:focus,
body.skin-tweeki input[type="password"]:focus,
body.skin-tweeki input[type="email"]:focus,
body.skin-tweeki select:focus,
body.skin-tweeki textarea:focus {
border-color: #8eb0dc;
box-shadow: 0 0 0 .18rem rgba(49, 95, 158, .16);
}
body.skin-tweeki .btn,
body.skin-tweeki button,
body.skin-tweeki input[type="button"],
body.skin-tweeki input[type="submit"] {
border-radius: 8px;
font-weight: 700;
}
body.skin-tweeki .oo-ui-buttonElement-button,
body.skin-tweeki .oo-ui-inputWidget-input {
border-radius: 8px;
}
body.skin-tweeki #footer,
body.skin-tweeki footer,
body.skin-tweeki .mw-footer {
max-width: 76rem;
margin: 2.25rem auto 0;
padding: 1.1rem 1.25rem;
border-top: 1px solid var(--mucwiki-border);
background: transparent;
background-color: transparent !important;
color: var(--mucwiki-muted);
font-size: .92rem;
}
body.skin-tweeki #footer.footer,
body.skin-tweeki #footer.bg-light,
body.skin-tweeki footer.footer,
body.skin-tweeki footer.bg-light {
background: transparent;
background-color: transparent !important;
}
body.skin-tweeki #footer ul,
body.skin-tweeki footer ul,
body.skin-tweeki .mw-footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .45rem 1rem;
margin: 0;
padding: 0;
list-style: none;
}
body.skin-tweeki #footer li,
body.skin-tweeki footer li,
body.skin-tweeki .mw-footer li {
margin: 0;
}
body.skin-tweeki #footer a,
body.skin-tweeki footer a,
body.skin-tweeki .mw-footer a {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
padding: .12rem .18rem;
color: #536070;
text-decoration: none;
}
body.skin-tweeki #footer a:hover,
body.skin-tweeki #footer a:focus,
body.skin-tweeki footer a:hover,
body.skin-tweeki footer a:focus,
body.skin-tweeki .mw-footer a:hover,
body.skin-tweeki .mw-footer a:focus {
color: #075fc7;
text-decoration: underline;
}
@media (max-width: 992px) {
body.skin-tweeki .navbar-collapse {
margin-top: .6rem;
padding: .65rem;
border: 1px solid var(--mucwiki-border);
border-radius: 12px;
background: #fff;
box-shadow: 0 12px 28px rgba(37, 55, 82, .08);
}
body.skin-tweeki .navbar form {
max-width: none;
margin-top: .6rem;
}
}
@media (max-width: 720px) {
body.skin-tweeki #content.mw-body {
margin-top: 1rem;
padding: 1.1rem .95rem 1.55rem;
border-radius: 10px;
}
body.skin-tweeki.page-首页 #content.mw-body {
margin-top: .9rem;
padding: 0 .88rem 1.5rem;
}
body.skin-tweeki #firstHeading {
font-size: 1.62rem;
}
body.skin-tweeki .mw-parser-output {
font-size: .98rem;
line-height: 1.72;
}
}
body.skin-tweeki .navbar a,
body.skin-tweeki .mucwiki-home-card a,
body.skin-tweeki .mucwiki-home-link-cloud a,
body.skin-tweeki .mucwiki-home-stat a {
text-decoration: none;
}
body.skin-tweeki .mucwiki-home-card a:hover,
body.skin-tweeki .mucwiki-home-card a:focus,
body.skin-tweeki .mucwiki-home-link-cloud a:hover,
body.skin-tweeki .mucwiki-home-link-cloud a:focus,
body.skin-tweeki .mucwiki-home-stat a:hover,
body.skin-tweeki .mucwiki-home-stat a:focus {
text-decoration: underline;
}