alchemy_cms 7.2.6 → 7.3.1

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

@@ -7,7 +7,7 @@
   width: calc(100vw - #{$collapsed-main-menu-width});
   height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;
-  background-color: $light-gray;
+  background-color: var(--color-grey_very_light);
   transition: $transition-duration ease-in-out;
   transform: translate3d(100%, 0, 0);
 
@@ -29,7 +29,7 @@
 .elements-window-toolbar {
   @extend %gradiated-toolbar;
   display: flex;
-  padding: 2 * $default-padding;
+  padding: var(--spacing-2);
   border-bottom: $default-border;
 
   .right {
@@ -54,7 +54,7 @@ alchemy-tinymce {
 
 #main-content-elements {
   --scrollable-elements-offset: #{$top-menu-height + $toolbar-height};
-  padding: 2 * $default-padding $default-padding 2px;
+  padding: var(--spacing-2) var(--spacing-1) 2px;
 }
 
 #fixed-elements sl-tab-panel {
@@ -83,13 +83,13 @@ alchemy-tinymce {
   }
 
   .preview_text_quote {
-    font-size: $small-font-size;
-    margin-left: $default-margin / 2;
+    font-size: var(--font-size_small);
+    margin-left: var(--spacing-0);
   }
 }
 
 .preview_text_element_name {
-  font-size: $small-font-size;
+  font-size: var(--font-size_small);
   font-weight: bold;
   line-height: 15px;
 }
@@ -97,7 +97,7 @@ alchemy-tinymce {
 .element-handle {
   display: inline-flex;
   cursor: move;
-  padding-right: $default-padding;
+  padding-right: var(--spacing-1);
 }
 
 .element-toggle {
@@ -131,10 +131,10 @@ alchemy-tinymce {
   position: relative;
   border: 1px solid $default-border-color;
   border-radius: $default-border-radius;
-  background-color: $light-gray;
-  margin: 2 * $default-margin 0;
+  background-color: var(--color-grey_very_light);
+  margin: var(--spacing-2) 0;
   transition: box-shadow $transition-duration;
-  scroll-margin: 2 * $default-margin;
+  scroll-margin: var(--spacing-2);
 
   &:first-child {
     margin-top: 0;
@@ -156,13 +156,13 @@ alchemy-tinymce {
       .element-hidden-icon {
         display: inline-flex;
         align-items: center;
-        gap: $default-padding;
+        gap: var(--spacing-1);
         margin-left: auto;
       }
 
       .element-hidden-label {
         line-height: 1;
-        font-size: $small-font-size;
+        font-size: var(--font-size_small);
       }
     }
   }
@@ -172,7 +172,7 @@ alchemy-tinymce {
     border-radius: 0;
 
     .nestable-elements {
-      padding: 2 * $default-padding $default-padding / 2;
+      padding: var(--spacing-2) var(--spacing-0);
     }
   }
 
@@ -237,16 +237,16 @@ alchemy-tinymce {
   &.expanded {
     &.not-fixed {
       .nestable-elements {
-        box-shadow: inset 0 4px 8px -2px darken($medium-gray, 15%);
-        background-color: $medium-gray;
-        padding: $default-padding;
+        box-shadow: inset 0 4px 8px -2px hsl(0deg, 0%, 79%);
+        background-color: var(--color-grey_light);
+        padding: var(--spacing-1);
       }
     }
   }
 
   &.dragged {
     border: 1px solid var(--color-grey_dark);
-    background-color: var(--color-grey_medium);
+    background-color: var(--color-grey_light);
     opacity: 0.5;
     box-shadow: none !important;
 
@@ -272,7 +272,7 @@ alchemy-tinymce {
       opacity: 0;
       z-index: 1;
       box-shadow: 0 1px 1px $default-border-color;
-      background-color: $light-gray;
+      background-color: var(--color-grey_very_light);
       transition: all $transition-duration;
 
       sl-switch::part(label) {
@@ -300,7 +300,7 @@ alchemy-tinymce {
     }
 
     .element-body {
-      margin: 4px 8px;
+      margin: var(--spacing-1) var(--spacing-2);
     }
 
     .ingredient-editor,
@@ -345,19 +345,19 @@ alchemy-tinymce {
   }
 
   .element-body {
-    margin: 2 * $default-padding;
+    margin: var(--spacing-2);
   }
 
   .validation_notice {
     float: left;
-    margin-top: 8px;
-    margin-bottom: 4px;
-    font-size: $small-font-size;
+    margin-top: var(--spacing-2);
+    margin-bottom: var(--spacing-1);
+    font-size: var(--font-size_small);
     text-align: left;
   }
 
   alchemy-message {
-    margin: 2 * $default-margin;
+    margin: var(--spacing-2);
   }
 
   .foot_note {
@@ -366,11 +366,11 @@ alchemy-tinymce {
 
   .autocomplete_tag_list {
     display: block;
-    margin-top: $default-padding;
-    padding: $default-padding 0;
+    margin-top: var(--spacing-1);
+    padding: var(--spacing-1) 0;
 
     label {
-      font-size: $small-font-size;
+      font-size: var(--font-size_small);
     }
 
     .select2-container {
@@ -379,7 +379,7 @@ alchemy-tinymce {
       .select2-choices {
         width: 100%;
         margin-bottom: 0;
-        margin-top: 8px;
+        margin-top: var(--spacing-2);
       }
     }
   }
@@ -387,18 +387,18 @@ alchemy-tinymce {
   hr {
     height: 0;
     width: 100%;
-    margin: 0 0 4 * $default-margin 0;
+    margin: 0 0 var(--spacing-4) 0;
     border: 0 none;
-    border-top: 1px solid $medium-gray;
+    border-top: 1px solid var(--color-grey_light);
     opacity: 1;
   }
 }
 
 .element-header {
   display: flex;
-  gap: $default-padding;
+  gap: var(--spacing-1);
   align-items: center;
-  padding: 2 * $default-padding;
+  padding: var(--spacing-2);
   background-color: $element-header-bg-color;
   @extend .disable-user-select;
   cursor: pointer;
@@ -424,11 +424,11 @@ alchemy-tinymce {
 .element-toolbar {
   display: flex;
   width: 100%;
-  padding: $default-padding;
-  gap: $default-padding;
+  padding: var(--spacing-1);
+  gap: var(--spacing-1);
   height: $element-toolbar-height;
-  border-top: 1px solid $medium-gray;
-  border-bottom: 1px solid $medium-gray;
+  border-top: 1px solid var(--color-grey_light);
+  border-bottom: 1px solid var(--color-grey_light);
 
   .is-fixed & {
     border-top-width: 0;
@@ -444,7 +444,7 @@ alchemy-publish-element-button {
   display: inline-flex;
   align-items: center;
   margin-left: auto;
-  margin-right: $default-margin;
+  margin-right: var(--spacing-1);
   line-height: 1;
 
   sl-switch {
@@ -454,8 +454,8 @@ alchemy-publish-element-button {
 }
 
 .element-footer {
-  border-top: 1px solid $medium-gray;
-  padding: 2 * $default-padding;
+  border-top: 1px solid var(--color-grey_light);
+  padding: var(--spacing-2);
   text-align: right;
 
   .button {
@@ -465,9 +465,9 @@ alchemy-publish-element-button {
 
 .ingredient-group {
   width: 100%;
-  padding: $default-padding 0;
+  padding: var(--spacing-1) 0;
   position: relative;
-  border-bottom: 1px solid $medium-gray;
+  border-bottom: 1px solid var(--color-grey_light);
 
   &:last-child {
     border-bottom: none;
@@ -480,7 +480,7 @@ alchemy-publish-element-button {
     justify-content: space-between;
     font-weight: bold;
     text-decoration: none;
-    padding: $default-padding 1px;
+    padding: var(--spacing-1) 1px;
   }
 
   &[open] {
@@ -502,12 +502,12 @@ alchemy-publish-element-button {
 .ingredient_link_buttons {
   display: flex;
   position: absolute;
-  bottom: 2 * $default-margin;
+  bottom: var(--spacing-1);
   right: 0;
 
   .icon_button {
     &:not(.linked) {
-      background-color: $medium-gray;
+      background-color: var(--color-grey_light);
       border-color: $default-border-color;
       border-width: $form-field-border-width;
       border-style: $form-field-border-style;
@@ -564,7 +564,7 @@ alchemy-publish-element-button {
   bottom: 0;
   z-index: 0;
   width: 100%;
-  padding: $default-padding;
+  padding: var(--spacing-1);
   background-color: #fff;
   border-bottom-left-radius: $default-border-radius;
   border-bottom-right-radius: $default-border-radius;
@@ -587,7 +587,7 @@ alchemy-publish-element-button {
   padding-left: 1px; // Compensate the box shadow
 
   + .picture {
-    padding-left: $default-padding;
+    padding-left: var(--spacing-1);
     padding-right: 1px; // Compensate the box shadow
   }
 
@@ -596,7 +596,7 @@ alchemy-publish-element-button {
     --picture-height: 120px;
     display: inline-block;
     width: 160px;
-    margin: $default-margin 0;
+    margin: var(--spacing-1) 0;
     padding: 0;
     padding-bottom: 34px;
     box-shadow: 0 0 1px 1px $default-border-color;
@@ -636,49 +636,69 @@ alchemy-publish-element-button {
 
   .picture_ingredient_css_class {
     position: absolute;
-    z-index: 1;
-    bottom: 34px;
-    background-color: rgba(255, 254, 255, 0.7);
-    padding: 4px 8px;
-    font-size: $small-font-size;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-1);
+    z-index: 0;
+    bottom: 35px;
+    background-color: rgba(0, 0, 0, 0.15);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    color: var(--color-white);
+    padding: var(--spacing-1) var(--spacing-2);
+    font-size: var(--font-size_small);
     overflow: hidden;
     max-width: 100%;
     text-overflow: ellipsis;
+
+    .icon {
+      fill: currentColor;
+      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.25));
+    }
   }
 }
 
 .ingredient-editor.headline {
   &.with-level-select {
     input[type="text"] {
-      padding-right: $form-field-addon-width + 2 * $default-padding;
+      padding-right: calc(#{$form-field-addon-width} + var(--spacing-2));
     }
 
     &.with-anchor {
       input[type="text"] {
-        padding-right: 22px + $form-field-addon-width + $default-padding;
+        padding-right: calc(
+          22px + #{$form-field-addon-width} + var(--spacing-1)
+        );
       }
     }
   }
 
   &.with-size-select {
     input[type="text"] {
-      padding-right: $form-field-addon-width + 2 * $default-padding;
+      padding-right: calc(#{$form-field-addon-width} + var(--spacing-2));
     }
 
     &.with-anchor {
       input[type="text"] {
-        padding-right: 22px + $form-field-addon-width + $default-padding;
+        padding-right: calc(
+          22px + #{$form-field-addon-width} + var(--spacing-1)
+        );
       }
     }
 
     &.with-level-select {
       input[type="text"] {
-        padding-right: 2 * ($form-field-addon-width + $default-padding);
+        padding-right: calc(
+          2 * (#{$form-field-addon-width} + var(--spacing-1))
+        );
       }
 
       &.with-anchor {
         input[type="text"] {
-          padding-right: 16px + 2 * ($form-field-addon-width + $default-padding);
+          padding-right: calc(
+            var(--spacing-4) + 2 *
+              (#{$form-field-addon-width} + var(--spacing-1))
+          );
         }
       }
     }
@@ -691,11 +711,11 @@ alchemy-publish-element-button {
   .file {
     display: flex;
     align-items: center;
-    gap: $default-padding;
-    margin: 6px 0 $default-margin;
-    padding: 0 $default-padding 0 2 * $default-padding;
+    gap: var(--spacing-1);
+    margin: 6px 0 var(--spacing-1);
+    padding: 0 var(--spacing-1) 0 var(--spacing-2);
     border: $default-border;
-    background-color: $white;
+    background-color: var(--color-white);
     border-radius: $default-border-radius;
     height: $form-field-height;
 
@@ -712,27 +732,27 @@ alchemy-publish-element-button {
     align-items: center;
     white-space: nowrap;
     overflow: hidden;
-    font-size: $small-font-size;
+    font-size: var(--font-size_small);
     text-overflow: ellipsis;
-    padding: $default-padding;
+    padding: var(--spacing-1);
   }
 
   .remove_file_link {
     width: 24px;
-    padding: $default-padding;
+    padding: var(--spacing-1);
   }
 }
 
 .file_tools {
   display: flex;
-  gap: $default-padding;
+  gap: var(--spacing-1);
   align-items: center;
   background-color: white;
   border-radius: 0 $default-border-radius $default-border-radius 0;
 
   a {
     display: inline-flex;
-    padding: $default-padding;
+    padding: var(--spacing-1);
     justify-content: center;
     align-items: center;
     text-decoration: none;
@@ -742,7 +762,7 @@ alchemy-publish-element-button {
 
 div.tinymce_container {
   position: relative;
-  margin: $default-margin 0;
+  margin: var(--spacing-1) 0;
 
   .spinner {
     top: 70px;
@@ -762,7 +782,7 @@ select.long {
 
 .ingredient-editor {
   width: 100%;
-  padding: $default-padding 0;
+  padding: var(--spacing-1) 0;
   position: relative;
 
   .thin_border,
@@ -772,12 +792,14 @@ select.long {
 
   &.linkable {
     input[type="text"] {
-      padding-right: 2 * ($form-field-addon-width + $default-padding);
+      padding-right: calc(2 * (#{$form-field-addon-width} + var(--spacing-1)));
     }
 
     &.with-anchor {
       input[type="text"] {
-        padding-right: 26px + 2 * ($form-field-addon-width + $default-padding);
+        padding-right: calc(
+          26px + 2 * (#{$form-field-addon-width} + var(--spacing-1))
+        );
       }
     }
   }
@@ -809,7 +831,7 @@ select.long {
   &.display_inline {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 4px;
+    margin-right: var(--spacing-1);
     vertical-align: top;
 
     .thin_border,
@@ -852,8 +874,8 @@ select.long {
 
   label {
     display: flex;
-    margin: $default-margin 0;
-    font-size: $small-font-size;
+    margin: var(--spacing-1) 0;
+    font-size: var(--font-size_small);
     line-height: 15px;
     text-indent: 1px;
 
@@ -866,13 +888,13 @@ select.long {
       display: inline-block;
       vertical-align: middle;
       min-width: 90px;
-      margin-right: 4px;
+      margin-right: var(--spacing-1);
     }
   }
 
   &.select {
     label {
-      margin-bottom: 2 * $default-margin;
+      margin-bottom: var(--spacing-2);
     }
 
     select,
@@ -887,11 +909,24 @@ select.long {
       }
     }
   }
+
+  .input-field {
+    position: relative;
+
+    .input-addon {
+      bottom: var(--spacing-1);
+    }
+  }
+
+  .validation-hint {
+    display: block;
+    text-align: right;
+  }
 }
 
 div.pictures_for_element {
   overflow: auto;
-  margin-top: 4px;
+  margin-top: var(--spacing-1);
 }
 
 textarea.has_tinymce {
@@ -912,11 +947,12 @@ textarea.has_tinymce {
 }
 
 .element_errors {
-  margin-top: 8px;
-  margin-bottom: 8px;
+  display: flex;
+  gap: var(--spacing-1);
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
   background-color: $error_background_color;
-  padding: 2 * $default-padding;
-  list-style-type: none;
+  padding: var(--spacing-2);
   border-radius: $default-border-radius;
   color: $error_text_color;
   border: 1px solid $error_border_color;
@@ -925,13 +961,17 @@ textarea.has_tinymce {
     margin: 0;
     line-height: 24px;
   }
+
+  .icon {
+    fill: currentColor;
+  }
 }
 
 .is-fixed {
   &.with-ingredients {
     > .element-footer {
       border-top: 0;
-      border-bottom: 1px solid $medium-gray;
+      border-bottom: 1px solid var(--color-grey_light);
     }
   }
 }
@@ -941,12 +981,12 @@ textarea.has_tinymce {
   width: 100%;
 
   .not-fixed & {
-    width: calc(100% - 8px);
-    margin: 4px;
+    width: calc(100% - var(--spacing-2));
+    margin: var(--spacing-1);
   }
 
   &.compact {
-    width: calc(50% - 8px);
+    width: calc(50% - var(--spacing-2));
   }
 }
 
@@ -968,12 +1008,12 @@ textarea.has_tinymce {
 
   .element-editor {
     position: relative;
-    margin: $default-margin;
+    margin: var(--spacing-1);
   }
 }
 
 .add-nested-element {
-  padding: $default-padding;
+  padding: var(--spacing-1);
 }
 
 .droppable-elements {
@@ -986,38 +1026,38 @@ label.ingredient-date--label,
   display: inline-flex;
   align-items: center;
   position: absolute;
-  bottom: 3 * $default-padding;
+  bottom: var(--spacing-2);
   margin: 0 !important;
 }
 
 label.ingredient-date--label {
-  padding: $default-padding;
+  padding: var(--spacing-1);
   right: 5px;
 }
 
 .edit-ingredient-anchor-link {
-  right: $default-padding;
+  right: var(--spacing-1);
 
   a {
     display: inline-flex;
     align-items: center;
-    padding: $default-padding;
+    padding: var(--spacing-1);
   }
 
   .linkable & {
-    right: 2 * $form-field-addon-width + $default-padding;
+    right: calc(2 * #{$form-field-addon-width} + var(--spacing-1));
   }
 
   .with-size-select & {
-    right: $form-field-addon-width + $default-padding;
+    right: calc(#{$form-field-addon-width} + var(--spacing-1));
   }
 
   .with-level-select & {
-    right: $form-field-addon-width + $default-padding;
+    right: calc(#{$form-field-addon-width} + var(--spacing-1));
   }
 
   .with-level-select.with-size-select & {
-    right: 2 * $form-field-addon-width + $default-padding;
+    right: calc(2 * #{$form-field-addon-width} + var(--spacing-1));
   }
 }
 
@@ -1027,6 +1067,6 @@ label.ingredient-date--label {
   bottom: 15px;
 
   > a {
-    padding: $default-padding;
+    padding: var(--spacing-1);
   }
 }

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

@@ -1,8 +1,8 @@
 #errorExplanation {
   background: #ffdfdf;
-  padding: 2*$default-padding;
+  padding: var(--spacing-2);
   text-align: left;
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing-2);
   border: 1px solid #d08f91;
   color: #690001;
   border-radius: $default-border-radius;
@@ -12,13 +12,14 @@
   }
 
   ul {
-    padding: 0 0 0 16px;
+    padding: 0 0 0 var(--spacing-4);
   }
 }
 
-div#errors, div.errors {
-  margin-bottom: 8px;
-  padding: 8px 8px 4px 28px;
+div#errors,
+div.errors {
+  margin-bottom: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-7);
   border-width: 1px;
   border-style: solid;
   border-radius: $default-border-radius;
@@ -48,3 +49,18 @@ body.error {
     margin: 0;
   }
 }
+
+.turbo-frame-error {
+  display: block;
+  padding: var(--spacing-2);
+  background-color: var(--color-yellow_medium);
+  border: 1px solid var(--color-yellow_dark);
+  border-radius: var(--border-radius_medium);
+  margin: var(--spacing-2);
+  color: var(--color-yellow_dark);
+
+  &:before {
+    content: "⚠️";
+    padding: var(--spacing-2);
+  }
+}