MediaWiki:Citizen.css:修订间差异
MediaWiki界面页面
更多操作
style: adapt Citizen skin for MUC Wiki |
style: refine Citizen footer and page actions |
||
| 第130行: | 第130行: | ||
.skin-citizen.page-首页 #firstHeading, | .skin-citizen.page-首页 #firstHeading, | ||
.skin-citizen.page-首页 #siteSub, | .skin-citizen.page-首页 #siteSub, | ||
.skin-citizen.page-首页 .citizen-page-heading | .skin-citizen.page-首页 .citizen-page-heading { | ||
display: none; | display: none; | ||
} | } | ||
| 第145行: | 第144行: | ||
.skin-citizen .mucwiki-home { | .skin-citizen .mucwiki-home { | ||
margin-top: .25rem; | margin-top: .25rem; | ||
} | |||
.skin-citizen .citizen-page-actions .cdx-button, | |||
.skin-citizen .citizen-page-actions .cdx-button--fake-button { | |||
border-radius: 8px; | |||
} | |||
.skin-citizen .citizen-page-actions .cdx-button:hover, | |||
.skin-citizen .citizen-page-actions .cdx-button:focus, | |||
.skin-citizen .citizen-page-actions .cdx-button--fake-button:hover, | |||
.skin-citizen .citizen-page-actions .cdx-button--fake-button:focus { | |||
background: #fff7f5; | |||
color: var(--mucwiki-red-deep); | |||
} | |||
.skin-citizen.page-首页 .citizen-page-header { | |||
display: flex; | |||
min-height: 0; | |||
margin: .12rem 0 .6rem; | |||
padding: 0; | |||
border: 0; | |||
} | |||
.skin-citizen.page-首页 .citizen-page-header-inner { | |||
width: 100%; | |||
min-height: 0; | |||
justify-content: flex-end; | |||
} | |||
.skin-citizen.page-首页 .citizen-page-actions { | |||
width: auto; | |||
margin-left: auto; | |||
} | |||
.skin-citizen.page-首页 .citizen-page-actions > :not(#p-views), | |||
.skin-citizen.page-首页 .citizen-page-actions .citizen-menu:not(#p-views) { | |||
display: none; | |||
} | |||
.skin-citizen.page-首页 #p-views { | |||
display: block; | |||
} | |||
.skin-citizen.page-首页 #p-views .citizen-menu__heading { | |||
display: none; | |||
} | |||
.skin-citizen.page-首页 #p-views .citizen-menu__content-list { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: .28rem; | |||
justify-content: flex-end; | |||
} | |||
.skin-citizen.page-首页 #p-views .mw-list-item { | |||
margin: 0; | |||
} | |||
.skin-citizen.page-首页 #p-views a { | |||
min-height: 2rem; | |||
padding: .26rem .58rem; | |||
border: 1px solid #eaded7; | |||
border-radius: 999px; | |||
background: #fffdfa; | |||
color: var(--mucwiki-red-deep); | |||
font-size: .88rem; | |||
line-height: 1.2; | |||
} | |||
.skin-citizen.page-首页 #p-views a:hover, | |||
.skin-citizen.page-首页 #p-views a:focus { | |||
border-color: #d7b7ae; | |||
background: #fff3f4; | |||
} | |||
.skin-citizen .citizen-page-footer { | |||
margin-top: 2rem; | |||
padding-top: 1rem; | |||
border-top: 1px solid #eee7df; | |||
color: var(--mucwiki-muted); | |||
} | |||
.skin-citizen .citizen-page-footer__item, | |||
.skin-citizen .citizen-page-footer p { | |||
font-size: .92rem; | |||
line-height: 1.55; | |||
} | |||
.skin-citizen .citizen-footer { | |||
margin-top: 2.25rem; | |||
padding: 1.45rem 0 1.2rem; | |||
border-top: 1px solid #eee7df; | |||
background: #fffdfa; | |||
} | |||
.skin-citizen .citizen-footer__container { | |||
padding-top: 0; | |||
} | |||
.skin-citizen .citizen-footer__content { | |||
display: grid; | |||
grid-template-columns: minmax(16rem, 1fr) minmax(22rem, auto); | |||
gap: 1rem 2rem; | |||
align-items: start; | |||
} | |||
.skin-citizen .citizen-footer__siteinfo { | |||
gap: .62rem; | |||
} | |||
.skin-citizen .citizen-footer__sitetitle { | |||
color: var(--mucwiki-ink); | |||
} | |||
.skin-citizen .citizen-footer__desc { | |||
display: none; | |||
} | |||
.skin-citizen .citizen-footer__places { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: .42rem .55rem; | |||
justify-content: flex-end; | |||
} | |||
.skin-citizen .citizen-footer__places li { | |||
margin: 0; | |||
} | |||
.skin-citizen .citizen-footer__places a { | |||
display: inline-flex; | |||
min-height: 2rem; | |||
align-items: center; | |||
padding: .24rem .58rem; | |||
border: 1px solid transparent; | |||
border-radius: 999px; | |||
color: #39434d; | |||
font-size: .92rem; | |||
line-height: 1.2; | |||
} | |||
.skin-citizen .citizen-footer__places a:hover, | |||
.skin-citizen .citizen-footer__places a:focus { | |||
border-color: #eaded7; | |||
background: #fff; | |||
color: var(--mucwiki-red-deep); | |||
text-decoration: none; | |||
} | |||
.skin-citizen .citizen-footer__bottom { | |||
display: flex; | |||
gap: 1rem; | |||
align-items: center; | |||
justify-content: space-between; | |||
margin-top: 1rem; | |||
padding-top: .88rem; | |||
border-top: 1px solid #eee7df; | |||
color: var(--mucwiki-muted); | |||
font-size: .88rem; | |||
} | |||
.skin-citizen .citizen-footer__bottom ul { | |||
margin: 0; | |||
} | |||
.skin-citizen .citizen-footer__bottom .footer-icons, | |||
.skin-citizen .citizen-footer__bottom #footer-icons { | |||
opacity: .72; | |||
} | } | ||
| 第150行: | 第317行: | ||
.skin-citizen .mw-parser-output .wikitable { | .skin-citizen .mw-parser-output .wikitable { | ||
font-size: .9em; | font-size: .9em; | ||
} | |||
.skin-citizen.page-首页 .citizen-page-header { | |||
margin-bottom: .5rem; | |||
} | |||
.skin-citizen.page-首页 .citizen-page-header-inner, | |||
.skin-citizen.page-首页 .citizen-page-actions { | |||
justify-content: flex-start; | |||
} | |||
.skin-citizen.page-首页 #p-views .citizen-menu__content-list { | |||
justify-content: flex-start; | |||
} | |||
.skin-citizen.page-首页 #p-views a { | |||
border-radius: 8px; | |||
} | |||
.skin-citizen .citizen-page-footer { | |||
margin-top: 1.35rem; | |||
} | |||
.skin-citizen .citizen-footer { | |||
margin-top: 1.45rem; | |||
padding: 1.1rem 0 1rem; | |||
} | |||
.skin-citizen .citizen-footer__content { | |||
grid-template-columns: minmax(0, 1fr); | |||
gap: .9rem; | |||
} | |||
.skin-citizen .citizen-footer__places { | |||
justify-content: flex-start; | |||
} | |||
.skin-citizen .citizen-footer__bottom { | |||
display: grid; | |||
gap: .78rem; | |||
justify-content: stretch; | |||
} | } | ||
} | } | ||
2026年6月14日 (日) 10:51的版本
:root {
--color-primary__h: 352;
--color-primary__s: 66%;
--color-primary__l: 34%;
--mucwiki-red: #8f1d2c;
--mucwiki-red-deep: #67151f;
--mucwiki-red-soft: #fff3f4;
--mucwiki-green: #2e6b57;
--mucwiki-ink: #202122;
--mucwiki-muted: #656f7a;
--mucwiki-line: #e1e5ea;
--mucwiki-surface: #fff;
--mucwiki-surface-soft: #f8f6f2;
}
:root.skin-citizen-light,
:root.skin-theme-clientpref-day {
--color-surface-0: #fff;
--color-surface-1: #fff;
--color-surface-2: #faf8f4;
--color-surface-3: #ece7df;
--color-surface-4: #d6cec3;
--color-base: #202122;
--color-base--emphasized: #15191d;
--color-base--subtle: #656f7a;
}
@media (prefers-color-scheme: light) {
:root.skin-theme-clientpref-os {
--color-surface-0: #fff;
--color-surface-1: #fff;
--color-surface-2: #faf8f4;
--color-surface-3: #ece7df;
--color-surface-4: #d6cec3;
--color-base: #202122;
--color-base--emphasized: #15191d;
--color-base--subtle: #656f7a;
}
}
body.skin-citizen {
letter-spacing: 0;
}
.skin-citizen .mw-parser-output {
line-height: 1.72;
}
.skin-citizen .mw-parser-output > p {
margin: .72em 0 1em;
}
.skin-citizen .mw-parser-output a {
text-underline-offset: .16em;
}
.skin-citizen .mw-parser-output h2,
.skin-citizen .mw-parser-output h3,
.skin-citizen .mw-parser-output h4 {
letter-spacing: 0;
}
.skin-citizen .mw-parser-output .wikitable {
width: auto;
max-width: 100%;
margin: 1em 0 1.35em;
border-color: var(--mucwiki-line);
border-collapse: collapse;
background: var(--mucwiki-surface);
font-size: .95em;
line-height: 1.55;
}
.skin-citizen .mw-parser-output .wikitable th,
.skin-citizen .mw-parser-output .wikitable td {
border-color: var(--mucwiki-line);
padding: .48em .68em;
vertical-align: top;
}
.skin-citizen .mw-parser-output .wikitable th {
background: #f5f1eb;
color: #2d2521;
font-weight: 700;
}
.skin-citizen .muc-curriculum-table {
margin: 1em 0 1.45em;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.skin-citizen .muc-curriculum-table__table.wikitable {
width: max-content;
max-width: none;
margin: 0;
}
.skin-citizen .muc-curriculum-portal,
.skin-citizen .muc-curriculum-nav {
margin: 1em 0 1.35em;
padding: .78em .92em;
border: 1px solid #ead8d3;
border-left: 4px solid var(--mucwiki-red);
border-radius: 8px;
background: var(--mucwiki-red-soft);
}
.skin-citizen .muc-curriculum-summary.wikitable {
min-width: min(34em, 100%);
}
.skin-citizen .plainlinks,
.skin-citizen .mw-parser-output .external {
overflow-wrap: anywhere;
}
.skin-citizen .mw-parser-output .thumbinner {
border-color: var(--mucwiki-line);
border-radius: 8px;
background: #fff;
}
.skin-citizen .mw-parser-output .thumbcaption {
color: var(--mucwiki-muted);
font-size: .88em;
line-height: 1.5;
}
.skin-citizen.page-首页 #firstHeading,
.skin-citizen.page-首页 #siteSub,
.skin-citizen.page-首页 .citizen-page-heading {
display: none;
}
.skin-citizen.page-首页 .citizen-body {
padding-top: .25rem;
}
.skin-citizen.page-首页 .mw-parser-output {
line-height: 1.6;
}
.skin-citizen .mucwiki-home {
margin-top: .25rem;
}
.skin-citizen .citizen-page-actions .cdx-button,
.skin-citizen .citizen-page-actions .cdx-button--fake-button {
border-radius: 8px;
}
.skin-citizen .citizen-page-actions .cdx-button:hover,
.skin-citizen .citizen-page-actions .cdx-button:focus,
.skin-citizen .citizen-page-actions .cdx-button--fake-button:hover,
.skin-citizen .citizen-page-actions .cdx-button--fake-button:focus {
background: #fff7f5;
color: var(--mucwiki-red-deep);
}
.skin-citizen.page-首页 .citizen-page-header {
display: flex;
min-height: 0;
margin: .12rem 0 .6rem;
padding: 0;
border: 0;
}
.skin-citizen.page-首页 .citizen-page-header-inner {
width: 100%;
min-height: 0;
justify-content: flex-end;
}
.skin-citizen.page-首页 .citizen-page-actions {
width: auto;
margin-left: auto;
}
.skin-citizen.page-首页 .citizen-page-actions > :not(#p-views),
.skin-citizen.page-首页 .citizen-page-actions .citizen-menu:not(#p-views) {
display: none;
}
.skin-citizen.page-首页 #p-views {
display: block;
}
.skin-citizen.page-首页 #p-views .citizen-menu__heading {
display: none;
}
.skin-citizen.page-首页 #p-views .citizen-menu__content-list {
display: flex;
flex-wrap: wrap;
gap: .28rem;
justify-content: flex-end;
}
.skin-citizen.page-首页 #p-views .mw-list-item {
margin: 0;
}
.skin-citizen.page-首页 #p-views a {
min-height: 2rem;
padding: .26rem .58rem;
border: 1px solid #eaded7;
border-radius: 999px;
background: #fffdfa;
color: var(--mucwiki-red-deep);
font-size: .88rem;
line-height: 1.2;
}
.skin-citizen.page-首页 #p-views a:hover,
.skin-citizen.page-首页 #p-views a:focus {
border-color: #d7b7ae;
background: #fff3f4;
}
.skin-citizen .citizen-page-footer {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #eee7df;
color: var(--mucwiki-muted);
}
.skin-citizen .citizen-page-footer__item,
.skin-citizen .citizen-page-footer p {
font-size: .92rem;
line-height: 1.55;
}
.skin-citizen .citizen-footer {
margin-top: 2.25rem;
padding: 1.45rem 0 1.2rem;
border-top: 1px solid #eee7df;
background: #fffdfa;
}
.skin-citizen .citizen-footer__container {
padding-top: 0;
}
.skin-citizen .citizen-footer__content {
display: grid;
grid-template-columns: minmax(16rem, 1fr) minmax(22rem, auto);
gap: 1rem 2rem;
align-items: start;
}
.skin-citizen .citizen-footer__siteinfo {
gap: .62rem;
}
.skin-citizen .citizen-footer__sitetitle {
color: var(--mucwiki-ink);
}
.skin-citizen .citizen-footer__desc {
display: none;
}
.skin-citizen .citizen-footer__places {
display: flex;
flex-wrap: wrap;
gap: .42rem .55rem;
justify-content: flex-end;
}
.skin-citizen .citizen-footer__places li {
margin: 0;
}
.skin-citizen .citizen-footer__places a {
display: inline-flex;
min-height: 2rem;
align-items: center;
padding: .24rem .58rem;
border: 1px solid transparent;
border-radius: 999px;
color: #39434d;
font-size: .92rem;
line-height: 1.2;
}
.skin-citizen .citizen-footer__places a:hover,
.skin-citizen .citizen-footer__places a:focus {
border-color: #eaded7;
background: #fff;
color: var(--mucwiki-red-deep);
text-decoration: none;
}
.skin-citizen .citizen-footer__bottom {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
padding-top: .88rem;
border-top: 1px solid #eee7df;
color: var(--mucwiki-muted);
font-size: .88rem;
}
.skin-citizen .citizen-footer__bottom ul {
margin: 0;
}
.skin-citizen .citizen-footer__bottom .footer-icons,
.skin-citizen .citizen-footer__bottom #footer-icons {
opacity: .72;
}
@media screen and (max-width: 720px) {
.skin-citizen .mw-parser-output .wikitable {
font-size: .9em;
}
.skin-citizen.page-首页 .citizen-page-header {
margin-bottom: .5rem;
}
.skin-citizen.page-首页 .citizen-page-header-inner,
.skin-citizen.page-首页 .citizen-page-actions {
justify-content: flex-start;
}
.skin-citizen.page-首页 #p-views .citizen-menu__content-list {
justify-content: flex-start;
}
.skin-citizen.page-首页 #p-views a {
border-radius: 8px;
}
.skin-citizen .citizen-page-footer {
margin-top: 1.35rem;
}
.skin-citizen .citizen-footer {
margin-top: 1.45rem;
padding: 1.1rem 0 1rem;
}
.skin-citizen .citizen-footer__content {
grid-template-columns: minmax(0, 1fr);
gap: .9rem;
}
.skin-citizen .citizen-footer__places {
justify-content: flex-start;
}
.skin-citizen .citizen-footer__bottom {
display: grid;
gap: .78rem;
justify-content: stretch;
}
}