/* ========================
appearance modal
======================== */
/* top icon */
li#pt-skin-toggles {
margin-left: 0;
.oo-ui-icon-advanced {
width: 15px;
min-width: 15px;
height: 15px;
background-size: 14px;
display: block;
background-repeat: no-repeat;
background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.85464918.37900488c-1.91149353 1.51069427-3.13816124 3.84973402-3.13816124 6.47527736 0 4.55564936 3.69308349 8.24873286 8.24873286 8.24873286 2.5815709 0 4.8861545-1.1859235 6.3986798-3.0426994-.8206378 4.7389755-4.9523867 8.343122-9.9259291 8.343122-5.56375572 0-10.07407088-4.5103151-10.07407088-10.0740709 0-5.02506013 3.67919933-9.19079725 8.49074856-9.95036192z' fill='%23787776' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity: 1;
}
}
/* modal stuff */
.rsw-skin-toggle-popup {
.oo-ui-window-frame {
width: 440px !important;
}
.appearance-modal {
font-size: .9em;
padding: 1em 2em 1.5em;
h2 {
padding-top: .25em;
text-align: center;
}
}
.appearance-buttons {
display: flex;
margin: .5em auto 1.75em;
width: 100%;
justify-content: center;
}
.light-mode-button {
.oo-ui-buttonElement-button,
.oo-ui-buttonElement-button:hover {
background: white !important;
border-color: #949eaa !important;
z-index: 4 !important; // keep border-right above dark mode button
}
.button-img {
background: url('filepath://Light_mode_icon.png?width=70') center no-repeat;
height: 70px;
width: 70px;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url('filepath://Light_mode_icon.png');
background-size: 70px;
}
}
.button-text {
color: #444e5a;
}
}
.dark-mode-button {
.oo-ui-buttonElement-button,
.oo-ui-buttonElement-button:hover {
background: #222e45 !important;
border-color: #172136 !important;
}
.button-img {
background: url('filepath://Dark_mode_icon.png?width=70') center no-repeat;
height: 70px;
width: 70px;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url('filepath://Dark_mode_icon.png');
background-size: 70px;
}
}
.button-text {
color: #cbd9f4;
}
}
.button-text-selected {
height: 15px;
padding-top: 1em;
margin-bottom: -1.7em;
}
.oo-ui-optionWidget-selected .button-text-selected {
background: url('filepath://Checkmark_green.png?width=15') center no-repeat;
position: relative;
top: 1.4em;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url('filepath://Checkmark_green.png');
background-size: 15px;
}
}
// disabled state when "auto dark mode" is turned on
.oo-ui-widget-disabled .oo-ui-optionWidget-selected .button-text-selected {
background-image: url('filepath://Checkmark_grey.png?width=15');
opacity: .5;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url('filepath://Checkmark_grey.png');
}
}
.reader-mode {
background: #f9fafa;
margin: 1em -2em 1.5em;
padding: 1.75em 2em .5em;
p {
color: #949eaa;
line-height: 1.7em;
margin-bottom: 1.25em;
}
}
.reader-toggle,
.conditional-dropdown {
float: right;
margin-left: 1em;
margin-right: -0.25em;
transform: scale(.8);
}
.conditional-dropdown {
width: 100px;
}
.appearance-save {
display: flex;
justify-content: space-between;
align-items: center;
}
.floornumber-select {
float:right;
}
// prevent cancel from moving onto a new line
.save-button-container {
display: flex;
}
.save-button-desc {
margin-right: 1em;
line-height: 1.7em;
}
}
/* ========================
reader mode
======================== */
body.wgl-readermode {
#ca-reader-menu {
position: relative;
}
/* dropdown stuff */
#ca-reader-dropdown {
display: none;
background: #fff;
border: 1px solid #e4eaee;
padding: 1.5em .75em 1.25em;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.3);
position: absolute;
top: 2.5em;
left: 0;
z-index: 10;
width: auto;
}
#ca-reader-menu:hover #ca-reader-dropdown {
display: flex;
}
/* add dropdown arrow */
#ca-reader-menu > span a {
position: relative;
margin-right: .6em;
padding-right: 1.2em;
}
#ca-reader-menu > span a::after {
content: '';
position: absolute;
top: .1em;
right: 0;
bottom: 0;
left: 0;
background-image: url(/skins/Vector/images/arrow-down.png?42edd);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%23222%22/%3E %3C/svg%3E");
background-position: 100% 50%;
background-repeat: no-repeat;
opacity: 0.85;
}
/* reset a bunch of stuff */
#ca-reader-dropdown .portal {
margin: 0 .565em;
padding: 0;
}
#ca-reader-dropdown h3 {
display: block;
float: initial;
font-size: .9em;
margin: 0 .6em .75em;
background: none;
box-shadow: none;
}
#ca-reader-dropdown ul {
background: none;
}
#ca-reader-dropdown li {
background: none;
box-shadow: none;
width: 100%;
}
#ca-reader-dropdown a {
background: none;
box-shadow: none;
width: 100%;
}
#ca-reader-dropdown a:hover {
text-decoration: underline;
}
/* logo bad */
#p-logo {
display: none;
}
/* dark mode */
&.wgl-darkmode #ca-reader-dropdown {
background: #313e59;
border-color: #596e96;
box-shadow: 0 .5rem .5rem rgba(0,0,0,0.3);
}
&.wgl-darkmode #ca-reader-menu > span a::after {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%238cabe6%22/%3E %3C/svg%3E");
}
}
/* ========================
sticky header
======================== */
#mw-head.sticky-hidden {
position: fixed;
top: 0;
width: 100%;
background: #f6f6f6;
-webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-moz-box-shadow: 0 4px 10px rgba(0,0,0,0.15);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
z-index: 500;
#left-navigation,
#right-navigation {
margin-top: 0;
}
div.vectorTabs ul li:not(.selected),
div.vectorMenu h3,
div#simpleSearch {
box-shadow: none;
}
div.vectorTabs li.selected {
background: initial;
}
}
// darkmode
.wgl-darkmode .rsw-skin-toggle-popup .oo-ui-window-content {
.oo-ui-widget-enabled.light-mode-button {
a.oo-ui-buttonElement-button,
a.oo-ui-buttonElement-button:hover {
background: white !important;
border-color: #949eaa !important;
z-index: 4 !important; // keep border-right above dark mode button
}
.button-text {
color: #444e5a;
}
}
.oo-ui-widget-enabled.dark-mode-button {
a.oo-ui-buttonElement-button,
a.oo-ui-buttonElement-button:hover {
background: #222e45 !important;
border-color: #172136 !important;
}
.button-text {
color: #cbd9f4;
}
}
}
// hide Main Page link when sticky header is not active
#mw-head:not(.sticky-hidden) #ca-nstab-mainpage {
display: none;
}