父节点
6146b398d0
当前提交
91b5b40f7f
|
|
@ -6,11 +6,11 @@
|
|||
@import 'variables.less';
|
||||
|
||||
.citizen-card( @border-radius: true ) {
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
|
||||
& when ( @border-radius ) {
|
||||
border-radius: var(--border-radius--medium);
|
||||
border-radius: var( --border-radius--medium );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,8 +69,8 @@
|
|||
left: 0;
|
||||
overflow: auto;
|
||||
min-width: 16rem;
|
||||
max-height: var(--header-card-maxheight);
|
||||
margin: var(--space-xs);
|
||||
max-height: var( --header-card-maxheight );
|
||||
margin: var( --space-xs );
|
||||
contain: content;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
.citizen-card();
|
||||
.citizen-card-hide( top @position );
|
||||
|
||||
@media (min-width: @width-breakpoint-tablet) {
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
& when ( @position = left ) {
|
||||
right: unset;
|
||||
}
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-desktop) {
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
& when ( @position = left ) {
|
||||
.citizen-card-hide( top left );
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
top: @topOffset;
|
||||
|
||||
& when ( @bottomBorder ) {
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
& when ( @zIndex ) {
|
||||
|
|
@ -120,9 +120,9 @@
|
|||
right: ~'calc( var(--padding-page ) * -1 )';
|
||||
left: ~'calc( var(--padding-page ) * -1 )';
|
||||
height: 100%;
|
||||
-webkit-backdrop-filter: saturate(50%) blur(16px);
|
||||
backdrop-filter: saturate(50%) blur(16px);
|
||||
background-color: var(--background-color-overlay);
|
||||
-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
|
||||
backdrop-filter: saturate( 50% ) blur( 16px );
|
||||
background-color: var( --background-color-overlay );
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
|
||||
// Set content to be at the center
|
||||
.content-center() {
|
||||
max-width: var(--width-layout);
|
||||
max-width: var( --width-layout );
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -179,44 +179,44 @@
|
|||
.menu-item-link() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-base) !important;
|
||||
font-weight: var(--font-weight-medium);
|
||||
gap: var(--space-sm);
|
||||
color: var( --color-base ) !important;
|
||||
font-weight: var( --font-weight-medium );
|
||||
gap: var( --space-sm );
|
||||
}
|
||||
|
||||
.menu-item-link-hover() {
|
||||
background-color: var(--background-color-primary--hover);
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
|
||||
.menu-item-link-active() {
|
||||
background-color: var(--background-color-primary--active);
|
||||
background-color: var( --background-color-primary--active );
|
||||
}
|
||||
|
||||
// Button Styles
|
||||
.button-blue() {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var( --color-primary );
|
||||
color: #fff !important;
|
||||
transition: @transition-background, @transition-color;
|
||||
}
|
||||
|
||||
.button-blue-hover() {
|
||||
background-color: var(--color-primary--hover);
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
.button-blue-active() {
|
||||
background-color: var(--color-primary--active);
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.button-red() {
|
||||
background-color: var(--color-destructive);
|
||||
background-color: var( --color-destructive );
|
||||
color: #fff !important;
|
||||
transition: @transition-background, @transition-color;
|
||||
}
|
||||
|
||||
.button-red-hover() {
|
||||
background-color: var(--color-destructive--hover);
|
||||
background-color: var( --color-destructive--hover );
|
||||
}
|
||||
|
||||
.button-red-active() {
|
||||
background-color: var(--color-destructive--active);
|
||||
background-color: var( --color-destructive--active );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
position: absolute;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
max-height: var(--header-card-maxheight);
|
||||
max-height: var( --header-card-maxheight );
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem 0 0 0;
|
||||
margin: -0.75rem 0 0 0; // Reset <ol> styles
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
&__item {
|
||||
.citizen-typeahead {
|
||||
&__thumbnail {
|
||||
margin-right: var(--space-sm);
|
||||
margin-right: var( --space-sm );
|
||||
|
||||
&.citizen-ui-icon {
|
||||
width: 100%; // reset width
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--background-color-primary--hover);
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
|
|
@ -43,12 +43,12 @@
|
|||
.citizen-typeahead {
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
padding: var(--space-xl) 0;
|
||||
padding: var( --space-xl ) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__thumbnail {
|
||||
margin-bottom: var(--space-sm);
|
||||
margin-bottom: var( --space-sm );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
&.citizen-ui-icon {
|
||||
height: 60px;
|
||||
background-color: var(--color-surface-3);
|
||||
background-color: var( --color-surface-3 );
|
||||
|
||||
&::before {
|
||||
background-size: 20px;
|
||||
|
|
@ -75,17 +75,17 @@
|
|||
&--tool {
|
||||
.citizen-typeahead {
|
||||
&__content {
|
||||
padding: var(--space-sm) 0;
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
padding: var( --space-sm ) 0;
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
&__thumbnail {
|
||||
height: var(--size-icon);
|
||||
height: var( --size-icon );
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,9 +100,9 @@
|
|||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-xs) 0;
|
||||
margin: 0 var(--space-sm);
|
||||
color: var(--color-base);
|
||||
padding: var( --space-xs ) 0;
|
||||
margin: 0 var( --space-sm );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
&__thumbnail {
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
max-width: 70px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius--medium);
|
||||
border-radius: var( --border-radius--medium );
|
||||
|
||||
&.citizen-ui-icon::before {
|
||||
background-size: contain;
|
||||
|
|
@ -130,31 +130,31 @@
|
|||
|
||||
&__title {
|
||||
flex-shrink: 0;
|
||||
color: var(--color-base--emphasized);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
&__highlight {
|
||||
color: var(--color-base--subtle);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var( --color-base--subtle );
|
||||
font-weight: var( --font-weight-medium );
|
||||
}
|
||||
|
||||
&__query {
|
||||
color: var(--color-base--emphasized);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
margin-left: var(--space-xs);
|
||||
color: var(--color-base);
|
||||
margin-left: var( --space-xs );
|
||||
color: var( --color-base );
|
||||
font-size: 0.8125rem;
|
||||
gap: var(--space-xxs);
|
||||
gap: var( --space-xxs );
|
||||
|
||||
.citizen-ui-icon {
|
||||
width: 0.8125rem;
|
||||
height: 0.8125rem;
|
||||
margin-right: var(--space-xxs);
|
||||
margin-right: var( --space-xxs );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
|
||||
&__description {
|
||||
margin-top: 0.1rem;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
|
|
@ -177,14 +177,14 @@
|
|||
|
||||
&__actions {
|
||||
position: absolute;
|
||||
right: var(--space-sm);
|
||||
right: var( --space-sm );
|
||||
}
|
||||
|
||||
&__keyboard {
|
||||
display: none;
|
||||
padding: 0 8px;
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-1);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
}
|
||||
|
||||
// HACK: This is as close as we can to detect whether there is a keyboard in CSS
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
@media ( hover: hover ) and ( pointer: fine ) {
|
||||
.citizen-typeahead {
|
||||
&__item--active {
|
||||
.citizen-typeahead__keyboard {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.mw-body-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
gap: var( --space-xl );
|
||||
grid-area: footer;
|
||||
line-height: var(--line-height-sm);
|
||||
line-height: var( --line-height-sm );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.citizen-drawer {
|
||||
&__card {
|
||||
padding: var(--space-xs) 0;
|
||||
padding: var( --space-xs ) 0;
|
||||
.citizen-header-card( left );
|
||||
}
|
||||
|
||||
|
|
@ -8,25 +8,24 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-md);
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
gap: var(--space-md);
|
||||
padding: var( --space-md );
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
gap: var( --space-md );
|
||||
}
|
||||
|
||||
// Keep aspect ratio
|
||||
&__logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-height: 3rem;
|
||||
}
|
||||
|
||||
.mw-logo-wordmark {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.5rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
|
@ -43,15 +42,15 @@
|
|||
display: grid;
|
||||
max-width: 92.5vw;
|
||||
justify-content: center;
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
font-size: 0.875rem; // TODO: Make this a variable
|
||||
gap: var(--space-xs);
|
||||
grid-template-columns: repeat(auto-fit, 15rem);
|
||||
gap: var( --space-xs );
|
||||
grid-template-columns: repeat( auto-fit, 15rem );
|
||||
|
||||
a {
|
||||
.menu-item-link;
|
||||
padding: 0.625rem var(--space-md); // TODO: Make this a variable
|
||||
border-radius: var(--border-radius--small);
|
||||
padding: 0.625rem var( --space-md ); // TODO: Make this a variable
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-tablet) {
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
.mw-logo-wordmark {
|
||||
font-size: 2rem;
|
||||
// Sometimes long wiki name will wrap when the menu is too small
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
&Icon {
|
||||
> div {
|
||||
&:first-child {
|
||||
transform: translate3d(50%, 0, 0);
|
||||
transform: translate3d( 50%, 0, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +19,6 @@
|
|||
#citizen-drawer__checkbox:checked {
|
||||
// Transform all the slices of the button into a crossmark
|
||||
~ .citizen-drawer__button {
|
||||
background-color: var(--background-color-primary--active);
|
||||
background-color: var( --background-color-primary--active );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.citizen-footer {
|
||||
padding: var(--space-xxl) var(--padding-page);
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
padding: var( --space-xxl ) var( --padding-page );
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
clear: both;
|
||||
direction: ltr;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&__container {
|
||||
max-width: var(--width-layout--extended);
|
||||
max-width: var( --width-layout--extended );
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
margin-left: auto;
|
||||
|
||||
.page-info {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
font-size: 0.875rem;
|
||||
|
||||
&__item {
|
||||
padding: var(--space-xxs) 0;
|
||||
padding: var( --space-xxs ) 0;
|
||||
|
||||
a {
|
||||
text-decoration: underline dotted;
|
||||
|
|
@ -52,12 +52,12 @@
|
|||
|
||||
#footer {
|
||||
&-places {
|
||||
padding: var(--space-xs);
|
||||
padding: var( --space-xs );
|
||||
font-size: 0.875rem;
|
||||
|
||||
ul {
|
||||
padding: var(--space-xs);
|
||||
gap: var(--space-sm) var(--space-md);
|
||||
padding: var( --space-xs );
|
||||
gap: var( --space-sm ) var( --space-md );
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -67,16 +67,16 @@
|
|||
|
||||
&-icons {
|
||||
display: flex;
|
||||
padding: var(--space-xs);
|
||||
padding: var( --space-xs );
|
||||
|
||||
ul {
|
||||
padding: var(--space-xxs) var(--space-xs);
|
||||
gap: var(--space-xs);
|
||||
padding: var( --space-xxs ) var( --space-xs );
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex; // Horizontally aligned with there are two icons in the same li
|
||||
gap: var(--space-xs);
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-desktop) {
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-footer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: var(--header-direction);
|
||||
padding: var(--space-xs);
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
background-color: var(--color-surface-0);
|
||||
gap: var(--space-xxs);
|
||||
flex-direction: var( --header-direction );
|
||||
padding: var( --space-xs );
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-0 );
|
||||
gap: var( --space-xxs );
|
||||
transition: @transition-transform; // Hide header when scroll down
|
||||
|
||||
&__item {
|
||||
|
|
@ -23,43 +23,43 @@
|
|||
&__button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: var(--header-button-size);
|
||||
height: var(--header-button-size);
|
||||
border-radius: var(--border-radius--small);
|
||||
width: var( --header-button-size );
|
||||
height: var( --header-button-size );
|
||||
border-radius: var( --border-radius--small );
|
||||
contain: strict;
|
||||
place-items: center;
|
||||
|
||||
// Used in checkbox hack
|
||||
&Checkbox {
|
||||
display: flex;
|
||||
width: var(--header-button-size);
|
||||
height: var(--header-button-size);
|
||||
width: var( --header-button-size );
|
||||
height: var( --header-button-size );
|
||||
contain: strict;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
padding: 0 var(--space-xs) 0 0;
|
||||
border-right: 1px solid var(--border-color-base);
|
||||
margin: 0 var(--space-xxs);
|
||||
padding: 0 var( --space-xs ) 0 0;
|
||||
border-right: 1px solid var( --border-color-base );
|
||||
margin: 0 var( --space-xxs );
|
||||
|
||||
span {
|
||||
text-indent: -9999px;
|
||||
|
|
@ -70,14 +70,14 @@
|
|||
z-index: -1; // Inner element should be behind menu and search
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: var(--header-direction);
|
||||
flex-direction: var( --header-direction );
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-xxs);
|
||||
gap: var( --space-xxs );
|
||||
|
||||
.mw-checkbox-hack-checkbox:checked {
|
||||
~ .citizen-header__button {
|
||||
background-color: var(--background-color-primary--active);
|
||||
background-color: var( --background-color-primary--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,8 +85,8 @@
|
|||
&__start,
|
||||
&__end {
|
||||
display: flex;
|
||||
flex-direction: var(--header-direction);
|
||||
gap: var(--space-xxs);
|
||||
flex-direction: var( --header-direction );
|
||||
gap: var( --space-xxs );
|
||||
}
|
||||
|
||||
&__start {
|
||||
|
|
@ -105,15 +105,15 @@
|
|||
#p-notifications {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: var(--header-direction);
|
||||
flex-direction: var( --header-direction );
|
||||
align-items: center;
|
||||
gap: var(--space-xxs);
|
||||
gap: var( --space-xxs );
|
||||
}
|
||||
}
|
||||
|
||||
// Reset hover styles if it is a touch device
|
||||
// This is dumb but hover:hover overrides active states
|
||||
@media (hover: none) {
|
||||
@media ( hover: none ) {
|
||||
.citizen-header {
|
||||
&__button {
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
&__heading {
|
||||
&-label {
|
||||
display: block;
|
||||
padding: 0.625rem var(--space-md);
|
||||
padding: 0.625rem var( --space-md );
|
||||
margin: 0;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-weight: var( --font-weight-normal );
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
// FIXME: This should not be here
|
||||
.citizen-ui-icon {
|
||||
display: block;
|
||||
width: var(--size-icon);
|
||||
height: var(--size-icon);
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
contain: strict;
|
||||
|
||||
&::before {
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,20 +35,20 @@
|
|||
#t-upload {
|
||||
a::before {
|
||||
display: block;
|
||||
width: var(--size-icon);
|
||||
height: var(--size-icon);
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
contain: strict;
|
||||
content: '';
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-portlet {
|
||||
// Hide selected item, except #ca-view
|
||||
.selected:not(#ca-view) {
|
||||
.selected:not( #ca-view ) {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
justify-content: flex-end;
|
||||
margin-left: -0.75rem; // Align to the margin
|
||||
font-size: 0.875rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
gap: var(--space-xxs);
|
||||
font-weight: var( --font-weight-medium );
|
||||
gap: var( --space-xxs );
|
||||
|
||||
// TODO: Merge this with header__item
|
||||
&__item {
|
||||
|
|
@ -23,22 +23,22 @@
|
|||
display: grid;
|
||||
width: 2.75rem; // Same width as other buttons
|
||||
height: 2.25rem; // Same height as other buttons
|
||||
border-radius: var(--border-radius--medium);
|
||||
border-radius: var( --border-radius--medium );
|
||||
place-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
overflow: auto;
|
||||
max-height: 60vh;
|
||||
padding: 0.5rem 0;
|
||||
margin: var(--space-xs);
|
||||
margin: var( --space-xs );
|
||||
font-size: 0.875rem;
|
||||
.citizen-card;
|
||||
.citizen-card-hide( top right );
|
||||
|
||||
a {
|
||||
padding: 0.625rem var(--space-md);
|
||||
padding: 0.625rem var( --space-md );
|
||||
.menu-item-link;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -74,33 +74,33 @@
|
|||
> .mw-portlet {
|
||||
ul {
|
||||
display: flex;
|
||||
gap: var(--space-xxs);
|
||||
gap: var( --space-xxs );
|
||||
}
|
||||
|
||||
li > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--border-radius--medium);
|
||||
color: var(--color-base);
|
||||
padding: var( --space-xs ) var( --space-sm );
|
||||
border-radius: var( --border-radius--medium );
|
||||
color: var( --color-base );
|
||||
font-size: 0;
|
||||
transition: @transition-background, @transition-color;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
color: var(--color-base--emphasized);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
|
||||
&::before {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
color: var(--color-base--subtle);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
color: var( --color-base--subtle );
|
||||
|
||||
&::before {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
|
||||
// TODO: Merge this with header styles
|
||||
.mw-checkbox-hack-checkbox:checked ~ .page-actions__button {
|
||||
background-color: var(--background-color-primary--active);
|
||||
background-color: var( --background-color-primary--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,14 +132,14 @@
|
|||
right: 0;
|
||||
display: block;
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: var(--border-radius--pill);
|
||||
background: var(--color-primary);
|
||||
border-radius: var( --border-radius--pill );
|
||||
background: var( --color-primary );
|
||||
color: #fff;
|
||||
content: attr(data-counter-text);
|
||||
content: attr( data-counter-text );
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
&[data-counter-text='0']::after {
|
||||
&[ data-counter-text='0' ]::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -152,8 +152,8 @@
|
|||
position: absolute;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: var(--size-button--page);
|
||||
height: var(--size-button--page);
|
||||
width: var( --size-button--page );
|
||||
height: var( --size-button--page );
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -162,20 +162,20 @@
|
|||
// Hover state needs to be define because the checkbox now overlays the label
|
||||
&:hover {
|
||||
~ .page-actions__button {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
~ .page-actions__button {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -191,22 +191,22 @@
|
|||
#ca-edit,
|
||||
#ca-ve-edit {
|
||||
> a {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var( --color-primary );
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary--hover);
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-primary--active);
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
}
|
||||
|
||||
> a,
|
||||
.citizen-ui-icon {
|
||||
&::before {
|
||||
filter: invert(1);
|
||||
filter: invert( 1 );
|
||||
// white icon
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -220,11 +220,11 @@
|
|||
> a {
|
||||
// See SkinHooks.php for why VE is here
|
||||
&::before {
|
||||
width: var(--size-icon);
|
||||
height: var(--size-icon);
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--size-icon);
|
||||
background-size: var( --size-icon );
|
||||
content: '';
|
||||
transition: @transition-opacity;
|
||||
}
|
||||
|
|
@ -245,7 +245,7 @@
|
|||
}
|
||||
|
||||
&#ca-edit {
|
||||
border-left: 1px solid var(--color-primary--hover);
|
||||
border-left: 1px solid var( --color-primary--hover );
|
||||
margin-left: ~'calc( var( --space-xxs ) * -1 )';
|
||||
|
||||
> a {
|
||||
|
|
@ -262,11 +262,11 @@
|
|||
#ca-redirect,
|
||||
#ca-masseditregex {
|
||||
> a::before {
|
||||
width: var(--size-icon);
|
||||
height: var(--size-icon);
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--size-icon);
|
||||
background-size: var( --size-icon );
|
||||
content: '';
|
||||
transition: @transition-opacity;
|
||||
}
|
||||
|
|
@ -290,7 +290,7 @@
|
|||
}
|
||||
|
||||
// To avoid more menu from overflow in narrow screen
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.page-actions {
|
||||
&__item {
|
||||
position: unset;
|
||||
|
|
@ -298,12 +298,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-desktop) {
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.page-actions {
|
||||
> .mw-portlet {
|
||||
li > a {
|
||||
font-size: 0.75rem;
|
||||
gap: var(--space-xs);
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -316,14 +316,14 @@
|
|||
|
||||
// Reset hover styles if it is a touch device
|
||||
// This is dumb but hover:hover overrides active states
|
||||
@media (hover: none) {
|
||||
@media ( hover: none ) {
|
||||
.page-actions {
|
||||
&__button {
|
||||
&:hover {
|
||||
background-color: none;
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.citizen-search {
|
||||
--width-search-bar: @width-search-bar;
|
||||
--height-search-bar: var(--header-button-size);
|
||||
--height-search-bar: var( --header-button-size );
|
||||
|
||||
&__card {
|
||||
position: fixed;
|
||||
|
|
@ -10,17 +10,17 @@
|
|||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: var(--width-search-bar);
|
||||
width: var( --width-search-bar );
|
||||
max-width: ~'calc(100vw - var( --padding-page ) )';
|
||||
height: var(--height-search-bar);
|
||||
height: var( --height-search-bar );
|
||||
margin: ~'calc( var( --header-size ) + 1px ) var( --space-xs ) auto';
|
||||
gap: 0.25rem;
|
||||
.citizen-card();
|
||||
.citizen-card-hide( top left, '', false );
|
||||
|
||||
.citizen-ui-icon {
|
||||
width: var(--height-search-bar);
|
||||
height: var(--height-search-bar);
|
||||
width: var( --height-search-bar );
|
||||
height: var( --height-search-bar );
|
||||
|
||||
&::before {
|
||||
background-size: 1rem;
|
||||
|
|
@ -50,26 +50,26 @@
|
|||
|
||||
&__random {
|
||||
right: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
transition: @transition-transform;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
transform: rotate(30deg);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
transform: rotate( 30deg );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
#searchInput {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 var(--height-search-bar);
|
||||
padding: 0 var( --height-search-bar );
|
||||
border: 0; // Cancel default border
|
||||
appearance: none;
|
||||
background: transparent; // Cancel default background
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: @width-breakpoint-desktop) {
|
||||
@media ( max-width: @width-breakpoint-desktop ) {
|
||||
.citizen-search__card {
|
||||
width: auto;
|
||||
margin: ~'calc( var( --header-size ) + 1px ) var( --space-xs )';
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
> div {
|
||||
position: relative;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
transition: inherit;
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
/* @noflip */
|
||||
left: 0.75rem;
|
||||
height: 0.5rem;
|
||||
transform: rotate(-45deg);
|
||||
transform: rotate( -45deg );
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&:nth-child( 2 ) {
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
border: 0.125rem solid #000;
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
margin-top: -0.3125rem;
|
||||
/* @noflip */
|
||||
margin-left: -0.125rem;
|
||||
transform: rotate(-45deg);
|
||||
transform: rotate( -45deg );
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
left: -0.4375rem;
|
||||
height: 1rem;
|
||||
opacity: 0;
|
||||
transform: rotate(-135deg);
|
||||
transform: rotate( -135deg );
|
||||
}
|
||||
|
||||
&:first-child,
|
||||
|
|
@ -50,6 +50,6 @@
|
|||
#citizen-search__checkbox:checked {
|
||||
// Transform the magnifying glass button into a crossmark
|
||||
~ .citizen-search__button {
|
||||
background-color: var(--background-color-primary--active);
|
||||
background-color: var( --background-color-primary--active );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
|
||||
&--collapsed {
|
||||
.section-indicator {
|
||||
transform: rotate3d(1, 0, 0, 180deg);
|
||||
transform: rotate3d( 1, 0, 0, 180deg );
|
||||
}
|
||||
|
||||
.mw-headline,
|
||||
.mw-heading h1,
|
||||
.mw-heading h2 {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -23,11 +23,11 @@
|
|||
transition: @transition-opacity;
|
||||
|
||||
&:hover {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
&-indicator {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: var(--space-md);
|
||||
margin-right: var( --space-md );
|
||||
cursor: pointer;
|
||||
transition: @transition-transform;
|
||||
}
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
|
||||
// Fix hover state on touch devices
|
||||
@media (hover: none) {
|
||||
@media ( hover: none ) {
|
||||
.citizen-sections-enabled .section {
|
||||
&-heading .mw-headline,
|
||||
&-indicator {
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
&-heading--collapsed .mw-headline {
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
html:not(.ve-activated) .citizen-body-header--sticky {
|
||||
html:not( .ve-activated ) .citizen-body-header--sticky {
|
||||
.mw-body-header {
|
||||
position: sticky;
|
||||
top: ~'calc( var( --header-size ) - 1px )';
|
||||
padding: var(--space-md) var(--padding-page) var(--space-sm);
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
padding: var( --space-md ) var( --padding-page ) var( --space-sm );
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
margin: ~'0 calc( var( --padding-page ) * -1 )';
|
||||
transition: @transition-transform; // Hide sticky header on scroll down
|
||||
|
||||
|
|
@ -32,9 +32,9 @@ html:not(.ve-activated) .citizen-body-header--sticky {
|
|||
right: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
-webkit-backdrop-filter: saturate(50%) blur(16px);
|
||||
backdrop-filter: saturate(50%) blur(16px);
|
||||
background-color: var(--background-color-overlay);
|
||||
-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
|
||||
backdrop-filter: saturate( 50% ) blur( 16px );
|
||||
background-color: var( --background-color-overlay );
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ html:not(.ve-activated) .citizen-body-header--sticky {
|
|||
|
||||
.firstHeading {
|
||||
overflow: hidden;
|
||||
font-size: var(--font-size-h3);
|
||||
font-size: var( --font-size-h3 );
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -61,15 +61,15 @@ html:not(.ve-activated) .citizen-body-header--sticky {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
margin: ~'calc( var( --space-xs ) * -1 ) 0';
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +82,7 @@ html:not(.ve-activated) .citizen-body-header--sticky {
|
|||
}
|
||||
|
||||
// Make sticky header more compact if there are less screen estate
|
||||
@media (max-width: @width-breakpoint-tablet), (max-height: 800px) {
|
||||
@media ( max-width: @width-breakpoint-tablet ), ( max-height: 800px ) {
|
||||
.citizen-body-header--sticky {
|
||||
#siteSub {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.citizen-toc {
|
||||
font-size: 0.875rem;
|
||||
line-height: var(--line-height-xs);
|
||||
line-height: var( --line-height-xs );
|
||||
transition: @transition-transform;
|
||||
will-change: transform;
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
|
||||
&__top {
|
||||
|
|
@ -15,20 +15,20 @@
|
|||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
content: '';
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
&__contents,
|
||||
&__list {
|
||||
border-left: 0.5px solid var(--border-color-base);
|
||||
border-left: 0.5px solid var( --border-color-base );
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
|
|
@ -49,17 +49,17 @@
|
|||
}
|
||||
|
||||
&__list {
|
||||
margin-left: var(--space-xs);
|
||||
margin-left: var( --space-xs );
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
padding-top: var(--space-xs);
|
||||
padding-bottom: var(--space-xs);
|
||||
border-radius: var(--border-radius--small);
|
||||
color: var(--color-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
gap: var(--space-xs);
|
||||
padding-top: var( --space-xs );
|
||||
padding-bottom: var( --space-xs );
|
||||
border-radius: var( --border-radius--small );
|
||||
color: var( --color-base );
|
||||
font-weight: var( --font-weight-medium );
|
||||
gap: var( --space-xs );
|
||||
|
||||
&.citizen-toc__top {
|
||||
height: 0;
|
||||
|
|
@ -71,38 +71,38 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
width: 3px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius--pill);
|
||||
border-radius: var( --border-radius--pill );
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
|
||||
&__numb {
|
||||
display: none;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
&__listItem {
|
||||
&--active {
|
||||
> .citizen-toc__link {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
|
||||
.citizen-toc__indicator {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -113,8 +113,8 @@
|
|||
.citizen-body-header--sticky {
|
||||
.citizen-toc__top.citizen-toc__link {
|
||||
height: 1.05rem; // ( 1rem text + 1rem padding ) * line height / 2
|
||||
padding-top: var(--space-xs);
|
||||
padding-bottom: var(--space-xs);
|
||||
padding-top: var( --space-xs );
|
||||
padding-bottom: var( --space-xs );
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
// transform: translateY( var( --header-size ) );
|
||||
// }
|
||||
|
||||
@media (max-width: (@width-breakpoint-desktop - 1px)) {
|
||||
@media ( max-width: ( @width-breakpoint-desktop - 1px ) ) {
|
||||
.citizen-toc {
|
||||
position: fixed;
|
||||
z-index: @z-index-page-header;
|
||||
|
|
@ -139,8 +139,8 @@
|
|||
// This is not bulletproof since it will get covered by page header
|
||||
// in extremely short height. but it should be good for now
|
||||
max-height: ~'calc( var( --header-card-maxheight ) - 8rem )';
|
||||
padding: var(--space-md);
|
||||
margin: var(--space-xs);
|
||||
padding: var( --space-md );
|
||||
margin: var( --space-xs );
|
||||
overscroll-behavior: contain;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
|
@ -163,10 +163,10 @@
|
|||
display: grid;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: var(--border-radius--medium);
|
||||
margin: var(--space-xs);
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
border-radius: var( --border-radius--medium );
|
||||
margin: var( --space-xs );
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
place-content: center;
|
||||
pointer-events: auto;
|
||||
transform: none;
|
||||
|
|
@ -180,11 +180,11 @@
|
|||
|
||||
// The hover state colors are not great but it will do for now
|
||||
&:hover {
|
||||
background-color: var(--color-surface-3);
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
transform: scale(1.2);
|
||||
transform: scale( 1.2 );
|
||||
|
||||
.citizen-ui-icon {
|
||||
display: none;
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-desktop) {
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-toc {
|
||||
grid-area: toc;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@
|
|||
}
|
||||
|
||||
&__header {
|
||||
padding: var(--space-md) 0;
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
padding: var( --space-md ) 0;
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-portlet {
|
||||
&-personal-header {
|
||||
padding: 0.75rem 0 0.5rem;
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
|
||||
li {
|
||||
margin: 0 0.75rem;
|
||||
|
|
@ -26,13 +26,13 @@
|
|||
.menu-item-link;
|
||||
align-items: center;
|
||||
// TODO: Need to revisit this spacing, maybe set a min-height instead?
|
||||
padding: 0.625rem var(--space-md);
|
||||
padding: 0.625rem var( --space-md );
|
||||
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
.menu-item-link-active;
|
||||
|
||||
.citizen-ui-icon::before {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -50,8 +50,8 @@
|
|||
|
||||
#p-user-info {
|
||||
> ul > li {
|
||||
margin-right: var(--space-md);
|
||||
margin-left: var(--space-md);
|
||||
margin-right: var( --space-md );
|
||||
margin-left: var( --space-md );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,25 +59,25 @@
|
|||
&-anonuserpage span,
|
||||
&-tmpuserpage-2,
|
||||
&-userpage-2 a {
|
||||
padding: var(--space-xxs) 0;
|
||||
color: var(--color-base--emphasized);
|
||||
padding: var( --space-xxs ) 0;
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&-user {
|
||||
&groups {
|
||||
margin-bottom: var(--space-xs);
|
||||
margin-bottom: var( --space-xs );
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xxs);
|
||||
gap: var( --space-xxs );
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -88,17 +88,17 @@
|
|||
transition: @transition-color;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary--hover);
|
||||
color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-primary--active);
|
||||
color: var( --color-primary--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&contris {
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var( --font-weight-medium );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,21 +11,21 @@ body {
|
|||
min-height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
accent-color: var(--color-primary);
|
||||
background: var(--color-surface-0);
|
||||
color: var(--color-base);
|
||||
accent-color: var( --color-primary );
|
||||
background: var( --color-surface-0 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline-color: var(--color-primary);
|
||||
outline-color: var( --color-primary );
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--border-color-base);
|
||||
background-color: var(--color-surface-1);
|
||||
color: var(--color-base--emphasized);
|
||||
border: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -33,12 +33,12 @@ textarea {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
margin: var(--space-md);
|
||||
color: var(--color-base--subtle);
|
||||
margin: var( --space-md );
|
||||
color: var( --color-base--subtle );
|
||||
|
||||
cite {
|
||||
display: block;
|
||||
margin-top: var(--space-sm);
|
||||
margin-top: var( --space-sm );
|
||||
|
||||
&::before {
|
||||
content: '— ';
|
||||
|
|
@ -52,7 +52,7 @@ sub {
|
|||
}
|
||||
|
||||
th {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -94,16 +94,16 @@ video {
|
|||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 1px solid var(--color-primary);
|
||||
outline: 1px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.toc,
|
||||
#toc {
|
||||
max-width: 20vw;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--color-surface-4);
|
||||
border: 1px solid var( --color-surface-4 );
|
||||
margin: 1rem auto 1rem 0;
|
||||
background: var(--color-surface-2);
|
||||
background: var( --color-surface-2 );
|
||||
|
||||
#mw-toc-heading {
|
||||
font-size: 1.125rem;
|
||||
|
|
@ -121,7 +121,7 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
@media ( hover: none ) {
|
||||
a,
|
||||
button,
|
||||
label {
|
||||
|
|
@ -130,7 +130,7 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.mw-body,
|
||||
.parsoid-body {
|
||||
overflow-x: hidden; // fallback if clip is not supported
|
||||
|
|
@ -147,7 +147,7 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-tablet) {
|
||||
@media ( min-width: @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
|
||||
|
|
@ -156,7 +156,7 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: @width-breakpoint-mobile) {
|
||||
@media ( max-width: @width-breakpoint-mobile ) {
|
||||
.toc,
|
||||
#toc {
|
||||
max-width: 95vw;
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@
|
|||
}
|
||||
|
||||
.firstHeading-parenthesis {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.mw-page-title {
|
||||
&-namespace {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
&-separator {
|
||||
margin-right: var(--space-xxs);
|
||||
color: var(--color-base--subtle);
|
||||
margin-right: var( --space-xxs );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -108,13 +108,13 @@ html {
|
|||
--fonts-monospace: @fonts-monospace;
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-tablet) {
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
html {
|
||||
--padding-page: @padding-page * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-desktop) {
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
html {
|
||||
--padding-page: @padding-page * 2;
|
||||
--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ a.feedlink {
|
|||
cursor: pointer;
|
||||
|
||||
// Icons have to use span inside label elements
|
||||
> span:not(.citizen-ui-icon) {
|
||||
> span:not( .citizen-ui-icon ) {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,6 +35,6 @@ a.feedlink {
|
|||
* Revisit this when T254055 is resolved
|
||||
*/
|
||||
// add :not(.mw-body-content) to avoid small font size inside VE.
|
||||
.oo-ui-widget:not(.mw-body-content) {
|
||||
.oo-ui-widget:not( .mw-body-content ) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ a {
|
|||
}
|
||||
|
||||
.mw-body-header {
|
||||
margin-bottom: var(--space-md);
|
||||
margin-bottom: var( --space-md );
|
||||
}
|
||||
|
||||
.printfooter {
|
||||
|
|
@ -56,7 +56,7 @@ a {
|
|||
display: table;
|
||||
padding: 10px;
|
||||
border: 1px solid;
|
||||
margin-top: var(--space-md);
|
||||
margin-top: var( --space-md );
|
||||
font-size: 14px;
|
||||
|
||||
&title {
|
||||
|
|
@ -71,8 +71,8 @@ a {
|
|||
}
|
||||
|
||||
.thumb {
|
||||
margin-top: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
margin-top: var( --space-md );
|
||||
margin-bottom: var( --space-md );
|
||||
}
|
||||
|
||||
// Float styles
|
||||
|
|
|
|||
|
|
@ -19,28 +19,28 @@
|
|||
overflow: hidden;
|
||||
width: 100%;
|
||||
// Hide text in case it extends beyond the input.
|
||||
height: var(--height-progress-bar);
|
||||
height: var( --height-progress-bar );
|
||||
// Ensure it doesn't extend beyond the input.
|
||||
box-sizing: border-box;
|
||||
// Align style with the form
|
||||
border-radius: 0 0 var(--border-radius--large) var(--border-radius--large);
|
||||
border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
|
||||
// Animates the progress-bar.
|
||||
animation:
|
||||
animation:
|
||||
progress-bar
|
||||
1200ms
|
||||
linear
|
||||
var(--delay-progress-bar)
|
||||
var( --delay-progress-bar )
|
||||
infinite
|
||||
alternate;
|
||||
// Add a progress-bar to the loading indicator
|
||||
background: /*image*/
|
||||
linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 100%)
|
||||
-10% 0 ~'/' 0 var(--height-progress-bar)
|
||||
linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
|
||||
-10% 0 ~'/' 0 var( --height-progress-bar )
|
||||
no-repeat,transparent;
|
||||
// Placeholder text
|
||||
content: 'loading';
|
||||
// Fancy shadow under progress
|
||||
filter: drop-shadow(0 0 16px var(--color-primary));
|
||||
filter: drop-shadow( 0 0 16px var( --color-primary ) );
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -48,22 +48,22 @@
|
|||
@keyframes progress-bar {
|
||||
0% {
|
||||
background-position: -10% 0;
|
||||
background-size: 0 var(--height-progress-bar);
|
||||
background-size: 0 var( --height-progress-bar );
|
||||
}
|
||||
|
||||
30% {
|
||||
background-position: -10% 0;
|
||||
background-size: 30% var(--height-progress-bar);
|
||||
background-size: 30% var( --height-progress-bar );
|
||||
}
|
||||
|
||||
70% {
|
||||
background-position: 110% 0;
|
||||
background-size: 30% var(--height-progress-bar);
|
||||
background-size: 30% var( --height-progress-bar );
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 110% 0;
|
||||
background-size: 0 var(--height-progress-bar);
|
||||
background-size: 0 var( --height-progress-bar );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ html.citizen-loading::after {
|
|||
}
|
||||
|
||||
/* stylelint-disable media-feature-name-no-unknown */
|
||||
@media (display-mode: standalone) {
|
||||
@media ( display-mode: standalone ) {
|
||||
// Standalone PWA has no loading affordance
|
||||
// So we provide one
|
||||
html.citizen-loading::after {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Don't style scrollbar for touch device
|
||||
// Since the scrollbar will stay visible if styled
|
||||
// Besides scrollbar is subtle enough on touch devices
|
||||
@media (hover: hover) {
|
||||
@media ( hover: hover ) {
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
|
@ -11,22 +11,22 @@
|
|||
transition: @transition-background;
|
||||
|
||||
&:hover {
|
||||
background: var(--background-color-quiet--hover);
|
||||
background: var( --background-color-quiet--hover );
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--border-radius--large);
|
||||
border-radius: var( --border-radius--large );
|
||||
background-clip: content-box;
|
||||
box-shadow: inset 0 0 0 10px var(--background-color-icon);
|
||||
box-shadow: inset 0 0 0 10px var( --background-color-icon );
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 10px var(--background-color-icon--hover);
|
||||
box-shadow: inset 0 0 0 10px var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 0 0 10px var(--background-color-icon--active);
|
||||
box-shadow: inset 0 0 0 10px var( --background-color-icon--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
--box-shadow-card: @box-shadow-card;
|
||||
--box-shadow-dialog: @box-shadow-dialog;
|
||||
|
||||
--surface-shadow: var(--color-primary__h) 10% 20%;
|
||||
--surface-shadow: var( --color-primary__h ) 10% 20%;
|
||||
--shadow-strength: 0.02;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@ html {
|
|||
|
||||
html,
|
||||
body {
|
||||
font-family: var(--fonts-sans);
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-family: var( --fonts-sans );
|
||||
font-weight: var( --font-weight-normal );
|
||||
// font-smoothing: antialiased;
|
||||
// -webkit-font-smoothing: antialiased; /* Chrome, Safari */
|
||||
// -moz-osx-font-smoothing: grayscale; /* Firefox */
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: var(--fonts-sans); // Override browser's default
|
||||
font-family: var( --fonts-sans ); // Override browser's default
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
cite {
|
||||
|
|
@ -25,11 +25,11 @@ cite {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
font-family: var(--fonts-serif);
|
||||
font-family: var( --fonts-serif );
|
||||
font-style: italic;
|
||||
|
||||
cite {
|
||||
font-family: var(--fonts-sans);
|
||||
font-family: var( --fonts-sans );
|
||||
font-size: 0.8125rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ blockquote {
|
|||
blockquote,
|
||||
q,
|
||||
cite {
|
||||
&:lang(zh) {
|
||||
&:lang( zh ) {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
|
@ -49,16 +49,16 @@ sup {
|
|||
}
|
||||
|
||||
.mw-logo-wordmark {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
.firstHeading {
|
||||
&-parenthesis {
|
||||
font-size: var(--font-size-h3);
|
||||
font-size: var( --font-size-h3 );
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-body,
|
||||
.mw-body-content {
|
||||
line-height: var(--line-height);
|
||||
line-height: var( --line-height );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.citizen-page-container {
|
||||
// Reserve space for header
|
||||
margin-top: var(--header-size);
|
||||
margin-top: var( --header-size );
|
||||
}
|
||||
|
||||
.citizen-body-container {
|
||||
|
|
@ -16,14 +16,14 @@
|
|||
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
padding: var(--space-xl) var(--padding-page);
|
||||
gap: var(--space-md) var(--space-md);
|
||||
padding: var( --space-xl ) var( --padding-page );
|
||||
gap: var( --space-md ) var( --space-md );
|
||||
grid-template-areas:
|
||||
'header'
|
||||
'header'
|
||||
'content'
|
||||
'footer';
|
||||
// Using auto as min value will cause overflow
|
||||
grid-template-columns: minmax(0, var(--width-layout));
|
||||
grid-template-columns: minmax( 0, var( --width-layout ) );
|
||||
}
|
||||
|
||||
.mw-body-header {
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-top: var(--space-md);
|
||||
gap: var(--space-md);
|
||||
padding-top: var( --space-md );
|
||||
gap: var( --space-md );
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
|
|
@ -60,27 +60,27 @@ a.image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: @width-breakpoint-desktop) {
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-toc-enabled {
|
||||
.citizen-body-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'header header'
|
||||
'header header'
|
||||
'content toc'
|
||||
'footer .';
|
||||
grid-template-columns: minmax(0, var(--width-layout)) var(--width-toc);
|
||||
grid-template-columns: minmax( 0, var( --width-layout ) ) var( --width-toc );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Wider page width for certain namespaces */
|
||||
@media (min-width: @width-breakpoint-desktop-wide) {
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
.ns {
|
||||
// 1 - Special, 6 - File, 14 - Category
|
||||
&--1,
|
||||
&-6,
|
||||
&-14 {
|
||||
--width-layout: var(--width-layout--extended);
|
||||
--width-layout: var( --width-layout--extended );
|
||||
}
|
||||
|
||||
// 2 - User, 4 - Project, 12 - Help
|
||||
|
|
@ -92,7 +92,7 @@ a.image {
|
|||
&-12,
|
||||
&-828,
|
||||
&-talk {
|
||||
--width-layout: var(--width-layout--wide);
|
||||
--width-layout: var( --width-layout--wide );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.skin-citizen {
|
||||
.mw-body-content {
|
||||
.error {
|
||||
color: var(--color-destructive);
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: @width-breakpoint-mobile) {
|
||||
@media ( max-width: @width-breakpoint-mobile ) {
|
||||
.skin-citizen .mw-body-content {
|
||||
h1,
|
||||
h2,
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
background-color: currentcolor;
|
||||
content: '';
|
||||
/* @embed */
|
||||
-webkit-mask: url('images/linkExternal.svg') no-repeat 50% 50%;
|
||||
-webkit-mask: url( images/linkExternal.svg ) no-repeat 50% 50%;
|
||||
/* @embed */
|
||||
mask: url('images/linkExternal.svg') no-repeat 50% 50%;
|
||||
mask: url( images/linkExternal.svg ) no-repeat 50% 50%;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
// Somehow this get overriden from content.links
|
||||
&:hover,
|
||||
&:visited:hover {
|
||||
color: var(--color-link--hover);
|
||||
color: var( --color-link--hover );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
&.extiw,
|
||||
&.external {
|
||||
&::after {
|
||||
transform: scaleX(-1);
|
||||
transform: scaleX( -1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
// Be more specific to replace default style
|
||||
.skin-citizen {
|
||||
a.mw-selflink {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -19,11 +19,11 @@ a {
|
|||
&.new,
|
||||
&.new:visited {
|
||||
&:hover {
|
||||
color: var(--color-link-new--hover);
|
||||
color: var( --color-link-new--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-link-new--active);
|
||||
color: var( --color-link-new--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
/**
|
||||
* Block media items
|
||||
*/
|
||||
figure[typeof~='mw:File'],
|
||||
figure[typeof~='mw:File/Frameless'],
|
||||
figure[typeof~='mw:File/Thumb'],
|
||||
figure[typeof~='mw:File/Frame'] {
|
||||
figure[ typeof~='mw:File' ],
|
||||
figure[ typeof~='mw:File/Frameless' ],
|
||||
figure[ typeof~='mw:File/Thumb' ],
|
||||
figure[ typeof~='mw:File/Frame' ] {
|
||||
&.mw-halign-none {
|
||||
clear: none;
|
||||
float: none;
|
||||
|
|
@ -25,18 +25,18 @@ figure[typeof~='mw:File/Frame'] {
|
|||
}
|
||||
}
|
||||
|
||||
figure[typeof~='mw:File'],
|
||||
figure[typeof~='mw:File/Frameless'] {
|
||||
figure[ typeof~='mw:File' ],
|
||||
figure[ typeof~='mw:File/Frameless' ] {
|
||||
/* Hide the caption for frameless and plain floated images */
|
||||
> figcaption {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
figure[typeof~='mw:File/Thumb'],
|
||||
figure[typeof~='mw:File/Frame'] {
|
||||
figure[ typeof~='mw:File/Thumb' ],
|
||||
figure[ typeof~='mw:File/Frame' ] {
|
||||
display: table;
|
||||
margin: var(--space-xs) auto var(--space-md) auto;
|
||||
margin: var( --space-xs ) auto var( --space-md ) auto;
|
||||
font-size: 0.8125rem;
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -55,26 +55,26 @@ figure[typeof~='mw:File/Frame'] {
|
|||
> figcaption {
|
||||
display: table-caption;
|
||||
// Sync with rounded corner
|
||||
padding-right: var(--border-radius--small);
|
||||
padding-right: var( --border-radius--small );
|
||||
// Sync with rounded corner
|
||||
padding-left: var(--border-radius--small);
|
||||
margin-top: var(--space-xs);
|
||||
padding-left: var( --border-radius--small );
|
||||
margin-top: var( --space-xs );
|
||||
caption-side: bottom;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
}
|
||||
|
||||
// Do not float content in mobile view
|
||||
@media (min-width: @width-breakpoint-tablet) {
|
||||
figure[typeof~='mw:File/Thumb'],
|
||||
figure[typeof~='mw:File/Frame'] {
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
figure[ typeof~='mw:File/Thumb' ],
|
||||
figure[ typeof~='mw:File/Frame' ] {
|
||||
text-align: start;
|
||||
|
||||
// When float is not explicitly set
|
||||
.mw-content-ltr & {
|
||||
/* @noflip */
|
||||
margin-left: var(--space-lg);
|
||||
margin-left: var( --space-lg );
|
||||
/* @noflip */
|
||||
clear: right;
|
||||
/* @noflip */
|
||||
|
|
@ -83,7 +83,7 @@ figure[typeof~='mw:File/Frame'] {
|
|||
|
||||
.mw-content-rtl & {
|
||||
/* @noflip */
|
||||
margin-right: var(--space-lg);
|
||||
margin-right: var( --space-lg );
|
||||
/* @noflip */
|
||||
clear: left;
|
||||
/* @noflip */
|
||||
|
|
@ -91,13 +91,13 @@ figure[typeof~='mw:File/Frame'] {
|
|||
}
|
||||
}
|
||||
|
||||
figure[typeof~='mw:File'],
|
||||
figure[typeof~='mw:File/Frameless'],
|
||||
figure[typeof~='mw:File/Thumb'],
|
||||
figure[typeof~='mw:File/Frame'] {
|
||||
figure[ typeof~='mw:File' ],
|
||||
figure[ typeof~='mw:File/Frameless' ],
|
||||
figure[ typeof~='mw:File/Thumb' ],
|
||||
figure[ typeof~='mw:File/Frame' ] {
|
||||
&.mw-halign-right {
|
||||
/* @noflip */
|
||||
margin-left: var(--space-lg);
|
||||
margin-left: var( --space-lg );
|
||||
/* @noflip */
|
||||
clear: right;
|
||||
/* @noflip */
|
||||
|
|
@ -106,7 +106,7 @@ figure[typeof~='mw:File/Frame'] {
|
|||
|
||||
&.mw-halign-left {
|
||||
/* @noflip */
|
||||
margin-right: var(--space-lg);
|
||||
margin-right: var( --space-lg );
|
||||
/* @noflip */
|
||||
clear: left;
|
||||
/* @noflip */
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
*
|
||||
* Date: 2022-11-18
|
||||
*/
|
||||
figure[typeof~='mw:File'],
|
||||
figure[typeof~='mw:File/Frameless'],
|
||||
figure[typeof~='mw:File/Thumb'],
|
||||
figure[typeof~='mw:File/Frame'] {
|
||||
figure[ typeof~='mw:File' ],
|
||||
figure[ typeof~='mw:File/Frameless' ],
|
||||
figure[ typeof~='mw:File/Thumb' ],
|
||||
figure[ typeof~='mw:File/Frame' ] {
|
||||
> a:first-child {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
|
@ -21,26 +21,26 @@ figure[typeof~='mw:File/Frame'] {
|
|||
}
|
||||
}
|
||||
|
||||
figure[typeof~='mw:File/Thumb'],
|
||||
figure[typeof~='mw:File/Frame'] {
|
||||
figure[ typeof~='mw:File/Thumb' ],
|
||||
figure[ typeof~='mw:File/Frame' ] {
|
||||
> a:first-child,
|
||||
> span:first-child {
|
||||
display: block;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
// Broken file styles
|
||||
&.new {
|
||||
padding: var(--space-sm);
|
||||
border: 1px dashed var(--border-color-base--darker);
|
||||
padding: var( --space-sm );
|
||||
border: 1px dashed var( --border-color-base--darker );
|
||||
transition: @transition-background, @transition-color;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-destructive--hover);
|
||||
background-color: var( --color-destructive--hover );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-destructive--active);
|
||||
background-color: var( --color-destructive--active );
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,26 +10,26 @@
|
|||
.mw_metadata,
|
||||
.mw-datatable,
|
||||
.wikitable {
|
||||
margin: var(--space-md) auto;
|
||||
margin: var( --space-md ) auto;
|
||||
border-collapse: collapse;
|
||||
|
||||
tbody {
|
||||
border: 0.5px solid var(--border-color-base);
|
||||
border: 0.5px solid var( --border-color-base );
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-right: var(--space-sm);
|
||||
padding-left: var(--space-sm);
|
||||
color: var(--color-base--emphasized);
|
||||
padding-right: var( --space-sm );
|
||||
padding-left: var( --space-sm );
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.125rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--color-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var( --color-base );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
letter-spacing: 0.05em;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
> * > tr > th,
|
||||
> * > tr > td {
|
||||
padding: 0.2em 0.4em;
|
||||
border: 0.5px solid var(--border-color-base);
|
||||
border: 0.5px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
th,
|
||||
td {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
padding: var( --space-xs ) var( --space-sm );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,16 +18,16 @@ table.floatright {
|
|||
/* @noflip */
|
||||
div.tleft,
|
||||
div.tright {
|
||||
margin: var(--space-xs) 0 var(--space-md) 0;
|
||||
margin: var( --space-xs ) 0 var( --space-md ) 0;
|
||||
}
|
||||
|
||||
.thumbcaption {
|
||||
// Sync with rounded corner
|
||||
padding-right: var(--border-radius--small);
|
||||
padding-right: var( --border-radius--small );
|
||||
// Sync with rounded corner
|
||||
padding-left: var(--border-radius--small);
|
||||
margin-top: var(--space-xs);
|
||||
color: var(--color-base--subtle);
|
||||
padding-left: var( --border-radius--small );
|
||||
margin-top: var( --space-xs );
|
||||
color: var( --color-base--subtle );
|
||||
letter-spacing: 0.025em;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -42,19 +42,19 @@ div.thumbinner {
|
|||
// Center thumbnail without float
|
||||
margin-left: auto;
|
||||
// Add background
|
||||
background-color: var(--background-color-overlay);
|
||||
background-color: var( --background-color-overlay );
|
||||
// We use the same font size for both caption and inner
|
||||
font-size: 0.8125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Do not float content in mobile view
|
||||
@media (min-width: @width-breakpoint-tablet) {
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
/* @noflip */
|
||||
div.tright,
|
||||
div.floatright,
|
||||
table.floatright {
|
||||
margin-left: var(--space-lg);
|
||||
margin-left: var( --space-lg );
|
||||
clear: right;
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -63,7 +63,7 @@ div.thumbinner {
|
|||
div.tleft,
|
||||
div.floatleft,
|
||||
table.floatleft {
|
||||
margin-right: var(--space-lg);
|
||||
margin-right: var( --space-lg );
|
||||
clear: left;
|
||||
float: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
.thumbinner {
|
||||
> a {
|
||||
display: block;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
&.image {
|
||||
max-width: inherit;
|
||||
|
|
@ -25,17 +25,17 @@
|
|||
|
||||
// Broken file styles
|
||||
&.new {
|
||||
padding: var(--space-sm);
|
||||
border: 1px dashed var(--border-color-base--darker);
|
||||
padding: var( --space-sm );
|
||||
border: 1px dashed var( --border-color-base--darker );
|
||||
transition: @transition-background, @transition-color;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-destructive--hover);
|
||||
background-color: var( --color-destructive--hover );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-destructive--active);
|
||||
background-color: var( --color-destructive--active );
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,33 +10,33 @@
|
|||
/* Links */
|
||||
// Some of the link styles are handled in content.links
|
||||
a {
|
||||
color: var(--color-link);
|
||||
color: var( --color-link );
|
||||
text-decoration: none;
|
||||
|
||||
&:not([href]) {
|
||||
&:not( [ href ] ) {
|
||||
cursor: pointer; /* Always cursor:pointer even without href */
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:visited:hover {
|
||||
color: var(--color-link--hover);
|
||||
color: var( --color-link--hover );
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-link--active);
|
||||
color: var( --color-link--active );
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--color-link--visited);
|
||||
color: var( --color-link--visited );
|
||||
}
|
||||
}
|
||||
|
||||
a:lang(ar),
|
||||
a:lang(kk-arab),
|
||||
a:lang(mzn),
|
||||
a:lang(ps),
|
||||
a:lang(ur) {
|
||||
a:lang( ar ),
|
||||
a:lang( kk-arab ),
|
||||
a:lang( mzn ),
|
||||
a:lang( ps ),
|
||||
a:lang( ur ) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -47,8 +47,8 @@ img {
|
|||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
margin: var(--space-xs) 0;
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
margin: var( --space-xs ) 0;
|
||||
}
|
||||
|
||||
/* Structural Elements */
|
||||
|
|
@ -61,22 +61,22 @@ h6 {
|
|||
margin: 0;
|
||||
// It seems that many wikis have the expectation that headers have a bottom margin
|
||||
margin-bottom: 0.5em;
|
||||
color: var(--color-base--emphasized);
|
||||
font-family: var(--fonts-serif);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var( --color-base--emphasized );
|
||||
font-family: var( --fonts-serif );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var( --font-weight-bold );
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-xs);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
line-height: var( --line-height-xs );
|
||||
}
|
||||
|
||||
h3,
|
||||
|
|
@ -91,37 +91,37 @@ h6 {
|
|||
|
||||
h1 {
|
||||
margin-top: 2em;
|
||||
font-size: var(--font-size-h1);
|
||||
font-size: var( --font-size-h1 );
|
||||
}
|
||||
|
||||
h1:not(.firstHeading) {
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
h1:not( .firstHeading ) {
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
margin-top: 0.5em;
|
||||
font-size: var(--font-size-h2);
|
||||
font-size: var( --font-size-h2 );
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-h3);
|
||||
font-size: var( --font-size-h3 );
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-h4);
|
||||
font-size: var( --font-size-h4 );
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--font-size-h5);
|
||||
font-size: var( --font-size-h5 );
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--font-size-h6);
|
||||
font-size: var( --font-size-h6 );
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(--space-xs) 0;
|
||||
margin: var( --space-xs ) 0;
|
||||
overflow-wrap: break-word; // Force wrap to preserve layout
|
||||
}
|
||||
|
||||
|
|
@ -132,25 +132,25 @@ p img {
|
|||
ul {
|
||||
// Will break a lot of styles if we use padding for horizontal spacing
|
||||
padding: 0;
|
||||
margin: var(--space-xs) 0 var(--space-xs) var(--space-lg);
|
||||
margin: var( --space-xs ) 0 var( --space-xs ) var( --space-lg );
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: var(--space-xs) 0 var(--space-xs) var(--space-lg);
|
||||
margin: var( --space-xs ) 0 var( --space-xs ) var( --space-lg );
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var(--color-base--emphasized);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: var(--space-xs) 0;
|
||||
margin: var( --space-xs ) 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: var(--space-lg);
|
||||
margin-left: var( --space-lg );
|
||||
}
|
||||
|
||||
pre,
|
||||
|
|
@ -159,28 +159,28 @@ tt,
|
|||
kbd,
|
||||
samp,
|
||||
.mw-code {
|
||||
font-family: var(--fonts-monospace);
|
||||
font-family: var( --fonts-monospace );
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
border: 1px solid var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
color: var(--color-base--emphasized);
|
||||
border: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
pre,
|
||||
.mw-code {
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
border-radius: var(--border-radius--large);
|
||||
border-radius: var( --border-radius--large );
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
|
|
@ -193,14 +193,14 @@ table {
|
|||
|
||||
/* Forms */
|
||||
fieldset {
|
||||
padding: var(--space-xs);
|
||||
border: 1px solid var(--border-color-base);
|
||||
margin: var(--space-xs) 0;
|
||||
padding: var( --space-xs );
|
||||
border: 1px solid var( --border-color-base );
|
||||
margin: var( --space-xs ) 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: var(--space-xxs);
|
||||
color: var(--color-base--subtle);
|
||||
padding: var( --space-xxs );
|
||||
color: var( --color-base--subtle );
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,40 +12,40 @@
|
|||
.mw-content-rtl .mw-content-ltr ul {
|
||||
padding: 0;
|
||||
/* @noflip */
|
||||
margin: var(--space-xs) 0 var(--space-xs) var(--space-lg);
|
||||
margin: var( --space-xs ) 0 var( --space-xs ) var( --space-lg );
|
||||
}
|
||||
|
||||
.mw-content-rtl ul,
|
||||
.mw-content-ltr .mw-content-rtl ul {
|
||||
padding: 0;
|
||||
/* @noflip */
|
||||
margin: var(--space-xs) var(--space-lg) var(--space-xs) 0;
|
||||
margin: var( --space-xs ) var( --space-lg ) var( --space-xs ) 0;
|
||||
}
|
||||
|
||||
.mw-content-ltr ol,
|
||||
.mw-content-rtl .mw-content-ltr ol {
|
||||
padding: 0;
|
||||
/* @noflip */
|
||||
margin: var(--space-xs) 0 var(--space-xs) var(--space-lg);
|
||||
margin: var( --space-xs ) 0 var( --space-xs ) var( --space-lg );
|
||||
}
|
||||
|
||||
.mw-content-rtl ol,
|
||||
.mw-content-ltr .mw-content-rtl ol {
|
||||
padding: 0;
|
||||
/* @noflip */
|
||||
margin: var(--space-xs) var(--space-lg) var(--space-xs) 0;
|
||||
margin: var( --space-xs ) var( --space-lg ) var( --space-xs ) 0;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.mw-content-ltr dd,
|
||||
.mw-content-rtl .mw-content-ltr dd {
|
||||
margin-right: 0;
|
||||
margin-left: var(--space-lg);
|
||||
margin-left: var( --space-lg );
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.mw-content-rtl dd,
|
||||
.mw-content-ltr .mw-content-rtl dd {
|
||||
margin-right: var(--space-lg);
|
||||
margin-right: var( --space-lg );
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
.mw-editsection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: var(--space-sm);
|
||||
margin-left: var( --space-sm );
|
||||
float: right; // Can't target the container so have to use to float
|
||||
user-select: none;
|
||||
|
||||
|
|
@ -22,16 +22,16 @@
|
|||
|
||||
// Fallback text button if extensions register those
|
||||
a {
|
||||
padding: var(--space-xxs);
|
||||
border-radius: var(--border-radius--small);
|
||||
padding: var( --space-xxs );
|
||||
border-radius: var( --border-radius--small );
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
.citizen-editsection-icon,
|
||||
.Wikiplus-Edit-SectionBtn { // HACK: for Wikiplus
|
||||
.resource-loader-icon-link-small;
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
text-indent: -9999px; // Hide text
|
||||
transition: @transition-opacity;
|
||||
|
||||
|
|
@ -50,11 +50,11 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,13 +64,13 @@
|
|||
/* @noflip */
|
||||
margin-right: 0;
|
||||
/* @noflip */
|
||||
margin-left: var(--space-sm);
|
||||
margin-left: var( --space-sm );
|
||||
}
|
||||
|
||||
.mw-content-rtl .mw-editsection,
|
||||
.mw-content-ltr .mw-content-rtl .mw-editsection {
|
||||
/* @noflip */
|
||||
margin-right: var(--space-sm);
|
||||
margin-right: var( --space-sm );
|
||||
/* @noflip */
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
|
||||
.mw-message-box {
|
||||
overflow: hidden;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-2);
|
||||
color: var(--color-base--emphasized);
|
||||
padding: var( --space-sm ) var( --space-md );
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-base--emphasized );
|
||||
/* Standard property is `overflow-wrap` */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -28,15 +28,15 @@
|
|||
}
|
||||
|
||||
&-error {
|
||||
background-color: var(--background-color-destructive);
|
||||
background-color: var( --background-color-destructive );
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: var(--background-color-warning);
|
||||
background-color: var( --background-color-warning );
|
||||
}
|
||||
|
||||
&-success {
|
||||
background-color: var(--background-color-success);
|
||||
background-color: var( --background-color-success );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@
|
|||
|
||||
#siteSub {
|
||||
display: block;
|
||||
margin-top: var(--space-xxs);
|
||||
margin-top: var( --space-xxs );
|
||||
}
|
||||
|
||||
#siteSub,
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
line-height: var(--line-height-xs);
|
||||
line-height: var( --line-height-xs );
|
||||
}
|
||||
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
margin-bottom: var(--space-md);
|
||||
margin-bottom: var( --space-md );
|
||||
}
|
||||
|
||||
// Reduced spacing if both sub1 and 2 exists
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
clear: both;
|
||||
gap: var(--space-xl);
|
||||
gap: var( --space-xl );
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: var(--space-xs) 0 0 0;
|
||||
margin: var( --space-xs ) 0 0 0;
|
||||
/* Reset font */
|
||||
font-size: 0.8125rem;
|
||||
gap: var(--space-xs);
|
||||
gap: var( --space-xs );
|
||||
letter-spacing: 0; // hidden-catlink title does not have a selector
|
||||
}
|
||||
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
// Be more specific because gadgets like hotcat can attach links in category
|
||||
> a {
|
||||
display: inline-block;
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border: 1px solid var(--border-color-base--darker);
|
||||
border-radius: var(--border-radius--pill);
|
||||
color: var(--color-base--subtle);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
border: 1px solid var( --border-color-base--darker );
|
||||
border-radius: var( --border-radius--pill );
|
||||
color: var( --color-base--subtle );
|
||||
transition: @transition-background;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary--hover);
|
||||
background-color: var( --color-primary--hover );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
border-style: dashed;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-destructive--hover);
|
||||
background-color: var( --color-destructive--hover );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
.mw-normal-catlinks > a,
|
||||
.mw-hidden-catlinks {
|
||||
display: block;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
|
|||
文件差异内容过多而无法显示
加载差异
|
|
@ -11,30 +11,30 @@
|
|||
.ajaxpoll {
|
||||
/* Responsive to container */
|
||||
width: auto;
|
||||
padding: var(--space-xl);
|
||||
padding: var( --space-xl );
|
||||
border-color: transparent;
|
||||
border-radius: var(--border-radius--medium);
|
||||
border-radius: var( --border-radius--medium );
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-question {
|
||||
color: var(--color-base--emphasized);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-answer-name,
|
||||
.ajaxpoll-answer-name-revoke {
|
||||
margin-top: var(--space-xs);
|
||||
margin-top: var( --space-xs );
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-hover-vote {
|
||||
background: var(--color-destructive);
|
||||
background: var( --color-destructive );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-hover-revoke {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-answer-vote {
|
||||
|
|
@ -43,10 +43,10 @@
|
|||
overflow: hidden;
|
||||
height: 2rem;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
background-color: var(--color-surface-3);
|
||||
border-bottom-left-radius: var(--border-radius--medium);
|
||||
border-bottom-right-radius: var(--border-radius--medium);
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-3 );
|
||||
border-bottom-left-radius: var( --border-radius--medium );
|
||||
border-bottom-right-radius: var( --border-radius--medium );
|
||||
font-size: 0.8125rem;
|
||||
place-content: center;
|
||||
}
|
||||
|
|
@ -56,35 +56,35 @@
|
|||
height: auto;
|
||||
box-sizing: border-box;
|
||||
border-right: 0;
|
||||
border-right: 2px solid var(--border-color-base);
|
||||
background: var(--color-surface-2);
|
||||
border-right: 2px solid var( --border-color-base );
|
||||
background: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-our-vote div {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 0;
|
||||
border-right: 2px solid var(--color-primary);
|
||||
background-color: var(--background-color-primary--active);
|
||||
border-right: 2px solid var( --color-primary );
|
||||
background-color: var( --background-color-primary--active );
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-answer-vote span {
|
||||
position: initial;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.ajaxpoll label {
|
||||
display: block;
|
||||
padding: var(--space-xs);
|
||||
background-color: var(--color-surface-2);
|
||||
border-top-left-radius: var(--border-radius--medium);
|
||||
border-top-right-radius: var(--border-radius--medium);
|
||||
padding: var( --space-xs );
|
||||
background-color: var( --color-surface-2 );
|
||||
border-top-left-radius: var( --border-radius--medium );
|
||||
border-top-right-radius: var( --border-radius--medium );
|
||||
cursor: pointer;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var( --font-weight-medium );
|
||||
|
||||
// Added active state
|
||||
&:active {
|
||||
background-color: var(--color-surface-2--active);
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -93,20 +93,20 @@
|
|||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-checkevent {
|
||||
background: var(--color-success);
|
||||
background: var( --color-success );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-misc {
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-ajax {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--border-radius--small);
|
||||
margin-bottom: var(--space-md);
|
||||
background: var(--color-surface-2);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
border-radius: var( --border-radius--small );
|
||||
margin-bottom: var( --space-md );
|
||||
background: var( --color-surface-2 );
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
|
|
@ -114,12 +114,12 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--space-md);
|
||||
color: var(--color-base--subtle);
|
||||
margin-top: var( --space-md );
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.ajaxpoll .ajaxpoll-id-info {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
float: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
&::before,
|
||||
&::after,
|
||||
& .mw-search-spinner-bounce {
|
||||
background-color: var(--color-base--subtle);
|
||||
background-color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,37 +9,37 @@
|
|||
*/
|
||||
|
||||
.mw-advancedSearch-container {
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
margin-top: var(--space-xs);
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
margin-top: var( --space-xs );
|
||||
}
|
||||
|
||||
// Align with Citizen label styles
|
||||
.mw-advancedSearch-searchPreview-label,
|
||||
.advancedsearch-namespacesPreview-label {
|
||||
margin-right: var(--space-xs);
|
||||
color: var(--color-base--subtle);
|
||||
margin-right: var( --space-xs );
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.875rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-weight: var( --font-weight-normal );
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.mw-advancedSearch-fieldContainer {
|
||||
max-width: none;
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
margin-top: 0;
|
||||
background: var(--color-surface-2);
|
||||
background: var( --color-surface-2 );
|
||||
|
||||
fieldset {
|
||||
border-top-color: var(--border-color-base);
|
||||
margin-top: var(--space-md);
|
||||
border-top-color: var( --border-color-base );
|
||||
margin-top: var( --space-md );
|
||||
}
|
||||
|
||||
.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
|
||||
background: var(--color-surface-2);
|
||||
color: var(--color-base--subtle);
|
||||
background: var( --color-surface-2 );
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.875rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-weight: var( --font-weight-normal );
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
|
@ -58,13 +58,13 @@
|
|||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Added active state
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
|
||||
// HACK: Flip indicator when expanded
|
||||
|
|
@ -72,9 +72,9 @@
|
|||
transition: opacity 100ms, transform 250ms ease;
|
||||
}
|
||||
|
||||
&[aria-expanded='true'] {
|
||||
&[ aria-expanded='true' ] {
|
||||
.oo-ui-indicator-down {
|
||||
transform: rotate3d(1, 0, 0, 180deg);
|
||||
transform: rotate3d( 1, 0, 0, 180deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -87,20 +87,20 @@
|
|||
|
||||
.mw-advancedSearch-namespace-selection-header {
|
||||
> .mw-advancedSearch-namespace-search-in-label {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-advancedSearch-namespace-selection {
|
||||
max-width: none;
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
margin-top: 0;
|
||||
background: var(--color-surface-2);
|
||||
background: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.mw-advancedSearch-namespace-border {
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -109,20 +109,20 @@
|
|||
}
|
||||
|
||||
.mw-advancedSearch-namespaceFilter .oo-ui-tagMultiselectWidget-handle {
|
||||
border-radius: 0 0 var(--border-radius--small) var(--border-radius--small);
|
||||
border-radius: 0 0 var( --border-radius--small ) var( --border-radius--small );
|
||||
}
|
||||
|
||||
.mw-advancedSearch-namespaceFilter .oo-ui-tagMultiselectWidget-input .oo-ui-inputWidget-input {
|
||||
background-color: var(--color-surface-0);
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
|
||||
&.selected {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--background-color-primary--hover);
|
||||
border-color: var( --color-primary );
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
}
|
||||
|
||||
.oo-ui-popupWidget-popup .mw-advancedSearch-tooltip-head {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
* Highlight approved rev in revision history
|
||||
**/
|
||||
.approved-revision {
|
||||
background-color: var(--background-color-success) !important;
|
||||
background-color: var( --background-color-success ) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
.mw-babel-wrapper {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
color: #202122; // Easier to just hardcode it
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
.mw-capiunto-infobox {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
color: var(--color-base);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@
|
|||
*/
|
||||
|
||||
span.cargoFieldName {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
table.cargoTable.noMerge tr:nth-child(odd) {
|
||||
table.cargoTable.noMerge tr:nth-child( odd ) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
table.cargoTable.noMerge tr:nth-child(even) {
|
||||
background: var(--background-color-quiet--hover);
|
||||
table.cargoTable.noMerge tr:nth-child( even ) {
|
||||
background: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
table.cargoTable.mergeSimilarCells td.odd {
|
||||
|
|
@ -25,42 +25,42 @@ table.cargoTable.mergeSimilarCells td.odd {
|
|||
}
|
||||
|
||||
table.cargoTable.mergeSimilarCells td.even {
|
||||
background: var(--background-color-quiet--hover);
|
||||
background: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
table.cargoTable td {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
div.cargoReplacementTableInfo {
|
||||
border-color: var(--border-color-base);
|
||||
background: var(--color-surface-3);
|
||||
border-color: var( --border-color-base );
|
||||
background: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
.addButton {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.deleteButton {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
div.specialCargoQuery-extraPane {
|
||||
border-color: var(--border-color-base);
|
||||
background: linear-gradient(transparent, var(--color-surface-2) 0.5em);
|
||||
border-color: var( --border-color-base );
|
||||
background: linear-gradient( transparent, var( --color-surface-2 ) 0.5em );
|
||||
}
|
||||
|
||||
.ui-state-focus {
|
||||
background: var(--color-primary--active) !important;
|
||||
background: var( --color-primary--active ) !important;
|
||||
}
|
||||
|
||||
.ui-menu .ui-menu-item a {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
table.cargo-tablelist.mw-datatable tr.cargo-tablelist-replacement-row:hover td,
|
||||
.cargo-tablelist-replacement-row > td {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@
|
|||
.CategoryTreeEmptyBullet,
|
||||
.CategoryTreeBullet {
|
||||
/* Fix skewed toggle caused by Roboto */
|
||||
font-family: var(--fonts-sans);
|
||||
font-family: var( --fonts-sans );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@
|
|||
@import '../../../resources/variables.less';
|
||||
|
||||
.mw-references-wrap {
|
||||
margin-top: var(--space-md);
|
||||
color: var(--color-base);
|
||||
margin-top: var( --space-md );
|
||||
color: var( --color-base );
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.mw-body-content {
|
||||
.references {
|
||||
margin: 0 var(--space-xl);
|
||||
margin: 0 var( --space-xl );
|
||||
|
||||
li {
|
||||
margin-bottom: var(--space-xxs);
|
||||
margin-bottom: var( --space-xxs );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,6 @@ span.reference {
|
|||
.skin-citizen {
|
||||
ol.references li:target,
|
||||
sup.reference:target {
|
||||
background-color: var(--background-color-primary--hover);
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
*/
|
||||
|
||||
.ext-cc-language-selector__trigger {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.ext-cc-language-selector__trigger::after {
|
||||
border-top-color: var(--color-primary);
|
||||
border-top-color: var( --color-primary );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,19 +16,19 @@
|
|||
max-width: @width-breakpoint-tablet;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--padding-page);
|
||||
border-radius: var(--border-radius--large);
|
||||
padding: 0 var( --padding-page );
|
||||
border-radius: var( --border-radius--large );
|
||||
margin: 10px;
|
||||
background-color: #343a40; // dark base 70
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
font-size: 0.875rem;
|
||||
line-height: var(--line-height-sm);
|
||||
line-height: var( --line-height-sm );
|
||||
|
||||
.mw-cookiewarning-text {
|
||||
padding: 20px 0;
|
||||
margin-bottom: 0; // Override media styles
|
||||
font-size: inherit;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var( --font-weight-medium );
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @width-breakpoint-tablet) {
|
||||
@media only screen and ( max-width: @width-breakpoint-tablet ) {
|
||||
.mw-cookiewarning-container {
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,16 +12,16 @@
|
|||
|
||||
.dt-ui-replyWidget {
|
||||
&-footer {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
&-preview {
|
||||
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
|
||||
background: var(--color-surface-2);
|
||||
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
|
||||
background: var( --color-surface-2 );
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @width-breakpoint-tablet) {
|
||||
@media only screen and ( max-width: @width-breakpoint-tablet ) {
|
||||
.dt-ui-replyWidget {
|
||||
// HACK: Make the toolbar two line on mobile
|
||||
// So that they are not overlapping
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.mw-headline {
|
||||
font-family: var(--fonts-serif);
|
||||
font-family: var( --fonts-serif );
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.ext-discussiontools-init-section .mw-headline {
|
||||
flex: 1 0 100% !important;
|
||||
}
|
||||
|
|
@ -52,12 +52,12 @@
|
|||
.dt-init-replylink {
|
||||
// Similar to mw-editsection-bracket
|
||||
&-bracket {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
.dt-init-replylink-open & > a {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
&::before {
|
||||
display: block;
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
content: '\00d7'; // close icon
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
|
|
@ -22,13 +22,13 @@
|
|||
|
||||
&:hover {
|
||||
&::before {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&::before {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
&-body {
|
||||
// Default has top and bottom margin
|
||||
// So bottom margin is added to respect it
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
margin: 0 0 var( --space-md ) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
.mw-echo-ui-datedSubGroupListWidget {
|
||||
.mw-body-content &-title {
|
||||
&-secondary {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
/* mw.echo.ui.NotificationsInboxWidget.less */
|
||||
.mw-echo-ui-notificationsInboxWidget {
|
||||
&-toolbarWrapper {
|
||||
background: var(--color-surface-0);
|
||||
background: var( --color-surface-0 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -28,37 +28,37 @@
|
|||
.mw-echo-ui-pageNotificationsOptionWidget {
|
||||
&.oo-ui-optionWidget {
|
||||
&-highlighted {
|
||||
background-color: var(--color-surface-3);
|
||||
color: var(--color-base--emphasized);
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&-selected {
|
||||
background-color: var(--background-color-primary);
|
||||
color: var(--color-primary);
|
||||
background-color: var( --background-color-primary );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
&-selected&-highlighted,
|
||||
&-pressed&-highlighted {
|
||||
background-color: var(--background-color-primary--hover);
|
||||
color: var(--color-primary--hover);
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&-label-count {
|
||||
background-color: var(--color-surface-3);
|
||||
color: var(--color-base--subtle);
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--subtle );
|
||||
|
||||
.oo-ui-optionWidget-selected & {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.CrossWikiUnreadFilterWidget.less */
|
||||
.mw-echo-ui-crossWikiUnreadFilterWidget {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
|
||||
&-subtitle {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@
|
|||
*/
|
||||
|
||||
.mw-echo-alert {
|
||||
background-color: var(--color-warning);
|
||||
color: var(--color-base--emphasized);
|
||||
background-color: var( --color-warning );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,54 +12,54 @@
|
|||
#pt-notifications-alert &,
|
||||
#pt-notifications-notice & {
|
||||
top: 0;
|
||||
width: var(--header-button-size);
|
||||
height: var(--header-button-size);
|
||||
width: var( --header-button-size );
|
||||
height: var( --header-button-size );
|
||||
box-sizing: content-box;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
margin: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--header-icon-size);
|
||||
opacity: var(--opacity-icon-base);
|
||||
background-size: var( --header-icon-size );
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--color-primary);
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var( --color-primary );
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
|
||||
&::after {
|
||||
border-color: var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
border-color: var(--color-destructive);
|
||||
border-radius: var(--border-radius--pill);
|
||||
background-color: var(--color-destructive);
|
||||
border-color: var( --color-destructive );
|
||||
border-radius: var( --border-radius--pill );
|
||||
background-color: var( --color-destructive );
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
&-dimmed {
|
||||
opacity: var(--opacity-icon-base--disabled);
|
||||
opacity: var( --opacity-icon-base--disabled );
|
||||
}
|
||||
|
||||
&.mw-echo-notifications-badge-all-read {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -67,11 +67,11 @@
|
|||
&.oo-ui-flaggedElement-unseen,
|
||||
&.mw-echo-unseen-notifications {
|
||||
#pt-notifications-alert &::after {
|
||||
background-color: var(--color-destructive);
|
||||
background-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
#pt-notifications-notice &::after {
|
||||
background-color: var(--color-destructive);
|
||||
background-color: var( --color-destructive );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -80,13 +80,13 @@
|
|||
#pt-notifications-alert,
|
||||
#pt-notifications-notice {
|
||||
z-index: 1; // fix background clipping
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,25 +11,25 @@
|
|||
/* mw.echo.notifications.less */
|
||||
.mw-echo-state {
|
||||
.mw-echo-notification {
|
||||
background-color: var(--color-surface-0);
|
||||
color: var(--color-base--subtle);
|
||||
background-color: var( --color-surface-0 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.mw-echo-notifications {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.mw-echo-content {
|
||||
.mw-echo-title {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.mw-echo-payload {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.mw-echo-notification-footer {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,38 +9,38 @@
|
|||
*/
|
||||
|
||||
.mw-echo-date-section {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
color: var(--color-base--subtle);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.mw-echo-special-navbar-bottom {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.mw-echo-special-notifications {
|
||||
.mw-echo-notification {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-surface-2--active);
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
|
||||
&-unread {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
|
||||
.mw-echo-markAsReadButton {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,14 +17,14 @@
|
|||
&-head {
|
||||
box-sizing: content-box; // fix overflow
|
||||
padding-top: 8px; // align with other menus
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
|
||||
> .oo-ui-iconWidget {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
> .oo-ui-labelElement-label {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
&-footer {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
|
||||
display: flex;
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
width: 100%; // Buttons fill up the empty space
|
||||
|
||||
&:last-child {
|
||||
border-left-color: var(--border-color-base);
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@
|
|||
@import '../../../resources/mixins.less';
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
margin: var(--space-xs);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
margin: var( --space-xs );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
}
|
||||
|
||||
/* mw.echo.ui.mobile.less */
|
||||
@media all and (max-width: 720px) {
|
||||
@media all and ( max-width: 720px ) {
|
||||
.mw-echo-ui-overlay {
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
right: 0 !important;
|
||||
|
|
@ -38,32 +38,32 @@
|
|||
|
||||
/* mw.echo.ui.NotificationItemWidget.less */
|
||||
.mw-echo-ui-notificationItemWidget {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-3);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-3 );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-surface-2--active);
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&-unread {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&-notify {
|
||||
&-description {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -76,11 +76,11 @@
|
|||
&-content {
|
||||
&-message {
|
||||
&-header {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&-body {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,32 +98,32 @@
|
|||
}
|
||||
|
||||
.mw-echo-ui-menuItemWidget-prioritized {
|
||||
border-radius: var(--border-radius-small);
|
||||
border-radius: var( --border-radius-small );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
&-timestamp {
|
||||
display: block;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
&-content-message {
|
||||
&-header {
|
||||
em {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -156,68 +156,68 @@
|
|||
|
||||
@-webkit-keyframes unseen-fadeout-to-unread {
|
||||
from {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unseen-fadeout-to-unread {
|
||||
from {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes unseen-fadeout-to-read {
|
||||
from {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: var(--color-surface-3);
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unseen-fadeout-to-read {
|
||||
from {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: var(--color-surface-3);
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.ToggleReadCircleButtonWidget.less */
|
||||
.mw-echo-ui-toggleReadCircleButtonWidget {
|
||||
&-circle {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var( --color-primary );
|
||||
|
||||
&-unread {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
|
||||
background-color: var(--color-primary--hover);
|
||||
background-color: var( --color-primary--hover );
|
||||
|
||||
&-unread {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active .mw-echo-ui-toggleReadCircleButtonWidget-circle {
|
||||
background-color: var(--color-primary--active);
|
||||
background-color: var( --color-primary--active );
|
||||
|
||||
&-unread {
|
||||
background-color: var(--color-surface-2--active);
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -226,16 +226,16 @@
|
|||
.mw-echo-ui-crossWikiNotificationItemWidget,
|
||||
.mw-echo-ui-bundleNotificationItemWidget {
|
||||
&-separator {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&-group {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.mw-echo-ui-subGroupListWidget-header {
|
||||
&-row-title {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -244,18 +244,18 @@
|
|||
.mw-echo-ui-notificationsListWidget {
|
||||
> a,
|
||||
&:hover > a {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
&:not(:hover) a,
|
||||
#p-personal &:not(:hover) a.new {
|
||||
color: var(--color-base--subtle);
|
||||
&:not( :hover ) a,
|
||||
#p-personal &:not( :hover ) a.new {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.PlaceholderItemWidget.less */
|
||||
.mw-echo-ui-placeholderItemWidget {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
/* mw.echo.ui.MenuItemWidget.less */
|
||||
|
|
@ -263,32 +263,32 @@
|
|||
// First selector is polyfill for MW 1.35
|
||||
> .oo-ui-labelElement-label,
|
||||
> .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&-prioritized {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
&-dynamic-action {
|
||||
&:hover {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.mw-echo-ui-menuItemWidget-description {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-echo-ui-actionMenuPopupWidget-menu:hover {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
.skin-citizen {
|
||||
.vega {
|
||||
background: var(--color-surface-0);
|
||||
background: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
/* responsive layout */
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
/* dark mode */
|
||||
&-dark {
|
||||
.mw-graph canvas {
|
||||
filter: invert(1) hue-rotate(180deg);
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -29,56 +29,56 @@
|
|||
.mw-graph-interactable {
|
||||
&:hover {
|
||||
.mw-graph-layover {
|
||||
background-color: var(--background-color-overlay--lighter);
|
||||
background-color: var( --background-color-overlay--lighter );
|
||||
}
|
||||
|
||||
.mw-graph-switch {
|
||||
&.mw-graph-loading {
|
||||
background-color: var(--color-surface-0);
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface-0);
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-graph-hover-title {
|
||||
background-color: var(--color-surface-0);
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
/* common button style */
|
||||
.mw-graph-switch {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--background-color-overlay--lighter);
|
||||
color: var(--color-base);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --background-color-overlay--lighter );
|
||||
color: var( --color-base );
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-surface-0);
|
||||
color: var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
background-color: var( --color-surface-0 );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--color-primary--active);
|
||||
background-color: var(--color-surface-0);
|
||||
color: var(--color-primary);
|
||||
border-color: var( --color-primary--active );
|
||||
background-color: var( --color-surface-0 );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--color-surface-0);
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-surface-0 );
|
||||
}
|
||||
|
||||
/* Loading button style */
|
||||
&.mw-graph-loading {
|
||||
border-color: var(--color-primary--active);
|
||||
background-color: var(--color-surface-0);
|
||||
color: var(--color-base--subtle);
|
||||
border-color: var( --color-primary--active );
|
||||
background-color: var( --color-surface-0 );
|
||||
color: var( --color-base--subtle );
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,5 +9,5 @@
|
|||
*/
|
||||
|
||||
table.mw-interwikitable.body td.mw-interwikitable-local-yes {
|
||||
background: var(--background-color-success);
|
||||
background: var( --background-color-success );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,18 @@
|
|||
*/
|
||||
@media screen {
|
||||
span.mw-lingo-term {
|
||||
border-bottom-color: var(--color-base--subtle);
|
||||
border-bottom-color: var( --color-base--subtle );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-lingo-tooltip {
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--medium);
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow--dialog);
|
||||
color: var(--color-base);
|
||||
border-radius: var( --border-radius--medium );
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow--dialog );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@
|
|||
|
||||
#managewiki {
|
||||
.managewiki-submit-formfields {
|
||||
border-top-color: var(--border-color-base);
|
||||
background: var(--color-surface-0);
|
||||
box-shadow: 0 -4px 4px -4px var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
background: var( --color-surface-0 );
|
||||
box-shadow: 0 -4px 4px -4px var( --border-color-base );
|
||||
}
|
||||
}
|
||||
|
||||
.managewiki-tabs-wrapper.oo-ui-panelLayout-framed,
|
||||
.managewiki-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
/* JavaScript disabled */
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.managewiki-tabs {
|
||||
.managewiki-section-fieldset {
|
||||
> .oo-ui-fieldsetLayout-group {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@
|
|||
|
||||
// grayscale fallback if SVG from data url is not supported
|
||||
@lightness: lightness(@color);
|
||||
filter: saturate(0%) brightness(0%) invert(@lightness) opacity(@a);
|
||||
filter: saturate( 0% ) brightness( 0% ) invert( @lightness ) opacity( @a );
|
||||
|
||||
// color filter
|
||||
@svg-filter-id: "recolor";
|
||||
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="@{svg-filter-id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 @{r} 0 0 0 0 @{g} 0 0 0 0 @{b} 0 0 0 @{a} 0"/></filter></svg> #@{svg-filter-id}');
|
||||
filter: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="@{svg-filter-id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 @{r} 0 0 0 0 @{g} 0 0 0 0 @{b} 0 0 0 @{a} 0"/></filter></svg> #@{svg-filter-id}' );
|
||||
}
|
||||
|
||||
.mwe-math-fallback-image-display,
|
||||
|
|
|
|||
文件差异内容过多而无法显示
加载差异
|
|
@ -10,6 +10,6 @@
|
|||
|
||||
.client-js {
|
||||
.section-heading .mw-ui-icon {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
#msupload {
|
||||
&-div {
|
||||
border-top: 0;
|
||||
background: var(--color-surface-1);
|
||||
background: var( --color-surface-1 );
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -24,50 +24,50 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border-color: var(--border-color-base--darker);
|
||||
border-color: var( --border-color-base--darker );
|
||||
margin: 8px;
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
font-size: 0.875rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var( --font-weight-medium );
|
||||
}
|
||||
|
||||
&-list {
|
||||
.file {
|
||||
border-top-color: var(--border-color-base);
|
||||
background: var(--color-surface-2);
|
||||
border-top-color: var( --border-color-base );
|
||||
background: var( --color-surface-2 );
|
||||
|
||||
.file-name {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
.file-size {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.file-warning,
|
||||
.file-error {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: var(--background-color-success);
|
||||
background-color: var( --background-color-success );
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: var(--background-color-warning);
|
||||
background-color: var( --background-color-warning );
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: var(--background-color-destructive);
|
||||
background-color: var( --background-color-destructive );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
height: auto;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
|
||||
#msupload-files {
|
||||
height: auto;
|
||||
|
|
@ -94,26 +94,26 @@
|
|||
font-size: 0.875rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
border-left-color: var(--border-color-base);
|
||||
background-color: var(--border-color-base);
|
||||
border-left-color: var( --border-color-base );
|
||||
background-color: var( --border-color-base );
|
||||
}
|
||||
}
|
||||
|
||||
&-select,
|
||||
&-bottom #msupload-files {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A");
|
||||
background-image: url( data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A );
|
||||
}
|
||||
}
|
||||
|
||||
.drop-over {
|
||||
background-color: var(--background-color-success);
|
||||
background-color: var( --background-color-success );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@
|
|||
/* mmv.ui.dialog.less */
|
||||
.mw-mmv-dialog {
|
||||
right: @mmv-width-toolbar;
|
||||
border-radius: var(--border-radius--medium);
|
||||
margin: var(--space-xs);
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
border-radius: var( --border-radius--medium );
|
||||
margin: var( --space-xs );
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
|
||||
// The dialog will always show above the metadata in mobile view
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
top: unset !important;
|
||||
right: 0 !important;
|
||||
bottom: @mmv-height-abovethefold !important;
|
||||
|
|
@ -37,16 +37,16 @@
|
|||
right: @mmv-width-toolbar;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
|
||||
// Hide arrow since the dialog is no longer relative
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-dialog-warning {
|
||||
background-color: var(--color-warning);
|
||||
background-color: var( --color-warning );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,33 +55,33 @@
|
|||
bottom: @mmv-height-abovethefold;
|
||||
|
||||
.mw-mmv-reuse-tabs {
|
||||
border-radius: var(--border-radius--medium) var(--border-radius--medium) 0 0; // Sync with dialog
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0; // Sync with dialog
|
||||
border-bottom-color: var( --border-color-base );
|
||||
|
||||
.oo-ui-optionWidget {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
padding: var( --space-xs ) var( --space-sm );
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
|
||||
&.oo-ui-optionWidget-highlighted {
|
||||
border-bottom: 0; // border will cause reflow
|
||||
box-shadow: inset 0 -2px 0 0 var(--color-primary--hover);
|
||||
box-shadow: inset 0 -2px 0 0 var( --color-primary--hover );
|
||||
}
|
||||
|
||||
&.oo-ui-optionWidget-selected,
|
||||
&.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected {
|
||||
border-bottom: 0; // border will cause reflow
|
||||
box-shadow: inset 0 -2px 0 0 var(--color-primary);
|
||||
box-shadow: inset 0 -2px 0 0 var( --color-primary );
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: var(--border-radius--medium) 0 0 0;
|
||||
border-radius: var( --border-radius--medium ) 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-reuse-pane {
|
||||
padding: var(--space-md);
|
||||
padding: var( --space-md );
|
||||
}
|
||||
|
||||
.mw-mmv-dialog-down-arrow {
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
}
|
||||
|
||||
.mw-mmv-dialog-warning {
|
||||
padding: var(--space-md) var(--space-xl);
|
||||
padding: var( --space-md ) var( --space-xl );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,28 +98,28 @@
|
|||
bottom: @mmv-height-abovethefold;
|
||||
|
||||
.mw-mmv-download-size .oo-ui-optionWidget {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
padding: var( --space-sm ) var( --space-md );
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.mw-mmv-dialog-down-arrow {
|
||||
bottom: @mmv-height-abovethefold + @mmv-button-size + @mmv-button-size / 2;
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.mw-mmv-dialog-warning {
|
||||
padding: var(--space-md) var(--space-xl);
|
||||
padding: var( --space-md ) var( --space-xl );
|
||||
}
|
||||
}
|
||||
|
||||
/* mmv.ui.viewingOptions.less */
|
||||
.mw-mmv-options-dialog {
|
||||
top: 0;
|
||||
padding: var(--space-md);
|
||||
padding: var( --space-md );
|
||||
|
||||
&.mw-mmv-enable-confirmation-shown {
|
||||
background-color: var(--background-color-success);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
background-color: var( --background-color-success );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
|
||||
// Hide arrow since those are notifications
|
||||
.mw-mmv-dialog-down-arrow {
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
}
|
||||
|
||||
&.mw-mmv-disable-confirmation-shown {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
|
||||
// Hide arrow since those are notifications
|
||||
.mw-mmv-dialog-down-arrow {
|
||||
|
|
@ -142,34 +142,34 @@
|
|||
|
||||
.mw-mmv-disable-confirmation {
|
||||
.mw-mmv-options-dialog-header {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.mw-mmv-options-text-header {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-enable-confirmation {
|
||||
.mw-mmv-options-dialog-header {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.mw-mmv-options-text-header {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-options-submit {
|
||||
margin-top: var(--space-md);
|
||||
margin-top: var( --space-md );
|
||||
}
|
||||
|
||||
// Just use flex layout
|
||||
.mw-mmv-options-subcontainer {
|
||||
display: flex;
|
||||
margin-top: var(--space-md);
|
||||
gap: var(--space-sm);
|
||||
margin-top: var( --space-md );
|
||||
gap: var( --space-sm );
|
||||
}
|
||||
|
||||
.mw-mmv-options-subcontainer .mw-mmv-options-text {
|
||||
|
|
@ -177,37 +177,37 @@
|
|||
}
|
||||
|
||||
.mw-mmv-options-dialog-header {
|
||||
margin: 0 0 var(--space-xs) 0;
|
||||
color: var(--color-base--emphasized);
|
||||
margin: 0 0 var( --space-xs ) 0;
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
.mw-mmv-options-text-header {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.mw-mmv-options-text-body {
|
||||
margin-top: var(--space-xs);
|
||||
color: var(--color-base--subtle);
|
||||
margin-top: var( --space-xs );
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.mw-mmv-options-enable-alert {
|
||||
position: unset;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
padding: var( --space-sm ) var( --space-md );
|
||||
margin: ~'calc( var(--space-md ) * -1)';
|
||||
margin-bottom: var(--space-md);
|
||||
background-color: var(--color-warning);
|
||||
border-top-left-radius: var(--border-radius--medium);
|
||||
border-top-right-radius: var(--border-radius--medium);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: var( --space-md );
|
||||
background-color: var( --color-warning );
|
||||
border-top-left-radius: var( --border-radius--medium );
|
||||
border-top-right-radius: var( --border-radius--medium );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
/* mmv.ui.canvas.less */
|
||||
.mw-mmv-image img {
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
// It is frustrating to misclick the image on mobile
|
||||
// So that the image is not clickable on mobile
|
||||
cursor: auto;
|
||||
|
|
@ -225,19 +225,19 @@
|
|||
.mw-mmv-next-image,
|
||||
.mw-mmv-prev-image {
|
||||
padding: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
background-size: var(--size-icon);
|
||||
opacity: var(--opacity-icon-base);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-size: var( --size-icon );
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&.mw-mmv-dialog-open,
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -306,8 +306,8 @@
|
|||
/* mmv.ui.permission.less */
|
||||
.mw-mmv-permission-box {
|
||||
width: auto; // We use grid to align metadata so no need to hardcode
|
||||
margin: var(--space-md) 0 0 0;
|
||||
background-color: var(--color-surface-2) !important; // Somehow there is an inline style overriding it
|
||||
margin: var( --space-md ) 0 0 0;
|
||||
background-color: var( --color-surface-2 ) !important; // Somehow there is an inline style overriding it
|
||||
|
||||
&.empty {
|
||||
display: none;
|
||||
|
|
@ -315,21 +315,21 @@
|
|||
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-weight: var( --font-weight-normal );
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
// Make button bigger and aligned
|
||||
.mw-mmv-permission-close {
|
||||
top: var(--space-xs);
|
||||
right: var(--space-xs);
|
||||
top: var( --space-xs );
|
||||
right: var( --space-xs );
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: var(--space-xs);
|
||||
padding: var( --space-xs );
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -337,32 +337,32 @@
|
|||
|
||||
// Add hover state
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-permission-text {
|
||||
.mw-mmv-permission-text-fader {
|
||||
top: 2.7em;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-surface-1) 100%);
|
||||
background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, var( --color-surface-1 ) 100% );
|
||||
|
||||
a {
|
||||
padding-top: 2px;
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-permission-text,
|
||||
.mw-mmv-permission-html {
|
||||
margin: var(--space-xxs) 0 0 0;
|
||||
color: var(--color-base);
|
||||
margin: var( --space-xxs ) 0 0 0;
|
||||
color: var( --color-base );
|
||||
font-size: 0.8125rem;
|
||||
line-height: var(--line-height-sm);
|
||||
line-height: var( --line-height-sm );
|
||||
}
|
||||
|
||||
.mw-mmv-permission-html {
|
||||
|
|
@ -386,10 +386,10 @@
|
|||
|
||||
.mw-mmv-progress-percent {
|
||||
height: 2px;
|
||||
background: linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), var(--color-primary);
|
||||
border-bottom-right-radius: var(--border-radius--large);
|
||||
border-top-right-radius: var(--border-radius--large);
|
||||
filter: drop-shadow(0 0 16px var(--color-primary));
|
||||
background: linear-gradient( -45deg, transparent 33%, rgba( 0, 0, 0, 0.1 ) 33%, rgba( 0, 0, 0, 0.1 ) 66%, transparent 66% ), var( --color-primary );
|
||||
border-bottom-right-radius: var( --border-radius--large );
|
||||
border-top-right-radius: var( --border-radius--large );
|
||||
filter: drop-shadow( 0 0 16px var( --color-primary ) );
|
||||
}
|
||||
|
||||
/* mmv.ui.stripeButtons.less */
|
||||
|
|
@ -397,7 +397,7 @@
|
|||
font-size: 0.875rem;
|
||||
|
||||
// Icon only button for smaller screen size
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
text-indent: -9999px;
|
||||
|
||||
&::before {
|
||||
|
|
@ -413,8 +413,8 @@
|
|||
max-width: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 var(--space-sm);
|
||||
margin: var(--space-md);
|
||||
padding: 0 var( --space-sm );
|
||||
margin: var( --space-md );
|
||||
float: none;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
|
|
@ -426,10 +426,10 @@
|
|||
|
||||
/* mmv.ui.metadataPanel.less */
|
||||
.mw-mmv-info-box {
|
||||
padding: var(--space-md);
|
||||
padding: var( --space-md );
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--medium);
|
||||
background-color: var(--color-surface-2);
|
||||
border-radius: var( --border-radius--medium );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.mw-mmv-title-para {
|
||||
|
|
@ -439,8 +439,8 @@
|
|||
flex-grow: 1;
|
||||
order: -1; // Reorder because we use flex in container
|
||||
padding: 0;
|
||||
margin: var(--space-xl) var(--space-md) var(--space-md) var(--space-md);
|
||||
line-height: var(--line-height-sm);
|
||||
margin: var( --space-xl ) var( --space-md ) var( --space-md ) var( --space-md );
|
||||
line-height: var( --line-height-sm );
|
||||
// Enforce single line
|
||||
white-space: nowrap;
|
||||
|
||||
|
|
@ -451,7 +451,7 @@
|
|||
|
||||
&.mw-mmv-title-smaller {
|
||||
padding: 0;
|
||||
margin: var(--space-md);
|
||||
margin: var( --space-md );
|
||||
}
|
||||
|
||||
// Enforce consistent sizing
|
||||
|
|
@ -460,7 +460,7 @@
|
|||
&.mw-mmv-title-smaller {
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -475,10 +475,10 @@
|
|||
height: auto !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.875rem;
|
||||
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
|
|
@ -489,12 +489,12 @@
|
|||
}
|
||||
|
||||
.mw-mmv-source-author {
|
||||
line-height: var(--line-height-xs);
|
||||
line-height: var( --line-height-xs );
|
||||
}
|
||||
|
||||
.mw-mmv-title {
|
||||
.mw-mmv-untruncated & {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -507,22 +507,22 @@
|
|||
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
|
||||
display: grid;
|
||||
width: auto;
|
||||
padding: 0 var(--space-md) var(--space-md) var(--space-md);
|
||||
padding: 0 var( --space-md ) var( --space-md ) var( --space-md );
|
||||
border-top: 0;
|
||||
margin-top: -4px;
|
||||
// Sync with title
|
||||
gap: var(--space-xs);
|
||||
gap: var( --space-xs );
|
||||
grid-template-areas:
|
||||
'desc links'
|
||||
'desc links'
|
||||
'about about';
|
||||
grid-template-columns: 2fr 1fr;
|
||||
transition: @transition-background;
|
||||
|
||||
.mw-mmv-untruncated & {
|
||||
background-color: transparent;
|
||||
gap: var(--space-xl);
|
||||
gap: var( --space-xl );
|
||||
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
grid-template-areas:
|
||||
'desc desc'
|
||||
'links links'
|
||||
|
|
@ -558,18 +558,18 @@
|
|||
li {
|
||||
font-size: 0.875rem;
|
||||
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
+ li {
|
||||
margin-top: var(--space-xs);
|
||||
margin-top: var( --space-xs );
|
||||
}
|
||||
|
||||
// Reset hardcoded styles
|
||||
.metadata-panel-is-closed &.mw-mmv-license-li {
|
||||
height: auto;
|
||||
line-height: var(--line-height-xs);
|
||||
line-height: var( --line-height-xs );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -585,16 +585,16 @@
|
|||
}
|
||||
|
||||
.mw-mmv-label {
|
||||
background-color: var(--color-surface-3);
|
||||
color: var(--color-base);
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base );
|
||||
font-size: 0.8125rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-surface-2--active);
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -608,28 +608,28 @@
|
|||
// Only apply background color when scroll up
|
||||
.mw-mmv-post-image {
|
||||
min-height: @mmv-height-abovethefold;
|
||||
border-top-left-radius: var(--border-radius--large);
|
||||
border-top-right-radius: var(--border-radius--large);
|
||||
border-top-left-radius: var( --border-radius--large );
|
||||
border-top-right-radius: var( --border-radius--large );
|
||||
transition: @transition-background, @transition-color;
|
||||
|
||||
&.mw-mmv-untruncated {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: none; // We already have top border
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
// Add scroll up affordance
|
||||
// On touch device, when user drag/swipe the indicator, it will cause the
|
||||
// page to scroll up and show the card below.
|
||||
@media (hover: none) {
|
||||
@media ( hover: none ) {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: var(--space-xs);
|
||||
top: var( --space-xs );
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
border-radius: var(--border-radius--pill);
|
||||
border-radius: var( --border-radius--pill );
|
||||
margin: 0 auto;
|
||||
background-color: ~'rgba( 255, 255, 255, var( --opacity-icon-base ) )';
|
||||
content: '';
|
||||
|
|
@ -638,7 +638,7 @@
|
|||
&.mw-mmv-untruncated {
|
||||
// Since background color is dependent on theme now
|
||||
&::before {
|
||||
background-color: var(--border-color-base--darker);
|
||||
background-color: var( --border-color-base--darker );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -648,5 +648,5 @@
|
|||
display: flex; // let's use flex instead of float
|
||||
height: auto; // avoid layout shift when scroll up
|
||||
padding-bottom: 0; // let metadata handle the padding
|
||||
gap: var(--space-xs);
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
.mw-mmv-download-area {
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding: var(--space-md);
|
||||
padding: var( --space-md );
|
||||
|
||||
.mw-mmv-download-go-button {
|
||||
border-bottom-right-radius: 0;
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
/* Selection size arrow element */
|
||||
.mw-mmv-download-select-menu {
|
||||
border-left-color: var(--border-color-base);
|
||||
border-left-color: var( --border-color-base );
|
||||
|
||||
&:hover {
|
||||
border-bottom: 0;
|
||||
|
|
@ -40,22 +40,22 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
color: var(--color-base--subtle);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var( --color-base--subtle );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
|
||||
// Add hover state
|
||||
&:hover {
|
||||
color: var(--color-primary--hover);
|
||||
color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-primary--active);
|
||||
color: var( --color-primary--active );
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulldown size menu */
|
||||
.mw-mmv-download-size {
|
||||
margin-right: var(--space-md);
|
||||
margin-right: var( --space-md );
|
||||
|
||||
.oo-ui-labelElement-label {
|
||||
margin-left: 0; // There is no icon
|
||||
|
|
@ -64,28 +64,28 @@
|
|||
}
|
||||
|
||||
.mw-mmv-download-attribution {
|
||||
padding: var(--space-md);
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
padding: var( --space-md );
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
margin: 0;
|
||||
background-color: var(--color-surface-2);
|
||||
border-bottom-left-radius: var(--border-radius--medium);
|
||||
border-bottom-right-radius: var(--border-radius--medium);
|
||||
color: var(--color-base--emphasized);
|
||||
background-color: var( --color-surface-2 );
|
||||
border-bottom-left-radius: var( --border-radius--medium );
|
||||
border-bottom-right-radius: var( --border-radius--medium );
|
||||
color: var( --color-base--emphasized );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
color: var(--color-base--emphasized);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-surface-2--active);
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
|
||||
&-how {
|
||||
padding: 0;
|
||||
|
||||
.mw-mmv-download-attribution-close-button {
|
||||
top: var(--space-xxs);
|
||||
top: var( --space-xxs );
|
||||
margin: 0;
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
@ -94,11 +94,11 @@
|
|||
&-how-header,
|
||||
&-cta-header {
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
&-cta-invite {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
|
|
@ -109,5 +109,5 @@
|
|||
}
|
||||
|
||||
.mw-mmv-reuse-dialog.mw-mmv-reuse-download-active .mw-mmv-reuse-down-arrow {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@
|
|||
|
||||
/* mmv.ui.reuse.embed.less */
|
||||
.mw-mmv-reuse-dialog .mw-mmv-embed-pane {
|
||||
padding: var(--space-md);
|
||||
padding: var( --space-md );
|
||||
}
|
||||
|
||||
.mw-mmv-embed-dimensions {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
|
||||
.oo-ui-optionWidget-selected & {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,44 +11,44 @@
|
|||
/* ext.MWOAuth.BasicStyles.css */
|
||||
.mw-mwoauthconsumerregistration-body,
|
||||
.mw-mwoauthmanageconsumers-body {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.mw-mwoauthmanageconsumers-proposed,
|
||||
.mw-mwoauthmanagemygrants-proposed,
|
||||
.mw-mwoauthconsumerregistration-proposed {
|
||||
background-color: var(--background-color-primary--hover);
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
|
||||
.mw-mwoauthmanageconsumers-rejected,
|
||||
.mw-mwoauthmanagemygrants-rejected,
|
||||
.mw-mwoauthconsumerregistration-rejected {
|
||||
background-color: var(--background-color-destructive);
|
||||
background-color: var( --background-color-destructive );
|
||||
}
|
||||
|
||||
.mw-mwoauthmanageconsumers-expired,
|
||||
.mw-mwoauthmanagemygrants-expired,
|
||||
.mw-mwoauthconsumerregistration-expired {
|
||||
background-color: var(--background-color-warning);
|
||||
background-color: var( --background-color-warning );
|
||||
}
|
||||
|
||||
.mw-mwoauthmanageconsumers-approved,
|
||||
.mw-mwoauthmanagemygrants-approved,
|
||||
.mw-mwoauthconsumerregistration-approved {
|
||||
background-color: var(--background-color-success);
|
||||
background-color: var( --background-color-success );
|
||||
}
|
||||
|
||||
.mw-mwoauthmanageconsumers-disabled,
|
||||
.mw-mwoauthmanagemygrants-disabled,
|
||||
.mw-mwoauthconsumerregistration-disabled {
|
||||
background-color: var(--color-surface-3);
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
.mw-mwoautherror-details {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
/* ext.MWOAuth.AuthorizeForm.css */
|
||||
#mw-mwoauth-authorize-form {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,135 +14,135 @@
|
|||
.mwe-popups {
|
||||
// See FIXME below
|
||||
// border-radius: var( --border-radius--medium );
|
||||
background: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
background: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
|
||||
.mwe-popups-container {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.mwe-popups-settings-icon {
|
||||
border-radius: var(--border-radius--small);
|
||||
opacity: var(--opacity-icon-base);
|
||||
border-radius: var( --border-radius--small );
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
.mwe-popups-extract {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
|
||||
&[dir='ltr']::after {
|
||||
&[ dir='ltr' ]::after {
|
||||
/* @noflip */
|
||||
background-image: linear-gradient(to right, transparent, var(--color-surface-1) 50%);
|
||||
background-image: linear-gradient( to right, transparent, var( --color-surface-1 ) 50% );
|
||||
}
|
||||
|
||||
&[dir='rtl']::after {
|
||||
&[ dir='rtl' ]::after {
|
||||
/* @noflip */
|
||||
background-image: linear-gradient(to left, transparent, var(--color-surface-1) 50%);
|
||||
background-image: linear-gradient( to left, transparent, var( --color-surface-1 ) 50% );
|
||||
}
|
||||
|
||||
blockquote::after {
|
||||
/* @noflip */
|
||||
background-image: linear-gradient(to bottom, transparent, var(--color-surface-1) 75%);
|
||||
background-image: linear-gradient( to bottom, transparent, var( --color-surface-1 ) 75% );
|
||||
}
|
||||
|
||||
&.mwe-popups-type-generic,
|
||||
&.mwe-popups-type-disambiguation {
|
||||
.mwe-popups-read-link {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
}
|
||||
|
||||
&.mwe-popups-no-image-pointer {
|
||||
&::before {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
|
||||
&.mwe-popups-image-pointer {
|
||||
&::before {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
&.flipped-x {
|
||||
&::before {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.flipped-x.mwe-popups-is-tall {
|
||||
&::before {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
}
|
||||
|
||||
&.flipped-x-y {
|
||||
&::before {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-top-color: var(--color-surface-1);
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
&.mwe-popups-is-tall {
|
||||
&::before {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-top-color: var(--color-surface-1);
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.flipped-y {
|
||||
&::before {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-top-color: var(--color-surface-1);
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* preview.less */
|
||||
.mwe-popups-title {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
/* referencePreview.less */
|
||||
&.mwe-popups-type-reference {
|
||||
.mwe-popups-extract {
|
||||
.mwe-popups-fade {
|
||||
background-image: linear-gradient(transparent, var(--color-surface-1));
|
||||
background-image: linear-gradient( transparent, var( --color-surface-1 ) );
|
||||
}
|
||||
}
|
||||
|
||||
.mwe-collapsible-placeholder {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
@supports ( clip-path: polygon( 1px 1px ) ) {
|
||||
.mwe-popups {
|
||||
.mwe-popups-container {
|
||||
background: var(--color-surface-1);
|
||||
background: var( --color-surface-1 );
|
||||
// FIXME: Come up with a clip path that works with increased border radius
|
||||
// Popups is using polygon to clip the card
|
||||
// So the thumbnail corner would look weird if we adjust the border radius
|
||||
|
|
@ -161,42 +161,42 @@
|
|||
|
||||
/* settingsDialog.less */
|
||||
#mwe-popups-settings {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--medium);
|
||||
background: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--medium );
|
||||
background: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
|
||||
header {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
|
||||
h1 {
|
||||
font-family: var(--fonts-sans);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var( --fonts-sans );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
}
|
||||
|
||||
.mwe-ui-icon-popups-close {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
main#mwe-popups-settings-form {
|
||||
p {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
form {
|
||||
label {
|
||||
> span {
|
||||
color: var(--color-base--emphasized);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -205,11 +205,11 @@
|
|||
|
||||
/* settingsDialogRenderer.less */
|
||||
.mwe-popups-overlay {
|
||||
background-color: var(--background-color-overlay);
|
||||
background-color: var( --background-color-overlay );
|
||||
}
|
||||
|
||||
// Responsive support
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.mwe-popups {
|
||||
position: fixed;
|
||||
top: auto !important;
|
||||
|
|
@ -218,14 +218,14 @@
|
|||
left: 0 !important;
|
||||
overflow: hidden; // Hide pointer and also rounded corners
|
||||
width: auto !important;
|
||||
border-radius: var(--border-radius--medium) var(--border-radius--medium) 0 0;
|
||||
border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0;
|
||||
|
||||
// Top aligned cards
|
||||
&.flipped-x-y,
|
||||
&.flipped-y {
|
||||
top: 0 !important;
|
||||
bottom: auto !important;
|
||||
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
|
||||
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
|
||||
}
|
||||
|
||||
.mwe-popups-container {
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
.mwe-popups-extract {
|
||||
min-height: auto;
|
||||
max-height: 58px;
|
||||
margin-bottom: var(--space-xl);
|
||||
margin-bottom: var( --space-xl );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--pi-background: var(--color-surface-2);
|
||||
--pi-border-color: var(--border-color-base--darker);
|
||||
--pi-secondary-background: var(--color-surface-3);
|
||||
--pi-background: var( --color-surface-2 );
|
||||
--pi-border-color: var( --border-color-base--darker );
|
||||
--pi-secondary-background: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
.portable-infobox .pi-horizontal-group {
|
||||
|
|
@ -21,30 +21,30 @@
|
|||
.portable-infobox .pi-section-navigation,
|
||||
.portable-infobox .pi-media-collection-tabs {
|
||||
padding-bottom: 0;
|
||||
background-color: var(--color-surface-3);
|
||||
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 {
|
||||
border-color: var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
border-bottom-width: 0;
|
||||
background: var(--color-surface-2);
|
||||
background: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.pi-section-navigation .pi-section-tab,
|
||||
.pi-media-collection .pi-tab-link {
|
||||
border-width: 2px;
|
||||
margin: 0 4px;
|
||||
background: var(--color-surface-2);
|
||||
border-top-left-radius: var(--border-radius--medium);
|
||||
border-top-right-radius: var(--border-radius--medium);
|
||||
background: var( --color-surface-2 );
|
||||
border-top-left-radius: var( --border-radius--medium );
|
||||
border-top-right-radius: var( --border-radius--medium );
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary--hover);
|
||||
border-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--color-primary--active);
|
||||
border-color: var( --color-primary--active );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,70 +11,70 @@
|
|||
@import '../../../resources/variables.less';
|
||||
|
||||
.ra-read-more {
|
||||
max-width: var(--width-layout--extended);
|
||||
padding: var(--space-md) 0 0;
|
||||
max-width: var( --width-layout--extended );
|
||||
padding: var( --space-md ) 0 0;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-weight: var( --font-weight-normal );
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ext-related-articles-card-list {
|
||||
gap: var(--space-xs);
|
||||
gap: var( --space-xs );
|
||||
|
||||
h3 {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-xs);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
line-height: var( --line-height-xs );
|
||||
|
||||
a {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-surface-1) 50%);
|
||||
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), var( --color-surface-1 ) 50% );
|
||||
}
|
||||
}
|
||||
|
||||
.ext-related-articles-card {
|
||||
overflow: hidden; // Enforce rounded corner
|
||||
border: 0 !important; // No border regardless
|
||||
border-radius: var(--border-radius--medium) !important; // Same border-radius regardless
|
||||
background-color: var(--color-surface-1);
|
||||
border-radius: var( --border-radius--medium ) !important; // Same border-radius regardless
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.ext-related-articles-card > a {
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
box-shadow: var(--box-shadow-card); // reset
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
box-shadow: var( --box-shadow-card ); // reset
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
.ext-related-articles-card-extract {
|
||||
margin-top: var(--space-xxs);
|
||||
color: var(--color-base--subtle);
|
||||
margin-top: var( --space-xxs );
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.ext-related-articles-card-thumb {
|
||||
margin-right: var(--space-sm);
|
||||
margin-right: var( --space-sm );
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: @width-breakpoint-tablet) {
|
||||
@media all and ( min-width: @width-breakpoint-tablet ) {
|
||||
.ext-related-articles-card-list {
|
||||
gap: var(--space-sm);
|
||||
gap: var( --space-sm );
|
||||
|
||||
.ext-related-articles-card {
|
||||
// Magic
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
.client-js {
|
||||
.read-more-container {
|
||||
min-height: auto;
|
||||
padding: 0 var(--padding-page);
|
||||
padding: 0 var( --padding-page );
|
||||
|
||||
@media (min-width: @width-breakpoint-desktop) {
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,29 +9,29 @@
|
|||
*/
|
||||
|
||||
.mw-revslider-revision {
|
||||
border-color: var(--color-surface-3);
|
||||
background-color: var(--color-surface-3);
|
||||
border-color: var( --color-surface-3 );
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
.mw-revslider-revision-new,
|
||||
.mw-revslider-revision-old,
|
||||
.mw-revslider-revision-intermediate {
|
||||
.mw-revslider-revision {
|
||||
border-color: var(--color-surface-0);
|
||||
border-color: var( --color-surface-0 );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-revslider-revision-border-box {
|
||||
border-left-color: var(--color-surface-0);
|
||||
border-left-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.mw-revslider-revision-wrapper {
|
||||
&:hover,
|
||||
&-hovered {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@
|
|||
*/
|
||||
|
||||
.mw-revslider-container {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.mw-revslider-slider-wrapper {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.mw-revslider-spinner {
|
||||
.mw-revslider-bounce,
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,28 +11,28 @@
|
|||
/* jquery/jquery.atwho.css */
|
||||
.atwho-view {
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
background: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
color: var(--color-base);
|
||||
border-radius: var( --border-radius--small );
|
||||
background: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.atwho-view .atwho-header {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
color: var(--color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.atwho-view .atwho-header .small {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.atwho-view .cur {
|
||||
background: var(--color-primary);
|
||||
background: var( --color-primary );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.atwho-view strong {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.atwho-view .cur strong {
|
||||
|
|
@ -44,5 +44,5 @@
|
|||
}
|
||||
|
||||
.atwho-view small {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,99 +14,99 @@
|
|||
/* libs/tippy/light-border.css */
|
||||
.tippy-tooltip.light-border-theme {
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
color: var(--color-base);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme .tippy-backdrop {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme .tippy-roundarrow {
|
||||
fill: var(--color-surface-1);
|
||||
fill: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme .tippy-roundarrow::after {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='top'] .tippy-arrow {
|
||||
border-top-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow {
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='top'] .tippy-arrow::after {
|
||||
border-top-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow::after {
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='top'] .tippy-arrow::before {
|
||||
border-top-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow::before {
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='bottom'] .tippy-arrow {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow {
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='bottom'] .tippy-arrow::after {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow::after {
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='bottom'] .tippy-arrow::before {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow::before {
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='left'] .tippy-arrow {
|
||||
border-left-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow {
|
||||
border-left-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='left'] .tippy-arrow::after {
|
||||
border-left-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow::after {
|
||||
border-left-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='left'] .tippy-arrow::before {
|
||||
border-left-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow::before {
|
||||
border-left-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='right'] .tippy-arrow {
|
||||
border-right-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow {
|
||||
border-right-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='right'] .tippy-arrow::after {
|
||||
border-right-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow::after {
|
||||
border-right-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='right'] .tippy-arrow::before {
|
||||
border-right-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow::before {
|
||||
border-right-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
/* libs/tippy/light.css */
|
||||
.tippy-tooltip.light-theme {
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
color: var(--color-base);
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-theme[x-placement^='top'] .tippy-arrow {
|
||||
border-top-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-theme[ x-placement^='top' ] .tippy-arrow {
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-theme[x-placement^='bottom'] .tippy-arrow {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-theme[ x-placement^='bottom' ] .tippy-arrow {
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-theme[x-placement^='left'] .tippy-arrow {
|
||||
border-left-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-theme[ x-placement^='left' ] .tippy-arrow {
|
||||
border-left-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-theme[x-placement^='right'] .tippy-arrow {
|
||||
border-right-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-theme[ x-placement^='right' ] .tippy-arrow {
|
||||
border-right-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-theme .tippy-backdrop {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-theme .tippy-roundarrow {
|
||||
fill: var(--color-surface-1);
|
||||
fill: var( --color-surface-1 );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,39 +16,39 @@
|
|||
/* smw/special/ext.smw.special.ask.css */
|
||||
div#ask legend {
|
||||
// Needed to hide fake box shadow line from focus state
|
||||
background-color: var(--color-surface-0);
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.smw-ask-toplinks {
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-2);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-2 );
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.smw-ask-toplinks-edit {
|
||||
border-right-color: var(--color-surface-0);
|
||||
border-right-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.smw-ask-condition fieldset,
|
||||
.smw-ask-printhead fieldset {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
// Add focus state
|
||||
&:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
|
||||
legend {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smw-ask-query .smw-table-row .smw-table-cell {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-ask-query textarea {
|
||||
|
|
@ -65,58 +65,58 @@ div#ask legend {
|
|||
}
|
||||
|
||||
.smw-ask-button {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
color: var(--color-base);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
color: var( --color-base );
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.smw-ask-button-submit input {
|
||||
padding: var(--space-md);
|
||||
border-color: var(--color-primary);
|
||||
border-radius: var(--border-radius--medium);
|
||||
background-color: var(--color-primary);
|
||||
padding: var( --space-md );
|
||||
border-color: var( --color-primary );
|
||||
border-radius: var( --border-radius--medium );
|
||||
background-color: var( --color-primary );
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var( --font-weight-medium );
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary--hover);
|
||||
background-color: var(--color-primary--hover);
|
||||
border-color: var( --color-primary--hover );
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--color-primary--active);
|
||||
background-color: var(--color-primary--active);
|
||||
border-color: var( --color-primary--active );
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
}
|
||||
|
||||
.smw-ask-button-right {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
color: var(--color-base);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-ask-button:hover {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smw-ask-button input {
|
||||
color: var(--color-surface-1) !important;
|
||||
color: var( --color-surface-1 ) !important;
|
||||
}
|
||||
|
||||
.smw-ask-button-lgrey {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
|
||||
&:hover {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2--hover);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
&:active {
|
||||
background-color: var(--color-surface-2--active);
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,53 +125,53 @@ div#ask legend {
|
|||
.smw-ask-button a:focus,
|
||||
.smw-ask-button a:active,
|
||||
.smw-ask-button a:visited {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-ask-search fieldset,
|
||||
.smw-ask-format fieldset,
|
||||
.smw-ask-options fieldset {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
.strike > span::before,
|
||||
.strike > span::after {
|
||||
background: var(--border-color-base);
|
||||
background: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-ask-sort-input input,
|
||||
.smw-propertysubject-input {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
#options-toggle:not(:checked) + #options-list .options-parameter-list::after {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-surface-0) 90%);
|
||||
#options-toggle:not( :checked ) + #options-list .options-parameter-list::after {
|
||||
background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), var( --color-surface-0 ) 90% );
|
||||
}
|
||||
|
||||
.slowfade textarea::placeholder {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.export-links li {
|
||||
border-left-color: var(--color-base--subtle);
|
||||
border-left-color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
// Make delete button destructive
|
||||
.smw-ask-sort-delete-action {
|
||||
color: var(--color-destructive);
|
||||
color: var( --color-destructive );
|
||||
|
||||
&:hover {
|
||||
color: var(--color-destructive--hover);
|
||||
color: var( --color-destructive--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-destructive--active);
|
||||
color: var( --color-destructive--active );
|
||||
}
|
||||
}
|
||||
|
||||
// Options parameter description text
|
||||
.smw-ask-parameter-description {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
.smwb-factbox .smwb-cell {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.smwb-cell-empty {
|
||||
|
|
@ -36,14 +36,14 @@
|
|||
}
|
||||
|
||||
.smwb-prophead {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smwb-title {
|
||||
background-color: transparent;
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-xs);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
line-height: var( --line-height-xs );
|
||||
}
|
||||
|
||||
.smwb-title td {
|
||||
|
|
@ -56,13 +56,13 @@
|
|||
}
|
||||
|
||||
.smwb-propvalue .smwb-prophead {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var( --font-weight-medium );
|
||||
}
|
||||
|
||||
.smwb-propvalue .smwb-propval {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
|
||||
.smwb-bottom {
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -95,14 +95,14 @@
|
|||
|
||||
.smwb-ifactbox .smwb-cell {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.smwb-ititle {
|
||||
background-color: transparent;
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-xs);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
line-height: var( --line-height-xs );
|
||||
}
|
||||
|
||||
.smwb-ititle td {
|
||||
|
|
@ -115,13 +115,13 @@
|
|||
}
|
||||
|
||||
.smwb-ipropvalue .smwb-prophead {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var( --font-weight-medium );
|
||||
}
|
||||
|
||||
.smwb-ipropvalue .smwb-propval {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -130,12 +130,12 @@
|
|||
}
|
||||
|
||||
.smwb-input .mw-ui-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
}
|
||||
|
||||
.smwb-action-separator {
|
||||
border-left-color: var(--border-color-base);
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -155,18 +155,18 @@
|
|||
}
|
||||
|
||||
.smwb-theme-light .smwb-prophead {
|
||||
background-color: var(--color-surface-3);
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
.smwb-theme-light .smwb-center,
|
||||
.smwb-theme-light .smwb-propval {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsive settings (#see smw.table.css)
|
||||
*/
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and ( max-width: 800px ) {
|
||||
.smwb-group .smwb-propval,
|
||||
.smwb-group .smwb-theme-light .smwb-propval {
|
||||
background-color: transparent;
|
||||
|
|
@ -175,8 +175,8 @@
|
|||
|
||||
// Sticky header
|
||||
.smwb-datasheet > .smwb-factbox:first-child {
|
||||
padding: var(--space-md) 0;
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
padding: var( --space-md ) 0;
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
background: transparent;
|
||||
.citizen-sticky-header;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,33 +13,33 @@
|
|||
/* smw/util/ext.smw.modal.css */
|
||||
.smw-modal {
|
||||
z-index: @z-index-overlay;
|
||||
background-color: var(--background-color-overlay--lighter);
|
||||
background-color: var( --background-color-overlay--lighter );
|
||||
}
|
||||
|
||||
.smw-modal-title {
|
||||
margin-left: 0;
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.25rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var( --font-weight-semibold );
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* smw-modal Content */
|
||||
.smw-modal-content {
|
||||
padding: var(--space-xl);
|
||||
padding: var( --space-xl );
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--medium);
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
border-radius: var( --border-radius--medium );
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
}
|
||||
|
||||
.smw-modal-close:hover,
|
||||
.smw-modal-close:focus {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
.smw-modal-close:active {
|
||||
color: var(--background-color-icon--active);
|
||||
color: var( --background-color-icon--active );
|
||||
}
|
||||
|
||||
.smw-modal-header {
|
||||
|
|
@ -47,16 +47,16 @@
|
|||
border-bottom: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-weight: var( --font-weight-normal );
|
||||
}
|
||||
|
||||
.smw-modal-header h2 {
|
||||
border-bottom: 0;
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.smw-modal-footer {
|
||||
background-color: transparent;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
/* smw/ext.smw.page.css */
|
||||
/* Property page */
|
||||
.smw-property-page-content-line {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-property-page-results .header-row {
|
||||
|
|
@ -27,92 +27,92 @@
|
|||
}
|
||||
|
||||
.smw-property-page-results .value-row:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.smw-property-page-results .header-row > .header-title {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-ui-pagination .page-link {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: transparent;
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-ui-pagination .page-link:first-child {
|
||||
border-bottom-left-radius: var(--border-radius--small);
|
||||
border-top-left-radius: var(--border-radius--small);
|
||||
border-bottom-left-radius: var( --border-radius--small );
|
||||
border-top-left-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
.smw-ui-pagination .page-link:last-child {
|
||||
border-bottom-right-radius: var(--border-radius--small);
|
||||
border-top-right-radius: var(--border-radius--small);
|
||||
border-bottom-right-radius: var( --border-radius--small );
|
||||
border-top-right-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
.smw-ui-pagination .page-link:hover {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
color: var(--color-primary);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
.smw-ui-pagination .page-link:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
|
||||
.smw-ui-pagination .page-link.link-disabled {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: transparent;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.smw-ui-pagination .page-link.link-active {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
background-color: var( --color-primary );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.smw-property-page-results .header-title {
|
||||
padding: var(--space-xs) 0;
|
||||
border-bottom-color: var(--border-color-base);
|
||||
padding: var( --space-xs ) 0;
|
||||
border-bottom-color: var( --border-color-base );
|
||||
background-color: transparent;
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.list-pager-value-filter input {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-1);
|
||||
color: var(--color-base);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-1 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-ui-input-filter {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-1);
|
||||
color: var(--color-primary);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-1 );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-ui-input-filter input {
|
||||
border-left-color: var(--border-color-base) !important;
|
||||
color: var(--color-base) !important;
|
||||
border-left-color: var( --border-color-base ) !important;
|
||||
color: var( --color-base ) !important;
|
||||
}
|
||||
|
||||
.smw-ui-input-filter-tooltip {
|
||||
border-left-color: var(--border-color-base);
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-property-page-results.legacy .header-title {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.usage-count,
|
||||
.item-count {
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-3);
|
||||
color: var(--color-base);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
#tab-smw-property-value:checked + label.nav-label .usage-count,
|
||||
|
|
@ -122,20 +122,20 @@
|
|||
#tab-smw-property-redi:checked + label.nav-label .item-count,
|
||||
#tab-smw-type-list:checked + label.nav-label .item-count,
|
||||
#tab-smw-property-spec:checked + label.nav-label .item-count {
|
||||
background-color: var(--color-surface-3);
|
||||
color: var(--color-base);
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
#tab-smw-property-value:checked + label.nav-label .usage-count.moderate,
|
||||
#tab-smw-concept-list:checked + label.nav-label .usage-count.moderate {
|
||||
background-color: var(--background-color-primary--hover);
|
||||
color: var(--color-primary);
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
#tab-smw-property-value:checked + label.nav-label .usage-count.high,
|
||||
#tab-smw-concept-list:checked + label.nav-label .usage-count.high {
|
||||
background-color: var(--background-color-destructive);
|
||||
color: var(--color-destructive);
|
||||
background-color: var( --background-color-destructive );
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -145,25 +145,25 @@
|
|||
.smw-concept input.nav-tab:checked + label.nav-label.smw-tab-warning,
|
||||
.smw-types input.nav-tab:checked + label.nav-label.smw-tab-warning {
|
||||
border-top: 0;
|
||||
border-bottom: 2px solid var(--color-destructive);
|
||||
border-bottom: 2px solid var( --color-destructive );
|
||||
}
|
||||
|
||||
.smw-property input.nav-tab:checked + label.nav-label.smw-tab-spec,
|
||||
.smw-concept input.nav-tab:checked + label.nav-label.smw-tab-spec {
|
||||
border-top: 0;
|
||||
border-bottom: 2px solid var(--color-warning);
|
||||
border-bottom: 2px solid var( --color-warning );
|
||||
}
|
||||
|
||||
.smw-property input.nav-tab:checked + label#tab-label-smw-property-constraint.nav-label {
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
border-bottom: 2px solid var( --color-primary );
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsive settings (@see ext.smw.table)
|
||||
*/
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and ( max-width: 800px ) {
|
||||
.smw-property-page-results .header-title:first-child,
|
||||
.smw-property-page-results .header-row > .header-title:first-child {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,68 +13,68 @@
|
|||
* Special:Admin
|
||||
*/
|
||||
.smw-admin-deprecation-notice-docu-section {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--background-color-warning);
|
||||
color: var(--color-warning);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --background-color-warning );
|
||||
color: var( --color-warning );
|
||||
}
|
||||
|
||||
.smw-admin-deprecation-notice-section-legend {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.smw-admin-deprecation fieldset,
|
||||
.smw-pending-task fieldset {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-admin-deprecation fieldset.smw-admin-deprecation-notice-section-legend {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-admin-alerts-section-legend {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.smw-admin-alerts-section-legend p {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-admin-alerts fieldset {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-admin-alerts fieldset.smw-admin-alerts-section-legend {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-admin-alerts-section-legend-info {
|
||||
color: var(--color-warning);
|
||||
color: var( --color-warning );
|
||||
}
|
||||
|
||||
.smw-admin-alerts-section-legend-info p {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-admin-alerts fieldset.smw-admin-alerts-section-legend-info {
|
||||
border-top-color: var(--color-warning);
|
||||
border-top-color: var( --color-warning );
|
||||
}
|
||||
|
||||
.smw-admin-hr {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smw-special-filter-button {
|
||||
border-color: var(--border-color-base);
|
||||
color: var(--color-base);
|
||||
border-color: var( --border-color-base );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-special-filter-button:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
.smw-special-filter-button:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
|
||||
.smw-special-filter-button a,
|
||||
|
|
@ -82,44 +82,44 @@
|
|||
.smw-special-filter-button a:focus,
|
||||
.smw-special-filter-button a:active,
|
||||
.smw-special-filter-button a:visited {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tabbed admin
|
||||
*/
|
||||
.smw-admin section {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-admin input.nav-tab:checked + label.nav-label {
|
||||
border-color: var(--border-color-base);
|
||||
border-top-color: var(--color-warning);
|
||||
border-color: var( --border-color-base );
|
||||
border-top-color: var( --color-warning );
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.smw-admin input.nav-tab:checked + label.nav-label.smw-tab-warning {
|
||||
border-top-color: var(--color-destructive);
|
||||
border-top-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.smw-admin input.nav-tab:checked + label.nav-label.smw-tab-notice {
|
||||
border-top-color: var(--color-warning);
|
||||
border-top-color: var( --color-warning );
|
||||
}
|
||||
|
||||
.client-nojs .smw-admin-supplementary-duplookup-content::after {
|
||||
background-color: var(--color-surface-2);
|
||||
color: var(--color-destructive);
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.smw-admin h3,
|
||||
h3.smw-title,
|
||||
h4.smw-title,
|
||||
h3 .smw-title {
|
||||
background: var(--color-surface-2);
|
||||
background: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smw-admin h3,
|
||||
h3.smw-title {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
color: var(--color-base--emphasized);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@ fieldset#mw-prefsection-smw-general-options,
|
|||
fieldset#mw-prefsection-smw-extended-search-options,
|
||||
fieldset#mw-prefsection-smw-ask-options,
|
||||
fieldset#mw-prefsection-smw-srf {
|
||||
border-color: var(--color-primary);
|
||||
border-top-color: var(--border-color-base);
|
||||
border-color: var( --color-primary );
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
#mw-prefsection-smw .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,296 +10,296 @@
|
|||
|
||||
/* smw/ext.smw.css */
|
||||
.smw-placeholder {
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-2);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-2 );
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.client-nojs .smw-placeholder::after {
|
||||
color: var(--color-destructive);
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.smw-personal-jobqueue-watchlist:hover,
|
||||
.smw-personal-jobqueue-watchlist:focus,
|
||||
.smw-personal-jobqueue-watchlist:active {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.item-count {
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-3);
|
||||
color: var(--color-base);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.item-count.active {
|
||||
background-color: var(--color-surface-3);
|
||||
color: var(--color-base);
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
/* make divs look like <pre> */
|
||||
.smwpre {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
color: var(--color-base);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-debug-box {
|
||||
border-color: var(--color-warning);
|
||||
background: var(--background-color-warning);
|
||||
border-color: var( --color-warning );
|
||||
background: var( --background-color-warning );
|
||||
}
|
||||
|
||||
.smw-debug-box-header {
|
||||
border-bottom-color: var(--color-warning);
|
||||
font-family: var(--fonts-sans);
|
||||
border-bottom-color: var( --color-warning );
|
||||
font-family: var( --fonts-sans );
|
||||
}
|
||||
|
||||
div.smwtimeline {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smwtable-striped tbody > tr:nth-child(even) {
|
||||
background-color: var(--color-surface-2);
|
||||
.smwtable-striped tbody > tr:nth-child( even ) {
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smwtable-striped tbody > tr:nth-child(odd) {
|
||||
background-color: var(--color-surface-0);
|
||||
.smwtable-striped tbody > tr:nth-child( odd ) {
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.smwtable-striped tbody > tr:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.smwtable-clean tr {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smwtable-clean tr > th {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smwtable-clean tr > td {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smwtable-clean tbody > tr:nth-child(even) {
|
||||
background-color: var(--color-surface-2);
|
||||
.smwtable-clean tbody > tr:nth-child( even ) {
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
div.smwhr hr {
|
||||
background-color: var(--border-color-base);
|
||||
color: var(--border-color-base);
|
||||
background-color: var( --border-color-base );
|
||||
color: var( --border-color-base );
|
||||
}
|
||||
|
||||
span.smwwarning {
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
span.smwsearchicon {
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
span.smwsearch a {
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
span.smwsearch a:hover {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
span.smwsearch a:active {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
span.smwbrowse a {
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
span.smwbrowse a:hover {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
span.smwbrowse a:active {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
.concept-documenation {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
hr.smw-form-horizontalrule {
|
||||
background-color: var(--border-color-base);
|
||||
background-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-horizontalrule {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-editpage-help {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smw-column-header {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.smw-note {
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-2);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-2 );
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.smw-callout-info {
|
||||
border-left-color: var(--color-primary);
|
||||
background: var(-background-color-primary--hover);
|
||||
border-left-color: var( --color-primary );
|
||||
background: var( -background-color-primary--hover );
|
||||
}
|
||||
|
||||
.smw-callout-info .title {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-callout-info-light {
|
||||
border-left-color: var(--border-color-base);
|
||||
background: var(--color-surface-2);
|
||||
border-left-color: var( --border-color-base );
|
||||
background: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smw-callout-info-light .title {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-callout-warning {
|
||||
border-left-color: var(--color-warning);
|
||||
background: var(--background-color-warning);
|
||||
border-left-color: var( --color-warning );
|
||||
background: var( --background-color-warning );
|
||||
}
|
||||
|
||||
.smw-callout-warning .title {
|
||||
color: var(--color-warning);
|
||||
color: var( --color-warning );
|
||||
}
|
||||
|
||||
.smw-callout-success {
|
||||
border-left-color: var(--color-success);
|
||||
background: var(--background-color-success);
|
||||
border-left-color: var( --color-success );
|
||||
background: var( --background-color-success );
|
||||
}
|
||||
|
||||
.smw-callout-success .title {
|
||||
color: var(--color-success);
|
||||
color: var( --color-success );
|
||||
}
|
||||
|
||||
.smw-callout-error {
|
||||
border-left-color: var(--color-destructive);
|
||||
background: var(--background-color-destructive);
|
||||
border-left-color: var( --color-destructive );
|
||||
background: var( --background-color-destructive );
|
||||
}
|
||||
|
||||
.autocomplete-suggestions {
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--small);
|
||||
background: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
color: var(--color-base);
|
||||
border-radius: var( --border-radius--small );
|
||||
background: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.autocomplete-suggestion {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.autocomplete-selected {
|
||||
background: var(--background-color-primary--active);
|
||||
background: var( --background-color-primary--active );
|
||||
}
|
||||
|
||||
.autocomplete-suggestions strong {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.autocomplete-group strong {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-breadcrumb-arrow-right {
|
||||
border-left-color: var(--color-base--subtle);
|
||||
border-left-color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.smw-ask-action-btn,
|
||||
.smw-action-btn {
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
.smw-ask-action-btn-lgrey,
|
||||
a.smw-ask-action-btn-lgrey:visited,
|
||||
.smw-action-btn-lgrey,
|
||||
.smw-action-btn-lgrey:visited {
|
||||
border-color: var(--color-surface-2);
|
||||
background-color: var(--color-surface-2);
|
||||
color: var(--color-base);
|
||||
border-color: var( --color-surface-2 );
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-base );
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.smw-ask-action-btn-lgrey:hover,
|
||||
.smw-action-btn-lgrey:hover {
|
||||
border-color: var(--color-surface-2--hover);
|
||||
background-color: var(--color-surface-2--hover);
|
||||
color: var(--color-base);
|
||||
border-color: var( --color-surface-2--hover );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
a.smw-ask-action-btn-lgrey:active,
|
||||
.smw-action-btn-lgrey:active {
|
||||
border-color: var(--color-surface-2--active);
|
||||
background-color: var(--color-surface-2--active);
|
||||
color: var(--color-base);
|
||||
border-color: var( --color-surface-2--active );
|
||||
background-color: var( --color-surface-2--active );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-ask-action-btn-lblue,
|
||||
a.smw-ask-action-btn-lblue:visited {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
background-color: var( --color-primary );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a.smw-ask-action-btn-lblue:hover {
|
||||
border-color: var(--color-primary--hover);
|
||||
background-color: var(--color-primary--hover);
|
||||
border-color: var( --color-primary--hover );
|
||||
background-color: var( --color-primary--hover );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Added active state
|
||||
a.smw-ask-action-btn-lblue:active {
|
||||
border-color: var(--color-primary--active);
|
||||
background-color: var(--color-primary--active);
|
||||
border-color: var( --color-primary--active );
|
||||
background-color: var( --color-primary--active );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.smw-page-indicator {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
color: var(--background-color-icon);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
.smw-protection-indicator {
|
||||
border-radius: var(--border-radius--small);
|
||||
color: var(--background-color-icon);
|
||||
border-radius: var( --border-radius--small );
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
.smw-protection-indicator.with-border {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-page-indicator.usage-count.moderate {
|
||||
border-color: var(--background-color-primary--hover);
|
||||
background-color: var(--background-color-primary--hover);
|
||||
color: var(--color-primary);
|
||||
border-color: var( --background-color-primary--hover );
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-page-indicator.usage-count.high {
|
||||
border-color: var(--background-color-destructive);
|
||||
background-color: var(--background-color-destructive);
|
||||
color: var(--color-destructive);
|
||||
border-color: var( --background-color-destructive );
|
||||
background-color: var( --background-color-destructive );
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.mw-json .value,
|
||||
|
|
@ -308,13 +308,13 @@ a.smw-ask-action-btn-lblue:active {
|
|||
}
|
||||
|
||||
.ns-112.action-submit .error {
|
||||
border-left-color: var(--color-destructive);
|
||||
background: var(--background-color-destructive);
|
||||
color: var(--color-destructive);
|
||||
border-left-color: var( --color-destructive );
|
||||
background: var( --background-color-destructive );
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.ns-112.action-submit .error::before {
|
||||
color: var(--color-destructive);
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
/* smw/ext.smw.dropdown.css */
|
||||
|
|
@ -324,238 +324,238 @@ a.smw-ask-action-btn-lblue:active {
|
|||
|
||||
.smw-dropdown > a,
|
||||
.smw-dropdown > button {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: transparent;
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.smw-dropdown > a::before,
|
||||
.smw-dropdown > button::before {
|
||||
border-top-color: var(--color-base--emphasized);
|
||||
border-top-color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.smw-dropdown .smw-dropdown-menu {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
}
|
||||
|
||||
.smw-dropdown .smw-dropdown-menu li:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.smw-dropdown .smw-dropdown-menu li a {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.smw-dropdown .smw-dropdown-menu .divider {
|
||||
background-color: var(--border-color-base);
|
||||
background-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-dropdown-menu::before {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.smw-dropdown-menu::after {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
/* smw/ext.smw.tabs.css */
|
||||
.smw-tabs section,
|
||||
.smw-tabs .subtab-content {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
// Similar to TabberNeue
|
||||
.smw-tabs label.nav-label {
|
||||
color: var(--color-base--subtle);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var( --color-base--subtle );
|
||||
font-weight: var( --font-weight-medium );
|
||||
}
|
||||
|
||||
.smw-tabs label.nav-label:hover {
|
||||
border-bottom: 2px solid var(--color-primary--hover);
|
||||
color: var(--color-primary--hover);
|
||||
border-bottom: 2px solid var( --color-primary--hover );
|
||||
color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
.smw-tabs label.nav-label:active {
|
||||
border-bottom: 2px solid var(--color-primary--active);
|
||||
color: var(--color-primary--active);
|
||||
border-bottom: 2px solid var( --color-primary--active );
|
||||
color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.smw-tabs input.nav-tab:checked + label.nav-label {
|
||||
border-color: transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
border-bottom: 2px solid var( --color-primary );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-tabs input.nav-tab:checked + label.nav-label.cached {
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 2px solid var(--color-warning);
|
||||
border-bottom: 2px solid var( --color-warning );
|
||||
}
|
||||
|
||||
.smw-tabs label.nav-label .smw-tab-icon {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
.smw-tabs label.nav-label:hover .smw-tab-icon {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
.smw-tabs label.nav-label:active .smw-tab-icon,
|
||||
.smw-tabs input.nav-tab:checked + label.nav-label .smw-tab-icon {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and ( max-width: 800px ) {
|
||||
.smw-tabs input.nav-tab:checked + label.nav-label {
|
||||
background-color: var(--background-color-primary--active);
|
||||
background-color: var( --background-color-primary--active );
|
||||
}
|
||||
}
|
||||
|
||||
.smw-tabset > label {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.smw-tabset > label::after {
|
||||
background: var(--color-base--subtle);
|
||||
background: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.smw-tabset > input:focus + label,
|
||||
.smw-tabset > input:checked + label {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-tabset > input:focus + label::after,
|
||||
.smw-tabset > input:checked + label::after {
|
||||
background: var(--color-primary);
|
||||
background: var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-tabset > input:focus + label.smw-indicator-severity-error::after,
|
||||
.smw-tabset > input:checked + label.smw-indicator-severity-error::after {
|
||||
background: var(--color-destructive);
|
||||
background: var( --color-destructive );
|
||||
}
|
||||
|
||||
.smw-tabset > input:focus + label.smw-indicator-severity-warning::after,
|
||||
.smw-tabset > input:checked + label.smw-indicator-severity-warning::after {
|
||||
background: var(--color-warning);
|
||||
background: var( --color-warning );
|
||||
}
|
||||
|
||||
.smw-tabset > label:hover {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-tabset > label:hover::after {
|
||||
background: var(--color-base);
|
||||
background: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-tabset > input:checked + label {
|
||||
border-color: transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
border-bottom: 2px solid var( --color-primary );
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.smw-tabset > input:checked + label.smw-indicator-severity-error {
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 2px solid var(--color-destructive);
|
||||
color: var(--color-destructive);
|
||||
border-bottom: 2px solid var( --color-destructive );
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.smw-tabset > input:checked + label.smw-indicator-severity-warning {
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 2px solid var(--color-warning);
|
||||
color: var(--color-warning);
|
||||
border-bottom: 2px solid var( --color-warning );
|
||||
color: var( --color-warning );
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-issue-panel > label::after {
|
||||
background: var(--color-surface-2);
|
||||
background: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
/* smw/factbox/smw.factbox.css */
|
||||
.smwfact {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smwfact td,
|
||||
.smwfact tr,
|
||||
.smwfact table {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smwfact .smwfacttable {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smwfact .smw-table-row:nth-child(odd) {
|
||||
background-color: var(--color-surface-2);
|
||||
.smwfact .smw-table-row:nth-child( odd ) {
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smwfact .smw-table-row:nth-child(even) {
|
||||
background-color: var(--color-surface-0);
|
||||
.smwfact .smw-table-row:nth-child( even ) {
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.rdflink a {
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
.rdflink a:hover {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
.rdflink a:active {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
.smw-factbox section {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-factbox input.nav-tab:checked + label.nav-label {
|
||||
border-color: transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
border-bottom: 2px solid var( --color-primary );
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.smw-factbox input.nav-tab:checked + label#tab-label-facts-attachment.nav-label {
|
||||
border-color: transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
border-bottom: 2px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-factbox .smwfact {
|
||||
background-color: var(--color-surface-0);
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
/* smw/smw.indicators.css */
|
||||
.smw-icon-indicator-placeholder {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smw-indicator-vertical-bar-loader,
|
||||
.smw-indicator-vertical-bar-loader::before,
|
||||
.smw-indicator-vertical-bar-loader::after {
|
||||
background: var(--color-surface-3);
|
||||
background: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
.smw-indicator-vertical-bar-loader {
|
||||
color: var(--color-surface-3);
|
||||
color: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
.smw-list-rule-title {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
color: var(--color-base--emphasized);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -10,22 +10,22 @@
|
|||
|
||||
/* smw/ext.smw.table.css */
|
||||
.smw-table-header {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smw-table-cell,
|
||||
.smw-table-head {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-table-footer {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.smw-table-sort-asc::after {
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
.smw-table-sort-desc::after {
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,76 +12,76 @@
|
|||
/* Style the buttons inside the tab */
|
||||
div.smw-vtab-nav button {
|
||||
background-color: transparent;
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav button a {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav.nav-right button {
|
||||
border-left-color: var(--border-color-base);
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav.nav-left button {
|
||||
border-right-color: var(--border-color-base);
|
||||
border-right-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
div.smw-vtab-nav button:hover {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: 0 var(--border-radius--small) var(--border-radius--small) 0;
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: 0 var( --border-radius--small ) var( --border-radius--small ) 0;
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav.nav-right button:hover {
|
||||
border-color: var(--border-color-base);
|
||||
border-left-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav.nav-left button:hover {
|
||||
border-color: var(--border-color-base);
|
||||
border-right-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
border-right-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
/* Create an active/current "tab button" class */
|
||||
div.smw-vtab-nav button.active {
|
||||
border: var(--border-color-base);
|
||||
border: var( --border-color-base );
|
||||
background-color: transparent;
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav.nav-right button.active {
|
||||
border-radius: 0 var(--border-radius--small) var(--border-radius--small) 0;
|
||||
border-radius: 0 var( --border-radius--small ) var( --border-radius--small ) 0;
|
||||
}
|
||||
|
||||
div.smw-vtab-nav.nav-left button.active {
|
||||
border-radius: var(--border-radius--small) 0 0 var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small ) 0 0 var( --border-radius--small );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav button.active a {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav.nav-right button.active,
|
||||
div.smw-vtab-nav.nav-right button.active a {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav.nav-left button.active,
|
||||
div.smw-vtab-nav.nav-left button.active a {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
/* Style the tab content */
|
||||
.smw-vtab-content {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav .smw-vtab-warning a {
|
||||
color: var(--color-warning);
|
||||
color: var( --color-warning );
|
||||
}
|
||||
|
||||
div.smw-vtab-nav .smw-vtab-warning.active a {
|
||||
color: var(--color-warning--active);
|
||||
color: var( --color-warning--active );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,71 +10,71 @@
|
|||
|
||||
/* smw/content/smw.schema.css */
|
||||
.content-highlight {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.content-no-highlight-o {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.unknown-type .content-highlight {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.schema-tags {
|
||||
border-right-color: var(--border-color-base);
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-left-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-right-color: var( --border-color-base );
|
||||
border-bottom-color: var( --border-color-base );
|
||||
border-left-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.schema-tags:first-child {
|
||||
border-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.schema-tags li {
|
||||
border-left-color: var(--border-color-base);
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-schema-description {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.schema-error {
|
||||
color: var(--color-destructive);
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
h3.smw-title {
|
||||
border-bottom-color: var(--color-base--subtle);
|
||||
color: var(--color-base--emphasized);
|
||||
border-bottom-color: var( --color-base--subtle );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tabs
|
||||
*/
|
||||
.smw-schema #tab-schema-usage:checked + label.nav-label .item-count {
|
||||
background-color: var(--color-surface-3);
|
||||
color: var(--color-base);
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-schema section {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-right-color: var(--border-color-base);
|
||||
border-left-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
border-right-color: var( --border-color-base );
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-schema input.nav-tab:checked + label.nav-label {
|
||||
border: 0;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
border-bottom: 2px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.smw-schema input.nav-tab:checked + label.nav-label.error-label {
|
||||
border-bottom: 2px solid var(--color-destructive);
|
||||
border-bottom: 2px solid var( --color-destructive );
|
||||
}
|
||||
|
||||
.schema-summary .smw-table-cell,
|
||||
.smw-table-head {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,65 +19,65 @@
|
|||
}
|
||||
|
||||
.smw-jsonview-button-group-left input {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
.smw-jsonview-button {
|
||||
height: 40px;
|
||||
background-color: var(--color-primary);
|
||||
background-color: var( --color-primary );
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
|
||||
.smw-jsonview-button:first-child {
|
||||
border-radius: var(--border-radius--small) 0 0 var(--border-radius--small);
|
||||
border-right-color: var(--border-color-base);
|
||||
border-radius: var( --border-radius--small ) 0 0 var( --border-radius--small );
|
||||
border-right-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-jsonview-button:last-child {
|
||||
border-radius: 0 var(--border-radius--small) var(--border-radius--small) 0;
|
||||
border-radius: 0 var( --border-radius--small ) var( --border-radius--small ) 0;
|
||||
}
|
||||
|
||||
.smw-jsonview-button:hover {
|
||||
background-color: var(--color-primary--hover);
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
.smw-jsonview-button:active {
|
||||
background-color: var(--color-primary--active);
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.jsonview ul {
|
||||
border-left-color: var(--border-color-base);
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-jsonview-menu {
|
||||
height: 40px;
|
||||
padding: var(--space-xs) 0;
|
||||
padding: var( --space-xs ) 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
background-color: var(--color-surface-0);
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.smw-jsonview-menu + pre {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.smw-jsonview-menu .smw-jsonview-button {
|
||||
border-radius: var(--border-radius--small);
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: transparent;
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-jsonview-menu .smw-jsonview-button:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
// Added active state
|
||||
.smw-jsonview-menu .smw-jsonview-button:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
|
||||
.smw-jsonview-menu .smw-jsonview-button:first-child {
|
||||
|
|
|
|||
|
|
@ -10,41 +10,41 @@
|
|||
|
||||
/* smw/special.search/search.css */
|
||||
.smw-search-results-prepend {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--medium);
|
||||
background-color: var(--color-surface-2);
|
||||
border-radius: var( --border-radius--medium );
|
||||
background-color: var( --color-surface-2 );
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.smw-text-strike > span::before,
|
||||
.smw-text-strike > span::after {
|
||||
background: var(--border-color-base);
|
||||
background: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-input {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-select-field {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-button-field {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.smw-form-link-query {
|
||||
border-right-color: var(--border-color-base);
|
||||
border-right-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
#smw-searchoptions {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
border: 0;
|
||||
border-radius: var(--border-radius--medium);
|
||||
background-color: var(--color-surface-2);
|
||||
border-radius: var( --border-radius--medium );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
#smw-searchoptions .divider {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,23 +11,23 @@
|
|||
/* smw/smw.summarytable.css */
|
||||
.smw-summarytable .smw-table-cell,
|
||||
.smw-table-head {
|
||||
border-color: var(--border-color-base);
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsive settings (#see smw.table.css)
|
||||
*/
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and ( max-width: 800px ) {
|
||||
.smw-summarytable .smw-table-row .smwpropname {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-summarytable-imagecolumn .smw-summarytable-image {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.smw-summarytable-columns .smw-summarytable-columns-2:first-child {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,60 +10,60 @@
|
|||
|
||||
/* smw/util/smw.tippy.css */
|
||||
.tippy-header {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-2);
|
||||
border-top-left-radius: var(--border-radius--small);
|
||||
border-top-right-radius: var(--border-radius--small);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
border-top-left-radius: var( --border-radius--small );
|
||||
border-top-right-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
.tippy-bottom {
|
||||
border-top-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-1);
|
||||
border-bottom-left-radius: var(--border-radius--small);
|
||||
border-bottom-right-radius: var(--border-radius--small);
|
||||
border-top-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
border-bottom-left-radius: var( --border-radius--small );
|
||||
border-bottom-right-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme[x-placement^='bottom'] .tippy-arrow,
|
||||
.tippy-tooltip.light-theme[x-placement^='bottom'] .tippy-arrow,
|
||||
.tippy-tooltip.light-border-theme[x-placement^='bottom'] .tippy-arrow::after,
|
||||
.tippy-tooltip.light-theme[x-placement^='bottom'] .tippy-arrow::after {
|
||||
border-bottom-color: var(--color-surface-2);
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow,
|
||||
.tippy-tooltip.light-theme[ x-placement^='bottom' ] .tippy-arrow,
|
||||
.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow::after,
|
||||
.tippy-tooltip.light-theme[ x-placement^='bottom' ] .tippy-arrow::after {
|
||||
border-bottom-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.tippy-tooltip.light-border-theme.square-border-transparent-arrow[x-placement^='bottom'] .tippy-arrow,
|
||||
.tippy-tooltip.light-border-theme.square-border-light[x-placement^='bottom'] .tippy-arrow,
|
||||
.tippy-tooltip.light-theme.square-border-transparent-arrow[x-placement^='bottom'] .tippy-arrow,
|
||||
.tippy-tooltip.light-theme.square-border-light[x-placement^='bottom'] .tippy-arrow,
|
||||
.tippy-tooltip.light-border-theme.square-border-transparent-arrow[x-placement^='bottom'] .tippy-arrow::after,
|
||||
.tippy-tooltip.light-border-theme.square-border-light[x-placement^='bottom'] .tippy-arrow::after,
|
||||
.tippy-tooltip.light-theme.square-border-transparent-arrow[x-placement^='bottom'] .tippy-arrow::after,
|
||||
.tippy-tooltip.light-theme.square-border-light[x-placement^='bottom'] .tippy-arrow::after {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
.tippy-tooltip.light-border-theme.square-border-transparent-arrow[ x-placement^='bottom' ] .tippy-arrow,
|
||||
.tippy-tooltip.light-border-theme.square-border-light[ x-placement^='bottom' ] .tippy-arrow,
|
||||
.tippy-tooltip.light-theme.square-border-transparent-arrow[ x-placement^='bottom' ] .tippy-arrow,
|
||||
.tippy-tooltip.light-theme.square-border-light[ x-placement^='bottom' ] .tippy-arrow,
|
||||
.tippy-tooltip.light-border-theme.square-border-transparent-arrow[ x-placement^='bottom' ] .tippy-arrow::after,
|
||||
.tippy-tooltip.light-border-theme.square-border-light[ x-placement^='bottom' ] .tippy-arrow::after,
|
||||
.tippy-tooltip.light-theme.square-border-transparent-arrow[ x-placement^='bottom' ] .tippy-arrow::after,
|
||||
.tippy-tooltip.light-theme.square-border-light[ x-placement^='bottom' ] .tippy-arrow::after {
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.square-border-light .tippy-header {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.tippy-cancel {
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.tippy-cancel:hover {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tippy-cancel:active {
|
||||
color: var(--background-color-icon--active);
|
||||
color: var( --background-color-icon--active );
|
||||
}
|
||||
|
||||
.tippy-warning-circle {
|
||||
background-color: var(--color-warning);
|
||||
background-color: var( --color-warning );
|
||||
}
|
||||
|
||||
.tippy-error-circle {
|
||||
background-color: var(--color-destructive);
|
||||
background-color: var( --color-destructive );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
/* jquery/jquery.selectmenu.css */
|
||||
/* Sub menus */
|
||||
.sm_sub_header:hover {
|
||||
color: var(--color-base--emphasized) !important;
|
||||
color: var( --color-base--emphasized ) !important;
|
||||
}
|
||||
|
||||
.sm_sub_header button {
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -23,50 +23,50 @@
|
|||
*/
|
||||
.sm_container {
|
||||
border: 0;
|
||||
background-color: var(--color-surface-1);
|
||||
box-shadow: var(--box-shadow-dialog);
|
||||
background-color: var( --color-surface-1 );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
}
|
||||
|
||||
.sm_header > h3 {
|
||||
margin: var(--space-md);
|
||||
color: var(--color-base--emphasized);
|
||||
margin: var( --space-md );
|
||||
color: var( --color-base--emphasized );
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.sm_header button {
|
||||
top: 12px;
|
||||
color: var(--background-color-icon);
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
.sm_header button:hover {
|
||||
color: var(--background-color-icon--hover);
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
.sm_header button.sm_close_button {
|
||||
right: var(--space-md);
|
||||
right: var( --space-md );
|
||||
}
|
||||
|
||||
.sm_input {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-1);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.sm_input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
}
|
||||
|
||||
/**
|
||||
* "Get all" button
|
||||
*/
|
||||
div.sm_clear_btn {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
div.sm_clear_btn:hover {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -77,130 +77,130 @@ div.sm_clear_btn:hover {
|
|||
}
|
||||
|
||||
.sm_result_area.sm_list_mode {
|
||||
border-top-color: var(--border-color-base);
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.sm_result_tabs {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.sm_result_tabs ul li a {
|
||||
border-radius: var(--border-radius--small) var(--border-radius--small) 0 0;
|
||||
color: var(--color-base);
|
||||
border-radius: var( --border-radius--small ) var( --border-radius--small ) 0 0;
|
||||
color: var( --color-base );
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.sm_result_tabs ul li a.active {
|
||||
border-color: var(--border-color-base);
|
||||
border-color: var( --border-color-base );
|
||||
border-bottom-color: transparent;
|
||||
background-color: transparent;
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
/* menu arrow */
|
||||
.sm_arrow_bottom > .sm_arrow {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.sm_arrow_bottom > .sm_arrow::after {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.sm_arrow_bottom > .sm_arrow.sm_have_title::after {
|
||||
border-bottom-color: var(--color-surface-1);
|
||||
border-bottom-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.sm_arrow_top > .sm_arrow {
|
||||
border-top-color: var(--color-surface-1);
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.sm_arrow_top > .sm_arrow::after {
|
||||
border-top-color: var(--color-surface-1);
|
||||
border-top-color: var( --color-surface-1 );
|
||||
}
|
||||
/* menu arrow */
|
||||
|
||||
.sm_results {
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
/* regular menu item style */
|
||||
.sm_regular .sm_results > li:hover {
|
||||
background-color: var(--color-primary--hover);
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
.sm_regular .sm_results > li.sm_disabled,
|
||||
.sm_regular .sm_results > li.sm_disabled:hover,
|
||||
.sm_regular .sm_results > li.sm_disabled a {
|
||||
background-color: var(--color-surface-1);
|
||||
color: var(--color-base--subtle);
|
||||
background-color: var( --color-surface-1 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.sm_regular .sm_results > li.sm_header,
|
||||
.sm_regular .sm_results > li.sm_header:hover,
|
||||
.sm_regular .sm_results > li.sm_header a {
|
||||
background-color: transparent;
|
||||
color: var(--color-base--emphasized);
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
/* regular menu item style */
|
||||
.sm_results > li {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.sm_results > li > a {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.sm_results > li.sm_divider {
|
||||
border-bottom-color: var(--border-color-base);
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
ul.sm_results > li.sm_over {
|
||||
background-color: var(--color-primary--hover) !important;
|
||||
background-color: var( --color-primary--hover ) !important;
|
||||
}
|
||||
|
||||
.sm_control_box {
|
||||
border-top-color: var(--border-color-base);
|
||||
background-color: var(--color-surface-1);
|
||||
border-top-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.sm_control_box button {
|
||||
background-color: var(--color-surface-2);
|
||||
color: var(--background-color-icon);
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --background-color-icon );
|
||||
}
|
||||
|
||||
.sm_control_box button:hover {
|
||||
background-color: var(--color-surface-2--hover);
|
||||
color: var(--background-color-icon--hover);
|
||||
background-color: var( --color-surface-2--hover );
|
||||
color: var( --background-color-icon--hover );
|
||||
}
|
||||
|
||||
div.sm_container_combo {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
div.sm_container_combo.sm_disabled,
|
||||
div.sm_container_combo.sm_disabled ul.sm_element_box,
|
||||
div.sm_container_combo.sm_disabled .sm_input {
|
||||
background-color: var(--color-surface-2);
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
div.sm_container_combo.sm_container_open {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--color-primary);
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 1px 1px rgba( 0, 0, 0, 0.075 ), 0 0 8px var( --color-primary );
|
||||
}
|
||||
|
||||
input.sm_combo_input[readonly],
|
||||
input.sm_combo_input[disabled] {
|
||||
background-color: var(--color-surface-2);
|
||||
input.sm_combo_input[ readonly ],
|
||||
input.sm_combo_input[ disabled ] {
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
ul.sm_element_box li.selected_tag {
|
||||
border-color: var(--border-color-base);
|
||||
border-radius: var(--border-radius--small);
|
||||
background-color: var(--color-surface-2);
|
||||
box-shadow: 0 0 2px var(--color-surface-1) inset, 0 1px 0 rgba(0, 0, 0, 0.05);
|
||||
border-color: var( --border-color-base );
|
||||
border-radius: var( --border-radius--small );
|
||||
background-color: var( --color-surface-2 );
|
||||
box-shadow: 0 0 2px var( --color-surface-1 ) inset, 0 1px 0 rgba( 0, 0, 0, 0.05 );
|
||||
}
|
||||
|
||||
ul.sm_element_box li.selected_tag span.tag_close {
|
||||
|
|
@ -208,82 +208,82 @@ ul.sm_element_box li.selected_tag span.tag_close {
|
|||
}
|
||||
|
||||
.sm_input_off {
|
||||
background: var(--color-surface-2);
|
||||
color: var(--color-base);
|
||||
background: var( --color-surface-2 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
/**
|
||||
* Navi
|
||||
*/
|
||||
.sm_navi {
|
||||
border-bottom-color: var(--color-primary);
|
||||
background: var(--color-surface-2);
|
||||
border-bottom-color: var( --color-primary );
|
||||
background: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.sm_navi > p > a:link,
|
||||
.sm_navi > p > a:visited,
|
||||
.sm_navi > p > a:hover,
|
||||
.sm_navi > p > a:active {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.sm_navi > p {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.sm_navi > p > a > .current {
|
||||
color: var(--color-primary--active);
|
||||
color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.sm_navi > p > .page_end {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.sm_container > .sm_select_ng {
|
||||
background: var(--color-warning);
|
||||
background: var( --color-warning );
|
||||
}
|
||||
|
||||
div.sm_result_area div.pagination > ul > li > a {
|
||||
background-color: transparent;
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
div.sm_result_area div.pagination > ul > li > a:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
color: var(--color-base--emphasized);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
div.sm_result_area div.pagination > ul > li.disabled > a {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
div.sm_result_area div.pagination > ul > li.disabled > a:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
div.sm_result_area div.pagination > ul > li.pageInfoBox > a {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
div.sm_result_area div.pagination > ul > li.pageInfoBox > a:hover {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
/* smw/smw.selectmenu.css */
|
||||
.smw-selectmenu-button {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.smw-selectmenu-label {
|
||||
color: var(--color-base--subtle);
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.sm_result_area,
|
||||
.sm_results {
|
||||
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
|
||||
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
|
||||
}
|
||||
|
||||
ul.sm_results > li.sm_over:last-child {
|
||||
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
|
||||
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
padding: 0;
|
||||
|
||||
&.tabberactive a {
|
||||
color: var(--color-primary);
|
||||
color: var( --color-primary );
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -31,16 +31,16 @@
|
|||
border: 0;
|
||||
margin: 0 12px 0 0;
|
||||
background: 0 !important; // To override hover styles
|
||||
color: var(--color-base--subtle);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var( --color-base--subtle );
|
||||
font-weight: var( --font-weight-medium );
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
color: var(--color-base) !important;
|
||||
color: var( --color-base ) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-base--subtle) !important;
|
||||
color: var( --color-base--subtle ) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: @width-breakpoint-tablet) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.tabber {
|
||||
ul.tabbernav {
|
||||
flex-wrap: nowrap;
|
||||
|
|
|
|||
|
|
@ -10,30 +10,30 @@
|
|||
|
||||
.tabber {
|
||||
&__tab {
|
||||
color: var(--color-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var( --color-base );
|
||||
font-weight: var( --font-weight-medium );
|
||||
|
||||
&:visited {
|
||||
color: var(--color-base);
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
&[aria-selected='true'],
|
||||
&[aria-selected='true']:visited {
|
||||
color: var(--color-primary);
|
||||
&[ aria-selected='true' ],
|
||||
&[ aria-selected='true' ]:visited {
|
||||
color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
background: var(--color-primary);
|
||||
background: var( --color-primary );
|
||||
}
|
||||
|
||||
&__header {
|
||||
box-shadow: inset 0 -1px 0 0 var(--border-color-base--darker);
|
||||
box-shadow: inset 0 -1px 0 0 var( --border-color-base--darker );
|
||||
|
||||
&__prev,
|
||||
&__next {
|
||||
&::after {
|
||||
opacity: var(--opacity-icon-base);
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -43,21 +43,21 @@
|
|||
.tabber__loading-indicator,
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
@media ( hover: hover ) {
|
||||
.tabber {
|
||||
&__tab {
|
||||
&:hover {
|
||||
color: var(--color-primary--hover);
|
||||
color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-primary--active);
|
||||
color: var( --color-primary--active );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,18 +65,18 @@
|
|||
&__prev,
|
||||
&__next {
|
||||
&:hover {
|
||||
background-color: var(--background-color-quiet--hover);
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
|
||||
&::after {
|
||||
opacity: var(--opacity-icon-base--hover);
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--background-color-quiet--active);
|
||||
background-color: var( --background-color-quiet--active );
|
||||
|
||||
&::after {
|
||||
opacity: var(--opacity-icon-base--active);
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,19 +5,19 @@
|
|||
}
|
||||
|
||||
&-interstitial {
|
||||
background-color: var(--background-color-overlay--lighter);
|
||||
background-color: var( --background-color-overlay--lighter );
|
||||
}
|
||||
|
||||
&-progress {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
border-color: var(--border-color-base--lighter);
|
||||
border-radius: var(--border-radius--pill);
|
||||
border-color: var( --border-color-base--lighter );
|
||||
border-radius: var( --border-radius--pill );
|
||||
margin: 0 auto;
|
||||
background-color: var(--color-surface-1);
|
||||
background-color: var( --color-surface-1 );
|
||||
|
||||
&-bar {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@
|
|||
*/
|
||||
|
||||
.tux-dropdown-menu {
|
||||
border-color: var(--border-color-base);
|
||||
background: var(--color-surface-1);
|
||||
border-color: var( --border-color-base );
|
||||
background: var( --color-surface-1 );
|
||||
}
|
||||
|
|
|
|||
某些文件未显示，因为此 diff 中更改的文件太多 显示更多
正在加载...
在新工单中引用