mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-25 14:57:31 +00:00
5d3ecd9edd
This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info.
179 lines
2.8 KiB
Plaintext
179 lines
2.8 KiB
Plaintext
/*
|
|
* Framework
|
|
*/
|
|
html {
|
|
box-sizing: border-box;
|
|
// Not ideal but it works
|
|
scroll-padding-top: 6rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
min-height: 100vh;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var( --color-base );
|
|
accent-color: var( --color-progressive );
|
|
background: var( --color-surface-0 );
|
|
}
|
|
|
|
// Apply border-box universally unless overwritten
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
:focus {
|
|
outline-color: var( --color-progressive );
|
|
}
|
|
|
|
// For some reason just overriding the outline-color is not enough
|
|
:focus-visible {
|
|
outline: 2px solid var( --color-progressive );
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
color: var( --color-emphasized );
|
|
background-color: transparent;
|
|
border: 1px solid var( --border-color-interactive );
|
|
}
|
|
|
|
select option {
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
blockquote {
|
|
margin: var( --space-md );
|
|
color: var( --color-subtle );
|
|
|
|
cite {
|
|
display: block;
|
|
margin-top: var( --space-sm );
|
|
|
|
&::before {
|
|
content: '— ';
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
font-family: var( --font-family-base );
|
|
}
|
|
|
|
sup,
|
|
sub {
|
|
line-height: 1;
|
|
}
|
|
|
|
th {
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
|
|
td {
|
|
> p,
|
|
> ul,
|
|
> ol {
|
|
&:first-child {
|
|
margin-top: 0; // Remove margin for the first element in td
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
.hidden();
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.citizen-button {
|
|
padding: 0;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
/*
|
|
* Content
|
|
*/
|
|
.mw-body,
|
|
.parsoid-body {
|
|
direction: ltr;
|
|
}
|
|
|
|
// TODO: Think of better places to put indicators;
|
|
.mw-indicators {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 10px;
|
|
margin-left: 10px;
|
|
font-size: var( --font-size-small );
|
|
border-left: 1px solid var( --border-color-base );
|
|
}
|
|
|
|
.mw-indicator {
|
|
filter: var( --filter-invert );
|
|
}
|
|
|
|
#mw-indicator-mw-helplink a {
|
|
font-size: 0; /* Hide the text because the color is weird */
|
|
}
|
|
|
|
video {
|
|
max-width: 100%; // Prevent overflow
|
|
}
|
|
|
|
.skin-theme-clientpref-night {
|
|
.mw-indicator {
|
|
// Have to hardcode the color since the filter breaks the color
|
|
a {
|
|
color: @color-primary;
|
|
|
|
&:hover {
|
|
color: @color-primary--hover;
|
|
}
|
|
|
|
&:active {
|
|
color: @color-primary--active;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( hover: none ) {
|
|
a,
|
|
button,
|
|
label {
|
|
// Remove the 300ms delay in click event (T118509)
|
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
touch-action: manipulation;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
.mw-body,
|
|
.parsoid-body {
|
|
overflow-x: hidden; // fallback if clip is not supported
|
|
overflow-x: clip; // avoid breaking layout in smaller screen sizes
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-tablet ) {
|
|
// Delay scroll animation won't happen on load
|
|
// Use it only for larger viewport as it is very costly
|
|
// on mobile devices
|
|
html.citizen-animations-ready {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|