MediaWiki:DropdownMenu.css

.custom-dropdown { display: inline-block; padding: 1px 8px; } .custom-dropdown > :first-child:after { background-image: url("data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D"); border-color: var(--theme-accent-label-color) transparent transparent; border-style: solid; border-width: 4px; content: ""; display: inline-block; height: 1px; margin-left: 4px; margin-top: 2px; position: relative; vertical-align: middle; width: 1px; } .custom-dropdown:hover { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -1px; } .custom-dropdown ul { display: none; list-style: none outside none; margin: 0; min-width: 100%; position: absolute; top: auto; z-index: 100; } .custom-dropdown:hover ul, .custom-dropdown.wikia-menu-button:hover ul { display: block; } .custom-dropdown li a { font-size: 12px; line-height: 14px; } .WikiaArticle { overflow: visible; } /** * The following rules approximate legacy styles which are missing from UCP. * * Some notes, in no particular order, follow. * * - Because of the template, we only need the base styles for `.wikia-menu-button`. *   The `:hover` styles from  revert the `:hover` styles from  to the base styles. *   We don't need `button`-specific stuff (like `[disabled]`) or variants (like `.secondary` and `.big`). *   Since the `div` has no `tabindex`, we don't need `:focus` either. * * For details, see: * *  - ; *  - ; and *  - . * */ .custom-dropdown.wikia-menu-button { /* non-overridden declarations from  follow: */ background-color: var(--theme-accent-color); /* TODO: maybe set `background-image` to `linear-gradient(to bottom, $color-button-highlight 35%, var(--theme-accent-color) 65%)` */ border: 1px solid var(--theme-accent-color); border-radius: 4px; color: var(--theme-accent-label-color); cursor: pointer; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 12px; height: 19px; line-height: 20px; white-space: nowrap; /* non-overridden declarations from  follow: */ list-style: none; margin: 0; position: relative; text-align: left; } .custom-dropdown.wikia-menu-button a { text-decoration: none; } .custom-dropdown.wikia-menu-button ul { background: var(--theme-page-background-color); border: 1px solid var(--theme-accent-color); box-shadow: 1px 2px 12px 0 #000; /* TODO: maybe calculate color as `darken(var(--theme-article-background-color), 80%)` */ display: none; left: -1px; margin: 0; position: absolute; z-index: 100; } .custom-dropdown.wikia-menu-button ul a, .custom-dropdown.wikia-menu-button ul .mw-selflink { color: var(--theme-page-text-color); display: block; padding: 9px 9px 7px; } .custom-dropdown.wikia-menu-button ul a:hover { background-color: var(       --theme-page-background-color--secondary    ); /* TODO: compute this properly; for light wikis, `$dropdown-background` is `mix(var(--theme-accent-color), var(--theme-article-background-color), 20%)`, and for dark wikis, it's `lighten($dropdown-background, 8%)` */ /* extra UCP crap follows: */ color: var(--theme-page-text-color); } .custom-dropdown.wikia-menu-button ul li { border-top: 1px solid var(--theme-border-color); line-height: normal; /* extra UCP crap follows: */ margin: 0; } .custom-dropdown.wikia-menu-button ul li:first-child { border: 0; } .custom-dropdown.wikia-menu-button .WikiaMenuElement { margin: 0; }