github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Only apply the grow animation on non-mobile devices

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.scss
View file

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

42
src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
View file

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

7
src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
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 {
color: #feb801 !important;

83
src/Ombi/ClientApp/src/styles/shared.scss
View file

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