MediaWiki:Custom-common.less/WikiaMenuButton.less

/** WikiaMenuButton.less
 * Style sheet for the Old wikia menu button before UCP and some custom button formatting.
 * Includes some formatting.
 * Author is unknown.
 * Credits go to FANDOM staff.

@toExclude: ~"[class*='oo-ui'], [class*='wds-'], .page-side-tool, .createboxButton, .wikia-chiclet-button, .render-wiki-recommendations input, #SurveyModule input, .global-navigation input, #articleComments input, .page__right-rail input, #discord-member-modal input, .ViewMoreReplies input, .top-ads-container input, .MessageWallForum input, .gpt-ad input, #highlight__main-container input"; @toExcludeButton: ~"[class*='oo-ui'], [class*='wds-'], .page-side-tool, .createboxButton, .wikia-chiclet-button, .render-wiki-recommendations button, #SurveyModule button, .global-navigation button, #articleComments button, .page__right-rail button, #discord-member-modal button, .ViewMoreReplies button, .top-ads-container button, .MessageWallForum button, .gpt-ad button, #highlight__main-container button"; @toExcludeImg: ~"[class*='oo-ui'] img, [class*='wds-'] img, .page-side-tool img, .createboxButton img, .wikia-chiclet-button img, .render-wiki-recommendations img, #SurveyModule img, .global-navigation img, #articleComments img, .page__right-rail img, #discord-member-modal img, .ViewMoreReplies img, .top-ads-container img, .MessageWallForum img, .gpt-ad img, #highlight__main-container img"; @buttonClass: ~".button:not(.carousel-arrow)"; @buttonClassImg: ~".button img:not(.carousel-arrow img)";

a.wikia-button, .wikia-single-button a, .wikia-menu-button, input:not(@{toExclude})[type="submit"], input:not(.oo-ui-inputWidget-input):not(.global-navigation input)[type="reset"], input:not(.oo-ui-inputWidget-input):not(.global-navigation input)[type="button"], @{buttonClass}, button:not(@{toExcludeButton}) { background-color: #bb531f; background-image: -moz-linear-gradient(top, #f38047 35%, #bb531f 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #f38047), color-stop(65%, #bb531f)); background-image: -o-linear-gradient(top, #f38047 35%, #bb531f 65%); background-image: -ms-linear-gradient(top, #f38047 35%, #bb531f 65%); border: 1px solid #8a3a13; border-radius: 4px; color: #fff; cursor: pointer; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 12px; height: 19px; line-height: 20px; margin: 0; padding: 0 10px; text-decoration: none; white-space: nowrap; } @{buttonClass}, a.wikia-button, .wikia-single-button a, .wikia-menu-button, .wikia-chiclet-button { box-sizing: content-box !important; } a.wikia-button, .wikia-single-button a, .wikia-menu-button, input:not(@{toExclude})[type="submit"], input:not(@{toExclude})[type="reset"], input:not(@{toExclude})[type="button"], @{buttonClass}, button:not(@{toExcludeButton}) { &:hover { background-color: #ab4e1f; background-image: -moz-linear-gradient(top, #dc6d35 35%, #ab4e1f 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #dc6d35), color-stop(65%, #ab4e1f)); background-image: -o-linear-gradient(top, #dc6d35 35%, #ab4e1f 65%); background-image: -ms-linear-gradient(top, #dc6d35 35%, #ab4e1f 65%); text-decoration: none; }   &.active, &:active { background-image: -moz-linear-gradient(top, #ab4e1f 35%, #dc6d35 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #ab4e1f), color-stop(65%, #dc6d35)); background-image: -o-linear-gradient(top, #ab4e1f 35%, #dc6d35 65%); background-image: -ms-linear-gradient(top, #ab4e1f 35%, #dc6d35 65%); color: #fff; }   &[disabled] { cursor: default; opacity: .5; &:active { background-color: #bb531f; background-image: -moz-linear-gradient(top, #f38047 35%, #bb531f 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #f38047), color-stop(65%, #bb531f)); background-image: -o-linear-gradient(top, #f38047 35%, #bb531f 65%); background-image: -ms-linear-gradient(top, #f38047 35%, #bb531f 65%); }   }    &.secondary { background-color: #e6e6e6; background-image: -moz-linear-gradient(top, white 35%, #e6e6e6 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, white), color-stop(65%, #e6e6e6)); background-image: -o-linear-gradient(top, white 35%, #e6e6e6 65%); background-image: -ms-linear-gradient(top, white 35%, #e6e6e6 65%); border: 1px solid #733517; color: #3a3a3a; &:hover { background-color: gainsboro; background-image: -moz-linear-gradient(top, whitesmoke 35%, gainsboro 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, whitesmoke), color-stop(65%, gainsboro)); background-image: -o-linear-gradient(top, whitesmoke 35%, gainsboro 65%); background-image: -ms-linear-gradient(top, whitesmoke 35%, gainsboro 65%); }       &.active, &:active { background-color: #e6e6e6; background-image: -moz-linear-gradient(top, gainsboro 35%, whitesmoke 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, gainsboro), color-stop(65%, whitesmoke)); background-image: -o-linear-gradient(top, gainsboro 35%, whitesmoke 65%); background-image: -ms-linear-gradient(top, gainsboro 35%, whitesmoke 65%); }   }    &.big { font-size: 18px; height: 40px; line-height: 23px; }   &:-moz-focusring { box-shadow: inset 0 0 1px 1px highlight; }   &:focus { box-shadow: inset 0 0 1px 1px highlight; } } a.wikia-button img, .wikia-single-button a img, .wikia-menu-button img, input[type="submit"] img:not(@{toExcludeImg}), input[type="reset"] img:not(@{toExcludeImg}), input[type="button"] img:not(@{toExcludeImg}), @{buttonClassImg}, button img:not(@{toExcludeImg}) { vertical-align: text-bottom; &.chevron { margin-top: 1px; vertical-align: middle; } } a.wikia-button.secondary img.chevron, .wikia-single-button a.secondary img.chevron, .wikia-menu-button.secondary img.chevron, input[type="submit"].secondary img.chevron:not(@{toExcludeImg}), input[type="reset"].secondary img.chevron:not(@{toExcludeImg}), input[type="button"].secondary img.chevron:not(@{toExcludeImg}), @{buttonClass}.secondary img.chevron, button.secondary img.chevron:not(@{toExcludeImg}) { border-color: #3a3a3a transparent transparent; } .wikia-menu-button-submit input[type=submit] { border: none; height: 100%; } input:not(@{toExclude})[type="submit"], input:not(@{toExclude})[type="reset"], input:not(@{toExclude})[type="button"], button:not(@{toExcludeButton}) { height: 21px; &::-moz-focus-inner { border: 0; padding: 0; } }

.wikia-menu-button { list-style: none; position: relative; text-align: left; /* :hover { background-color: #bb531f; background-image: -moz-linear-gradient(top, #f38047 35%, #bb531f 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #f38047), color-stop(65%, #bb531f)); background-image: -o-linear-gradient(top, #f38047 35%, #bb531f 65%); background-image: -ms-linear-gradient(top, #f38047 35%, #bb531f 65%); } */   /* a:hover { text-decoration: none; } */   /* > a, .drop, > li > a { display: inline-block; &:hover { background-color: #ab4e1f; background-image: -moz-linear-gradient(top, #dc6d35 35%, #ab4e1f 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #dc6d35), color-stop(65%, #ab4e1f)); background-image: -o-linear-gradient(top, #dc6d35 35%, #ab4e1f 65%); background-image: -ms-linear-gradient(top, #dc6d35 35%, #ab4e1f 65%); }       &:active { background-image: -moz-linear-gradient(top, #ab4e1f 35%, #dc6d35 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #ab4e1f), color-stop(65%, #dc6d35)); background-image: -o-linear-gradient(top, #ab4e1f 35%, #dc6d35 65%); background-image: -ms-linear-gradient(top, #ab4e1f 35%, #dc6d35 65%); color: #fff; }   } */    /* > a, > li > a { border-bottom-left-radius: 4px; border-right: 1px solid #8c929a; border-top-left-radius: 4px; color: #fff; padding: 0 8px 0 5px; } */   .drop { border-bottom-right-radius: 4px; border-top-right-radius: 4px; margin-left: -3px; padding-left: 5px; }   ul { background: #ffffff; border: 1px solid #733517; display: none; left: -1px; list-style: none; margin: 0; position: absolute; top: 19px; z-index: 100; box-shadow: 1px 2px 12px 0 #333333; a { color: #3a3a3a; display: block; padding: 9px 9px 7px; &:hover { background-color: #d9dbdd; }       }        li { border-top: 1px solid #cccccc; line-height: normal; &:first-child { border: 0; }       }    }    .WikiaMenuElement { margin: 0; }   .icon, img { vertical-align: text-bottom; }   .chevron { border-top-color: #fff; margin: 0 7px 0 1px; }   &.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; ul { display: block; }   }    &.secondary { border: 1px solid #cccccc; display: inline; list-style: none; margin: 0; position: relative; text-align: left; &:hover { background-color: #e6e6e6; background-image: -moz-linear-gradient(top, white 35%, #e6e6e6 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, white), color-stop(65%, #e6e6e6)); background-image: -o-linear-gradient(top, white 35%, #e6e6e6 65%); background-image: -ms-linear-gradient(top, white 35%, #e6e6e6 65%); }       &.combined { padding-left: 4px; &:hover { background-color: gainsboro; background-image: -moz-linear-gradient(top, whitesmoke 35%, gainsboro 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, whitesmoke), color-stop(65%, gainsboro)); background-image: -o-linear-gradient(top, whitesmoke 35%, gainsboro 65%); background-image: -ms-linear-gradient(top, whitesmoke 35%, gainsboro 65%); }           .drop:hover { background: transparent; }       }        > a, .drop, > li > a { color: #3a3a3a; margin-top: -2px; &:hover { background-color: gainsboro; background-image: -moz-linear-gradient(top, whitesmoke 35%, gainsboro 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, whitesmoke), color-stop(65%, gainsboro)); background-image: -o-linear-gradient(top, whitesmoke 35%, gainsboro 65%); background-image: -ms-linear-gradient(top, whitesmoke 35%, gainsboro 65%); }           &:active { background-color: #e6e6e6; background-image: -moz-linear-gradient(top, gainsboro 35%, whitesmoke 65%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, gainsboro), color-stop(65%, whitesmoke)); background-image: -o-linear-gradient(top, gainsboro 35%, whitesmoke 65%); background-image: -ms-linear-gradient(top, gainsboro 35%, whitesmoke 65%); }       }        > a { border-right: 1px solid #cccccc; }       ul { background: #ffffff; border: 2px solid #cccccc; display: none; left: -1px; list-style: none; margin: 0; position: absolute; top: 19px; z-index: 100; a { color: #3a3a3a; display: block; &:hover { background-color: #d9dbdd !important; }           }            li { border-top: 1px solid #cccccc; line-height: normal; &:first-child { border: 0; }           }        }        &.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; ul { display: block; }       }    } }

.page-content { .wikia-menu-button, @{buttonClass}, a.wikia-button, .wikia-single-button a,   .wikia-menu-button, .wikia-chiclet-button { padding: 3px 5px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } }

.oo-ui-buttonElement-button { color: var(--theme-article-text-color) !important; .oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive > & { color: var(--theme-alert-color) !important; } }