@import "mixins"; @import "theme"; @import "styles"; /** * Styling for all buttons * * Includes <button> elements as well as classes that are used * for formatting buttons */ /* Remove default <button> styling */ button { border: none; background-color: transparent; } .a-link-button, .std-button { @extend .noselect; text-decoration: none; background-color: #555; color: #fff; padding: 3px 5px; margin: 5px; border: 1px solid #333; &:hover { background-color: #666; } &:active { @include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6)); } } .a-link-button-inactive, .std-button-disabled, .std-button:disabled { text-decoration: none; background-color: #333; color: #fff; padding: 3px 5px; margin: 5px; border: 1px solid #333; cursor: default; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; &:hover { .tooltiptext, .tooltiptexthigh, .tooltiptextleft { visibility: visible; } } &:active { pointer-events: none; } } .a-link-button-bought, .std-button-bought { @extend .noselect; text-decoration: none; background-color: #0a0; color: #fff; padding: 3px 5px; margin: 5px; border: 1px solid #0a0; cursor: default; &:hover { .tooltiptext, .tooltiptexthigh, .tooltiptextleft { visibility: visible; } } &:active { pointer-events: none; } } /** * This is a button that is meant to be used on accordions (accordion-header and accordion-panel classes) * It has a black background so it does not clash with the default accordion coloring */ .accordion-button { @include borderRadius(12px); @include boxShadow(1px 1px 3px #000); color: #aaa; font-size: $defaultFontSize; font-weight: bold; margin: 4px; padding: 4px; background-color: #000; &:hover, &:active { color: #fff; text-decoration: none; cursor: pointer; } /* TODO focus selector? */ }