From 0631923b66343e8e32533fc6dd7126c9ed1093f6 Mon Sep 17 00:00:00 2001 From: Anonymous Contributor Date: Fri, 15 Sep 2023 14:39:36 +0200 Subject: [PATCH] Add module styles --- css/autoslideshow.css | 31 ++++++++++ css/boxlist.css | 90 +++++++++++++++++++++++++++ css/slideshowext.css | 138 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 259 insertions(+) create mode 100644 css/autoslideshow.css create mode 100644 css/boxlist.css create mode 100644 css/slideshowext.css diff --git a/css/autoslideshow.css b/css/autoslideshow.css new file mode 100644 index 0000000..f518e79 --- /dev/null +++ b/css/autoslideshow.css @@ -0,0 +1,31 @@ +@keyframes fade { + 0% { opacity: 0; } + 11.11% { opacity: 1; } + 33.33% { opacity: 1; } + 44.44% { opacity: 0; } + 100% { opacity: 0; } +} + +.auto-slideshow { + overflow: hidden; + display: grid; + height: 600px; + margin: 0 auto; +} + +.auto-slideshow img { + width: 100%; + height: 100%; + grid-row: 1; + grid-column: 1; + opacity: 0; + animation-name: fade; + animation-iteration-count: infinite; +} + +@media (max-width: 1160px) { + .auto-slideshow { + height: auto; + width: 100%; + } +} \ No newline at end of file diff --git a/css/boxlist.css b/css/boxlist.css new file mode 100644 index 0000000..ee7fe79 --- /dev/null +++ b/css/boxlist.css @@ -0,0 +1,90 @@ +.page-cell.img-box-list { + display: flex; + justify-content: center; + width: 100%; + padding-top: 15px; + padding-bottom: 20px; +} + +.img-box { + width: 170px; + padding-left: 10px; + padding-right: 10px; + display: flex; + flex-direction: column; +} + +.img-box:first-child { + padding-left: 0; +} + +.img-box:last-child { + padding-right: 0; +} + +.img-box .animated-image { + background-color: rgb(244, 244, 244); +} + +.img-box .animated-image a { + margin: 15px auto; + position: relative; + display: inline-block; + background-color: rgb(67, 67, 67); + border-radius: 5px; + font-family: 'Unica One', sans-serif; + font-size: 20pt; + font-weight: bold; + font-style: normal; + color: rgb(244, 244, 244); + text-align: center; + width: 100%; + padding: 10px; + box-sizing: border-box; +} + +.img-box-caption { + box-sizing: border-box; + background-color: rgb(244, 244, 244); + border-width: 0px 1px 1px; + border-style: none solid solid; + border-color: currentcolor rgb(225, 245, 243) rgb(225, 245, 243); + text-align: center; + width: 100%; + flex-grow: 1; +} + +.img-box-caption h6 { + color: rgb(61, 40, 17); + font-family: 'Unica One', sans-serif; + vertical-align: baseline; + font-size: 22pt; + line-height: 44px; +} + +.img-box-caption span { + color: rgb(150, 156, 167); + font-family: "Open Sans", sans-serif; + vertical-align: baseline; + font-size: 13pt; + line-height: 26px; +} + +@media (max-width: 750px) { + .page-cell.img-box-list { + flex-direction: column; + width: 100%; + padding: 0; + } + + .img-box { + width: 100%; + background-color: rgb(244, 244, 244); + margin-top: 10px; + padding: 0; + } + + .img-box .animated-image { + margin: 0 auto; + } +} \ No newline at end of file diff --git a/css/slideshowext.css b/css/slideshowext.css new file mode 100644 index 0000000..5a5c517 --- /dev/null +++ b/css/slideshowext.css @@ -0,0 +1,138 @@ +.slideshow-ext { + display: grid; + text-align: left; + margin-top: 30px; + margin-bottom: 30px; +} + +.slideshow-ext > input { + display: none; +} + +.slideshow-ext > .slide-content { + opacity: 0; + visibility: hidden; + grid-row: 1; + grid-column: 1; + position: relative; + display: flex; + width: 100%; + height: auto; + overflow: hidden; + transition: visibility 0s 2s, opacity 2s linear; + box-sizing: border-box; + white-space: normal; + justify-content: center; +} + +.slideshow-ext > .slide-content > div { + width: 15%; + line-height: normal; + display: flex; + flex-direction: column; + justify-content: center; +} + +.slideshow-ext > .slide-content h6 { + font: bold 20pt "Unica One", sans-serif; + color: rgb(152, 0, 0); + background-color: transparent; + text-decoration: none; +} + +.slideshow-ext > .slide-content p { + font: 18pt "Marcellus SC", serif; + color: rgb(0, 0, 0); + background-color: transparent; + text-decoration: none; +} + +.slideshow-ext > .slide-content a { + display: block; + text-align: center; + margin: 0 auto; + background-color: rgb(54, 71, 79); + font: 12pt "Unica One", sans-serif; + color: rgb(255, 255, 255); + text-decoration: none; +/* padding: 1px; + border-radius: 0px;*/ + border-style: solid; + border-width: 0px; + border-color: rgb(55, 71, 79); + + padding: 5px; + border-radius: 5px; +} + +.slideshow-controls { + width: 80%; + margin: 0 auto; + grid-row: 1; + grid-column: 1; + position: relative; + top: 50%; + height: 26px; + z-index: 5; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +.slideshow-controls label { + display: none; + position: absolute; + top: -50%; + padding: 13px; + box-shadow: inset 2px -2px 0 1px #3a3a3a; + cursor: pointer; + -moz-transition: box-shadow 0.15s, margin 0.15s; + -o-transition: box-shadow 0.15s, margin 0.15s; + -webkit-transition: box-shadow 0.15s, margin 0.15s; + transition: box-shadow 0.15s, margin 0.15s; +} + +.slideshow-controls label:hover { + box-shadow: inset 3px -3px 0 2px #71ad37; + margin: 0 0px; +} + +.slideshow-controls label:before { + content: ''; + position: absolute; + top: 50%; + left: 10%; +} + +@media (max-width: 1500px) { + .slideshow-ext { + width: 90%; + margin: 30px auto; + } + + .slideshow-controls { + width: 95%; + top: 95%; + } + + .slideshow-controls label { + box-shadow: inset 2px -2px 0 1px #71ad37; + } +} + +@media (max-width: 1150px) { + .slideshow-ext > .slide-content { + flex-direction: column; + } + + .slideshow-ext > .slide-content > div { + margin: 0 auto; + margin-bottom: 10px; + width: 80%; + } + + .slideshow-controls { + top: 10%; + width: 90%; + } +} \ No newline at end of file