alchemy_cms 8.2.7 → 8.3.1

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

@@ -14,10 +14,6 @@ form {
     padding: 0;
   }
 
-  &.edit_page textarea {
-    height: 67px;
-  }
-
   .control-label {
     @include mixins.form-label;
   }
@@ -29,37 +25,27 @@ form {
   }
 
   .input {
+    display: grid;
+    grid-template-columns: var(--form-left-column-width) minmax(
+        0,
+        var(--form-right-column-width)
+      );
+    align-items: baseline;
+    gap: 0 var(--spacing-2);
     padding: var(--spacing-1) 0;
-    @include mixins.clearfix;
-
-    input[type="url"],
-    input[type="number"],
-    input[type="text"],
-    input[type="email"],
-    input[type="password"],
-    textarea,
-    select,
-    .select2-container,
-    .autocomplete_tag_list,
-    .tinymce_container {
-      width: var(--form-right-column-width);
-      float: right;
-    }
 
     textarea {
       padding-top: 7px;
+      height: 6rem;
     }
 
-    .input > select,
-    .input > .select2-container {
-      width: 100%;
+    .input-row {
+      margin: 0;
     }
 
-    > .autocomplete_tag_list {
-      .select2-container,
-      .select2-choices {
-        width: 100%;
-      }
+    .select2-container,
+    .select2-choices {
+      width: 100%;
     }
 
     ::-webkit-input-placeholder {
@@ -68,39 +54,46 @@ form {
 
     select,
     .select2-container {
-      margin: var(--spacing-1) 0;
+      margin: var(--form-field-margin);
+    }
+
+    &:has(.select2-container:not(.select2-container-multi)) {
+      .control-label {
+        align-self: center;
+      }
     }
 
     &.boolean {
-      margin-left: var(--form-left-column-width);
+      height: var(--form-field-height);
+
+      input,
+      label {
+        grid-column: 2;
+        grid-row: 1;
+        width: max-content;
+        align-self: center;
+        margin: var(--form-field-margin);
+      }
 
       input {
-        margin: 0;
-        margin-right: var(--spacing-0);
-        margin-left: 1px;
-        vertical-align: middle;
+        margin-left: var(--spacing-0);
       }
 
       label {
-        width: 100%;
-        text-align: left;
-        padding: 0;
-        margin: 0;
-        float: none;
-        margin-left: var(--spacing-1);
-        vertical-align: middle;
+        margin-left: var(--spacing-6);
       }
     }
 
     label.checkbox {
       display: flex;
-      align-items: center;
+      align-items: baseline;
       gap: var(--spacing-1);
-      margin: var(--spacing-0) 0 var(--spacing-2);
+      margin: var(--spacing-1) 0;
+      width: max-content;
 
       input {
-        margin-right: var(--spacing-0);
-        margin-left: 1px;
+        align-self: center;
+        margin: 0 var(--spacing-0) 0 1px;
       }
     }
 
@@ -112,6 +105,25 @@ form {
       );
       text-align: left;
     }
+
+    &.tags {
+      .control-label {
+        align-self: start;
+        position: relative;
+        top: 0.95em;
+      }
+
+      .control_group {
+        gap: 0;
+      }
+    }
+
+    &.tinymce_container {
+      label {
+        position: relative;
+        top: calc(-1 * var(--spacing-1));
+      }
+    }
   }
 
   .field_with_errors {
@@ -146,9 +158,8 @@ form {
   small.error {
     color: var(--notice-error-text-color);
     display: block;
-    margin-left: var(--form-left-column-width);
     line-height: 1.5em;
-    clear: both;
+    grid-column: 2;
     text-align: right;
     margin-bottom: 0.25em;
   }
@@ -204,47 +215,34 @@ form {
   }
 
   .inline-input {
+    display: grid;
     align-items: center;
-    display: flex;
-    margin: 0 calc(-1 * var(--spacing-1));
+    grid-template-columns: var(--form-right-column-width) var(
+        --form-left-column-width
+      );
+    gap: var(--spacing-1);
 
     .left-column,
     .right-column {
-      padding: 0 var(--spacing-1);
-    }
-
-    .left-column {
-      width: var(--form-right-column-width);
-    }
-
-    .right-column {
-      width: var(--form-left-column-width);
+      min-width: 0;
     }
 
     button,
     .button,
-    input[type="url"],
-    input[type="text"],
-    input[type="email"],
-    input[type="submit"],
-    input[type="password"] {
+    input[type="submit"] {
       width: 100%;
     }
   }
 
   .control_group {
-    width: var(--form-right-column-width);
-    padding-top: var(--spacing-1);
-    float: right;
-  }
-
-  .check_boxes .control_group {
-    padding-top: 0.6em;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+    margin: var(--spacing-1) 0;
   }
 
   .input .hint {
     @include mixins.form-hint;
-    margin-left: var(--form-left-column-width);
 
     a[href] {
       color: var(--hint-text-link-color);
@@ -260,12 +258,46 @@ form {
   }
 
   .submit {
-    display: flex;
-    padding: var(--spacing-1) 0;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: var(--form-left-column-width) var(
+        --form-right-column-width
+      );
+    margin: var(--spacing-1) 0;
+    gap: 0 var(--spacing-2);
+
+    > button {
+      grid-column: 2;
+      grid-row: 1;
+      width: max-content;
 
-    > button:last-of-type {
-      margin-left: auto;
+      &:last-of-type {
+        margin-left: auto;
+      }
+    }
+
+    label.checkbox {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-0);
+      width: max-content;
+      grid-column: 2;
+      grid-row: 1;
+
+      input {
+        margin-left: var(--spacing-0);
+      }
+    }
+  }
+
+  &.full_width .submit {
+    grid-template-columns: 1fr 1fr;
+
+    button {
+      width: 100%;
+
+      &:first-of-type {
+        grid-column: 1;
+      }
     }
   }
 
@@ -277,31 +309,31 @@ form {
   }
 
   .input-column {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
     width: 50%;
-    padding: 0 var(--spacing-1);
 
-    input[type] {
-      float: none;
-      width: 100%;
+    > label {
+      display: inline-block;
+      margin-bottom: var(--spacing-1);
+      text-align: left;
     }
+
+    select,
+    .select2-container {
+      margin: var(--form-field-margin);
+    }
+  }
+
+  &.full_width .input-column {
+    width: 100%;
   }
 
   .input-row {
     display: flex;
-
-    .input-column {
-      &:first-of-type {
-        padding-left: 0;
-      }
-
-      &:last-of-type {
-        padding-right: 0;
-      }
-    }
+    gap: var(--spacing-2);
+    justify-content: space-between;
+    margin: var(--spacing-2) 0;
   }
 }
-
-.input-column > label {
-  display: block;
-  margin-top: calc(var(--spacing-1) + 1);
-}

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

@@ -2,6 +2,34 @@ alchemy-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--icon-size, var(--icon-size-md));
+  height: var(--icon-size, var(--icon-size-md));
+  opacity: 1;
+  transition: opacity var(--transition-duration) var(--transition-easing);
+
+  &:not(:defined) {
+    opacity: 0;
+  }
+
+  &[size="xs"] {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+  }
+
+  &[size="sm"] {
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+  }
+
+  &[size="1x"] {
+    width: var(--icon-size-1x);
+    height: var(--icon-size-1x);
+  }
+
+  &[size="xl"] {
+    width: var(--icon-size-xl);
+    height: var(--icon-size-xl);
+  }
 
   &.disabled {
     opacity: 0.3;

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

@@ -111,18 +111,38 @@
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-1);
   overflow: auto;
 
-  form .control-label {
-    text-align: left;
-  }
+  form {
+    .control-label {
+      display: block;
+      text-align: left;
+      line-height: var(--form-field-height);
+    }
 
-  form .input .hint {
-    margin-left: 0;
-  }
+    .input {
+      display: block;
+
+      alchemy-picture-description-select select {
+        margin: 0;
+      }
+
+      .hint {
+        margin-left: 0;
+      }
+
+      .select2-container {
+        width: 100%;
+      }
 
-  form .input .select2-container,
-  form .input input[type="text"],
-  form .input textarea {
-    width: 100%;
+      &.tags {
+        .control-label {
+          top: 0;
+        }
+
+        .select2-search-choice {
+          line-height: 12px;
+        }
+      }
+    }
   }
 }
 

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

@@ -7,7 +7,6 @@
   top: 0;
   margin-left: var(--main-menu-width);
   padding-right: var(--main-menu-width);
-  z-index: 20;
   width: 100%;
   height: var(--top-menu-height);
   @extend .disable-user-select;
@@ -308,3 +307,7 @@
     text-transform: uppercase;
   }
 }
+
+.alchemy-timezone-select {
+  width: 30px; // Reduce FOUC
+}

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

@@ -27,11 +27,9 @@
     font-size: var(--font-size_small);
   }
 
-  .submit {
-    gap: var(--spacing-2);
-
-    button {
-      width: 50%;
+  form {
+    label {
+      font-size: var(--font-size_small);
     }
   }
 }

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

@@ -4,8 +4,6 @@
 .resource-details {
   display: flex;
   gap: var(--spacing-5);
-  --form-left-column-width: 30%;
-  --form-right-column-width: 70%;
 
   > .resource-preview {
     flex-grow: 0;
@@ -29,10 +27,6 @@
     aside {
       width: 50%;
     }
-
-    .resource_info .value p {
-      --max-width: 287px;
-    }
   }
 }
 
@@ -49,15 +43,22 @@
 .resource_info {
   .value {
     position: relative;
-    @include mixins.clearfix;
+    display: grid;
+    grid-template-columns: var(--form-left-column-width) var(
+        --form-right-column-width
+      );
+    align-items: baseline;
+    gap: 0 var(--spacing-2);
 
     > label {
       @include mixins.form-label;
+
+      alchemy-icon {
+        vertical-align: middle;
+      }
     }
 
     > p {
-      float: right;
-      width: var(--form-right-column-width);
       margin: var(--form-field-margin);
       padding: var(--spacing-1) var(--spacing-2);
       line-height: 21px;
@@ -66,7 +67,7 @@
       border-radius: var(--border-radius_medium);
 
       &:not(.value-block) {
-        @include mixins.truncate(var(--form-right-column-width), $wrap: nowrap);
+        @include mixins.truncate(100%, $wrap: nowrap);
       }
 
       &.value-block {
@@ -81,7 +82,6 @@
       > p {
         white-space: nowrap;
         padding-right: var(--spacing-10);
-        max-width: var(--max-width, 328px);
       }
     }
   }
@@ -109,12 +109,6 @@
   &.file-infos .value {
     label {
       text-align: left;
-      width: 30%;
-    }
-
-    p {
-      max-width: 70%;
-      width: 70%;
     }
   }
 }

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

@@ -292,6 +292,14 @@ sl-dropdown {
     filter: drop-shadow(var(--dialog-box-shadow));
     border: 1px solid var(--border-color);
   }
+
+  // Until sl-dropdown upgrades it has no shadow DOM, so its default-slot panel
+  // (the .alchemy-popover) renders inline and visible; on definition Shoelace
+  // hides the panel, collapsing it and shifting the layout. Hide the panel
+  // content until defined — the [slot="trigger"] stays visible.
+  &:not(:defined) > :not([slot="trigger"]) {
+    display: none;
+  }
 }
 
 sl-tab-group {

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

@@ -247,6 +247,19 @@ alchemy-sitemap {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-1);
+
+  alchemy-icon {
+    position: relative;
+    top: 0.1ex;
+  }
+
+  .resource_info & {
+    align-items: baseline;
+
+    alchemy-icon {
+      top: 0.3ex;
+    }
+  }
 }
 
 #page_filter_result {

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

@@ -51,7 +51,7 @@ table {
   }
 
   &.icon {
-    width: 16px;
+    width: var(--spacing-6);
     text-align: center;
     background-color: transparent;
   }
@@ -132,6 +132,11 @@ th,
 
 td,
 .table .col {
+  &.button {
+    width: 40px;
+    text-align: center;
+  }
+
   &.file_name {
     white-space: nowrap;
   }
@@ -156,6 +161,10 @@ td,
     width: 150px;
   }
 
+  &.name {
+    width: 200px;
+  }
+
   &.email {
     width: 270px;
   }
@@ -172,17 +181,35 @@ td,
     width: 10%;
   }
 
-  &.url {
+  &.url,
+  &.url_path {
     width: 15%;
     white-space: nowrap;
   }
 
+  &.site_name {
+    width: 200px;
+  }
+
+  &.locale {
+    width: 60px;
+    text-align: center;
+  }
+
   &.status {
     width: 5%;
     white-space: nowrap;
 
     .page_status {
       margin: 0 var(--spacing-1);
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
     }
   }
 
@@ -204,8 +231,10 @@ td.count {
   padding-right: var(--spacing-4);
 }
 
+th.taggings_types,
 td.taggings_types {
-  width: 15%;
+  width: auto;
+  text-align: right;
 }
 
 .list .login_status {

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

@@ -128,14 +128,9 @@
       padding: var(--spacing-1) 22px;
       background-image: var(--tag-background-image);
       background-repeat: no-repeat;
-      background-position: 6px;
+      background-position: var(--spacing-1);
       background-color: var(--tag-background-color);
       background-size: 1rem;
-
-      > div {
-        position: relative;
-        top: -1px;
-      }
     }
   }
 }

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

@@ -5,7 +5,6 @@
   @extend %gradiated-toolbar;
   align-items: center;
   gap: var(--spacing-2);
-  z-index: 10;
   margin-right: 0px;
   position: relative;
 

data/app/stylesheets/alchemy/admin.scss

@@ -39,6 +39,7 @@
 @use "admin/spinner";
 @use "admin/tables";
 @use "admin/tags";
+@use "admin/tom-select";
 @use "admin/toolbar";
 @use "admin/typography";
 @use "admin/upload";

data/app/stylesheets/tinymce/skins/ui/alchemy/skin.scss

@@ -1943,10 +1943,6 @@ body.tox-dialog__disable-scroll {
   overflow: hidden;
 }
 
-.tox .tox-editor-header {
-  z-index: 1;
-}
-
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   box-shadow: none;
   transition: box-shadow 0.5s;

data/app/stylesheets/tinymce/skins/ui/alchemy-dark/skin.scss

@@ -1943,10 +1943,6 @@ body.tox-dialog__disable-scroll {
   overflow: hidden;
 }
 
-.tox .tox-editor-header {
-  z-index: 1;
-}
-
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   box-shadow: none;
   transition: box-shadow 0.5s;