MediaWiki:Common.css: Difference between revisions
Replaced content with "→CSS placed here will be applied to all skins: #SpoilerAlertCover { background-color: var(--content-background-color); position: absolute; text-align: center; font-size: 2rem; } #SpoilerAlertYes { margin-right: 5px; } #SpoilerAlertNo { margin-left: 5px; } #SpoilerAlertYes, #SpoilerAlertNo { cursor: pointer; }" Tags: Replaced Manual revert Reverted |
Tag: Undo |
||
| Line 18: | Line 18: | ||
#SpoilerAlertNo { | #SpoilerAlertNo { | ||
cursor: pointer; | cursor: pointer; | ||
} | |||
:root { | |||
--spoiler-tags-loaded: 1; | |||
--spoiler-hide-color: rgba(0, 0, 0, 0.75); | |||
--spoiler-hover-color: rgba(var(--theme-page-text-color--rgb), 0.1); | |||
--spoiler-show-color: rgba(var(--theme-page-text-color--rgb), 0.1); | |||
/* | |||
--spoiler-hide-color: red; | |||
--spoiler-hover-color: yellow; | |||
--spoiler-show-color: green; | |||
*/ | |||
--spoiler-tooltip-color: var(--theme-page-background-color--secondary); | |||
--spoiler-tooltip-text-color: var(--theme-page-text-color); | |||
--spoiler-tooltip-text: /* Purposefully empty */; | |||
--spoiler-image-button-color: rgba(0, 0, 0, 0.75); | |||
--spoiler-image-button-text-color: #ebebeb; | |||
--spoiler-image-button-text: /* Purposefully empty */; | |||
--spoiler-image-blur: 20px; | |||
} | |||
/* | |||
When JS is disabled, we don't want spoiler content to remain inaccessible. | |||
One option is to conditionally import the CSS, but then it takes longer | |||
for SpoilerTags to take effect (plus you'll get flicker on the page). | |||
This is why every rule below is prefixed with .client-js. A bit excessive, | |||
but it's better than a whole bunch of overrides. In the future this should | |||
be replaced with nested CSS | |||
*/ | |||
.client-js span.spoiler, | |||
.client-js div.spoiler span { | |||
padding: 2px 0; | |||
border-radius: 2px; | |||
transition-property: background-color, color, opacity; | |||
transition-duration: 0.3s; | |||
position: relative; | |||
} | |||
/* === Inline spoilers === */ | |||
/* Spoiler and direct descendants when unspoiled */ | |||
.client-js span.spoiler:not(.spoiled), | |||
.client-js span.spoiler:not(.spoiled) > span {font-style: normal; | |||
background-color: var(--spoiler-hide-color); | |||
color: transparent; | |||
cursor: pointer; | |||
} | |||
/* Spoiler and all descendants on hover */ | |||
.client-js body:not(.spoiler-hover-disabled) span.spoiler:not(.spoiled):hover, | |||
.client-js body:not(.spoiler-hover-disabled) span.spoiler:not(.spoiled):hover span, | |||
.client-js body:not(.spoiler-hover-disabled) span.spoiler:not(.spoiled).hovered, | |||
.client-js body:not(.spoiler-hover-disabled) span.spoiler:not(.spoiled).hovered span { | |||
background-color: var(--spoiler-hover-color); | |||
} | |||
/* Spoiler when spoiled */ | |||
.client-js span.spoiler.spoiled { | |||
background-color: var(--spoiler-show-color); | |||
} | |||
/* Anything within an inline spoiler should not be coloured | |||
or able to be clicked on while their parent is unspoiled */ | |||
.client-js span.spoiler > *:not(.spoiler) { | |||
transition: opacity 0.3s; | |||
} | |||
.client-js span.spoiler:not(.spoiled) > *:not(.spoiler) { | |||
opacity: 0; | |||
pointer-events: none; | |||
} | |||
.client-js span.spoiler.spoiled > *:not(.spoiler) { | |||
opacity: 1; | |||
} | |||
/* === Block spoilers === */ | |||
/* The importants are to ensure that more specific styles (set on the | |||
block itself or on the child elements) never override the spoiler. | |||
We can't predict what users are going to place in the spoiler, | |||
we just want it to work in every case regardless and without artificially | |||
increasing the specificity */ | |||
.client-js .spoiler-block { | |||
transition-property: background-color, color, box-shadow; | |||
transition-duration: 0.3s; | |||
position: relative; | |||
} | |||
.client-js .spoiler-block:not(.spoiled) { | |||
background-color: var(--spoiler-hide-color) !important; | |||
color: transparent !important; | |||
cursor: pointer; | |||
} | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler-block:not(.spoiled):hover { | |||
background-color: var(--spoiler-hover-color) !important; | |||
} | |||
.client-js .spoiler-block:not(.spoiled) > * { | |||
opacity: 0 !important; | |||
pointer-events: none; | |||
} | |||
.client-js .spoiler-block.spoiled > * { | |||
opacity: 1 !important; | |||
transition: opacity 0.3s; | |||
} | |||
/* === Spoiler image === */ | |||
.client-js .spoiler-image, | |||
.client-js .spoiler-blur { | |||
position: relative; | |||
width: fit-content; | |||
display: block; | |||
} | |||
.client-js .spoiler-image:before, | |||
.client-js .spoiler-blur:before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
background-color: rgba(255, 255, 255, 0.1); | |||
backdrop-filter: blur(var(--spoiler-image-blur)); | |||
} | |||
.client-js .spoiler-image:after, | |||
.client-js .spoiler-blur:after { | |||
content: var(--spoiler-image-button-text); | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
width: max-content; | |||
max-width: calc(100% - 6px); | |||
transform: translate(-50%, -50%); | |||
padding: 0.2em 0.75em; | |||
border-radius: 1em; | |||
color: var(--spoiler-image-button-text-color); | |||
background-color: var(--spoiler-image-button-color); | |||
text-align: center; | |||
word-break: break-all; | |||
font-weight: 500; | |||
} | |||
.client-js .spoiler-image[data-image-button-text], | |||
.client-js .spoiler-blur[data-image-button-text] | |||
.client-js .spoiler-gallery[data-image-button-text] { | |||
--spoiler-image-button-text: attr(data-image-button-text); | |||
} | |||
.client-js .spoiler-image:before, | |||
.client-js .spoiler-image:after, | |||
.client-js .spoiler-blur:before, | |||
.client-js .spoiler-blur:after { | |||
transition-property: opacity; | |||
transition-duration: 0.3s; | |||
z-index: 1; | |||
} | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler-image:not(.spoiled):hover:before, | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler-image:not(.spoiled):hover:after, | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler-blur:not(.spoiled):hover:before, | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler-blur:not(.spoiled):hover:after { | |||
filter: brightness(1.05); | |||
} | |||
.client-js .spoiler-image:not(.spoiled):before, | |||
.client-js .spoiler-image:not(.spoiled):after, | |||
.client-js .spoiler-blur:not(.spoiled):before, | |||
.client-js .spoiler-blur:not(.spoiled):after { | |||
cursor: pointer; | |||
opacity: 1.0; | |||
} | |||
.client-js .spoiler-image.spoiled:before, | |||
.client-js .spoiler-image.spoiled:after, | |||
.client-js .spoiler-blur.spoiled:before, | |||
.client-js .spoiler-blur.spoiled:after { | |||
opacity: 0.0; | |||
pointer-events: none; | |||
} | |||
/* === Text selection === */ | |||
/* Use globally-set variable by default */ | |||
.client-js body.spoiler-selection-disabled span.spoiler:not(.spoiled), | |||
.client-js body.spoiler-selection-disabled span.spoiler:not(.spoiled) > span, | |||
.client-js body.spoiler-selection-disabled div.spoiler:not(.spoiled) span, | |||
.client-js body.spoiler-selection-disabled .spoiler-block:not(.spoiled), | |||
.client-js body.spoiler-selection-disabled .spoiler-blur:not(.spoiled) { | |||
user-select: none; | |||
} | |||
/* === Selection highlights === */ | |||
.client-js span.spoiler:not(.spoiled)::selection, | |||
.client-js span.spoiler:not(.spoiled) *::selection, | |||
.client-js div.spoiler:not(.spoiled) *::selection, | |||
.client-js .spoiler-block:not(.spoiled)::selection, | |||
.client-js .spoiler-block:not(.spoiled) *::selection { | |||
/* Ensure that text-selecting the spoiler doesn't reveal it */ | |||
color: transparent; | |||
/* But still allow the user to see the selection */ | |||
/* (If a background-color is not set, it will be transparent) */ | |||
background-color: Highlight; | |||
} | |||
/* === Tooltips === */ | |||
/* Disable tooltips when: | |||
- Globally disabled | |||
- The data-tooltip attribute is "" or "" */ | |||
.client-js .spoiler-tooltips-disabled :is(.spoiler, .spoiler-block):after, | |||
.client-js .spoiler-tooltips-disabled :is(.spoiler, .spoiler-block):before, | |||
.client-js :is(.spoiler, .spoiler-block):is([data-tooltip="false"], [data-tooltip=""]):after, | |||
.client-js :is(.spoiler, .spoiler-block):is([data-tooltip="false"], [data-tooltip=""]):before { | |||
display: none; | |||
} | |||
.client-js .spoiler:after, | |||
.client-js .spoiler:before, | |||
.client-js .spoiler-block:after, | |||
.client-js .spoiler-block:before { | |||
position: absolute; | |||
z-index: 100; | |||
opacity: 0; | |||
transition: margin-bottom 0.15s ease, opacity 0.15s ease; | |||
pointer-events: none; | |||
} | |||
.client-js .spoiler:after, | |||
.client-js .spoiler-block:after { | |||
content: var(--spoiler-tooltip-text); | |||
height: 25px; | |||
line-height: 25px; | |||
padding: 0 5px; | |||
font-family: inherit; | |||
font-weight: normal; | |||
font-style: normal; | |||
font-size: 12px; | |||
text-align: center; | |||
color: var(--spoiler-tooltip-text-color); | |||
background-color: var(--spoiler-tooltip-color); | |||
border-radius: 2px; | |||
box-shadow: 0 0 5px rgba(0,0,0,0.3); | |||
white-space: nowrap; | |||
box-sizing: border-box; | |||
left: 0; | |||
bottom: 100%; | |||
} | |||
.client-js .spoiler:before, | |||
.client-js .spoiler-block:before { | |||
content: ""; | |||
width: 0; | |||
height: 0; | |||
left: 10px; | |||
bottom: calc(100% - 6px); | |||
border-width: 6px; | |||
border-style: solid; | |||
border-color: var(--spoiler-tooltip-color) transparent transparent transparent; | |||
margin-bottom: -5.5px; | |||
transition-duration: 0.1s; | |||
} | |||
/* Show tooltip and use text from style when using "true" */ | |||
.client-js .spoiler:is([data-tooltip="true"], [data-tooltip=""]):after, | |||
.client-js .spoiler-block:is([data-tooltip="true"], [data-tooltip=""]):after { | |||
content: var(--spoiler-tooltip-text); | |||
} | |||
/* Use attribute when neither of the above */ | |||
.client-js .spoiler[data-tooltip]:not([data-tooltip=""], [data-tooltip="false"], [data-tooltip="true"]):after, | |||
.client-js .spoiler-block[data-tooltip]:not([data-tooltip=""], [data-tooltip="false"], [data-tooltip="true"]):after { | |||
content: attr(data-tooltip); | |||
} | |||
/* Show tooltip on hover when not spoiled */ | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler:not(.spoiled):hover:after, | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler:not(.spoiled):hover:before, | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler-block:not(.spoiled):hover:after, | |||
.client-js body:not(.spoiler-hover-disabled) .spoiler-block:not(.spoiled):hover:before { | |||
opacity: 1; | |||
} | |||
.client-js .spoiler:not(.spoiled):hover:after, | |||
.client-js .spoiler-block:not(.spoiled):hover:after { | |||
margin-bottom: 5.5px; | |||
} | |||
.client-js .spoiler:not(.spoiled):hover:before, | |||
.client-js .spoiler-block:not(.spoiled):hover:before { | |||
margin-bottom: 0.5px; | |||
} | |||
/* Hide the tooltips of spoilers that are nested within other spoilers */ | |||
.client-js .spoiler:not(.spoiled) .spoiler:after, | |||
.client-js .spoiler:not(.spoiled) .spoiler:before { | |||
opacity: 0 !important; | |||
} | |||
/* === Spoil all button === */ | |||
.spoil-all-button { | |||
position: relative; | |||
} | |||
.spoil-cross-icon { | |||
position: absolute; | |||
background-color: currentColor; | |||
border-radius: 2.5px; | |||
width: 2.5px; | |||
height: 18px; | |||
transform: rotate(-45deg); | |||
opacity: 0; | |||
transition: opacity 0.2s; | |||
} | |||
/* | |||
The spoil icon does double duty as showing the current state, and the target | |||
state when hovering. So: | |||
- If spoilers are hidden a crossed eye is shown. If we hover over the button, it | |||
shows an eye, indicating that clicking the button will make the spoilers visible. | |||
- If spoilers are shown, an eye is shown. If we hover over the button, it shows a | |||
crossed eye, indicating that clicking the button will hide the spoilers. | |||
/* Show the crossed eye only when all spoilers are spoiled and we hover over the icon | |||
or if any spoilers are unspoiled and we're not hovering over the icon */ | |||
.spoil-all-button.spoiled:not(.disabled):is(:hover, :focus, :focus-within) > .spoil-cross-icon, | |||
.spoil-all-button:not(.spoiled, :hover, .disabled) > .spoil-cross-icon, | |||
.spoil-all-button:not(.spoiled).disabled > .spoil-cross-icon { | |||
opacity: 1; | |||
} | |||
.spoil-all-button.spoiled > .spoil-settings-button:hover + .spoil-cross-icon, | |||
.spoil-all-button:not(.spoiled, .disabled):is(:focus, :focus-within) > .spoil-cross-icon { | |||
opacity: 0; | |||
} | |||
.spoil-all-button:not(.spoiled, .disabled) > .spoil-settings-button:hover + .spoil-cross-icon { | |||
opacity: 1; | |||
} | |||
.spoil-all-button.disabled { | |||
pointer-events: none; | |||
} | |||
.spoil-all-button.disabled > .spoil-eye-icon, | |||
.spoil-all-button.disabled > .spoil-cross-icon { | |||
color: var(--theme-accent-color--hover); | |||
} | |||
.spoil-settings-button { | |||
/* Reset default <button> styles. */ | |||
appearance: none; | |||
background: none; | |||
border: none; | |||
color: inherit; | |||
cursor: pointer; | |||
padding: 0; | |||
/* We make the outline transparent and not hidden so it still | |||
** displays itself in high-contrast mode. */ | |||
outline: 2px solid transparent; | |||
position: absolute; | |||
top: -2px; | |||
right: 0; | |||
transition: transform 0.1s cubic-bezier(0.22, 0.61, 0.36, 1); | |||
transition-delay: 0s; | |||
transform: scale(0); | |||
pointer-events: all; | |||
} | |||
.spoil-all-button:is(:hover, :focus) > .spoil-settings-button, | |||
.spoil-all-button > .spoil-settings-button:focus { | |||
transition-delay: 0.35s; | |||
transform: scale(1); | |||
} | |||
/* === Spoiler settings === */ | |||
.spoilerOptionsDialog .oo-ui-window-body { | |||
font-size: 15px; | |||
} | |||
.spoilerOptionsDialog .oo-ui-window-content.oo-ui-processDialog-content .oo-ui-window-body { | |||
padding: 0; | |||
} | |||
.spoilerOptionsDialog .oo-ui-popupWidget-popup { | |||
font-size: 13px; | |||
padding: 14px; | |||
} | |||
.spoiler-fieldLayout.oo-ui-layout.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header { | |||
width: 90%; | |||
width: fit-content; | |||
flex-grow: 0; | |||
} | |||
.spoiler-fieldLayout.oo-ui-layout.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-inline-help { | |||
font-size: 11px; | |||
padding-left: 1em; | |||
} | |||
.spoiler-fieldLayout.oo-ui-layout.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help { | |||
align-self: center; | |||
} | |||
.spoiler-fieldLayout.oo-ui-layout.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { | |||
width: 10%; | |||
margin-left: auto; | |||
} | |||
.spoiler-fieldLayout .oo-ui-inline-help { | |||
color: var(--theme-page-text-color--hover); | |||
} | } | ||