mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-12 14:35:35 +00:00
c1370e95f0
* Tokenize shadow vertical distance * Rename CSS variables to match Codex counterpart * Reduce the vertical distance for all box shadow
255 lines
5.1 KiB
Plaintext
255 lines
5.1 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* SkinStyles for Extension:Popups
|
|
* Module: ext.popups.main
|
|
* Version: REL1_39 a40ebc1
|
|
*
|
|
* Date: 2024-06-14
|
|
*/
|
|
|
|
@import '../../../resources/variables.less';
|
|
|
|
.popups-icon {
|
|
filter: var( --filter-invert );
|
|
}
|
|
|
|
/* popup.less */
|
|
.mwe-popups {
|
|
// See FIXME below
|
|
// border-radius: var( --border-radius-medium );
|
|
background: var( --color-surface-1 );
|
|
box-shadow: var( --box-shadow-drop-xx-large );
|
|
|
|
.mwe-popups-container {
|
|
color: var( --color-base );
|
|
}
|
|
|
|
.mwe-popups-settings-icon {
|
|
border-radius: var( --border-radius-base );
|
|
opacity: var( --opacity-icon-base );
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
opacity: var( --opacity-icon-base--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
opacity: var( --opacity-icon-base--selected );
|
|
}
|
|
}
|
|
|
|
.mwe-popups-extract {
|
|
color: var( --color-base );
|
|
|
|
&[ dir='ltr' ]::after {
|
|
/* @noflip */
|
|
background-image: linear-gradient( to right, transparent, var( --color-surface-1 ) 50% );
|
|
}
|
|
|
|
&[ dir='rtl' ]::after {
|
|
/* @noflip */
|
|
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% );
|
|
}
|
|
|
|
&.mwe-popups-type-generic,
|
|
&.mwe-popups-type-disambiguation {
|
|
.mwe-popups-read-link {
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
}
|
|
|
|
&.mwe-popups-no-image-pointer {
|
|
&::before {
|
|
border-bottom-color: var( --border-color-base );
|
|
}
|
|
|
|
&::after {
|
|
border-bottom-color: var( --color-surface-1 );
|
|
}
|
|
}
|
|
|
|
&.mwe-popups-image-pointer {
|
|
&::before {
|
|
border-bottom-color: var( --border-color-base );
|
|
}
|
|
|
|
&::after {
|
|
border-bottom-color: var( --color-surface-1 );
|
|
}
|
|
|
|
&.flipped-x {
|
|
&::before {
|
|
border-bottom-color: var( --border-color-base );
|
|
}
|
|
|
|
&::after {
|
|
border-bottom-color: var( --color-surface-1 );
|
|
}
|
|
}
|
|
}
|
|
|
|
&.flipped-x.mwe-popups-is-tall {
|
|
&::before {
|
|
border-bottom-color: var( --border-color-base );
|
|
}
|
|
}
|
|
|
|
&.flipped-x-y {
|
|
&::before {
|
|
border-top-color: var( --border-color-base );
|
|
}
|
|
|
|
&::after {
|
|
border-top-color: var( --color-surface-1 );
|
|
}
|
|
|
|
&.mwe-popups-is-tall {
|
|
&::before {
|
|
border-top-color: var( --border-color-base );
|
|
}
|
|
|
|
&::after {
|
|
border-top-color: var( --color-surface-1 );
|
|
}
|
|
}
|
|
}
|
|
|
|
&.flipped-y {
|
|
&::before {
|
|
border-top-color: var( --border-color-base );
|
|
}
|
|
|
|
&::after {
|
|
border-top-color: var( --color-surface-1 );
|
|
}
|
|
}
|
|
}
|
|
|
|
/* preview.less */
|
|
.mwe-popups-title {
|
|
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 ) );
|
|
}
|
|
}
|
|
|
|
.mwe-collapsible-placeholder {
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports ( clip-path: polygon( 1px 1px ) ) {
|
|
.mwe-popups {
|
|
.mwe-popups-container {
|
|
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
|
|
// --pseudo-radius: var( --border-radius-medium );
|
|
}
|
|
}
|
|
}
|
|
|
|
/* settingsDialog.less */
|
|
#mwe-popups-settings {
|
|
background: var( --color-surface-1 );
|
|
border-color: var( --border-color-base );
|
|
border-radius: var( --border-radius-medium );
|
|
box-shadow: var( --box-shadow-drop-xx-large );
|
|
|
|
header {
|
|
border-bottom-color: var( --border-color-base );
|
|
|
|
h1 {
|
|
font-family: var( --font-family-base );
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
}
|
|
|
|
.mwe-ui-icon-popups-close {
|
|
opacity: var( --opacity-icon-base );
|
|
|
|
&:hover {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
}
|
|
|
|
&:active {
|
|
opacity: var( --opacity-icon-base--selected );
|
|
}
|
|
}
|
|
|
|
main#mwe-popups-settings-form {
|
|
p {
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
form {
|
|
label {
|
|
> span {
|
|
font-weight: var( --font-weight-semibold );
|
|
color: var( --color-emphasized );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* settingsDialogRenderer.less */
|
|
.mwe-popups-overlay {
|
|
background-color: var( --background-color-backdrop-light );
|
|
}
|
|
|
|
// Responsive support
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
.mwe-popups {
|
|
position: fixed;
|
|
inset: auto 0 0 0 !important;
|
|
width: auto !important;
|
|
overflow: hidden; // Hide pointer and also rounded corners
|
|
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 );
|
|
}
|
|
|
|
.mwe-popups-container {
|
|
margin-bottom: 0 !important; // cancel negative margin as we have no pointers
|
|
|
|
// Hide footer
|
|
footer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Vertical card
|
|
&.mwe-popups-is-not-tall {
|
|
.mwe-popups-thumbnail {
|
|
width: 100%;
|
|
}
|
|
|
|
.mwe-popups-extract {
|
|
min-height: auto;
|
|
max-height: 58px;
|
|
margin-bottom: var( --space-xl );
|
|
}
|
|
}
|
|
}
|
|
}
|