diff --git a/.github/README.md b/.github/README.md index 05bc7f9..8d51101 100644 --- a/.github/README.md +++ b/.github/README.md @@ -300,6 +300,7 @@ If you want to customize the font or colours of the viewer page, create a file i | **`bgViewer`** | Background colour for the viewer element | | **`txtPrimary`** | Primary text colour; this should be your main brand colour. | | **`txtSecondary`** | Secondary text colour; this is used for the file details. | +| **`linkPrimary`** | Primary link colour | | **`linkHover`** | Colour of the `hover` effect for links | | **`linkActive`** | Colour of the `active` effect for links | | **`borderHover`** | Colour of the `hover` effect for borders; this is used for the underlining links. | diff --git a/tailwind.config.js b/tailwind.config.js index fa3e321..81e6b34 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,10 +18,11 @@ const defaults = { bgViewer: '#151515', // Text colours - txtPrimary: '#FD842D', - txtSecondary: '#BDBDBD', + txtPrimary: '#BDBDBD', + txtSecondary: '#8D8D8D', // Links + linkPrimary: '#FD842D', linkHover: '#FD710D', linkActive: '#DE5E02', @@ -52,6 +53,7 @@ module.exports = { colors: { 'primary': theme.txtPrimary || defaults.txtPrimary, 'secondary': theme.txtSecondary || defaults.txtSecondary, + 'link-primary': theme.linkPrimary || defaults.linkPrimary, 'link-hover': theme.linkHover || defaults.linkHover, 'link-active': theme.linkActive || defaults.linkActive, }, diff --git a/tailwind.css b/tailwind.css index adb200c..4a52983 100644 --- a/tailwind.css +++ b/tailwind.css @@ -13,7 +13,7 @@ @apply no-underline hover_no-underline active_no-underline visited_no-underline /* regular, visited */ - text-primary visited_text-primary + text-link-primary visited_text-link-primary border-b-2 visited_border-b-2 border-transparent visited_border-transparent rounded-sm visited_rounded-sm diff --git a/views/view.pug b/views/view.pug index 0421cc1..4c175ed 100644 --- a/views/view.pug +++ b/views/view.pug @@ -21,10 +21,10 @@ html * { display: none !important; } meta(http-equiv='refresh' content=`0; url='${resourceAttr.src}'`) - body.font-main.text-secondary.bg-page + body.font-main.bg-page .w-full.h-full.flex.justify-center.items-center.text-center .bg-viewer.rounded-24 - h4.mx-4.mt-6.mb-4.text-3xl.font-main!=title + h4.mx-4.mt-6.mb-4.text-3xl.font-main.text-primary!=title figure.mx-10.my-4.flex.flex-col.align-items-center.justify-center .flex.justify-center if fileIs.video @@ -37,10 +37,10 @@ html code!=mimetype figcaption br - span.text-2xl Uploaded by #[strong!=uploader] + span.text-2xl.text-primary Uploaded by #[strong!=uploader] br - span #{timestamp} (#{size}) + span.text-secondary #{timestamp} (#{size}) br span: a.link(href='#' onclick=`window.location = '${resourceAttr.src}?download=yes'; return false;` download=title) Download if showAd - .mx-4.mb-8.text-footer: p Image hosted by #[a.link(href='https://github.com/tycrek/ass' target='_blank'): strong ass], the superior self-hosted ShareX server + .mx-4.mb-8.text-footer.text-secondary: p Image hosted by #[a.link(href='https://github.com/tycrek/ass' target='_blank'): strong ass], the superior self-hosted ShareX server