From f508b3f0cf9738d4dc201c5cec9d59ad4703aaeb Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 01:45:31 +0200 Subject: [PATCH 01/11] RightBar resembles the official release --- src/ui/components/RightBar.css | 37 ++++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css index 608064fa..cba34db5 100644 --- a/src/ui/components/RightBar.css +++ b/src/ui/components/RightBar.css @@ -8,34 +8,26 @@ justify-content: flex-start; height: 100vh; - width: 80px; + width: 70px; right: 0%; z-index: 99; - background-color: rgba(77, 77, 77, 0.6); + background-color: rgba(0, 0, 0, 0.250); z-index: 999; } -.BarImg:hover { - cursor: pointer; -} .RightBarInner > div { margin: 30px 0; } .RightBar img { - height: 40px; + height: 35px; filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%); - transition: filter 0.2s ease-in-out; } -.RightBar img:hover { - filter: invert(75%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%); -} - @media (max-height: 580px) { .RightBar { height: calc(100vh - 180px); @@ -47,3 +39,26 @@ height: calc(100vh - 170px); } } + +.BarImg { + transition: 0.2s; + border-radius: 50%; + width: 50px; + height: 50px; + background-color: rgba(0, 0, 0, 0.685); + display: flex; + justify-content: center; + align-items: center; + border: 2px solid transparent; +} + + +.BarImg:hover { + cursor: pointer; + border: 2px solid #ffc920; + +} + +.BarImg:hover img { + filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%); +} \ No newline at end of file From 776aee026523301637be763ba9980444c3371389 Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 01:57:36 +0200 Subject: [PATCH 02/11] Added a welcome message to the rightbar in order to make it look more comfy --- src/ui/components/RightBar.css | 66 ++++++++++++++++++++++++++++++---- src/ui/components/RightBar.tsx | 4 +++ 2 files changed, 63 insertions(+), 7 deletions(-) diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css index cba34db5..64609ed3 100644 --- a/src/ui/components/RightBar.css +++ b/src/ui/components/RightBar.css @@ -13,17 +13,16 @@ z-index: 99; - background-color: rgba(0, 0, 0, 0.250); + background-color: rgba(0, 0, 0, 0.25); z-index: 999; } - .RightBarInner > div { margin: 30px 0; } .RightBar img { - height: 35px; + height: 30px; filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%); transition: filter 0.2s ease-in-out; } @@ -43,8 +42,8 @@ .BarImg { transition: 0.2s; border-radius: 50%; - width: 50px; - height: 50px; + width: 40px; + height: 40px; background-color: rgba(0, 0, 0, 0.685); display: flex; justify-content: center; @@ -52,13 +51,66 @@ border: 2px solid transparent; } - .BarImg:hover { cursor: pointer; border: 2px solid #ffc920; - } .BarImg:hover img { filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%); +} + +.WelcomeMessage { + margin-left: 10px; + color: white; + writing-mode: vertical-rl; + text-orientation: upright; + text-transform: uppercase; + font-weight: 600; +} + +@keyframes background-pan { + from { + background-position: 0% center; + } + + to { + background-position: -200% center; + } +} + +@keyframes scale { + from, + to { + transform: scale(0); + } + + 50% { + transform: scale(1); + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(180deg); + } +} + +.magic-text { + animation: background-pan 3s linear infinite; + background: linear-gradient( + to right, + #fff, + #ffc920, + #fff, + #fff + ); + background-size: 200%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + white-space: nowrap; } \ No newline at end of file diff --git a/src/ui/components/RightBar.tsx b/src/ui/components/RightBar.tsx index 456fde40..dd415f1f 100644 --- a/src/ui/components/RightBar.tsx +++ b/src/ui/components/RightBar.tsx @@ -24,6 +24,10 @@ export default class RightBar extends React.Component {
this.openInBrowser(GITHUB)}>
+
+ Welcome to Cultivation! + +
) From ed743b2ff9ad11f12bcd64cd94c22068995724ba Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 02:02:44 +0200 Subject: [PATCH 03/11] added background to make the welcome text more visible --- src/ui/components/RightBar.css | 89 +++++++++++++++++----------------- src/ui/components/RightBar.tsx | 5 +- 2 files changed, 48 insertions(+), 46 deletions(-) diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css index 64609ed3..e9c8e0a3 100644 --- a/src/ui/components/RightBar.css +++ b/src/ui/components/RightBar.css @@ -1,3 +1,43 @@ +@keyframes background-pan { + from { + background-position: 0% center; + } + + to { + background-position: -200% center; + } +} + +@keyframes scale { + from, + to { + transform: scale(0); + } + + 50% { + transform: scale(1); + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(180deg); + } +} + +.magic-text { + animation: background-pan 3s linear infinite; + background: linear-gradient(to right, #fff, #ffc920, #fff, #fff); + background-size: 200%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + white-space: nowrap; +} + .RightBar { position: absolute; transform: translate(0%, 0%); @@ -61,56 +101,15 @@ } .WelcomeMessage { - margin-left: 10px; color: white; writing-mode: vertical-rl; text-orientation: upright; text-transform: uppercase; font-weight: 600; + padding: 10px 0 10px 0; } -@keyframes background-pan { - from { - background-position: 0% center; - } - - to { - background-position: -200% center; - } +.WelcomeDiv { + background-color: rgba(0, 0, 0, 0.585); + text-align: center; } - -@keyframes scale { - from, - to { - transform: scale(0); - } - - 50% { - transform: scale(1); - } -} - -@keyframes rotate { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(180deg); - } -} - -.magic-text { - animation: background-pan 3s linear infinite; - background: linear-gradient( - to right, - #fff, - #ffc920, - #fff, - #fff - ); - background-size: 200%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - white-space: nowrap; -} \ No newline at end of file diff --git a/src/ui/components/RightBar.tsx b/src/ui/components/RightBar.tsx index dd415f1f..810f04e8 100644 --- a/src/ui/components/RightBar.tsx +++ b/src/ui/components/RightBar.tsx @@ -25,7 +25,10 @@ export default class RightBar extends React.Component {
- Welcome to Cultivation! +
+ Welcome to Cultivation! + +
From f4b8cdf732049b33d06e3c316208959a4fd0b996 Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 02:19:44 +0200 Subject: [PATCH 04/11] Launch button stylized to look clearer. WIP on moving all the launch elements to the right for better readability. --- src/ui/App.css | 7 ++----- src/ui/components/ServerLaunchSection.css | 9 ++++++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ui/App.css b/src/ui/App.css index 89f71a9c..5d162892 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -29,7 +29,7 @@ select:focus { .App { background-size: cover !important; - background-position: center !important; + background-position: bottom !important; } .TopButton { @@ -107,11 +107,8 @@ select:focus { width: 100%; height: 160px; - backdrop-filter: blur(10px); - box-shadow: inset 0px 5px 12px -3px rgb(50 50 50 / 75%); - margin: 0; - padding: 0; + text-align: right; } @media (max-height: 580px) { diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css index 7b54b919..ebc1712e 100644 --- a/src/ui/components/ServerLaunchSection.css +++ b/src/ui/components/ServerLaunchSection.css @@ -8,9 +8,10 @@ right: 10%; top: 50%; - width: 32%; - height: 80%; + width: 20%; + height: 120%; min-width: 357px; + padding: 0 0 140px 0; } #playButton > div { @@ -20,13 +21,15 @@ #playButton .BigButton { height: 100%; box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2); + font-size: 24px; + font-weight: 400; } #serverControls { color: white; text-shadow: 1px 1px 8px black; -} +} .BottomSection .CheckboxDisplay { border-color: #c5c5c5; From 9dcaea7e5b4d3573bd81a89e8059b98dbc0391fe Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 02:31:42 +0200 Subject: [PATCH 05/11] Deleted the welcome message cause my friends said it sucks --- src/ui/App.css | 2 +- src/ui/components/RightBar.css | 14 -------------- src/ui/components/RightBar.tsx | 6 ------ src/ui/components/ServerLaunchSection.css | 6 ++---- 4 files changed, 3 insertions(+), 25 deletions(-) diff --git a/src/ui/App.css b/src/ui/App.css index 5d162892..7e509986 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -29,7 +29,7 @@ select:focus { .App { background-size: cover !important; - background-position: bottom !important; + background-position: center !important; } .TopButton { diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css index e9c8e0a3..b78756e0 100644 --- a/src/ui/components/RightBar.css +++ b/src/ui/components/RightBar.css @@ -99,17 +99,3 @@ .BarImg:hover img { filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%); } - -.WelcomeMessage { - color: white; - writing-mode: vertical-rl; - text-orientation: upright; - text-transform: uppercase; - font-weight: 600; - padding: 10px 0 10px 0; -} - -.WelcomeDiv { - background-color: rgba(0, 0, 0, 0.585); - text-align: center; -} diff --git a/src/ui/components/RightBar.tsx b/src/ui/components/RightBar.tsx index 810f04e8..a1360395 100644 --- a/src/ui/components/RightBar.tsx +++ b/src/ui/components/RightBar.tsx @@ -24,13 +24,7 @@ export default class RightBar extends React.Component {
this.openInBrowser(GITHUB)}>
-
-
- Welcome to Cultivation! -
- -
) diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css index ebc1712e..97354c9b 100644 --- a/src/ui/components/ServerLaunchSection.css +++ b/src/ui/components/ServerLaunchSection.css @@ -11,12 +11,10 @@ width: 20%; height: 120%; min-width: 357px; - padding: 0 0 140px 0; + padding: 0 0 100px 0; } -#playButton > div { - margin-bottom: 6px; -} + #playButton .BigButton { height: 100%; From c6abf53880594b4058215e5d4578d1fcaf93982c Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 03:15:48 +0200 Subject: [PATCH 06/11] BottomBar elements now align to right --- src/ui/App.css | 5 +++ src/ui/components/ServerLaunchSection.css | 28 +++++++++--- src/ui/components/ServerLaunchSection.tsx | 53 +++++++++++++---------- 3 files changed, 57 insertions(+), 29 deletions(-) diff --git a/src/ui/App.css b/src/ui/App.css index 7e509986..56da7997 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -109,6 +109,11 @@ select:focus { margin: 0; text-align: right; + + /* Gradient shadow */ + -webkit-box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43); + -moz-box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43); + box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43); } @media (max-height: 580px) { diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css index 97354c9b..5be0824c 100644 --- a/src/ui/components/ServerLaunchSection.css +++ b/src/ui/components/ServerLaunchSection.css @@ -25,8 +25,10 @@ #serverControls { color: white; - text-shadow: 1px 1px 8px black; + align-self: flex-end; + margin-top: 10px; + margin-bottom: -10px; } .BottomSection .CheckboxDisplay { @@ -55,8 +57,8 @@ .ServerConfig .Checkbox { display: inline-grid; - vertical-align: middle; - margin-left: 8px; + margin-top: 10px; + } .ServerLaunchButtons { @@ -102,8 +104,24 @@ box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2); } -.ServerConfig .TextInputWrapper { - display: inline-block; +.ServerConfig { + display: grid; + height: 100px; + grid-template-columns: 1; + grid-template-rows: repeat(2, 1fr); + justify-content: flex-end; +} + +.ServerConfigGrid { + display: flex; + justify-content: flex-end; + align-items: center; +} + +#ServerConfigCheckbox { + margin-bottom: -10px; + margin-top: 10px; + } #ip { diff --git a/src/ui/components/ServerLaunchSection.tsx b/src/ui/components/ServerLaunchSection.tsx index c8ef2265..0c255234 100644 --- a/src/ui/components/ServerLaunchSection.tsx +++ b/src/ui/components/ServerLaunchSection.tsx @@ -277,30 +277,34 @@ export default class ServerLaunchSection extends React.Component {this.state.grasscutterEnabled && (
- - - - +
+ +
+
+ + + +
)} @@ -314,6 +318,7 @@ export default class ServerLaunchSection extends React.Component )} + From 36b3c2f84103790ec2331b2436c2af0011db36af Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 15:03:29 +0200 Subject: [PATCH 07/11] Taken spikes feedback into account. Removed backdrop blur anyway due to my friends feedback, added shadow gradient for better button visibility. Lmk whether or not to still keep the backdrop blur. --- src/ui/App.css | 7 +-- src/ui/App.tsx | 2 +- src/ui/components/RightBar.css | 40 ----------------- src/ui/components/ServerLaunchSection.css | 42 ++++++----------- src/ui/components/ServerLaunchSection.tsx | 55 +++++++++++------------ 5 files changed, 41 insertions(+), 105 deletions(-) diff --git a/src/ui/App.css b/src/ui/App.css index 56da7997..207faf2a 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -108,11 +108,8 @@ select:focus { height: 160px; margin: 0; - text-align: right; + padding: 0; - /* Gradient shadow */ - -webkit-box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43); - -moz-box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43); box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43); } @@ -126,4 +123,4 @@ select:focus { .BottomSection { height: 140px; } -} +} \ No newline at end of file diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 3c465411..5d4f3497 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -114,4 +114,4 @@ class App extends React.Component, IState> { } } -export default App +export default App \ No newline at end of file diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css index b78756e0..47a42f09 100644 --- a/src/ui/components/RightBar.css +++ b/src/ui/components/RightBar.css @@ -1,43 +1,3 @@ -@keyframes background-pan { - from { - background-position: 0% center; - } - - to { - background-position: -200% center; - } -} - -@keyframes scale { - from, - to { - transform: scale(0); - } - - 50% { - transform: scale(1); - } -} - -@keyframes rotate { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(180deg); - } -} - -.magic-text { - animation: background-pan 3s linear infinite; - background: linear-gradient(to right, #fff, #ffc920, #fff, #fff); - background-size: 200%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - white-space: nowrap; -} - .RightBar { position: absolute; transform: translate(0%, 0%); diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css index 5be0824c..17990256 100644 --- a/src/ui/components/ServerLaunchSection.css +++ b/src/ui/components/ServerLaunchSection.css @@ -8,28 +8,28 @@ right: 10%; top: 50%; - width: 20%; - height: 120%; + width: 32%; + height: 80%; min-width: 357px; - padding: 0 0 100px 0; } - +#playButton > div { + margin-bottom: 6px; +} #playButton .BigButton { height: 100%; box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2); font-size: 24px; font-weight: 400; + width: 20%; } #serverControls { color: white; + text-shadow: 1px 1px 8px black; - align-self: flex-end; - margin-top: 10px; - margin-bottom: -10px; -} +} .BottomSection .CheckboxDisplay { border-color: #c5c5c5; @@ -57,8 +57,8 @@ .ServerConfig .Checkbox { display: inline-grid; - margin-top: 10px; - + vertical-align: middle; + margin-left: 8px; } .ServerLaunchButtons { @@ -104,24 +104,8 @@ box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2); } -.ServerConfig { - display: grid; - height: 100px; - grid-template-columns: 1; - grid-template-rows: repeat(2, 1fr); - justify-content: flex-end; -} - -.ServerConfigGrid { - display: flex; - justify-content: flex-end; - align-items: center; -} - -#ServerConfigCheckbox { - margin-bottom: -10px; - margin-top: 10px; - +.ServerConfig .TextInputWrapper { + display: inline-block; } #ip { @@ -146,4 +130,4 @@ #officialPlay { width: 40%; } -} +} \ No newline at end of file diff --git a/src/ui/components/ServerLaunchSection.tsx b/src/ui/components/ServerLaunchSection.tsx index 0c255234..a3de46ad 100644 --- a/src/ui/components/ServerLaunchSection.tsx +++ b/src/ui/components/ServerLaunchSection.tsx @@ -277,34 +277,30 @@ export default class ServerLaunchSection extends React.Component {this.state.grasscutterEnabled && (
-
- -
-
- - - -
+ + + +
)} @@ -318,7 +314,6 @@ export default class ServerLaunchSection extends React.Component )} - @@ -326,4 +321,4 @@ export default class ServerLaunchSection extends React.Component ) } -} +} \ No newline at end of file From 15e6958527b91e502212841799f370e8709938d9 Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 15:06:04 +0200 Subject: [PATCH 08/11] Added transition to socials images --- src/ui/components/RightBar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css index 47a42f09..cdae2fad 100644 --- a/src/ui/components/RightBar.css +++ b/src/ui/components/RightBar.css @@ -57,5 +57,6 @@ } .BarImg:hover img { + transition: 0.2s; filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%); } From 878dfed932fd3d25a395c84ff820c7f589b0c81a Mon Sep 17 00:00:00 2001 From: Wehi Date: Wed, 10 May 2023 16:13:55 +0200 Subject: [PATCH 09/11] slight changes to Big Button css and Launch button font-weight --- src/ui/components/ServerLaunchSection.css | 2 +- src/ui/components/common/BigButton.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css index 17990256..f0e392e9 100644 --- a/src/ui/components/ServerLaunchSection.css +++ b/src/ui/components/ServerLaunchSection.css @@ -21,7 +21,7 @@ height: 100%; box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2); font-size: 24px; - font-weight: 400; + font-weight: 500; width: 20%; } diff --git a/src/ui/components/common/BigButton.css b/src/ui/components/common/BigButton.css index 045008d9..067884de 100644 --- a/src/ui/components/common/BigButton.css +++ b/src/ui/components/common/BigButton.css @@ -7,7 +7,7 @@ padding: 0 30px; border-radius: 5px; border: none; - background: linear-gradient(#ffd326, #ffc61e); + background: linear-gradient(#ffcf0d, #fec004); color: #704a1d; font-weight: bold; @@ -16,7 +16,7 @@ .BigButton:hover { cursor: pointer; - background: linear-gradient(#ffc61e, #ffd326); + background: linear-gradient(#fdd841, #ffc517); } .BigButton.disabled { From ce78bf69aabf7f1526016f55207acb9c1dd9a4d4 Mon Sep 17 00:00:00 2001 From: Wehi Date: Thu, 11 May 2023 02:46:30 +0200 Subject: [PATCH 10/11] added back backdrop blur, fixed button size issue --- src/ui/App.css | 3 ++- src/ui/components/ServerLaunchSection.css | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/App.css b/src/ui/App.css index 207faf2a..2aee07a0 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -109,7 +109,8 @@ select:focus { margin: 0; padding: 0; - + + backdrop-filter: blur(10px); box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43); } diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css index f0e392e9..b414c933 100644 --- a/src/ui/components/ServerLaunchSection.css +++ b/src/ui/components/ServerLaunchSection.css @@ -22,7 +22,6 @@ box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2); font-size: 24px; font-weight: 500; - width: 20%; } #serverControls { From 00929a3efe01f57b84ea083121aec8006f524405 Mon Sep 17 00:00:00 2001 From: Wehi Date: Thu, 11 May 2023 02:56:20 +0200 Subject: [PATCH 11/11] backdrop blur full functioning --- src/ui/App.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/App.css b/src/ui/App.css index 2aee07a0..b3899697 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -109,9 +109,9 @@ select:focus { margin: 0; padding: 0; - + backdrop-filter: blur(10px); - box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43); + box-shadow: inset 0px 5px 12px -3px rgb(0,0,0,0.43); } @media (max-height: 580px) {