MediaWiki:Gadget-skinToggle.css

text-align: center; margin: 0 0.5em 0.5em; overflow: hidden; cursor: pointer; line-height: 1; display: flex; justify-content: center; }
 * 1) skinchange-button {

.skin-hydra #skinchange-button { color: var(--color-forcewhite); box-shadow: 0 0 1em var(--color-forceblack); }

.skin-hydradark #skinchange-button { color: var(--color-forceblack); box-shadow: 0 0 1em var(--color-forcewhite); }

.skin-hydradark #skinchange-button:hover .skinchange-button-dark { margin-left: calc(-2em - 100%); }

.skin-hydra #skinchange-button:hover .skinchange-button-light { margin-right: calc(-2em - 100%); }

.skin-hydradark .skinchange-button-light, .skin-hydra .skinchange-button-dark { background-color: var(--wiki-accent); }

.skinchange-button-dark, .skinchange-button-light { transform: skew(-20deg); flex-grow: 1; padding: 0.25em 0; overflow: hidden; transition: 0.5s; }

.skin-hydra .skinchange-button-light, .skin-hydradark .skinchange-button-dark { opacity: 0.5; }

.skinchange-button-light { background-color: var(--color-forcewhite); color: var(--color-forceblack); margin: 0 -5% 0 0; }

.skinchange-button-dark { color: var(--color-forcewhite); background-color: var(--color-forceblack); margin: 0 0 0 -5%; }

.skinchange-button-dark::before, .skinchange-button-light::before { font-size: 2em; font-weight: 900; font-family: 'FontAwesome 5'; transform: skew(20deg); display: inline-block; }

.skinchange-button-light::before { content: '\f185'; }

.skinchange-button-dark::before { content: '\f6c3'; }

text-align: center; z-index: 100000; position: fixed; left: 25vw; top: 25vh; height: 50vh; width: 50vw; background-color: var(--skinchange-bg); border-radius: 1vmin; display: flex; justify-content: space-around; flex-direction: column; padding: 5vmin; box-sizing: border-box; box-shadow: 3px 3px 5px var(--box-shadow-color); }
 * 1) skinchange-alert {

.skinchange-choice-outer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

.skinchange-choice { height: 1em; width: 1em; padding: 0.5em; line-height: 1; text-align: center; font-size: 10vmin; cursor: pointer; }

.skinchange-choice::after { font-family: "FontAwesome 5"; font-weight: 900; }

.skin-hydra #skinchange-light, .skin-hydradark #skinchange-dark { opacity: 0.5; }

background-color: var(--color-forceblack); color: var(--color-forcewhite); }
 * 1) skinchange-dark {

background-color: var(--color-forcewhite); color: var(--color-forceblack); }
 * 1) skinchange-light {

.skin-hydradark #skinchange-light { background-color:var(--wiki-accent); }

.skin-hydra #skinchange-dark { background-color:var(--wiki-accent); }

content: '\f6c3'; }
 * 1) skinchange-dark::after {

content: '\f185'; }
 * 1) skinchange-light::after {

position: absolute; top: 0; right: 0; height: 1em; width: 1em; font-size: calc(0.5em + 2vmin); line-height: 1; text-align: center; padding: 0.25em; }
 * 1) skinchange-x {

color: var(--body-text-color); content: '\f00d'; font-family: "FontAwesome 5"; font-weight: 900; cursor: pointer; }
 * 1) skinchange-x::after {