alchemy_cms 8.0.0.a → 8.0.0.b

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

@@ -1,11 +1,6 @@
 @use "base";
 @use "navigation";
 
-:root {
-  --header-height: 29px;
-  --header-border-bottom: var(--border-default);
-}
-
 alchemy-overlay {
   visibility: hidden;
   position: fixed;
@@ -50,7 +45,10 @@ div#overlay_text_box {
   bottom: 0;
   left: 0;
   width: 100%;
-  margin-bottom: 0;
+
+  .main_navi_entry {
+    margin-bottom: 0;
+  }
 
   &:not(:hover) {
     background-color: var(--main-menu-bg-color);
@@ -71,7 +69,7 @@ div#overlay_text_box {
   .page_status_and_name {
     align-items: center;
     padding: var(--spacing-1) var(--spacing-2);
-    background-color: var(--color-grey_light);
+    background-color: var(--toolbar-bg-color);
     text-shadow: var(--text-shadow-light);
     @extend .disable-user-select;
     @extend .locked_page;

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

@@ -1,12 +1,3 @@
-:root {
-  --icon-size-xs: 0.75rem;
-  --icon-size-sm: 0.875rem;
-  --icon-size-1x: 1rem;
-  --icon-size-md: 1.3rem;
-  --icon-size-xl: 1.5rem;
-  --icon-size-xxl: 1.6rem;
-}
-
 alchemy-icon {
   display: inline-flex;
   align-items: center;

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

@@ -2,7 +2,7 @@
 
 .alchemy-image-overlay {
   &.open {
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: var(--dialog-overlay-color);
   }
 }
 
@@ -95,8 +95,8 @@
 .picture-overlay-handle {
   position: absolute;
   top: 0;
-  background-color: var(--color-grey_light);
-  box-shadow: -2px 0 4px -2px var(--text-color);
+  background-color: var(--dialog-background-color);
+  box-shadow: var(--image-overlay-box-shadow);
   transition: right var(--image-overlay-transition-duration)
     var(--image-overlay-transition-easing);
 }
@@ -108,8 +108,7 @@
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-1);
   overflow: auto;
 
-  form .control-label,
-  .resource_info .value label {
+  form .control-label {
     text-align: left;
   }
 
@@ -119,8 +118,7 @@
 
   form .input .select2-container,
   form .input input[type="text"],
-  form .input textarea,
-  .resource_info .value p {
+  form .input textarea {
     width: 100%;
   }
 }
@@ -130,6 +128,7 @@
   height: 100%;
   right: var(--image-overlay-form-width);
   cursor: pointer;
+  transition-property: right, background-color;
 
   .icon {
     position: absolute;
@@ -143,7 +142,7 @@
   }
 
   &:hover {
-    background-color: hsl(0deg, 0%, 89%);
+    background-color: var(--image-overlay-hover-bg-color);
   }
 }
 
@@ -176,53 +175,16 @@
     height: auto;
     max-width: 100%;
     max-height: 100%;
-    box-shadow: 0 0 var(--spacing-2) var(--text-color);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--dialog-box-shadow);
     background: var(--thumbnail-background);
     vertical-align: middle;
     cursor: default;
   }
 }
 
-.picture-file-infos,
-.picture-usage-info {
-  padding: var(--spacing-2) 0;
-
-  .message {
-    margin: var(--spacing-2) 0;
-  }
-}
-
-#pictures_page_list {
-  h3 {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-1);
-    padding: var(--spacing-1) var(--spacing-2) 0;
-    margin: 0;
-  }
-
-  ul {
-    padding-left: 0;
-    list-style-type: none;
-  }
-
-  .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;
-  }
+.picture-form {
+  margin-bottom: var(--spacing-3);
 }
 
 .picture-overlay-navigation {
@@ -244,20 +206,16 @@
     align-items: center;
     text-decoration: none;
     transition: background-color var(--image-overlay-transition-duration) linear;
+    color: var(--color-white);
 
-    .icon {
+    alchemy-icon svg {
       width: 32px;
       height: 32px;
-      fill: var(--color-white);
       filter: drop-shadow(0 0 1px var(--color-grey_very_dark));
     }
 
     &:hover {
       background-color: rgba(0, 0, 0, 0.3);
-
-      .icon {
-        transition: fill var(--image-overlay-transition-duration) linear;
-      }
     }
   }
 

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

@@ -2,11 +2,6 @@
 @use "../mixins";
 @use "../variables" as vars;
 
-:root {
-  --top-menu-height: 75px;
-  --main-menu-entry-max-width: 110px;
-}
-
 #top_menu {
   position: fixed;
   top: 0;
@@ -191,10 +186,6 @@
   }
 }
 
-:root {
-  --main-menu-width: 150px;
-}
-
 .collapsed-menu {
   --main-menu-width: 48px;
 }
@@ -258,7 +249,6 @@
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  color: #444;
   border-right: var(--border-default);
   border-bottom: var(--border-default);
 
@@ -276,7 +266,7 @@
 
   > a {
     display: flex;
-    align-items: end;
+    align-items: center;
     cursor: pointer;
     padding: var(--spacing-1) var(--spacing-2);
 

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

@@ -34,19 +34,10 @@
 .node-select--node-url {
   margin-left: auto;
   padding: var(--spacing-1) var(--spacing-2);
-  color: var(--color-grey_dark);
+  color: var(--text-color);
   font-size: var(--font-size_small);
 
   .select2-highlighted & {
     color: var(--color-white);
   }
 }
-
-// The container of the rendered node is slightly larger than other a line of
-// text, as it would be for the Alchemy::Ingredients::Page. Reducing the padding here from 0.6em
-// to 0.4em centers the content nicely.
-.ingredient-editor.node {
-  .select2-container.alchemy_selectbox .select2-choice {
-    padding: 0.4em 0.75em;
-  }
-}

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

@@ -27,9 +27,9 @@ alchemy-message {
   }
 
   &[type="hint"] {
-    background-color: var(--hint-background-notice-color);
-    border-color: var(--hint-background-notice-color);
-    color: var(--hint-text-notice-color);
+    background-color: var(--hint-background-color);
+    border-color: var(--hint-background-color);
+    color: var(--hint-text-color);
   }
 
   &[type="info"] {
@@ -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/stylesheets/alchemy/admin/page-select.scss

@@ -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

@@ -1,12 +1,5 @@
 @use "../variables" as vars;
 
-:root {
-  --pagination-height: 52px;
-  --pagination-disabled-text-color: #c0c0c0;
-  --pagination-active-bg-color: var(--color-blue_dark);
-  --pagination-active-text-color: var(--color-white);
-}
-
 .pagination-wrapper {
   display: flex;
   position: fixed;
@@ -18,7 +11,7 @@
   height: var(--pagination-height);
   padding-left: var(--main-menu-width);
   text-align: left;
-  border-top: var(--border-default);
+  border-top: 1px solid var(--pagination-border-color, --border-color);
   z-index: 10;
 }
 

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

@@ -20,7 +20,12 @@
   max-width: calc(100vw - var(--main-menu-width));
   height: calc(100vh - var(--top-menu-height));
   border: 0 none;
-  background: #fff;
+
+  // 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);
@@ -33,3 +38,9 @@
     );
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  #alchemy_preview_window {
+    color-scheme: dark;
+  }
+}

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

@@ -1,6 +1,38 @@
 @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;
@@ -11,7 +43,14 @@
     }
 
     > p {
-      @include mixins.form-value-display;
+      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));
     }
 
@@ -31,15 +70,79 @@
     right: 0;
     top: var(--spacing-1);
     height: var(--form-field-height);
-    background-color: var(--color-grey_light);
+    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: hsl(0deg, 0%, 84%);
+      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/stylesheets/alchemy/admin/search.scss

@@ -59,7 +59,7 @@
     width: 0;
     height: 100%;
     border: none;
-    background-color: hsla(0deg, 0%, 100%, 0.75);
+    background-color: var(--search-field-background-color);
     transition:
       width var(--transition-duration) ease-in-out,
       background-color var(--transition-duration) linear;

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

@@ -3,20 +3,15 @@
 @use "../extends";
 @use "../mixins";
 
-:root {
-  --select-medium-width: 90px;
-  --select-large-width: 120px;
-}
-
 select {
   @include mixins.button-defaults(
-    $background-color: var(--form-field-background-color),
-    $hover-color: var(--form-field-background-color),
-    $hover-border-color: var(--button-hover-border-color),
+    $background-color: var(--select-background-color),
+    $hover-color: var(--select-background-color),
+    $hover-border-color: var(--select-hover-border-color),
     $padding: var(--spacing-1) 26px var(--spacing-1) var(--spacing-2),
-    $border: 1px solid var(--button-border-color),
+    $border: 1px solid var(--select-border-color),
     $box-shadow: none,
-    $color: var(--form-field-text-color),
+    $color: var(--select-text-color),
     $margin: 0
   );
 
@@ -26,10 +21,7 @@ select {
     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-image: var(--select-background-image);
     background-position: right 0.75em center;
     background-repeat: no-repeat;
     background-size: 1em;
@@ -49,18 +41,21 @@ select {
 }
 
 .select2-container {
+  border-radius: var(--border-radius_medium);
+
   &.alchemy_selectbox {
     .select2-choice {
       width: 100%;
-      height: var(--form-field-height);
+
       @include mixins.button-defaults(
-        $background-color: var(--form-field-background-color),
-        $hover-color: var(--form-field-background-color),
-        $hover-border-color: var(--button-hover-border-color),
+        $background-color: var(--select-background-color),
+        $height: var(--form-field-height),
+        $hover-color: var(--select-background-color),
+        $hover-border-color: var(--select-hover-border-color),
         $padding: var(--form-field-padding),
-        $border: 1px solid var(--button-border-color),
+        $border: 1px solid var(--select-border-color),
         $box-shadow: none,
-        $color: var(--form-field-text-color),
+        $color: var(--select-text-color),
         $margin: 0
       );
 
@@ -95,8 +90,7 @@ select {
             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="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;
+            background: var(--select-background-image) no-repeat;
           }
         }
       }
@@ -130,16 +124,17 @@ select {
       .select2-choice,
       .select2-choice:hover {
         background-image: none;
-        background-color: var(--color-grey_very_light);
+        background-color: var(--select-disabled-background-color);
         box-shadow: none;
-        border-color: var(border-inset-color);
+        border-color: var(--select-disabled-border-color);
         cursor: not-allowed;
+        color: var(--select-disabled-text-color);
 
         .select2-arrow {
-          border-color: var(border-inset-color);
+          border-color: var(--select-disabled-border-color);
 
           b {
-            color: var(border-inset-color);
+            color: var(--text-color-muted);
           }
         }
       }
@@ -160,8 +155,7 @@ 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="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;
+        background: var(--select-close-icon) no-repeat;
       }
 
       &:hover {
@@ -194,6 +188,7 @@ select {
         border: 0 none;
         box-shadow: none;
         color: var(--text-color);
+        background-color: var(--tag-background-color);
       }
 
       .select2-search-field {
@@ -203,18 +198,43 @@ select {
           color: var(--form-field-text-color);
           padding: 3px 6px;
           margin: 0;
+
+          &.select2-active {
+            background: var(--form-field-background-color) !important;
+          }
         }
       }
     }
   }
+
+  .select2-default {
+    color: var(--text-color-muted) !important;
+  }
 }
 
 .select2-drop {
+  background: var(--select-dropdown-background-color);
+  box-shadow: var(--select-dropdown-box-shadow);
+  color: var(--select-dropdown-text-color, var(--text-color));
+  margin-top: 1px;
+
+  &.select2-drop-above {
+    margin-top: -1px;
+
+    &.select2-drop-active {
+      border-top-color: var(--select-dropdown-border-color);
+    }
+  }
+
   .select2-search {
     margin: var(--spacing-1) 0;
 
     .select2-input {
       width: inherit;
+
+      &.select2-active {
+        background: var(--form-field-background-color) !important;
+      }
     }
   }
 
@@ -239,8 +259,8 @@ select {
       padding: var(--spacing-1) 0;
 
       &.select2-highlighted {
-        background: var(--select-hover-bg-color);
-        color: var(--select-hover-text-color);
+        background: var(--select-hover-bg-color, var(--color-blue_dark));
+        color: var(--select-hover-text-color, var(--color-white));
       }
 
       &.select2-result-with-children {
@@ -252,10 +272,15 @@ select {
     .select2-searching {
       padding: var(--spacing-2);
       margin: 0;
+      background: var(--select-dropdown-background-color);
     }
 
     .select2-result-label {
       padding: var(--spacing-1) var(--spacing-2);
+
+      em {
+        text-decoration: underline;
+      }
     }
 
     ul.select2-result-sub > li .select2-result-label {
@@ -265,13 +290,15 @@ select {
 
   &.select2-drop-active {
     border-radius: var(--border-radius_medium);
-    border: var(--border-default);
+    border: 1px solid var(--select-dropdown-border-color);
   }
 
   .select2-more-results,
   .select2-ajax-error {
     padding: var(--spacing-2);
     margin-bottom: 0;
+    background: var(--notice-error-background-color);
+    color: var(--notice-error-text-color);
   }
 }