packages/app/app/styles.scss
@import "vars";
.app_container {
position: absolute;
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
overflow: hidden;
color: $grey;
animation: init $long-duration ease-in-out;
}
@keyframes init {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.panel_container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-flow: row;
height: 0;
}
.navbar {
z-index: 20;
display: flex;
flex-flow: row;
align-items: center;
height: 50px;
background-color: $background;
box-shadow:
0px 5px 5px 0px rgba(0, 0, 0, 0.18),
0px 5px 20px 0px rgba(0, 0, 0, 0.09);
}
.navbar_spacer {
height: 100%;
flex: 1 1 45%;
-webkit-app-region: drag;
}
.left_panel {
z-index: 11;
display: flex;
flex: 0 0 auto;
flex-flow: column;
width: 300px;
background-color: $background;
box-shadow:
5px 0px 5px 0px rgba(0, 0, 0, 0.18),
5px 0px 20px 0px rgba(0, 0, 0, 0.09);
}
.center_panel {
flex: 1 1 auto;
width: 0;
background-color: $background;
}
.right_panel {
z-index: 10;
display: flex;
flex: 0 0 auto;
flex-flow: column;
width: 300px;
background-color: $background;
box-shadow:
-5px 0px 5px 0px rgba(0, 0, 0, 0.18),
-5px 0px 20px 0px rgba(0, 0, 0, 0.09);
}
.footer {
z-index: 20;
display: flex;
overflow-y: hidden;
flex: 0 0 auto;
flex-flow: column;
width: 100%;
max-width: 100%;
background-color: $background3;
box-shadow:
0px -5px 5px 0px rgba(0, 0, 0, 0.18),
0px -10px 20px 0px rgba(0, 0, 0, 0.09);
}
.footer_horizontal {
position: relative;
display: flex;
align-items: center;
flex: 1 1 auto;
flex-flow: row;
justify-content: center;
width: 100%;
max-width: 100%;
}
.track_info_wrapper {
display: flex;
flex: 1 1 33%;
flex-flow: row;
overflow: hidden;
}
.version_string {
text-align: center;
color: $bglight;
}
.active_nav_link {
color: $white !important;
border-left: 0.5rem solid $green;
}
.sidebar_menus {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow: auto;
height: 0;
}
.sidebar_footer {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
padding: 0.5em;
a {
display: flex;
justify-content: center;
align-items: center;
background: $background2;
color: $white !important;
width: 2rem;
height: 2rem;
&:hover {
background: lighten($background2, 10%);
}
&:active {
background: lighten($background2, 20%);
}
}
}