@eeacms/volto-clms-theme 1.0.91 → 1.0.94

package/CHANGELOG.md

@@ -4,8 +4,41 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.94](https://github.com/eea/volto-clms-theme/compare/1.0.93...1.0.94)
+
+- Ux improvements [`#258`](https://github.com/eea/volto-clms-theme/pull/258)
+- ESLint fix [`53791dc`](https://github.com/eea/volto-clms-theme/commit/53791dc776082a8569ed8a134fe38996f4be9ab2)
+- Layer opacity [`e8bc03f`](https://github.com/eea/volto-clms-theme/commit/e8bc03fa5034bd245210c89760dfd85534c61128)
+
+#### [1.0.93](https://github.com/eea/volto-clms-theme/compare/1.0.92...1.0.93)
+
+> 13 May 2022
+
+- Develop [`#257`](https://github.com/eea/volto-clms-theme/pull/257)
+- Bugs n improvements [`#256`](https://github.com/eea/volto-clms-theme/pull/256)
+- Measurement and opacity [`#255`](https://github.com/eea/volto-clms-theme/pull/255)
+- ESLint fix [`b03878a`](https://github.com/eea/volto-clms-theme/commit/b03878ac3cb67d1f020e02ab5d5fbdd33db0d2c1)
+- ESLint fix [`40dd5ba`](https://github.com/eea/volto-clms-theme/commit/40dd5ba6464b9400a4febded863347a07c94fbea)
+- Remove load movement [`217829b`](https://github.com/eea/volto-clms-theme/commit/217829bdd769fb74714e434351174c24973cacc9)
+
+#### [1.0.92](https://github.com/eea/volto-clms-theme/compare/1.0.91...1.0.92)
+
+> 29 April 2022
+
+- Develop [`#253`](https://github.com/eea/volto-clms-theme/pull/253)
+- Ux improvements [`#254`](https://github.com/eea/volto-clms-theme/pull/254)
+- Bugs n improvements [`#252`](https://github.com/eea/volto-clms-theme/pull/252)
+- Zoom tooltip [`3c41e14`](https://github.com/eea/volto-clms-theme/commit/3c41e14e4b631193408adb741c440805ca5cc0df)
+- ESLint fix [`1f3ead1`](https://github.com/eea/volto-clms-theme/commit/1f3ead111747613580ab5e637fc40eae46b39364)
+- Download card icons [`5bc506d`](https://github.com/eea/volto-clms-theme/commit/5bc506d9251068962ff3e3641017f854b37666f3)
+- Card work [`d169ff4`](https://github.com/eea/volto-clms-theme/commit/d169ff40e8d3c2fce56af6aa09677c0ba924407a)
+- UX improvements [`72769b4`](https://github.com/eea/volto-clms-theme/commit/72769b4e0b2327b7c35cec435b2a3311a9ccee3f)
+
 #### [1.0.91](https://github.com/eea/volto-clms-theme/compare/1.0.90...1.0.91)
 
+> 4 April 2022
+
+- add extra information for correct rendering to TechnicalLibraries at … [`#251`](https://github.com/eea/volto-clms-theme/pull/251)
 - add extra information for correct rendering to TechnicalLibraries at DataSet view [`ac8578e`](https://github.com/eea/volto-clms-theme/commit/ac8578eeff8eeb3cff9944394937a52062d7caf1)
 
 #### [1.0.90](https://github.com/eea/volto-clms-theme/compare/1.0.89...1.0.90)

package/Jenkinsfile

@@ -185,10 +185,10 @@ pipeline {
             unstash "xunit-reports"
             unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
-            def nodeJS = tool 'NodeJS11';
+            def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.91",
+  "version": "1.0.94",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingWorkOpportunities.jsx

@@ -30,9 +30,11 @@ const CclWorkOpportunity = (props) => {
           <br />
         </>
       )}
-      <div className="card-work-number">
-        <span className="card-work-number-title">
-          <h2>{item.title}</h2>
+      <div class="card-work-line">
+        <h2>{item.title}</h2>
+      </div>
+      <div className="card-work-line">
+        <span className="card-work-title">
           {item['@type'] === 'WorkOpportunity'
             ? intl.formatMessage(messages.ReferenceNo)
             : intl.formatMessage(messages.ProcurementNo)}
@@ -43,11 +45,11 @@ const CclWorkOpportunity = (props) => {
           item.procurement_no
         )}
       </div>
-      <div className="card-work-title">
+      <div className="card-work-line">
         <p>{item.description}</p>
       </div>
-      <div className="work-opportunities-deadline">
-        <span className="card-work-deadline-title">
+      <div className="card-work-line">
+        <span className="card-work-title">
           {intl.formatMessage(messages.SubmissionDeadline)}
         </span>
         {new Date(item.submission_deadline).toLocaleString()}

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -11,8 +11,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Icon } from '@plone/volto/components';
 import React from 'react';
-import alertSVG from '@plone/volto/icons/alert.svg';
+import pauseSVG from '@plone/volto/icons/pause.svg';
 import errorSVG from '@plone/volto/icons/error.svg';
+import warningSVG from '@plone/volto/icons/warning.svg';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import packSVG from '@plone/volto/icons/pack.svg';
 import removeSVG from '@plone/volto/icons/delete.svg';
@@ -74,7 +75,21 @@ const FileCard = (props) => {
         {/* {10 - daysDiff > -1 && ( */}
         <Grid.Row>
           <Grid.Column verticalAlign="middle" textAlign="center" width={2}>
-            {['In_progress', 'Queued'].includes(item?.Status) && (
+            {item?.Status === 'Queued' && (
+              <Popup
+                content="Queued"
+                size="small"
+                trigger={
+                  <Icon
+                    name={pauseSVG}
+                    size={50}
+                    color="#a0b128"
+                    title={'Queued'}
+                  />
+                }
+              />
+            )}
+            {item?.Status === 'In_progress' && (
               <Popup
                 content="Preparing download files"
                 size="small"
@@ -103,7 +118,7 @@ const FileCard = (props) => {
                   <Icon
                     name={blockSVG}
                     size={50}
-                    color="#90956e"
+                    color="#a0b128"
                     title={'Cancelled'}
                   />
                 }
@@ -115,9 +130,9 @@ const FileCard = (props) => {
                 size="small"
                 trigger={
                   <Icon
-                    name={errorSVG}
+                    name={warningSVG}
                     size={50}
-                    color="#e40166"
+                    color="#faa73e"
                     title={'Finished with errors'}
                   />
                 }
@@ -129,7 +144,7 @@ const FileCard = (props) => {
                 size="small"
                 trigger={
                   <Icon
-                    name={alertSVG}
+                    name={errorSVG}
                     size={50}
                     color="#e40166"
                     title={'Rejected download'}

package/src/components/CclCard/cards.less

@@ -119,8 +119,15 @@
 }
 
 .card-block .card-description {
+  display: -webkit-box;
+  overflow: hidden;
+  height: calc(8 * 1.5rem);
   margin-bottom: 1rem;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 8;
+  text-overflow: ellipsis;
 }
+
 @media (min-width: 768px) {
   .card-block {
     width: calc(50% - 0.5rem);
@@ -336,6 +343,11 @@
   font-size: 1rem;
 }
 
+.card-event svg {
+  width: 1rem;
+  margin-right: 0.5rem;
+}
+
 /* Documents */
 .card-doc {
   padding: 1rem;
@@ -381,37 +393,15 @@
   margin-bottom: 1rem;
 }
 
-.card-work-number {
-  margin-bottom: 1rem;
-}
-
-.card-work-number-title,
-.card-work-deadline-title {
-  margin-right: 0.25rem;
-  font-weight: bold;
-}
-
-/* Work opportunities */
-.card-work {
-  padding: 2rem;
-  background: #a0b1280f;
-}
-
-.card-work:not(:last-of-type) {
-  margin-bottom: 1rem;
-}
-
-.card-work-number {
+.card-work-line:not(:last-of-type) {
   margin-bottom: 1rem;
 }
 
-.card-work-number-title,
-.card-work-deadline-title {
+.card-work-title {
   margin-right: 0.25rem;
   font-weight: bold;
 }
 
-.card-event svg {
-  width: 1rem;
-  margin-right: 0.5rem;
+.card-work-line h2 {
+  margin-top: 0 !important;
 }

package/src/components/CclLoginModal/CclLoginModal.jsx

@@ -35,12 +35,12 @@ function CclLoginModal() {
   return (
     <CclModal
       trigger={
-        <div className="header-login-link">
+        <span className="header-login-link">
           <FormattedMessage
             id="loginRegister"
             defaultMessage="Register/Login"
           />
-        </div>
+        </span>
       }
       size="tiny"
       modalStatus={modalStatus}

package/src/customizations/volto/components/theme/Logout/Logout.jsx

@@ -52,7 +52,7 @@ class CclLogout extends Component {
   render() {
     return (
       <div id="page-document" className="ui container">
-        <h1 className="page-title">{'LOG OUT'}</h1>
+        <h1 className="page-title">{'Log out'}</h1>
         <div className="event-detail">
           <div className="event-detail-content">
             <p>{'You have logged out correctly'}</p>

package/theme/clms/css/forms.css

@@ -32,10 +32,19 @@
 }
 
 .ccl-button[disabled] {
-  border-color: #adb0b8;
-  color: #adb0b8;
+  border-color: #a0b128;
+  color: #a0b128;
+  cursor: not-allowed;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.ccl-button.ccl-button-green[disabled] {
+  border-color: #a0b128;
+  background-color: #a0b128;
+  color: white;
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 0.3;
   pointer-events: none;
 }
 

package/theme/clms/css/header.css

@@ -631,9 +631,8 @@
 
 .ccl-header .ccl-header-tools .ccl-header-menu-tools li {
   padding: 0 0.5rem;
-  margin: 0;
+  margin: auto 0;
   font-size: 1rem;
-  line-height: 2.2rem;
   white-space: nowrap;
 }
 

package/theme/clms/css/maps.css

@@ -34,6 +34,7 @@
 	height: 36px;
 	border: none !important;
 	background-color: #a0b128cc;
+	overflow: visible;
 	box-shadow: none !important;
 	color: white;
 	font-size: 18px;
@@ -55,16 +56,15 @@
 	cursor: auto;
 }
 
+.esri-widget--button.active-widget {
+	background: #212529;
+}
+
 .land .basemap-container {
 	display: flex;
 	box-shadow: none !important;
 }
 
-.land .esri-basemap-gallery {
-	display: none;
-	margin: 0 !important;
-}
-
 .land .esri-basemap-gallery__item:first-child {
 	margin-top: 0;
 }
@@ -96,10 +96,6 @@
 	flex-direction: column;
 }
 
-.land .measurement-panel {
-	display: none;
-}
-
 .land .measurement-buttons {
 	display: flex;
 	justify-content: space-evenly;
@@ -153,10 +149,6 @@
 	box-shadow: none !important;
 }
 
-.land .esri-print {
-	display: none;
-}
-
 .land .esri-print__layout-tab {
 	font-size: 1rem;
 }
@@ -179,13 +171,6 @@
 	box-shadow: none !important;
 }
 
-.land .area-panel {
-	display: none;
-	padding: 1rem;
-	background-color: white;
-	font-size: 1rem;
-}
-
 .land .area-panel .ccl-form-group:not(:first-of-type) {
 	margin-top: 0.5rem;
 }
@@ -522,10 +507,6 @@
 	margin-top: 0.5rem;
 }
 
-.land .legend-panel {
-	display: none;
-}
-
 .land .legend-container {
 	display: flex;
 	box-shadow: none !important;

package/theme/clms/css/maps.less

@@ -36,6 +36,7 @@
     height: 36px;
     border: none !important;
     background-color: #a0b128cc;
+    overflow: visible;
     box-shadow: none !important;
     color: white;
     font-size: 18px;
@@ -57,17 +58,16 @@
     cursor: auto;
   }
 
+  .esri-widget--button.active-widget {
+    background: #212529;
+  }
+
   /* Basemap */
   .basemap-container {
     display: flex;
     box-shadow: none !important;
   }
 
-  .esri-basemap-gallery {
-    display: none;
-    margin: 0 !important;
-  }
-
   .esri-basemap-gallery__item:first-child {
     margin-top: 0;
   }
@@ -76,7 +76,9 @@
     margin: 0;
   }
 
-  .esri-basemap-gallery__item--selected, .esri-basemap-gallery__item.esri-basemap-gallery__item--selected:hover, .esri-basemap-gallery__item.esri-basemap-gallery__item--selected:focus {
+  .esri-basemap-gallery__item--selected,
+  .esri-basemap-gallery__item.esri-basemap-gallery__item--selected:hover,
+  .esri-basemap-gallery__item.esri-basemap-gallery__item--selected:focus {
     border-left-color: #7c8921;
     background-color: #a0b1280f;
   }
@@ -97,6 +99,60 @@
   }
 
   /* Measure */
+  .measurement-panel {
+    margin-top: -1rem;
+  }
+
+  .measurement-dropdown .ccl-expandable__button {
+    position: relative;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+    padding: 1rem 0;
+    border-bottom: 1px solid #a0b12833;
+    background-color: white;
+    color: #212529;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-decoration: none;
+  }
+
+  .measurement-dropdown .ccl-expandable__button .dropdown-icon {
+    margin-left: auto;
+    color: #a0b128;
+  }
+
+  .measurement-dropdown
+    .ccl-expandable__button[aria-expanded='true']
+    .dropdown-icon {
+    transform: rotate(-180deg);
+  }
+
+  .measurement-dropdown .ccl-expandable__button[aria-expanded='false'] + * {
+    display: none;
+  }
+
+  .measurement-dropdown .ccl-expandable__button[aria-expanded='true'] + * {
+    display: block;
+  }
+
+  .measurement-dropdown .map-menu-icon {
+    margin-right: 1rem;
+    margin-left: 0 !important;
+    font-size: 1.25rem;
+  }
+
+  .esri-area-measurement-2d,
+  .esri-distance-measurement-2d {
+    border-bottom: solid 1px #a0b12833;
+  }
+
+  .measurement-dropdown-container .esri-area-measurement-2d__measurement,
+  .measurement-dropdown-container .esri-distance-measurement-2d__measurement {
+    background: white;
+  }
+
   .measurement-container {
     display: flex;
     box-shadow: none !important;
@@ -107,10 +163,6 @@
     flex-direction: column;
   }
 
-  .measurement-panel {
-    display: none;
-  }
-
   .measurement-buttons {
     display: flex;
     justify-content: space-evenly;
@@ -165,10 +217,6 @@
     box-shadow: none !important;
   }
 
-  .esri-print {
-    display: none;
-  }
-
   .esri-print__layout-tab {
     font-size: 1rem;
   }
@@ -192,13 +240,6 @@
     box-shadow: none !important;
   }
 
-  .area-panel {
-    display: none;
-    padding: 1rem;
-    background-color: white;
-    font-size: 1rem;
-  }
-
   .area-panel .ccl-form-group:not(:first-of-type) {
     margin-top: 0.5rem;
   }
@@ -270,26 +311,17 @@
     line-height: inherit;
   }
 
-  .map-menu .ccl-expandable__button::after {
-    font-family: 'ccl-icons';
-  }
-
-  .map-menu .ccl-expandable__button[aria-expanded='true']::after {
-    content: '\e914';
-    transform: rotate(-180deg);
-    -webkit-transition: transform 0.3s ease-out;
-    transition: transform 0.3s ease-out;
-  }
-
   .map-menu .panels {
     width: 100%;
-    height: 440px;
+    height: 450px;
     padding: 0;
     background: #ffffff;
+    overflow-x: hidden;
     overflow-y: auto;
   }
 
   .map-menu .panel {
+    position: relative;
     display: none;
     animation: fadein 0.8s;
   }
@@ -312,11 +344,10 @@
     position: relative;
     display: -webkit-flex;
     display: flex;
-    align-items: center;
-    padding: 0.5rem 0;
-    padding-right: 2.5rem;
+    padding: 1rem;
+    padding-left: 1rem;
     border: none;
-    margin: 0.5rem 0;
+    border-bottom: solid 1px #a0b12833;
     background-color: white;
     color: #212529;
     cursor: pointer;
@@ -325,39 +356,31 @@
     text-decoration: none;
   }
 
-  .map-menu-dropdown .ccl-expandable__button::after {
-    position: absolute;
-    right: 0;
-    font-family: 'ccl-icons';
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    -webkit-transition: all 0.3s ease-in-out;
-    transition: all 0.3s ease-in-out;
+  .map-menu-dropdown .ccl-expandable__button:hover {
+    background-color: #a0b1280d;
   }
 
-  .map-menu-dropdown .ccl-expandable__button[aria-expanded='false']::after {
-    content: '\e914';
+  .map-menu-dropdown .ccl-expandable__button .dropdown-icon {
+    margin-right: 1rem;
+    color: #a0b128;
+  }
+
+  .map-menu-dropdown
+    .ccl-expandable__button[aria-expanded='false']
+    .dropdown-icon {
     transform: rotate(0deg);
     -webkit-transition: transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
   }
 
-  .map-menu-dropdown .ccl-expandable__button[aria-expanded='true']::after {
-    content: '\e914';
-    transform: rotate(-180deg);
+  .map-menu-dropdown
+    .ccl-expandable__button[aria-expanded='true']
+    .dropdown-icon {
+    transform: rotate(90deg);
     -webkit-transition: transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
   }
 
-  .map-menu-dropdown .ccl-expandable__button::after {
-    margin-right: 0;
-    color: #a0b128;
-  }
-
-  .map-menu-dropdown .ccl-expandable__button:hover::after {
-    color: #7c8921;
-  }
-
   .map-menu-dropdown .ccl-expandable__button[aria-expanded='false'] + * {
     display: none;
   }
@@ -370,27 +393,16 @@
     margin-bottom: 0;
   }
 
-  .map-menu-dropdown,
-  .map-menu-product-dropdown {
-    margin: 0 1rem;
-  }
-
   .map-menu-product-dropdown .ccl-expandable__button {
-    margin-top: 0;
-  }
-
-  .map-menu-dropdown .map-menu-products-container {
-    padding-right: 0 !important;
-    background-color: white;
+    padding-left: 2.5rem;
   }
 
-  .map-menu-dropdown .ccl-expandable__button + .ccl-form {
-    padding: 0 1rem 0 1rem;
+  .map-menu-dataset-dropdown .ccl-expandable__button {
+    padding-left: 4rem;
   }
 
   .map-menu-dropdown .ccl-form .ccl-form-group {
     display: flex;
-    align-items: center;
     margin-top: 0;
   }
 
@@ -401,16 +413,27 @@
     margin-bottom: 0.5rem;
   }
 
-  .map-menu-dataset > div:first-of-type {
-    display: flex;
+  .map-menu-dataset-dropdown .map-dataset-checkbox {
     width: 100%;
-    justify-content: flex-start;
+  }
+
+  .map-menu-dataset-dropdown .map-dataset-checkbox > .ccl-form-group {
+    justify-content: space-between;
   }
 
   .map-menu-layers-container {
     width: 100%;
-    margin-top: 0.5rem;
-    margin-left: 1rem;
+  }
+
+  .map-menu-layer {
+    padding: 1rem;
+    padding-left: 7rem;
+    border-bottom: solid 1px #a0b12833;
+    margin-top: 0 !important;
+  }
+
+  .map-menu-layer:hover {
+    background-color: #a0b1280d;
   }
 
   .map-menu-icons {
@@ -419,7 +442,7 @@
   }
 
   .map-menu-icon {
-    margin-left: 0.5rem;
+    margin-left: 1rem;
     color: #a0b128;
     cursor: pointer;
     font-size: 1rem;
@@ -430,14 +453,6 @@
     color: #7c8921;
   }
 
-  .map-menu-product-dropdown {
-    margin-right: 0;
-  }
-
-  .map-menu-product-dropdown .map-product-checkbox {
-    background-color: white;
-  }
-
   #active_panel .no-active-datasets {
     display: block;
     margin: 1rem;
@@ -539,28 +554,55 @@
   }
 
   /* Legend*/
-  .legend-panel {
-    display: none;
-  }
-
   .legend-container {
     display: flex;
     box-shadow: none !important;
   }
 
+  .esri-legend .esri-legend__service {
+    border-bottom: solid 1px #a0b12833;
+  }
+
   /* Info widget */
   .info-table tr:nth-child(even) {
     background-color: #a0b1280f;
   }
-  
+
   .info-table tr:nth-child(odd) {
     background-color: #a0b12833;
   }
 
   /* Login */
-  .map-login-block {
+  .login-panel {
+    position: absolute;
     display: none;
-    margin: 1rem;
+    padding: 1rem;
+    background: white;
+    box-shadow: 0px 0px 4px 0px #dadada;
+  }
+
+  .login-panel .login-block {
+    width: 100%;
+    margin: 0;
+    background: none;
+    float: none;
+    font-size: 0.85rem;
+  }
+
+  #login_close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.5rem;
+    color: #a0b128;
+    cursor: pointer;
+  }
+
+  .map-menu-icon-login .fa-lock {
+    position: absolute;
+    top: 1.75rem;
+    right: 0.75rem;
+    font-size: 0.85rem;
   }
 
   .map-area-block {
@@ -598,6 +640,142 @@
   }
 
   .esri-time-slider .esri-slider__segment--interactive {
-    background-color: #a0b128 ;
+    background-color: #a0b128;
+  }
+
+  .esri-time-slider .esri-slider__segment {
+    background: #c5c5c5;
+  }
+
+  #timeslider_close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+    margin: 0.5rem;
+    color: #a0b128;
+    cursor: pointer;
+  }
+
+  .timeslider-panel + #timeslider_close {
+    display: block;
+  }
+
+  /* Opacity */
+  .opacity-panel {
+    position: absolute;
+    display: none;
+    width: 200px;
+    padding: 1rem;
+    background: white;
+    box-shadow: 0px 0px 4px 0px #dadada;
+  }
+
+  #opacity_close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.5rem;
+    color: #a0b128;
+    cursor: pointer;
+  }
+
+  .opacity-title {
+    color: #273b4b;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .opacity-label {
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .opacity-label.left {
+    float: left;
+  }
+
+  .opacity-label.right {
+    float: right;
+  }
+
+  input[type='range'] {
+    width: 100%;
+    height: 4px;
+    -webkit-appearance: none;
+    background: #c5c5c5;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    width: 16px;
+    height: 16px;
+    border: solid 3px #a0b128;
+    -webkit-appearance: none;
+    background: white;
+    border-radius: 50%;
+    cursor: grab;
+    transition: all 0.3s ease-in-out;
+  }
+
+  input[type='range']::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border: solid 3px #a0b128;
+    -webkit-appearance: none;
+    background: white;
+    border-radius: 50%;
+    cursor: grab;
+    transition: all 0.3s ease-in-out;
+  }
+
+  input[type='range']::-ms-thumb {
+    width: 16px;
+    height: 16px;
+    border: solid 3px #a0b128;
+    -webkit-appearance: none;
+    background: white;
+    border-radius: 50%;
+    cursor: grab;
+    transition: all 0.3s ease-in-out;
+  }
+
+  input[type='range']::-webkit-slider-thumb:hover {
+    border-color: #7c8921;
+    transform: scale(1.2);
+  }
+
+  input[type='range']::-moz-range-thumb:hover {
+    border-color: #7c8921;
+    transform: scale(1.2);
+  }
+
+  input[type='range']::-ms-thumb:hover {
+    border-color: #7c8921;
+    transform: scale(1.2);
+  }
+
+  input[type='range']::-webkit-slider-runnable-track {
+    border: none;
+    -webkit-appearance: none;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  input[type='range']::-moz-range-track {
+    border: none;
+    -webkit-appearance: none;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  input[type='range']::-ms-track {
+    border: none;
+    -webkit-appearance: none;
+    background: transparent;
+    box-shadow: none;
   }
 }

package/theme/clms/css/menu.css

@@ -297,6 +297,10 @@
   display: flex;
 }
 
+.filters-title svg {
+  height: 20px;
+}
+
 .filters-element select:focus-visible, .filters-element select:focus {
   outline: none;
 }
@@ -410,7 +414,6 @@
   display: flex;
   justify-content: flex-end;
   overflow: auto;
-  background-color: rgba(33,37,41,.5019607843137255);
 }
 
 .modal-filters-container {

package/theme/clms/css/styles.less

@@ -1121,6 +1121,10 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
   color: #273b4b;
 }
 
+div.ui.container {
+  transition: none;
+}
+
 /* div.map-container.land {
   div#page-document.ui.container & {
     width: calc(100vmax - (100vmax - 100%)) !important;