1
0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
This commit is contained in:
tobspr
2022-06-02 19:44:50 +02:00
parent 43430dcbf2
commit bbb418a1d8
17 changed files with 83 additions and 45 deletions

View File

@@ -196,11 +196,11 @@ button {
background: $colorBlueBright;
color: #fff;
@include S(border-radius, $globalBorderRadius);
@include S(border-radius, 0.8 * $globalBorderRadius);
// border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
@include S(border-bottom-width, 2px);
// color: $accentColorDark;
letter-spacing: 0.05em !important;
letter-spacing: 0em !important;
// box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
.keybinding {
@include S(bottom, -2.5px);

View File

@@ -1,6 +1,6 @@
.ingame_buildingsToolbar {
position: absolute;
@include S(bottom, 5px);
@include S(bottom, 10px);
left: 50%;
transform: translateX(-50%);
@@ -22,10 +22,12 @@
grid-auto-flow: column;
justify-items: center;
align-self: center;
grid-gap: D(2px);
grid-row: 2 / 3;
background-color: rgba(240, 241, 243, 0.5);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 2px);
background-color: rgba($ingameHudBg, 0.07);
@include DarkThemeOverride {
background-color: rgba(darken($darkModeGameBackground, 15), 0.95);
@@ -51,6 +53,7 @@
display: flex;
@include S(width, 40px);
position: relative;
overflow: hidden;
@include S(height, 40px);
.icon {
color: $accentColorDark;
@@ -63,7 +66,6 @@
height: 100%;
padding: 0;
margin: 0;
@include S(border-radius, $globalBorderRadius);
background: center center / 70% no-repeat;
}
@@ -90,14 +92,20 @@
}
&.unlocked {
@include S(border-radius, $globalBorderRadius * 0.9);
.icon {
pointer-events: all;
transition: all 50ms ease-in-out;
transition: all 0.12s ease-in-out;
transition-property: background-color, transform;
cursor: pointer;
&:hover {
background-color: rgba(30, 40, 90, 0.1);
@include DarkThemeOverride {
background-color: rgba(255, 255, 255, 0.07);
}
}
&.pressed {
@@ -107,7 +115,7 @@
&.selected {
// transform: scale(1.05);
background-color: rgba(lighten($colorBlueBright, 9), 0.4);
@include S(border-radius, $globalBorderRadius);
// @include S(border-radius, $globalBorderRadius);
.keybinding {
color: #111;

View File

@@ -84,6 +84,8 @@
display: flex;
flex-direction: column;
@include S(padding, 12px);
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1);
pointer-events: all;
@include DarkThemeOverride {
@@ -94,6 +96,7 @@
.optionParent {
display: grid;
@include S(grid-gap, 5px);
@include S(padding-right, 5px);
grid-template-columns: 1fr 1fr;
.option {
@include S(border-radius, $globalBorderRadius);

View File

@@ -131,7 +131,7 @@
@include DarkThemeInvert;
$disabledOpacity: 0.2;
$disabledOpacity: 0.6;
$enabledOpacity: 0.6;
&:hover {
@@ -157,6 +157,12 @@
&.pinned {
opacity: $disabledOpacity;
& {
/* @load-async */
background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important;
}
@include InlineAnimation(0.3s ease-in-out) {
0% {
opacity: 1;

View File

@@ -10,8 +10,9 @@
.hint {
display: block;
background: #eee;
@include S(padding, 4px);
@include S(padding, 6px, 10px);
@include PlainText;
@include S(border-radius, $globalBorderRadius);
}
.category {

View File

@@ -183,11 +183,14 @@
flex-direction: column;
@include S(padding-top, 20px);
img {
@include S(width, 300px);
}
position: relative;
@include S(left, -22px);
.updateLabel {
position: absolute;
transform: translateX(50%) rotate(-5deg);
@@ -311,11 +314,14 @@
@include S(padding, 15px);
@include S(padding-bottom, 10px);
@include S(border-radius, $globalBorderRadius);
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
.header {
display: flex;
width: 100%;
align-items: center;
text-transform: uppercase;
@include S(margin-bottom, 10px);
.editMods {
@@ -330,6 +336,9 @@
background-image: uiResource("icons/edit_key.png") !important;
}
@include DarkThemeInvert;
&:hover {
opacity: 0.6;
}
}
}
@@ -437,7 +446,7 @@
@include SuperHeading;
@include S(min-width, 130px);
@include S(padding, 15px, 20px);
letter-spacing: 0.3em !important;
letter-spacing: 0.2em !important;
@include IncreasedClickArea(0px);
font-weight: bold;
color: #fff;
@@ -720,12 +729,9 @@
.author {
margin-left: auto;
text-align: right;
@include PlainText;
color: #000;
a {
&:hover {
&:hover img {
opacity: 0.8;
}
display: flex;
@@ -733,10 +739,10 @@
justify-content: center;
img {
@include S(margin-left, 5px);
@include S(margin-top, 3px);
@include S(width, 50px);
transition: opacity 0.12s ease-in-out;
@include S(width, 80px);
filter: invert(100%);
opacity: 0.6;
}
}
}
@@ -744,7 +750,7 @@
@include S(padding, 15px);
$linkBg: rgba(#fdfdff, 0.5);
$linkBgHover: darken($linkBg, 2);
$linkBgHover: darken($linkBg, 5);
$linkColor: #55586a;
> .boxLink {

View File

@@ -92,7 +92,7 @@
.mod {
@include S(border-radius, $globalBorderRadius);
background: $accentColorBright;
background: #eeeff4;
@include S(margin-bottom, 4px);
@include S(padding, 7px, 10px);
@include S(grid-gap, 15px);
@@ -113,14 +113,14 @@
flex-direction: column;
.description {
@include SuperSmallText;
@include PlainText;
@include S(margin-top, 5px);
color: $accentColorDark;
}
.website {
text-transform: uppercase;
align-self: start;
@include SuperSmallText;
@include PlainText;
@include S(margin-top, 5px);
}
}

View File

@@ -7,14 +7,15 @@
}
.changelogDialogEntry {
margin-top: 10px;
@include S(margin-top, 10px);
width: 100%;
flex-direction: column;
text-align: left;
padding: 10px;
box-sizing: border-box;
background: #eef1f4;
@include S(border-radius, 3px);
@include S(border-radius, $globalBorderRadius);
@include DarkThemeOverride {
background: #33343c;
@@ -34,6 +35,7 @@
.changes {
@include PlainText;
@include S(padding-left, 15px);
@include S(margin-top, 10px);
strong {
background: $colorBlueBright;
color: #fff;
@@ -46,7 +48,7 @@
}
li {
@include SuperSmallText;
@include S(margin-bottom, 10px);
@include S(margin-bottom, 5px);
}
}
}

View File

@@ -37,7 +37,7 @@ $colorBlueBright: rgb(74, 151, 223);
$colorRedBright: #ef5072;
$colorOrangeBright: #ef9d50;
$themeColor: #393747;
$ingameHudBg: rgba(#333438, 0.9);
$ingameHudBg: rgba(#33343b, 0.9);
$modsColor: rgb(214, 60, 228);
$text3dColor: #f4ffff;
@@ -69,7 +69,7 @@ $numberFont: $mainFont;
$textFont: $mainFont;
$mainFontWeight: 400;
$mainFontSpacing: 0.04em;
$mainFontSpacing: 0.01em;
$mainFontScale: 1;
@mixin DebugText($color) {