Refactor stylsheets
This commit is contained in:
grandeljay
parent
358a7e94c4
commit
05b022aa85
4 changed files with 333 additions and 376 deletions
|
|
@ -1,6 +1,5 @@
|
||||||
:root {
|
:root {
|
||||||
--lineHeight: 1.4285;
|
--lineHeight: 1.4285;
|
||||||
--wishPreviewHeight: 192px;
|
|
||||||
--dimmerZIndex: 100;
|
--dimmerZIndex: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -82,344 +81,6 @@ figure {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Wishlist Card
|
|
||||||
*/
|
|
||||||
.wishlist .ui.card {
|
|
||||||
--padding: 0.91666667em;
|
|
||||||
--buttonsHeight: calc((.92857143rem + 0.78571429em * 2) * 2 + 0.25em + 0.75em);
|
|
||||||
--wishPreviewHeightHover: calc(1em + 3 * var(--padding));
|
|
||||||
}
|
|
||||||
.wishlist .ui.card:focus-within {
|
|
||||||
z-index: calc(var(--dimmerZIndex) + 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.fluid.card {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.wishlist:not(.one).column .ui.fluid.card::before {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
height: 4em;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
content: '';
|
|
||||||
border-radius: .28571429rem;
|
|
||||||
|
|
||||||
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:not(.one).column .ui.fluid.card::before {
|
|
||||||
background-image: linear-gradient(0deg, rgba(27, 28, 29, 1) 0.75em, rgba(27, 28, 29, 0.9) 45%, rgba(27, 28, 29, 0) 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.wishlist .ui.fluid.card.loading::before {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.card.horizontal,
|
|
||||||
.ui.horizontal.cards > .card {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Image */
|
|
||||||
.wishlist .ui.card > .image > :is(svg, img.preview) {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.wishlist:not(.one).column .ui.card > .image > :is(svg, img.preview) {
|
|
||||||
height: var(--wishPreviewHeightHover);
|
|
||||||
}
|
|
||||||
@media (hover: hover) {
|
|
||||||
.wishlist:not(.one).column .ui.card > .image > :is(svg, img.preview) {
|
|
||||||
height: max(var(--wishPreviewHeightHover), var(--wishPreviewHeight));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .image > svg {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
color: #f0f0f0;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: inherit;
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.wishlist .ui.card > .image > svg {
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
background-color: #222;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .image > svg#no-image {
|
|
||||||
padding: 15% 10%;
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.wishlist .ui.card > .image > svg#no-image {
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.wishlist .ui.card > .image > svg {
|
|
||||||
transition:
|
|
||||||
0.2s linear height,
|
|
||||||
0.2s linear padding,
|
|
||||||
0.2s linear opacity;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.wishlist:not(.one).column .ui.card:hover > .image > svg {
|
|
||||||
height: var(--wishPreviewHeightHover);
|
|
||||||
padding: 0 !important;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .image > img.preview {
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.wishlist .ui.card > .image > img.preview {
|
|
||||||
filter: brightness(80%);
|
|
||||||
background-color: #111;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.wishlist .ui.card > .image > img.preview {
|
|
||||||
transition:
|
|
||||||
0.2s linear height,
|
|
||||||
0.2s linear opacity;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist:not(.one).column .ui.card:hover > .image > img.preview {
|
|
||||||
height: var(--wishPreviewHeightHover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.card.horizontal > .image,
|
|
||||||
.ui.horizontal.cards > .card > .image {
|
|
||||||
--sizeCardY: calc(1.28571429em * 1.28571429 + 2em + 3px);
|
|
||||||
--sizeFaviconX: calc(1.25em + var(--padding) * 2);
|
|
||||||
|
|
||||||
width: min(var(--sizeFaviconX), var(--sizeCardY));
|
|
||||||
min-height: var(--sizeCardY);
|
|
||||||
}
|
|
||||||
@media (max-width: 512px) {
|
|
||||||
.ui.card.horizontal > .image,
|
|
||||||
.ui.horizontal.cards > .card > .image {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Provider */
|
|
||||||
.wishlist .ui.card > .image,
|
|
||||||
.wishlist .ui.card > .image > span.provider {
|
|
||||||
border-radius: .28571429rem .28571429rem 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .image > img.favicon,
|
|
||||||
.wishlist .ui.card > .image > span.provider {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Favicon */
|
|
||||||
.wishlist .ui.card > .image > img.favicon {
|
|
||||||
padding: calc(var(--padding) * 1.5) var(--padding);
|
|
||||||
|
|
||||||
height: 1.25em;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
box-sizing: content-box;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.wishlist .ui.card > .image > img.favicon {
|
|
||||||
filter: brightness(80%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .image > img.favicon + span.provider {
|
|
||||||
padding-left: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Provider name */
|
|
||||||
.wishlist .ui.card > .image > span.provider {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: calc(var(--padding) * 1.5) var(--padding);
|
|
||||||
|
|
||||||
line-height: 1;
|
|
||||||
user-select: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
background-color: rgba(255, 255, 255, 0.6);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.wishlist .ui.card > .image > span.provider {
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (backdrop-filter: blur(4px)) {
|
|
||||||
.wishlist .ui.card > .image > span.provider {
|
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.wishlist .ui.card > .image > span.provider {
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
.wishlist .ui.card > .image > span.provider {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.wishlist .ui.card > .image > span.provider {
|
|
||||||
transition: opacity 0.2s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card:hover > .image > span.provider {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Content */
|
|
||||||
.wishlist .ui.card > .content:not(.extra) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
@media (hover: hover) {
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.wishlist .ui.card > .content:not(.extra) {
|
|
||||||
transition:
|
|
||||||
0.2s linear height,
|
|
||||||
0.2s linear margin-bottom;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist:not(.one).column .ui.card > .content:not(.extra) {
|
|
||||||
--contentHeight: calc(var(--wishPreviewHeight) * 1.25);
|
|
||||||
|
|
||||||
height: var(--contentHeight);
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist:not(.one).column .ui.card:hover > .content:not(.extra) {
|
|
||||||
height: calc(var(--contentHeight) + 0.75em - 4px);
|
|
||||||
|
|
||||||
margin-bottom: var(--buttonsHeight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .content > .header {
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
max-height: calc(2 * 1.28571429em);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .content > .description {
|
|
||||||
margin-top: 0;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.wishlist .ui.horizontal.card > .content > .description {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Buttons */
|
|
||||||
.wishlist .ui.card > .extra.buttons,
|
|
||||||
.wishlist .ui.card > .content > .extra.buttons {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.25em;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
background-color: inherit;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .content > .extra.buttons {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
.wishlist:not(.one).column .ui.card > .extra.buttons {
|
|
||||||
position: absolute;
|
|
||||||
top: unset;
|
|
||||||
right: 0;
|
|
||||||
bottom: calc(var(--buttonsHeight) / 2);
|
|
||||||
left: 0;
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.wishlist:not(.one).column .ui.card > .extra.buttons {
|
|
||||||
transition:
|
|
||||||
0.2s ease opacity,
|
|
||||||
0.2s ease bottom;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.wishlist:not(.one).column .ui.card:hover > .extra.buttons {
|
|
||||||
opacity: 1;
|
|
||||||
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wishlist .ui.card > .extra.buttons > .button,
|
|
||||||
.wishlist .ui.card > .content > .extra.buttons > .button {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Overlay */
|
|
||||||
.ui.card .dimmer,
|
|
||||||
.ui.cards > .card .dimmer {
|
|
||||||
z-index: calc(var(--dimmerZIndex) + 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Label
|
* Label
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
314
src/assets/css/wishlist.css
Normal file
314
src/assets/css/wishlist.css
Normal file
|
|
@ -0,0 +1,314 @@
|
||||||
|
/**
|
||||||
|
* Wishlist Card
|
||||||
|
*/
|
||||||
|
.wishlist .ui.card {
|
||||||
|
--padding: 0.91666667em;
|
||||||
|
--wishPreviewHeight: 192px;
|
||||||
|
--wishPreviewHeightHover: calc(1em + 3 * var(--padding));
|
||||||
|
}
|
||||||
|
.wishlist .ui.card:focus-within {
|
||||||
|
z-index: calc(var(--dimmerZIndex) + 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.fluid.card {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.wishlist:not(.one).column .ui.fluid.card::before {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
height: 4em;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
content: '';
|
||||||
|
border-radius: .28571429rem;
|
||||||
|
|
||||||
|
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:not(.one).column .ui.fluid.card::before {
|
||||||
|
background-image: linear-gradient(0deg, rgba(27, 28, 29, 1) 0.75em, rgba(27, 28, 29, 0.9) 45%, rgba(27, 28, 29, 0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wishlist .ui.fluid.card.loading::before {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.card.horizontal,
|
||||||
|
.ui.horizontal.cards > .card {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Image */
|
||||||
|
.wishlist .ui.card > .image > :is(svg, img.preview) {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.wishlist:not(.one).column .ui.card > .image > :is(svg, img.preview) {
|
||||||
|
height: var(--wishPreviewHeightHover);
|
||||||
|
}
|
||||||
|
@media (hover: hover) {
|
||||||
|
.wishlist:not(.one).column .ui.card > .image > :is(svg, img.preview) {
|
||||||
|
height: max(var(--wishPreviewHeightHover), var(--wishPreviewHeight));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .image > svg {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
color: #f0f0f0;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlist .ui.card > .image > svg {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .image > svg#no-image {
|
||||||
|
padding: 15% 10%;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlist .ui.card > .image > svg#no-image {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.wishlist .ui.card > .image > svg {
|
||||||
|
transition:
|
||||||
|
0.2s linear height,
|
||||||
|
0.2s linear padding,
|
||||||
|
0.2s linear opacity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wishlist:not(.one).column .ui.card:hover > .image > svg {
|
||||||
|
height: var(--wishPreviewHeightHover);
|
||||||
|
padding: 0 !important;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .image > img.preview {
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: 50%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlist .ui.card > .image > img.preview {
|
||||||
|
filter: brightness(80%);
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.wishlist .ui.card > .image > img.preview {
|
||||||
|
transition:
|
||||||
|
0.2s linear height,
|
||||||
|
0.2s linear opacity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist:not(.one).column .ui.card:hover > .image > img.preview {
|
||||||
|
height: var(--wishPreviewHeightHover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.card.horizontal > .image,
|
||||||
|
.ui.horizontal.cards > .card > .image {
|
||||||
|
--sizeCardY: calc(1.28571429em * 1.28571429 + 2em + 3px);
|
||||||
|
--sizeFaviconX: calc(1.25em + var(--padding) * 2);
|
||||||
|
|
||||||
|
width: min(var(--sizeFaviconX), var(--sizeCardY));
|
||||||
|
min-height: var(--sizeCardY);
|
||||||
|
}
|
||||||
|
@media (max-width: 512px) {
|
||||||
|
.ui.card.horizontal > .image,
|
||||||
|
.ui.horizontal.cards > .card > .image {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Provider */
|
||||||
|
.wishlist .ui.card > .image,
|
||||||
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
border-radius: .28571429rem .28571429rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .image > img.favicon,
|
||||||
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Favicon */
|
||||||
|
.wishlist .ui.card > .image > img.favicon {
|
||||||
|
padding: calc(var(--padding) * 1.5) var(--padding);
|
||||||
|
|
||||||
|
height: 1.25em;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
box-sizing: content-box;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlist .ui.card > .image > img.favicon {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .image > img.favicon + span.provider {
|
||||||
|
padding-left: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Provider name */
|
||||||
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: calc(var(--padding) * 1.5) var(--padding);
|
||||||
|
|
||||||
|
line-height: 1;
|
||||||
|
user-select: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (backdrop-filter: blur(4px)) {
|
||||||
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
transition: opacity 0.2s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card:hover > .image > span.provider {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Content */
|
||||||
|
.wishlist .ui.card > .content:not(.extra) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@media (hover: hover) {
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.wishlist .ui.card > .content:not(.extra) {
|
||||||
|
transition:
|
||||||
|
0.2s linear height,
|
||||||
|
0.2s linear margin-bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist:not(.one).column .ui.card > .content:not(.extra) {
|
||||||
|
--contentHeight: calc(var(--wishPreviewHeight) * 1.25);
|
||||||
|
|
||||||
|
height: var(--contentHeight);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist:not(.one).column .ui.card:hover > .content:not(.extra) {
|
||||||
|
height: calc(var(--contentHeight) + 0.75em - 4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ui.card > .content::after,
|
||||||
|
.ui.cards > .card > .content::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .content > .header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
max-height: calc(2 * 1.28571429em);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .content > .description {
|
||||||
|
margin-top: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.wishlist .ui.horizontal.card > .content > .description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Buttons */
|
||||||
|
.wishlist .ui.card > .extra.buttons,
|
||||||
|
.wishlist .ui.card > .content > .extra.buttons {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
gap: 0.25em;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
background-color: inherit;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .content > .extra.buttons {
|
||||||
|
flex-flow: row wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlist .ui.card > .extra.buttons > .button,
|
||||||
|
.wishlist .ui.card > .content > .extra.buttons > .button {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Overlay */
|
||||||
|
.ui.card .dimmer,
|
||||||
|
.ui.cards > .card .dimmer {
|
||||||
|
z-index: calc(var(--dimmerZIndex) + 2);
|
||||||
|
}
|
||||||
|
|
@ -120,6 +120,7 @@ class Page
|
||||||
public array $messages = array();
|
public array $messages = array();
|
||||||
public string $link_preview;
|
public string $link_preview;
|
||||||
public string $description;
|
public string $description;
|
||||||
|
public array $stylesheets = array();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* __construct
|
* __construct
|
||||||
|
|
@ -226,6 +227,15 @@ class Page
|
||||||
if (file_exists($screenshot_filepath)) {
|
if (file_exists($screenshot_filepath)) {
|
||||||
$this->link_preview = $screenshot_url;
|
$this->link_preview = $screenshot_url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stylesheets
|
||||||
|
*/
|
||||||
|
$this->stylesheets = array(
|
||||||
|
'fomantic-ui' => 'semantic/dist/semantic.min.css',
|
||||||
|
'default' => 'src/assets/css/default.css',
|
||||||
|
'dark' => 'src/assets/css/default/dark.css',
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function header(): void
|
public function header(): void
|
||||||
|
|
@ -292,47 +302,18 @@ class Page
|
||||||
/**
|
/**
|
||||||
* Stylesheets
|
* Stylesheets
|
||||||
*/
|
*/
|
||||||
|
$stylesheet_page = 'src/assets/css/' . $this->name . '.css';
|
||||||
|
|
||||||
/** Fomantic UI */
|
if (file_exists($stylesheet_page)) {
|
||||||
$stylesheetFomantic = 'semantic/dist/semantic.min.css';
|
$this->stylesheets[] = array('page' => $stylesheet_page);
|
||||||
$stylesheetFomanticModified = filemtime($stylesheetFomantic);
|
}
|
||||||
?>
|
|
||||||
<link rel="stylesheet"
|
|
||||||
type="text/css"
|
|
||||||
href="/<?= $stylesheetFomantic ?>?m=<?= $stylesheetFomanticModified ?>"
|
|
||||||
/>
|
|
||||||
<?php
|
|
||||||
|
|
||||||
/** Default */
|
|
||||||
$stylesheetDefault = 'src/assets/css/default.css';
|
|
||||||
$stylesheetDefaultModified = filemtime($stylesheetDefault);
|
|
||||||
?>
|
|
||||||
<link rel="stylesheet"
|
|
||||||
type="text/css"
|
|
||||||
href="/<?= $stylesheetDefault ?>?m=<?= $stylesheetDefaultModified ?>"
|
|
||||||
/>
|
|
||||||
<?php
|
|
||||||
|
|
||||||
/** Default (Dark) */
|
|
||||||
$stylesheetDefaultDark = 'src/assets/css/default/dark.css';
|
|
||||||
$stylesheetDefaultDarkModified = filemtime($stylesheetDefaultDark);
|
|
||||||
?>
|
|
||||||
<link rel="stylesheet"
|
|
||||||
type="text/css"
|
|
||||||
href="/<?= $stylesheetDefaultDark ?>?m=<?= $stylesheetDefaultDarkModified ?>"
|
|
||||||
/>
|
|
||||||
<?php
|
|
||||||
|
|
||||||
/** Page */
|
|
||||||
$stylesheetPage = 'src/assets/css/' . $this->name . '.css';
|
|
||||||
|
|
||||||
if (file_exists($stylesheetPage)) {
|
|
||||||
$stylesheetPageModified = filemtime($stylesheetPage);
|
|
||||||
|
|
||||||
|
foreach ($this->stylesheets as $stylesheet_filepath) {
|
||||||
|
$hash = crc32($stylesheet_filepath);
|
||||||
?>
|
?>
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
type="text/css"
|
type="text/css"
|
||||||
href="/<?= $stylesheetPage ?>?m=<?= $stylesheetPageModified ?>"
|
href="/<?= $stylesheet_filepath ?>?v=<?= $hash ?>"
|
||||||
/>
|
/>
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,8 @@
|
||||||
|
|
||||||
namespace wishthis;
|
namespace wishthis;
|
||||||
|
|
||||||
$page = new Page(__FILE__, __('My lists'), 1);
|
$page = new Page(__FILE__, __('My lists'), 1);
|
||||||
|
$page->stylesheets[] = 'src/assets/css/wishlist.css';
|
||||||
$page->header();
|
$page->header();
|
||||||
$page->bodyStart();
|
$page->bodyStart();
|
||||||
$page->navigation();
|
$page->navigation();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue