j1-template 2024.3.18 → 2024.3.19

data/assets/theme/j1/modules/{swiper → swiperjs}/css/theme/uno.css

@@ -1,20 +1,14 @@
 /*
  # -----------------------------------------------------------------------------
  # ~/assets/theme/j1/modules/swiper/css/theme/uno.css
- # Swiper v11.2.0 (January, 2025) by Dmytro Semenov
- # Provides SwiperJS CSS styles for theme Uno
+ # Provides SwiperJS v11.2.0 (January, 2025) CSS styles for theme Uno
  # -----------------------------------------------------------------------------
  #
  # Product/Info:
- # https://swiperjs.com
  # http://jekyll.one
  #
- # Copyright (C) 2014-2025 Vladimir Kharlampidi
  # Copyright (C) 2023-2025 Juergen Adams
  #
- # SwiperJS is licensed under the MIT License.
- # See: https://github.com/nolimits4web/swiper/blob/master/LICENSE
- #
  # J1 Theme is licensed under MIT License.
  # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
  # -----------------------------------------------------------------------------
@@ -23,7 +17,7 @@
 /* Global styles
 -------------------------------------------------------------------------------- */
 
-/* Theme styles
+/* Global Theme styles
 -------------------------------------------------------------------- */
 :root {
   --swiper-theme-color: var(--bs-primary);
@@ -33,8 +27,7 @@
 
 /* Pagination styles
 -------------------------------------------------------------------- */
-
-:root { 
+:root {
   --swiper-pagination-color: var(--swiper-theme-color);
   --swiper-pagination-left: auto;
   --swiper-pagination-right: 8px;
@@ -68,8 +61,27 @@
   --swiper-scrollbar-size: 4px;
 }
 
-/* Captions
+/* Navigation styles
 -------------------------------------------------------------------- */
+:root {
+  --swiper-navigation-color: var(--bs-gray-100);
+  --swiper-navigation-size: 44px;
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 10px;
+}
+
+/* Titles and Captions
+-------------------------------------------------------------------- */
+.swiper-title {
+  display: flex;
+  align-items: center;
+  text-rendering: optimizeLegibility;
+  text-align: left;
+  line-height: 1.25;
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-bottom: .5rem;
+}
 .swp-caption-content {
   display: none;
   position: absolute; 
@@ -90,10 +102,8 @@
 
 /* Components
 -------------------------------------------------------------------- */
-
-/* Remove bullet and space from UL list */
 ul.swiper-wrapper {
-  list-style-type: none;
+  list-style-type: none;  /* temove bullet and space from UL list */
   margin: 0;
   padding: 0;
   position: relative;
@@ -101,9 +111,8 @@ ul.swiper-wrapper {
 
 /* Photoswipe Lightbox
 -------------------------------------------------------------------- */
-/* override zoom cursor */
 .pswp__img {
-  cursor: pointer !important;
+  cursor: pointer !important;  /* override zoom cursor */
 }
 
 /* Slides
@@ -143,17 +152,6 @@ ul.swiper-wrapper {
 /* Navigation
 -------------------------------------------------------------------------------- */
 
-/* Global vars
--------------------------------------------------------------------- */
-:root {
-  --swiper-navigation-size: 44px;
-  --swiper-navigation-top-offset: 50%;
-  --swiper-navigation-sides-offset: 10px;
-  --swiper-navigation-color: var(--swiper-theme-color);
-}
-
-/* Styles
--------------------------------------------------------------------- */
 .swiper-pagination-bullet {
   width: 25px !important;
   height: 25px !important;
@@ -207,23 +205,68 @@ ul.swiper-wrapper {
   transform: rotate(-90deg);
 }
 
-/* Text slider
+/* Text Swipers
 -------------------------------------------------------------------------------- */
-.swiper--text {
-  border-left: 3px solid #0072ff;
+
+/* BASE Text Swipers
+-------------------------------------------------------------------- */
+.swiper-text-base {
+  padding: 5px 0 5px 15px !important;
+  border-left: 5px solid var(--bs-primary);
 }
 
-.swiper-slide p {
-  margin-left: 15px;
-  text-align: left;
+.swiper-text-base .swiper-wrapper .swiper-slide p {
+  margin-bottom: 0px !important;
   font-size: 1.5rem;
-  font-weight: 400;    
+  font-weight: 400;   
+  text-align: left;
   color: var(--md-gray-700);
-  background-color: var(--md-gray-50);
+  background: var(--md-gray-50);
+  overflow-x: hidden;
 }
 
+/* PARALLAX Text Swipers
+-------------------------------------------------------------------- */
+
+/* jadams. 2025-02-25: configurable background image placed via /assets/data/swiper_app.html (styles) */
+/*
+.swiper-text-parallax {
+  width: 100%;
+  height: 100%;
+  padding: 75px 0 75px 0;
+  position: relative;
+  background: url(/assets/image/quote/default.jpg) 50% 0 repeat fixed;
+}
+/*
+
+/* jadams. 2025-02-25: placed via /assets/data/swiper_app.html (styles) if swiper.gridify enabled */
+/*
+.swiper-text-parallax:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(/assets/image/pattern/image/gridtile.png) repeat;
+}
+*/
+
+.swiper-text-parallax .swiper-wrapper .swiper-slide p {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); 
+  font-size: 1.5rem;
+  font-weight: 500;   
+  text-align: left;
+  color: rgba(255, 255, 255, .75);
+  overflow-x: hidden;
+}
+
+
 /* BS Multi-Slider
------------------------------------------------------------------------------- */
+-------------------------------------------------------------------------------- */
 .swiper--multi {
   height: 400px;
 }

data/assets/theme/j1/modules/swiperjs/css/theme/uno.min.css

@@ -0,0 +1,17 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/css/theme/uno.min.css
+ # Provides SwiperJS v11.2.0 (January, 2025) CSS styles for theme Uno
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2023-2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+:root{--swiper-theme-color:var(--bs-primary);--swiper-preloader-color:var(--swiper-theme-color);--swiper-wrapper-transition-timing-function:initial}:root{--swiper-pagination-color:var(--swiper-theme-color);--swiper-pagination-left:auto;--swiper-pagination-right:8px;--swiper-pagination-bottom:8px;--swiper-pagination-top:auto;--swiper-pagination-fraction-color:inherit;--swiper-pagination-progressbar-bg-color:rgba(0,0,0,0.25);--swiper-pagination-progressbar-size:4px;--swiper-pagination-bullet-size:8px;--swiper-pagination-bullet-width:8px;--swiper-pagination-bullet-height:8px;--swiper-pagination-bullet-border-radius:50%;--swiper-pagination-bullet-inactive-color:#000;--swiper-pagination-bullet-inactive-opacity:.5;--swiper-pagination-bullet-opacity:1;--swiper-pagination-bullet-horizontal-gap:4px;--swiper-pagination-bullet-vertical-gap:6px}:root{--swiper-scrollbar-border-radius:10px;--swiper-scrollbar-top:auto;--swiper-scrollbar-bottom:4px;--swiper-scrollbar-left:auto;--swiper-scrollbar-right:4px;--swiper-scrollbar-sides-offset:1%;--swiper-scrollbar-bg-color:rgba(0,0,0,0.1);--swiper-scrollbar-drag-bg-color:rgba(0,0,0,0.5);--swiper-scrollbar-size:4px}.swiper-title{display:flex;align-items:center;text-rendering:optimizeLegibility;text-align:left;line-height:1.25;font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.swp-caption-content{display:none;position:absolute;bottom:0;left:0;width:100%;padding:10px;background:rgba(0,0,0,0.5);color:#fff;font-size:14px;font-weight:400;text-align:left}.swiper-slide:hover .swp-caption-content{display:block}ul.swiper-wrapper{list-style-type:none;margin:0;padding:0;position:relative}.pswp__img{cursor:pointer !important}.swiper-slide{text-align:center;font-size:18px;background:#fff;display:flex;justify-content:center;align-items:center;background-size:cover;background-position:center}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,20px) !important;right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,20px) !important;left:auto}:root{--swiper-navigation-size:44px;--swiper-navigation-top-offset:50%;--swiper-navigation-sides-offset:10px;--swiper-navigation-color:var(--swiper-theme-color)}.swiper-pagination-bullet{width:25px !important;height:25px !important;text-align:center;line-height:25px;font-size:14px;font-weight:400;color:var(--bs-black) !important;opacity:.6 !important;background:rgba(0,0,0,0.3) !important}.swiper-pagination-bullet-active{color:var(--bs-white) !important;background:var(--swiper-theme-color) !important;opacity:1 !important}.autoplay-progress{position:absolute;right:16px;bottom:16px;z-index:10;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-weight:bold;color:var(--swiper-theme-color)}.autoplay-progress svg{--progress:0;position:absolute;left:0;top:0;z-index:10;width:100%;height:100%;stroke-width:4px;stroke:var(--swiper-theme-color);fill:none;stroke-dashoffset:calc(125.6px *(1 - var(--progress)));stroke-dasharray:125.6;transform:rotate(-90deg)}.swiper-text-base{padding:5px 0 5px 15px !important;border-left:5px solid var(--bs-primary)}.swiper-text-base .swiper-wrapper .swiper-slide p{margin-bottom:0 !important;font-size:1.5rem;font-weight:400;text-align:left;color:var(--md-gray-700);background:var(--md-gray-50);overflow-x:hidden}.swiper-text-parallax .swiper-wrapper .swiper-slide p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;font-weight:500;text-align:left;color:rgba(255,255,255,.75);overflow-x:hidden}.swiper--multi{height:400px}