alchemy_cms 4.0.5 → 4.1.0.beta

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

@@ -1,10 +1,11 @@
 html {
   box-sizing: border-box;
   height: 100%;
+  font-size: $base-font-size;
 
   &.turbolinks-progress-bar::before,
   .turbolinks-progress-bar {
-    background-color: #fff !important;
+    background-color: $blue !important;
     z-index: 400001;
   }
 }
@@ -37,7 +38,7 @@ body {
   padding: 0;
   color: $text-color;
   font: $default-font-style;
-  background-color: $light-gray;
+  background-color: $body-background-color;
   height: 100%;
   cursor: default;
 
@@ -97,7 +98,6 @@ a {
 
   &:focus {
     @extend %blue-focus-style;
-    color: black;
   }
 
   img {
@@ -140,7 +140,7 @@ kbd {
   padding: 0.25em 0.5em;
   vertical-align: top;
   margin-right: 1ex;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
 }
 
 .top-rounded-border {
@@ -167,372 +167,22 @@ kbd {
   user-select: none;
 }
 
-span.updated_at {
-  float: right;
-}
-
-a.drop_down_select img {
-  float: left;
-  position: relative;
-  top: 2px;
-  margin-right: 4px;
-}
-
-#language_select {
-  margin-bottom: 4px;
-}
-
-div.source_editor textarea {
-  width: 100%;
-  height: 358px;
-}
-
-div.edit_source_buttons {
-  height: 18px;
-  margin-top: 8px;
-  float: right;
-  clear: both;
-}
-
-div#page {
-  height: auto !important;
-  height: 100%;
-  min-height: 100%;
-  position: relative;
-/* needed for footer positioning*/
-}
-
-#archive_all .edit_images_bottom span {
-  width: 19px;
-  height: 19px;
-  float: left;
-  margin-right: 4px;
-}
-
-#archive_all .edit_images_bottom span a {
-  display: block;
-  height: 19px;
-  width: 19px;
-  background-repeat: no-repeat;
-  text-decoration: none;
-  background-position: left;
-}
-
-#archive_all .edit_images_bottom span a:hover {
-  background-position: right;
-}
-
-#back_to_site {
-  float: right;
-  margin-right: 8px;
-}
-
-div#new_page_from_clipboard {
-  @extend .hidden;
-}
-
-div#new_page_from_clipboard input.button {
-  float: right;
-}
-
-div#new_page_from_clipboard span {
-  float: left;
-  line-height: 25px;
-}
-
-div#page_status_options {
-  float: left;
-}
-
-div#page_editing_menu {
-  overflow: auto;
-  padding-left: 1px;
-  padding-right: 1px;
-}
-
-#page_sorting_panel p {
-  margin-top: 1em;
-}
-
 .handle {
   cursor: move;
 }
 
-.headline_text_editor {
-  overflow: auto;
-  width: 374px;
-}
-
-.short_content_text {
-  width: 374px;
-  background-color: white;
-  margin-bottom: 10px;
-  padding-bottom: 2px;
-  padding-top: 2px;
-  padding-left: 2px;
-  float: none;
-}
-
-.short_content_text a {
-  color: #000000;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.short_content_text a:hover {
-  color: #000000;
-  text-decoration: underline;
-}
-
-.picture_tool_assign_box {
-  float: right;
-  width: 105px;
-  overflow: auto;
-  padding: 1px;
-}
-
-/* @end */
-
-.short_picture {
-  float: left
-}
-
-.short_element {
-  margin-left: 20px;
-  float: left;
-}
-
-.short_element input {
-  width: 190px;
-  float: left;
-  font: 11px $default-font-face;
-}
-
-.dashed_border {
-  border: 1px dashed;
-}
-
-ul#all_files {
-  list-style-type: none;
-  display: block;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-img.image_in_text {
-  position: relative;
-  top: 3px;
-}
-
-div.right_checkbox {
-  float: left;
-}
-
-div.all_rights {
-  float: left;
-  clear: both;
-  margin-top: 10px;
-}
-
-.date_select_without_time #date_date_4i {
-  @extend .hidden;
-}
-
-.date_select_without_time #date_date_5i {
-  @extend .hidden;
-}
-
 .with_padding {
   padding: 2*$default-padding;
 }
 
 .with_margin {
-  margin: 2*$default-padding;
-}
-
-div#images {
-  margin-top: 16px;
-  margin-bottom: 8px;
-  overflow: visible;
-}
-
-.foot_note, form .input .hint {
-  @include form-hint;
-}
-
-#all_files td.name a {
-  @include zoom-in;
-}
-
-#sitemap .placeholder {
-  background-color: $medium-gray;
-  margin-bottom: 0px;
-  margin-left: 22px;
-}
-
-#page_selector_scroll_container {
-  position: relative;
-  width: 100%;
-}
-
-#page_selector_container {
-  height: 230px;
-  background-color: $light-gray;
-  margin-bottom: 4px;
-  border: 1px inset #e8e8e8;
-  overflow: auto;
-  padding: 4px 0 0 4px;
-  @extend %rounded-border;
-}
-
-#alchemyConfirmation .alchemy_window_buttons {
-  display: block;
-  text-align: right;
-  margin-top: 8px;
-  padding-right: 8px;
-}
-
-#alchemyConfirmation_content div.alchemy_window_message {
-  padding: 2*$default-padding;
-}
-
-input.with_border {
-  margin: 0;
-  padding: 1px;
-  font-size: 12px;
-  border: 1px solid silver;
-}
-
-#image_edit div {
-  height: 25px;
-}
-
-#image_edit div span {
-  float: left;
-  padding: 0;
-  margin-right: 6px;
-  height: 17px;
-  line-height: 19px;
+  margin: 2*$default-margin;
 }
 
 a img {
   border-style: none;
 }
 
-#sitemap_external_links form {
-  margin-left: 5px;
-  margin-bottom: 4px;
-}
-
-input#link_to_text {
-  border-width: 1px;
-  font-size: 11px;
-  line-height: 11px;
-  width: 229px;
-}
-
-.link_window_tab_body {
-  background-color: $light-gray;
-  padding: 2*$default-padding;
-  margin: 0;
-}
-
-.bordertop_white {
-  border-top: 4px solid white;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  overflow: auto;
-  float: none;
-}
-
-#external_link_table .padding_right {
-  padding-right: 8px;
-}
-
-#external_link_table .external_address_input {
-  width: 195px;
-}
-
-table.window_form td.checkbox {
-  text-align: left;
-}
-
-select#url_protocol.medium {
-  margin: 0;
-}
-
-#clipboard_items {
-
-  ul {
-    list-style-type: none;
-    margin: 0 0 8px;
-    padding: 0;
-    height: 220px;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    li {
-      padding: 2*$default-padding;
-      border: $default-border;
-      background-color: white;
-      @extend %rounded-border;
-
-      &.elements {
-        background-color: $medium-gray;
-      }
-
-      .icon {
-        vertical-align: text-bottom;
-        margin-right: $default-padding;
-      }
-
-      .float_right .icon {
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-#trash_items {
-  height: 310px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin-bottom: 1em;
-}
-
-.mceEditor table {
-  border-spacing: 0 !important;
-}
-
-div.browse {
-  margin-bottom: 1em;
-}
-
-#alchemy_preview_window {
-  position: absolute;
-  left: $main-menu-width;
-  top: 75px;
-  width: auto;
-  height: auto;
-  border: 0 none;
-  background: #fff;
-  border-right: $default-border;
-  transition: 200ms ease-in-out;
-
-  .collapsed-menu & {
-    left: $collapsed-main-menu-width;
-  }
-}
-
-#error_trace {
-  border: $default-border;
-  width: 80%;
-  padding: $default-padding;
-  overflow: auto;
-  @extend %rounded-border;
-}
-
 .full_width {
   width: 100%;
 }

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

@@ -2,34 +2,31 @@ button, input[type="submit"], a.button, input.button {
   @include button-defaults;
   position: relative;
 
+  &.secondary {
+    background-color: $secondary-button-bg-color;
+    color: $secondary-button-text-color;
+    border-color: $secondary-button-border-color;
+  }
+
   &.small {
     padding: $default-padding 3*$default-padding;
     vertical-align: inherit;
     line-height: 4*$default-padding;
     font-size: inherit;
-
-    &.with_icon {
-      padding: $default-padding 3*$default-padding $default-padding 6px;
-    }
   }
 
-  &.with_icon {
-    padding: 6px 18px 6px 6px;
-
-    span.icon {
-      margin-top: -$default-margin;
-      margin-right: $default-margin;
-      height: 14px;
-    }
+  &.with_icon .icon {
+    position: relative;
+    top: -1px;
+    margin-right: $default-margin;
+    color: inherit;
   }
 
   &.icon_only {
     margin: 0;
     padding: 0;
     border: 0 none;
-    box-shadow: none;
     background: none;
-    border-radius: 0;
 
     .icon {
       margin: 0;
@@ -50,23 +47,8 @@ button, input[type="submit"], a.button, input.button {
   padding: 3px;
   overflow: hidden;
   text-align: center;
-
-  .icon {
-    display: inline-block;
-    vertical-align: middle;
-    margin-top: -2px;
-  }
-
-  .old_icon {
-    position: relative;
-    background-repeat: no-repeat;
-    width: 22px;
-    height: 20px;
-    display: inline-block;
-    vertical-align: middle;
-    top: -1px;
-    left: -1px;
-  }
+  text-shadow: none;
+  border-radius: $default-border-radius;
 
   img {
     position: absolute;
@@ -85,37 +67,19 @@ button, input[type="submit"], a.button, input.button {
     top: 0px;
     background: none;
     border: none;
-    box-shadow: none;
 
     .icon {
       position: absolute;
       top: 50%;
-      height: 8px;
       transform: translateX(-50%) translateY(-50%);
-
-      &:before {
-        line-height: 10px;
-      }
-
-      &.delete-small {
-        background-position: -4px -76px;
-      }
+      transition: color 250ms;
     }
 
     &:hover {
-      border: $default-border-width $default-border-style $button-hover-border-color;
-      border-radius: $default-border-radius;
-      background: $button-hover-bg-color;
-    }
-  }
-
-  &.old_icon {
-    width: 20px;
-    height: 19px;
+      border: $default-border-width $default-border-style $icon-color;
+      color: $icon-color;
 
-    img {
-      top: 0;
-      left: 1px;
+      .icon { color: inherit }
     }
   }
 
@@ -143,7 +107,6 @@ button, input[type="submit"], a.button, input.button {
 button.icon_button {
   background: transparent;
   border: 0 none;
-  border-radius: 0;
   box-shadow: none;
 
   &:disabled, &.disabled {
@@ -169,14 +132,14 @@ button.icon_button {
       background-color: darken($white, 10%);
       border: $default-border;
       padding: 2px;
-      @extend %rounded-border;
+      border-radius: $default-border-radius;
     }
   }
 
   &:hover .icon_button {
     border: $default-border;
     padding: 2px;
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
     cursor: pointer;
 
     &:focus {
@@ -215,15 +178,15 @@ button.icon_button {
   }
 
   label {
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
     position: absolute;
     visibility: hidden;
     top: -20px;
     left: 50%;
     margin-left: -13px;
     z-index: 30;
-    background: $dark-gray;
-    color: #fff;
+    background-color: $tooltip-background-color;
+    color: $white;
     padding: $default-padding 2*$default-padding;
     line-height: 1;
     box-shadow: 0 0 4px $default-border-color;
@@ -238,7 +201,7 @@ button.icon_button {
       bottom: -10px;
       left: 8px;
       border: 5px transparent solid;
-      border-top-color: $dark-gray;
+      border-top-color: $tooltip-background-color;
     }
 
     &.center {