mediawiki-skins-Citizen/resources/skins.citizen.styles/common/common.less
alistair3149 c88df2d194
feat(tokens): deprecate old font-weight-semibold variables
Old variables are being deprecated to align naming convention with Codex.
They will be hard-deprecated on the next major Citizen version.
2024-10-23 17:34:41 -04:00

187 lines
2.8 KiB
Plaintext

/*
* Framework
*/
html {
box-sizing: border-box;
}
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;
border-color: var( --border-color-base );
border-style: solid;
border-width: 0;
}
:focus {
outline-color: var( --color-progressive );
}
// For some reason just overriding the outline-color is not enough
:focus-visible {
outline: var( --border-width-thick ) solid var( --color-progressive );
outline-offset: 1px;
}
::placeholder {
color: var( --color-subtle );
}
::selection {
color: var( --color-inverted-primary );
background-color: var( --color-progressive );
}
input,
select,
textarea {
color: var( --color-emphasized );
background-color: transparent;
border: var( --border-width-base ) 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-semi-bold );
color: var( --color-emphasized );
}
/* Remove outer margin in table cell */
th,
td {
> p,
> ul,
> ol {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.hidden,
.sr-only {
.sr-only;
}
.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: var( --border-width-base ) 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
}
}