MediaWiki:Gadget-themeToggle.css: Difference between revisions
From Tardis Wiki, the free Doctor Who reference
Bongolium500 (talk | contribs) (Created page with "#p-themes { order: 4; white-space: nowrap; line-height: unset; padding-left: 12px; min-width: 10em; margin-right: 0; position: relative; list-style: none; } #p-themes-checkbox { display: none; } #p-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='current...") |
Bongolium500 (talk | contribs) No edit summary |
||
Line 39: | Line 39: | ||
border: 0; | border: 0; | ||
left: 0; | left: 0; | ||
background: var(--primary-3); | background: var(--primary-3); | ||
font-size: inherit; | font-size: inherit; | ||
Line 52: | Line 51: | ||
padding: 0; | padding: 0; | ||
z-index: 3; | z-index: 3; | ||
} | |||
@media screen and (min-width: 851px) { | |||
.vector-menu-content { | |||
top: 2em; | |||
} | |||
} | } | ||
.vector-menu-dropdown:hover .vector-menu-content { | .vector-menu-dropdown:hover .vector-menu-content { |
Revision as of 14:09, 20 February 2024
#p-themes {
order: 4;
white-space: nowrap;
line-height: unset;
padding-left: 12px;
min-width: 10em;
margin-right: 0;
position: relative;
list-style: none;
}
#p-themes-checkbox {
display: none;
}
#p-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: "";
}
#p-themes-label {
padding: 0;
margin: 0;
background: 0 0;
display: flex;
align-items: center;
height: 100%;
color: var(--text-color);
}
.vector-menu-content {
border: 0;
left: 0;
background: var(--primary-3);
font-size: inherit;
line-height: inherit;
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 {
list-style: none;
padding: 5px;
text-align: center;
border-radius: 6px;
}
.vector-menu-content-list .mw-list-item a,
.vector-menu-content-list .mw-list-item a:hover,
.vector-menu-content-list .mw-list-item a:active,
.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 {
background-color: var(--primary-4);
}