$esm-blue: #1e354d; $esm-white: #fbfcfe; $exile-red: #ce2d4e; $exile-toast-red: #c62551; $exile-toast-blue: #3ed3fb; $exile-toast-green: #9fde3a; $exile-toast-yellow: #deca39; $exile-toast-orange: #c64a25; $exile-toast-purple: #793ade; $exile-toast-pink: #de3a9f; $color-burnt-orange: #7d2f00; $color-lavender: #344d71; $color-steel-green: #2f4858; $color-brown: #574143; $color-sage: #e9f6d0; $gray-light: #979ba1; $gray: #2d3338; $gray-dark: #202428; $gray-x-dark: #181b1f; $gray-xx-dark: #101317; // Overwrite UIKit variables here. $global-background: $gray-dark; $form-disabled-background: $gray-dark; $global-font-family: "Open Sans", sans-serif; $button-default-background: $gray-dark; @import "uikit/variables-theme"; @import "uikit/mixins-theme"; @import "uikit/uikit-theme"; @import "toast"; @import "fontawesome-6.4.2/fontawesome.scss"; @import "fontawesome-6.4.2/brands.scss"; @import "fontawesome-6.4.2/solid.scss"; @import "fontawesome-6.4.2/regular.scss"; @import "v-tooltip"; @import "dashboard"; @import "uk-switch"; @import "wiki"; // @import "vue-multiselect.min.css"; .multiselect { .multiselect__tags { background: $gray; border: 0; border-radius: 0; .multiselect__input, .multiselect__single { background-color: $gray; color: $gray-light; } } .multiselect__placeholder { color: $gray-light; } .multiselect__content-wrapper { background: $gray; color: $gray-light; border: 1px solid $gray-light; } .multiselect__option { padding-left: 2em; &.multiselect__option--group { padding-left: 1em; background: adjust-color($gray, $lightness: -5%); color: $gray-light; } &.multiselect__option--selected { background: $gray; color: $gray-light; } &.multiselect__option--disabled { background: adjust-color($gray, $lightness: -5%) !important; } } .multiselect__strong { color: $gray-light; } &.multiselect--disabled { .multiselect__tags, .multiselect__select { background: adjust-color($gray, $lightness: -5%) !important; } } } pre, code { background: transparent !important; white-space: pre-wrap !important; padding: 0 !important; } pre { border: 0; color: $exile-red; padding: 0; } h1, h2, h3, h4, h5, h6, .uk-text-lead, dt { color: $esm-white !important; } dd, ol, p, label { color: $gray-light !important; } a, em { color: $exile-red !important; } small { color: $gray-light; } a.uk-navbar-item, a.uk-button-link { color: $esm-white !important; } a, a:hover, a:focus, a:visited { text-decoration: none; } .uk-list > li { color: $gray-light !important; } .uk-list-striped > li:nth-of-type(even) { background: $gray-dark; } .uk-list-striped > li:nth-of-type(odd) { background: #22262a; border-top: 0; border-bottom: 0; } .uk-table-striped > tr:nth-of-type(even), .uk-table-striped tbody tr:nth-of-type(even) { background: $gray-dark; } .uk-table-striped > tr:nth-of-type(odd), .uk-table-striped tbody tr:nth-of-type(odd) { background: #22262a; border-top: 0; border-bottom: 0; } select, option, .uk-select, .uk-select option, .uk-select:focus, .uk-input, .uk-input:focus, .esm-button, textarea, .uk-textarea, .uk-textarea:focus { background: $gray; color: $gray-light !important; border: 0; } .uk-input:disabled, .uk-select:disabled { background: #22262a; } .uk-tab::before { border-bottom: none; } .uk-heading-bullet::before { border-left: 5px solid $exile-red; } .uk-tab > .uk-active > a { border-color: $exile-red; } .uk-modal-header { background: $gray-xx-dark; border: 0; } .uk-modal-dialog, .uk-modal-footer { background: $gray-x-dark; border: 0; } .uk-checkbox { color: $gray-light; } .uk-card, .uk-card-small, .uk-card-large { border-left: 5px solid $exile-toast-green; background: #22262a; /* background: $gray; */ } .uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover { background: #22262a; filter: drop-shadow(0 0 30px rgba(30, 53, 77, 0.3)); } .uk-card-info { border-left: 5px solid $exile-toast-blue; } .uk-card-error { border-left: 5px solid $exile-red; } .uk-checkbox:disabled, .uk-radio:disabled { background-color: $gray-dark; border-color: $gray; } input::-webkit-input-placeholder { color: #64686f !important; } input:-moz-placeholder { /* Firefox 18- */ color: #64686f !important; } input::-moz-placeholder { /* Firefox 19+ */ color: #64686f !important; } input:-ms-input-placeholder { color: #64686f !important; } .uk-subnav-divider > :nth-child(n + 2):not(.uk-first-column)::before { border-left: 1px solid $gray-light; } .uk-dropdown { background-color: $gray-dark; padding: 10px 0 10px 0; margin-top: 0; } .uk-navbar-dropdown-nav a { text-align: center; font-size: 1.3em; color: #999 !important; } .uk-navbar-dropdown-nav .uk-nav-header { color: $gray-light; padding-left: 10px; } .uk-navbar-dropdown-nav li:hover:not(.uk-nav-header):not(.uk-nav-divider) { background-color: $gray; } .uk-navbar-dropdown-nav .uk-nav-divider { border-top: 1px solid $gray-light; padding-bottom: 1px; margin: 5px; } .uk-button-default { border-color: $gray-x-dark; color: $esm-white; &:hover { background-color: $gray; color: $esm-white; } } .uk-button-secondary { background-color: $gray-dark; } .uk-button-secondary:hover { background-color: #15171a; } .uk-grid-divider > :not(.uk-first-column)::before { border-left: 1px solid $esm-blue; } /* ESM STYLES */ .esm-nav-primary { background: $gray-xx-dark !important; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } .esm-nav-dropdown { background: $gray-xx-dark !important; left: 0px !important; top: 65px !important; width: 100% !important; } .esm-nav-dropdown > ul > li > a { font-size: 1.2rem; line-height: 1.5; } .esm-panel { margin: 2% 15% 0 15%; background-color: $gray-dark; } @media (max-width: $breakpoint-medium) { .esm-panel { margin: 0; background-color: $gray-x-dark; } } .id-lookup { margin-left: 15vw; margin-right: 15vw; background-color: $gray-dark; min-height: 25vh; padding: 2em 2em 2em 2em; .uk-table-striped tbody tr { border: 0 !important; } } @media (max-width: $breakpoint-medium) { .id-lookup { margin-left: 0; margin-right: 0; } } .esm-main-panel { padding-left: 10%; } .esm-description-commands dt { text-transform: lowercase !important; } .esm-list-reverse > li:nth-of-type(even) { background: #22262a; } .esm-list-reverse > li:nth-of-type(odd) { background: $gray-dark; } .esm-list-padding > li { padding: 10px 10px; } .esm-button:disabled { color: #6a6e75; background-color: #22262a; } .esm-button-confirm { background-color: $exile-toast-green; color: $esm-white !important; } .esm-button-confirm:hover { color: $esm-white; background-color: scale-color($exile-toast-green, $lightness: 20%); } .esm-button-confirm:disabled { background-color: #77ae1d; } .esm-button-danger { color: $esm-white !important; background-color: $exile-red; } .esm-button-danger:disabled { background-color: #a4243e; } /* COLORS */ .esm-text-color-white { color: $esm-white !important; } .esm-text-color-red { color: $exile-red !important; } .esm-text-color-toast-red, .color-red { color: $exile-toast-red !important; } .esm-text-color-toast-blue, .color-blue { color: $exile-toast-blue !important; } .esm-text-color-toast-green, .color-green { color: $exile-toast-green !important; } .esm-text-color-toast-yellow, .color-yellow { color: $exile-toast-yellow !important; } .esm-text-color-toast-orange, .color-orange { color: $exile-toast-orange !important; } .esm-text-color-toast-purple, .color-purple { color: $exile-toast-purple !important; } .esm-text-color-toast-pink, .color-pink { color: $exile-toast-pink !important; } .esm-text-subtle /* It's gray... */ { color: $gray-light !important; } .esm-color-blue { color: $esm-blue !important; } .color-burnt-orange { color: $color-burnt-orange !important; } .color-lavender { color: $color-lavender !important; } .color-steel-green { color: $color-steel-green !important; } .color-brown { color: $color-brown !important; } .color-sage { color: $color-sage !important; } .esm-border-color-blue { border-color: $esm-blue !important; } .esm-bg-red { background: $exile-red !important; } .esm-account-button { background: $gray; color: $esm-white !important; border-radius: 200px; height: unset !important; } [v-cloak] { display: none; } /* https://github.com/tobiasahlin/SpinKit */ .sk-folding-cube { margin: 20px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: $exile-toast-blue; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } .esm-portal-nav-button { background-color: #22262a; padding: 2em 3em 1.2em 3em; display: inline-block; } .esm-portal-nav-button p { margin-bottom: 0; } .esm-portal-nav-button:hover { text-decoration: none; filter: drop-shadow(0 0 30px rgba(30, 53, 77, 0.3)); } .steam-profile { // background-color: $gray-dark; // border: 2px solid $gray-x-dark; padding-top: 1.5em; margin-left: 0.5em; padding-bottom: 0.75em; } @media (min-width: $breakpoint-medium) { .steam-profile { // background-color: $gray-dark; // border: 2px solid $gray-x-dark; padding-top: 1.5em; margin-left: 1.5em; padding-bottom: 0.75em; } } .esm-download-changelog { * { color: $gray-light !important; } > ul { margin-bottom: 1em !important; list-style-type: none; padding-left: 0; } } .features-section-1 { padding-top: 15em; padding-bottom: 15em; } .features-section-2 { padding-top: 15em; padding-bottom: 15em; background-color: $gray-dark; } @media (max-width: $breakpoint-medium) { .features-section-1 { padding-top: 5em; padding-bottom: 5em; } .features-section-2 { padding-top: 5em; padding-bottom: 5em; background-color: $gray-dark; } } .message-configuration-list { max-height: 70vh; } .message-configuration-list > li, .message-preview { padding: 1em 1em 1em 1em; margin-bottom: 0.5em; border-left: 5px solid $exile-toast-blue; background-color: $gray-dark; a { font-size: larger; } p { margin: 0 !important; } code { padding: 2px 3px; } .header { margin-bottom: 0.25em; img { margin-right: 0.5em; } } .title { font-weight: bolder; margin-bottom: 0.25em; } } @media (max-width: $breakpoint-medium) { .message-configuration-list { max-height: 52vh; } .message-configuration-list > li { a { font-size: x-large; } } } .select-all { -webkit-user-select: all; /* Chrome all / Safari all */ -moz-user-select: all; /* Firefox all */ -ms-user-select: all; /* IE 10+ */ user-select: all; /* Likely future */ } span[uk-tooltip] { cursor: pointer; } .clickable { cursor: pointer; } .danger-zone { > h2 { color: $exile-red; } > div { border: 2px solid $exile-red; border-radius: 0.5em; padding: 1em 1em 1em 1em; } } .navbar-icon { min-height: 60px !important; }