alchemy_cms 7.0.8 → 7.1.0.pre.b2

data/app/assets/stylesheets/alchemy/flash.scss

@@ -7,15 +7,19 @@ div#flash_notices {
 
   .flash.error {
     cursor: pointer;
-    padding-right: 24px;
+    padding-right: 32px;
 
     &:before {
-      content: fa-content($fa-var-times);
+      display: flex;
       position: absolute;
-      right: 2*$default-padding;
-      top: 11px;
-      font-size: $small-font-size;
-      font-family: 'Font Awesome 5 Free';
+      right: 2 * $default-padding;
+      top: 7px;
+      width: 20px;
+      height: 20px;
+      font-family: "remixicon";
+      content: $ri-close-line;
+      align-items: center;
+      justify-content: center;
     }
   }
 }
@@ -23,22 +27,24 @@ div#flash_notices {
 div.flash {
   border-radius: $default-border-radius;
   opacity: 0.95;
-  padding: 8px 8px 8px 30px;
+  padding: 8px 16px 8px 32px;
   font-weight: bold;
   border-width: 1px;
   border-style: solid;
   z-index: 1000;
-  margin: $default-margin $default-margin 2*$default-margin;
+  margin: $default-margin $default-margin 2 * $default-margin;
   position: relative;
   min-height: 2.6em;
-  word-break: break-all;
+  word-break: break-word;
   transition-property: opacity, transform;
   transition-duration: 0.4s;
+  line-height: 1.5;
 
   .icon {
     position: absolute;
-    top: 10px;
-    left: 8px;
+    top: 5px;
+    left: 2 * $default-padding;
+    vertical-align: bottom;
     color: inherit;
   }
 
@@ -66,7 +72,9 @@ div.flash {
     background-color: $info_background_color;
   }
 
-  &.warn, &.warning, &.alert {
+  &.warn,
+  &.warning,
+  &.alert {
     border-color: $warning_border_color;
     color: $warning_text_color;
     background-color: $warning_background_color;

data/app/assets/stylesheets/alchemy/forms.scss

@@ -23,20 +23,21 @@ form {
     padding: $default-padding 0;
     @include clearfix;
 
-    > input[type="url"],
-    > input[type="number"],
-    > input[type="text"],
-    > input[type="email"],
-    > input[type="password"],
-    > textarea,
-    > .select2-container,
-    > .autocomplete_tag_list,
-    > .mce-tinymce,
-    > .with-hint {
+    input[type="url"],
+    input[type="number"],
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    textarea,
+    select,
+    .select2-container,
+    .autocomplete_tag_list,
+    .tinymce_container {
       width: $form-right-width;
       float: right;
     }
 
+    .input > select,
     .input > .select2-container {
       width: 100%;
     }
@@ -52,6 +53,7 @@ form {
       line-height: 16px;
     }
 
+    select,
     .select2-container {
       margin: 4px 0;
     }
@@ -127,10 +129,11 @@ form {
     width: $form-field-addon-width;
     position: absolute;
     bottom: 2 * $default-padding;
+    --select-background-image: none;
 
     select {
       width: 100%;
-      padding: 0 2px;
+      padding: 0;
       text-align: center;
     }
 
@@ -165,16 +168,6 @@ form {
     }
   }
 
-  .input > .with-hint,
-  .checkbox > .with-hint {
-    cursor: default;
-
-    input,
-    textarea {
-      cursor: not-allowed;
-    }
-  }
-
   .inline-input {
     @include clearfix;
     margin: 0 -1 * $default-margin;
@@ -231,12 +224,17 @@ form {
   }
 
   .input-column {
-    float: left;
     padding: 0 $default-padding;
-    width: 50%;
+
+    input[type] {
+      float: none;
+      width: 100%;
+    }
   }
 
   .input-row {
+    display: flex;
+
     .input-column {
       &:first-of-type {
         padding-left: 0;
@@ -249,17 +247,6 @@ form {
   }
 }
 
-// styles for link overlay selects
-.window_form {
-  td.checkbox {
-    text-align: left;
-  }
-
-  .select2-container {
-    width: 100%;
-  }
-}
-
 .input-column > label {
   display: block;
   margin-top: $default-margin + 1;

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

@@ -1,13 +1,12 @@
-div#overlay {
+alchemy-overlay {
   display: none;
   position: fixed;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   z-index: 400000;
   background-color: rgba(229, 229, 229, 0.4);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #40E5E5E5, endColorstr = #40E5E5E5);
 }
 
 div#overlay_text_box {
@@ -44,7 +43,6 @@ div#overlay_text_box {
 #header {
   display: flex;
   height: $header-height;
-  line-height: $header-height;
   background: $header-background;
   border-bottom: $default-border;
   position: relative;
@@ -54,28 +52,18 @@ div#overlay_text_box {
   }
 
   .page_status_and_name {
-    padding: 0 8px;
+    align-items: end;
+    padding: $default-padding 2 * $default-padding;
     background-color: $medium-gray;
     text-shadow: $text-shadow-light;
     @extend .disable-user-select;
     @extend .locked_page;
     cursor: default;
     border-bottom-color: $toolbar-bg-color;
-
-    .hint-bubble {
-      left: -40px;
-      transform: none;
-
-      &:before {
-        left: 47px;
-      }
-    }
   }
 
   .page_name {
-    display: inline-block;
     margin-right: $default-margin;
-    line-height: $header-height;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -97,31 +85,22 @@ div#overlay_text_box {
 }
 
 #user_info {
+  display: flex;
+  align-items: center;
   height: $header-height;
-  font-size: $small-font-size;
-  padding-left: 2*$default-padding;
+  padding-left: 2 * $default-padding;
   margin-left: auto;
   border-bottom: $default-border;
   background-color: $header-background;
 
-  .select2-container, select {
-    height: $form-field-height;
-    margin-top: -3px;
-  }
-
-  .select2-choice, select {
-    background: transparent;
+  select {
+    background-color: transparent;
     border: none;
     border-radius: 0;
     border-left: $default-border;
-    height: $header-height;
-  }
-
- .select2-choice {
-    line-height: 2;
   }
 
   .current-user-name {
-    padding-right: 2*$default-padding;
+    padding-right: 2 * $default-padding;
   }
 }

data/app/assets/stylesheets/alchemy/hints.scss

@@ -1,63 +1,5 @@
-.hint-with-icon {
-  @extend .with-hint;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin: 0 $default-margin;
-
-  .toolbar_buttons & {
-    margin: 0 2*$default-margin;
-  }
-
-  > .icon {
-    text-indent: 0;
-  }
-}
-
-.with-hint {
-  position: relative;
-
-  &:hover {
-    cursor: help;
-
-    > .hint-bubble {
-      @include hint-hover-style;
-    }
-  }
-
-  > .hint-bubble {
-    visibility: hidden;
-    background-color: $hint-background-color;
-    color: $hint-text-color;
-    border-radius: $default-border-radius;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, .3);
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 20px;
-    z-index: 100;
-    padding: 8px;
-    line-height: 1.5em;
-    min-width: 180px;
-    max-width: 300px;
-    white-space: normal;
-    text-align: left;
-    font-size: $default-font-size;
-    opacity: 0;
-    transition: .3s;
-    pointer-events: none;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: -8px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0px;
-      height: 0px;
-      border-style: solid;
-      border-width: 0 8px 8px 8px;
-      border-color: transparent transparent $light_yellow transparent;
-    }
-  }
+.like-hint-tooltip {
+  cursor: help;
+  --sl-tooltip-background-color: #{$hint-background-color};
+  --sl-tooltip-color: #{$hint-text-color};
 }

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

@@ -4,7 +4,6 @@ $image-overlay-transition-duration: $transition-duration;
 $image-overlay-transition-easing: ease-in;
 
 .alchemy-image-overlay {
-
   &.open {
     background-color: rgba(0, 0, 0, 0.6);
   }
@@ -19,19 +18,17 @@ $image-overlay-transition-easing: ease-in;
 }
 
 .alchemy-image-overlay-dialog {
-
   &.hide-form {
-
     .picture-details-overlay {
       right: -$image-overlay-form-width;
     }
 
     .zoomed-picture-background {
-      padding-right: 2*$default-padding;
+      padding-right: 2 * $default-padding;
     }
 
     .alchemy-image-overlay-close {
-      right: $picture-overlay-handle-width + 2*$default-padding;
+      right: $picture-overlay-handle-width + 2 * $default-padding;
     }
 
     .next-picture {
@@ -53,18 +50,21 @@ $image-overlay-transition-easing: ease-in;
   height: 100%;
 
   > .message {
-    margin: 2*$default-margin;
+    margin: 2 * $default-margin;
     max-width: 400px;
   }
 }
 
 .alchemy-image-overlay-close {
+  position: absolute;
   width: 32px;
   height: 32px;
-  top: 2*$default-padding;
-  right: 2*$default-padding + $picture-overlay-handle-width + $image-overlay-form-width;
+  top: 2 * $default-padding;
+  right: 2 * $default-padding + $picture-overlay-handle-width +
+    $image-overlay-form-width;
   cursor: pointer;
-  transition: right $image-overlay-transition-duration $image-overlay-transition-easing;
+  transition: right $image-overlay-transition-duration
+    $image-overlay-transition-easing;
 
   .icon {
     font-size: 2em;
@@ -84,14 +84,16 @@ $image-overlay-transition-easing: ease-in;
   top: 0;
   background-color: $medium-gray;
   box-shadow: -2px 0 $default-padding -2px $text-color;
-  transition: right $image-overlay-transition-duration $image-overlay-transition-easing;
+  transition: right $image-overlay-transition-duration
+    $image-overlay-transition-easing;
 }
 
 .picture-details-overlay {
   right: 0;
   width: $image-overlay-form-width;
   height: 100%;
-  padding: 2*$default-padding 4*$default-padding 2*$default-padding $default-padding;
+  padding: 2 * $default-padding 4 * $default-padding 2 * $default-padding
+    $default-padding;
   overflow: auto;
 
   form .control-label,
@@ -123,7 +125,8 @@ $image-overlay-transition-easing: ease-in;
     transform: translate(-50%, -50%);
     font-size: 1.2em;
     color: $text-color;
-    transition: transform $image-overlay-transition-duration $image-overlay-transition-easing;
+    transition: transform $image-overlay-transition-duration
+      $image-overlay-transition-easing;
   }
 
   &:hover {
@@ -134,17 +137,19 @@ $image-overlay-transition-easing: ease-in;
 .zoomed-picture-background {
   width: 100%;
   height: 100%;
-  padding-top: 2*$default-padding;
-  padding-right: $image-overlay-form-width + 2*$default-padding + $picture-overlay-handle-width;
-  padding-bottom: 2*$default-padding;
-  padding-left: 2*$default-padding;
+  padding-top: 2 * $default-padding;
+  padding-right: $image-overlay-form-width + 2 * $default-padding +
+    $picture-overlay-handle-width;
+  padding-bottom: 2 * $default-padding;
+  padding-left: 2 * $default-padding;
   margin: 0 auto;
   text-align: center;
   cursor: pointer;
-  transition: padding-right $image-overlay-transition-duration $image-overlay-transition-easing;
+  transition: padding-right $image-overlay-transition-duration
+    $image-overlay-transition-easing;
 
   &:before {
-    content: '';
+    content: "";
     vertical-align: middle;
     display: inline-block;
     height: 100%;
@@ -156,8 +161,8 @@ $image-overlay-transition-easing: ease-in;
     height: auto;
     max-width: 100%;
     max-height: 100%;
-    box-shadow: 0 0 2*$default-margin $text-color;
-    background-color: $dark-gray;
+    box-shadow: 0 0 2 * $default-margin $text-color;
+    background: $thumbnail-background;
     vertical-align: middle;
     cursor: default;
   }
@@ -165,16 +170,18 @@ $image-overlay-transition-easing: ease-in;
 
 .picture-file-infos,
 .picture-usage-info {
-  padding: 2*$default-padding 0;
+  padding: 2 * $default-padding 0;
 
   .message {
-    margin: 2*$default-padding 0;
+    margin: 2 * $default-padding 0;
   }
 }
 
 #pictures_page_list {
   h3 {
     display: flex;
+    align-items: center;
+    gap: $default-padding;
     padding: 4px 8px 0;
     margin: 0;
   }
@@ -185,25 +192,20 @@ $image-overlay-transition-easing: ease-in;
   }
 
   .list {
-    margin: 2*$default-margin 0;
+    margin: 2 * $default-margin 0;
 
     li {
       display: flex;
-      padding: 2*$default-padding;
+      align-items: center;
+      gap: $default-padding;
+      padding: 2 * $default-padding;
       border-radius: $default-border-radius;
       white-space: normal;
       margin-bottom: 1em;
     }
   }
 
-  .icon {
-    padding-top: 3px;
-    text-align: left;
-    width: 7%;
-  }
-
   p {
-    width: 93%;
     margin: 0;
   }
 }
@@ -228,7 +230,7 @@ $image-overlay-transition-easing: ease-in;
     transition: background-color $image-overlay-transition-duration linear;
 
     &:hover {
-      background-color: rgba(0,0,0, 0.3);
+      background-color: rgba(0, 0, 0, 0.3);
 
       .icon {
         color: $white;
@@ -253,6 +255,7 @@ $image-overlay-transition-easing: ease-in;
   .next-picture {
     right: $image-overlay-form-width + $picture-overlay-handle-width;
     @include border-left-radius($default-border-radius);
-    transition: right $image-overlay-transition-duration $image-overlay-transition-easing;
+    transition: right $image-overlay-transition-duration
+      $image-overlay-transition-easing;
   }
 }

data/app/assets/stylesheets/alchemy/menubar.scss

@@ -32,13 +32,13 @@
   }
 
   &:after {
-    content: '';
+    content: "";
     width: 24px;
     height: 24px;
     position: absolute;
     right: 10px;
     top: 50%;
-    background: image-url('alchemy/icon-white.svg') 1px 1px no-repeat;
+    background: image-url("alchemy/icon-white.svg") 1px 1px no-repeat;
     background-size: 24px 24px;
     transform: translateY(-50%);
   }
@@ -57,7 +57,8 @@
       list-style-type: none;
       text-align: center;
 
-      a, button {
+      a,
+      button {
         @include button-defaults(
           $background-color: $main-menu-bg-color,
           $hover-color: $blue,
@@ -70,10 +71,10 @@
         );
         width: 100%;
         text-decoration: none !important;
-        text-transform: none;
-        font-family: $default-font-family;
 
-        &:after { display: none }
+        &:after {
+          display: none;
+        }
       }
     }
   }

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

@@ -48,7 +48,7 @@
   position: relative;
   display: block;
   line-height: 46px;
-  margin-bottom: 3*$default-padding;
+  margin-bottom: 3 * $default-padding;
   background-color: transparent;
   transition: background-color $transition-duration $transition-easing;
 
@@ -62,11 +62,13 @@
     }
   }
 
-  &.active, &:hover {
+  &.active,
+  &:hover {
     background-color: $main-menu-active-bg-color;
     cursor: default;
 
-    a, .icon {
+    a,
+    .icon {
       color: $main-menu-active-text-color;
       text-decoration: none;
       text-shadow: none;
@@ -85,8 +87,8 @@
     top: 0;
     left: $collapsed-main-menu-width - 1;
     width: auto;
-    padding-left: 4*$default-padding;
-    padding-right: 4*$default-padding;
+    padding-left: 4 * $default-padding;
+    padding-right: 4 * $default-padding;
     visibility: hidden;
     opacity: 0;
     background-color: $main-menu-active-bg-color;
@@ -101,7 +103,7 @@
         visibility: visible;
         max-width: $main-menu-entry-max-width;
         opacity: 1;
-        padding-left: $default-padding;
+        padding-left: 2 * $default-padding;
         background-color: transparent;
       }
     }
@@ -122,9 +124,14 @@
     opacity: 1;
   }
 
-  img, .icon {
-    display: inline-block;
+  img,
+  svg,
+  .icon {
+    display: inline-flex;
     width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
   }
 
   img {
@@ -135,11 +142,15 @@
 
   .icon {
     vertical-align: -0.15em;
+    font-size: 20px;
+    font-weight: 400;
     color: inherit;
   }
 
   a {
-    display: block;
+    display: flex;
+    align-items: center;
+    height: 46px;
     padding-left: 3 * $default-padding;
     font-weight: bold;
     color: $main-menu-text-color;
@@ -172,14 +183,15 @@
   }
 
   a {
-    padding-left: 4*$default-padding;
-    padding-right: 4*$default-padding;
+    padding-left: 4 * $default-padding;
+    padding-right: 4 * $default-padding;
     background-color: transparent;
     transition: background-color $transition-duration $transition-easing;
     @include truncate($main-menu-width, $display: block, $wrap: nowrap);
   }
 
-  &.active a, a:hover {
+  &.active a,
+  a:hover {
     background-color: darken($dark-orange, 5%);
   }
 }
@@ -235,8 +247,8 @@
 
 .locked_page {
   display: flex;
+  align-items: center;
   flex-wrap: nowrap;
-  line-height: $header-height - 1;
   color: #444;
   border-right: $default-border;
   border-bottom: $default-border;
@@ -255,8 +267,9 @@
 
   > a {
     display: flex;
+    align-items: end;
     cursor: pointer;
-    padding-left: 2 * $default-padding;
+    padding: $default-padding 2 * $default-padding;
 
     &:focus {
       @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
@@ -279,7 +292,6 @@
     color: $muted-text-color;
     font-size: $small-font-size;
     margin-right: $default-margin;
-    line-height: 31px;
   }
 
   .page_language {