mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-19 12:59:39 -07:00
Only apply the grow animation on non-mobile devices
This commit is contained in:
parent
95ba89df44
commit
2809763dc4
4 changed files with 67 additions and 71 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
Loading…
Add table
Add a link
Reference in a new issue