MediaWiki:Gadget-skinToggles.css - Revision history

Alex at 16:15, 17 October 2024

2024-10-17T16:15:29Z

← Older revision		Revision as of 18:15, 17 October 2024
Line 37:		Line 37:

	.rsw-skin-toggle-popup .light-mode-button .button-img {		.rsw-skin-toggle-popup .light-mode-button .button-img {
	background: url('~~filepath:~~//Light_mode_icon.png?width=70') center no-repeat;		background: url('/images/rss/Light_mode_icon.png?width=70') center no-repeat;
	height: 70px;		height: 70px;
	width: 70px;		width: 70px;
Line 44:		Line 44:
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.rsw-skin-toggle-popup .light-mode-button .button-img {		.rsw-skin-toggle-popup .light-mode-button .button-img {
	background-image: url('~~filepath:~~//Light_mode_icon.png');		background-image: url('/images/rss/Light_mode_icon.png');
	background-size: 70px;		background-size: 70px;
	}		}
Line 61:		Line 61:

	.rsw-skin-toggle-popup .dark-mode-button .button-img {		.rsw-skin-toggle-popup .dark-mode-button .button-img {
	background: url('~~filepath:~~//Dark_mode_icon.png?width=70') center no-repeat;		background: url('/images/rss/Dark_mode_icon.png?width=70') center no-repeat;
	height: 70px;		height: 70px;
	width: 70px;		width: 70px;
Line 68:		Line 68:
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.rsw-skin-toggle-popup .dark-mode-button .button-img {		.rsw-skin-toggle-popup .dark-mode-button .button-img {
	background-image: url('~~filepath:~~//Dark_mode_icon.png');		background-image: url('/images/rss/Dark_mode_icon.png');
	background-size: 70px;		background-size: 70px;
	}		}
Line 85:		Line 85:

	.rsw-skin-toggle-popup .brown-mode-button .button-img {		.rsw-skin-toggle-popup .brown-mode-button .button-img {
	background: url('~~filepath:~~//Brown_mode_icon.png?width=70') center no-repeat;		background: url('/images/rss/Brown_mode_icon.png?width=70') center no-repeat;
	height: 70px;		height: 70px;
	width: 70px;		width: 70px;
Line 92:		Line 92:
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.rsw-skin-toggle-popup .brown-mode-button .button-img {		.rsw-skin-toggle-popup .brown-mode-button .button-img {
	background-image: url('~~filepath:~~//Brown_mode_icon.png');		background-image: url('/images/rss/Brown_mode_icon.png');
	background-size: 70px;		background-size: 70px;
	}		}
Line 109:		Line 109:

	.rsw-skin-toggle-popup .oo-ui-optionWidget-selected .button-text-selected {		.rsw-skin-toggle-popup .oo-ui-optionWidget-selected .button-text-selected {
	background: url('~~filepath:~~//Checkmark_green.png?width=15') center no-repeat;		background: url('/images/rss/Checkmark_green.png?width=15') center no-repeat;
	position: relative;		position: relative;
	top: 1.4em;		top: 1.4em;
Line 116:		Line 116:
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.rsw-skin-toggle-popup .oo-ui-optionWidget-selected .button-text-selected {		.rsw-skin-toggle-popup .oo-ui-optionWidget-selected .button-text-selected {
	background-image: url('~~filepath:~~//Checkmark_green.png');		background-image: url('/images/rss/Checkmark_green.png');
	background-size: 15px;		background-size: 15px;
	}		}
Line 123:		Line 123:

	.rsw-skin-toggle-popup .oo-ui-widget-disabled .oo-ui-optionWidget-selected .button-text-selected {		.rsw-skin-toggle-popup .oo-ui-widget-disabled .oo-ui-optionWidget-selected .button-text-selected {
	background-image: url('~~filepath:~~//Checkmark_grey.png?width=15');		background-image: url('/images/rss/Checkmark_grey.png?width=15');
	opacity: .5;		opacity: .5;
	}		}
Line 129:		Line 129:
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.rsw-skin-toggle-popup .oo-ui-widget-disabled .oo-ui-optionWidget-selected .button-text-selected {		.rsw-skin-toggle-popup .oo-ui-widget-disabled .oo-ui-optionWidget-selected .button-text-selected {
	background-image: url('~~filepath:~~//Checkmark_grey.png');		background-image: url('/images/rss/Checkmark_grey.png');
	}		}

Line 374:		Line 374:

	.wgl-theme-popup .light-mode-button .button-img {		.wgl-theme-popup .light-mode-button .button-img {
	background: url('~~filepath:~~//Light_mode_icon.png?width=94') center no-repeat;		background: url('/images/rss/Light_mode_icon.png?width=94') center no-repeat;
	}		}

Line 383:		Line 383:

	.wgl-theme-popup .dark-mode-button .button-img {		.wgl-theme-popup .dark-mode-button .button-img {
	background: url('~~filepath:~~//Dark_mode_icon.png?width=94') center no-repeat;		background: url('/images/rss/Dark_mode_icon.png?width=94') center no-repeat;
	}		}

Line 392:		Line 392:

	.wgl-theme-popup .brown-mode-button .button-img {		.wgl-theme-popup .brown-mode-button .button-img {
	background: url('~~filepath:~~//Brown_mode_icon.png?width=94') center no-repeat;		background: url('/images/rss/Brown_mode_icon.png?width=94') center no-repeat;
	}		}

Alex: Created page with "#pt-theme-toggles .oo-ui-icon-advanced, #pt-fixed-width .oo-ui-icon-advanced { width: 15px; min-width: 15px; height: 14px; background-size: 14px; display: block; background-repeat: no-repeat; /* background-image is in vector.css */ opacity: 1; margin-bottom: -2px; } .rsw-skin-toggle-popup .oo-ui-window-frame { width: 440px !important; } .rsw-skin-toggle-popup .appearance-modal { font-size: .9em; padding: 1em 2em 1.5em; }..."

2024-10-13T00:44:02Z

Created page with "#pt-theme-toggles .oo-ui-icon-advanced, #pt-fixed-width .oo-ui-icon-advanced { width: 15px; min-width: 15px; height: 14px; background-size: 14px; display: block; background-repeat: no-repeat; background-image is in vector.css: opacity: 1; margin-bottom: -2px; } .rsw-skin-toggle-popup .oo-ui-window-frame { width: 440px !important; } .rsw-skin-toggle-popup .appearance-modal { font-size: .9em; padding: 1em 2em 1.5em; }..."

New page

#pt-theme-toggles .oo-ui-icon-advanced,
#pt-fixed-width .oo-ui-icon-advanced {
width: 15px;
min-width: 15px;
height: 14px;
background-size: 14px;
display: block;
background-repeat: no-repeat;
/* background-image is in vector.css */
opacity: 1;
margin-bottom: -2px;
}

.rsw-skin-toggle-popup .oo-ui-window-frame {
width: 440px !important;
}

.rsw-skin-toggle-popup .appearance-modal {
font-size: .9em;
padding: 1em 2em 1.5em;
}

.rsw-skin-toggle-popup .appearance-modal h2 {
font-weight: bold;
font-size: 1.5em;
padding-top: .25em;
text-align: center;
border: none;
}

.rsw-skin-toggle-popup .light-mode-button .oo-ui-buttonElement-button,
.rsw-skin-toggle-popup .light-mode-button .oo-ui-buttonElement-button:hover {
background: white !important;
border-color: #949eaa !important;
z-index: 4 !important;
}

.rsw-skin-toggle-popup .light-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) {
.rsw-skin-toggle-popup .light-mode-button .button-img {
background-image: url('filepath://Light_mode_icon.png');
background-size: 70px;
}

}

.rsw-skin-toggle-popup .light-mode-button .button-text {
color: #4c4c4c; /* @tundora */
}

.rsw-skin-toggle-popup .dark-mode-button .oo-ui-buttonElement-button,
.rsw-skin-toggle-popup .dark-mode-button .oo-ui-buttonElement-button:hover {
background: #222e45 !important;
border-color: #172136 !important;
}

.rsw-skin-toggle-popup .dark-mode-button .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) {
.rsw-skin-toggle-popup .dark-mode-button .button-img {
background-image: url('filepath://Dark_mode_icon.png');
background-size: 70px;
}

}

.rsw-skin-toggle-popup .dark-mode-button .button-text {
color: #cbd9f4;
}

.rsw-skin-toggle-popup .brown-mode-button .oo-ui-buttonElement-button,
.rsw-skin-toggle-popup .brown-mode-button .oo-ui-buttonElement-button:hover {
background: #59493c !important;
border-color: #3e240e !important;
}

.rsw-skin-toggle-popup .brown-mode-button .button-img {
background: url('filepath://Brown_mode_icon.png?width=70') center no-repeat;
height: 70px;
width: 70px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.rsw-skin-toggle-popup .brown-mode-button .button-img {
background-image: url('filepath://Brown_mode_icon.png');
background-size: 70px;
}

}

.rsw-skin-toggle-popup .brown-mode-button .button-text {
color: #f7dcc7;
}

.rsw-skin-toggle-popup .button-text-selected {
height: 15px;
padding-top: 1em;
margin-bottom: -1.7em;
}

.rsw-skin-toggle-popup .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) {
.rsw-skin-toggle-popup .oo-ui-optionWidget-selected .button-text-selected {
background-image: url('filepath://Checkmark_green.png');
background-size: 15px;
}

}

.rsw-skin-toggle-popup .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) {
.rsw-skin-toggle-popup .oo-ui-widget-disabled .oo-ui-optionWidget-selected .button-text-selected {
background-image: url('filepath://Checkmark_grey.png');
}

}

.rsw-skin-toggle-popup .reader-mode {
margin: 1em -2em 1em;
padding: 0em 2em .25em;
}

.setting-header {
font-weight: bold;
}

.rsw-skin-toggle-popup .reader-mode p {
line-height: 1.7em;
margin-bottom: 1.25em;
}

.rsw-skin-toggle-popup .reader-mode .dark-conditional-desc {
margin-bottom: 0;
}

.rsw-skin-toggle-popup .reader-toggle {
float: right;
margin-left: 1em;
margin-right: -0.25em;
transform: scale(0.8);
}

.rsw-skin-toggle-popup .dark-times-selects {
margin: 0.4em 0 1.25em;
}

.rsw-skin-toggle-popup .dark-times-selects > div {
display: inline-block;
width: 33%;
max-width: 10em;
margin: 0;
}

.rsw-skin-toggle-popup .dark-times-selects .dark-times-sep {
display: inline-block;
margin: 0 1em;
}

.rsw-skin-toggle-popup .appearance-save {
display: flex;
justify-content: space-between;
align-items: center;
}

.rsw-skin-toggle-popup .floornumber-select {
float: right;
}

.rsw-skin-toggle-popup .save-button-container {
display: flex;
}

.rsw-skin-toggle-popup .save-button-desc {
margin-right: 1em;
line-height: 1.7em;
}

body.wgl-readermode #ca-reader-menu {
position: relative;
}

body.wgl-readermode #ca-reader-dropdown {
display: none;
padding: 1.5em .75em 1.25em;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); /* @box-shadow-dark */
position: absolute;
top: 2.5em;
left: 0;
z-index: 10;
width: auto;

/* same as "More" dropdown */
background: var(--body-light);
border: 1px solid var(--body-border);
transition: opacity 100ms;
}

body.wgl-readermode #ca-reader-dropdown .vector-menu-content {
height: auto;
}

body.wgl-readermode #ca-reader-menu:hover #ca-reader-dropdown {
display: flex;
}

body.wgl-readermode #ca-reader-menu > a {
position: relative;
margin-right: .6em;
padding-right: 1.2em;
}

body.wgl-readermode #ca-reader-menu > a::after {
content: '';
position: absolute;
top: .1em;
right: 0;
bottom: 0;
left: 0;
background-image: var(--arrow-down);
background-position: 100% 50%;
background-repeat: no-repeat;
opacity: 0.84;
}

body.wgl-readermode #ca-reader-dropdown .portal {
margin: 0 .565em;
padding: 0;
}

body.wgl-readermode #ca-reader-dropdown h3 {
display: block;
float: initial;
font-size: .9em;
margin: 0 .6em .75em;
background: none;
box-shadow: none;
}

body.wgl-readermode #ca-reader-dropdown ul {
background: none;
padding: 0;
}

body.wgl-readermode #ca-reader-dropdown li {
background: none;
box-shadow: none;
width: 100%;
}

body.wgl-readermode #ca-reader-dropdown a {
background: none;
box-shadow: none;
width: 100%;

/* Vector defaults conflict here */
float: none;
font-size: 1.05em;
height: initial;
padding: .5em 0;
}

body.wgl-readermode #ca-reader-dropdown a:hover {
text-decoration: underline;
}

body.wgl-readermode #p-logo,
body.wgl-readermode #p-Discord,
body.wgl-readermode #p-Donate {
display: none;
}

/* it's a fix */
body.wgl-readermode #p-Recent_changes .rc-sidebar-user {
display: inline-flex;
align-items: center;
}

body.wgl-readermode #p-Recent_changes .rc-sidebar-user a:last-of-type {
margin-left: .25em;
}

/* this should be in core readermode instead */
body.wgl-readermode .mw-footer {
max-width: 56rem;
margin: 0 auto;
}

/* the :not() is for fullscreen maps: the x button would be behind sticky bar otherwise */
body:not(.oo-ui-windowManager-modal-active) #mw-head.sticky-hidden {
position: fixed;
top: 0;
width: 100%;
background: var(--body-background-color);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
z-index: 500;
}

#mw-head.sticky-hidden #left-navigation,
#mw-head.sticky-hidden #right-navigation {
margin-top: 0;
}

#mw-head.sticky-hidden .vector-menu-tabs ul li:not(.selected),
#mw-head.sticky-hidden .vector-menu-dropdown .vector-menu-heading,
#mw-head.sticky-hidden .vector-search-box-inner {
box-shadow: none;
}

#mw-head:not(.sticky-hidden) #ca-nstab-mainpage {
display: none;
}

/* #p-personal background overlaps with the prompt */
#rsw-color-scheme-prompt {
top: 32px !important;
}

/* New skin popup */
.wgl-theme-popup {
margin-top: 20px !important;
box-shadow: rgba(0, 0, 0, 0.21) 0px 5px 20px 0px;
}

.wgl-theme-popup .appearance-buttons .oo-ui-buttonOptionWidget {
margin-left: auto !important;
}

.wgl-theme-popup .appearance-buttons .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
width: 50px;
padding: 0;
border: 0;
border-radius: 0;
}

.wgl-theme-popup .button-img {
height: 47.5px;
background-size: 47px !important;
}

.wgl-theme-popup .oo-ui-buttonOptionWidget:not(.oo-ui-optionWidget-selected) .button-img::after {
content: " ";
width: 100%;
height: 100%;
display: block;
background: #00000082;
}

.wgl-theme-popup .oo-ui-buttonOptionWidget .button-img:hover::after {
background: transparent;
}

.wgl-theme-popup .light-mode-button .oo-ui-buttonElement-button,
.wgl-theme-popup .light-mode-button .oo-ui-buttonElement-button:hover {
background: #fff !important;
}

.wgl-theme-popup .light-mode-button .button-img {
background: url('filepath://Light_mode_icon.png?width=94') center no-repeat;
}

.wgl-theme-popup .dark-mode-button .oo-ui-buttonElement-button,
.wgl-theme-popup .dark-mode-button .oo-ui-buttonElement-button:hover {
background: #222e45 !important;
}

.wgl-theme-popup .dark-mode-button .button-img {
background: url('filepath://Dark_mode_icon.png?width=94') center no-repeat;
}

.wgl-theme-popup .brown-mode-button .oo-ui-buttonElement-button,
.wgl-theme-popup .brown-mode-button .oo-ui-buttonElement-button:hover {
background: #59493c !important;
}

.wgl-theme-popup .brown-mode-button .button-img {
background: url('filepath://Brown_mode_icon.png?width=94') center no-repeat;
}