alchemy_cms 7.2.6 → 7.3.0

data/app/assets/stylesheets/alchemy/{selects.scss → admin/selects.scss}

@@ -5,25 +5,27 @@ select {
     $background-color: $form-field-background-color,
     $hover-color: $form-field-background-color,
     $hover-border-color: darken($default-border-color, 10%),
-    $padding: $default-padding 26px $default-padding 2 * $default-padding,
+    $padding: var(--spacing-1) 26px var(--spacing-1) var(--spacing-2),
     $border: 1px solid $default-border-color,
     $box-shadow: none,
     $color: $form-field-text-color,
     $margin: 0
   );
-  height: $form-field-height;
-  max-width: 100%;
-  width: auto;
-  font-weight: normal;
-  vertical-align: middle;
-
-  background-image: var(
-    --select-background-image,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$icon-color}' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E")
-  );
-  background-position: right 0.75em center;
-  background-repeat: no-repeat;
-  background-size: 1em;
+
+  & {
+    height: $form-field-height;
+    max-width: 100%;
+    width: auto;
+    font-weight: normal;
+    vertical-align: middle;
+    background-image: var(
+      --select-background-image,
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='hsla(224deg, 23%, 26%, 0.75)' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E")
+    );
+    background-position: right 0.75em center;
+    background-repeat: no-repeat;
+    background-size: 1em;
+  }
 
   &.tiny {
     padding-right: 0.6em;
@@ -53,12 +55,15 @@ select {
         $color: $form-field-text-color,
         $margin: 0
       );
-      background-image: none;
-      display: flex;
-      gap: 2 * $default-padding;
-      align-items: center;
-      font-weight: normal;
-      text-align: left;
+
+      & {
+        background-image: none;
+        display: flex;
+        gap: var(--spacing-2);
+        align-items: center;
+        font-weight: normal;
+        text-align: left;
+      }
 
       .select2-chosen {
         flex-grow: 1;
@@ -75,14 +80,14 @@ select {
           align-items: center;
           justify-content: center;
           background-image: none;
-          color: $icon-color;
+          color: var(--color-icon);
 
           &:before {
             display: inline-block;
             content: "";
             width: 1rem;
             height: 1rem;
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>')
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>')
               no-repeat;
           }
         }
@@ -115,7 +120,7 @@ select {
       .select2-choice,
       .select2-choice:hover {
         background-image: none;
-        background-color: $light-gray;
+        background-color: var(--color-grey_very_light);
         box-shadow: none;
         border-color: $border-inset-color;
         cursor: not-allowed;
@@ -135,7 +140,7 @@ select {
   &.select2-allowclear {
     .select2-search-choice-close {
       left: auto;
-      right: $default-padding;
+      right: var(--spacing-1);
       top: 5px;
       background: none;
       text-decoration: none;
@@ -145,12 +150,12 @@ select {
         display: inline-flex;
         width: 12px;
         height: 12px;
-        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>')
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>')
           no-repeat;
       }
 
       &:hover {
-        color: $text-color;
+        color: var(--color-icon);
       }
     }
   }
@@ -166,16 +171,17 @@ select {
 
     .select2-choices {
       @extend %default-input-style;
-      padding: 0 2px;
+      padding: 0 var(--spacing-0);
       width: 100%;
 
       .select2-search-choice {
-        margin: 4px;
-        padding: 4px 24px 4px 8px;
+        margin: var(--spacing-1);
+        padding: var(--spacing-1) var(--spacing-6) var(--spacing-1)
+          var(--spacing-2);
         background-image: none;
         border: 0 none;
         box-shadow: none;
-        color: $text-color;
+        color: var(--color-text);
       }
 
       .select2-search-field {
@@ -193,7 +199,7 @@ select {
 
 .select2-drop {
   .select2-search {
-    margin: $default-margin 0;
+    margin: var(--spacing-1) 0;
 
     .select2-input {
       width: inherit;
@@ -218,7 +224,7 @@ select {
 
     .select2-result {
       margin: 0;
-      padding: 4px 0;
+      padding: var(--spacing-1) 0;
 
       &.select2-highlighted {
         background: $select-hover-bg-color;
@@ -232,16 +238,16 @@ select {
 
     .select2-no-results,
     .select2-searching {
-      padding: 8px;
+      padding: var(--spacing-2);
       margin: 0;
     }
 
     .select2-result-label {
-      padding: 4px 8px;
+      padding: var(--spacing-1) var(--spacing-2);
     }
 
     ul.select2-result-sub > li .select2-result-label {
-      padding-left: 16px;
+      padding-left: var(--spacing-4);
     }
   }
 
@@ -252,7 +258,7 @@ select {
 
   .select2-more-results,
   .select2-ajax-error {
-    padding: 2 * $default-padding;
+    padding: var(--spacing-2);
     margin-bottom: 0;
   }
 }
@@ -267,10 +273,11 @@ select {
 .select_with_label {
   display: inline-flex;
   align-items: center;
-  margin: 0 3 * $default-margin;
+  margin: 0 var(--spacing-3);
 
-  label {
-    margin-right: 2 * $default-margin;
+  label,
+  alchemy-icon {
+    margin-right: var(--spacing-2);
   }
 }
 

data/app/assets/stylesheets/alchemy/{shoelace.scss → admin/shoelace.scss}

@@ -60,10 +60,10 @@
   --sl-color-danger-950: var(--color-red_dark);
 
   /* Neutral */
-  --sl-color-neutral-50: var(--color-grey_light);
-  --sl-color-neutral-100: var(--color-grey_light);
+  --sl-color-neutral-50: var(--color-grey_very_light);
+  --sl-color-neutral-100: var(--color-grey_very_light);
   --sl-color-neutral-200: var(--color-grey_light);
-  --sl-color-neutral-300: var(--color-grey_medium);
+  --sl-color-neutral-300: var(--color-grey_light);
   --sl-color-neutral-400: var(--color-grey_medium);
   --sl-color-neutral-500: var(--color-grey_medium);
   --sl-color-neutral-600: var(--color-grey_dark);
@@ -102,15 +102,15 @@
    * Spacings
    */
 
-  --sl-spacing-3x-small: 0.125rem; /* 2px */
+  --sl-spacing-3x-small: var(--spacing-0); /* 2px */
   --sl-spacing-2x-small: var(--spacing-1); /* 4px */
   --sl-spacing-x-small: var(--spacing-2); /* 8px */
   --sl-spacing-small: var(--spacing-3); /* 12px */
   --sl-spacing-medium: var(--spacing-4); /* 16px */
-  --sl-spacing-large: 1.25rem; /* 20px */
-  --sl-spacing-x-large: 1.75rem; /* 28px */
-  --sl-spacing-2x-large: 2.25rem; /* 36px */
-  --sl-spacing-3x-large: 3rem; /* 48px */
+  --sl-spacing-large: var(--spacing-5); /* 20px */
+  --sl-spacing-x-large: var(--spacing-6); /* 24px */
+  --sl-spacing-2x-large: var(--spacing-7); /* 28px */
+  --sl-spacing-3x-large: var(--spacing-8); /* 32px */
   --sl-spacing-4x-large: 4.5rem; /* 72px */
 
   /*
@@ -340,13 +340,13 @@ sl-tooltip {
 
   &::part(base__popup) {
     border-radius: var(--border-radius_medium);
-    box-shadow: 0 0 var(--spacing-1) var(--color-grey_medium);
+    box-shadow: 0 0 var(--spacing-1) var(--color-grey_light);
   }
 }
 
 sl-dialog {
   &::part(panel) {
-    background-color: var(--color-grey_light);
+    background-color: var(--color-grey_very_light);
     --body-spacing: var(--spacing-4) var(--spacing-3);
     --footer-spacing: var(--spacing-4) var(--spacing-3);
   }

data/app/assets/stylesheets/alchemy/{sitemap.scss → admin/sitemap.scss}

@@ -29,7 +29,7 @@
   .page_urlname {
     display: none;
     margin-left: auto;
-    padding-left: $default-padding;
+    padding-left: var(--spacing-1);
     width: calc(var(--sitemap-url-width) - 60px);
 
     @media screen and (min-width: $large-screen-break-point) {
@@ -39,7 +39,7 @@
 
   .page_status {
     display: none;
-    padding-left: 2 * $default-padding;
+    padding-left: var(--spacing-2);
     margin-right: 190px;
     margin-left: auto;
 
@@ -78,7 +78,7 @@
   }
 
   .placeholder {
-    background-color: $medium-gray;
+    background-color: var(--color-grey_light);
     margin-bottom: 0px;
     margin-left: 22px;
   }
@@ -102,16 +102,19 @@
   display: flex;
   align-items: center;
   height: $sitemap-line-height;
-  margin: 3 * $default-margin 0;
+  margin: var(--spacing-3) 0;
   position: relative;
   transition: background-color $transition-duration;
+  --sitemap-status-width: calc(
+    var(--sitemap-status-width-base) * var(--sitemap-status-length)
+  );
 
   &.highlight {
     background-color: $sitemap-highlight-color;
   }
 
   &.no-match .sitemap_pagename_link {
-    color: $medium-gray;
+    color: var(--color-grey_light);
   }
 
   &:hover {
@@ -122,10 +125,6 @@
   &:has(.page_infos :nth-child(3)) {
     --sitemap-status-length: 3;
   }
-
-  --sitemap-status-width: calc(
-    var(--sitemap-status-width-base) * var(--sitemap-status-length)
-  );
 }
 
 .sitemap_left_images {
@@ -168,7 +167,7 @@
   background-color: $sitemap-info-background-color;
   line-height: $sitemap-line-height - 2px;
   font-size: $small-font-size;
-  padding: 0 2 * $default-padding;
+  padding: 0 var(--spacing-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -183,7 +182,7 @@
 .page_infos {
   @extend .right-rounded-border;
   background-color: $sitemap-page-background-color;
-  border-left: 1px solid $light-gray;
+  border-left: 1px solid var(--color-grey_very_light);
   display: none;
   justify-content: end;
   width: var(--sitemap-status-width);
@@ -191,8 +190,8 @@
   line-height: $sitemap-line-height;
 
   .page_status {
-    margin: 0 $default-margin;
-    padding: 0 $default-padding;
+    margin: 0 var(--spacing-1);
+    padding: 0 var(--spacing-1);
     white-space: nowrap;
   }
 
@@ -204,9 +203,9 @@
 .sitemap_right_tools {
   display: none;
   align-items: center;
-  gap: $default-padding;
+  gap: var(--spacing-1);
   height: $sitemap-line-height;
-  padding: 0 2 * $default-padding;
+  padding: 0 var(--spacing-2);
 
   @media screen and (min-width: $small-screen-break-point) {
     display: flex;
@@ -227,7 +226,7 @@
 }
 
 .page_status_and_name .page_status {
-  margin-left: $default-margin;
+  margin-left: var(--spacing-1);
   margin-bottom: -1px;
 
   // The lock icon is a bit too high, so we need to adjust it
@@ -240,12 +239,12 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: $default-margin;
+  gap: var(--spacing-1);
 }
 
 #page_filter_result {
   display: none;
-  margin-left: 2 * $default-margin;
+  margin-left: var(--spacing-2);
 }
 
 .alchemy-dialog {
@@ -255,7 +254,7 @@
 
   #sitemap {
     margin: 0;
-    padding: 0 24px 8px 8px;
+    padding: 0 var(--spacing-6) var(--spacing-2) var(--spacing-2);
 
     .page_icon {
       cursor: default;

data/app/assets/stylesheets/alchemy/{tables.scss → admin/tables.scss}

@@ -1,20 +1,20 @@
 table {
   border-style: none;
-  border-spacing: 0 $default-padding;
+  border-spacing: 0 var(--spacing-1);
   padding: 0;
   font-size: inherit;
   width: 100%;
 
   &.list .tools {
     background-color: transparent;
-    padding: 2 * $default-padding;
+    padding: var(--spacing-2);
   }
 }
 
 .table {
   display: flex;
   flex-direction: column;
-  row-gap: $default-padding;
+  row-gap: var(--spacing-1);
 
   .row,
   header {
@@ -34,10 +34,10 @@ table {
 .list td,
 .list th,
 .table .col {
-  padding: 2 * $default-padding 3 * $default-padding;
+  padding: var(--spacing-2) var(--spacing-3);
   vertical-align: top;
   line-height: 22px;
-  border-right: 1px solid $medium-gray;
+  border-right: 1px solid var(--color-grey_light);
   transition: background-color $transition-duration;
 
   &:last-child {
@@ -59,7 +59,7 @@ table {
   position: relative;
 
   &.icon {
-    border-bottom: 1px solid $medium-gray;
+    border-bottom: 1px solid var(--color-grey_light);
   }
 }
 
@@ -68,7 +68,7 @@ th,
   white-space: nowrap;
   text-align: left;
   vertical-align: top;
-  border-bottom: 1px solid $medium-gray;
+  border-bottom: 1px solid var(--color-grey_light);
   font-weight: bold;
 }
 
@@ -84,7 +84,7 @@ tr.odd td,
 
 .list tr .tools,
 .table .row .col.tools {
-  padding: $default-padding 2 * $default-padding;
+  padding: var(--spacing-1) var(--spacing-2);
   white-space: nowrap;
   @extend .disable-user-select;
   background-color: transparent;
@@ -99,7 +99,7 @@ tr.odd td,
 }
 
 td.heading {
-  padding: $default-padding 0;
+  padding: var(--spacing-1) 0;
   font-weight: bold;
   text-decoration: underline;
 }
@@ -107,7 +107,7 @@ td.heading {
 .list .tools alchemy-icon,
 .list td.icon alchemy-icon {
   @extend .disable-user-select;
-  margin: 2px 0;
+  margin: var(--spacing-0) 0;
 }
 
 .list tr:hover td,
@@ -142,13 +142,16 @@ td,
     width: 80px;
   }
 
-  &.date,
-  &.datetime {
+  &.date {
     width: 150px;
   }
 
+  &.datetime {
+    width: 180px;
+  }
+
   &.login {
-    width: 100px;
+    width: 150px;
   }
 
   &.email {
@@ -177,20 +180,17 @@ td,
     white-space: nowrap;
 
     .page_status {
-      margin: 0 $default-margin;
+      margin: 0 var(--spacing-1);
     }
   }
 
   &.tags {
-    width: 180px;
+    width: 220px;
+    padding: var(--spacing-1) var(--spacing-3);
 
     .tag {
-      margin: 0;
-      padding: 0 2 + $default-padding;
-
-      &:before {
-        padding-right: $default-padding;
-      }
+      margin: var(--spacing-1) 0;
+      padding: var(--spacing-1) var(--spacing-2);
     }
   }
 }
@@ -199,7 +199,11 @@ th.count,
 td.count {
   width: 10%;
   text-align: right;
-  padding-right: 16px;
+  padding-right: var(--spacing-4);
+}
+
+td.taggings_types {
+  width: 15%;
 }
 
 .list .login_status {

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

@@ -0,0 +1,158 @@
+.tag-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .alchemy-dialog-body & {
+    max-height: 316px;
+  }
+
+  alchemy-list-filter {
+    margin: 0;
+
+    input {
+      background-color: hsla(0deg, 0%, 100%, 0.25);
+
+      &:focus {
+        background-color: var(--color-white);
+      }
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    li {
+      display: block;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      a {
+        @include tag-base;
+
+        & {
+          display: flex;
+          text-decoration: none;
+        }
+      }
+
+      &:hover {
+        background-color: var(--color-blue_very_light);
+      }
+
+      &.active {
+        a {
+          background-color: var(--color-grey_dark);
+          color: var(--color-grey_very_light);
+
+          &:before {
+            content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.95)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
+          }
+        }
+      }
+    }
+  }
+}
+
+.tag {
+  pointer-events: none;
+  font-size: $small-font-size;
+  @include tag-base(
+    $margin: var(--spacing-0) 0,
+    $padding: var(--spacing-1) var(--spacing-2) var(--spacing-1)
+  );
+}
+
+.tags .list .tag {
+  padding: 0;
+}
+
+#assign_image_list {
+  .tag-list ul {
+    height: 316px;
+  }
+
+  &.filtered .tag-list ul {
+    height: 292px;
+  }
+}
+
+#assign_file_list {
+  .tag-list ul {
+    height: 396px;
+  }
+
+  &.filtered .tag-list ul {
+    height: 372px;
+  }
+}
+
+#overlay_file_list.with_tag_list {
+  padding-right: 234px;
+}
+
+#tags_tag_list {
+  alchemy-list-filter {
+    margin-top: 0;
+  }
+
+  ul.tags {
+    max-height: 10em;
+    padding: 1px;
+    margin: 0;
+    margin-top: var(--spacing-0);
+    overflow: auto;
+    text-align: left;
+    list-style-type: none;
+
+    li {
+      background-color: var(--color-grey_light);
+      padding: var(--spacing-1);
+      margin: 0 0 var(--spacing-1) 0;
+      position: relative;
+      border-radius: $default-border-radius;
+
+      &.odd {
+        background-color: #eaf3f9;
+      }
+
+      input {
+        position: absolute;
+        top: 3px;
+        left: var(--spacing-1);
+      }
+
+      label {
+        display: inline-block;
+        margin-left: 2em;
+        line-height: 1.6em;
+      }
+    }
+  }
+}
+
+.tag_list,
+.autocomplete_tag_list {
+  .select2-container.select2-container-multi {
+    .select2-search-choice {
+      padding: var(--spacing-1) 22px;
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
+      background-repeat: no-repeat;
+      background-position: 6px;
+      background-color: var(--color-grey_light);
+      background-size: 1rem;
+
+      > div {
+        position: relative;
+        top: -1px;
+      }
+    }
+  }
+}