mirror of
https://github.com/tobspr/shapez.io.git
synced 2026-03-02 03:39:21 +00:00
Polishing, CSS Improvements, Improve dark mode
This commit is contained in:
tobspr
@@ -1,107 +1,112 @@
|
||||
.ingame_buildingsToolbar {
|
||||
position: fixed;
|
||||
@include S(bottom, 0px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
// NOTE: This flex rule may not be necessary. Need to find out intent.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
border-bottom-width: 0;
|
||||
transition: transform 120ms ease-in-out;
|
||||
will-change: transform;
|
||||
|
||||
background-color: rgba(mix(#ddd, $colorBlueBright, 90%), 0.5);
|
||||
backdrop-filter: blur(D(3px));
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: #222428;
|
||||
}
|
||||
|
||||
&:not(.visible) {
|
||||
transform: translateX(-50%) translateY(#{D(100px)});
|
||||
}
|
||||
|
||||
@include S(border-top-left-radius, $globalBorderRadius);
|
||||
@include S(border-top-right-radius, $globalBorderRadius);
|
||||
|
||||
.buildings {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
||||
.building {
|
||||
color: $accentColorDark;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(padding, 5px);
|
||||
@include S(padding-bottom, 1px);
|
||||
@include S(width, 35px);
|
||||
@include S(height, 40px);
|
||||
|
||||
background: center center / 65% no-repeat;
|
||||
|
||||
&:not(.unlocked) {
|
||||
@include S(width, 20px);
|
||||
opacity: 0.15;
|
||||
background-image: none !important;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
&.unlocked {
|
||||
pointer-events: all;
|
||||
transition: all 50ms ease-in-out;
|
||||
transition-property: background-color, transform;
|
||||
cursor: pointer;
|
||||
will-change: transform;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $accentColorDark;
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
transform: scale(1.05);
|
||||
|
||||
&::before {
|
||||
background-color: $colorBlueBright;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ingame_buildingsToolbar {
|
||||
position: fixed;
|
||||
@include S(bottom, 0px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
// NOTE: This flex rule may not be necessary. Need to find out intent.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
border-bottom-width: 0;
|
||||
transition: transform 120ms ease-in-out;
|
||||
will-change: transform;
|
||||
|
||||
backdrop-filter: blur(D(5px));
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: darken($darkModeGameBackground, 15);
|
||||
}
|
||||
|
||||
&:not(.visible) {
|
||||
transform: translateX(-50%) translateY(#{D(100px)});
|
||||
}
|
||||
|
||||
@include S(border-top-left-radius, $globalBorderRadius);
|
||||
@include S(border-top-right-radius, $globalBorderRadius);
|
||||
|
||||
.buildings {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
||||
.building {
|
||||
color: $accentColorDark;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(padding, 5px);
|
||||
@include S(padding-bottom, 1px);
|
||||
@include S(width, 35px);
|
||||
@include S(height, 40px);
|
||||
|
||||
background: center center / 65% no-repeat;
|
||||
|
||||
&:not(.unlocked) {
|
||||
@include S(width, 20px);
|
||||
opacity: 0.15;
|
||||
background-image: none !important;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
&.unlocked {
|
||||
pointer-events: all;
|
||||
transition: all 50ms ease-in-out;
|
||||
transition-property: background-color, transform;
|
||||
cursor: pointer;
|
||||
will-change: transform;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $accentColorDark;
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&.pressed {
|
||||
transform: scale(0.9) !important;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
// transform: scale(1.05);
|
||||
|
||||
&::before {
|
||||
background-color: rgba($colorBlueBright, 0.2);
|
||||
opacity: 1;
|
||||
border-top: D(3px) solid $colorBlueBright;
|
||||
@include S(top, -3px);
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,231 +1,233 @@
|
||||
.ingameDialog {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: all;
|
||||
background: $modalDialogBg;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
background-color: $modalDialogBg;
|
||||
}
|
||||
}
|
||||
|
||||
$darkModeDialogBg: darken($darkModeGameBackground, 10);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: rgba($darkModeDialogBg, 0.9);
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
background-color: rgba($darkModeDialogBg, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
> .dialogInner.optionChooserDialog .optionParent {
|
||||
.option {
|
||||
background: #3d3f42;
|
||||
|
||||
&:hover {
|
||||
background-color: #424348;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
.dialogInner {
|
||||
opacity: 1;
|
||||
}
|
||||
backdrop-filter: blur(D(3px));
|
||||
}
|
||||
|
||||
.dialogInner {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.loadingDialog {
|
||||
* {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> .dialogInner {
|
||||
background: #fff;
|
||||
max-height: calc(100vh - #{D(40px)});
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(padding, 12px);
|
||||
pointer-events: all;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #333438;
|
||||
}
|
||||
|
||||
&.optionChooserDialog {
|
||||
.optionParent {
|
||||
display: grid;
|
||||
@include S(grid-gap, 5px);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.option {
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include S(padding, 10px);
|
||||
background: #eee;
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
@include Heading;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(margin-bottom, 10px);
|
||||
|
||||
@include DarkThemeInvert();
|
||||
> .closeButton {
|
||||
opacity: 0.7;
|
||||
@include S(width, 20px);
|
||||
@include S(height, 20px);
|
||||
background: uiResource("icons/close.png") center center / 80% no-repeat;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
@include PlainText;
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
@include S(width, 350px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
position: relative;
|
||||
background: #eee;
|
||||
@include PlainText;
|
||||
height: unset;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background: #eee;
|
||||
color: #333438;
|
||||
width: 100%;
|
||||
|
||||
&.errored {
|
||||
background-color: rgb(250, 206, 206);
|
||||
}
|
||||
}
|
||||
|
||||
ul.bucketList {
|
||||
padding-left: 30px;
|
||||
|
||||
li {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
@include S(margin-top, 15px);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
> button {
|
||||
@include S(margin-left, 8px);
|
||||
@include Text;
|
||||
@include S(min-width, 60px);
|
||||
@include S(padding, 5px, 15px);
|
||||
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.good {
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.bad {
|
||||
background-color: $colorRedBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.timedButton {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
z-index: 5;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
background: rgba(#fff, 0.6);
|
||||
@include InlineAnimation(5s linear) {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ingameDialog {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: all;
|
||||
background: $modalDialogBg;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
background-color: $modalDialogBg;
|
||||
}
|
||||
}
|
||||
|
||||
$darkModeDialogBg: darken($darkModeGameBackground, 5);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: rgba($darkModeDialogBg, 0.9);
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
background-color: rgba($darkModeDialogBg, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
> .dialogInner.optionChooserDialog .optionParent {
|
||||
.option {
|
||||
background: $darkModeControlsBackground;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($darkModeControlsBackground, 5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
.dialogInner {
|
||||
opacity: 1;
|
||||
}
|
||||
backdrop-filter: blur(D(3px));
|
||||
}
|
||||
|
||||
.dialogInner {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.loadingDialog {
|
||||
* {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> .dialogInner {
|
||||
background: #fff;
|
||||
max-height: calc(100vh - #{D(40px)});
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(padding, 12px);
|
||||
pointer-events: all;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: darken($darkModeControlsBackground, 5);
|
||||
}
|
||||
|
||||
&.optionChooserDialog {
|
||||
.optionParent {
|
||||
display: grid;
|
||||
@include S(grid-gap, 5px);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.option {
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include S(padding, 10px);
|
||||
|
||||
background: #eee;
|
||||
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
@include Heading;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(margin-bottom, 10px);
|
||||
|
||||
@include DarkThemeInvert();
|
||||
> .closeButton {
|
||||
opacity: 0.7;
|
||||
@include S(width, 20px);
|
||||
@include S(height, 20px);
|
||||
background: uiResource("icons/close.png") center center / 80% no-repeat;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
@include PlainText;
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
@include S(width, 350px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
position: relative;
|
||||
background: #eee;
|
||||
@include PlainText;
|
||||
height: unset;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background: #eee;
|
||||
color: #333438;
|
||||
width: 100%;
|
||||
|
||||
&.errored {
|
||||
background-color: rgb(250, 206, 206);
|
||||
}
|
||||
}
|
||||
|
||||
ul.bucketList {
|
||||
padding-left: 30px;
|
||||
|
||||
li {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
@include S(margin-top, 15px);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
> button {
|
||||
@include S(margin-left, 8px);
|
||||
@include Text;
|
||||
@include S(min-width, 60px);
|
||||
@include S(padding, 5px, 15px);
|
||||
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.good {
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.bad {
|
||||
background-color: $colorRedBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.timedButton {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
z-index: 5;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
background: rgba(#fff, 0.6);
|
||||
@include InlineAnimation(5s linear) {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,122 +1,142 @@
|
||||
#ingame_HUD_GameMenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
grid-auto-flow: column;
|
||||
@include S(top, 10px);
|
||||
@include S(right, 10px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
@include S(grid-gap, 6px);
|
||||
|
||||
> .menuButtons {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
@include S(padding, 5px, 4px);
|
||||
justify-content: flex-end;
|
||||
@include S(margin-left, 20px);
|
||||
backdrop-filter: blur(D(1px));
|
||||
|
||||
> .button {
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
display: inline-block;
|
||||
background: center center / 60% no-repeat;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s ease-in-out;
|
||||
transition-property: opacity, transform;
|
||||
will-change: opacity;
|
||||
opacity: 0.9;
|
||||
@include S(margin-left, 5px);
|
||||
position: relative;
|
||||
// > .menuButtons {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// flex-grow: 1;
|
||||
// @include S(padding, 5px, 4px);
|
||||
// justify-content: flex-end;
|
||||
// @include S(margin-left, 20px);
|
||||
|
||||
@include IncreasedClickArea(0px);
|
||||
// > .button {
|
||||
// @include S(width, 30px);
|
||||
// @include S(height, 30px);
|
||||
// display: inline-block;
|
||||
// background: center center / 60% no-repeat;
|
||||
// pointer-events: all;
|
||||
// cursor: pointer;
|
||||
// transition: all 0.12s ease-in-out;
|
||||
// transition-property: opacity, transform;
|
||||
// will-change: opacity;
|
||||
// opacity: 0.5;
|
||||
// &:hover {
|
||||
// opacity: 0.7;
|
||||
// }
|
||||
|
||||
@include DarkThemeInvert;
|
||||
// @include DarkThemeOverride {
|
||||
// opacity: 0.9;
|
||||
// &:hover {
|
||||
// opacity: 0.6;
|
||||
// }
|
||||
// }
|
||||
// @include S(margin-left, 5px);
|
||||
// position: relative;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
// @include IncreasedClickArea(0px);
|
||||
|
||||
&.save {
|
||||
background-image: uiResource("icons/save.png");
|
||||
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
// @include DarkThemeInvert;
|
||||
|
||||
70% {
|
||||
transform: scale(1.5, 1.5) rotate(20deg);
|
||||
opacity: 0.2;
|
||||
}
|
||||
// &.save {
|
||||
// background-image: uiResource("icons/save.png");
|
||||
//
|
||||
// }
|
||||
|
||||
85% {
|
||||
transform: scale(0.9, 0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
// &.settings {
|
||||
// background-image: uiResource("icons/settings_menu_settings.png");
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
90% {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.saving {
|
||||
@include InlineAnimation(0.4s ease-in-out infinite) {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
background-image: uiResource("icons/settings.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttonContainer button {
|
||||
> button,
|
||||
> .button {
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
@include S(padding, 5px, 5px, 5px);
|
||||
|
||||
@include S(padding-left, 30px);
|
||||
@include S(margin-right, 3px);
|
||||
@include IncreasedClickArea(0px);
|
||||
@include ButtonText;
|
||||
@include S(min-height, 40px);
|
||||
background: green;
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.12s ease-in-out;
|
||||
transition-property: opacity, transform;
|
||||
display: inline-flex;
|
||||
background: center #{D(13px)} / #{D(20px)} no-repeat;
|
||||
background-color: $colorGreenBright;
|
||||
|
||||
&[data-button-id="shop"] {
|
||||
background-color: rgb(93, 103, 250);
|
||||
background-image: uiResource("icons/shop.png");
|
||||
background-size: #{D(18px)};
|
||||
display: inline-flex;
|
||||
background: center center / 70% no-repeat;
|
||||
grid-row: 1;
|
||||
|
||||
&.pressed {
|
||||
transform: scale(0.9) !important;
|
||||
}
|
||||
&[data-button-id="stats"] {
|
||||
background-color: rgb(85, 199, 138);
|
||||
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
|
||||
&.shop {
|
||||
background-image: uiResource("icons/shop.png");
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
&.stats {
|
||||
background-image: uiResource("icons/statistics.png");
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-image: uiResource("icons/save.png");
|
||||
grid-column: 3;
|
||||
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1.5, 1.5) rotate(20deg);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
85% {
|
||||
transform: scale(0.9, 0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.saving {
|
||||
@include InlineAnimation(0.4s ease-in-out infinite) {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
background-image: uiResource("icons/settings_menu_settings.png");
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
border: 0;
|
||||
color: #fff;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
bottom: unset;
|
||||
background: transparent;
|
||||
@include S(top, 0px);
|
||||
right: unset;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:not(.hasBadge) .badge {
|
||||
@@ -124,34 +144,27 @@
|
||||
}
|
||||
|
||||
&.hasBadge {
|
||||
transform-origin: 50% 0%;
|
||||
@include InlineAnimation(1s ease-in-out infinite) {
|
||||
&.shop {
|
||||
filter: none;
|
||||
background-image: uiResource("icons/shop_active.png");
|
||||
opacity: 0.9;
|
||||
}
|
||||
transform-origin: 50% 50%;
|
||||
@include InlineAnimation(0.8s ease-in-out infinite) {
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
transform: scale(1.3) rotate(6deg);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
@include S(bottom, -8px);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
background: #333;
|
||||
transform: translate(-50%, -50%);
|
||||
@include PlainText;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include S(min-width, 5px);
|
||||
@include S(height, 10px);
|
||||
@include S(padding, 1px, 3px, 2px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
border: #{D(1px)} solid #fff;
|
||||
@include InlineAnimation(1s ease-in-out infinite) {
|
||||
50% {
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
color: #333438;
|
||||
backdrop-filter: blur(D(2px));
|
||||
backdrop-filter: blur(D(1px));
|
||||
padding: D(3px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
|
||||
@@ -1,41 +1,61 @@
|
||||
#ingame_HUD_SettingsMenu {
|
||||
.statsElement {
|
||||
position: absolute;
|
||||
@include S(left, 30px);
|
||||
@include S(top, 30px);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
grid-template-rows: 1fr auto;
|
||||
flex-direction: column;
|
||||
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
span {
|
||||
@include S(margin-bottom, 25px);
|
||||
@include Heading;
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
@include S(grid-gap, 10px);
|
||||
background: rgba(0, 10, 20, 0.1);
|
||||
@include S(padding, 10px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
button {
|
||||
background-color: #eee;
|
||||
color: #55585a;
|
||||
}
|
||||
}
|
||||
}
|
||||
#ingame_HUD_SettingsMenu {
|
||||
.statsElement {
|
||||
position: absolute;
|
||||
@include S(left, 30px);
|
||||
@include S(right, 30px);
|
||||
@include S(bottom, 30px);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-auto-columns: 1fr;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
opacity: 0.5;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
@include Heading;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 50px);
|
||||
@include S(margin-top, -10px);
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
filter: invert(1);
|
||||
|
||||
background: uiResource("icons/settings_menu_play.png") center top / contain no-repeat;
|
||||
content: "";
|
||||
opacity: 0.8;
|
||||
@include S(width, 35px);
|
||||
@include S(height, 35px);
|
||||
|
||||
&.settings {
|
||||
background-image: uiResource("icons/settings_menu_settings.png");
|
||||
}
|
||||
|
||||
&.menu {
|
||||
background-image: uiResource("icons/settings_menu_exit.png");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,320 +1,320 @@
|
||||
#ingame_HUD_Shop {
|
||||
.content {
|
||||
@include S(padding-right, 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(width, 500px);
|
||||
|
||||
.upgrade {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: #eee;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(margin-bottom, 4px);
|
||||
@include S(padding, 5px, 10px);
|
||||
@include S(grid-row-gap, 1px);
|
||||
@include S(height, 85px);
|
||||
grid-template-rows: #{D(20px)} auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #55585a;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tier {
|
||||
@include S(margin-right, 9px);
|
||||
background: $colorGreenBright;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@include S(min-width, 50px);
|
||||
@include S(padding, 0px, 5px);
|
||||
|
||||
&[data-tier="0"] {
|
||||
background-color: rgb(73, 186, 190);
|
||||
}
|
||||
&[data-tier="1"] {
|
||||
background-color: rgb(88, 110, 207);
|
||||
}
|
||||
&[data-tier="2"] {
|
||||
background-color: rgb(189, 100, 192);
|
||||
}
|
||||
&[data-tier="3"] {
|
||||
background-color: rgb(117, 192, 98);
|
||||
}
|
||||
&[data-tier="4"] {
|
||||
background-color: rgb(243, 77, 48);
|
||||
}
|
||||
&[data-tier="5"] {
|
||||
background-color: rgb(255, 209, 6);
|
||||
}
|
||||
&[data-tier="6"] {
|
||||
background-color: rgb(44, 41, 46);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
background: center center / 80% no-repeat;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 4;
|
||||
@include S(margin-right, 30px);
|
||||
@include S(margin-left, 10px);
|
||||
opacity: 0.32;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
color: #aaa;
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.requirements {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 3 / 4;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 9px);
|
||||
justify-content: start;
|
||||
|
||||
.requirement {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@include S(width, 70px);
|
||||
overflow: hidden;
|
||||
|
||||
button.pin {
|
||||
@include S(width, 12px);
|
||||
@include S(height, 12px);
|
||||
background: uiResource("icons/pin.png") center center / 95% no-repeat;
|
||||
position: absolute;
|
||||
@include S(top, 2px);
|
||||
@include S(right, 2px);
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
@include IncreasedClickArea(5px);
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
|
||||
@include DarkThemeInvert;
|
||||
|
||||
$disabledOpacity: 0.2;
|
||||
$enabledOpacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: $enabledOpacity + 0.1;
|
||||
}
|
||||
|
||||
&.alreadyPinned {
|
||||
opacity: $disabledOpacity !important;
|
||||
|
||||
&:hover {
|
||||
opacity: $disabledOpacity + 0.1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.isGoal {
|
||||
background: uiResource("icons/current_goal_marker.png") center center / 95%
|
||||
no-repeat;
|
||||
opacity: $disabledOpacity !important;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
opacity: $disabledOpacity;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: $disabledOpacity + 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&.unpinned {
|
||||
opacity: $enabledOpacity;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: $enabledOpacity + 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.showInfo {
|
||||
@include S(width, 11px);
|
||||
@include S(height, 11px);
|
||||
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
|
||||
position: absolute;
|
||||
@include S(top, 17px);
|
||||
@include S(right, 2.5px);
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
@include IncreasedClickArea(5px);
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
@include DarkThemeInvert;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
}
|
||||
|
||||
.amount {
|
||||
@include S(margin-top, 4px);
|
||||
z-index: 10;
|
||||
@include SuperSmallText;
|
||||
letter-spacing: 0;
|
||||
background: #e2e4e6;
|
||||
|
||||
@include S(line-height, 13px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 1px, 0px, 2px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include S(min-width, 50px);
|
||||
// @include S(max-width, 100px);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #333438;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
z-index: -1;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: width, background-color;
|
||||
background: #bdbfca;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #8c8d96;
|
||||
}
|
||||
|
||||
&.complete {
|
||||
background-color: $colorGreenBright;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.buy {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 3 / 4;
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
// @include S(padding, 4px, 5px);
|
||||
// @include PlainText;
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: background-color, opacity;
|
||||
|
||||
&:not(.buyable) {
|
||||
background-color: #aaa;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&.buyable {
|
||||
@include InlineAnimation(1s ease-in-out infinite) {
|
||||
0% {
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: lighten($colorGreenBright, 10);
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.maxLevel {
|
||||
button.buy {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.requirements {
|
||||
display: none;
|
||||
}
|
||||
.description {
|
||||
color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#ingame_HUD_Shop {
|
||||
.content {
|
||||
@include S(padding-right, 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(width, 500px);
|
||||
|
||||
.upgrade {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: #eee;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(margin-bottom, 4px);
|
||||
@include S(padding, 5px, 10px);
|
||||
@include S(grid-row-gap, 1px);
|
||||
@include S(height, 85px);
|
||||
grid-template-rows: #{D(20px)} auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: $darkModeControlsBackground;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tier {
|
||||
@include S(margin-right, 9px);
|
||||
background: $colorGreenBright;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@include S(min-width, 50px);
|
||||
@include S(padding, 0px, 5px);
|
||||
|
||||
&[data-tier="0"] {
|
||||
background-color: rgb(73, 186, 190);
|
||||
}
|
||||
&[data-tier="1"] {
|
||||
background-color: rgb(88, 110, 207);
|
||||
}
|
||||
&[data-tier="2"] {
|
||||
background-color: rgb(189, 100, 192);
|
||||
}
|
||||
&[data-tier="3"] {
|
||||
background-color: rgb(117, 192, 98);
|
||||
}
|
||||
&[data-tier="4"] {
|
||||
background-color: rgb(243, 77, 48);
|
||||
}
|
||||
&[data-tier="5"] {
|
||||
background-color: rgb(255, 209, 6);
|
||||
}
|
||||
&[data-tier="6"] {
|
||||
background-color: rgb(44, 41, 46);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
background: center center / 80% no-repeat;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 4;
|
||||
@include S(margin-right, 30px);
|
||||
@include S(margin-left, 10px);
|
||||
opacity: 0.32;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
color: #aaa;
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.requirements {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 3 / 4;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 9px);
|
||||
justify-content: start;
|
||||
|
||||
.requirement {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@include S(width, 70px);
|
||||
overflow: hidden;
|
||||
|
||||
button.pin {
|
||||
@include S(width, 12px);
|
||||
@include S(height, 12px);
|
||||
background: uiResource("icons/pin.png") center center / 95% no-repeat;
|
||||
position: absolute;
|
||||
@include S(top, 2px);
|
||||
@include S(right, 2px);
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
@include IncreasedClickArea(5px);
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
|
||||
@include DarkThemeInvert;
|
||||
|
||||
$disabledOpacity: 0.2;
|
||||
$enabledOpacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: $enabledOpacity + 0.1;
|
||||
}
|
||||
|
||||
&.alreadyPinned {
|
||||
opacity: $disabledOpacity !important;
|
||||
|
||||
&:hover {
|
||||
opacity: $disabledOpacity + 0.1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.isGoal {
|
||||
background: uiResource("icons/current_goal_marker.png") center center / 95%
|
||||
no-repeat;
|
||||
opacity: $disabledOpacity !important;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
opacity: $disabledOpacity;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: $disabledOpacity + 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&.unpinned {
|
||||
opacity: $enabledOpacity;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: $enabledOpacity + 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.showInfo {
|
||||
@include S(width, 11px);
|
||||
@include S(height, 11px);
|
||||
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
|
||||
position: absolute;
|
||||
@include S(top, 17px);
|
||||
@include S(right, 2.5px);
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
@include IncreasedClickArea(5px);
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
@include DarkThemeInvert;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
}
|
||||
|
||||
.amount {
|
||||
@include S(margin-top, 4px);
|
||||
z-index: 10;
|
||||
@include SuperSmallText;
|
||||
letter-spacing: 0;
|
||||
background: #e2e4e6;
|
||||
|
||||
@include S(line-height, 13px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 1px, 0px, 2px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include S(min-width, 50px);
|
||||
// @include S(max-width, 100px);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #333438;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
z-index: -1;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: width, background-color;
|
||||
background: #bdbfca;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #8c8d96;
|
||||
}
|
||||
|
||||
&.complete {
|
||||
background-color: $colorGreenBright;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.buy {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 3 / 4;
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
// @include S(padding, 4px, 5px);
|
||||
// @include PlainText;
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: background-color, opacity;
|
||||
|
||||
&:not(.buyable) {
|
||||
background-color: #aaa;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&.buyable {
|
||||
@include InlineAnimation(1s ease-in-out infinite) {
|
||||
0% {
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: lighten($colorGreenBright, 10);
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.maxLevel {
|
||||
button.buy {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.requirements {
|
||||
display: none;
|
||||
}
|
||||
.description {
|
||||
color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,6 +49,10 @@
|
||||
|
||||
background-color: #44484a !important;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: lighten($darkModeControlsBackground, 10) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filtersDataSource,
|
||||
@@ -110,10 +114,10 @@
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #222428;
|
||||
background: $darkModeControlsBackground;
|
||||
|
||||
&.pinned {
|
||||
background: darken(#222428, 10);
|
||||
background: mix($darkModeControlsBackground, $colorBlueBright, 90%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,6 +163,11 @@
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
justify-self: end;
|
||||
color: #55595a;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -176,6 +185,10 @@
|
||||
align-self: center;
|
||||
text-align: right;
|
||||
color: #55595a;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
canvas.graph {
|
||||
|
||||
Reference in New Issue
Block a user