PrivateCoffee/wishthis
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve responsive layout

Browse source
This commit is contained in:
Jay Trees 2022-02-25 15:24:12 +01:00
parent a94c655b57
commit 0539d1d57b
1 changed files with 45 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/assets/css/default.css
View file

@ -42,22 +42,24 @@ img {
} }
/** Overlay */ /** Overlay */
.ui.card .overlay { @media (hover: hover) {
transition: 0.4s ease opacity; .ui.card .overlay {
transition: 0.4s ease opacity;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
} }
.ui.card:hover .overlay { .ui.card:hover .overlay {
opacity: 1; opacity: 1;
}
} }
/** Image */ /** Image */
@ -105,24 +107,28 @@ img {
/** Refresh */ /** Refresh */
.ui.card > .image > button { .ui.card > .image > button {
transition: 0.4s ease opacity; transition: 0.4s ease opacity;
animation: buttonWorking 2s linear infinite paused;
position: absolute; position: absolute;
top: calc(0.91666667em / 2); top: calc(0.91666667em / 2);
right: calc(0.91666667em / 2); right: calc(0.91666667em / 2);
margin: 0; margin: 0;
opacity: 0;
background-color: transparent; background-color: transparent;
z-index: 2; z-index: 2;
} }
.ui.card:hover > .image > button { @media (hover: hover) {
animation: buttonWorking 2s linear infinite paused; .ui.card > .image > button {
opacity: 0;
opacity: 1; }
.ui.card:hover > .image > button {
opacity: 1;
}
} }
.ui.card:hover > .image > button.working { .ui.card > .image > button.working {
animation-play-state: running; animation-play-state: running;
} }
@keyframes buttonWorking { @keyframes buttonWorking {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
@ -134,11 +140,22 @@ img {
} }
/** Content */ /** Content */
.ui.card > .content > .header {
max-height: calc(2 * 1.28571429em);
overflow: hidden;
}
.ui.card > .content > .description { .ui.card > .content > .description {
position: absolute;
left: 1em;
right: 1em;
max-height: calc(3em * var(--lineHeight)); max-height: calc(3em * var(--lineHeight));
overflow: hidden;
}
@media (hover: hover) {
.ui.card > .content > .description {
position: absolute;
left: 1em;
right: 1em;
max-height: calc(3em * var(--lineHeight));
}
} }
.ui.card > .content > .description-fade { .ui.card > .content > .description-fade {
@ -159,10 +176,15 @@ img {
display: flex; display: flex;
opacity: 0;
background-color: inherit; background-color: inherit;
z-index: 2; z-index: 2;
} }
@media (hover: hover) {
.ui.card > .extra.buttons,
.ui.cards > .card > .extra.buttons {
opacity: 0;
}
}
.ui.card:hover > .extra.buttons, .ui.card:hover > .extra.buttons,
.ui.cards > .card:hover > .extra.buttons { .ui.cards > .card:hover > .extra.buttons {
opacity: 1; opacity: 1;