mediawiki-skins-Citizen/resources/skins.citizen.styles/skinning/elements.less

206 lines
2.9 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 {
color: var( --color-link--hover );
}
&:active {
color: var( --color-link--active );
}
&:hover,
&:focus {
text-decoration: underline;
}
}
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 {
margin: var( --space-md ) 0;
border: 0;
border-top: var( --border-width-base ) solid var( --border-color-base );
}
/* 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;
font-weight: var( --font-weight-semi-bold );
line-height: var( --line-height-xxx-small );
color: var( --color-emphasized );
}
h1,
h2 {
margin-top: 2em;
}
h3,
h4 {
margin-top: 1.5em;
}
h5,
h6 {
margin-top: 1.25em;
}
h1 {
font-size: var( --font-size-xxx-large );
}
h2 {
font-size: var( --font-size-xx-large );
}
h3 {
font-size: var( --font-size-x-large );
}
h4 {
font-size: var( --font-size-large );
}
h5 {
font-size: var( --font-size-medium );
}
h6 {
font-size: var( --font-size-medium );
}
p {
margin: var( --space-md ) 0;
overflow-wrap: break-word; // Force wrap to preserve layout
}
p img {
margin: 0;
}
ol {
padding: 0;
margin: var( --space-md ) 0 var( --space-md ) var( --space-xxl );
}
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-xxl );
}
ol,
ul {
ol,
ul {
margin-top: 0;
margin-bottom: 0;
}
}
dt {
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}
dl {
margin: var( --space-md ) 0;
}
dd {
margin-left: var( --space-lg );
}
pre,
code,
tt,
kbd,
samp,
.mw-code {
font-family: var( --font-family-monospace );
font-size: var( --font-size-small );
}
pre,
code,
.mw-code {
color: var( --color-emphasized );
background-color: var( --color-surface-2 );
border: var( --border-width-base ) solid var( --border-color-base );
}
code {
padding: 2px 4px;
border-radius: var( --border-radius-base );
}
pre,
.mw-code {
padding: 1rem;
overflow: auto;
border-radius: var( --border-radius-large );
}
/* Forms */
fieldset {
padding: var( --space-xs ) var( --space-md );
margin: var( --space-md ) 0;
border: var( --border-width-base ) solid var( --border-color-base );
}
legend {
padding: var( --space-xxs );
color: var( --color-subtle );
letter-spacing: 0.05em;
}
/* Figure */
figure {
margin: 0;
}
/* Emulate Center */
.center {
width: 100%;
text-align: center;
}
*.center * {
margin-inline: auto;
}