@geotrekce/geotrek-rando-widget 0.5.2 → 0.5.3

package/dist/collection/components/grw-trek-detail/grw-trek-detail.css

@@ -499,6 +499,66 @@ button.swiper-pagination-bullet {
   display: none;
 }
 
+: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-scrollbar {
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  position: relative;
+  -ms-touch-action: none;
+  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
+}
+.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
+  display: none !important;
+}
+.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
+  position: absolute;
+  left: var(--swiper-scrollbar-sides-offset, 1%);
+  bottom: var(--swiper-scrollbar-bottom, 4px);
+  top: var(--swiper-scrollbar-top, auto);
+  z-index: 50;
+  height: var(--swiper-scrollbar-size, 4px);
+  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+}
+.swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical {
+  position: absolute;
+  left: var(--swiper-scrollbar-left, auto);
+  right: var(--swiper-scrollbar-right, 4px);
+  top: var(--swiper-scrollbar-sides-offset, 1%);
+  z-index: 50;
+  width: var(--swiper-scrollbar-size, 4px);
+  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+}
+
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  left: 0;
+  top: 0;
+}
+
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+
+.swiper-scrollbar-lock {
+  display: none;
+}
+
 .swiper {
   z-index: 0;
 }
@@ -599,7 +659,7 @@ grw-trek-detail {
   overflow-y: auto;
 }
 .trek-detail-container .name {
-  color: var(--color-on-surface);
+  color: var(--color-primary-app);
   font-size: 32px;
   line-height: 28px;
   font-weight: 600;
@@ -620,35 +680,37 @@ grw-trek-detail {
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
+  gap: 16px;
 }
-.trek-detail-container .sub-container .icons-labels-container .row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-.trek-detail-container .sub-container .icons-labels-container .row:not(:last-child) {
-  margin-bottom: 24px;
-}
-.trek-detail-container .sub-container .icons-labels-container .row .icon-label {
+.trek-detail-container .sub-container .icons-labels-container .icon-label {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: 33.3333333333%;
 }
-.trek-detail-container .sub-container .icons-labels-container .row .icon-label:nth-child(2) {
-  margin: 0px 8px;
-}
-.trek-detail-container .sub-container .icons-labels-container .row .icon-label img,
-.trek-detail-container .sub-container .icons-labels-container .row .icon-label span {
+.trek-detail-container .sub-container .icons-labels-container .icon-label img,
+.trek-detail-container .sub-container .icons-labels-container .icon-label span {
   font-size: 24px;
   width: 24px;
   height: auto;
+  color: var(--color-primary-app);
   margin-right: 8px;
 }
-.trek-detail-container .sub-container .icons-labels-container .row .practice img {
+.trek-detail-container .sub-container .icons-labels-container .icon-label .network:not(:last-child) {
+  margin-right: 16px;
+}
+.trek-detail-container .sub-container .icons-labels-container .practice img {
   background-color: var(--color-primary-app);
 }
+.trek-detail-container .sub-container .icons-labels-container .network {
+  display: flex;
+  align-items: center;
+}
+.trek-detail-container .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
 .trek-detail-container .downloads-container {
   padding: 0px 24px 0px 24px;
   display: flex;
@@ -726,12 +788,12 @@ grw-trek-detail {
 .trek-detail-container .public-transport-container,
 .trek-detail-container .advice-container,
 .trek-detail-container .advised-parking-container,
-.trek-detail-container .gear-container,
 .trek-detail-container .sensitive-areas-container,
 .trek-detail-container .source-container,
 .trek-detail-container .accessibilities-container,
 .trek-detail-container .parent-trek-container,
-.trek-detail-container .weather-container {
+.trek-detail-container .weather-container,
+.trek-detail-container .weblinks-container {
   padding: 0px 24px 0px 24px;
 }
 .trek-detail-container .ambiance,
@@ -742,7 +804,6 @@ grw-trek-detail {
 .trek-detail-container .public-transport-container,
 .trek-detail-container .advice-container,
 .trek-detail-container .advised-parking-container,
-.trek-detail-container .gear-container,
 .trek-detail-container .sensitive-areas-container,
 .trek-detail-container .information-desks-container,
 .trek-detail-container .pois-container,
@@ -752,7 +813,8 @@ grw-trek-detail {
 .trek-detail-container .parent-trek-container,
 .trek-detail-container .step-container,
 .trek-detail-container .touristic-content-container,
-.trek-detail-container .touristic-event-container {
+.trek-detail-container .touristic-event-container,
+.trek-detail-container .weblinks-container {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
@@ -765,7 +827,6 @@ grw-trek-detail {
 .trek-detail-container .public-transport-container a,
 .trek-detail-container .advice-container a,
 .trek-detail-container .advised-parking-container a,
-.trek-detail-container .gear-container a,
 .trek-detail-container .sensitive-areas-container a,
 .trek-detail-container .information-desks-container a,
 .trek-detail-container .pois-container a,
@@ -775,7 +836,8 @@ grw-trek-detail {
 .trek-detail-container .parent-trek-container a,
 .trek-detail-container .step-container a,
 .trek-detail-container .touristic-content-container a,
-.trek-detail-container .touristic-event-container a {
+.trek-detail-container .touristic-event-container a,
+.trek-detail-container .weblinks-container a {
   color: var(--color-primary-app);
 }
 .trek-detail-container .description-teaser {
@@ -789,7 +851,6 @@ grw-trek-detail {
 .trek-detail-container .public-transport-title,
 .trek-detail-container .advice-title,
 .trek-detail-container .advised-parking-title,
-.trek-detail-container .gear-title,
 .trek-detail-container .sensitive-areas-title,
 .trek-detail-container .information-desks-title,
 .trek-detail-container .pois-title,
@@ -798,20 +859,26 @@ grw-trek-detail {
 .trek-detail-container .step-title,
 .trek-detail-container .parent-trek-title,
 .trek-detail-container .touristic-content-title,
-.trek-detail-container .touristic-event-title {
+.trek-detail-container .touristic-event-title,
+.trek-detail-container .weblinks-title {
   color: var(--color-on-surface);
   font-size: 22px;
   line-height: 28px;
   font-weight: 400;
   font-weight: bold;
 }
+.trek-detail-container .access {
+  margin-bottom: 16px;
+}
+.trek-detail-container .advised-parking-title {
+  font-size: 16px;
+}
 .trek-detail-container .description-title,
 .trek-detail-container .altimetric-profile-title,
 .trek-detail-container .access-title,
 .trek-detail-container .public-transport-title,
 .trek-detail-container .advice-title,
 .trek-detail-container .advised-parking-title,
-.trek-detail-container .gear-title,
 .trek-detail-container .sensitive-areas-title,
 .trek-detail-container .information-desks-title,
 .trek-detail-container .pois-title,
@@ -819,7 +886,8 @@ grw-trek-detail {
 .trek-detail-container .accessibilities-title,
 .trek-detail-container .parent-trek-title,
 .trek-detail-container .touristic-content-title,
-.trek-detail-container .touristic-event-title {
+.trek-detail-container .touristic-event-title,
+.trek-detail-container .weblinks-title {
   margin-bottom: 16px;
 }
 .trek-detail-container .step-title {
@@ -850,6 +918,30 @@ grw-trek-detail {
 .trek-detail-container .parent-trek-title div {
   margin-right: 4px;
 }
+.trek-detail-container .accessibility-emergency-number-content a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  border-radius: var(--border-radius, 40px);
+  background-color: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+  text-decoration: none;
+  font-weight: 600;
+  width: fit-content;
+  padding: 8px 16px;
+  box-shadow: var(--elevation-1);
+  height: 32px;
+  gap: 8px;
+  box-sizing: border-box;
+  text-align: start;
+  vertical-align: middle;
+  position: relative;
+  font-family: var(--font-family);
+}
+.trek-detail-container .accessibility-emergency-number-content a:hover {
+  box-shadow: var(--elevation-2);
+}
 
 .description-container .description ol {
   position: relative;
@@ -884,7 +976,7 @@ grw-trek-detail {
   width: 24px;
   height: 24px;
   background: #f04141;
-  border-radius: var(--border-radius, 12px);
+  border-radius: 12px;
   font-weight: bold;
   font-size: 0.8em;
   color: white;
@@ -892,23 +984,27 @@ grw-trek-detail {
   top: calc(50% - 12px);
 }
 
-.current-advice-container {
+.current-advice-container,
+.gear-container {
   display: flex;
   padding: 12px;
   border: 2px solid var(--color-outline);
   border-radius: var(--border-radius, 12px);
+  font-size: 16px;
+  margin-bottom: 12px;
 }
-.current-advice-container span {
+.current-advice-container .material-symbols,
+.gear-container .material-symbols {
   font-size: 24px;
   width: 26px;
   margin-right: 8px;
 }
 
 .label-container {
-  margin-top: 12px;
   padding: 12px;
   border: 2px solid var(--color-outline);
   border-radius: var(--border-radius, 12px);
+  margin-bottom: 12px;
 }
 .label-container .label-sub-container {
   display: flex;
@@ -917,12 +1013,13 @@ grw-trek-detail {
 .label-container .label-sub-container img {
   width: 26px;
   margin-right: 16px;
+  background-color: var(--color-on-surface);
 }
 .label-container .label-sub-container .label-name {
   color: var(--color-on-surface);
   font-size: 16px;
   line-height: 24px;
-  font-weight: 500;
+  font-weight: 600;
   padding: 12px 0px;
 }
 .label-container .label-advice {
@@ -932,6 +1029,10 @@ grw-trek-detail {
   font-weight: 500;
 }
 
+.advice-container div:last-child {
+  margin-bottom: 0px;
+}
+
 .source-container .source-sub-container {
   display: flex;
   align-items: center;
@@ -948,6 +1049,20 @@ grw-trek-detail {
   padding: 12px 0px;
 }
 
+.weblinks-container .weblink-container {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+  padding: 12px 0px;
+}
+.weblinks-container .weblink-container img {
+  width: 26px;
+  margin-right: 16px;
+}
+
 .departure-container,
 .arrival-container,
 .cities-container {
@@ -989,7 +1104,8 @@ grw-trek-detail {
 .accessibilities-container .accessibility-signage-title,
 .accessibilities-container .accessibility-covering-title,
 .accessibilities-container .accessibility-exposure-title,
-.accessibilities-container .accessibility-advice-title {
+.accessibilities-container .accessibility-advice-title,
+.accessibilities-container .accessibility-emergency-number-title {
   color: var(--color-on-surface);
   font-size: 22px;
   line-height: 28px;
@@ -997,7 +1113,7 @@ grw-trek-detail {
   padding: 12px 0px;
 }
 
-.weather-container #weather-widget {
+.weather-container iframe {
   width: 100%;
 }
 
@@ -1008,6 +1124,7 @@ grw-trek-detail {
 .swiper-touristic-event {
   padding-right: 32px;
   padding-left: 32px;
+  padding-bottom: 20px;
 }
 
 .swiper-step {
@@ -1067,4 +1184,21 @@ grw-trek-detail {
   display: flex;
   max-width: 100%;
   max-height: 400px;
+}
+
+.descent span {
+  transform: rotateX(180deg);
+}
+
+.swiper-horizontal > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-horizontal {
+  --swiper-scrollbar-sides-offset: 32px;
+}
+
+.swiper-scrollbar-drag {
+  background-color: var(--color-primary-app);
+}
+
+.sensitive-areas-description {
+  font-size: 16px;
 }