@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/theme/_bgcolor-blocks-layout.scss

@@ -17,7 +17,7 @@
   & > strong,
   & > em,
   & > figcaption,
-  & > a:not(.item),
+  & > a,
   & > blockquote,
   & > h2,
   & > h3,
@@ -25,16 +25,6 @@
     color: var(--theme-foreground-color);
   }
 
-  :not(.teaser-item)
-    > a:not(.item):not(
-      :has(> .teaser-item),
-      :has(> .listing-body),
-      :has(> .card-container)
-    ) {
-    color: var(--link-foreground-color, --theme-foreground-color);
-    text-decoration: underline;
-  }
-
   &:first-child:has(> .documentFirstHeading) {
     padding-top: 0;
   }
@@ -407,6 +397,14 @@
   }
 }
 
+// Banner block, if next block has different bgcolor it snaps to the bottom
+#page-document
+  .blocks-group-wrapper:has(
+    :last-child.banner.next--has--different--backgroundColor
+  ) {
+  padding-bottom: 0;
+}
+
 // Color map
 @mixin use-theme-colors() {
   #page-document {
@@ -439,7 +437,8 @@
     &.__button {
       & > .button.container,
       & > .block-inner-container {
-        & button {
+        & button,
+        a {
           border-color: var(--theme-foreground-color);
           background-color: var(--theme-color);
 
@@ -451,6 +450,10 @@
             border-color: var(--theme-foreground-color);
             background-color: var(--theme-foreground-color);
             color: var(--theme-color);
+
+            &::after {
+              background-color: var(--theme-color);
+            }
           }
         }
       }
@@ -494,7 +497,8 @@
     &.listing,
     &.search,
     &.rssBlock {
-      h2.headline {
+      h2.headline,
+      h2.block-title {
         color: var(--theme-foreground-color);
       }
 
@@ -505,40 +509,26 @@
       .listing-item {
         border-bottom-color: var(--theme-foreground-color) !important;
 
-        a > .listing-body {
-          .headline,
-          h3,
-          h2,
-          a,
-          p,
-          span {
-            color: var(--theme-foreground-color);
-          }
+        .headline,
+        h3,
+        h2,
+        a,
+        p,
+        span {
+          color: var(--theme-foreground-color);
         }
 
         .head-title span,
         .head-title {
           color: var(--theme-foreground-color);
         }
-
-        .card-container {
-          background-color: var(--theme-high-contrast-color);
-
-          .content,
-          .content p {
-            color: var(--theme-foreground-color);
-          }
-        }
       }
-      /* I have removed the .card-container className that's why I have to write this css
-       * I will remove all the .card-container className from repo.
-      */
       &.grid .card,
       & .grid-variation .card {
         background-color: var(--theme-high-contrast-color);
 
-        .content,
-        .content p {
+        .card-summary,
+        .card-summary p {
           color: var(--theme-foreground-color);
         }
       }
@@ -1122,19 +1112,28 @@
     }
   }
 
-  table.ui.table.slate-table-block {
-    border-color: var(--theme-low-contrast-foreground-color);
+  table.ui.celled.table.slate-table-block {
+    border-color: color-mix(
+      in srgb,
+      var(--theme-color) 75%,
+      var(--theme-foreground-color)
+    );
 
     tr td,
     th {
-      border-color: var(--theme-low-contrast-foreground-color);
+      border-color: color-mix(
+        in srgb,
+        var(--theme-color) 75%,
+        var(--theme-foreground-color)
+      );
     }
 
     th {
       background-color: var(--theme-high-contrast-color) !important;
+      color: var(--theme-low-contrast-foreground-color);
 
-      p {
-        color: var(--theme-low-contrast-foreground-color) !important;
+      * {
+        color: inherit;
       }
     }
 
@@ -1269,12 +1268,15 @@
             color: var(--header-foreground);
           }
         }
+        .language-selector a {
+          color: var(--header-foreground);
+        }
       }
 
       // Navigation
       nav.navigation {
-        button.item {
-          color: var(--header-foreground);
+        .item {
+          color: var(--header-foreground, var(--primary-foreground-color));
         }
         .submenu-wrapper {
           .submenu.active {
@@ -1329,7 +1331,7 @@
 
           & > button:not(:hover, :active, :focus) {
             svg path {
-              fill: var(--secondary-foreground-color);
+              fill: var(--search-foreground);
             }
           }
         }
@@ -1426,12 +1428,12 @@
     }
 
     a.section {
-      color: var(--link-foreground-color, --breadcrumbs-foreground);
+      color: var(--breadcrumbs-foreground, --link-foreground-color);
     }
 
     a.home {
       svg {
-        fill: var(--link-foreground-color, --breadcrumbs-foreground) !important;
+        fill: var(--breadcrumbs-foreground, --link-foreground-color) !important;
       }
     }
   }

package/src/theme/_content.scss

@@ -1,3 +1,12 @@
+@mixin day-with-head-title-separator {
+  .day:has(+ .head-title) {
+    &::after {
+      margin-left: 8px;
+      content: '|';
+    }
+  }
+}
+
 .ui.basic.segment.content-area {
   // We cancel the padding and margin from the segment
   // allowing the content elements to be the ones that push for
@@ -18,6 +27,8 @@
   #page-document .dates {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
+    @include day-with-head-title-separator();
+
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
     color: var(--primary-foreground-color);
@@ -27,13 +38,6 @@
       text-transform: uppercase;
     }
 
-    .head-title:has(+ .day) {
-      &::after {
-        margin-left: 8px;
-        content: '|';
-      }
-    }
-
     @container (max-width: #{$tablet-breakpoint} ) {
       .day,
       .head-title {
@@ -91,6 +95,7 @@
     }
   }
   .dates {
+    @include day-with-head-title-separator();
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
     color: var(--primary-foreground-color);
@@ -103,12 +108,6 @@
       letter-spacing: 1px;
       text-transform: uppercase;
     }
-    .head-title {
-      &::after {
-        margin-left: 8px;
-        content: '|';
-      }
-    }
     @container (max-width: #{$tablet-breakpoint} ) {
       .day,
       .head-title {

package/src/theme/_export_import.scss

@@ -0,0 +1,94 @@
+#page-controlpanel-content-transfer .container {
+  .grid-container {
+    @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
+    padding-top: $spacing-medium;
+    padding-bottom: $spacing-large;
+    gap: $spacing-small;
+    grid-template-columns: 1fr 1fr;
+
+    @container (max-width: #{$computer-breakpoint}) {
+      grid-template-columns: 1fr;
+    }
+    .grid-column {
+      position: relative;
+      display: flex;
+      height: 250px;
+      flex-wrap: wrap;
+      padding: $spacing-small;
+      border: 1px solid var(--primary-foreground-color);
+      gap: $spacing-small;
+
+      h2 {
+        width: 100%;
+        margin: 0;
+        @include text-heading-h3();
+      }
+
+      & > span {
+        position: absolute;
+        top: $spacing-small;
+        right: $spacing-small;
+
+        svg {
+          width: auto;
+          height: 30px;
+        }
+      }
+
+      .file-input-wrapper {
+        position: relative;
+        margin-top: auto;
+
+        .file-input-name {
+          position: absolute;
+          bottom: 100%;
+          left: 0;
+          margin-bottom: $spacing-small;
+          font-size: 18px;
+          font-weight: 300;
+          line-height: 24px;
+          white-space: nowrap;
+        }
+      }
+
+      button {
+        align-self: end;
+        padding: 8px 20px;
+        border: 1px solid var(--primary-foreground-color);
+        border-radius: unset;
+        margin: 0;
+        background: none;
+        color: var(--primary-foreground-color);
+        cursor: pointer;
+        text-decoration: none;
+
+        @include body-text-bold();
+
+        &:hover,
+        &:active,
+        &:focus {
+          border-color: var(--primary-foreground-color);
+          background-color: var(--primary-foreground-color);
+          color: var(--primary-color);
+        }
+
+        &[data-disabled='true'],
+        &[data-disabled='true']:hover {
+          border-color: color-mix(
+            in srgb,
+            var(--primary-color) 50%,
+            var(--primary-foreground-color)
+          );
+          background-color: var(--primary-color);
+          color: color-mix(
+            in srgb,
+            var(--primary-color) 50%,
+            var(--primary-foreground-color)
+          );
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}