alchemy_cms 8.3.10 → 8.4.0

data/app/stylesheets/alchemy/admin/_tom-select.scss

@@ -1,10 +1,18 @@
 // Theme for the Tom Select powered `<select is="alchemy-select">`.
 @use "../mixins";
+@use "icons";
 
 .tomselected {
   display: none;
 }
 
+// Inside the admin the generic text input styles size the search input. The
+// standalone stylesheets lack them, leaving Tom Select's `size="1"` input a few
+// pixels wide. Zero specificity, so every admin rule sizing the input still wins.
+:where(.ts-wrapper.alchemy_selectbox .ts-control) > input {
+  width: 100%;
+}
+
 .ts-wrapper.alchemy_selectbox {
   position: relative;
   width: 100%;
@@ -30,23 +38,33 @@
 
   &.single {
     &.input-active {
-      .ts-control input {
-        position: absolute;
-        background-color: rgb(
-          from var(--form-field-background-color) r g b / 33%
-        );
-
-        transition: none;
+      .ts-control {
+        .remote-select--media,
+        .remote-select--icon {
+          opacity: 0.25;
+          transition: opacity var(--transition-duration);
+        }
 
-        &.has-value {
+        input {
           position: absolute;
-          background-color: var(--form-field-background-color);
+          background-color: rgb(
+            from var(--form-field-background-color) r g b / 50%
+          );
+          backdrop-filter: grayscale(100%);
+          height: 20px; // Need to be as large as the media of the selected item in order to cover it while searching.
+          transition: background-color;
+
+          &.has-value {
+            position: absolute;
+            background-color: var(--form-field-background-color);
+          }
         }
       }
     }
   }
 
   .ts-control {
+    --item-height: 21px;
     --input-max-width: calc(100% - var(--spacing-4));
     align-items: center;
     background: var(--select-background-color);
@@ -60,10 +78,24 @@
     font-size: var(--form-field-font-size);
     border-radius: var(--border-radius_medium);
     cursor: pointer;
+    position: relative;
+
+    // Loading spinner, revealed while the wrapper carries the `loading` class.
+    // Sized by the control's font size so it stays subtle.
+    sl-spinner {
+      display: none;
+      position: absolute;
+      right: var(--spacing-2);
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 1em;
+      --indicator-color: var(--text-color-muted);
+      --track-color: transparent;
+    }
 
     > .item {
       margin: 0;
-      line-height: 21px;
+      line-height: var(--item-height);
       max-width: 90%;
       overflow-x: hidden;
       text-overflow: ellipsis;
@@ -118,6 +150,17 @@
     }
   }
 
+  &.loading {
+    .ts-control sl-spinner {
+      display: inline-flex;
+    }
+
+    // Hide the dropdown arrow so the spinner shows in its place.
+    &.single .ts-control::after {
+      visibility: hidden;
+    }
+  }
+
   &.focus .ts-control {
     @include mixins.default-focus-style(
       $box-shadow: 0 0 0 1px var(--focus-color)
@@ -134,11 +177,13 @@
   &.multi {
     .ts-control {
       --input-max-width: 100%;
+      display: flex;
+      flex-wrap: wrap;
       height: auto;
       padding: var(--spacing-0);
 
       > input {
-        padding: 5px 6px;
+        padding: 4px 6px;
         margin: 0;
         width: auto;
         min-width: 7rem;
@@ -147,7 +192,7 @@
       > .item {
         display: inline-flex;
         align-items: center;
-        gap: var(--spacing-0);
+        gap: var(--spacing-1);
         margin: var(--spacing-0);
         padding: 0 var(--spacing-1);
         color: var(--text-color);
@@ -158,10 +203,18 @@
         white-space: normal;
 
         .remove {
+          appearance: none;
+          border: none;
+          background: none;
+          box-shadow: none;
+          cursor: pointer;
+          font: inherit;
           display: inline-flex;
           align-items: center;
           align-self: start;
-          padding: 0 var(--spacing-0);
+          height: var(--item-height);
+          margin: 0;
+          padding: 0;
           color: var(--icon-color);
           text-decoration: none;
 
@@ -173,7 +226,7 @@
 
       > .clear-button {
         position: absolute;
-        top: 5.5px;
+        top: 4.5px;
         right: var(--spacing-1);
       }
 
@@ -196,6 +249,7 @@
     box-shadow: none;
     margin: 0 0 0 auto;
     padding: var(--spacing-1);
+    width: var(--spacing-5);
   }
 }
 
@@ -231,18 +285,53 @@
     cursor: pointer;
     min-height: 2.75em;
 
-    .highlight {
+    .highlight,
+    em {
+      // The remote selects wrap the matched term in <em>; render it like the
+      // built-in .highlight of the other selects — underlined, not italic.
+      font-style: normal;
       text-decoration: underline;
     }
 
+    // Tom Select marks the current selection as .active when the dropdown
+    // opens, but that highlight follows the mouse away from it. Declared
+    // before .active so hovering the selection still shows the hover color.
+    &.selected {
+      background: var(--select-selected-bg-color);
+      box-shadow: inset 3px 0 0 var(--select-selected-marker-color);
+      font-weight: var(--font-weight_semibold);
+    }
+
     &.active {
       background: var(--select-hover-bg-color, var(--color-blue_dark));
       color: var(--select-hover-text-color, var(--color-white));
     }
+
+    &.selected.active {
+      --select-selected-marker-color: var(--color-orange_dark);
+    }
+  }
+
+  .loading-results {
+    padding: var(--spacing-2);
+    color: var(--text-color-muted);
   }
 
   .no-results {
     padding: var(--spacing-2);
     color: var(--text-color-muted);
   }
+
+  .create {
+    padding: var(--spacing-2);
+    cursor: pointer;
+  }
+
+  // The virtual scroll plugin also tags these with the option class; keep them
+  // as muted, non-interactive messages.
+  .loading-more,
+  .no-more-results {
+    color: var(--text-color-muted);
+    cursor: default;
+  }
 }

data/app/stylesheets/alchemy/admin/archive.scss

@@ -8,18 +8,20 @@ alchemy-uploader {
 .resources-header {
   padding: 0 var(--spacing-2);
 
+  #main_content:has(.resources-table-wrapper) & {
+    padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-5);
+  }
+
   h2 {
     margin: var(--spacing-3) 0;
   }
 }
 
 .resources-table-wrapper {
-  padding-bottom: 60px;
-
-  &.with_tag_filter {
-    width: calc(100% - 235px);
-    overflow-x: auto;
-  }
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  padding: var(--spacing-2);
 }
 
 .selected_item_tools {
@@ -88,6 +90,14 @@ alchemy-uploader {
     }
   }
 
+  > a {
+    width: var(--picture-width, 100%);
+    height: var(--picture-height, 100%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .picture_name {
     position: absolute;
     width: 100%;
@@ -151,7 +161,8 @@ alchemy-uploader {
   }
 }
 
-#picture_archive {
+alchemy-picture-archive {
+  display: block;
   overflow: visible;
 }
 
@@ -263,9 +274,13 @@ div#library_sidebar {
   overflow-y: auto;
 
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-4);
-  height: calc(100% - var(--top-menu-height) - var(--pagination-height));
+  height: calc(100% - var(--top-menu-height));
   background-color: var(--sidebar-background-color);
 
+  #main_content:has(.pagination-wrapper) & {
+    height: calc(100% - var(--top-menu-height) - var(--pagination-height));
+  }
+
   h2 {
     margin-top: var(--spacing-4);
   }
@@ -309,6 +324,25 @@ div#library_sidebar {
       box-shadow: 0 0 4px 4px var(--border-color);
     }
   }
+
+  .assign_picture {
+    // Not `display: contents`. The tooltip needs a box to anchor on.
+    display: flex;
+
+    > button {
+      display: flex;
+      height: auto;
+      margin: 0;
+      padding: 0;
+      background: none;
+      border: 0;
+      box-shadow: none;
+
+      &:focus {
+        @include mixins.default-focus-style;
+      }
+    }
+  }
 }
 
 #overlay_file_list {
@@ -332,13 +366,24 @@ div#library_sidebar {
     margin: 0;
     padding: var(--spacing-1) 0;
 
-    a {
+    .assign_file > button {
       @extend %text-overflow;
       display: flex;
       justify-content: space-between;
-      line-height: 25px;
-      text-decoration: none;
+      width: 100%;
+      height: auto;
+      margin: 0;
       padding: var(--spacing-1) var(--spacing-2);
+      background: none;
+      border: 0;
+      box-shadow: none;
+      color: inherit;
+      font: inherit;
+      line-height: 25px;
+
+      &:focus {
+        @include mixins.default-focus-style;
+      }
     }
 
     alchemy-icon {

data/app/stylesheets/alchemy/admin/base.scss

@@ -92,14 +92,13 @@ hr {
 }
 
 .panel {
-  width: 80%;
   max-width: 500px;
-  margin: 2em auto;
+  margin: auto;
   padding: var(--spacing-4);
   background: var(--panel-background-color);
-  border-radius: var(--border-radius_medium);
-  border: var(--border-default);
-  border-color: var(--panel-border-color);
+  border-radius: var(--border-radius_large);
+  border: 1px solid var(--panel-border-color);
+  box-shadow: var(--panel-box-shadow);
 }
 
 .float_right {

data/app/stylesheets/alchemy/admin/buttons.scss

@@ -4,7 +4,7 @@
 button,
 input[type="submit"],
 a.button,
-input.button {
+alchemy-uploader .button {
   position: relative;
   @include mixins.button-defaults;
 
@@ -48,6 +48,17 @@ input.button {
       fill: currentColor;
     }
   }
+
+  &.ghost {
+    background-color: transparent;
+    border-color: var(--button-ghost-border-color), var(--text-color);
+    color: var(--button-ghost-text-color, var(--text-color));
+
+    &:hover:not([disabled]):not(.disabled) {
+      border-color: var(--button-ghost-hover-color, var(--text-link-color));
+      color: var(--button-ghost-hover-color, var(--text-link-color));
+    }
+  }
 }
 
 .icon_button {

data/app/stylesheets/alchemy/admin/dashboard.scss

@@ -13,10 +13,6 @@
     flex: 1 1 50%;
     padding: var(--spacing-4) var(--spacing-3) var(--spacing-4);
 
-    @media (min-width: vars.$medium-screen-break-point) {
-      grid-column: span 2;
-    }
-
     @media (min-width: vars.$large-screen-break-point) {
       grid-column: span 2;
     }
@@ -47,6 +43,44 @@
     padding: var(--spacing-2);
     gap: var(--spacing-4);
     align-items: stretch;
+
+    .widget.stat {
+      // Allow the card to shrink to its grid track instead of expanding the
+      // column to fit the carousel's content width.
+      min-width: 0;
+
+      @media (min-width: vars.$medium-screen-break-point) {
+        --col-span: 2;
+      }
+
+      @media (min-width: vars.$large-screen-break-point) {
+        --col-span: 1;
+      }
+
+      // Fixed news header above the scrollable posts.
+      .name {
+        padding: var(--spacing-4);
+        color: var(--text-color);
+      }
+
+      // Fill the card and clip the image to the rounded corners.
+      // Scoped under .widget.stat to override the stat padding.
+      .widget-body {
+        position: relative;
+        flex: 1;
+        gap: 0;
+        padding: 0;
+        overflow: hidden;
+        border-radius: var(--border-radius_large);
+      }
+    }
+
+    // Fill the card height so the news reader can span it
+    turbo-frame {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
   }
 
   footer {
@@ -162,10 +196,6 @@
       }
 
       @media (min-width: vars.$large-screen-break-point) {
-        flex-direction: row;
-      }
-
-      @media (min-width: vars.$xxlarge-screen-break-point) {
         grid-column: 4;
       }
     }
@@ -180,6 +210,7 @@
         width: var(--icon-size, var(--icon-size-md));
         height: var(--icon-size, var(--icon-size-md));
         flex-shrink: 0;
+        color: var(--icon-color);
       }
     }
   }
@@ -243,6 +274,104 @@
       background-attachment: local, local, scroll, scroll;
     }
 
+    .news-reader {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .news-reader--track {
+      display: flex;
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .news-reader--item {
+      flex: 0 0 100%;
+      min-width: 0;
+      padding: 0 var(--spacing-4);
+      color: var(--text-color);
+      scroll-snap-align: start;
+    }
+
+    .news-reader--content {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      min-width: 0;
+    }
+
+    .news-reader--image-link {
+      flex: 0 0 72px;
+      height: 72px;
+      overflow: hidden;
+      border-radius: var(--border-radius_medium);
+    }
+
+    .news-reader--image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .news-reader--body {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--spacing-1);
+      min-width: 0;
+    }
+
+    .news-reader--title {
+      color: inherit;
+      font-weight: var(--font-weight_bold);
+    }
+
+    .news-reader--meta {
+      margin: 0;
+      font-size: var(--font-size_small);
+      color: var(--text-color-muted);
+    }
+
+    .news-reader--summary {
+      margin: 0;
+      color: var(--text-color-muted);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .news-reader--dots {
+      display: flex;
+      justify-content: center;
+      gap: var(--spacing-2);
+      margin-top: auto;
+      padding: var(--spacing-3);
+    }
+
+    .news-reader--dot {
+      width: 8px;
+      height: 8px;
+      padding: 0;
+      border: 0 none;
+      border-radius: 50%;
+      cursor: pointer;
+      background-color: var(--text-color-muted);
+      opacity: 0.5;
+
+      &.is-active {
+        background-color: var(--text-color);
+        opacity: 1;
+      }
+    }
+
     h2 {
       padding: var(--spacing-2);
       margin-bottom: 0;
@@ -393,12 +522,6 @@
     gap: 0.5rem;
     align-items: center;
 
-    @media (min-width: vars.$large-screen-break-point) {
-      flex-basis: 50%;
-      align-items: start;
-      padding-left: var(--spacing-4);
-    }
-
     .version {
       font-weight: var(--font-weight_bold);
     }
@@ -410,6 +533,12 @@
       --icon-size: var(--icon-size-sm);
       font-size: var(--font-size_small);
     }
+
+    .license {
+      --icon-gap: var(--spacing-1);
+      --icon-size: var(--icon-size-sm);
+      font-size: var(--font-size_small);
+    }
   }
 
   .logo {
@@ -417,15 +546,10 @@
     flex: 1 1 100%;
     justify-content: center;
 
-    @media (min-width: vars.$large-screen-break-point) {
-      flex-basis: 50%;
-      padding-right: var(--spacing-4);
-    }
-
     > svg {
       width: auto;
       max-width: 100%;
-      height: 60px;
+      height: 55px;
     }
   }
 }
@@ -471,3 +595,9 @@ ul.shortcuts {
     margin: 1em 0;
   }
 }
+
+.license-text {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}

data/app/stylesheets/alchemy/admin/dialogs.scss

@@ -1,7 +1,7 @@
 @use "../mixins";
 
-.alchemy-image-overlay-container,
-.alchemy-dialog-container {
+dialog.alchemy-image-overlay-container,
+dialog.alchemy-dialog-container {
   position: fixed;
   overflow: auto;
   top: 0;
@@ -9,22 +9,30 @@
   z-index: 100;
   width: 100%;
   height: 100%;
-  text-align: center;
-  white-space: nowrap;
+  // Override the native <dialog> max-width/height (which cap it below the
+  // viewport) so the full-screen container really fills the viewport.
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  // Center the dialog box in both axes. `safe` keeps an oversized dialog
+  // scrollable from the top instead of clipping it. Flexbox is used instead of
+  // a text-align/vertical-align trick so the centering does not inherit into
+  // content appended to the container (dropdowns, confirm dialogs).
+  display: flex;
+  align-items: safe center;
+  justify-content: safe center;
   opacity: 0;
   transform: scale(0.98);
   transition-property: transform, opacity;
   transition-duration: var(--dialog-transition-duration);
   transition-timing-function: ease-in;
 
-  // vertical aligment
-  &:before {
-    content: "";
-    width: 0;
-    height: 100%;
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: -0.25em;
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0);
+    transition: background-color var(--dialog-transition-duration) linear;
   }
 
   &.open {
@@ -33,39 +41,17 @@
   }
 }
 
-.alchemy-image-overlay,
-.alchemy-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 30;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
-  transition: background-color var(--dialog-transition-duration) linear;
-
-  &.closable {
-    cursor: pointer;
-  }
-}
-
-.alchemy-dialog-overlay {
-  &.open {
-    background-color: var(--dialog-overlay-color);
-  }
+.alchemy-dialog-container.open::backdrop {
+  background-color: var(--dialog-overlay-color);
 }
 
 .alchemy-dialog,
 .alchemy-image-overlay-dialog {
   position: relative;
   max-width: calc(100vw - var(--spacing-4));
-  display: inline-block;
-  vertical-align: middle;
-  text-align: left;
 }
 
 .alchemy-dialog {
-  white-space: normal;
   margin: var(--spacing-2);
   @include mixins.border-top-radius(var(--border-radius_medium));
   box-shadow: var(--dialog-box-shadow);
@@ -75,6 +61,11 @@
   div#jscropper {
     padding: var(--spacing-2);
 
+    // The cropper wraps its image and buttons but should not affect layout.
+    alchemy-image-cropper {
+      display: contents;
+    }
+
     .thumbnail_background {
       width: 800px;
       height: 600px;