$light-transparent: rgba(0, 0, 0, 0.2); $white-transparent: rgba(255, 255, 255, 0.90); $dark-transparent: rgba(0, 0, 0, 0.4); $darker-transparent: rgba(0, 0, 0, 0.6); $darkest-transparent: rgba(0, 0, 0, 0.9); $grey-text: rgba(192, 192, 192, 1.0); $dark-grey-text: rgba(64, 64, 64, 1.0); $light-text: rgba(240, 240, 240, 1.0); $light-grey: lightgrey; $dark-grey: rgba(128, 128, 128, 1.0); $darker-grey: rgba(64, 64, 64, 1.0); $darkest-grey: rgba(32, 32, 32, 1.0); $bright-blue: #2F80ED; $action-color: #FF3464; $action-color-light: #FF74A4; $action-color-transparent: rgba(255, 52, 100, 0.9); $hud-panel-background: rgba(79, 79, 79, 0.45); $spoke-action-color: $bright-blue; %unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } %default-font { font-family: 'Open Sans', sans-serif; } %glass-text { font-family: 'Open Sans', sans-serif; color: black; } %glass-icon { -webkit-filter: drop-shadow( 0px 0px 3px #606060 ); filter: drop-shadow( 0px 0px 3px #606060 ); } %rounded-border { border: 1px solid #e2e2e2; box-sizing: border-box; border-radius: 10px; } %form-field-on-white { border: 1px solid #e2e2e2; background-color: white; border-radius: 10px; } %big-action-button { @extend %default-font; appearance: none; -moz-appearance: none; -webkit-appearance: none; outline-style: none; font-size: 18px; font-weight: bold; cursor: pointer; border-radius: 32px; border: 0; width: 350px; padding: 18px; text-decoration: none; @media (max-width: 768px) { width: auto; padding: 18px 48px; } background: #FF3464; color: white; display: flex; align-items: center; justify-content: center; min-width: 150px; margin-right: 12px; margin-left: 12px; white-space: nowrap; } %bottom-button { @extend %action-button; margin: 16px 0; } %wide-button { width: 350px; @media (max-width: 768px) { width: 327px; } } %action-button { @extend %default-font; appearance: none; -moz-appearance: none; -webkit-appearance: none; text-decoration: none; outline-style: none; font-weight: bold; cursor: pointer; border: 0; border-radius: 28px; padding: 0px 18px; background: #FF3464; font-size: 1em; color: white; display: flex; align-items: center; flex-direction: column; justify-content: center; min-width: 150px; height: 48px; } %action-button-selected { background: white; color: $action-color; } %bottom-action-button { @extend %bottom-button; background: #FF3464; } %top-title { font-size: 1.5em; font-weight: bold; } %top-subtitle { font-size: 1.0em; padding-top: 4px; } %big-icon-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent; color: white; border: none; font-size: 64pt; outline-style: none; } %checkbox { appearance: none; -moz-appearance: none; -webkit-appearance: none; width: 2em; height: 2em; border: 1px solid #e2e2e2; background-color: white; border-radius: 6px; vertical-align: sub; margin: 0 0.7em } %checkbox-checked { outline: 9px solid $action-color; outline-offset: -15px; } %background-agnostic { color: black; text-shadow: 0px 0px 10px #888; } %fa-icon-button { @extend %default-font; margin: 16px 0; padding: 0; display: block; background: none; border: none; color: black; cursor: pointer; font-size: 0.8em; outline-style: none; } %fa-icon-big { width: 40px !important; height: 40px; display: inline-block; font-size: 22px; vertical-align: sub; line-height: 42px; svg { margin-left: 0px; } } %fa-icon-button-icon { background: black; width: 40px !important; height: 40px; border: 3px solid white; border-radius: 40px; display: inline-block; font-size: 22px; vertical-align: sub; line-height: 42px; svg { margin-right: 2px; } } %fa-icon-button-text { margin-left: 16px; }