alchemy_cms 7.4.10 → 8.0.0.b

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

@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .nodes_tree.list {
   margin: 2em 0;
 
@@ -22,6 +24,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    gap: var(--spacing-0);
 
     > a {
       overflow: hidden;
@@ -48,10 +51,10 @@
     align-items: center;
     padding: 0 var(--spacing-2);
     white-space: nowrap;
-    background-color: $sitemap-info-background-color;
-    line-height: $sitemap-line-height;
+    background-color: var(--sitemap-info-background-color);
+    line-height: var(--sitemap-line-height);
     font-size: var(--font-size_small);
-    @include border-right-radius($default-border-radius);
+    @include mixins.border-right-radius(var(--border-radius_medium));
   }
 
   .node_folder {
@@ -69,11 +72,11 @@
   }
 
   li {
-    line-height: $sitemap-line-height;
+    line-height: var(--sitemap-line-height);
     padding-left: var(--spacing-1);
 
     li {
-      padding-left: $sitemap-line-height;
+      padding-left: var(--sitemap-line-height);
     }
   }
 }
@@ -86,12 +89,12 @@
 .sitemap_node {
   display: flex;
   align-items: center;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   margin: var(--spacing-3) 0;
-  transition: background-color $transition-duration;
+  transition: background-color var(--transition-duration);
 
   &.highlight {
-    background-color: $sitemap-highlight-color;
+    background-color: var(--sitemap-highlight-color);
   }
 
   &.no-match .sitemap_pagename_link {
@@ -99,25 +102,25 @@
   }
 
   &:hover {
-    background-color: $sitemap-page-hover-color;
-    border-radius: $default-border-radius;
+    background-color: var(--sitemap-page-hover-color);
+    border-radius: var(--border-radius_medium);
   }
 
   .node_name {
     display: flex;
-    height: $sitemap-line-height;
+    height: var(--sitemap-line-height);
     flex: 1;
     justify-content: space-between;
-    @include border-left-radius($default-border-radius);
+    @include mixins.border-left-radius(var(--border-radius_medium));
     padding: 0 0 0 10px;
     margin: var(--spacing-0);
     text-decoration: none;
     overflow: hidden;
-    background-color: $sitemap-page-background-color;
+    background-color: var(--sitemap-page-background-color);
     cursor: move;
 
     &.without-status {
-      @include border-right-radius($default-border-radius);
+      @include mixins.border-right-radius(var(--border-radius_medium));
     }
 
     &.inactive {
@@ -132,20 +135,20 @@
   align-items: center;
   position: relative;
   width: 32px;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   padding: 0 var(--spacing-2);
 }
 
 .nodes_tree-right_tools {
   display: flex;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   padding: 0 var(--spacing-2);
   align-items: center;
 
   > a {
     display: inline-flex;
-    width: $sitemap-line-height;
-    height: $sitemap-line-height;
+    width: var(--sitemap-line-height);
+    height: var(--sitemap-line-height);
     align-items: center;
     text-decoration: none;
     margin: 0;

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

@@ -1,8 +1,8 @@
 alchemy-message {
   display: block;
-  border-width: $default-border-width;
-  border-style: $default-border-style;
-  border-radius: $default-border-radius;
+  border-width: var(--border-width_small);
+  border-style: var(--border-style);
+  border-radius: var(--border-radius_medium);
   position: relative;
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
   margin-bottom: var(--spacing-2);
@@ -21,35 +21,35 @@ alchemy-message {
   }
 
   &[type="notice"] {
-    border-color: $success_border_color;
-    color: $success_text_color;
-    background-color: $success_background_color;
+    border-color: var(--notice-success-border-color);
+    color: var(--notice-success-text-color);
+    background-color: var(--notice-success-background-color);
   }
 
   &[type="hint"] {
-    background-color: $hint-background-color;
-    border-color: $hint-background-color;
-    color: $hint-text-color;
+    background-color: var(--hint-background-color);
+    border-color: var(--hint-background-color);
+    color: var(--hint-text-color);
   }
 
   &[type="info"] {
-    background-color: $info_background_color;
-    border-color: $info_border_color;
-    color: $info_text_color;
+    background-color: var(--notice-info-background-color);
+    border-color: var(--notice-info-border-color);
+    color: var(--notice-info-text-color);
   }
 
   &[type="error"] {
-    background-color: $error_background_color;
-    border-color: $error_border_color;
-    color: $error_text_color;
+    background-color: var(--notice-error-background-color);
+    border-color: var(--notice-error-border-color);
+    color: var(--notice-error-text-color);
   }
 
   &[type="warning"],
   &[type="warn"],
   &[type="alert"] {
-    background-color: $warning_background_color;
-    border-color: $warning_border_color;
-    color: $warning_text_color;
+    background-color: var(--notice-warning-background-color);
+    border-color: var(--notice-warning-border-color);
+    color: var(--notice-warning-text-color);
   }
 
   alchemy-icon {
@@ -74,8 +74,9 @@ alchemy-message {
     margin-top: 0;
   }
 
-  a {
+  a[href] {
     text-decoration: underline;
+    color: var(--hint-text-link-color);
 
     &:hover {
       color: inherit;

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/page-select.scss

@@ -15,7 +15,7 @@
   --size-3: var(--spacing-2, 8px);
   --small-font-size: var(--font-size_small, 10px);
   --grey: var(--color-grey_light, hsl(0deg, 0%, 94%));
-  --color: var(--color-text, hsla(224deg, 23%, 26%, 0.8));
+  --color: var(--text-color, hsla(224deg, 23%, 26%, 0.8));
   --highlight-color: var(--grey);
 
   display: flex;
@@ -48,7 +48,7 @@
 }
 
 .page-select--page-urlname {
-  color: var(--color-text_muted, hsla(224deg, 23%, 26%, 0.5));
+  color: var(--text-color-muted, hsla(224deg, 23%, 26%, 0.5));
   padding-right: var(--size-2);
 
   .select2-highlighted & {
@@ -79,3 +79,19 @@
   padding: var(--size-2) 0 var(--size-2) var(--size-3);
   font-size: var(--small-font-size);
 }
+
+@media (prefers-color-scheme: dark) {
+  .page-select--page {
+    --grey: var(--a-dark-grey, hsl(200deg, 5%, 17.5%));
+    --color: var(--select-text-color, hsl(200deg, 5%, 70%));
+    --highlight-color: var(--select-hover-text-color, hsl(0deg, 0%, 100%));
+  }
+
+  .page-select--page-urlname {
+    color: var(--a-lighter-grey, hsl(200deg, 5%, 70%));
+  }
+
+  .page-select--language-code {
+    --highlight-bg-color: var(--bg-color);
+  }
+}

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

@@ -0,0 +1,137 @@
+@use "../variables" as vars;
+
+.pagination-wrapper {
+  display: flex;
+  position: fixed;
+  background: var(--pagination-background-color);
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  left: 0px;
+  height: var(--pagination-height);
+  padding-left: var(--main-menu-width);
+  text-align: left;
+  border-top: 1px solid var(--pagination-border-color, --border-color);
+  z-index: 10;
+}
+
+.pagination {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-2);
+
+  a,
+  span,
+  em {
+    font-size: var(--font-size_medium);
+    font-weight: var(--font-weight_normal);
+    color: var(--icon-color);
+    padding: var(--spacing-1);
+    margin: var(--spacing-0);
+    border-radius: var(--border-radius_medium);
+  }
+
+  a:hover {
+    color: var(--text-color);
+    background-color: var(--border-color);
+    text-decoration: none;
+  }
+
+  span a {
+    padding: 0;
+  }
+
+  .arrows {
+    display: inline-flex;
+    flex-wrap: nowrap;
+  }
+
+  .pages {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-x: auto;
+    overflow-y: visible;
+    max-width: 75%;
+
+    @media screen and (max-width: vars.$large-screen-break-point) {
+      max-width: 60vw;
+    }
+  }
+
+  .page {
+    padding: var(--spacing-1) var(--spacing-2);
+    text-align: center;
+  }
+
+  .current {
+    color: var(--pagination-active-text-color);
+    background-color: var(--pagination-active-bg-color);
+    cursor: default;
+  }
+
+  .previous_page {
+    margin-right: var(--spacing-2);
+  }
+
+  .next_page {
+    margin-left: var(--spacing-2);
+  }
+
+  .disabled {
+    color: var(--pagination-disabled-text-color);
+  }
+
+  .gap {
+    border: none;
+    background: transparent;
+    cursor: default;
+    margin: 0;
+    color: var(--pagination-disabled-text-color);
+  }
+
+  .next_page,
+  .previous_page,
+  .first-page,
+  .last-page,
+  .gap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon {
+    fill: currentColor;
+  }
+}
+
+.per-page-select-form {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+  width: var(--sidebar-width);
+  margin-left: auto;
+  padding: var(--spacing-2);
+
+  @media screen and (max-width: vars.$large-screen-break-point) {
+    --sidebar-width: auto;
+
+    label span {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: vars.$medium-screen-break-point) {
+    display: none;
+  }
+}
+
+#assign_image_list .pagination-wrapper,
+#assign_file_list .pagination-wrapper {
+  position: absolute;
+  padding-left: 0;
+  padding-right: 0;
+}

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

@@ -0,0 +1,46 @@
+@use "../variables" as vars;
+
+:root {
+  --preview-window-min-width: 0px;
+
+  @media screen and (min-width: vars.$large-screen-break-point) {
+    --preview-window-min-width: 240px;
+  }
+}
+
+#alchemy_preview_window {
+  position: absolute;
+  left: var(--main-menu-width);
+  top: 75px;
+  width: calc(
+    100vw - var(--main-menu-width) - var(--elements-window-width) +
+      var(--border-width_small)
+  );
+  min-width: var(--preview-window-min-width);
+  max-width: calc(100vw - var(--main-menu-width));
+  height: calc(100vh - var(--top-menu-height));
+  border: 0 none;
+
+  // This seems weird, but the correct way to create iframes that handle light/dark themes.
+  // https://fvsch.com/transparent-iframes
+  background-color: white;
+  color-scheme: light;
+
+  border-right: var(--border-default);
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-duration);
+  transition-property: width, max-width;
+
+  .elements-window-visible & {
+    max-width: calc(
+      100vw - var(--main-menu-width) - var(--elements-window-min-width) +
+        var(--border-width_small)
+    );
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #alchemy_preview_window {
+    color-scheme: dark;
+  }
+}

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

@@ -1,4 +1,4 @@
-@import "alchemy/defaults";
+@use "../defaults";
 
 div#main_menu,
 div#top_menu,

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

@@ -0,0 +1,148 @@
+@use "base";
+@use "../mixins";
+
+.resource-details {
+  display: flex;
+  gap: var(--spacing-5);
+  --form-left-column-width: 30%;
+  --form-right-column-width: 70%;
+
+  > .resource-preview {
+    flex-grow: 0;
+    width: 50%;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  aside {
+    flex-grow: 1;
+  }
+
+  .resource_info {
+    margin-bottom: var(--spacing-4);
+  }
+}
+
+.resource-preview {
+  iframe {
+    width: 100%;
+    background-color: white;
+    min-height: 565px;
+  }
+}
+
+.resource_info {
+  .value {
+    position: relative;
+    @include mixins.clearfix;
+
+    > label {
+      @include mixins.form-label;
+    }
+
+    > p {
+      float: right;
+      width: var(--form-right-column-width);
+      margin: var(--form-field-margin);
+      padding: var(--spacing-1) var(--spacing-2);
+      line-height: 21px;
+      min-height: var(--form-field-height);
+      background: var(--form-field-background-color);
+      border-radius: var(--border-radius_medium);
+      @include mixins.truncate(var(--form-right-column-width));
+    }
+
+    &.with-icon {
+      > p {
+        white-space: nowrap;
+        padding-right: 40px;
+      }
+    }
+  }
+
+  .icon_button--right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 0;
+    top: var(--spacing-1);
+    height: var(--form-field-height);
+    background-color: var(--form-field-addon-background-color);
+    padding: 0 var(--spacing-2);
+    transition: background-color 0.3s;
+    @extend .right-rounded-border;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--icon-button-hover-bg-color);
+      text-decoration: none;
+    }
+  }
+
+  &.file-infos .value {
+    label {
+      text-align: left;
+      width: 30%;
+    }
+
+    p {
+      max-width: 70%;
+      width: 70%;
+    }
+  }
+}
+
+.file-infos,
+.resource-usage-info {
+  margin-top: var(--spacing-4);
+
+  alchemy-message {
+    margin: var(--spacing-5) 0;
+  }
+
+  h3 {
+    font-size: 1rem;
+  }
+}
+
+.resource_page_list {
+  padding-left: 0;
+  list-style-type: none;
+
+  h3 {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-1);
+    padding: var(--spacing-1) var(--spacing-2) 0;
+    margin: 0;
+  }
+
+  .list {
+    margin: var(--spacing-2) 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-1);
+      padding: var(--spacing-2);
+      border-radius: var(--border-radius_medium);
+      white-space: normal;
+      margin-bottom: 1em;
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: var(--text-color);
+
+    &:hover {
+      color: var(--text-link-color);
+    }
+  }
+}

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

@@ -1,3 +1,6 @@
+@use "../mixins";
+@use "../variables" as vars;
+
 .search_field {
   position: relative;
   margin-bottom: var(--spacing-1);
@@ -56,10 +59,10 @@
     width: 0;
     height: 100%;
     border: none;
-    background-color: hsla(0deg, 0%, 100%, 0.75);
+    background-color: var(--search-field-background-color);
     transition:
-      width $transition-duration ease-in-out,
-      background-color $transition-duration linear;
+      width var(--transition-duration) ease-in-out,
+      background-color var(--transition-duration) linear;
     border-radius: 0;
     padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
     margin: 0;
@@ -67,16 +70,16 @@
     box-shadow: none;
     -webkit-appearance: none;
 
-    @media screen and (min-width: $medium-screen-break-point) {
+    @media screen and (min-width: vars.$medium-screen-break-point) {
       width: 150px;
     }
 
     &:focus {
       width: 250px;
-      background-color: $form-field-background-color;
+      background-color: var(--form-field-background-color);
 
-      @include default-focus-style(
-        $box-shadow: inset 0 0 0 2px $focus-color,
+      @include mixins.default-focus-style(
+        $box-shadow: inset 0 0 0 2px var(--focus-color),
         $border-radius: 0
       );
     }