mirror of https://github.com/Ombi-app/Ombi
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
274 lines
4.5 KiB
274 lines
4.5 KiB
@import "./styles/variables.scss";
|
|
.sidenav-container {
|
|
min-height: 100vh;
|
|
-webkit-overflow-scrolling:touch;
|
|
overflow:auto;
|
|
}
|
|
|
|
.sidenav .mat-toolbar {
|
|
background: inherit;
|
|
}
|
|
|
|
.mat-toolbar.mat-primary {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.middle {
|
|
display: flex;
|
|
}
|
|
|
|
.menu-spacing {
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
.icon-spacing {
|
|
width:40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.example-form {
|
|
min-width: 150px;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
}
|
|
|
|
.quater-width {
|
|
width: 25%;
|
|
}
|
|
|
|
.autocomplete-img {
|
|
vertical-align: middle;
|
|
height: 63px;
|
|
}
|
|
|
|
.mat-option {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
.slide-menu {
|
|
width: 100%;
|
|
}
|
|
|
|
::ng-deep .smaller-panel {
|
|
max-width: 170px !important;
|
|
}
|
|
|
|
.top-bar-container{
|
|
width: 95%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.top-search-block{
|
|
height:84px;
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex:1;
|
|
margin-right:5%;
|
|
}
|
|
|
|
.top-search-bar{
|
|
width:100%;
|
|
}
|
|
|
|
.mat-drawer-content {
|
|
position: relative;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
display: block;
|
|
height: 100%;
|
|
/* overflow: auto; */
|
|
}
|
|
|
|
.profile-block a{
|
|
color: #FFF;
|
|
font-size: 0.8em;
|
|
font-weight: 100;
|
|
display:flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
text-transform: capitalize;
|
|
flex:0 0 250px;
|
|
}
|
|
|
|
|
|
.profile-username{
|
|
justify-content: center;
|
|
display:flex;
|
|
height:50px;
|
|
align-items: center;
|
|
margin-right:5px;
|
|
}
|
|
|
|
#nav-openMobile {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.profile-username{
|
|
display:none;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 950px) {
|
|
#nav-openMobile {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.profile-img{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-self: center;
|
|
}
|
|
|
|
.profile-img img {
|
|
width: 40px;
|
|
}
|
|
|
|
|
|
.full {
|
|
width: 100%;
|
|
}
|
|
.bottom-nav {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
text-align: center;
|
|
}
|
|
// New CSS for new style //
|
|
|
|
.sidenav-container .sidenav{
|
|
background: $ombi-background-accent;
|
|
color:#FFF;
|
|
font-family: 'Montserrat', sans-serif;
|
|
|
|
|
|
.application-name{
|
|
font-family: 'Montserrat', sans-serif;
|
|
text-transform: uppercase;
|
|
color: $ombi-active;
|
|
align-items:center;
|
|
font-weight: 700;
|
|
font-size:36px;
|
|
padding:40px 20px;
|
|
height:auto;
|
|
max-width: 300px;
|
|
display: flex;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
|
|
.application-name-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
|
|
&:active, &:hover, &:focus {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.outer-profile {
|
|
background: inherit;
|
|
box-shadow:none;
|
|
}
|
|
|
|
.mat-list-item{
|
|
color:#FFF;
|
|
font-family:Roboto, sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
padding:10px 20px;
|
|
height:auto;
|
|
margin-bottom:0.5rem;
|
|
}
|
|
|
|
.active-list-item{
|
|
color:$ombi-background-accent;
|
|
background: $ombi-active;
|
|
border-radius:0px 30px 30px 0px;
|
|
padding:10px 20px;
|
|
height:auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.sidenav-container .sidenav{
|
|
.application-name{
|
|
font-size:2em;
|
|
max-width:200px;
|
|
}
|
|
.mat-list-item{
|
|
width:14rem;
|
|
padding:10px 0px;
|
|
}
|
|
.active-list-item{
|
|
width:14rem;
|
|
padding:10px 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidenav {
|
|
width: 230px;
|
|
}
|
|
|
|
.outer-profile .profile-img-container {
|
|
background: inherit;
|
|
}
|
|
|
|
.content-container{
|
|
background: $ombi-background-primary;
|
|
color:#FFF;
|
|
|
|
.top-bar-container{
|
|
background: $ombi-background-primary;
|
|
color:$ombi-background-primary-accent;
|
|
padding-top:1em;
|
|
}
|
|
|
|
}
|
|
|
|
::ng-deep .mat-toolbar-row, .mat-toolbar-single-row{
|
|
height:auto;
|
|
}
|
|
|
|
::ng-deep .mat-sidenav-fixed .mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content{
|
|
padding:0;
|
|
margin: 0 4em 0 0.5em;
|
|
}
|
|
|
|
.advanced-search {
|
|
float:right;
|
|
margin-top: 6%;
|
|
margin-right: 10%;
|
|
cursor: pointer;
|
|
}
|
|
.active-advanced {
|
|
color:$ombi-background-accent;
|
|
background: $ombi-active;
|
|
}
|
|
|
|
::ng-deep .dialog-responsive {
|
|
width: 40%;
|
|
}
|
|
|
|
@media only screen and (max-width: 760px) {
|
|
::ng-deep .dialog-responsive {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1025px) {
|
|
|
|
.content-container{
|
|
margin-left: 223px !important;
|
|
}
|
|
} |