MediaWiki:Common.css/src/interface/mainBox/navBar/tabs/dropdown.scss
< MediaWiki:Common.css | src
Jump to navigation
Jump to search
This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.
Ancestors: / src / interface / mainBox / navBar / tabs / dropdown.scss
Siblings: dropdown.scss tab.scss watch.scss
Children: (none)
@use "../../../../lib";
/* dropdown menu*/
#mw-head .vector-menu-dropdown{
.vector-menu-heading {
/* tab label */
position: relative;
display: flex;
align-items: center;
gap: 3px;
&::after{
all: unset;
/* arrow icon */
@include lib.pseudo-block;
width: 14px;
height: 14px;
margin-top: 1px;/*<< offset */
@include lib.mask-icon(var(--theme-icon-color-link), var(--icon-chevron-down));
}
}
&:hover .vector-menu-heading::after{
/* .vector-menu-heading is covered by .vector-menu-checkbox, therefore we can't use .vector-menu-heading:hover::after */
@include lib.mask-icon(var(--theme-icon-color-hover), var(--icon-chevron-down));
}
.vector-menu-content{
/* dropdown list body */
border-width: var(--theme-dropdown-border-width);
border-style: var(--theme-dropdown-border-style);
border-color: var(--theme-dropdown-border-color);
border-radius: var(--theme-dropdown-border-radius);
background: var(--theme-dropdown-background);
box-shadow: var(--theme-dropdown-shadow);
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0;
margin-top: 0;
white-space: nowrap;
z-index: 999;
ul{
padding: 4px;
}
li{
border-radius: calc(var(--theme-widget-border-radius) - 2px);
transition: background 0.3s;
&:hover{
background: var(--theme-highlight-background);
}
a{
display: block;
padding: var(--layout-dropdown-item-padding-y) var(--layout-dropdown-item-padding-x);
text-decoration: none;
color: var(--theme-link-color);
&:visited{
color: var(--theme-link-color-visited);
}
&:hover{
color: var(--theme-link-color-hover);
}
}
}
}
}
/* "more" menu */
#mw-head #right-navigation .vector-menu-dropdown .vector-menu-content{
left: auto;
right: var(--layout-gap);
}