90 lines
1.4 KiB
Plaintext
Executable File

@import "theme/vars.less";
.bottomBar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
left: 0;
bottom: 0;
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: @app_bottomBar_height;
padding: 10px;
overflow: hidden;
background-color: var(--background-color-accent);
border-radius: 12px 12px 0 0;
.items {
display: inline-flex;
align-items: center;
justify-content: center;
//white-space: nowrap;
//overflow-x: overlay;
height: 100%;
width: 100vw;
.item {
display: inline-flex;
height: 100%;
align-items: center;
justify-content: center;
transition: all 150ms ease-in;
width: 20vw;
min-width: 20vw;
max-width: 20vw;
.icon {
border-radius: 360px;
height: @app_bottomBar_iconSize;
width: @app_bottomBar_iconSize;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--background-color-contrast);
font-size: 1.5rem;
padding: 7px;
transition: all 70ms ease-in-out;
svg {
margin: 0 !important;
}
}
&.primary {
.icon {
color: var(--background-color-primary);
background-color: var(--primaryColor);
}
}
}
.item:active {
.icon {
background-color: var(--background-color-primary);
color: var(--background-color-contrast);
transform: scale(0.9);
}
}
}
}