MediaWiki:Gadget-PurgeButton.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*
* made by aliser
* repo: https://github.com/murolem/cosmoteer-wiki-purge-page-button-gadget
*/
:root {
--purge-btn--bg-opacity: 50%;
/* the length of the bg color transition between progress states, in ms */
--purge-btn--transition-duration: 100ms;
--purge-btn--stripe-size-w: 15.89px;
--purge-btn--stripe-size-h: 12.87px;
--purge-btn--stripe-color: var(--gray--light);
--purge-btn--stripe-cycle-duration: 300ms;
}
/* purge button */
.purge-btn--btn {
transition:
background-color 100ms ease-out, filter 100ms ease-out;
transition:
background-color var(--purge-btn--transition-duration) ease-out, filter var(--purge-btn--transition-duration) ease-out;
}
@keyframes purge-btn--move-stripes {
from {
background-position-x: 0px;
}
to {
background-position-x: 15.89px;
background-position-x: var(--purge-btn--stripe-size-w);
}
}
/* purge button → idle state (either before it's clicked
or after the purge is complete and the result display time has passed) */
.purge-btn--progress-state-none {
background-color: inherit;
}
/* purge button → in-progress state */
.purge-btn--btn.purge-btn--progress-state-in-progress {
--scol1: transparent;
--scol2: var(--purge-btn--stripe-color);
pointer-events: none;
cursor: default;
-webkit-text-decoration: none;
text-decoration: none;
background-image: linear-gradient(45deg, transparent 25%, var(--gray--light) 25%, var(--gray--light) 50%, transparent 50%, transparent 75%, var(--gray--light) 75%, var(--gray--light) 100%);
background-image: linear-gradient(45deg, var(--scol1) 25%, var(--scol2) 25%, var(--scol2) 50%, var(--scol1) 50%, var(--scol1) 75%, var(--scol2) 75%, var(--scol2) 100%);
background-size: 15.89px 12.87px;
background-size: var(--purge-btn--stripe-size-w) var(--purge-btn--stripe-size-h);
filter: grayscale(1);
/* transition: filter var(--purge-btn--transition-duration) ease-out; */
animation: purge-btn--move-stripes linear infinite 300ms;
animation: purge-btn--move-stripes linear infinite var(--purge-btn--stripe-cycle-duration);
}
/* purge button → complete state (success) */
.purge-btn--btn.purge-btn--progress-state-success {
background-color: color-mix(in srgb, var(--color-cosmoGreen) 50%, transparent);
}
@supports (color: color-mix(in lch, red, blue)) {
.purge-btn--btn.purge-btn--progress-state-success {
background-color: color-mix(in srgb, var(--color-cosmoGreen) var(--purge-btn--bg-opacity), transparent);
}
}
/* purge button → complete state (failure) */
.purge-btn--btn.purge-btn--progress-state-failure {
background-color: color-mix(in srgb, var(--red) 50%, transparent);
}
@supports (color: color-mix(in lch, red, blue)) {
.purge-btn--btn.purge-btn--progress-state-failure {
background-color: color-mix(in srgb, var(--red) var(--purge-btn--bg-opacity), transparent);
}
}