alchemy_cms 7.0.8 → 7.1.0.pre.b2

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

@@ -0,0 +1,345 @@
+:root,
+:host,
+.alchemy-light {
+  color-scheme: light;
+
+  /*
+   * Theme Tokens
+   */
+
+  /* Primary */
+  --sl-color-primary-50: var(--color-blue_very_light);
+  --sl-color-primary-100: var(--color-blue_very_light);
+  --sl-color-primary-200: var(--color-blue_light);
+  --sl-color-primary-300: var(--color-blue_light);
+  --sl-color-primary-400: var(--color-blue_medium);
+  --sl-color-primary-500: var(--color-blue_medium);
+  --sl-color-primary-600: var(--color-blue_dark);
+  --sl-color-primary-700: var(--color-blue_dark);
+  --sl-color-primary-800: var(--color-blue_dark);
+  --sl-color-primary-900: var(--color-blue_dark);
+  --sl-color-primary-950: var(--color-blue_dark);
+
+  /* Success */
+  --sl-color-success-50: var(--color-green_very_light);
+  --sl-color-success-100: var(--color-green_very_light);
+  --sl-color-success-200: var(--color-green_light);
+  --sl-color-success-300: var(--color-green_light);
+  --sl-color-success-400: var(--color-green_medium);
+  --sl-color-success-500: var(--color-green_medium);
+  --sl-color-success-600: var(--color-green_medium);
+  --sl-color-success-700: var(--color-green_medium);
+  --sl-color-success-800: var(--color-green_dark);
+  --sl-color-success-900: var(--color-green_dark);
+  --sl-color-success-950: var(--color-green_dark);
+
+  /* Warning */
+  --sl-color-warning-50: var(--color-orange_medium);
+  --sl-color-warning-100: var(--color-orange_medium);
+  --sl-color-warning-200: var(--color-orange_medium);
+  --sl-color-warning-300: var(--color-orange_medium);
+  --sl-color-warning-400: var(--color-orange_medium);
+  --sl-color-warning-500: var(--color-orange_dark);
+  --sl-color-warning-600: var(--color-orange_dark);
+  --sl-color-warning-700: var(--color-orange_dark);
+  --sl-color-warning-800: var(--color-orange_very_dark);
+  --sl-color-warning-900: var(--color-orange_very_dark);
+  --sl-color-warning-950: var(--color-orange_very_dark);
+
+  /* Danger */
+  --sl-color-danger-50: var(--color-red_very_light);
+  --sl-color-danger-100: var(--color-red_very_light);
+  --sl-color-danger-200: var(--color-red_light);
+  --sl-color-danger-300: var(--color-red_light);
+  --sl-color-danger-400: var(--color-red_medium);
+  --sl-color-danger-500: var(--color-red_medium);
+  --sl-color-danger-600: var(--color-red_medium);
+  --sl-color-danger-700: var(--color-red_medium);
+  --sl-color-danger-800: var(--color-red_dark);
+  --sl-color-danger-900: var(--color-red_dark);
+  --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-200: var(--color-grey_light);
+  --sl-color-neutral-300: var(--color-grey_medium);
+  --sl-color-neutral-400: var(--color-grey_medium);
+  --sl-color-neutral-500: var(--color-grey_medium);
+  --sl-color-neutral-600: var(--color-grey_dark);
+  --sl-color-neutral-700: var(--color-grey_dark);
+  --sl-color-neutral-800: var(--color-grey_very_dark);
+  --sl-color-neutral-900: var(--color-grey-very_dark);
+  --sl-color-neutral-950: var(--color-grey-very_dark);
+
+  /* Neutral one-offs */
+  --sl-color-neutral-0: hsl(0, 0%, 100%);
+  --sl-color-neutral-1000: hsl(0, 0%, 0%);
+
+  /*
+   * Border radii
+   */
+
+  --sl-border-radius-small: 0.1875rem; /* 3px */
+  --sl-border-radius-medium: var(--border-radius_medium);
+  --sl-border-radius-large: 0.5rem; /* 8px */
+  --sl-border-radius-x-large: 1rem; /* 16px */
+
+  --sl-border-radius-circle: 50%;
+  --sl-border-radius-pill: 9999px;
+
+  /*
+   * Elevations
+   */
+
+  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
+  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+
+  /*
+   * Spacings
+   */
+
+  --sl-spacing-3x-small: 0.125rem; /* 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-4x-large: 4.5rem; /* 72px */
+
+  /*
+   * Transitions
+   */
+
+  --sl-transition-x-slow: 1000ms;
+  --sl-transition-slow: 500ms;
+  --sl-transition-medium: 250ms;
+  --sl-transition-fast: 150ms;
+  --sl-transition-x-fast: 50ms;
+
+  /*
+   * Typography
+   */
+
+  /* Fonts */
+  --sl-font-mono: var(--font-mono);
+  --sl-font-sans: var(--font-sans);
+  --sl-font-serif: Georgia, "Times New Roman", serif;
+
+  /* Font sizes */
+  --sl-font-size-2x-small: 0.625rem; /* 10px */
+  --sl-font-size-x-small: 0.75rem; /* 12px */
+  --sl-font-size-small: var(--font-size_small); /* 14px */
+  --sl-font-size-medium: var(--font-size_medium); /* 16px */
+  --sl-font-size-large: var(--font-size_large); /* 20px */
+  --sl-font-size-x-large: 1.5rem; /* 24px */
+  --sl-font-size-2x-large: 2.25rem; /* 36px */
+  --sl-font-size-3x-large: 3rem; /* 48px */
+  --sl-font-size-4x-large: 4.5rem; /* 72px */
+
+  /* Font weights */
+  --sl-font-weight-light: 300;
+  --sl-font-weight-normal: 400;
+  --sl-font-weight-semibold: 500;
+  --sl-font-weight-bold: 700;
+
+  /* Letter spacings */
+  --sl-letter-spacing-denser: -0.03em;
+  --sl-letter-spacing-dense: -0.015em;
+  --sl-letter-spacing-normal: normal;
+  --sl-letter-spacing-loose: 0.075em;
+  --sl-letter-spacing-looser: 0.15em;
+
+  /* Line heights */
+  --sl-line-height-denser: 1;
+  --sl-line-height-dense: 1.4;
+  --sl-line-height-normal: 1.8;
+  --sl-line-height-loose: 2.2;
+  --sl-line-height-looser: 2.6;
+
+  /* Focus rings */
+  --sl-focus-ring-color: var(--outline-color, --sl-color-primary-600);
+  --sl-focus-ring-style: solid;
+  --sl-focus-ring-width: 2px;
+  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
+    var(--sl-focus-ring-color);
+  --sl-focus-ring-offset: 1px;
+
+  /*
+   * Forms
+   */
+
+  /* Buttons */
+  --sl-button-font-size-small: var(--sl-font-size-x-small);
+  --sl-button-font-size-medium: var(--sl-font-size-small);
+  --sl-button-font-size-large: var(--sl-font-size-medium);
+
+  /* Inputs */
+  --sl-input-height-small: 1.875rem; /* 30px */
+  --sl-input-height-medium: 2.5rem; /* 40px */
+  --sl-input-height-large: 3.125rem; /* 50px */
+
+  --sl-input-background-color: var(--sl-color-neutral-0);
+  --sl-input-background-color-hover: var(--sl-input-background-color);
+  --sl-input-background-color-focus: var(--sl-input-background-color);
+  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-input-border-color: var(--sl-color-neutral-300);
+  --sl-input-border-color-hover: var(--sl-color-neutral-400);
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
+  --sl-input-border-width: 1px;
+  --sl-input-required-content: "*";
+  --sl-input-required-content-offset: -2px;
+  --sl-input-required-content-color: var(--sl-input-label-color);
+
+  --sl-input-border-radius-small: var(--sl-border-radius-medium);
+  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
+  --sl-input-border-radius-large: var(--sl-border-radius-medium);
+
+  --sl-input-font-family: var(--sl-font-sans);
+  --sl-input-font-weight: var(--sl-font-weight-normal);
+  --sl-input-font-size-small: var(--sl-font-size-small);
+  --sl-input-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-font-size-large: var(--sl-font-size-large);
+  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+
+  --sl-input-color: var(--sl-color-neutral-700);
+  --sl-input-color-hover: var(--sl-color-neutral-700);
+  --sl-input-color-focus: var(--sl-color-neutral-700);
+  --sl-input-color-disabled: var(--sl-color-neutral-900);
+  --sl-input-icon-color: var(--sl-color-neutral-500);
+  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
+  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
+  --sl-input-placeholder-color: var(--sl-color-neutral-500);
+  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
+  --sl-input-spacing-small: var(--sl-spacing-small);
+  --sl-input-spacing-medium: var(--sl-spacing-medium);
+  --sl-input-spacing-large: var(--sl-spacing-large);
+
+  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-offset: 0;
+
+  --sl-input-filled-background-color: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-input-filled-color: var(--sl-color-neutral-800);
+  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
+  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
+  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
+
+  /* Labels */
+  --sl-input-label-font-size-small: var(--sl-font-size-small);
+  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-label-font-size-large: var(--sl-font-size-large);
+  --sl-input-label-color: inherit;
+
+  /* Help text */
+  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
+  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
+  --sl-input-help-text-color: var(--sl-color-neutral-500);
+
+  /* Toggles (checkboxes, radios, switches) */
+  --sl-toggle-size-small: 0.875rem; /* 14px */
+  --sl-toggle-size-medium: 1.125rem; /* 18px */
+  --sl-toggle-size-large: 1.375rem; /* 22px */
+
+  /*
+   * Overlays
+   */
+
+  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
+
+  /*
+   * Panels
+   */
+
+  --sl-panel-background-color: var(--sl-color-neutral-0);
+  --sl-panel-border-color: var(--sl-color-neutral-200);
+  --sl-panel-border-width: 1px;
+
+  /*
+   * Tooltips
+   */
+
+  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
+  --sl-tooltip-background-color: var(--sl-color-primary-800);
+  --sl-tooltip-color: var(--sl-color-neutral-0);
+  --sl-tooltip-font-family: var(--sl-font-sans);
+  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
+  --sl-tooltip-font-size: var(--sl-font-size-small);
+  --sl-tooltip-line-height: var(--sl-line-height-dense);
+  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
+  --sl-tooltip-arrow-size: 6px;
+
+  /*
+   * Z-indexes
+   */
+
+  --sl-z-index-drawer: 700;
+  --sl-z-index-dialog: 800;
+  --sl-z-index-dropdown: 900;
+  --sl-z-index-toast: 950;
+  --sl-z-index-tooltip: 1000;
+}
+
+// Shoelace Utility classes
+.sl-scroll-lock {
+  padding-right: var(--sl-scroll-lock-size) !important;
+  overflow: hidden !important;
+}
+
+.sl-toast-stack {
+  position: fixed;
+  top: 0;
+  inset-inline-end: 0;
+  z-index: var(--sl-z-index-toast);
+  width: 400px;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.sl-toast-stack sl-alert {
+  margin: var(--sl-spacing-medium);
+
+  &::part(base) {
+    box-shadow: var(--sl-shadow-large);
+  }
+}
+
+.alchemy-light {
+  sl-tab-group {
+    --indicator-color: var(--tabs_indicator-color);
+    --track-color: var(--tabs_track-color);
+  }
+
+  sl-tab-panel {
+    --padding: var(--spacing-4);
+  }
+
+  sl-tooltip {
+    --show-delay: 0.2s;
+  }
+}
+
+sl-tooltip {
+  --max-width: 200px;
+
+  &::part(body) {
+    white-space: normal;
+    box-sizing: content-box; // otherwise the box shadow will peak out!
+  }
+
+  &::part(base__popup) {
+    border-radius: var(--border-radius_medium);
+    box-shadow: 0 0 var(--spacing-1) var(--color-grey_medium);
+  }
+}

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

@@ -1,5 +1,6 @@
 $sitemap-url-large-width: 250px;
 $sitemap-url-xlarge-width: 350px;
+$sitemap-url-header-offset: 110px;
 
 #sort_panel {
   background: $light-gray;
@@ -104,17 +105,18 @@ $sitemap-url-xlarge-width: 350px;
   width: 32px;
   line-height: $sitemap-line-height;
   float: left;
-  padding: 0 2 * $default-padding;
   text-align: center;
 }
 
 .sitemap_right_tools {
+  display: flex;
+  align-items: center;
+  gap: $default-padding;
   height: $sitemap-line-height;
   padding: 0 2 * $default-padding;
   float: right;
 
   .sitemap_tool {
-    float: left;
     width: $sitemap-line-height;
     height: $sitemap-line-height;
     line-height: $sitemap-line-height;
@@ -125,10 +127,6 @@ $sitemap-url-xlarge-width: 350px;
       opacity: 0.25;
       filter: grayscale(100%);
     }
-
-    a {
-      display: block;
-    }
   }
 
   .icon.blank {
@@ -148,9 +146,9 @@ $sitemap-url-xlarge-width: 350px;
 
   .page_folder {
     position: absolute;
-    left: -23px;
+    left: -$sitemap-line-height;
     top: 0;
-    width: 16px;
+    width: $sitemap-line-height;
     height: $sitemap-line-height;
   }
 
@@ -180,12 +178,20 @@ $sitemap-url-xlarge-width: 350px;
   background-color: $sitemap-page-background-color;
   border-left: 1px solid $light-gray;
   float: right;
+  display: none;
+  justify-content: end;
+  width: 170px;
   height: $sitemap-line-height;
   line-height: $sitemap-line-height;
-  padding: 0 $default-padding;
 
   .page_status {
+    margin: 0 $default-margin;
     padding: 0 $default-padding;
+    white-space: nowrap;
+  }
+
+  @media screen and (min-width: $medium-screen-break-point) {
+    display: flex;
   }
 }
 
@@ -213,24 +219,28 @@ $sitemap-url-xlarge-width: 350px;
   .page_urlname {
     display: none;
     margin-left: auto;
-    padding-left: 2 * $default-padding;
-    padding-right: 2 * $default-padding;
+    padding-left: $default-padding;
 
     @media screen and (min-width: $large-screen-break-point) {
       display: block;
-      width: $sitemap-url-large-width;
+      width: $sitemap-url-large-width + $sitemap-url-header-offset;
     }
 
     @media screen and (min-width: 1440px) {
-      width: $sitemap-url-xlarge-width;
+      width: $sitemap-url-xlarge-width + $sitemap-url-header-offset;
     }
   }
 
   .page_status {
+    display: none;
     padding-left: 2 * $default-padding;
-    margin-right: 188px;
+    margin-right: 190px;
     margin-left: auto;
 
+    @media screen and (min-width: $medium-screen-break-point) {
+      display: block;
+    }
+
     @media screen and (min-width: $large-screen-break-point) {
       margin-left: initial;
     }

data/app/assets/stylesheets/alchemy/spinner.scss

@@ -5,31 +5,21 @@
   transform: translate(-50%, -50%);
   text-align: center;
   line-height: 1;
-
-  path {
-    fill: currentColor;
-    opacity: 1;
-    animation: spinner 1s infinite ease-in-out both;
-  }
-
-  &.spinner--tiny {
-    width: 8px;
-    height: 8px;
-  }
+  width: var(--spinner-size, 32px);
+  height: var(--spinner-size, 32px);
 
   &.spinner--small {
-    width: 16px;
-    height: 16px;
+    --spinner-size: 16px;
   }
 
-  &.spinner--medium {
-    width: 32px;
-    height: 32px;
+  &.spinner--large {
+    --spinner-size: 48px;
   }
 
-  &.spinner--large {
-    width: 48px;
-    height: 48px;
+  path {
+    fill: var(--spinner-color, currentColor);
+    opacity: 1;
+    animation: spinner 1s infinite ease-in-out both;
   }
 
   .hex2 {

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

@@ -6,28 +6,16 @@ table {
   width: 100%;
 
   &.list .tools {
-    button,
-    a {
-      display: inline-block;
-      width: 18px;
-      height: 18px;
-      padding: 0;
-      margin: 0 $default-margin;
-      line-height: inherit;
-      text-align: center;
-
-      > .icon {
-        margin: 0;
-      }
-    }
+    background-color: transparent;
+    padding: 2 * $default-padding;
   }
 }
 
 .list td,
 .list th {
-  padding: 2 * $default-padding;
+  padding: 2 * $default-padding 3 * $default-padding;
   vertical-align: top;
-  line-height: 18px;
+  line-height: 22px;
   border-right: 1px solid $medium-gray;
   transition: background-color $transition-duration;
 
@@ -42,6 +30,7 @@ table {
   &.icon {
     width: 16px;
     text-align: center;
+    background-color: transparent;
   }
 }
 
@@ -71,6 +60,7 @@ tr.odd td {
 
 .list tr .tools {
   width: 40px;
+  padding: $default-padding 2 * $default-padding;
   white-space: nowrap;
   @extend .disable-user-select;
 
@@ -109,7 +99,7 @@ th {
 
 td {
   &.file_name {
-    word-break: break-all;
+    white-space: nowrap;
   }
 
   &.file_type {
@@ -142,11 +132,17 @@ td {
   }
 
   &.page_layout {
-    width: 160px;
+    width: 10%;
+  }
+
+  &.url {
+    width: 15%;
+    white-space: nowrap;
   }
 
   &.status {
-    width: 80px;
+    width: 5%;
+    white-space: nowrap;
 
     .page_status {
       margin: 0 $default-margin;
@@ -169,15 +165,11 @@ td {
 
 th.count,
 td.count {
-  width: 120px;
+  width: 10%;
   text-align: right;
   padding-right: 16px;
 }
 
-table.window_form {
-  width: 100%;
-}
-
 .list .login_status {
   width: 16px;
 }

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

@@ -3,6 +3,10 @@
   flex-direction: column;
   height: 100%;
 
+  .alchemy-dialog-body & {
+    max-height: 316px;
+  }
+
   .js_filter_field_box {
     margin: 0;
 

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

@@ -1,16 +1,18 @@
 #toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2 * $default-padding;
   z-index: 10;
   @extend %gradiated-toolbar;
   margin-right: 0px;
   border-bottom: $default-border;
   position: relative;
 
-  .button_with_label {
-
+  .toolbar_button {
     form {
       margin: 0;
-      display: inline-block;
-      vertical-align: middle;
+      display: inline-flex;
+      align-items: center;
     }
   }
 
@@ -22,11 +24,11 @@
 }
 
 .toolbar_buttons {
-  margin-right: 8px;
+  display: flex;
+  flex-grow: 1;
   white-space: nowrap;
   overflow-x: auto;
   overflow-y: visible;
-  max-width: calc(100vw - #{$collapsed-main-menu-width + 65px});
   -webkit-overflow-scrolling: touch;
 
   @media screen and (min-width: $medium-screen-break-point) {
@@ -34,33 +36,35 @@
   }
 
   &.right {
-    position: absolute;
-    right: -8px;
-    top: 0;
-    margin-left: 8px;
-    padding: 8px;
-    background-color: $toolbar-bg-color;
-
-    label {
-      left: auto;
-      right: 50%;
-      margin-left: 0;
-      margin-right: -12px;
+    flex-grow: 0;
+    padding: 8px 0;
 
-      &:before {
-        left: auto;
-        right: 8px;
+    .toolbar_button {
+      &:last-child {
+        margin-right: $default-margin;
       }
     }
   }
 
   .icon_button {
-
     .icon {
-      font-size: 1.25em;
+      font-size: 1.5em;
       text-shadow: 0 0 1px rgba(#fff, 0.75);
     }
   }
+
+  .toolbar_button {
+    margin: 0 2 * $default-margin;
+
+    &:first-child {
+      margin-left: $default-margin;
+
+      select,
+      .alchemy_selectbox {
+        margin-left: 2 * $default-margin;
+      }
+    }
+  }
 }
 
 .toolbar_spacer {
@@ -84,13 +88,13 @@
   position: relative;
   display: inline-block;
   vertical-align: top;
-  margin: 0 2*$default-margin;
+  margin: 0 2 * $default-margin;
 
   &:hover label {
     display: block;
   }
 
-  .button_with_label {
+  .toolbar_button {
     margin: 0;
   }
 }