MediaWiki:Gadget-skinToggles.less

/* ========================
       appearance modal
   ======================== */

/* top icon */

li#pt-skin-toggles {
    margin-left: 0;

	.oo-ui-icon-advanced {
	    width: 15px;
	    min-width: 15px;
	    height: 14px;
	    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;
	    margin-bottom: -2px;
	}
}

/* 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: 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;
}