MediaWiki:Custom-common.less/buttons.less

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

@buttonClass: ~".button:not(.carousel-arrow)"; @buttonClassImg: ~".button img:not(.carousel-arrow img)";

a.wikia-button, .wikia-single-button a, .wikia-menu-button, @{buttonClass} { 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, &:focus-visible { background-color: rgb(179, 66, 10); text-decoration: none; }	&:not(:disabled):focus-visible { box-shadow: rgba(255,255,255,0.8) -1px -2px 0 0 inset, rgba(0,0,0,0.4) -1px -4px 0px 0px inset; }	&:disabled { cursor: default; opacity: .5; }	&.secondary { background-color: rgb(179,16,11); // red &:hover, &:active, &:focus-visible { background-color: rgb(127,12,8) // red }	}	&.big { padding: 22px; font-size: 18px; font-weight: 700; }	th &:last-child, td &:last-child { margin-bottom: 0; } } a.wikia-button img, .wikia-single-button a img, .wikia-menu-button img, @{buttonClassImg} { vertical-align: text-bottom; }

/* Button Fixes */ .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; } .mw-ui-button { /* more elegant focus glow */ &:not(:disabled):focus { box-shadow: none; }	&:not(:disabled):focus-visible { box-shadow: rgba(255,255,255,0.8) -1px -2px 0 0 inset; } }

/* Custom Buttons */ body .page-content .full-width-button { border: 1px solid rgb(218, 88, 25); background-color: rgb(89, 36, 10); margin-bottom: 24px; padding: 7px; width: 98%; width: -moz-available; width: -webkit-fill-available; width: fill-available; &:hover, &:active, &:focus-visible { background-color: rgb(179, 66, 10); }	+* {		margin-top: -24px; margin-bottom: 4px; width: 100%; .table-wide-inner, .wikitable { margin-top: 0; }	}	&::before { content: '\2261'; margin: 0 12px 0 4px; } } body .page-content .forward-button { 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, &:focus-visible { background-color: rgb(1,76,140); // blue &:after { content: '\00bb'; opacity: 1; right: 0; padding-left: 12px; }	} } body .page-content .tablecollapse-button { padding: 5px; margin: 1px; float: right; }