alchemy_cms 2.2.4 → 2.3.rc5

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

@@ -1,31 +1,60 @@
 @import "alchemy/defaults";
 
+html {
+  height: 100%;
+}
+
+noscript {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  text-align: center;
+  line-height: 1em;
+  border-bottom: 1px solid #c4c19c;
+  color: #726d23;
+  background-color: #f3f0c1;
+  h1, p {
+    margin: 16px 0;
+  }
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: $text-color;
+  font: $default-font-style;
+  background-color: $light-gray;
+  height: 100%;
+  cursor: default;
+}
+
 h1 {
   margin: 0 0 10px;
   padding: 0;
   font-weight: bold;
-  font-size: 12px;
+  font-size: $default-font-size;
 }
 
 h2 {
-  margin: 5px 0;
+  margin: $default-margin 0;
   padding-bottom: 5px;
   clear: both;
   font-weight: bold;
-  font-size: 12px;
+  font-size: $default-font-size;
 }
 
 h3 {
-  margin: 5px 0;
+  margin: $default-margin 0;
   padding-bottom: 5px;
-  font-size: 12px;
+  font-size: $default-font-size;
   font-weight: bold;
 }
 
 p {
-  margin: 0 0 5px;
-  padding: 0;
-  font-size: 12px;
+  margin: 0 0 2*$default-margin 0;
+  white-space: normal;
 }
 
 a {
@@ -36,6 +65,11 @@ a {
     text-decoration: underline;
   }
 
+  &:focus {
+    @include default-focus-style(rgba(white, 0.5), none);
+    color: black;
+  }
+
   img {
     border: none;
   }
@@ -87,10 +121,10 @@ a.drop_down_select img {
 #alchemy a.search_field_clear {
   width: 16px;
   height: 16px;
-  background: image-url('alchemy/ui-icons_666666_256x240.png') no-repeat -80px -128px;
+  background: url('ui-icons_666666_256x240.png') no-repeat -80px -128px;
   position: absolute;
   right: 8px;
-  top: 4px;
+  top: 7px;
   @include rounded-corner;
 }
 
@@ -98,37 +132,6 @@ a.drop_down_select img {
   margin-bottom: 4px;
 }
 
-.js_filter_field_box {
-  position: relative;
-  float: right;
-  margin-left: 4px;
-}
-
-.js_filter_field_box .js_filter_field {
-  width: 170px;
-  text-align: left;
-  @include rounded-search-field;
-  padding: 3px 24px 2px;
-  height: 19px;
-}
-
-.js_filter_field_box label {
-  text-shadow: #fefefe 1px 1px 0;
-  font-size: 10px;
-  display: inline-block;
-  text-align: center;
-}
-
-.js_filter_field_box .js_filter_field_clear {
-  width: 15px;
-  height: 15px;
-  background: image-url('alchemy/icons.png') no-repeat 0 -70px;
-  position: absolute;
-  right: 8px;
-  top: 4px;
-  @include rounded-corner;
-}
-
 div.source_editor textarea {
   width: 100%;
   height: 358px;
@@ -185,26 +188,6 @@ div#page {
   background-position: right;
 }
 
-.picture_tool_delete {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  background-color: white;
-  top: 3px;
-  right: 4px;
-  padding: 1px;
-  z-index: 1;
-  display: none;
-}
-
-.picture_tool_delete a {
-  display: block;
-  width: 16px;
-  height: 16px;
-  background: image-url('alchemy/icons.png') no-repeat -63px -72px;
-  cursor: pointer;
-}
-
 div.tip {
   background-color: #eff8d0;
   border: 1px solid #cce21c;
@@ -272,9 +255,9 @@ div#user_list_legend {
 
 #toolbar {
   z-index: 10;
-  padding: 6px;
-  height: 40px;
-  background: $medium-gray image-url('alchemy/shading.png') repeat-x 0 -40px;
+  padding: 4px;
+  height: 44px;
+  background: $medium-gray url('shading.png') repeat-x 0 -40px;
   margin-right: 0px;
   border: $default-border;
   border-top-style: none;
@@ -293,7 +276,7 @@ div#user_list_legend {
 #toolbar div.button_with_label form {
   float: none;
   margin: 0;
-  display: inline-block;
+  @include inline-block;
   line-height: 5px;
 }
 
@@ -447,19 +430,10 @@ table td.tools .icon, table td.icon .icon {
   @include disable-user-select;
   margin-top: 0;
   background-repeat: no-repeat;
-  display: inline;
-  display: inline-block;
+  @include inline-block;
   margin-right: 4px;
 }
 
-input#search_input_field {
-  width: 170px;
-  text-align: left;
-  @include rounded-search-field;
-  padding: 3px 24px 2px;
-  height: 18px;
-}
-
 .list li.table_row div.table_right span {
   float: left;
   text-align: left;
@@ -480,49 +454,11 @@ input#search_input_field {
 
 #archive_all {
   padding: 4*$default-padding;
-}
-
-#archive_all .padding_left_right {
-  padding-right: 8px;
-  padding-left: 8px;
-}
 
-.inplace-edit {
-  background-color: $light-gray;
-  position: absolute;
-  left: -5px;
-  top: -8px;
-  width: 204px;
-  z-index: 10;
-  height: 60px;
-  border: $default-border;
-  @include rounded-corner;
-}
-
-.inplace-edit input.save-button {
-  float: right;
-}
-
-.inplace-edit div.buttons input.cancel-button {
-  float: left;
-}
-
-.inplace-edit div.buttons {
-  margin-top: 4px;
-  position: absolute;
-  bottom: 4px;
-  width: 196px;
-  padding-right: 4px;
-  padding-left: 4px;
-}
-
-.inplace-edit input.thin_border {
-  width: 186px;
-  font-family: "Courier New", Courier, mono;
-  position: absolute;
-  left: 4px;
-  top: 4px;
-  height: 18px;
+  .padding_left_right {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
 }
 
 div.spinner {
@@ -611,42 +547,6 @@ div.all_rights {
   margin-top: 10px;
 }
 
-textarea.thin_border {
-  border-style: inset;
-  font: $default-font-style;
-  padding: $default-padding;
-  border-width: 1px;
-  @include rounded-corner;
-  height: auto;
-}
-
-.thin_border, .input_field {
-  margin: 0;
-  @include rounded-corner;
-  background: #fff;
-  border: 1px inset #e5e5e5;
-  width: 210px;
-  font-size: 12px;
-  line-height: 19px;
-  height: 25px;
-  padding: 1px $default-padding;
-}
-
-.thin_border.dirty {
-  background-color: #fff8df;
-}
-
-select.select_box {
-  border: 1px solid #9a9a9a;
-  color: $text-color;
-  padding: 1px;
-  margin: 0;
-  font-size: 12px;
-  @include rounded-corner;
-  background: #f4f4f4;
-  height: 21px;
-}
-
 #tooltip {
   border: 1px solid #0b5c84;
   color: #333333;
@@ -794,7 +694,7 @@ p.foot_note {
 
 div#jscropper {
   padding: 2*$default-padding;
-  display: inline-block;
+  @include inline-block;
 }
 
 div#crop_explain.tip {
@@ -827,193 +727,6 @@ textarea#essence_picture_caption {
   @include rounded-corner;
 }
 
-div#image_assign_filter_and_image_sizing {
-  width: 100%;
-  height: 40px;
-}
-
-#assign_image_list {
-  padding: 2*$default-padding;
-  overflow: hidden;
-  text-align: center;
-}
-
-/* @group Picture Thumbnails */
-
-.picture_thumbnail {
-  padding: $default-padding;
-  margin: 2px 1px 2px 2px;
-  background-color: #fff;
-  float: none;
-  display: inline;
-  display: inline-block;
-  border: 1px solid #c0c0c0;
-  position: relative;
-  @include rounded-corner;
-}
-
-#pictures {
-  padding: 2*$default-padding;
-  border: $default-border;
-  @include rounded-corner;
-  margin: -2*$default-padding;
-  background-color: $medium-gray;
-}
-
-#pictures, #picture_archive .pagination {
-  text-align: center;
-}
-
-#pictures .picture_thumbnail {
-  margin: 0 16px 16px 0;
-  display: inline-block;
-  float: none;
-}
-
-#pictures .picture_thumbnail:hover .picture_tool_delete {
-  display: block;
-}
-
-.picture_thumbnail .thumbnail_background {
-  display: table-cell;
-  width: 160px;
-  height: 120px;
-  background-color: $dark-gray;
-  text-align: center;
-  vertical-align: middle;
-  padding: 0;
-  line-height: 0;
-}
-
-.picture_thumbnail.small .thumbnail_background {
-  width: 80px;
-  height: 60px;
-}
-
-.picture_thumbnail.medium .thumbnail_background {
-  width: 160px;
-  height: 120px;
-}
-
-.picture_thumbnail.large .thumbnail_background {
-  width: 240px;
-  height: 180px;
-}
-
-#pictures .picture_thumbnail .thumbnail_background {
-  cursor: -webkit-zoom-in;
-  cursor: -moz-zoom-in;
-  cursor: -ms-zoom-in;
-  cursor: -o-zoom-in;
-  cursor: image-url('alchemy/lupe.cur'), zoom-in, pointer;
-}
-
-div.picture_thumbnail.small {
-  width: 80px;
-  height: 75px;
-}
-
-div.picture_thumbnail.medium {
-  width: 160px;
-  height: 140px;
-}
-
-div.picture_thumbnail.large {
-  width: 240px;
-  height: 195px;
-}
-
-.picture_thumbnail .picture_name {
-  height: 12px;
-  display: block;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  position: absolute;
-  bottom: 1px;
-  left: 0;
-  font-family: "Courier New", Courier, mono;
-  line-height: 11px;
-  padding: 2px 0;
-  margin-right: 4px;
-  margin-left: 4px;
-}
-
-.picture_thumbnail .picture_name.rename.hover {
-  cursor: text;
-}
-
-.picture_thumbnail.small .picture_name {
-  width: 80px;
-}
-
-.picture_thumbnail.medium .picture_name {
-  width: 160px;
-  bottom: 3px;
-}
-
-.picture_thumbnail.large .picture_name {
-  width: 240px;
-}
-
-div.assign_image_list_image {
-  text-align: center;
-  overflow: hidden;
-  position: relative;
-}
-
-div.picture_thumbnail.small div.image_spinner img {
-  top: 14px;
-  left: 25px;
-}
-
-div.picture_thumbnail.medium div.image_spinner img {
-  top: 42px;
-  left: 64px;
-}
-
-div.picture_thumbnail.large div.image_spinner img {
-  top: 74px;
-  left: 108px;
-}
-
-div.image_spinner {
-  background-color: $dark-gray;
-  width: 1px;
-  margin: $default-margin;
-}
-
-div.picture_thumbnail.small .image_spinner {
-  height: 60px;
-  margin: $default-margin;
-}
-
-div.picture_thumbnail.medium .image_spinner {
-  height: 120px;
-  margin: $default-margin;
-}
-
-div.picture_thumbnail.large .image_spinner {
-  height: 180px;
-}
-
-div.image_spinner img {
-  position: absolute;
-  z-index: 0;
-  top: 32px;
-  left: 40px;
-}
-
-#assign_image_list div.assign_image_list_image img {
-  border-style: none;
-}
-
-#assign_image_list div.assign_image_list_image span {
-
-}
-
-/* @end */
-
 div#errors {
   margin-bottom: 8px;
   padding: 8px 8px 4px 28px;
@@ -1050,20 +763,6 @@ div#errors {
   padding: 2*$default-padding;
 }
 
-#page_select {
-  width: 120px;
-  margin-left: 8px;
-}
-
-#new_page_form th, #new_page_form td {
-  white-space: nowrap;
-  padding: 2px;
-}
-
-#new_page_form tbody tr td.second_row div.selectbox a.display {
-  width: 123px;
-}
-
 input.with_border {
   margin: 0;
   padding: 1px;
@@ -1092,11 +791,15 @@ input#user_admin {
 
 #alchemy div#overlay_toolbar div#image_assign_filter_and_image_sizing form {
   float: right;
-  width: 290px;
+  width: 310px;
   height: 25px;
   margin-top: 2px;
   padding: 0 !important;
   margin-right: 0;
+
+  .button {
+    margin: 0;
+  }
 }
 
 div#image_assign_filter_and_image_sizing form div.search_field {
@@ -1234,38 +937,41 @@ div.elements_from_page_selector {
 
 div.elements_for_page {
   position: absolute;
-  right: 23px;
-  top: 0;
+  right: 32px;
+  top: -7px;
   z-index: 15;
   background-color: white;
   width: 240px;
+  height: 33px;
   padding: $default-padding;
-  border: 1px solid #9c9d9c;
-  -webkit-box-shadow: #9ea09f 0px 0px 4px;
-  -moz-box-shadow: #9ea09f 0px 0px 4px;
-  -o-box-shadow: #9ea09f 0px 0px 4px;
-  box-shadow: #9ea09f 0px 0px 4px;
-  line-height: 13px;
+  border: $default-border;
+  @include box-shadow(#9ea09f 0px 0px 4px);
   @include rounded-corner;
+
+  img {
+    width: 20px;
+    height: 20px;
+    margin-left: 4px;
+    margin-top: 7px;
+  }
+
+  .alchemy_selectbox {
+    float: left;
+    width: 217px;
+  }
 }
 
 a.close_elements_from_page_selector {
   position: absolute;
   right: 0;
-  top: 8px;
+  top: 12px;
   font-size: 0;
-  padding-right: 2px;
-  width: 11px;
-  height: 15px;
-  background: image-url('alchemy/icons.png') no-repeat 0 -72px;
+  width: 8px;
+  height: 8px;
+  background: url('icons.png') no-repeat 0 -72px;
   cursor: pointer;
 }
 
-.elements_for_page img {
-  width: 20px;
-  height: 20px;
-}
-
 #alchemy .ui-dialog-content ul#sitemap ul .sitemap_row a {
   color: black;
   text-decoration: none;
@@ -1278,7 +984,7 @@ a.close_elements_from_page_selector {
   width: 16px;
   height: 16px;
   position: relative;
-  background: image-url('alchemy/icons.png') no-repeat -512px -72px;
+  background: url('icons.png') no-repeat -512px -72px;
   margin: 2px;
   font-size: 0;
   text-decoration: none;
@@ -1337,11 +1043,6 @@ div.assign_file_file_icon img {
   width: 195px;
 }
 
-.elements_for_page .alchemy_selectbox {
-  float: left;
-  width: 217px;
-}
-
 table.window_form td.checkbox {
   text-align: left;
 }
@@ -1362,24 +1063,27 @@ select#url_protocol.medium {
   width: 129px;
 }
 
-#alchemy .ui-dialog-content input.long,
-#alchemy .ui-dialog-content textarea.long {
-  margin: 0;
+#alchemy .ui-dialog-content input.long, #alchemy .ui-dialog-content textarea.long {
   width: 240px;
 }
 
 #alchemy .ui-dialog-content input.very_long {
   width: 300px;
-  margin: 0;
 }
 
-#alchemy .ui-dialog-content p a.button {
-  float: right;
+#alchemy .ui-dialog-content p.buttons {
+  text-align: right;
+  line-height: 32px;
+
+  label {
+    float: left;
+  }
 }
 
 #alchemy .ui-dialog-content p a.button.small {
   float: none;
-  display: inline-block;
+  @include inline-block;
+  vertical-align: inherit;
 }
 
 .assign_file_file.selected_file {
@@ -1397,12 +1101,12 @@ div.info ol li {
 }
 
 div#overlay_toolbar {
-  background: $medium-gray image-url('alchemy/shading.png') repeat-x 0 -42px;
+  background: $medium-gray url('shading.png') repeat-x 0 -42px;
   border: $default-border;
-  height: 38px;
+  height: 44px;
   border-left-style: none;
   border-right-style: none;
-  padding: 2*$default-padding;
+  padding: $default-padding;
 }
 
 div#overlay_toolbar div.toolbar_spacer {
@@ -1477,6 +1181,7 @@ div#overlay_toolbar a.button:active {
   height: 310px;
   overflow-x: hidden;
   overflow-y: auto;
+  margin-bottom: 1em;
 }
 
 .mceEditor table {