RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve bottom bar style

Browse Source
This commit is contained in:
SrGooglo 2022-11-24 17:50:46 +00:00
parent f7e474fa58
commit 3ed698d501
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/src/components/Layout/bottomBar/index.less
View File

@ -1,5 +1,4 @@
@bottomBar_height: 75px;
@bottomBar_iconSize: 24px;
@import "theme/vars.less";
.bottomBar {
display: flex;
@ -17,7 +16,7 @@
min-width: 100vw;
max-width: 100vw;
height: @bottomBar_height;
height: @app_bottomBar_height;
padding: 10px;
overflow: hidden;
@ -45,13 +44,15 @@
transition: all 150ms ease-in;
width: 20vw;
min-width: 20vw;
max-width: 20vw;
.icon {
border-radius: 360px;
height: 100%;
width: fit-content;
height: @app_bottomBar_iconSize;
width: @app_bottomBar_iconSize;
display: flex;
flex-direction: column;
@ -60,9 +61,9 @@
justify-content: center;
color: var(--background-color-contrast);
font-size: 2rem;
font-size: 1.5rem;
padding: 12px;
padding: 7px;
transition: all 70ms ease-in-out;
svg {

4
packages/app/src/theme/mobile.less
View File

@ -1,4 +1,4 @@
@frameDecorator_height: 20px;
@import "theme/vars.less";
.app_layout {
&.mobile {
@ -33,7 +33,7 @@
z-index: 8000;
width: 100vw;
height: @frameDecorator_height;
height: @app_frameDecorator_height;
background-color: rgba(var(--layoutBackgroundColor), 0.8);

5
packages/app/src/theme/vars.less
View File

@ -1,5 +1,10 @@
//* Now this only works as an fallback for unset dynamic theme values
@app_frameDecorator_height: 20px;
@app_bottomBar_height: 60px;
@app_bottomBar_iconSize: 45px;
@app_sidebar_collapsed_width: 80px;
@app_sidebar_width: 230px;