CSS improvements

bzr revid: ddm@openerp.com-20130823092456-7g783rh2g0irlp63

addons/website/static/src/css/editor.css

@@ -156,6 +156,7 @@
   background-color: black;
   border: 2px solid;
   border-radius: 10px;
+  border-color: #1a1a1a;
   margin: auto;
   position: absolute;
   top: 0;
@@ -164,17 +165,24 @@
   right: 0;
   max-width: 330px;
 }
-
-#mobile-preview .modal-header {
+#mobile-preview.modal .modal-header {
+  background-color: black;
   border-bottom: 0;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
-#mobile-preview .modal-body {
+#mobile-preview.modal .modal-header .oe_mobile_preview_title {
+  color: #1a1a1a;
+}
+#mobile-preview.modal .modal-body {
+  background-color: black;
   max-height: 600px;
   padding: 0;
   margin: 0;
 }
+#mobile-preview.modal .modal-footer {
+  background-color: black;
+}
 
 .oe_mobile_viewport {
   width: 320px;
@@ -188,5 +196,6 @@
   opacity: 1;
 }
 .oe_mobile_preview_header .close:hover {
-  color: darkgrey;
+  color: #e00101;
+  opacity: 1;
 }

addons/website/static/src/css/editor.sass

@@ -132,11 +132,15 @@
     height: 100%
     overflow: hidden
 
+$mobile_preview_background: #000000
+$mobile_preview_border: #1A1A1A
+$mobile_preview_close: #E00101
 #mobile-preview.modal
     height: 660px
-    background-color: black
+    background-color: $mobile_preview_background
     border: 2px solid
     border-radius: 10px
+    border-color: $mobile_preview_border
     margin: auto
     position: absolute
     top: 0
@@ -144,16 +148,20 @@
     bottom: 0
     right: 0
     max-width: 330px
-
-#mobile-preview
     .modal-header
+        background-color: $mobile_preview_background
         border-bottom: 0
         border-top-left-radius: 10px
         border-top-right-radius: 10px
+        .oe_mobile_preview_title
+            color: $mobile_preview_border
     .modal-body
+        background-color: $mobile_preview_background
         max-height: 600px
         padding: 0
         margin: 0
+    .modal-footer
+        background-color: $mobile_preview_background
 
 .oe_mobile_viewport
     width: 320px
@@ -166,4 +174,5 @@
         color: lightgrey
         opacity: 1
     .close:hover
-        color: darkgrey
+        color: $mobile_preview_close
+        opacity: 1

addons/website/static/src/xml/website.xml

@@ -40,12 +40,12 @@
 
     <div id="mobile-preview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mobile-preview-title" aria-hidden="true">
         <div class="modal-header oe_mobile_preview_header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-            <h3 id="mobile-preview-title">Preview</h3>
+            <button title="Close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h3 id="mobile-preview-title" class="oe_mobile_preview_title">Mobile preview</h3>
         </div>
         <div class="modal-body">
             <div class="oe_mobile_preview">
-                <iframe id="mobile-viewport" class="oe_mobile_viewport" src="#"></iframe>
+                <iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
             </div>
         </div>
     </div>