MediaWiki:Gadget-themeToggle.css: Difference between revisions

From Tardis Wiki, the free Doctor Who reference
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
#pt-themes {
#personal .dropdown ul, #personal .dropdown li {
order: 999;
white-space: nowrap;
line-height: unset;
padding-left: 12px;
min-width: 10em;
margin-right: 0;
position: relative;
list-style: none;
}
#pt-themes-checkbox {
display: none;
}
#pt-themes-label::after {
display: block;
width: 14px;
height: 14px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--text-color);
margin: 0 0 0 3px;
content: "";
}
#pt-themes-label {
padding: 0;
margin: 0;
background: 0 0;
display: flex;
display: flex;
align-items: center;
    flex-direction: column;
height: 100%;
color: var(--text-color);
}
}
#pt-themes-label::before {
li#pt-themes {
  content: "Change theme";
order: 999;
}
border-right: none;
#pt-themes-label span {
padding-bottom: 20px !important;
display: none;
border-radius: 10px;
}
}
.vector-menu-content {
li#pt-themes,
border: 0;
li#pt-themes > label,
left: 0;
li#pt-themes > label > span:first-child,
background: var(--primary-3);
.skin-timeless #mw-header #personal li#pt-themes > div.ext-themetoggle-popup > ul > li > a,
font-size: inherit;
#pt-themes .ext-themetoggle-popup li:not(.mw-list-item) {
line-height: inherit;
color: var(--text-color) !important;
position: absolute;
opacity: 0;
height: 0;
visibility: hidden;
overflow: hidden;
min-width: 100%;
margin: 0 0 5px 0;
padding: 0;
z-index: 3;
}
@media screen and (min-width: 851px) {
.vector-menu-content {
top: 2em;
}
}
.vector-menu-dropdown:hover .vector-menu-content {
opacity: 1;
visibility: visible;
height: auto;
}
.vector-menu-content-list {
display: flex;
flex-wrap: nowrap;
align-content: space-around;
justify-content: flex-end;
padding: 4px;
gap: 2px;
flex-direction: column;
align-items: flex-start;
line-height: 2;
margin-left: 1em;
margin-right: 1em;
}
}
.vector-menu-content-list .mw-list-item {
:root.theme-light li#pt-themes > label > span:last-child::after {
list-style: none;
filter: none;
padding: 5px;
text-align: center;
border-radius: 6px;
}
}
.vector-menu-content-list .mw-list-item a,
#pt-themes .ext-themetoggle-popup > ul {
.vector-menu-content-list .mw-list-item a:hover,
background: var(--primary-1);
.vector-menu-content-list .mw-list-item a:active,
border-color: var(--primary-3);
.vector-menu-content-list .mw-list-item a:focus,
.vector-menu-content-list .mw-list-item a:visited {
color: var(--text-color);
text-decoration: none;
}
}
.vector-menu-content-list .mw-list-item:hover {
#pt-themes .ext-themetoggle-popup::before {
background-color: var(--primary-4);
border-bottom: 0.5rem solid var(--primary-3);
}
}

Latest revision as of 18:15, 3 July 2024

#personal .dropdown ul, #personal .dropdown li {
	display: flex;
    flex-direction: column;
}
li#pt-themes {
	order: 999;
	border-right: none;
	padding-bottom: 20px !important;
	border-radius: 10px;
}
li#pt-themes,
li#pt-themes > label,
li#pt-themes > label > span:first-child,
.skin-timeless #mw-header #personal li#pt-themes > div.ext-themetoggle-popup > ul > li > a,
#pt-themes .ext-themetoggle-popup li:not(.mw-list-item) {
	color: var(--text-color) !important;
}
:root.theme-light li#pt-themes > label > span:last-child::after {
	filter: none;
}
#pt-themes .ext-themetoggle-popup > ul {
	background: var(--primary-1);
	border-color: var(--primary-3);
}
#pt-themes .ext-themetoggle-popup::before {
	border-bottom: 0.5rem solid var(--primary-3);
}