mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-14 07:21:41 +00:00
c88df2d194
Old variables are being deprecated to align naming convention with Codex. They will be hard-deprecated on the next major Citizen version.
86 lines
1.9 KiB
Plaintext
86 lines
1.9 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* SkinStyles for Extension:PortableInfobox
|
|
* Module: ext.PortableInfobox.styles
|
|
* Version: 0.6 16a77dc
|
|
*
|
|
* Date: 2024-04-17
|
|
*/
|
|
|
|
:root {
|
|
--pi-background: var( --color-surface-2 );
|
|
--pi-border-color: var( --border-color-base );
|
|
--pi-secondary-background: var( --color-surface-3 );
|
|
--pi-margin: var( --space-md );
|
|
}
|
|
|
|
.pi-caption {
|
|
font-size: var( --font-size-x-small );
|
|
font-style: normal;
|
|
// Align with Citizen caption styles
|
|
color: var( --color-subtle );
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.portable-infobox {
|
|
font-size: var( --font-size-small );
|
|
}
|
|
|
|
.portable-infobox .pi-title {
|
|
font-size: var( --font-size-x-large );
|
|
line-height: var( --line-height-xx-small );
|
|
}
|
|
|
|
.portable-infobox .pi-header {
|
|
font-size: var( --font-size-medium );
|
|
font-weight: var( --font-weight-semi-bold );
|
|
line-height: var( --line-height-xx-small );
|
|
}
|
|
|
|
.client-js .pi-collapse {
|
|
.pi-header:first-child {
|
|
// So that clicking the header won't highlight the entire section
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.portable-infobox p {
|
|
margin: var( --space-xs ) 0; // More akin to Vector
|
|
}
|
|
|
|
.portable-infobox .pi-horizontal-group {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.portable-infobox .pi-section-navigation,
|
|
.portable-infobox .pi-media-collection-tabs {
|
|
padding-bottom: 0;
|
|
background-color: var( --color-surface-3 );
|
|
}
|
|
|
|
.pi-section-navigation .pi-section-tab.pi-section-active,
|
|
.pi-section-navigation .pi-section-tab.current,
|
|
.pi-media-collection .pi-tab-link.current {
|
|
background: var( --color-surface-2 );
|
|
border-color: var( --color-progressive );
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
.pi-section-navigation .pi-section-tab,
|
|
.pi-media-collection .pi-tab-link {
|
|
margin: 0 4px;
|
|
background: var( --color-surface-2 );
|
|
border-width: 2px;
|
|
border-top-left-radius: var( --border-radius-medium );
|
|
border-top-right-radius: var( --border-radius-medium );
|
|
|
|
&:hover {
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
&:active {
|
|
border-color: var( --color-progressive--active );
|
|
}
|
|
}
|