MediaWiki:Gadget-DarkModeSwitch.css
From Fallen London Wiki
Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
.flw-theme-widget-container {
display: flex;
align-items: center;
justify-content: center;
}
.flw-theme-widget-container > * {
flex: none;
}
.flw-theme-icon {
fill: #266666;
fill: var(--main-link-color, #266666);
}
.flw-theme-icon-dark {
filter: grayscale(1);
}
[data-flw-theme='dark'] .flw-theme-icon-bright {
filter: grayscale(1);
}
[data-flw-theme='dark'] .flw-theme-icon-dark {
filter: none;
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget {
background-color: #ded4c4;
background-color: var(--box-bg-color, #ded4c4);
border-color: #3a3a3a;
border-color: var(--heading-underline-color, #3a3a3a);
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled
.oo-ui-toggleSwitchWidget-grip {
background-color: #266666;
background-color: var(--main-link-color, #266666);
border-color: #3a3a3a;
border-color: var(--heading-underline-color, #3a3a3a);
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
background-color: #10140f;
background-color: var(--box-bg-color, #10140f);
border-color: #42686b;
border-color: var(--heading-underline-color, #42686b);
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on
.oo-ui-toggleSwitchWidget-grip {
background-color: #84d2d2;
background-color: var(--main-link-color, #84d2d2);
border-color: #42686b;
border-color: var(--heading-underline-color, #42686b);
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
border-color: #266666;
border-color: var(--main-link-color, #266666);
box-shadow: inset 0 0 0 1px #266666;
box-shadow: inset 0 0 0 1px var(--main-link-color, #266666);
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
background-color: #f5e9d6;
background-color: var(--box-bg-hover-color, #f5e9d6);
border-color: #42686b;
border-color: var(--heading-underline-color, #42686b);
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus:before {
border: 0;
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:focus {
background-color: #266666;
border-color: #a8f6f6;
box-shadow: inset 0 0 0 1px #266666;
}
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active
.oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover
.oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus
.oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active
.oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover
.oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:focus
.oo-ui-toggleSwitchWidget-grip {
background-color: #a8f6f6;
border-color: #a8f6f6;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
