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 {
|
||||
--lineHeight: 1.4285;
|
||||
--wishPreviewHeight: 192px;
|
||||
--dimmerZIndex: 100;
|
||||
}
|
||||
|
||||
|
|
@ -82,344 +81,6 @@ figure {
|
|||
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
|
||||
*/
|
||||
|
|
|
|||
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 string $link_preview;
|
||||
public string $description;
|
||||
public array $stylesheets = array();
|
||||
|
||||
/**
|
||||
* __construct
|
||||
|
|
@ -226,6 +227,15 @@ class Page
|
|||
if (file_exists($screenshot_filepath)) {
|
||||
$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
|
||||
|
|
@ -292,47 +302,18 @@ class Page
|
|||
/**
|
||||
* Stylesheets
|
||||
*/
|
||||
$stylesheet_page = 'src/assets/css/' . $this->name . '.css';
|
||||
|
||||
/** Fomantic UI */
|
||||
$stylesheetFomantic = 'semantic/dist/semantic.min.css';
|
||||
$stylesheetFomanticModified = filemtime($stylesheetFomantic);
|
||||
if (file_exists($stylesheet_page)) {
|
||||
$this->stylesheets[] = array('page' => $stylesheet_page);
|
||||
}
|
||||
|
||||
foreach ($this->stylesheets as $stylesheet_filepath) {
|
||||
$hash = crc32($stylesheet_filepath);
|
||||
?>
|
||||
<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);
|
||||
|
||||
?>
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="/<?= $stylesheetPage ?>?m=<?= $stylesheetPageModified ?>"
|
||||
href="/<?= $stylesheet_filepath ?>?v=<?= $hash ?>"
|
||||
/>
|
||||
<?php
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
namespace wishthis;
|
||||
|
||||
$page = new Page(__FILE__, __('My lists'), 1);
|
||||
$page->stylesheets[] = 'src/assets/css/wishlist.css';
|
||||
$page->header();
|
||||
$page->bodyStart();
|
||||
$page->navigation();
|
||||
|
|
|
|||
Loading…
Reference in a new issue