alchemy_cms 4.0.5 → 4.1.0.beta

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

@@ -7,18 +7,24 @@ table {
 }
 
 .list td, .list th {
-  padding: $default-padding 2*$default-padding;
+  padding: 2*$default-padding;
   vertical-align: top;
   line-height: 18px;
   border-right: 1px solid $medium-gray;
+  transition: background-color 250ms;
+
+  &:last-child {
+    border-right: 0 none;
+  }
 
   &.wrap-text {
     white-space: normal !important;
   }
-}
 
-.list td:first-child, .list th:first-child {
-  border-left: 1px solid $medium-gray
+  &.icon {
+    width: 16px;
+    text-align: center;
+  }
 }
 
 .list th {
@@ -29,29 +35,12 @@ table {
   }
 }
 
-.floatThead-container {
-  background: $light-gray;
-  overflow: visible !important; // the javascript author thought that, but ....
-
-  &:after {
-    position: absolute;
-    bottom: -4px;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    background: linear-gradient($light-gray, rgba($light-gray, .0));
-    content: '';
-  }
-}
-
 th {
   white-space: nowrap;
   text-align: left;
   vertical-align: top;
-  background: $light-gray;
   border-bottom: 1px solid $medium-gray;
-  font-weight: normal;
-  text-transform: uppercase;
+  font-weight: bold;
 
   i {
     font-style: normal;
@@ -77,19 +66,16 @@ th {
   }
 }
 
-tr.odd td {
-  background-color: #eaf3f9;
+tr.even td {
+  background-color: $table-row-even-background-color;
 }
 
-tr.even td {
-  background-color: white;
+tr.odd td {
+  background-color: $table-row-odd-background-color;
 }
 
 .list tr .tools {
   width: 40px;
-  background: $light-gray;
-  border-top: 0 none;
-  border-right: 0 none;
   white-space: nowrap;
   @extend .disable-user-select;
 
@@ -104,48 +90,19 @@ td.heading {
   text-decoration: underline;
 }
 
-.list td.icon, .list th.icon {
-  background-color: $light-gray;
-  background-image: none;
-  border-left: 0 none;
-  padding: 0;
-  border-right: 1px solid $medium-gray;
-  text-align: center;
-  display: table-cell; // reset the .icon display: inline-block
-}
-
 .list .tools .icon, .list td.icon .icon {
-  display: inline-block;
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
   @extend .disable-user-select;
-  background-repeat: no-repeat;
   margin: 0 $default-margin;
-  text-indent: -100px;
-}
-
-.list td.icon .icon {
-  margin: $default-margin 2*$default-margin 0;
 }
 
 .list tr:hover td {
-  background-color: $light_yellow;
+  background-color: $table-row-hover-color;
 }
 
 td, th {
 
   &.center, &.boolean {
     text-align: center;
-
-    .icon.false {
-      @extend .false;
-    }
-
-    .icon.true {
-      @extend .icon;
-      @extend .true;
-    }
   }
 
   &.right {

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

@@ -20,24 +20,6 @@
     margin: 3px $default-margin 0 0;
     padding: 0;
   }
-
-  .button {
-    width: 25px;
-    height: 21px;
-    text-decoration: none;
-    float: right;
-    border-width: 0;
-    border-style: none;
-    font-size: 0;
-    padding: 0;
-    background-repeat: no-repeat;
-    background-position: 0 0;
-
-    &:active {
-      text-decoration: none;
-      background-position: 0 -21px;
-    }
-  }
 }
 
 .toolbar_buttons {
@@ -62,6 +44,15 @@
       }
     }
   }
+
+  .icon_button {
+    line-height: 26px;
+
+    .icon {
+      font-size: 1.25em;
+      text-shadow: 0 0 1px rgba(#fff, 0.75);
+    }
+  }
 }
 
 .toolbar_spacer {
@@ -79,24 +70,6 @@
 #overlay_toolbar {
   @extend %gradiated-toolbar;
   border-bottom: $default-border;
-
-  .button {
-    width: 25px;
-    height: 21px;
-    text-decoration: none;
-    float: right;
-    border-width: 0;
-    border-style: none;
-    font-size: 0;
-    padding: 0;
-    background-repeat: no-repeat;
-    background-position: 0 0;
-
-    &:active {
-      text-decoration: none;
-      background-position: 0 -21px;
-    }
-  }
 }
 
 .button_group {

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

@@ -0,0 +1,8 @@
+#trash_items {
+  height: 310px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin-bottom: 1em;
+
+  .ajax-folder { display: none }
+}

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

@@ -80,7 +80,7 @@
     background-color: $medium-gray;
     position: relative;
     margin-top: 8px;
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
   }
 
   .progress-name,
@@ -93,12 +93,12 @@
   }
 
   .progress-bar-status {
-    font-size: 10px;
+    font-size: $small-font-size;
   }
 
   .progress-bar-container {
     background-color: #f9f9f9;
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
     height: 16px;
     overflow: hidden;
     width: 100%;
@@ -129,11 +129,10 @@
   }
 
   .progress-cancel {
-    @extend .icon-cross;
-    width: 16px;
-    height: 16px;
     position: absolute;
     top: 8px;
     right: 4px;
+    width: 16px;
+    height: 16px;
   }
 }

data/app/assets/stylesheets/tinymce/skins/alchemy/content.min.css.scss

@@ -6,6 +6,7 @@
 html {
   box-shadow: inset 0px 1px 1px $medium-gray;
   border-radius: $default-border-radius;
+  font-size: $base-font-size;
 }
 
 body {

data/app/assets/stylesheets/tinymce/skins/alchemy/skin.min.css.scss

@@ -253,7 +253,7 @@ div.mce-tinymce-inline {
 
 .mce-panel {
   border: 0 solid $default-border-color;
-  background-color: $medium-gray;
+  background-color: $light-gray;
 }
 
 .mce-toolbar-grp {
@@ -354,20 +354,16 @@ div.mce-fullscreen {
 
 #mce-modal-block {
   opacity: 0;
-  filter: alpha(opacity=0);
-  zoom: 1;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: rgb(229, 229, 229);
+  background-color: $dialog-overlay-color;
 }
 
 #mce-modal-block.mce-in {
-  opacity: 0.4;
-  filter: alpha(opacity=40);
-  zoom: 1;
+  opacity: $dialog-overlay-opacity;
 }
 
 .mce-window-move {
@@ -375,9 +371,8 @@ div.mce-fullscreen {
 }
 
 .mce-window {
-  border-radius: $default-border-radius;
-  border: $default-border;
-  background-color: $light-gray;
+  @include border-top-radius($default-border-radius);
+  border: 0 none;
   color: $text-color;
   position: fixed;
   top: 0;
@@ -385,15 +380,28 @@ div.mce-fullscreen {
   opacity: 0;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
+  box-shadow: $dialog-box-shadow;
 
   &.mce-in {
     opacity: 1;
   }
+
+  &.mce-panel {
+    background-color: transparent;
+  }
+
+  .mce-container-body.mce-abs-layout {
+    overflow: visible;
+  }
+}
+
+.mce-window-body {
+  background-color: $dialog-background-color;
 }
 
 .mce-window-head {
   padding: 8px 12px;
-  background-color: $light-blue;
+  background-color: $dialog-header-color;
   position: relative;
   @include border-top-radius($default-border-radius);
 
@@ -402,6 +410,8 @@ div.mce-fullscreen {
     font-weight: bold;
     text-rendering: optimizelegibility;
     padding-right: 10px;
+    color: $dialog-header-text-color;
+    @include antialiased-font-smoothing;
   }
 
   .mce-dragh {
@@ -420,7 +430,7 @@ div.mce-fullscreen {
     font-size: 14px;
     font-weight: bold;
     line-height: 14px;
-    color: $text-color;
+    color: $white;
     cursor: pointer;
     height: 18px;
     overflow: hidden;
@@ -428,9 +438,12 @@ div.mce-fullscreen {
     box-shadow: none;
 
     &:hover {
-      color: #000;
       background: transparent;
     }
+
+    .mce-ico {
+      color: inherit;
+    }
   }
 }
 
@@ -440,15 +453,32 @@ div.mce-fullscreen {
 
 .mce-foot {
   display: block;
-  background-color: transparent;
+  background-color: $dialog-background-color;
   border-top: 0 none;
-  @include border-bottom-radius($default-border-radius);
 
   .mce-btn {
     border-radius: $default-border-radius;
+    border: 0 none;
+
+    &:hover, &:focus, &:active {
+      width: auto !important;
+      background: $button-hover-bg-color !important;
+      border-color: $button-hover-border-color;
+    }
 
     button {
-      padding: 0.5em 1.5em;
+      padding: 0.3em 1.5em;
+      width: auto !important;
+      height: auto !important;
+      border: 1px solid $button-border-color;
+      background-color: $button-bg-color;
+    }
+
+    .mce-txt {
+      vertical-align: middle;
+      color: $button-text-color;
+      font-weight: bold;
+      @include antialiased-font-smoothing;
     }
   }
 }
@@ -504,14 +534,14 @@ body .mce-abs-layout-item {
 
 .mce-tooltip-inner {
   font-size: 11px;
-  background-color: $dark-gray;
-  color: #fff;
+  background-color: $tooltip-background-color;
+  color: $white;
   max-width: 200px;
   padding: $default-padding 2*$default-padding;
   text-align: center;
   white-space: normal;
   box-shadow: 0 0 4px $default-border-color;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
 }
 
 .mce-tooltip-arrow {
@@ -519,7 +549,7 @@ body .mce-abs-layout-item {
   width: 0;
   height: 0;
   line-height: 0;
-  border: 5px solid $dark-gray;
+  border: 5px solid $tooltip-background-color;
 }
 
 .mce-tooltip-arrow-n {
@@ -620,20 +650,19 @@ body .mce-abs-layout-item {
 }
 
 .mce-btn {
-  border: 1px solid #b1b1b1;
-  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25) rgba(0,0,0,0.25);
+  border: 1px solid $default-border-color;
   position: relative;
-  text-shadow: 0 1px 1px rgba(255,255,255,0.75);
+  text-shadow: $button-text-shadow;
   display: inline-block;
   *display: inline;
   *zoom: 1;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-  background: linear-gradient($button-gradient-first-color, $button-gradient-second-color);
+  box-shadow: $button-box-shadow;
+  background-color: $light-gray;
 
   &:focus,
   &:hover {
-    color: #333;
-    background: linear-gradient(darken($button-gradient-first-color, 5%), darken($button-gradient-second-color, 5%));
+    color: $text-color;
+    background-color: darken($medium-gray, 3%);
 
     button {
       background: inherit;
@@ -646,7 +675,7 @@ body .mce-abs-layout-item {
     line-height: 20px;
     *line-height: 16px;
     cursor: pointer;
-    color: #333;
+    color: $text-color;
     text-align: center;
     overflow: visible;
     -webkit-appearance: none;
@@ -827,8 +856,7 @@ i.mce-i-checkbox {
 
 .mce-checkbox.mce-focus i.mce-i-checkbox,
 .mce-checkbox:focus i.mce-i-checkbox {
-  border: 1px solid rgba(82,168,236,0.8);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.65);
+  @include default-focus-style;
 }
 
 .mce-checkbox.mce-disabled .mce-label,
@@ -1497,27 +1525,32 @@ i.mce-i-resize {
 }
 
 .mce-textbox {
-  background: #fff;
-  border: 1px solid #c5c5c5;
+  &:not(.mce-multiline) {
+    box-sizing: border-box;
+    width: auto !important;
+    height: $form-field-height !important;
+    padding: $form-field-padding;
+  }
+
+  background: $form-field-background-color;
+  border-width: $form-field-border-width;
+  border-style: $form-field-border-style;
+  border-color: $form-field-border-color;
   border-radius: $default-border-radius;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+  box-shadow: $form-field-box-shadow;
   display: inline-block;
-  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
   transition: border linear 0.2s, box-shadow linear 0.2s;
-  height: 28px;
   resize: none;
-  padding: 0 4px;
   white-space: pre-wrap;
-  *white-space: pre;
-  color: #333;
+  color: $form-field-text-color;
+  cursor: text;
+  font-size: $form-field-font-size;
+  line-height: $form-field-line-height;
 }
 
 .mce-textbox.mce-focus,
 .mce-textbox:focus {
-  border-color: rgba(82,168,236,0.8);
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.65);
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.65);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.65);
+  @include default-focus-style;
 }
 
 .mce-placeholder .mce-textbox {
@@ -1526,10 +1559,12 @@ i.mce-i-resize {
 
 .mce-textbox.mce-multiline {
   padding: 4px;
+  height: inherit;
 }
 
 .mce-textbox.mce-disabled {
-  color: #adadad;
+  background: $form-field-disabled-bg-color;
+  color: $form-field-disabled-text-color;
 }
 
 .mce-rtl .mce-textbox {