From 35018d2778299b70c736767602604f2ba89d2187 Mon Sep 17 00:00:00 2001 From: tobspr Date: Tue, 21 Jul 2020 10:14:06 +0200 Subject: [PATCH] Minor css improvements --- res/ui/icons/download.png | Bin 712 -> 756 bytes res/ui/icons/link.png | Bin 0 -> 1035 bytes src/css/common.scss | 3 +- src/css/ingame_hud/buildings_toolbar.scss | 3 ++ src/css/ingame_hud/interactive_tutorial.scss | 2 + src/css/states/main_menu.scss | 46 ++++++++++++------- src/css/variables.scss | 2 +- 7 files changed, 37 insertions(+), 19 deletions(-) create mode 100644 res/ui/icons/link.png diff --git a/res/ui/icons/download.png b/res/ui/icons/download.png index bb28bf81fdf6e4b414d65b372994554495ccb000..68ed3fb48e0df022eea508f275859dd4ba39358b 100644 GIT binary patch delta 584 zcmX@X`h|5uS3SEZyEe;%Ez4^d7#I(Ex;Tbp+Ax<7-kBe-`5>y zGOt3SPp;>oqRj$11;HnxUvj=M3e>Xrx7=@L-RQb|vo-Iel02QcGxaYoy~{GuN#OEB z(d!n1w-ufp-D&BN!~0^zt<5L0qZ!raG4ybp*~4hY68l?*;oS9lUJi8@W+zUz27@L} zg_Z=C59%`*YdG5&?3*+Xv?uUf5I(~g<;2P$>&UHe>eI6NxU1{oPKg#?wAOD^fJ`L4=atJB?a__l$d z;6lgm#~ZhJJG-8MkgTB^H(jG zmyo5~h3Jph-_BmKYRS6&O|Y*zEB&ZQ-=W^{+XwP$Q=p8s1$D)S%%1A}UbYeY#(Vo9o1 za#1RfVlXl=GSD?J*EKQ>F)+6>F}AWbFwr(Jure@sr^2R+q9ZpyB{QuOQwL1L{K|bZ JCr@WG1OSqP@$Uct delta 518 zcmeyudV+OAS3Ro$2ZNMWXR{;&1LHJL7srr{dv9m%_B(7K($=5d5wy{;$z`W##Egj% zE9NtHHhxcf?kl8rLsE14wyc{oCcK(q^)i6Vq;yttl=bPtX~L?Xz8~#e^TM9t#KOEQ z9;qjsS4Y3u!=w9wQ~E|Vqe3+Q4UXbuUR%}e2bc}soT*@RZ)U0YXkfua*Os|%Td7xf zp69ThJVWVB5q6Qq5Bh3-PR(y|u{|*JIQxG7bLy_4>lc`XztFDu+V+0g^~<09JxuRB zG<;Keu=~SNg$JIAZ1aD!y^7V9+20{^Z-OwNv`x`AuHuU10Lz>Y5@mlMa8C+S=i0la z-n3u;2Ky`7yG`3gAGdPG?-0Cd9knK4;q3BRTK{HU@roz^9eylfmELh6`b*Cf!Tt-Y z8;(VDL})}j&~3N*_iFmKH@iL^;FMYUK+HbSgH2TLk+{~6gFt+knL$O}l6C)&{MPSW zAC0-LK44^+6nr(Tzo>quQFt9Q*(*}|T26L~k qILg4lpjzS@QIe8al4_NkpOTqY$zWt)WT0z+MZ=pefy&8;nG69Y6WkO4 diff --git a/res/ui/icons/link.png b/res/ui/icons/link.png new file mode 100644 index 0000000000000000000000000000000000000000..f51ca38b1edf7569486cfed2e3309605bdceb306 GIT binary patch literal 1035 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081EXMoPlzi>K|{mFZ96w^ z+r44i&JEjkfza07Yq#uyus7}8xo*b}s5nG++phH>#k>Ch|G$1aP(4`Jjvec_!?bVP zwRz{xRr~jYbpcg^6hqPW-Rps-0nOjK7c8;|$lkbZ*QV`z)&q^*zH<{$b~}&(Qom)( zmd%?t0~s^VoB^uY2sVG+)}8CO?pn2K6;M6U*+ARZZQrwM+qQLk_G|zv*tlf}P%%)~ zx-GjmZUs4Y{Z_EUwu79p5eUFspdlM~!CeJ33d9D6hW*ldQ6Lpr666=mz!bgt`L9h; zO6Sih>c4*Z=ELc;Ul?P;Kih8j`1FSc&&{~?Rrmk7o9W8$*Xp}#IyqT;QQIRyu4k-= zBR2Z1WpuViRQA*hPM@UymsFWq~8BL^GYJJ8W<}Kj7i?^E({&4vK~MV zXMsm#F#`kN5fEmas?8@26l5>)^mS!_!Y;~groDypnr5e4m`)= zr&t9F9&Egp)h>H2FL&$K>i4;y|L*rFzIy6o0sl{Bm7h=fKFP6b_;kB`m9!PRzF?cn zq+`>(w0BNiSbutzRnHuUw0k1_-ofkjkL2F)Yh1i&()3gH8xJR{wm27eu2PiQ(2-?l z_xgFG?5kqCKDOn)I}`7nKi#M))*&|iLXp~@BR20}Zs-x!Ta$El$+s!#Hmbd)B|9!1 zWBYxU^StDweR|t=Z0VIPWGQ{q_0>rI*6V8>Rd@d~yVdeA&EXSFtv9hrt8co@pue?1 z?cDo6O?Mfl8;SpljV&&5F0tP8_>CODoPWiytbTu4o8n(g`Tr7wuDut{e?O<*3za4^} zQ^NHk&$EpsWmT8!LgrYn;gnzbUTgo-_?6dIon7>4+kYm`y-9*6`WfZ`gI%@6HKHUX zu_Vlzt`7?@j`npl|_Ya19?85s1;{sf9igofPwl+3hB+#3EK z^9liKkObKfoS#-wo>-L1P+nfHmzkGcoSayYs+V7sKKq@G6i^X^r>mdKI;Vst0KfI^ Ag#Z8m literal 0 HcmV?d00001 diff --git a/src/css/common.scss b/src/css/common.scss index 6a87012e..b2078fa2 100644 --- a/src/css/common.scss +++ b/src/css/common.scss @@ -205,7 +205,7 @@ button { border: 0; background: $colorBlueBright; color: #fff; - + @include S(border-radius, $globalBorderRadius); // border: #{D(1px)} solid rgba(0, 10, 20, 0.2); @include S(border-bottom-width, 2px); // color: $accentColorDark; @@ -345,6 +345,7 @@ canvas { ::-webkit-scrollbar-thumb { // border-radius: 4px; + @include S(border-radius, $globalBorderRadius); background: #cdd0d4; } diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss index 8decc232..65923db8 100644 --- a/src/css/ingame_hud/buildings_toolbar.scss +++ b/src/css/ingame_hud/buildings_toolbar.scss @@ -23,6 +23,9 @@ 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; diff --git a/src/css/ingame_hud/interactive_tutorial.scss b/src/css/ingame_hud/interactive_tutorial.scss index d4fb58e1..3585c2af 100644 --- a/src/css/ingame_hud/interactive_tutorial.scss +++ b/src/css/ingame_hud/interactive_tutorial.scss @@ -15,6 +15,8 @@ display: flex; flex-direction: column; + @include S(border-radius, $globalBorderRadius); + @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) { 0% { } diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 0981cdfc..07a47c2e 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -265,13 +265,15 @@ @include S(min-width, 130px); @include S(padding, 15px, 20px); letter-spacing: 0.3em !important; - + @include IncreasedClickArea(0px); font-weight: bold; color: #fff; background-color: $colorGreenBright; - transition: transform 0.12s ease-in-out; + transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out; + &:hover { - transform: scale(1.02); + background-color: darken($colorGreenBright, 4); + opacity: 1; } &.continueButton { @@ -281,9 +283,11 @@ .importButton { @include S(margin-top, 15px); + @include IncreasedClickArea(0px); } .newGameButton { + @include IncreasedClickArea(0px); @include S(margin-top, 15px); @include S(margin-left, 15px); } @@ -306,8 +310,8 @@ display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; - @include S(grid-column-gap, 5px); - @include S(grid-row-gap, 3px); + @include S(grid-column-gap, 4px); + @include S(grid-row-gap, 1px); .playtime { grid-column: 1 / 2; @@ -325,12 +329,9 @@ button.resumeGame, button.downloadGame, button.deleteGame { - grid-column: 3 / 4; - grid-row: 1 / 3; - @include S(width, 30px); - @include S(height, 30px); padding: 0; align-self: center; + justify-self: center; @include IncreasedClickArea(0px); background: #44484a uiResource("icons/play.png") center center / 40% no-repeat; } @@ -338,12 +339,13 @@ button.downloadGame { grid-column: 2 / 3; grid-row: 1 / 2; + background-color: $colorBlueBright; background-image: uiResource("icons/download.png"); @include S(width, 15px); @include IncreasedClickArea(0px); @include S(height, 15px); - align-self: end; background-size: 60%; + align-self: start; } button.deleteGame { @@ -357,6 +359,14 @@ align-self: end; background-size: 60%; } + + button.resumeGame { + grid-column: 3 / 4; + grid-row: 1 / 3; + margin: 0; + @include S(width, 32px); + height: 100%; + } } } } @@ -370,7 +380,7 @@ grid-template-columns: auto auto auto 1fr; @include S(padding, 10px); box-sizing: border-box; - @include S(grid-gap, 5px); + @include S(grid-gap, 4px); .author { flex-grow: 1; @@ -390,7 +400,7 @@ grid-template-columns: 1fr auto; justify-content: center; - background: #fdfdfd; + background: #fdfdfd uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat; @include S(padding, 5px); @include S(padding-left, 10px); @include S(border-radius, $globalBorderRadius); @@ -401,15 +411,14 @@ text-transform: uppercase; color: #616266; - transition: all 0.12s ease-in-out; - transition-property: background-color, transform; + transition: background-color 0.12s ease-in-out; pointer-events: all; @include S(width, 120px); @include S(height, 60px); cursor: pointer; &:hover { - background-color: #fff; + background-color: #f0f6ff; } .thirdpartyLogo { @@ -432,7 +441,7 @@ align-items: flex-start; justify-content: flex-start; grid-template-rows: 1fr 1fr 1fr; - @include S(grid-gap, 2px); + @include S(grid-gap, 3px); @include S(height, 60px); > a { @@ -441,7 +450,7 @@ height: 100%; &:hover { - background-color: #fff; + background-color: #f0f6ff; } @include SuperSmallText; text-transform: uppercase; @@ -457,6 +466,9 @@ background-position: #{D(5px)} center; background-size: #{D(12px)}; background-repeat: no-repeat; + @include S(border-radius, $globalBorderRadius); + + transition: background-color 0.12s ease-in-out; &.redditLink { background-image: uiResource("main_menu/reddit.svg"); diff --git a/src/css/variables.scss b/src/css/variables.scss index c1c69371..7646e471 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -1,4 +1,4 @@ -$globalBorderRadius: 0px; +$globalBorderRadius: 2px; // When to reduce control elements size for small devices $layoutExpandMinWidth: 340px;