Skip to content

Commit

Permalink
feat(Popups): ✨ update Popups to 1.43
Browse files Browse the repository at this point in the history
  • Loading branch information
@alistair3149
alistair3149 committed Jan 5, 2025
1 parent 6b9fc0a commit e21d75b
Showing 1 changed file with 52 additions and 239 deletions.
291 changes: 52 additions & 239 deletions skinStyles/extensions/Popups/ext.popups.main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,278 +3,91 @@
*
* SkinStyles for Extension:Popups
* Module: ext.popups.main
* Version: REL1_39 a40ebc1
* Version: REL1_43
*
* Date: 2024-10-05
* Date: 2025-01-04
*/

@import '../../../resources/variables.less';

// Needed the specificity
.skin-citizen {
.popups-icon {
filter: var( --filter-invert );
}

/* popup.less */
.mwe-popups {
background: var( --color-surface-1 );
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
box-shadow: var( --box-shadow-drop-xx-large );

&.mwe-popups-is-not-tall {
.mwe-popups-extract {
min-height: auto;
margin-bottom: 16px;
}
}

// Add hover state to page type cards
&.mwe-popups-type-page:hover {
background: var( --color-surface-2 );

.mwe-popups-extract[ dir='ltr' ]::after {
background-image: linear-gradient( to right, transparent, var( --color-surface-2 ) 50% );
}
}

.mwe-popups-container {
color: var( --color-base );
.mwe-popups {
background: var( --color-surface-1 );
// border-radius: var( --border-radius-medium );

// Hide footer
footer {
display: none;
}
.mwe-popups-container {
footer {
// Hide footer as it is not needed
display: none;
}
}

.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-semi-bold );
}
}

&.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 );
}
.mwe-popups-title {
display: flex;
align-items: center;
}

&::after {
border-top-color: var( --color-surface-1 );
}
}
.mwe-popups-extract {
&.mwe-popups-extract {
// Standardize margin since we removed footer
margin: var( --space-md );
}

/* preview.less */
.mwe-popups-title {
font-weight: var( --font-weight-semi-bold );
&[ dir='ltr' ]::after {
/* @noflip */
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), var( --color-surface-1 ) 50% );
}

/* referencePreview.less */
&.mwe-popups-type-reference {
.mwe-popups-extract {
.mwe-popups-fade {
background-image: linear-gradient( transparent, var( --color-surface-1 ) 50% );
}
}

.mwe-collapsible-placeholder {
font-weight: var( --font-weight-semi-bold );
}
&[ dir='rtl' ]::after {
/* @noflip */
background-image: linear-gradient( to left, rgba( 255, 255, 255, 0 ), var( --color-surface-1 ) 50% );
}
}

@supports ( clip-path: polygon( 1px 1px ) ) {
.mwe-popups {
.mwe-popups-container {
background: inherit;
// 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 );
}
&.mwe-popups-no-image-pointer {
&::before {
border-top-color: var( --border-color-base );
}

// Fix inconsistent pointer height in older MW versions
.mwe-popups.flipped-y .mwe-popups-container,
.mwe-popups.flipped-x-y .mwe-popups-container {
padding-bottom: var( --pointer-height );
margin-bottom: ~'calc( var(--pointer-height) * -1 )';
&::after {
border-top-color: var( --color-surface-1 );
}
}

/* 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-semi-bold );
}
&.mwe-popups-image-pointer {
&::after {
border-top-color: var( --color-surface-1 );
}

.mwe-ui-icon-popups-close {
opacity: var( --opacity-icon-base );

&:hover {
opacity: var( --opacity-icon-base--hover );
}

&:active {
opacity: var( --opacity-icon-base--selected );
&.flipped-x {
&::after {
border-top-color: var( --color-surface-1 );
}
}
}

main#mwe-popups-settings-form {
p {
color: var( --color-subtle );
}
&.flipped-x-y {
&::after {
border-bottom-color: var( --color-surface-1 );
}

form {
label {
> span {
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}
}
&.mwe-popups-is-tall {
&::after {
border-bottom-color: var( --color-surface-1 );
}
}
}

/* settingsDialogRenderer.less */
.mwe-popups-overlay {
background-color: var( --background-color-backdrop-light );
&.flipped-y {
&::after {
border-bottom-color: var( --color-surface-1 );
}
}
}

// 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
}

// 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 );
}
}
@supports ( clip-path: polygon( 1px 1px ) ) {
.mwe-popups {
.mwe-popups-container {
background: var( --color-surface-1 );
}
}
}

0 comments on commit e21d75b

Please sign in to comment.