alchemy_cms 4.0.5 → 4.1.0.beta

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

@@ -1,6 +1,7 @@
 @mixin default-focus-style {
-  border-color: $blue;
-  box-shadow: 0 0 1px 1px $blue;
+  border-color: $focus-color;
+  border-radius: $default-border-radius;
+  box-shadow: 0 0 0 1px $focus-color;
   outline: none;
 
   &::-moz-focus-inner {
@@ -10,37 +11,38 @@
 }
 
 @mixin button-defaults(
-  $first-color: $button-gradient-first-color,
-  $second-color: $button-gradient-second-color,
+  $background-color: $button-bg-color,
+  $hover-color: $button-hover-bg-color,
+  $hover-border-color: $button-hover-border-color,
   $border-radius: $default-border-radius,
+  $border: 1px solid $button-border-color,
   $padding: $button-padding,
-  $margin: $button-margin) {
+  $margin: $button-margin,
+  $color: $button-text-color) {
   display: inline-block;
-  font-size: 12px;
+  font-family: $default-font-family;
+  font-size: $default-font-size;
+  font-weight: bold;
+  line-height: $form-field-line-height;
   padding: $padding;
   cursor: pointer;
   border-radius: $border-radius;
-  background-color: $button-bg-color;
-  background-image: linear-gradient($first-color, $second-color);
-  box-shadow: white 0 1px 0 inset;
-  border: 1px solid $button-border-color;
-  color: $text-color;
-  text-shadow: $button-text-shadow;
+  background-color: $background-color;
+  box-shadow: $button-box-shadow;
+  border: $border;
+  color: $color;
   margin: $margin;
   -webkit-appearance: none;
+  transition: background-color 250ms;
+  @include antialiased-font-smoothing;
 
   &:hover {
     text-decoration: none;
-    background-color: $button-hover-bg-color;
-    background-image: linear-gradient(
-      darken($first-color, 5%),
-      darken($second-color, 5%)
-    );
-    border-color: $button-hover-border-color;
+    background-color: $hover-color;
+    border-color: $hover-border-color;
   }
 
   &:active, &:active:focus {
-    box-shadow: #c4c4c4 0 1px 2px inset;
     border-color: $button-border-color;
   }
 
@@ -51,8 +53,7 @@
   &.disabled, &[disabled],
   &.disabled:active, &[disabled]:active,
   &.disabled:hover, &[disabled]:hover {
-    opacity: 0.6;
-    background: $second-color;
+    background-color: transparentize($button-bg-color, 0.25);
     cursor: not-allowed;
     box-shadow: none;
   }
@@ -63,16 +64,6 @@
   }
 }
 
-@mixin default-label-style {
-  font-size: 10px;
-  text-shadow: #fff 0 1px 2px;
-  margin-top: $default-margin;
-  display: block;
-  line-height: 100%;
-  @extend .disable-user-select;
-  clear: both;
-}
-
 @mixin form-label {
   width: $form-left-width;
   padding-right: 2*$default-padding;
@@ -83,6 +74,7 @@
   word-break: normal;
   float: left;
   text-align: right;
+  font-size: $default-font-size;
 }
 
 @mixin form-heading {
@@ -98,23 +90,23 @@
 @mixin form-value-display {
   float: right;
   width: $form-right-width;
-  margin: $default-form-field-margin;
+  margin: $form-field-margin;
   padding: $default-padding 2*$default-padding;
   line-height: 21px;
-  min-height: $default-form-field-height;
+  min-height: $form-field-height;
   background: white;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
 }
 
 @mixin form-hint($background-color: $light_yellow, $border-color: $medium-gray) {
-  font-size: 10px;
+  font-size: $small-font-size;
   line-height: 1.5em;
   padding: $default-padding;
   background-color: $background-color;
   border: 1px solid $border-color;
   display: block;
   clear: both;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
 }
 
 @mixin animate-left {
@@ -144,28 +136,29 @@
   box-shadow: $shadow;
 }
 
-@mixin tag-base($margin: 2*$default-margin 0, $padding: $default-padding 4*$default-padding $default-padding 6*$default-padding) {
+@mixin tag-base($margin: 2*$default-margin 0, $padding: $default-padding 3*$default-padding) {
   padding: $padding;
   margin: $margin;
   background-color: $medium-gray;
   overflow: hidden;
   position: relative;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
 
   &:before {
-    position: absolute;
-    left: 8px;
-    top: 8px;
-    font-family: 'Alchemy Icons';
-    @extend .icon-tag:before;
-    line-height: 8px;
+    content: fa-content($fa-var-tag);
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    font-size: 0.8em;
+    padding-right: 2*$default-padding;
   }
 }
 
 @mixin linked-button($border-radius: $default-border-radius) {
   @include button-defaults(
-    $first-color: $linked-color,
-    $second-color: darken($linked-color, 10%),
+    $background-color: $linked-button-color,
+    $hover-color: darken($linked-button-color, 10%),
+    $border: 1px solid $linked-border-color,
+    $hover-border-color: darken($linked-border-color, 10%),
     $border-radius: $border-radius,
     $padding: 3px,
     $margin: 0
@@ -193,3 +186,36 @@
   opacity: 1;
   transition-delay: .2s;
 }
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
+@mixin border-top-radius($radius) {
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+  border-bottom-left-radius: $radius;
+  border-bottom-right-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+  border-bottom-left-radius: $radius;
+  border-top-left-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  border-bottom-right-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin antialiased-font-smoothing {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

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

@@ -1,78 +1,147 @@
-$text-color: #333333;
-$muted-text-color: rgba(0, 0, 0, 0.5);
-$light-blue: #cddce5; // #c6dbe7
-$blue: darken($light-blue, 15%);
+$light-blue: #cddce5;
 $very-light-blue: lighten($light-blue, 12%);
-$light-gray: #ededed;
-$medium-gray: #e3e3e3;
+$blue: #2d5a8d;
+$dark-blue: darken($blue, 10%);
+$light-gray: #f7f7f7;
+$medium-gray: #efefef;
 $dark-gray: #666666;
-$light_yellow: #ffffdc;
-$linked-color: #ffd77a;
-$white: #f2f2f2;
-
-$default-font-face: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
-$mono-font-face: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
-$default-font-size: 12px;
-$default-font-style: $default-font-size $default-font-face;
-
-$dialog-header-height: 36px;
-$header-color: $light-blue;
-$header-text-color: $text-color;
-$header-font-size: $default-font-size;
-
-$default-padding: 4px;
-$default-margin: $default-padding;
-
-$default-border-color: #afafaf;
-$border-inset-color: lighten($default-border-color, 20%);
-$default-border-width: 1px;
-$default-border-style: solid;
-$default-border: $default-border-width $default-border-style $default-border-color;
-$default-border-radius: 3px;
-$default-form-field-margin: $default-margin 0;
-$default-form-field-height: 29px;
-
-$button-bg-color: #f7f7f7;
-$button-hover-bg-color: #e6f0f5;
-$button-border-color: #9a9a9a;
-$button-hover-border-color: #888888;
-$button-text-shadow: $white 1px 1px 0;
-$button-gradient-first-color: $white !default;
-$button-gradient-second-color: darken($button-gradient-first-color, 10%) !default;
+$very-dark-gray: #333;
+$dark-gray-blue: rgb(51, 59, 81);
+$light_yellow: #fbfbd8;
+$orange: #ffd77a;
+$dark-orange: #eca96e;
+$white: #fff;
+
+$text-color: rgba($dark-gray-blue, 0.8) !default;
+$muted-text-color: rgba($dark-gray-blue, 0.5) !default;
+$icon-color: rgba($dark-gray-blue, 0.75) !default;
+$linked-color: $orange !default;
+
+$body-background-color: $light-gray !default;
+
+$default-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif !default;
+$mono-font-family: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace !default;
+$base-font-size: 12px !default;
+$default-font-size: 1em !default;
+$small-font-size: 0.9em !default;
+$default-font-style: $default-font-size $default-font-family !default;
+
+$dialog-header-height: 36px !default;
+$dialog-header-color: $dark-blue !default;
+$dialog-header-text-color: $white !default;
+$dialog-header-font-size: $default-font-size !default;
+$dialog-box-shadow: 0 8px 16px rgba(35, 35, 35, 0.5) !default;
+$dialog-overlay-color: rgb(100, 100, 100) !default;
+$dialog-overlay-opacity: 0.4 !default;
+$dialog-background-color: $light-gray !default;
+
+$default-padding: 4px !default;
+$default-margin: $default-padding !default;
+
+$default-border-color: rgba(#afafaf, 0.5) !default;
+$border-inset-color: lighten($default-border-color, 10%) !default;
+$default-border-width: 1px !default;
+$default-border-style: solid !default;
+$default-border: $default-border-width $default-border-style $default-border-color !default;
+$default-border-radius: 3px !default;
+
+$form-field-margin: $default-margin 0 !default;
+$form-field-height: 29px !default;
+$form-field-background-color: $white !default;
+$form-field-border-width: $default-border-width !default;
+$form-field-border-style: $default-border-style !default;
+$form-field-border-color: $default-border-color $default-border-color $border-inset-color $border-inset-color !default;
+$form-field-box-shadow: inset 0px 0 1px $medium-gray !default;
+$form-field-padding: 0.5em 0.75em !default;
+$form-field-font-size: $default-font-size !default;
+$form-field-line-height: 1.25 !default;
+$form-field-text-color: $text-color !default;
+$form-field-disabled-text-color: #888 !default;
+$form-field-disabled-bg-color: rgba($white, 0.5) !default;
+
+$focus-color: rgba(#eca96e, 0.75) !default;
+
+$button-bg-color: $dark-blue !default;
+$button-hover-bg-color: lighten($button-bg-color, 5%) !default;
+$button-border-color: darken($button-bg-color, 5%) !default;
+$button-hover-border-color: lighten($button-border-color, 5%) !default;
+$button-text-color: $white !default;
+$button-text-shadow: none !default;
+$button-box-shadow: none !default;
 $button-padding: 0.5em 1.5em !default;
-$button-margin: $default-form-field-margin !default;
-$linked-button-color: #ffd77a;
+$button-margin: $form-field-margin !default;
 
-$success_border_color: #9cc4a1;
-$success_text_color: #2e5934;
-$success_background_color: #e2efd3;
+$secondary-button-bg-color: transparent !default;
+$secondary-button-text-color: $button-bg-color !default;
+$secondary-button-border-color: $button-bg-color !default;
 
-$info_border_color: #8392b5;
-$info_text_color: #233772;
-$info_background_color: #cadbf3;
+$linked-button-color: rgba($linked-color, 0.75) !default;
+$linked-border-color: darken($linked-color, 10%) !default;
 
-$warning_border_color: #c4c19c;
-$warning_text_color: #726d23;
-$warning_background_color: #f3f0c1;
+$success_border_color: #9cc4a1 !default;
+$success_text_color: #2e5934 !default;
+$success_background_color: #e2efd3 !default;
 
-$error_border_color: #c49c9c;
-$error_text_color: #a23434;
-$error_background_color: #efd3d3;
+$info_border_color: #8392b5 !default;
+$info_text_color: #233772 !default;
+$info_background_color: #cadbf3 !default;
 
-$form-left-width: 35%;
-$form-right-width: 65%;
-$sitemap-line-height: 32px;
+$warning_border_color: #c4c19c !default;
+$warning_text_color: #726d23 !default;
+$warning_background_color: #f3f0c1 !default;
+
+$error_border_color: #c49c9c !default;
+$error_text_color: #a23434 !default;
+$error_background_color: #efd3d3 !default;
+
+$form-left-width: 35% !default;
+$form-right-width: 65% !default;
+
+$sitemap-line-height: 32px !default;
+$sitemap-page-background-color: rgba($white, 0.75) !default;
+$sitemap-page-hover-color: rgba($light_yellow, 0.5) !default;
+$sitemap-info-background-color: rgba($linked-color, 0.5) !default;
+$sitemap-highlight-color: rgba(#fffba5, 0.5) !default;
 
 $main-menu-width: 150px !default;
 $collapsed-main-menu-width: 48px !default;
-$main-menu-bg-color: #baced9 !default;
-$main-menu-active-bg-color: $light-blue !default;
-$main-menu-text-color: #222 !default;
+$main-menu-bg-color: $dark-blue !default;
+$main-menu-active-bg-color: $dark-orange !default;
+$main-menu-active-text-color: $very-dark-gray !default;
+$main-menu-text-color: $white !default;
+$main-menu-icon-color: $white !default;
 $main-menu-entry-max-width: 100px !default;
 $toolbar-bg-color: $medium-gray !default;
 $toolbar-height: 46px !default;
 $element-toolbar-height: 37px !default;
 $header-height: 29px !default;
+$header-background: #d8d8d8 !default;
 $text-shadow-light: rgba($white, 0.5) 0 0 4px !default;
 $transition-duration: 200ms !default;
 $transition-easing: linear !default;
+
+$tooltip-background-color: lighten($dark-gray-blue, 15%) !default;
+
+$addon-icon-opacity: 0.85 !default;
+
+$table-row-even-background-color: $white !default;
+$table-row-odd-background-color: rgba($white, 0.5) !default;
+$table-row-hover-color: rgba($light_yellow, 0.5) !default;
+
+$elements-window-width: 400px !default;
+$element-header-bg-color: $medium-gray !default;
+$top-menu-height: 75px !default;
+
+$tabs-height: 31px !default;
+
+$datepicker_current_bg: $blue !default;
+$datepicker_current_color: $white !default;
+$datepicker_current_box_shadow: none !default;
+$datepicker_hover_bg: $light_yellow !default;
+$datepicker_hover_color: $text-color !default;
+$datepicker_today_bg: $medium-gray !default;
+$datepicker_today_color: $blue !default;
+$datepicker_header_color: $text-color !default;
+$datepicker_day_bg: $light-gray !default;
+$datepicker_day_border: 1px solid $medium-gray !default;
+$datepicker_day_color: $text-color !default;

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

@@ -4,6 +4,9 @@
  *= require_self
  */
 
+@import "fontawesome/fontawesome";
+@import "fontawesome/fa-regular";
+@import "fontawesome/fa-solid";
 @import "alchemy/defaults";
 @import "alchemy/archive";
 @import "alchemy/navigation";
@@ -12,25 +15,28 @@
 @import "alchemy/buttons";
 @import "alchemy/dialogs";
 @import "alchemy/toolbar";
+@import "alchemy/clipboard";
 @import "alchemy/dashboard";
 @import "alchemy/elements";
 @import "alchemy/errors";
 @import "alchemy/flash";
+@import "alchemy/fonts";
 @import "alchemy/forms";
 @import "alchemy/form_fields";
 @import "alchemy/frame";
 @import "alchemy/hints";
 @import "alchemy/icons";
 @import "alchemy/image_library";
-@import "alchemy/modules";
 @import "alchemy/notices";
 @import "alchemy/pagination";
+@import "alchemy/preview_window";
 @import "alchemy/resource_info";
 @import "alchemy/search";
 @import "alchemy/selects";
 @import "alchemy/sitemap";
 @import "alchemy/spinner";
 @import "alchemy/tables";
+@import "alchemy/trash";
 @import "alchemy/lists";
 @import "alchemy/upload";
 @import "alchemy/jquery-ui";

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

@@ -22,7 +22,7 @@ div#image_assign_filter_and_image_sizing {
   display: inline-block;
   border: 1px solid #c0c0c0;
   position: relative;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
   width: 170px;
 
   img {
@@ -108,7 +108,7 @@ div.assign_image_list_image {
   position: absolute;
   background-color: white;
   top: $default-padding;
-  padding: $default-padding/2;
+  padding: 2px 3px;
   z-index: 10;
   display: none;
 
@@ -131,10 +131,6 @@ div.assign_image_list_image {
 
   &.delete {
     right: $default-padding;
-
-    a {
-      background: image-url('alchemy/icons.png') no-repeat -63px -72px;
-    }
   }
 
   a {
@@ -195,10 +191,15 @@ div#filter_bar {
     top: auto;
     width: 200px;
     z-index: 1100;
+    transition: background-color 200ms;
 
     input {
       width: 200px;
-      background-color: #f8f8f8;
+      background-color: transparentize($white, 0.25);
+
+      &:focus {
+        background-color: $white;
+      }
     }
 
     label { display: none }
@@ -218,12 +219,12 @@ div#filter_bar {
     overflow-y: auto;
 
     li {
-      @include tag-base;
       display: block;
 
       &:first-child { margin-top: 0 }
 
       a {
+        @include tag-base;
         text-decoration: none;
         display: block;
       }
@@ -231,9 +232,11 @@ div#filter_bar {
       &:hover { background-color: $very-light-blue }
 
       &.active {
-        background-color: $dark-gray;
 
-        a, &:before { color: $light-gray }
+        a {
+          background-color: $dark-gray;
+          color: $light-gray
+        }
       }
     }
   }
@@ -299,7 +302,7 @@ div#filter_bar {
       display: block;
       line-height: 25px;
       text-decoration: none;
-      padding: 2px $default-padding;
+      padding: $default-padding 2*$default-padding;
     }
 
     .icon {
@@ -326,28 +329,21 @@ div#filter_bar {
 }
 
 .tag {
+  @include tag-base(
+    $margin: $default-margin/2 0,
+    $padding: $default-padding 2*$default-padding $default-padding
+  );
   display: inline-block;
   vertical-align: middle;
-  @extend %rounded-border;
-  padding: $default-padding 2*$default-padding $default-padding 4*$default-padding;
-  margin: $default-margin/2 0;
-  background-color: rgba($medium-gray, 0.85);
   color: $text-color;
-  overflow: hidden;
-  position: relative;
   pointer-events: none;
-  font-size: 10px;
-
-  &:before {
-    position: absolute;
-    left: $default-padding;
-    top: 2*$default-padding;
-    font-family: 'Alchemy Icons';
-    @extend .icon-tag:before;
-    line-height: 6px;
-  }
+  font-size: $small-font-size;
 }
 
 .tags .list .tag {
   padding: 0;
 }
+
+#all_files td.name a {
+  @include zoom-in;
+}