Fix wish buttons overflow #48
This commit is contained in:
parent
b551f66920
commit
0cef9fa398
2 changed files with 22 additions and 32 deletions
|
@ -278,43 +278,36 @@ figure {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wishlist .ui.card > .content > .description-fade {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
height: 4em;
|
|
||||||
width: 100%;
|
|
||||||
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 0.75em, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 100%);
|
|
||||||
border-radius: 0.33333333rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.wishlist .ui.card > .content > .description-fade {
|
|
||||||
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0.75em, rgba(0, 0, 0, 0.9) 45%, rgba(0, 0, 0, 0) 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Buttons */
|
/** Buttons */
|
||||||
.wishlist .ui.card > .extra.buttons {
|
.wishlist .ui.card > .extra.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25em;
|
||||||
|
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
.wishlist .ui.card > .extra.buttons::before {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 100%;
|
||||||
|
|
||||||
|
height: 4em;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 0.75em, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 100%);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlist .ui.card > .extra.buttons::before {
|
||||||
|
background-image: linear-gradient(0deg, rgba(17, 17, 17, 1) 0.75em, rgba(17, 17, 17, 0.9) 45%, rgba(17, 17, 17, 0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.wishlist .ui.card > .content > .description-fade {
|
|
||||||
transition: 0.2s ease bottom;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.wishlist .ui.card:hover > .content > .description-fade {
|
|
||||||
bottom: var(--buttonsHeight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .extra.buttons {
|
.wishlist .ui.card > .extra.buttons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: unset;
|
top: unset;
|
||||||
|
@ -342,10 +335,8 @@ figure {
|
||||||
|
|
||||||
.wishlist .ui.card > .extra.buttons > .button {
|
.wishlist .ui.card > .extra.buttons > .button {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
.wishlist .ui.card > .extra.buttons > :last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -225,7 +225,6 @@ class Wish
|
||||||
<a href="<?= $this->url ?>" target="_blank"><?= $this->url ?></a>
|
<a href="<?= $this->url ?>" target="_blank"><?= $this->url ?></a>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="description-fade"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="extra content buttons">
|
<div class="extra content buttons">
|
||||||
|
|
Loading…
Reference in a new issue