From 3a847ca338b8e905b2f398b59dc6a33ed7c66e1f Mon Sep 17 00:00:00 2001 From: Knah Tsaeb Date: Tue, 29 Oct 2024 11:36:24 +0100 Subject: [PATCH] Add new theme and update CSS var --- app/FileAndDir.php | 5 +- public/index.php | 2 +- public/templates/board/board.css | 30 ++- public/templates/board/board.php | 6 +- public/templates/default/default.css | 283 +++++++++++++++++++++++++++ public/templates/default/default.php | 123 ++++++++++++ 6 files changed, 437 insertions(+), 12 deletions(-) create mode 100644 public/templates/default/default.css create mode 100644 public/templates/default/default.php diff --git a/app/FileAndDir.php b/app/FileAndDir.php index e545153..b6e0e41 100644 --- a/app/FileAndDir.php +++ b/app/FileAndDir.php @@ -67,8 +67,7 @@ class FileAndDir { */ public function makeBreadcrumb(): string { if ($this->requestedDir !== '' && $this->requestedDir !== 'photos') { - $breadcrumb_navigation = ''; return $breadcrumb_navigation; } else { return ''; diff --git a/public/index.php b/public/index.php index 985f122..c5c486c 100644 --- a/public/index.php +++ b/public/index.php @@ -17,7 +17,7 @@ Not edit this param directly See README.md */ $config = [ - 'templateFile' => 'board', // Template filename (must be placed in 'public/templates' folder) + 'templateFile' => 'default', // Template filename (must be placed in 'public/templates' folder) 'title' => 'NanoGal', // Text to be displayed in browser titlebar 'description' => 'My gallery', // Use in meta tag "description" 'author' => 'NanoGal', // Your name diff --git a/public/templates/board/board.css b/public/templates/board/board.css index 0e31e8c..f194a99 100644 --- a/public/templates/board/board.css +++ b/public/templates/board/board.css @@ -1,5 +1,5 @@ :root { - color-scheme: light dark; + color-scheme: dark light; --primary: #cc2027; --primary-darken: #8E161B; @@ -31,25 +31,37 @@ --warning-lighten: #D67E4C; --warning-text-contrast: #FFF; + --divider: light-dark(#B2AFAF, #454343); + --background-color: light-dark(#fffbfb, #171414); --background-color-darken: light-dark(#B2AFAF, #100E0E); --background-color-lighten: light-dark(#FFFBFB, #454343); + --light-background-color: #fffbfb; + --dark-background-color: #171414; + --header-background-color: light-dark(#171414, #fffbfb); --header-background-color-darken: light-dark(#100E0E, #B2AFAF); --header-background-color-lighten: light-dark(#454343, #FFFBFB); --header-text-color: light-dark(#fffbfb, #171414); --header-text-color-secondary: #ffffffb3; - --header-text-color-disable: light-dark(#ffffff80, #454343); + --header-text-color-disable: var(--divider); --text-color: light-dark(#171414, #fffbfb); --text-color-secondary: #ffffffb3; - --text-color-disable: light-dark(#454343, #ffffff80); + --text-color-disable: light-dark(#454343, #B2AFAF); + + --light-text-color: #171414; + --dark-text-color: #fffbfb; --text-color-inverse: light-dark(#fffbfb, #171414); --text-color-secondary-inverse: #ffffffb3; - --text-color-disable-inverse: light-dark(#ffffff80, #454343); + --text-color-disable-inverse: var(--divider); + + --box-shadow-light: .4rem .4rem 0px .1rem #B2AFAF; + --box-shadow-dark: .4rem .4rem 0px .1rem #454343; + --box-shadow-auto: .4rem .4rem 0px .1rem var(--divider); --h1-color: var(--primary); --h2-color: #c33d35; @@ -57,6 +69,9 @@ --h4-color: #ae5e52; --h5-color: #a16a61; --h6-color: #927671; + + --font-size: 1.1em; + --default-space: .2em; } [data-theme="dark"] { @@ -206,6 +221,13 @@ aside * { width: min-content; } +.card:hover{ + transform: scale(1.2); + z-index: 1; + box-shadow: 0em 0em .3em .3em var(--background-color-darken); + border-radius: .2em; +} + .card a { display: flex; } diff --git a/public/templates/board/board.php b/public/templates/board/board.php index 51e155c..b1e7fe1 100644 --- a/public/templates/board/board.php +++ b/public/templates/board/board.php @@ -13,11 +13,11 @@ use App\FileAndDir; - + - + @@ -33,7 +33,7 @@ use App\FileAndDir; - + diff --git a/public/templates/default/default.css b/public/templates/default/default.css new file mode 100644 index 0000000..a0bed0b --- /dev/null +++ b/public/templates/default/default.css @@ -0,0 +1,283 @@ +:root { + color-scheme: dark light; + + --primary: #cc2027; + --primary-darken: #8E161B; + --primary-lighten: #D64C52; + --primary-text-contrast: #FFF; + + --secondary: #20ccc5; + --secondary-darken: #168E89; + --secondary-lighten: #4CD6D0; + --secondary-text-contrast: #000; + + --error: #c43933; + --error-darken: #892723; + --error-lighten: #CF605B; + --error-text-contrast: #FFF; + + --info: #206ccc; + --info-darken: #164B8E; + --info-lighten: #4C89D6; + --info-text-contrast: #FFF; + + --success: #7dcc20; + --success-darken: #578E16; + --success-lighten: #97D64C; + --success-text-contrast: #000; + + --warning: #cc5e20; + --warning-darken: #8E4116; + --warning-lighten: #D67E4C; + --warning-text-contrast: #FFF; + + --divider: light-dark(#B2AFAF, #454343); + + --background-color: light-dark(#fffbfb, #171414); + --background-color-darken: light-dark(#B2AFAF, #100E0E); + --background-color-lighten: light-dark(#FFFBFB, #454343); + + --light-background-color: #fffbfb; + --dark-background-color: #171414; + + --header-background-color: light-dark(#171414, #fffbfb); + --header-background-color-darken: light-dark(#100E0E, #B2AFAF); + --header-background-color-lighten: light-dark(#454343, #FFFBFB); + + --header-text-color: light-dark(#fffbfb, #171414); + --header-text-color-secondary: #ffffffb3; + --header-text-color-disable: var(--divider); + + --text-color: light-dark(#171414, #fffbfb); + --text-color-secondary: #ffffffb3; + --text-color-disable: light-dark(#454343, #B2AFAF); + + --light-text-color: #171414; + --dark-text-color: #fffbfb; + + --text-color-inverse: light-dark(#fffbfb, #171414); + --text-color-secondary-inverse: #ffffffb3; + --text-color-disable-inverse: var(--divider); + + --box-shadow-light: .4rem .4rem 0px .1rem #B2AFAF; + --box-shadow-dark: .4rem .4rem 0px .1rem #454343; + --box-shadow-auto: .4rem .4rem 0px .1rem var(--divider); + + --h1-color: var(--primary); + --h2-color: #c33d35; + --h3-color: #b94f44; + --h4-color: #ae5e52; + --h5-color: #a16a61; + --h6-color: #927671; + + --font-size: 1.1em; + --default-space: .2em; +} + +[data-theme="dark"] { + --background-color: #171414; + --text-color: #fffbfb; +} + +[data-theme="light"] { + --background-color: #fffbfb; + --text-color: #171414; +} + +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; + scroll-behavior: smooth; +} + +body { + background: var(--background-color); + color: var(--text-color); + font-size: 1.5rem; + font-family: Helvetica, Arial, sans-serif; + margin: 0; + padding: 0; + position: relative; + width: 100%; +} + +a { + color: var(--primary); + font-weight: bold; + text-decoration: none; +} + +a:not(.card-content):hover { + color: var(--primary-lighten); +} + +h1 { + font-style: italic; + font-family: Georgia, Lucida, serif; + margin: 0; + padding: 0; +} + +h1 a { + color: var(--h1-color); +} + +#logo-border-color { + fill: var(--primary) !important; + stroke: none !important; +} + +.logo { + height: 3em; + vertical-align: middle; + stroke: var(--header-text-color) !important; +} + +#dark-mode { + position: absolute; + right: 1em; + top: 1em; +} + +body>header { + background-color: var(--header-background-color); + color: var(--header-text-color); + padding: 0 .5em; + margin: 0 0 .5em 0; +} + +main, +.message { + max-width: 100%; + margin: 0px auto; +} + +.message { + background-color: var(--success); + color: var(--success-text-contrast); + border-radius: 2px; +} + +.message>div { + padding: 1rem; +} + +img { + transition: all .2s ease-in; + border: none; +} + +nav { + font-size: 2.2rem; +} + +body>nav { + text-align: center; +} + +aside { + padding-bottom: 0.3em; +} + +aside a { + color: var(--primary); + text-decoration: none; +} + +aside * { + margin: .2em 0; +} + +main { + display: flex; + flex-wrap: wrap; + gap: .5em; + justify-content: center; +} + +article { + background-color: var(--header-background-color); + display: grid; + grid-template-columns: repeat(1, 1fr); + margin: 0; + padding: 0; + transition: all .2s ease-in; + position: relative; + width: min-content; +} + +article a { + display: flex; +} + +.card-footer { + color: var(--header-text-color); + margin: 0; + overflow: hidden; + padding: .3em .6em; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +footer { + padding-top: 1em; + text-align: center; +} + +footer a { + color: var(--primary); + text-decoration: none; +} + +.buildTime { + font-size: 1.1rem; + margin: 0; +} + +#backtop { + bottom: 0; + border-radius: 4px; + background-color: var(--primary); + color: var(--text-color-secondary); + display: block; + margin: .5%; + padding: 1rem 4rem; + position: fixed; + right: 0; +} + +#legend { + background-color: var(--header-background-color); + flex: none; + max-width: 90%; + width: 100%; +} + +.lightbox-container__media { + flex-wrap: wrap; + flex-direction: row; + + p { + background-color: var(--header-background-color); + width: 100%; + max-width: 90%; + } +} + +.gdesc-inner { + color: var(--text-color-inverse); + word-break: break-word; +} + +.gdesc-inner ul { + padding: 0 0 0 1.8em; +} + +.glightbox-container .gslide, +.gslide-image img { + user-select: auto; +} \ No newline at end of file diff --git a/public/templates/default/default.php b/public/templates/default/default.php new file mode 100644 index 0000000..2b6fb1f --- /dev/null +++ b/public/templates/default/default.php @@ -0,0 +1,123 @@ + + + + + + + <?= $config['title']; ?> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ +

+ + Dark/Light mode icon + + + + + +
+
+ +
+
+ +
+ +
+ + + + + +
+ + Top + + + + + + + + + \ No newline at end of file