alchemy_cms 7.4.10 → 8.0.0.b

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

@@ -1,18 +1,23 @@
+@use "base";
+@use "../mixins";
+@use "../variables" as vars;
+
 :root {
+  --sitemap-line-height: 32px;
   --sitemap-url-width: 420px;
   --sitemap-url-header-offset: 0;
   --sitemap-status-width-base: 90px;
   --sitemap-status-length: 2;
 
-  @media screen and (min-width: $large-screen-break-point) {
+  @media screen and (min-width: vars.$large-screen-break-point) {
     --sitemap-url-width: 520px;
   }
 
-  @media screen and (min-width: $xlarge-screen-break-point) {
+  @media screen and (min-width: vars.$xlarge-screen-break-point) {
     --sitemap-url-width: 620px;
   }
 
-  @media screen and (min-width: $xxlarge-screen-break-point) {
+  @media screen and (min-width: vars.$xxlarge-screen-break-point) {
     --sitemap-url-width: 820px;
   }
 }
@@ -32,7 +37,7 @@
     padding-left: var(--spacing-1);
     width: calc(var(--sitemap-url-width) - 60px);
 
-    @media screen and (min-width: $large-screen-break-point) {
+    @media screen and (min-width: vars.$large-screen-break-point) {
       display: block;
     }
   }
@@ -43,11 +48,11 @@
     margin-right: 190px;
     margin-left: auto;
 
-    @media screen and (min-width: $medium-screen-break-point) {
+    @media screen and (min-width: vars.$medium-screen-break-point) {
       display: block;
     }
 
-    @media screen and (min-width: $large-screen-break-point) {
+    @media screen and (min-width: vars.$large-screen-break-point) {
       margin-left: initial;
     }
   }
@@ -71,10 +76,10 @@
 
   .page_folder {
     position: absolute;
-    left: -$sitemap-line-height;
+    left: calc(-1 * var(--spacing-8));
     top: 0;
-    width: $sitemap-line-height;
-    height: $sitemap-line-height;
+    width: var(--sitemap-line-height);
+    height: var(--sitemap-line-height);
   }
 
   .placeholder {
@@ -92,7 +97,7 @@
     padding-left: 0;
 
     li {
-      padding-left: $sitemap-line-height;
+      padding-left: var(--sitemap-line-height);
       padding-right: 0;
     }
   }
@@ -101,16 +106,16 @@
 .sitemap_page {
   display: flex;
   align-items: center;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   margin: var(--spacing-3) 0;
   position: relative;
-  transition: background-color $transition-duration;
+  transition: background-color var(--transition-duration);
   --sitemap-status-width: calc(
     var(--sitemap-status-width-base) * var(--sitemap-status-length)
   );
 
   &.highlight {
-    background-color: $sitemap-highlight-color;
+    background-color: var(--sitemap-highlight-color);
   }
 
   &.no-match .sitemap_pagename_link {
@@ -118,8 +123,8 @@
   }
 
   &: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);
   }
 
   &:has(.page_infos :nth-child(3)) {
@@ -134,18 +139,18 @@
   align-items: center;
   flex-shrink: 0;
   width: 32px;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
 }
 
 .sitemap_sitename {
   flex-grow: 1;
-  @include border-left-radius($default-border-radius);
-  line-height: $sitemap-line-height - 4;
+  @include mixins.border-left-radius(var(--border-radius_medium));
+  line-height: calc(var(--sitemap-line-height) - 4px);
   overflow: hidden;
-  background-color: $sitemap-page-background-color;
+  background-color: var(--sitemap-page-background-color);
 
   &.without-status {
-    @include border-right-radius($default-border-radius);
+    @include mixins.border-right-radius(var(--border-radius_medium));
   }
 
   .sitemap_pagename_link {
@@ -164,30 +169,30 @@
 
 .sitemap_url {
   display: none;
-  background-color: $sitemap-info-background-color;
-  line-height: $sitemap-line-height - 2px;
+  background-color: var(--sitemap-info-background-color);
+  line-height: calc(var(--sitemap-line-height) - 2px);
   font-size: var(--font-size_small);
   padding: 0 var(--spacing-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border: 1px solid $sitemap-page-background-color;
+  border: 1px solid var(--sitemap-page-background-color);
   width: calc(var(--sitemap-url-width) - var(--sitemap-status-width));
 
-  @media screen and (min-width: $large-screen-break-point) {
+  @media screen and (min-width: vars.$large-screen-break-point) {
     display: block;
   }
 }
 
 .page_infos {
   @extend .right-rounded-border;
-  background-color: $sitemap-page-background-color;
-  border-left: 1px solid var(--color-grey_very_light);
+  background-color: var(--sitemap-page-background-color);
+  border-left: 1px solid var(--body-background-color);
   display: none;
   justify-content: end;
   width: var(--sitemap-status-width);
-  height: $sitemap-line-height;
-  line-height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
+  line-height: var(--sitemap-line-height);
 
   .page_status {
     margin: 0 var(--spacing-1);
@@ -195,7 +200,7 @@
     white-space: nowrap;
   }
 
-  @media screen and (min-width: $medium-screen-break-point) {
+  @media screen and (min-width: vars.$medium-screen-break-point) {
     display: flex;
   }
 }
@@ -204,17 +209,17 @@
   display: none;
   align-items: center;
   gap: var(--spacing-1);
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   padding: 0 var(--spacing-2);
 
-  @media screen and (min-width: $small-screen-break-point) {
+  @media screen and (min-width: vars.$small-screen-break-point) {
     display: flex;
   }
 
   .sitemap_tool {
-    width: $sitemap-line-height;
-    height: $sitemap-line-height;
-    line-height: $sitemap-line-height;
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    line-height: var(--sitemap-line-height);
     text-align: center;
     margin: 0;
 

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

@@ -1,3 +1,5 @@
+@use "base";
+
 table {
   border-style: none;
   border-spacing: 0 var(--spacing-1);
@@ -37,8 +39,8 @@ table {
   padding: var(--spacing-2) var(--spacing-3);
   vertical-align: top;
   line-height: 22px;
-  border-right: 1px solid var(--color-grey_light);
-  transition: background-color $transition-duration;
+  border-right: 1px solid var(--table-border-color);
+  transition: background-color var(--transition-duration);
 
   &:last-child {
     border-right: 0 none;
@@ -59,7 +61,7 @@ table {
   position: relative;
 
   &.icon {
-    border-bottom: 1px solid var(--color-grey_light);
+    border-bottom: 1px solid var(--table-border-color);
   }
 }
 
@@ -68,18 +70,18 @@ th,
   white-space: nowrap;
   text-align: left;
   vertical-align: top;
-  border-bottom: 1px solid var(--color-grey_light);
+  border-bottom: 1px solid var(--table-border-color);
   font-weight: bold;
 }
 
 tr.even td,
 .table .row.even .col {
-  background-color: $table-row-even-background-color;
+  background-color: var(--table-row-even-background-color);
 }
 
 tr.odd td,
 .table .row.odd .col {
-  background-color: $table-row-odd-background-color;
+  background-color: var(--table-row-odd-background-color);
 }
 
 .list tr .tools,
@@ -112,7 +114,7 @@ td.heading {
 
 .list tr:hover td,
 .table .row:hover .col {
-  background-color: $table-row-hover-color;
+  background-color: var(--table-row-hover-color);
 }
 
 td,

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

@@ -0,0 +1,143 @@
+@use "../mixins";
+
+.tag-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding-top: var(--spacing-4);
+
+  label {
+    display: block;
+    font-weight: bold;
+    font-size: var(--font-size_medium);
+    margin-bottom: var(--spacing-2);
+  }
+
+  alchemy-list-filter {
+    margin: 0;
+
+    input {
+      background-color: var(--list-filter-background-color);
+
+      &:focus {
+        background-color: var(--list-filter-focus-background-color);
+      }
+    }
+  }
+
+  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 mixins.tag-base;
+
+        & {
+          display: flex;
+          text-decoration: none;
+        }
+      }
+
+      &:hover a {
+        background-color: var(--tag-hover-background-color);
+      }
+
+      &.active {
+        a {
+          background-color: var(--tag-active-background-color);
+          color: var(--tag-active-text-color);
+
+          &:before {
+            background-image: var(--tag-active-background-image);
+          }
+        }
+      }
+    }
+  }
+}
+
+.tag {
+  pointer-events: none;
+  font-size: var(--font-size_small);
+  @include mixins.tag-base(
+    $margin: var(--spacing-0) 0,
+    $padding: var(--spacing-1) var(--spacing-2) var(--spacing-1)
+  );
+}
+
+.tags .list .tag {
+  padding: 0;
+}
+
+#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(--tag-background-color);
+      padding: var(--spacing-1);
+      margin: 0 0 var(--spacing-1) 0;
+      position: relative;
+      border-radius: var(--border-radius_medium);
+
+      &.odd {
+        background-color: #eaf3f9;
+      }
+
+      input {
+        position: absolute;
+        top: 3px;
+        left: var(--spacing-1);
+      }
+
+      label {
+        display: inline-block;
+        margin-left: 2em;
+        line-height: 1.6em;
+      }
+    }
+  }
+}
+
+.autocomplete_tag_list {
+  .select2-container.select2-container-multi {
+    .select2-search-choice {
+      padding: var(--spacing-1) 22px;
+      background-image: var(--tag-background-image);
+      background-repeat: no-repeat;
+      background-position: 6px;
+      background-color: var(--tag-background-color);
+      background-size: 1rem;
+
+      > div {
+        position: relative;
+        top: -1px;
+      }
+    }
+  }
+}

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

@@ -1,11 +1,12 @@
+@use "../extends";
+@use "../variables" as vars;
+
 #toolbar {
-  display: flex;
+  @extend %gradiated-toolbar;
   align-items: center;
   gap: var(--spacing-2);
   z-index: 10;
-  @extend %gradiated-toolbar;
   margin-right: 0px;
-  border-bottom: $default-border;
   position: relative;
 
   .toolbar_button {
@@ -31,7 +32,7 @@
   overflow-y: visible;
   -webkit-overflow-scrolling: touch;
 
-  @media screen and (min-width: $medium-screen-break-point) {
+  @media screen and (min-width: vars.$medium-screen-break-point) {
     overflow: visible;
   }
 
@@ -74,14 +75,13 @@
   height: 29px;
   border-right-style: solid;
   border-right-width: 1px;
-  border-right-color: $default-border-color;
+  border-right-color: var(--border-color);
   margin-right: var(--spacing-1);
   margin-left: var(--spacing-1);
 }
 
 #overlay_toolbar {
   @extend %gradiated-toolbar;
-  border-bottom: $default-border;
 }
 
 .button_group {

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

@@ -55,20 +55,17 @@ p {
   white-space: normal;
 
   a {
-    color: $anchor-color;
+    color: var(--text-link-color);
   }
 }
 
 kbd,
 code {
-  border: $default-border;
+  border: 1px solid var(--code-border-color);
   border-radius: var(--border-radius_medium);
+  background: var(--code-background-color);
   font-family: Courier, monospaced;
   margin: 0 0.25ex;
   padding: 0.25em 0.5em;
   vertical-align: baseline;
 }
-
-code {
-  background: var(--color-grey_light);
-}

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

@@ -1,3 +1,5 @@
+@use "../extends";
+
 .upload-button {
   display: inline-block;
 
@@ -56,7 +58,7 @@ alchemy-upload-progress {
   opacity: 0;
   padding: var(--spacing-4);
   position: fixed;
-  transition: $transition-duration ease-in-out;
+  transition: var(--transition-duration) ease-in-out;
   width: 100%;
   z-index: 150;
 
@@ -72,9 +74,9 @@ alchemy-upload-progress {
   }
 
   .value-text {
-    color: var(--font-color_default);
+    color: var(--file-upload-text-color);
     font-size: var(--font-size_large);
-    font-weight: var(--font-weigth_bold);
+    font-weight: var(--font-weight_bold);
     min-width: 100px;
   }
 
@@ -124,14 +126,14 @@ alchemy-upload-progress {
       }
 
       .error-message {
-        color: var(--font-color_failed);
+        color: var(--file-upload-failed-text-color);
       }
 
       button {
         margin-left: auto; // right align button
         &:hover,
         &:active {
-          background-color: $default-border-color;
+          background-color: var(--border-color);
         }
       }
 

data/app/stylesheets/alchemy/admin.scss

@@ -0,0 +1,44 @@
+@use "defaults";
+@use "fonts";
+@use "admin/archive";
+@use "admin/attachment-select";
+@use "admin/attachments";
+@use "admin/base";
+@use "admin/buttons";
+@use "admin/clipboard";
+@use "admin/dashboard";
+@use "admin/dialogs";
+@use "admin/elements";
+@use "admin/element-select";
+@use "admin/errors";
+@use "admin/filters";
+@use "admin/flash";
+@use "admin/flatpickr";
+@use "admin/form_fields";
+@use "admin/forms";
+@use "admin/frame";
+@use "admin/hints";
+@use "admin/icons";
+@use "admin/image_library";
+@use "admin/images";
+@use "admin/labels";
+@use "admin/list_filter";
+@use "admin/lists";
+@use "admin/navigation";
+@use "admin/node-select";
+@use "admin/nodes";
+@use "admin/notices";
+@use "admin/pagination";
+@use "admin/preview_window";
+@use "admin/resource_info";
+@use "admin/search";
+@use "admin/selects";
+@use "admin/shoelace";
+@use "admin/sitemap";
+@use "admin/spinner";
+@use "admin/tables";
+@use "admin/tags";
+@use "admin/toolbar";
+@use "admin/typography";
+@use "admin/upload";
+@use "cropper.min";

data/app/stylesheets/alchemy/dark-theme.scss

@@ -0,0 +1,5 @@
+@use "themes";
+
+html {
+  @include themes.dark-theme;
+}

data/app/stylesheets/alchemy/light-theme.scss

@@ -0,0 +1,6 @@
+@use "custom-properties";
+@use "themes";
+
+html {
+  @include themes.light-theme;
+}

data/app/stylesheets/alchemy/theme.scss

@@ -0,0 +1,13 @@
+@use "themes";
+
+@media (prefers-color-scheme: dark) {
+  html {
+    @include themes.dark-theme;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html {
+    @include themes.light-theme;
+  }
+}

data/app/stylesheets/alchemy/welcome.scss

@@ -0,0 +1,75 @@
+@use "custom-properties";
+@use "fonts";
+
+body {
+  background-color: var(--color-blue_dark);
+  color: var(--color-white);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight_normal);
+  font-size: var(--font-size_large);
+  line-height: 22px;
+}
+
+h3 {
+  font-weight: bold;
+  font-size: 1.5rem;
+  line-height: 1.2;
+  margin-bottom: 20px;
+  padding-top: 20px;
+}
+
+.container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 50vw;
+  margin-top: -50px;
+  transform: translateY(-50%) translateX(-50%);
+
+  img {
+    height: 75px;
+    margin-left: -0.35em;
+  }
+}
+
+ul {
+  line-height: 1.6;
+  margin-bottom: 17px;
+  padding: 0;
+  padding-left: 20px;
+  margin: 0px;
+  list-style-position: outside;
+
+  li {
+    color: var(--color-white);
+    margin-bottom: 12px;
+    background-color: none;
+    border-bottom: 0 none;
+    line-height: 22px;
+  }
+}
+
+p {
+  margin: 2em 0;
+}
+
+a {
+  color: var(--color-white);
+  text-decoration: none;
+  transition: all var(--transition-duration) var(--transition-easing);
+
+  &:hover {
+    color: var(--color-white);
+    text-decoration: underline;
+  }
+
+  &.button {
+    background-color: white;
+    border-radius: var(--border-radius_medium);
+    padding: 0.5em 0.75em;
+    text-decoration: none;
+    font-size: 0.9em;
+    font-weight: 600;
+    color: var(--color-blue_dark);
+  }
+}