MediaWiki:Custom-common.less/buttons.less

/**
 * Style sheet for buttons
 * Currently using "TubNet style buttons"
 * Styling referenced: //tubnet.gg

@toExcludeInput: ~"[class*='oo-ui'], [class*='wds-'], .page-side-tool, .createboxButton, .wikia-chiclet-button, .render-wiki-recommendations input, #SurveyModule input, .oo-ui-inputWidget-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, .interactive-map-editor 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, .interactive-map-editor 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, .interactive-map-editor 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(@{toExcludeInput})[type="submit"], input:not(@{toExcludeInput})[type="reset"], input:not(@{toExcludeInput})[type="button"], @{buttonClass}, button:not(@{toExcludeButton}) { display: inline-block; margin-bottom: 14px; padding: 12px; background-color: rgb(218, 88, 25); box-shadow: rgba(0, 0, 0, 0.4) -1px -4px 0px 0px inset; border-radius: 4px; color: #fff; line-height: 14px; letter-spacing: .3px; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: all .2s linear; &:hover, &:active, &:-moz-focusring, &:focus { background-color: rgb(179, 66, 10); text-decoration: none; }	&[disabled] { cursor: default; opacity: .5; }	&.secondary { background-color: rgb(179,16,11); // red &:hover, &:active, &:-moz-focusring, &:focus { background-color: rgb(127,12,8) // red }	}	&.big { font-size: 18px; height: 40px; line-height: 23px; } } 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; } input:not(@{toExcludeInput})[type="submit"], input:not(@{toExcludeInput})[type="reset"], input:not(@{toExcludeInput})[type="button"], button:not(@{toExcludeButton}) { height: 21px; &::-moz-focus-inner { border: 0; padding: 0; } }

/* Button Fixes */ .wikia-menu-button-submit input[type=submit] { border: none; height: 100%; } .wikia-menu-button, @{buttonClass}, a.wikia-button, .wikia-single-button a, .wikia-menu-button, .wikia-chiclet-button { box-sizing: content-box !important; -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; } }

/* Custom Buttons */ .page-content .full-width-button { border: 1px solid rgb(218, 88, 25); background-color: rgb(89, 36, 10); margin-bottom: 24px; padding: 7px; font-weight: bold; width: 98%; width: -moz-available; width: -webkit-fill-available; width: fill-available; +* {		margin-top: -24px; width: 100%; .table-wide-inner, .wikitable { margin-top: 0; }	}	&::before { content: '\2261'; margin: 0 12px 0 4px; } } body .page-content .button.button-forward:not(.carousel-arrow) { background-color: rgb(15,123,217); // blue transition: all 0.5s; &:after { content: ''; position: relative; opacity: 0; top: 0; right: -20px; color: white; display: inline; transition: 0.5s; }	&:hover, &:active, &:-moz-focusring, &:focus { background-color: rgb(1,76,140); // blue &:after { content: '\00bb'; opacity: 1; right: 0; padding-left: 12px; }	} } .button.large, .button .large { padding: 4px 12px; font: bold 100% arial; margin: 4px; } .page-content .tablecollapse-button { padding: 0px 3px !important; margin: 1px; float: right; }