alchemy_cms 7.4.10 → 8.0.0.b

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

@@ -1,18 +1,15 @@
+@use "../extends";
+@use "../mixins";
+
+alchemy-uploader {
+  display: inline-block;
+}
+
 .resources-header {
   padding: 0 var(--spacing-2);
-}
 
-.applied-filter {
-  display: inline-block;
-  padding: 2px 6px;
-  border-radius: $default-border-radius;
-  border: 1px solid $default-border-color;
-  white-space: nowrap;
-  font-weight: normal;
-
-  .dismiss-filter {
-    position: relative;
-    top: -1px;
+  h2 {
+    margin: var(--spacing-3) 0;
   }
 }
 
@@ -27,7 +24,7 @@
 
 .selected_item_tools {
   margin: calc(-1 * var(--spacing-2));
-  border-bottom: 1px solid $default-border-color;
+  border-bottom: 1px solid var(--border-color);
   margin-bottom: var(--spacing-4);
   padding: var(--spacing-4);
 
@@ -41,11 +38,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 0 1px 1px $default-border-color;
+  background-color: var(--picture-thumbnail-background-color, transparent);
+
+  &:not(:has(alchemy-icon)) {
+    box-shadow: 0 0 1px 1px var(--border-color);
+  }
 
   &:hover {
     text-decoration: none;
   }
+
+  alchemy-icon {
+    display: flex;
+    width: var(--picture-width);
+    height: var(--picture-height);
+  }
 }
 
 .picture_thumbnail {
@@ -59,7 +66,7 @@
   border-radius: var(--picture-thumbnail-border-radius);
   padding: var(--spacing-2);
   padding-bottom: 2.5em;
-  transition: all $transition-duration;
+  transition: all var(--transition-duration);
 
   img,
   .thumbnail_background {
@@ -71,7 +78,7 @@
     max-height: 100%;
 
     &:not([src*="alchemy/missing-image"]) {
-      background: $thumbnail-background;
+      background: var(--thumbnail-background);
     }
 
     &[src*=".svg"]:not([src*="alchemy/missing-image"]) {
@@ -105,7 +112,7 @@
   &:hover,
   &:focus-within,
   &.active {
-    box-shadow: 0 0 4px 2px $default-border-color;
+    box-shadow: 0 0 4px 2px var(--border-color);
 
     .picture_tool.select {
       visibility: visible;
@@ -149,7 +156,7 @@
 
 #pictures {
   .thumbnail_background {
-    @include zoom-in;
+    @include mixins.zoom-in;
   }
 }
 
@@ -165,20 +172,22 @@ div.assign_image_list_image {
 
 .picture_tool {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
   align-items: center;
   justify-content: center;
   position: absolute;
-  background-color: white;
+  background-color: var(--picture-tool-background-color);
   top: var(--spacing-1);
-  padding: var(--spacing-0);
+  padding: var(--spacing-1);
   z-index: 10;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
   box-shadow: 0 0 1px var(--color-grey_dark);
 
   &:hover {
     text-decoration: none;
+    background-color: var(--picture-tool-hover-background-color);
+    transition: background-color var(--transition-duration);
   }
 
   &.visible {
@@ -230,7 +239,7 @@ div.assign_image_list_image {
   pointer-events: none;
 
   .tag {
-    box-shadow: 0 0 2px 2px $default-border-color;
+    box-shadow: 0 0 2px 2px var(--border-color);
   }
 }
 
@@ -238,30 +247,30 @@ div.assign_image_list_image {
 .picture_tool {
   visibility: hidden;
   opacity: 0;
-  transition: opacity $transition-duration;
+  transition: opacity var(--transition-duration);
 }
 
 div#library_sidebar {
   display: flex;
   flex-direction: column;
   position: fixed;
-  border-left: 1px solid $default-border-color;
+  border-left: 1px solid var(--border-color);
   top: 0;
   right: 0;
-  width: 232px;
+  width: var(--sidebar-width);
 
-  padding: calc(#{$top-menu-height} + var(--spacing-2)) var(--spacing-4)
-    calc(#{$pagination-height} + var(--spacing-2)) var(--spacing-4);
+  padding: calc(var(--top-menu-height) + var(--spacing-2)) var(--spacing-4)
+    calc(var(--pagination-height) + var(--spacing-2)) var(--spacing-4);
   height: 100%;
   z-index: 3;
-  background-color: var(--color-grey_very_light);
+  background-color: var(--sidebar-background-color);
 
   h2 {
     margin-top: var(--spacing-4);
   }
 
   h3 {
-    margin: 2em 0 1em;
+    margin: 1.5em 0 1em;
   }
 }
 
@@ -269,15 +278,9 @@ div#library_sidebar {
   position: absolute;
 }
 
-div#filter_bar {
-  .selectboxit {
-    width: 194px;
-  }
-}
-
 .alchemy-dialog-body {
   #library_sidebar {
-    padding: 0 var(--spacing-4);
+    padding: 0 var(--spacing-4) var(--pagination-height);
   }
 }
 
@@ -300,7 +303,7 @@ div#filter_bar {
     box-shadow: none;
 
     .thumbnail_background {
-      box-shadow: 0 0 4px 4px $default-border-color;
+      box-shadow: 0 0 4px 4px var(--border-color);
     }
   }
 }
@@ -308,7 +311,7 @@ div#filter_bar {
 #overlay_file_list {
   max-height: 100%;
   overflow-y: auto;
-  padding-bottom: $pagination-height;
+  padding-bottom: var(--pagination-height);
 
   .assign_file_file {
     display: block;
@@ -316,7 +319,7 @@ div#filter_bar {
     word-break: break-all;
 
     &:hover {
-      background-color: var(--color-yellow_light);
+      background-color: var(--table-row-hover-color);
     }
   }
 
@@ -341,5 +344,5 @@ div#filter_bar {
 }
 
 #all_files td.name a {
-  @include zoom-in;
+  @include mixins.zoom-in;
 }

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

@@ -0,0 +1,17 @@
+.attachment_preview_container {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  height: 100%;
+  background-color: var(--panel-background-color);
+  margin-top: va r(--spacing-1);
+
+  img,
+  audio,
+  video {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+  }
+}

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

@@ -1,7 +1,9 @@
+@use "../mixins";
+
 html {
   box-sizing: border-box;
   height: 100%;
-  font-size: $base-font-size;
+  font-size: var(--font-size_medium);
 
   &.turbo-progress-bar::before,
   .turbo-progress-bar {
@@ -28,9 +30,9 @@ noscript {
   width: 100%;
   text-align: center;
   line-height: 1em;
-  border-bottom: 1px solid $warning_border_color;
-  color: $warning_text_color;
-  background-color: $warning_background_color;
+  border-bottom: 1px solid var(--notice-warning-border-color);
+  color: var(--notice-warning-text-color);
+  background-color: var(--notice-warning-background-color);
 
   h1,
   p {
@@ -41,13 +43,13 @@ noscript {
 body {
   margin: 0;
   padding: 0;
-  color: var(--color-text);
-  font: $default-font-style;
-  background-color: $body-background-color;
+  color: var(--text-color);
+  font: var(--font-default);
+  background-color: var(--body-background-color);
   height: 100%;
   cursor: default;
   opacity: 1;
-  transition: opacity $transition-duration;
+  transition: opacity var(--transition-duration);
 
   // Fix for strange element window offset
   &.pages.edit {
@@ -62,7 +64,7 @@ body {
 a {
   color: inherit;
   text-decoration: none;
-  transition: $transition-duration;
+  transition: var(--transition-duration);
 
   &:hover {
     text-decoration: underline;
@@ -76,7 +78,7 @@ a {
 
 a:focus,
 [tabindex]:focus {
-  @include default-focus-style;
+  @include mixins.default-focus-style;
 }
 
 form {
@@ -86,6 +88,7 @@ form {
 hr {
   border: 0 none;
   border-bottom: 1px solid;
+  border-color: var(--border-color);
   opacity: 0.5;
 }
 
@@ -94,8 +97,10 @@ hr {
   max-width: 500px;
   margin: 2em auto;
   padding: var(--spacing-4);
-  background: var(--color-grey_light);
+  background: var(--panel-background-color);
   border-radius: var(--border-radius_medium);
+  border: var(--border-default);
+  border-color: var(--panel-border-color);
 }
 
 .float_right {
@@ -111,19 +116,19 @@ hr {
 }
 
 .top-rounded-border {
-  @include border-top-radius($default-border-radius);
+  @include mixins.border-top-radius(var(--border-radius_medium));
 }
 
 .left-rounded-border {
-  @include border-left-radius($default-border-radius);
+  @include mixins.border-left-radius(var(--border-radius_medium));
 }
 
 .right-rounded-border {
-  @include border-right-radius($default-border-radius);
+  @include mixins.border-right-radius(var(--border-radius_medium));
 }
 
 .bottom-rounded-border {
-  @include border-bottom-radius($default-border-radius);
+  @include mixins.border-bottom-radius(var(--border-radius_medium));
 }
 
 .bottom-left-rounded-border {

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

@@ -0,0 +1,135 @@
+@use "sass:color";
+@use "../mixins";
+
+button,
+input[type="submit"],
+a.button,
+input.button {
+  position: relative;
+  @include mixins.button-defaults;
+
+  &.secondary {
+    background-color: var(--button-secondary-bg-color);
+    color: var(--button-secondary-text-color);
+    border-color: var(--button-secondary-border-color);
+
+    &:focus:not([disabled]):not(.disabled) {
+      @include mixins.default-focus-style(
+        $border-color: var(--button-focus-border-color),
+        $box-shadow: var(--button-focus-box-shadow)
+      );
+    }
+
+    &:hover:not([disabled]):not(.disabled) {
+      background-color: var(--button-secondary-hover-bg-color);
+      border-color: var(--button-secondary-hover-border-color);
+    }
+
+    &:active:not([disabled]):not(.disabled) {
+      border-color: var(--button-hover-border-color);
+      box-shadow: none;
+    }
+  }
+
+  &.small {
+    padding: var(--button-small-padding);
+    line-height: var(--spacing-4);
+    font-size: var(--font-size_small);
+  }
+
+  &.with_icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-1);
+
+    alchemy-icon {
+      fill: currentColor;
+    }
+  }
+}
+
+.icon_button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-button-width);
+  height: var(--icon-button-height);
+  margin: 0;
+  padding: 0;
+  text-shadow: none;
+  border-radius: var(--border-radius_medium);
+  color: var(--icon-color);
+
+  &.small {
+    width: var(--icon-button-small-width);
+    height: var(--icon-button-small-height);
+    background: none;
+    border: none;
+    padding: 0; // button.small has padding
+  }
+
+  &.active,
+  &:active,
+  &:hover:not([disabled]):not(.disabled):not(.linked) {
+    text-decoration: none;
+    background-color: var(--icon-button-hover-bg-color);
+    cursor: pointer;
+  }
+
+  .icon {
+    transition: fill 250ms;
+  }
+
+  &.disabled,
+  &[disabled] {
+    pointer-events: none;
+
+    svg {
+      opacity: 0.3;
+    }
+
+    &:hover {
+      text-decoration: none;
+      cursor: default;
+    }
+  }
+
+  &.linked {
+    @include mixins.button-defaults(
+      $background-color: var(--icon-button-linked-color),
+      $hover-color: var(--icon-button-linked-hover-color),
+      $border: 1px solid var(--icon-button-linked-border-color),
+      $hover-border-color: var(--icon-button-linked-hover-border-color),
+      $box-shadow: none,
+      $padding: 3px,
+      $margin: 0
+    );
+  }
+
+  &:focus:not(.disabled):not([disabled]) {
+    @include mixins.default-focus-style;
+  }
+
+  .spinner {
+    position: static;
+    transform: none;
+  }
+}
+
+button.icon_button {
+  background: transparent;
+  border: 0 none;
+  box-shadow: none;
+  font-weight: normal;
+
+  &:disabled,
+  &.disabled {
+    background: transparent;
+  }
+}
+
+#new_element button.button {
+  float: right;
+}

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

@@ -12,9 +12,9 @@
       align-items: center;
       gap: var(--spacing-2);
       padding: var(--spacing-2);
-      border: $default-border;
+      border: var(--border-default);
       background-color: white;
-      border-radius: $default-border-radius;
+      border-radius: var(--border-radius_medium);
 
       &.elements {
         background-color: var(--color-grey_light);

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

@@ -47,16 +47,13 @@
   }
 }
 
-#update_check {
+alchemy-update-check {
+  display: flex;
   position: relative;
   height: 16px;
   margin-bottom: 2em;
-
-  img#load_info {
-    width: 16px;
-    height: 16px;
-    display: none;
-  }
+  text-align: center;
+  justify-content: center;
 
   > span {
     display: inline-flex;
@@ -70,18 +67,18 @@
     .icon {
       fill: currentColor;
     }
-  }
 
-  #up_to_date {
-    color: $success_text_color;
-  }
+    &.up_to_date {
+      color: var(--notice-success-text-color);
+    }
 
-  #error {
-    color: $error_text_color;
-  }
+    &.error {
+      color: var(--notice-error-text-color);
+    }
 
-  #update_available {
-    color: $warning_text_color;
+    &.update_available {
+      color: var(--notice-warning-text-color);
+    }
   }
 }
 

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

@@ -1,4 +1,4 @@
-$dialog-transition-duration: 150ms;
+@use "../mixins";
 
 .alchemy-image-overlay-container,
 .alchemy-dialog-container {
@@ -14,7 +14,7 @@ $dialog-transition-duration: 150ms;
   opacity: 0;
   transform: scale(0.98);
   transition-property: transform, opacity;
-  transition-duration: $dialog-transition-duration;
+  transition-duration: var(--dialog-transition-duration);
   transition-timing-function: ease-in;
 
   // vertical aligment
@@ -42,7 +42,7 @@ $dialog-transition-duration: 150ms;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0);
-  transition: background-color $dialog-transition-duration linear;
+  transition: background-color var(--dialog-transition-duration) linear;
 
   &.closable {
     cursor: pointer;
@@ -51,7 +51,7 @@ $dialog-transition-duration: 150ms;
 
 .alchemy-dialog-overlay {
   &.open {
-    background-color: rgba($dialog-overlay-color, $dialog-overlay-opacity);
+    background-color: var(--dialog-overlay-color);
   }
 }
 
@@ -67,10 +67,10 @@ $dialog-transition-duration: 150ms;
 .alchemy-dialog {
   white-space: normal;
   margin: var(--spacing-2);
-  @include border-top-radius($default-border-radius);
-  box-shadow: $dialog-box-shadow;
-  background-color: $dialog-background-color;
-  transition: min-height $dialog-transition-duration ease-in-out;
+  @include mixins.border-top-radius(var(--border-radius_medium));
+  box-shadow: var(--dialog-box-shadow);
+  background-color: var(--dialog-background-color);
+  transition: min-height var(--dialog-transition-duration) ease-in-out;
 
   div#jscropper {
     padding: var(--spacing-2);
@@ -127,13 +127,13 @@ $dialog-transition-duration: 150ms;
   align-items: center;
   gap: var(--spacing-1);
   position: relative;
-  height: $dialog-header-height;
-  padding: $dialog-header-padding;
-  background: $dialog-header-color;
-  color: $dialog-header-text-color;
+  height: var(--dialog-header-height);
+  padding: var(--dialog-header-padding);
+  background: var(--dialog-header-color);
+  color: var(--dialog-header-text-color);
   font-weight: normal;
-  font-size: $dialog-header-font-size;
-  @include border-top-radius($default-border-radius);
+  font-size: var(--dialog-header-font-size);
+  @include mixins.border-top-radius(var(--border-radius_medium));
 }
 
 .alchemy-dialog-title {
@@ -143,7 +143,7 @@ $dialog-transition-duration: 150ms;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  @include antialiased-font-smoothing;
+  @include mixins.antialiased-font-smoothing;
 }
 
 .alchemy-image-overlay-close,
@@ -156,9 +156,26 @@ $dialog-transition-duration: 150ms;
   }
 }
 
+.alchemy-dialog-close {
+  display: inline-flex;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: var(--border-radius_medium);
+  color: var(--color-white);
+  padding: 0;
+
+  &:hover {
+    background-color: var(--color-blue_medium);
+  }
+}
+
 .alchemy-dialog-body {
   position: relative;
-  color: var(--color-text);
+  color: var(--text-color);
 
   .message,
   alchemy-message {

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

@@ -0,0 +1,11 @@
+.element-select-item {
+  display: flex;
+  align-items: center;
+
+  > svg {
+    width: auto;
+    height: var(--spacing-4);
+    fill: currentColor;
+    padding-right: var(--spacing-2);
+  }
+}