User:Irukaza/common.css

.wds-dropdown {
	background-color:grey;
	border-color:grey;
    display: inline-block;
    position: relative;
}
.wds-dropdown__content {
    background-color: white;
    border: 1px grey;
    border-radius: 4px;
    color: black;
    display: none;
    left: 50%;
    min-width: 70%;
    padding: 7px 0;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    z-index: 1;
}
.wds-dropdown__toggle {
	text-decoration: none !important;
    border-bottom: 1px dotted gray;
    cursor: pointer;
    position: relative;
}
.wds-dropdown:before {
    border: 9px solid transparent;
    border-bottom: 9px solid black;
    margin-left: -9px;
}
.wds-dropdown:after, .wds-dropdown:before {
    bottom: -1px;
    content: "";
    display: none;
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    width: 0;
    z-index: 2;
}
.wds-dropdown:after {
    border: 8px solid transparent;
    border-bottom: 8px solid black;
    margin-left: -8px;
}
.wds-dropdown:after, .wds-dropdown:before {
    bottom: -1px;
    content: "";
    display: none;
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    width: 0;
    z-index: 2;
}
.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: white 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 {
    list-style: none outside none;
    min-width: 100%;
    top: auto;
    display: none;
    margin: 0;
    position: absolute;
    z-index: 100;
}
.custom-dropdown:hover ul,
.custom-dropdown.wikia-menu-button:hover ul {
    display: block;
}
.custom-dropdown li a {
    font-size: 12px;
    height: 14px;
    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 <buttons-wikia-menu.scss> revert the `:hover` styles from <buttons-wikia.scss> 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:
 *
 *   - <https://discordapp.com/channels/246075715714416641/246737000189788161/761137290251862037>;
 *   - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia-menu.scss>; and
 *   - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia.scss>.
 *
 */
 
.custom-dropdown.wikia-menu-button {
    /* non-overridden declarations from <buttons-wikia.scss> 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 <buttons-wikia-menu.scss> 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);
    display: none;
    left: -1px;
    margin: 0;
    position: absolute;
    z-index: 100;
    box-shadow: 1px 2px 12px 0 #000; /* TODO: maybe calculate color as `darken(var(--theme-article-background-color), 80%)` */
}
 
.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;
}
.client-js .mw-collapsible[id^='mw-customcollapsible'] th:before, .client-js .mw-collapsible[id^='mw-customcollapsible']:before {
    content: none !important;
}

*, :after, :before {
    box-sizing: inherit;
}
*, :after, :before {
    box-sizing: inherit;
}