RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +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; @import "theme/vars.less";
@bottomBar_iconSize: 24px;
.bottomBar { .bottomBar {
display: flex; display: flex;
@ -17,7 +16,7 @@
min-width: 100vw; min-width: 100vw;
max-width: 100vw; max-width: 100vw;
height: @bottomBar_height; height: @app_bottomBar_height;
padding: 10px; padding: 10px;
overflow: hidden; overflow: hidden;
@ -45,13 +44,15 @@
transition: all 150ms ease-in; transition: all 150ms ease-in;
width: 20vw; width: 20vw;
min-width: 20vw; min-width: 20vw;
max-width: 20vw; max-width: 20vw;
.icon { .icon {
border-radius: 360px; border-radius: 360px;
height: 100%;
width: fit-content; height: @app_bottomBar_iconSize;
width: @app_bottomBar_iconSize;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -60,9 +61,9 @@
justify-content: center; justify-content: center;
color: var(--background-color-contrast); color: var(--background-color-contrast);
font-size: 2rem; font-size: 1.5rem;
padding: 12px; padding: 7px;
transition: all 70ms ease-in-out; transition: all 70ms ease-in-out;
svg { svg {

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

@ -1,4 +1,4 @@
@frameDecorator_height: 20px; @import "theme/vars.less";
.app_layout { .app_layout {
&.mobile { &.mobile {
@ -33,7 +33,7 @@
z-index: 8000; z-index: 8000;
width: 100vw; width: 100vw;
height: @frameDecorator_height; height: @app_frameDecorator_height;
background-color: rgba(var(--layoutBackgroundColor), 0.8); 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 //* 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_collapsed_width: 80px;
@app_sidebar_width: 230px; @app_sidebar_width: 230px;