mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-29 00:31:09 +00:00
1bce8921d0
Often on long pages, smooth scrolling is causing unexpected behaviors and performance issues. For example, it refuses to scroll to the target, or triggers lazyloaded content when not needed. Fixes: #883
169 lines
2.5 KiB
Plaintext
169 lines
2.5 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)
|
|
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
|
|
}
|
|
}
|