217 行
3.1 KiB
Plaintext
217 行
3.1 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* Module: mediawiki.skinning.elements
|
|
* Version: REL1_39
|
|
*
|
|
* Date: 2022-11-14
|
|
*/
|
|
|
|
/* Links */
|
|
// Some of the link styles are handled in content.links
|
|
a {
|
|
color: var( --color-link );
|
|
text-decoration: none;
|
|
|
|
&:not( [ href ] ) {
|
|
cursor: pointer; /* Always cursor:pointer even without href */
|
|
}
|
|
|
|
&:hover,
|
|
&:visited:hover {
|
|
color: var( --color-link--hover );
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:active {
|
|
color: var( --color-link--active );
|
|
}
|
|
|
|
&:visited {
|
|
color: var( --color-link--visited );
|
|
}
|
|
}
|
|
|
|
a:lang( ar ),
|
|
a:lang( kk-arab ),
|
|
a:lang( mzn ),
|
|
a:lang( ps ),
|
|
a:lang( ur ) {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Inline Elements */
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid var( --border-color-base );
|
|
margin: var( --space-md ) 0;
|
|
}
|
|
|
|
/* Structural Elements */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
// It seems that many wikis have the expectation that headers have a bottom margin
|
|
margin-bottom: 0.25em;
|
|
color: var( --color-base--emphasized );
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-weight: var( --font-weight-bold );
|
|
}
|
|
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: var( --font-weight-semibold );
|
|
line-height: var( --line-height-xs );
|
|
}
|
|
|
|
h3,
|
|
h4 {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
h5,
|
|
h6 {
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 2em;
|
|
font-size: var( --font-size-h1 );
|
|
}
|
|
|
|
h2 {
|
|
border-bottom: 1px solid var( --border-color-base );
|
|
margin-bottom: 0.5em;
|
|
font-size: var( --font-size-h2 );
|
|
}
|
|
|
|
h3 {
|
|
font-size: var( --font-size-h3 );
|
|
}
|
|
|
|
h4 {
|
|
font-size: var( --font-size-h4 );
|
|
}
|
|
|
|
h5 {
|
|
font-size: var( --font-size-h5 );
|
|
}
|
|
|
|
h6 {
|
|
font-size: var( --font-size-h6 );
|
|
}
|
|
|
|
p {
|
|
margin: var( --space-md ) 0;
|
|
overflow-wrap: break-word; // Force wrap to preserve layout
|
|
}
|
|
|
|
p img {
|
|
margin: 0;
|
|
}
|
|
|
|
ul {
|
|
// Will break a lot of styles if we use padding for horizontal spacing
|
|
padding: 0;
|
|
margin: var( --space-md ) 0 var( --space-md ) var( --space-lg );
|
|
}
|
|
|
|
ol {
|
|
padding: 0;
|
|
margin: var( --space-md ) 0 var( --space-md ) var( --space-lg );
|
|
}
|
|
|
|
dt {
|
|
color: var( --color-base--emphasized );
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
|
|
dl {
|
|
margin: var( --space-md ) 0;
|
|
}
|
|
|
|
dd {
|
|
margin-left: var( --space-lg );
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
tt,
|
|
kbd,
|
|
samp,
|
|
.mw-code {
|
|
font-family: var( --fonts-monospace );
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
.mw-code {
|
|
border: 1px solid var( --border-color-base );
|
|
background-color: var( --color-surface-2 );
|
|
color: var( --color-base--emphasized );
|
|
}
|
|
|
|
code {
|
|
padding: 2px 4px;
|
|
border-radius: var( --border-radius--small );
|
|
}
|
|
|
|
pre,
|
|
.mw-code {
|
|
overflow: auto;
|
|
padding: 1rem;
|
|
border-radius: var( --border-radius--large );
|
|
}
|
|
|
|
/* Tables */
|
|
// Add some responsiveness
|
|
// TODO: Consider adding a wrapper to make it truly responsive like Timeless
|
|
table {
|
|
overflow: auto;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
/* Forms */
|
|
fieldset {
|
|
padding: var( --space-xs ) var( --space-md );
|
|
border: 1px solid var( --border-color-base );
|
|
margin: var( --space-md ) 0;
|
|
}
|
|
|
|
legend {
|
|
padding: var( --space-xxs );
|
|
color: var( --color-base--subtle );
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Figure */
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Emulate Center */
|
|
.center {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
*.center * {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|