Only apply the grow animation on non-mobile devices

This commit is contained in:
tidusjar 2020-08-21 09:04:27 +01:00
commit 2809763dc4
4 changed files with 67 additions and 71 deletions

View file

@ -17,13 +17,7 @@
font-weight: bold; font-weight: bold;
} }
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
h3 strong { h3 strong {
font-weight: bold; font-weight: bold;
} }

View file

@ -1,8 +1,9 @@
$ombi-primary:#3f3f3f; $ombi-primary:#3f3f3f;
$card-background: #2b2b2b; $card-background: #2b2b2b;
#cardImage { #cardImage {
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
height:75%; height: 75%;
} }
.dark-card { .dark-card {
@ -12,7 +13,7 @@ $card-background: #2b2b2b;
// Changed height to 100% to make all cards the same height // Changed height to 100% to make all cards the same height
.card-spacing { .card-spacing {
margin-top: 10%; margin-top: 10%;
height:100%; height: 100%;
} }
@ -34,6 +35,7 @@ $border-width: 3px;
.requested { .requested {
border-bottom: $border-width #ffd740 solid; border-bottom: $border-width #ffd740 solid;
} }
.notrequested { .notrequested {
border-bottom: $border-width #303030 solid; border-bottom: $border-width #303030 solid;
} }
@ -42,14 +44,17 @@ $border-width: 3px;
text-align: center; text-align: center;
} }
// Changed height to 100% to make all cards the same height @media (min-width: 1025px) {
.grow {
transition: all .2s ease-in-out;
height:100%;
}
.grow:hover { // Changed height to 100% to make all cards the same height
transform: scale(1.1); .grow {
transition: all .2s ease-in-out;
height: 100%;
}
.grow:hover {
transform: scale(1.1);
}
} }
::ng-deep mat-dialog-container.mat-dialog-container { ::ng-deep mat-dialog-container.mat-dialog-container {
@ -61,21 +66,22 @@ $border-width: 3px;
/* Title adjust for the Discover page */ /* Title adjust for the Discover page */
.mat-card-content h6 { .mat-card-content h6 {
overflow:hidden; overflow: hidden;
white-space:nowrap; white-space: nowrap;
font-weight:400; font-weight: 400;
font-size:1.1rem; font-size: 1.1rem;
} }
/* Summary adjust for Discover page */ /* Summary adjust for Discover page */
.small, small { .small,
font-size:0.8rem; small {
font-size: 0.8rem;
} }
@media (min-width: 2000px) { @media (min-width: 2000px) {
#cardImage { #cardImage {
height:80%; height: 80%;
object-fit:cover; object-fit: cover;
display:block; display: block;
} }
} }

View file

@ -1,11 +1,4 @@
.grow-social {
transition: all .2s ease-in-out;
}
.grow-social:hover {
transform: scale(1.1);
color: black;
}
.media-icons.plex { .media-icons.plex {
color: #feb801 !important; color: #feb801 !important;

View file

@ -20,6 +20,7 @@
.top-space { .top-space {
padding-top: 2%; padding-top: 2%;
} }
.modal-panel { .modal-panel {
max-height: 100vh !important; max-height: 100vh !important;
max-width: 100vw !important; max-width: 100vw !important;
@ -54,7 +55,7 @@ body {
/* Scrollbar */ /* Scrollbar */
::-webkit-scrollbar{ ::-webkit-scrollbar {
width: 7px; width: 7px;
background: #818181; background: #818181;
} }
@ -64,7 +65,7 @@ body {
} }
// Changed color of the scrollbar // Changed color of the scrollbar
::-webkit-scrollbar-thumb{ ::-webkit-scrollbar-thumb {
border-radius: 3px; border-radius: 3px;
background: #303030; background: #303030;
} }
@ -73,13 +74,15 @@ body {
display: none; display: none;
} }
.grow { @media (min-width: 1025px) {
transition: all .2s ease-in-out; .grow {
} transition: all .2s ease-in-out;
}
.grow:hover { .grow:hover {
transform: scale(1.1); transform: scale(1.1);
color: black; color: black;
}
} }
table { table {
@ -91,47 +94,47 @@ table {
padding-bottom: 4%; padding-bottom: 4%;
} }
::ng-deep .dark .form-control{ ::ng-deep .dark .form-control {
background-color: rgba(0, 0, 0, 0.18);
color:#fff;
border: 1px solid rgba(0, 0, 0, 0.18);
}
::ng-deep .dark .nav-link.active{
color: #303030;
background-color: $accent-dark;
border-color: rgba(0, 0, 0, 0.18);
font-weight:400;
}
::ng-deep .dark .nav-link{
color: #fff;
background-color: rgba(0, 0, 0, 0.18);
border-color: rgba(0, 0, 0, 0.18);
}
::ng-deep .dark .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container .ui-autocomplete-input-token input{
color:#fff;
}
::ng-deep .dark .ui-inputtext{
background-color: rgba(0, 0, 0, 0.18); background-color: rgba(0, 0, 0, 0.18);
color:#fff; color: #fff;
border: 1px solid rgba(0, 0, 0, 0.18); border: 1px solid rgba(0, 0, 0, 0.18);
} }
::ng-deep .mat-toolbar.mat-primary{ ::ng-deep .dark .nav-link.active {
color: #303030;
background-color: $accent-dark;
border-color: rgba(0, 0, 0, 0.18);
font-weight: 400;
}
::ng-deep .dark .nav-link {
color: #fff;
background-color: rgba(0, 0, 0, 0.18);
border-color: rgba(0, 0, 0, 0.18);
}
::ng-deep .dark .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container .ui-autocomplete-input-token input {
color: #fff;
}
::ng-deep .dark .ui-inputtext {
background-color: rgba(0, 0, 0, 0.18);
color: #fff;
border: 1px solid rgba(0, 0, 0, 0.18);
}
::ng-deep .mat-toolbar.mat-primary {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
::ng-deep .dark .mat-form-field.mat-focused .mat-form-field-label{ ::ng-deep .dark .mat-form-field.mat-focused .mat-form-field-label {
color: $accent-dark; color: $accent-dark;
} }
::ng-deep .mat-form-field.mat-focused .mat-form-field-label{ ::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
color: $accent; color: $accent;
} }
::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{ ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
margin:0.5em; margin: 0.5em;
} }