@eeacms/volto-n2k 0.1.1

package/src/less/styles.less

@@ -0,0 +1,691 @@
+@import './globals.less';
+
+@lightGreen: #7ac943;
+@darkGreen: #3b7f02;
+
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: normal;
+  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 600;
+  src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 800;
+  src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'RajdhaniR';
+  font-weight: 400;
+  src: url('../fonts/Rajdhani-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'RajdhaniB';
+  font-weight: 600;
+  src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
+}
+
+/* Helpers classes */
+.w-100 {
+  width: 100%;
+}
+
+.w-90 {
+  width: 90%;
+}
+
+.w-80 {
+  width: 80%;
+}
+
+.w-70 {
+  width: 70%;
+}
+
+.w-60 {
+  width: 60%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.w-40 {
+  width: 40%;
+}
+
+.w-30 {
+  width: 30%;
+}
+
+.w-20 {
+  width: 20%;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.my-1 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.my-2 {
+  margin-top: 2rem !important;
+  margin-bottom: 2rem !important;
+}
+
+.ma-0 {
+  margin: 0 !important;
+}
+
+.font-weight-normal,
+.font-weight-normal h1,
+.font-weight-normal h2,
+.font-weight-normal h3,
+.font-weight-normal h4 {
+  font-weight: normal !important;
+}
+
+.font-weight-bold,
+.font-weight-bold h1,
+.font-weight-bold h2,
+.font-weight-bold h3,
+.font-weight-bold h4 {
+  font-weight: bold !important;
+}
+
+.tabs-block {
+  .columns-header {
+    display: none;
+  }
+}
+
+.tabs-block.carousel_n2k {
+  overflow: hidden;
+
+  .slick-arrows {
+    .learn-more {
+      position: absolute;
+      left: 0;
+      width: 130px;
+      color: #fff;
+      text-align: left;
+      transform: translate(-100%, 0);
+
+      @media only screen and (max-width: @largestMobileScreen + 53px) {
+        display: none;
+      }
+    }
+  }
+}
+
+body.grey-bg {
+  #view {
+    padding-bottom: 4rem;
+    background-color: #f8f8f8;
+  }
+}
+
+.ui.sticky {
+  z-index: 3 !important;
+}
+
+.natura2000-theme {
+  .styled-with-bg {
+    padding: 0 !important;
+  }
+
+  /* TEXT */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a,
+  span,
+  button {
+    font-family: OpenSans, 'Raleway', sans-serif;
+  }
+
+  h2 {
+    font-weight: 600;
+  }
+
+  p,
+  a {
+    font-size: 14px;
+  }
+
+  a {
+    color: @darkGreen;
+    font-weight: 600;
+
+    &:hover {
+      color: @lightGreen;
+    }
+  }
+
+  .light-links {
+    a {
+      color: @lightGreen;
+
+      &:hover {
+        color: @darkGreen;
+      }
+    }
+  }
+
+  .dark-links {
+    a {
+      color: @darkGreen;
+
+      &:hover {
+        color: @lightGreen;
+      }
+    }
+  }
+
+  .ui.basic.segment.content-area {
+    padding: 0;
+    margin: 0;
+  }
+
+  .ui.segment.sticky-header-wrapper {
+    padding: 0;
+    margin-bottom: 0;
+
+    > .ui.sticky {
+      background-color: rgba(255, 255, 255, 1);
+    }
+
+    > .ui.sticky:not(.fixed) {
+      position: relative;
+    }
+
+    > .ui.fixed.sticky {
+      backdrop-filter: blur(2px);
+      background-color: rgba(255, 255, 255, 0.8);
+
+      // @media only screen and (max-width: @largestMobileScreen) {
+      //   backdrop-filter: blur(0);
+      //   background-color: transparent;
+      // }
+    }
+
+    @media only screen and (max-width: @largestMobileScreen) {
+      &.sticky > div,
+      > div {
+        background-color: transparent;
+      }
+    }
+
+    .header-wrapper {
+      padding: 0;
+
+      .header {
+        .logo-nav-wrapper {
+          top: 0;
+
+          .tools-search-wrapper {
+            width: 100%;
+            margin-left: 0 !important;
+          }
+
+          .navigation {
+            width: 100%;
+            min-height: 50px;
+            align-items: center;
+            align-self: normal;
+            justify-content: flex-end;
+
+            .ui.secondary.pointing.menu {
+              top: 0;
+              width: 100%;
+              min-height: 50px;
+              flex-wrap: wrap;
+              justify-content: center;
+              padding: 4px 0;
+              margin-right: 0 !important;
+
+              > * {
+                align-self: center;
+              }
+
+              &.is-sticky {
+                justify-content: center;
+                padding: 0;
+              }
+
+              &:not(.is-sdf) {
+                justify-content: center;
+                padding: 4px 0;
+              }
+
+              &:not(.mobile.only) {
+                .item.firstLevel.at-glance {
+                  align-self: stretch;
+                  padding-bottom: 1.5rem !important;
+                  margin-bottom: -0.5rem;
+                  background: #04a87d 0% 0% no-repeat padding-box;
+                  border-radius: 0px 0px 10px 10px;
+                  color: #fff !important;
+                  cursor: pointer;
+
+                  &:hover {
+                    color: #fff !important;
+                  }
+                }
+              }
+
+              .home-button {
+                width: 56px !important;
+                height: 40px !important;
+                padding-right: 0 !important;
+                padding-left: 0 !important;
+                margin: 4px 0;
+
+                &.logo {
+                  img {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+              }
+
+              .item.firstLevel.at-glance {
+                color: #04a87d !important;
+                cursor: pointer;
+
+                &:hover {
+                  color: #04a87d !important;
+                }
+              }
+
+              .item.firstLevel.deep-dive {
+                color: #04a87d !important;
+                cursor: pointer;
+
+                &:hover {
+                  color: #04a87d !important;
+                }
+              }
+
+              &:not(.open) {
+                .home-button {
+                  position: absolute;
+                  top: 50%;
+                  left: -20px;
+                  padding: 0 !important;
+                  margin: 0;
+                  transform: translate(-100%, -50%);
+
+                  > a {
+                    display: flex;
+                  }
+                }
+
+                .language-selector-wrapper {
+                  position: absolute;
+                  top: 0;
+                  right: 0;
+                  margin: 4px 0;
+                  transform: translateX(100%) translateY(0);
+
+                  &:hover {
+                    background-color: transparent !important;
+                  }
+
+                  &::before {
+                    position: absolute;
+                    top: 4px;
+                    left: 50%;
+                    display: block !important;
+                    width: 6px;
+                    height: 6px;
+                    background-color: #3b7f02;
+                    border-radius: 100%;
+                    content: '';
+                    transform: translateX(-50%);
+                  }
+                }
+              }
+
+              &.open {
+                .hamburger-wrapper {
+                  position: absolute;
+                  z-index: 0;
+                  top: 1rem;
+                  right: 15px;
+                }
+
+                .home-button {
+                  &.logo {
+                    margin-top: 1rem;
+                    margin-bottom: 1rem;
+                    margin-left: 0.8rem;
+                  }
+                }
+              }
+
+              &.stackable.open {
+                top: 0 !important;
+                height: 100vh !important;
+                margin-top: 0;
+              }
+
+              .item {
+                position: relative;
+                color: @darkGreen;
+
+                &:not(.home-button) {
+                  padding-right: 0.8rem !important;
+                  padding-left: 0.8rem !important;
+                }
+
+                &:not(.active),
+                &:not(.menuActive) > a {
+                  color: @darkGreen;
+                }
+
+                &.firstLevel,
+                &.firstLevel > a {
+                  border: none;
+                  font-size: 1.15rem;
+                  font-weight: bold;
+
+                  &.language-selector-wrapper {
+                    .language-selector {
+                      margin-right: 0;
+
+                      .visible.menu {
+                        left: 50%;
+                        min-width: 70px !important;
+                        transform: translate(-50%, 0);
+                      }
+                    }
+                  }
+
+                  &:hover {
+                    color: @lightGreen !important;
+
+                    &.language-selector-wrapper {
+                      border-color: transparent !important;
+                    }
+
+                    > a {
+                      color: @darkGreen !important;
+                    }
+                  }
+                }
+
+                &.secondLevel {
+                  &:hover {
+                    background: initial !important;
+                    color: #3b7f02;
+                  }
+                }
+
+                &.active,
+                &.menuActive {
+                  color: #3b7f02;
+                }
+
+                &.active:not(.secondLevel):not(.thirdLevel),
+                &.menuActive:not(.secondLevel):not(.thirdLevel) {
+                  @media only screen and (min-width: 1655px) {
+                    &::before {
+                      position: absolute;
+                      top: 4px;
+                      left: 50%;
+                      display: block !important;
+                      width: 6px;
+                      height: 6px;
+                      background-color: #3b7f02;
+                      border-radius: 100%;
+                      content: '';
+                      transform: translateX(-50%);
+                    }
+                  }
+                }
+              }
+            }
+
+            .hamburger-wrapper {
+              height: 24px;
+              margin: 0.5rem 0;
+
+              button.hamburger {
+                padding: 0;
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .simple-data-table {
+    padding: 0;
+  }
+
+  .readmore-button {
+    color: #04a77d;
+  }
+}
+
+.back-to-top {
+  margin-top: 2em;
+  margin-bottom: 3rem;
+  color: #7b7b7b;
+  font-size: 14px;
+  font-weight: bold;
+
+  .ui.circular.button {
+    position: relative;
+    width: 3em;
+    height: 3em;
+    margin-bottom: 1.5rem;
+    background-color: #fff;
+    border-radius: 10em;
+    box-shadow: 0px 4px 9px -6px #000000;
+
+    &:hover {
+      box-shadow: 0px 4px 8px -4px #000000;
+    }
+
+    .icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: 0 !important;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+.indicator {
+  position: absolute;
+}
+
+img.slick-image {
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  left: -270px;
+  width: 500px;
+  opacity: 1;
+  pointer-events: none;
+  transition: opacity 0.5s;
+
+  &.hidden {
+    opacity: 0;
+    transition: opacity 0.5s;
+  }
+}
+
+.divider {
+  z-index: -1;
+  pointer-events: none;
+}
+
+.styled.protected-habitats
+  > .tabs-block.default
+  > .styled
+  > .tabs.default
+  > .ui.menu {
+  border-bottom: 2px solid #dadada;
+  margin-bottom: 1rem;
+  border-radius: 0;
+}
+
+.sdf-image {
+  height: 500px;
+
+  .block-image {
+    position: relative;
+    height: 100%;
+
+    .block.image {
+      position: relative;
+      height: 100%;
+
+      img {
+        /* Set up positioning */
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        /* Set up proportionate scaling */
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+
+        opacity: 1;
+        pointer-events: none;
+        transition: opacity 0.5s;
+      }
+    }
+  }
+}
+
+.block-editor-maps .block.maps .block.maps {
+  padding: 0.5rem;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  img.slick-image {
+    left: -200px;
+    width: 550px;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+  img.slick-image {
+    left: -200px;
+    width: 650px;
+  }
+}
+
+@media only screen and (min-width: @largeMonitorBreakpoint) {
+  img.slick-image {
+    left: -150px;
+    width: 650px;
+  }
+}
+
+.n2k-green-border {
+  .block.maps {
+    > div {
+      height: 100%;
+
+      > div {
+        display: flex;
+        height: 100%;
+      }
+    }
+
+    iframe {
+      height: 100% !important;
+      min-height: 500px !important;
+    }
+  }
+}
+
+.map-info-notice {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+
+  .ui.message {
+    margin-bottom: 0 !important;
+    background-color: transparent;
+    font-style: italic;
+  }
+
+  .ui.info.message {
+    margin-bottom: 1.5rem !important;
+  }
+}
+
+.protected-habitats {
+  .default.tabs {
+    .ui.menu {
+      border-bottom: none !important;
+      background-color: #04a87d;
+
+      .item {
+        padding: 1rem;
+        border-radius: 0;
+        color: #fff;
+
+        p {
+          font-size: 14px !important;
+        }
+
+        &.active:hover,
+        &:hover {
+          padding-bottom: calc(1rem - 3px);
+          border-bottom: 3px solid #fff;
+          color: #fff;
+        }
+
+        &.active {
+          padding-bottom: calc(1rem - 3px);
+          border-bottom: 3px solid #fff;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.smart-table .search-description {
+  margin-bottom: 2rem;
+  color: #6b6b6b;
+}
+
+.purple-background {
+  background-color: #a7adf2;
+}
+
+.dark-green-background {
+  background-color: #04a87d;
+}

package/src/less/variables.less

@@ -0,0 +1,2 @@
+@type: extra;
+@element: custom;