mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-11 05:56:16 +00:00
00b2495c1a
- Move border radius calculation to CSS variable instead of LESS - Rename CSS variable according to Codex, soft-deprecating the existing border radius
207 lines
2.8 KiB
Plaintext
207 lines
2.8 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: 1px 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-semibold );
|
|
line-height: var( --line-height-xs );
|
|
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-semibold );
|
|
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: 1px 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: 1px 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-right: auto;
|
|
margin-left: auto;
|
|
}
|