summaryrefslogtreecommitdiff
path: root/addons/website/static/src/css
diff options
context:
space:
mode:
Diffstat (limited to 'addons/website/static/src/css')
-rw-r--r--addons/website/static/src/css/common.css0
-rw-r--r--addons/website/static/src/css/common.sass25
-rw-r--r--addons/website/static/src/css/editor.css149
-rw-r--r--addons/website/static/src/css/editor.sass233
-rw-r--r--addons/website/static/src/css/website.backend.css6
-rw-r--r--addons/website/static/src/css/website.css253
-rw-r--r--addons/website/static/src/css/website.sass224
7 files changed, 593 insertions, 297 deletions
diff --git a/addons/website/static/src/css/common.css b/addons/website/static/src/css/common.css
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/addons/website/static/src/css/common.css
diff --git a/addons/website/static/src/css/common.sass b/addons/website/static/src/css/common.sass
new file mode 100644
index 00000000000..86e1f6655ef
--- /dev/null
+++ b/addons/website/static/src/css/common.sass
@@ -0,0 +1,25 @@
+@import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
+
+//smartphones, iPhone, portrait 480x320 phones
+$smart_phone: 320px
+//portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/
+$small-tablet: 481px
+//portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
+$portrait-tablet: 641px
+//tablet, landscape iPad, lo-res laptops ands desktops
+$tablet: 961px
+//big landscape tablets, laptops, and desktops
+$desktop: 1025px
+
+@mixin editor-font
+ font-size: 14px
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
+ line-height: normal
+
+@mixin selection()
+ ::-moz-selection
+ @content
+ ::selection
+ @content
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 823a1d30f81..b784177fd1c 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,5 +1,4 @@
-@charset "utf-8";
-/* ---- CKEditor Minimal Reset ---- */
+/* ---- CKEditor Minimal Reset ---- {{{ */
.navbar.navbar-inverse .cke_chrome {
border: none;
}
@@ -29,7 +28,7 @@
box-shadow: none;
}
-/* ---- OpenERP Style ---- */
+/* ---- OpenERP Style ---- {{{ */
.oe_website_editorbar {
position: fixed;
top: 0;
@@ -86,6 +85,10 @@
display: none;
}
+.cke_editable .css_editable_mode_hidden {
+ display: none;
+}
+
.oe_carousel_options {
cursor: pointer;
position: absolute;
@@ -100,7 +103,7 @@
top: 2px;
}
-/* ---- EDITOR BAR ---- */
+/* ---- EDITOR BAR ---- {{{ */
table.editorbar-panel {
cursor: pointer;
width: 100%;
@@ -112,6 +115,7 @@ table.editorbar-panel td.selected {
background-color: #b1c9d9;
}
+/* ---- TRANSLATIONS ---- {{{ */
.oe_translate_or {
color: white;
padding: 0 0 0 1em;
@@ -142,15 +146,16 @@ table.editorbar-panel td.selected {
background: #ffffb6;
}
+/* ---- MENU ---- {{{ */
div.oe_menu_buttons {
top: -8px;
right: -8px;
}
-ul.oe_menu_editor .icon-home {
+ul.oe_menu_editor .fa-home {
display: none;
}
-ul.oe_menu_editor > li:first-child .icon-home {
+ul.oe_menu_editor > li:first-child > div > span > .fa-home {
display: block;
}
ul.oe_menu_editor .oe_menu_placeholder {
@@ -168,11 +173,12 @@ ul.oe_menu_editor .disclose {
display: none;
}
-/* ---- RTE ---- */
-.oe_editable .btn {
+/* ---- RTE ---- {{{ */
+.oe_editable .btn, .btn.oe_editable {
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
+ cursor: text !important;
}
.modal-dialog.select-image {
@@ -187,6 +193,10 @@ ul.oe_menu_editor .disclose {
margin-bottom: 0.5em;
}
+.modal-footer {
+ text-align: left;
+}
+
.modal.nosave .modal-footer button.save {
display: none;
}
@@ -195,30 +205,42 @@ ul.oe_menu_editor .disclose {
visibility: visible !important;
}
-.cke_widget_wrapper {
- position: static !important;
+.existing-attachments .pager .disabled {
+ display: none;
}
-.cke_widget_drag_handler_container {
- display: none !important;
+.cke_widget_wrapper {
+ position: static !important;
}
.cke_widget_editable:empty:after {
- content: " ";
+ opacity: 0.3;
white-space: pre-wrap;
}
+.cke_widget_editable:not([placeholder]):empty::after {
+ content: " ";
+}
+.cke_widget_editable[placeholder]:not(:focus):empty::after {
+ content: attr(placeholder);
+}
.oe_carlos_danger {
outline: 1px solid red !important;
background-color: #ffd9dd !important;
}
-/* ---- SNIPPET EDITOR ---- */
+.hover-edition-button {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+}
+
+/* ---- SNIPPET EDITOR ---- {{{ */
#oe_snippets {
position: fixed;
left: 0px;
right: 0px;
- top: 51px;
background: #282828;
-webkit-box-shadow: 0px 10px 10px -10px black inset;
-moz-box-shadow: 0px 10px 10px -10px black inset;
@@ -348,7 +370,7 @@ ul.oe_menu_editor .disclose {
background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
}
-/* ---- SNIPPETS DROP ZONES ---- */
+/* ---- SNIPPETS DROP ZONES ---- {{{ */
.oe_drop_zone.oe_insert {
display: block;
height: 48px;
@@ -380,6 +402,10 @@ ul.oe_menu_editor .disclose {
margin: 0px -24px !important;
}
.oe_drop_zone.oe_insert.oe_overlay {
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -o-border-radius: 3px;
border-radius: 3px;
background: rgba(153, 0, 255, 0.5);
}
@@ -405,7 +431,7 @@ ul.oe_menu_editor .disclose {
padding-top: 12px;
}
-/* ---- SNIPPET MANIPULATOR ---- */
+/* ---- SNIPPET MANIPULATOR ---- {{{ */
.oe_overlay {
display: none;
position: absolute;
@@ -433,11 +459,20 @@ ul.oe_menu_editor .disclose {
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
border-color: rgba(0, 0, 0, 0.5);
}
-.oe_overlay.oe_active .oe_handle {
+.oe_overlay .oe_handle {
display: block !important;
pointer-events: auto;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 12px;
+ height: 12px;
+ margin: -2px;
}
-.oe_overlay.oe_active .oe_handle:before {
+.oe_overlay .oe_handle:before {
position: relative;
top: 50%;
left: 50%;
@@ -462,23 +497,49 @@ ul.oe_menu_editor .disclose {
-o-transition: background 100ms linear;
transition: background 100ms linear;
}
-.oe_overlay.oe_active .oe_handle:hover:before {
+.oe_overlay .oe_handle:hover:before {
background: rgba(0, 0, 0, 0.5);
color: white;
-webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
}
-.oe_overlay.oe_active .oe_handle.e:before {
+.oe_overlay .oe_handle.e {
+ left: auto;
+ top: 2px;
+ height: 100%;
+ right: -4px;
+ cursor: w-resize;
+}
+.oe_overlay .oe_handle.e:before {
content: "\F061";
}
-.oe_overlay.oe_active .oe_handle.s:before {
+.oe_overlay .oe_handle.s {
+ top: auto;
+ left: 2px;
+ width: 100%;
+ bottom: -4px;
+ cursor: n-resize;
+}
+.oe_overlay .oe_handle.s:before {
content: "\F063";
}
-.oe_overlay.oe_active .oe_handle.w:before {
+.oe_overlay .oe_handle.w {
+ top: 2px;
+ height: 100%;
+ left: -4px;
+ cursor: e-resize;
+}
+.oe_overlay .oe_handle.w:before {
content: "\F060";
}
-.oe_overlay.oe_active .oe_handle.n:before {
+.oe_overlay .oe_handle.n {
+ left: 2px;
+ width: 100%;
+ top: -4px;
+ cursor: s-resize;
+}
+.oe_overlay .oe_handle.n:before {
content: "\F062";
}
.oe_overlay .icon.btn {
@@ -520,36 +581,6 @@ ul.oe_menu_editor .disclose {
margin: -4px;
}
-.oe_handle.n {
- left: 2px;
- width: 100%;
- top: 0px;
- cursor: s-resize;
-}
-
-.oe_handle.e {
- left: auto;
- top: 2px;
- height: 100%;
- right: 0px;
- cursor: w-resize;
-}
-
-.oe_handle.s {
- top: auto;
- left: 2px;
- width: 100%;
- bottom: 0px;
- cursor: n-resize;
-}
-
-.oe_handle.w {
- top: 2px;
- height: 100%;
- left: 0px;
- cursor: e-resize;
-}
-
.s-resize-important, .s-resize-important * {
cursor: s-resize !important;
}
@@ -570,7 +601,7 @@ ul.oe_menu_editor .disclose {
cursor: move !important;
}
-/* ---- MOBILE PREVIEW ---- */
+/* ---- MOBILE PREVIEW ---- {{{ */
.oe_mobile_preview.modal .modal-content {
height: 660px;
background-color: black;
@@ -626,7 +657,7 @@ ul.oe_menu_editor .disclose {
background-color: black;
}
-/* ---- SEO TOOLS ---- */
+/* ---- SEO TOOLS ---- {{{ */
.oe_seo_configuration .modal-dialog {
width: 80%;
}
@@ -645,10 +676,9 @@ ul.oe_menu_editor .disclose {
border-radius: 0.4em;
}
-/* ---- ACE EDITOR ---- */
+/* ---- ACE EDITOR ---- {{{ */
.oe_ace_view_editor {
position: fixed;
- top: 51px;
right: 0;
z-index: 1000;
height: 100%;
@@ -678,7 +708,6 @@ ul.oe_menu_editor .disclose {
position: absolute;
top: 30px;
right: 0;
- bottom: 51px;
left: 0;
}
.oe_ace_view_editor .ace_editor .ace_gutter {
@@ -694,7 +723,7 @@ ul.oe_menu_editor .disclose {
opacity: 0;
}
-/* ---- EDITOR TOUR ---- */
+/* ---- EDITOR TOUR ---- {{{ */
div.tour-backdrop {
z-index: 2009;
}
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 918714ea92f..6cc590bf6b2 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -1,21 +1,6 @@
-@charset "utf-8"
+@import "common"
-@import "compass/css3"
-@import "compass/css3/user-interface"
-@import "compass/css3/transition"
-
-//smartphones, iPhone, portrait 480x320 phones
-$smart_phone: 320px
-//portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/
-$small-tablet: 481px
-//portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
-$portrait-tablet: 641px
-//tablet, landscape iPad, lo-res laptops ands desktops
-$tablet: 961px
-//big landscape tablets, laptops, and desktops
-$desktop: 1025px
-
-/* ---- CKEditor Minimal Reset ---- */
+/* ---- CKEditor Minimal Reset ---- {{{ */
.navbar.navbar-inverse .cke_chrome
border: none
@@ -39,7 +24,9 @@ $desktop: 1025px
border: none
+box-shadow(none)
-/* ---- OpenERP Style ---- */
+// }}}
+
+/* ---- OpenERP Style ---- {{{ */
.oe_website_editorbar
position: fixed
@@ -83,6 +70,9 @@ $desktop: 1025px
.css_non_editable_mode_hidden
display: none
+.cke_editable .css_editable_mode_hidden
+ display: none
+
.oe_carousel_options
cursor: pointer
position: absolute
@@ -95,7 +85,9 @@ $desktop: 1025px
position: relative !important
top: +2px
-/* ---- EDITOR BAR ---- */
+// }}}
+
+/* ---- EDITOR BAR ---- {{{ */
table.editorbar-panel
cursor: pointer
@@ -105,7 +97,10 @@ table.editorbar-panel
td.selected
background-color: #b1c9d9
-// ---- TRANSLATIONS ---- {{{
+// }}}
+
+/* ---- TRANSLATIONS ---- {{{ */
+
.oe_translate_or
color: white
padding: 0 0 0 1em
@@ -122,17 +117,19 @@ table.editorbar-panel
padding: 0 10px
.oe_translatable_todo
background: rgb(255, 255, 182)
+
// }}}
-// -------- MENU -------- {{{
+/* ---- MENU ---- {{{ */
+
div.oe_menu_buttons
top: -8px
right: -8px
ul.oe_menu_editor
- .icon-home
+ .fa-home
display: none
- > li:first-child .icon-home
+ > li:first-child > div > span > .fa-home
display: block
.oe_menu_placeholder
outline: 1px dashed #4183C4
@@ -147,12 +144,13 @@ ul.oe_menu_editor
// }}}
-/* ---- RTE ---- */
+/* ---- RTE ---- {{{ */
// bootstrap makes .btn elements unselectable -> RTE double-click can't know
// about them either
-.oe_editable .btn
- @include user-select(auto)
+.oe_editable .btn, .btn.oe_editable
+ +user-select(auto)
+ cursor: text !important
.modal-dialog.select-image
width: 80%
@@ -164,6 +162,9 @@ ul.oe_menu_editor
.modal .image-preview
margin-bottom: 0.5em
+.modal-footer
+ text-align: left
+
.modal.nosave .modal-footer
button.save
display: none
@@ -171,30 +172,48 @@ ul.oe_menu_editor
display: inline-block !important
visibility: visible !important
+.existing-attachments .pager .disabled
+ display: none
+
// wrapper positioned relatively for drag&drop widget which is disabled below.
// Breaks completely horribly crazy products listing page, so take it out.
.cke_widget_wrapper
position: static !important
-// "remove" drag & drop of CKE widgets
-.cke_widget_drag_handler_container
- display: none !important
+
// prevent inline widgets from entirely disappearing when their (textual)
// content is removed
-.cke_widget_editable:empty:after
- content: " "
- white-space: pre-wrap
+.cke_widget_editable
+ // basic config
+ &:empty:after
+ opacity: 0.3
+ white-space: pre-wrap
+ // no @placeholder -> just add some padding
+ &:not([placeholder]):empty::after
+ content: " "
+ // with placeholder and when not (yet) focused -> display placeholder
+ &[placeholder]:not(:focus):empty::after
+ content: attr(placeholder)
.oe_carlos_danger
outline: 1px solid red !important
background-color: #ffd9dd !important
-/* ---- SNIPPET EDITOR ---- */
+.hover-edition-button
+ position: absolute
+ top: 0
+ left: 0
+ // This z-index is due to .navbar of bootstrap
+ z-index: 1000
+
+// }}}
+
+/* ---- SNIPPET EDITOR ---- {{{ */
#oe_snippets
position: fixed
left: 0px
right: 0px
- top: 51px
+ // top property is set programmatically
background: rgb(40,40,40)
+box-shadow(0px 10px 10px -10px black inset)
z-index: 1010
@@ -277,7 +296,9 @@ ul.oe_menu_editor
#oe_snippets .oe_snippet_thumbnail
@include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
-/* ---- SNIPPETS DROP ZONES ---- */
+// }}}}
+
+/* ---- SNIPPETS DROP ZONES ---- {{{ */
.oe_drop_zone.oe_insert
display: block
@@ -303,7 +324,7 @@ ul.oe_menu_editor
position: relative
margin: 0px -24px !important
&.oe_overlay
- border-radius: 3px
+ +border-radius(3px)
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
//background-size: 100px 100px
background: rgba(153, 0, 255,.5)
@@ -324,7 +345,9 @@ ul.oe_menu_editor
margin-bottom: 32px
padding-top: 12px
-/* ---- SNIPPET MANIPULATOR ---- */
+// }}}
+
+/* ---- SNIPPET MANIPULATOR ---- {{{ */
.oe_overlay
display: none
@@ -341,37 +364,66 @@ ul.oe_menu_editor
border-width: 1px
+box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
border-color: rgba(0, 0, 0, 0.5)
- .oe_handle
- display: block !important
- pointer-events: auto
- &:before
- position: relative
- top: 50%
- left: 50%
- display: block
- background: rgba(255, 255, 255, 1)
- border: solid 1px rgba(0, 0, 0, .2)
- +border-radius(5px)
- width: 18px
- height: 18px
- margin: -9px
- padding-left: 1px
- font-size: 14px
- line-height: 14px
- font-family: FontAwesome
- color: rgba(0,0,0,.5)
- @include transition(background 100ms linear)
- &:hover:before
- background: rgba(0, 0, 0, .5)
- color: #fff
- +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
- .oe_handle.e:before
+ .oe_handle
+ display: block !important
+ pointer-events: auto
+ position: absolute
+ top: 50%
+ left: 50%
+ +box-sizing(border-box)
+ width: 12px
+ height: 12px
+ margin: -2px
+ &:before
+ position: relative
+ top: 50%
+ left: 50%
+ display: block
+ background: rgba(255, 255, 255, 1)
+ border: solid 1px rgba(0, 0, 0, .2)
+ +border-radius(5px)
+ width: 18px
+ height: 18px
+ margin: -9px
+ padding-left: 1px
+ font-size: 14px
+ line-height: 14px
+ font-family: FontAwesome
+ color: rgba(0,0,0,.5)
+ @include transition(background 100ms linear)
+ &:hover:before
+ background: rgba(0, 0, 0, .5)
+ color: #fff
+ +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+ .oe_handle.e
+ left: auto
+ top: 2px
+ height: 100%
+ right: -4px
+ cursor: w-resize
+ &:before
content: "\F061"
- .oe_handle.s:before
+ .oe_handle.s
+ top: auto
+ left: 2px
+ width: 100%
+ bottom: -4px
+ cursor: n-resize
+ &:before
content: "\F063"
- .oe_handle.w:before
+ .oe_handle.w
+ top: 2px
+ height: 100%
+ left: -4px
+ cursor: e-resize
+ &:before
content: "\F060"
- .oe_handle.n:before
+ .oe_handle.n
+ left: 2px
+ width: 100%
+ top: -4px
+ cursor: s-resize
+ &:before
content: "\F062"
.icon.btn
@@ -405,29 +457,6 @@ ul.oe_menu_editor
height: 8px
margin: -4px
-.oe_handle.n
- left: 2px
- width: 100%
- top: 0px
- cursor: s-resize
-.oe_handle.e
- left: auto
- top: 2px
- height: 100%
- right: 0px
- cursor: w-resize
-.oe_handle.s
- top: auto
- left: 2px
- width: 100%
- bottom: 0px
- cursor: n-resize
-.oe_handle.w
- top: 2px
- height: 100%
- left: 0px
- cursor: e-resize
-
.s-resize-important, .s-resize-important *
cursor: s-resize !important
.n-resize-important, .n-resize-important *
@@ -439,8 +468,9 @@ ul.oe_menu_editor
.move-important, .move-important *
cursor: move !important
+// }}}
-/* ---- MOBILE PREVIEW ---- */
+/* ---- MOBILE PREVIEW ---- {{{ */
$mobile_preview_background: #000000
$mobile_preview_border: #1C1F1F
@@ -483,7 +513,9 @@ $icon_close: #E00101
.modal-footer
background-color: $mobile_preview_background
-/* ---- SEO TOOLS ---- */
+// }}}
+
+/* ---- SEO TOOLS ---- {{{ */
$remove_color: $icon_close
$in_title_color: #5cb85c
@@ -501,19 +533,16 @@ $highlighted_text_color: #ffffff
padding: .2em .4em .2em .5em
+border-radius(.4em)
-/* ---- ACE EDITOR ---- */
+// }}}
+
+/* ---- ACE EDITOR ---- {{{ */
$editorbar_height: 30px
// TODO Fix => might break with themes
-$navbar_height: 51px
-@mixin editor-font
- font-size: 14px
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
- line-height: normal
.oe_ace_view_editor
position: fixed
- top: $navbar_height
+ // top property is set programmatically
right: 0
z-index: 1000
height: 100%
@@ -535,7 +564,7 @@ $navbar_height: 51px
position: absolute
top: $editorbar_height
right: 0
- bottom: $navbar_height
+ // bottom property is set programmatically
left: 0
.ace_gutter
cursor: ew-resize
@@ -545,9 +574,15 @@ $navbar_height: 51px
z-index: -1000
+opacity(0)
-/* ---- EDITOR TOUR ---- */
+// }}}
+
+/* ---- EDITOR TOUR ---- {{{ */
+
div.tour-backdrop
z-index: 2009
.popover.tour
z-index: 2010
+
+// }}}
+
// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
diff --git a/addons/website/static/src/css/website.backend.css b/addons/website/static/src/css/website.backend.css
new file mode 100644
index 00000000000..e6601788bcc
--- /dev/null
+++ b/addons/website/static/src/css/website.backend.css
@@ -0,0 +1,6 @@
+.oe_WidgetWebsiteButton .btn-danger .oe_publish {
+ display: none;
+}
+.oe_WidgetWebsiteButton .btn-success .oe_unpublish {
+ display: none;
+} \ No newline at end of file
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 99ba04e2a96..bf261cf905a 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
/* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
*
* css for editor buttons, openerp widget included in the website and other
@@ -192,6 +191,8 @@ h1.text-muted, h2.text-muted, h3.text-muted {
/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
html, body, #wrapwrap {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
}
@@ -201,7 +202,7 @@ html, body, #wrapwrap {
width: 100%;
}
-header, #wrap, footer {
+header, main, footer {
display: table-row;
}
@@ -222,6 +223,10 @@ footer {
width: 100%;
}
+.row {
+ min-height: 32px;
+}
+
/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
.oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
background-image: url("/website/static/src/img/drag_here.png");
@@ -257,6 +262,78 @@ footer {
margin-bottom: 0px;
}
+/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
+.nav-hierarchy {
+ padding-left: 16px;
+}
+
+#themes-list .well {
+ padding: 0 0 20px 0;
+}
+
+/* -- Hack for removing double scrollbar from mobile preview -- */
+div#mobile-preview.modal {
+ overflow: hidden;
+ overflow-y: hidden;
+}
+
+ul.nav-stacked > li > a {
+ padding: 2px 15px;
+}
+
+#customize-menu .dropdown-header {
+ text-transform: uppercase;
+}
+
+/* ---- PUBLISH ---- */
+.css_published .btn-danger, .css_published .css_publish {
+ display: none;
+}
+
+.css_unpublished .btn-success, .css_unpublished .css_unpublish {
+ display: none;
+}
+
+[data-publish='off'] {
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+ opacity: 0.5;
+}
+
+/* ---- END of PUBLISH ---- */
+::-moz-selection {
+ background: rgba(150, 150, 220, 0.3);
+}
+
+::selection {
+ background: rgba(150, 150, 220, 0.3);
+}
+
+.logo-img {
+ width: 220px;
+}
+
+.oe_demo {
+ position: relative;
+}
+.oe_demo img {
+ width: 100%;
+}
+.oe_demo div {
+ position: absolute;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.4);
+ opacity: 0.85;
+ bottom: 0px;
+ width: 100%;
+ padding: 7px;
+ color: white;
+ font-weight: bold;
+}
+.oe_demo div a {
+ color: white;
+}
+
+/* ---- SNIPPETS --- */
.carousel-inner .item {
height: 100%;
background-size: 100%;
@@ -271,30 +348,27 @@ footer {
.carousel.oe_big .carousel-inner {
height: 450px;
}
+.carousel .carousel-caption {
+ left: auto;
+ right: auto;
+ bottom: 10%;
+ text-align: left;
+ padding: 20px;
+ background: rgba(0, 0, 0, 0.4);
+}
.carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
margin-top: 10px;
margin-bottom: 10px;
}
.carousel .carousel-image {
- right: 10%;
+ right: 50%;
left: 50%;
top: 5%;
bottom: 5%;
position: absolute;
- text-align: center;
-}
-.carousel .carousel-image img {
- height: 100%;
+ max-height: 90%;
margin: 0 auto;
}
-.carousel .item.text_image .carousel-caption {
- left: auto;
- right: auto;
- bottom: 10%;
- text-align: left;
- padding: 20px;
- background: rgba(0, 0, 0, 0.4);
-}
.carousel .item.text_only .carousel-image {
display: none !important;
}
@@ -302,18 +376,14 @@ footer {
left: 10%;
right: 10%;
top: 10%;
+ bottom: auto;
text-align: center;
+ background: transparent;
}
.carousel .item.image_text .carousel-caption {
- left: auto;
- text-align: left;
right: 10%;
- bottom: 10%;
- padding: 20px;
- background: rgba(0, 0, 0, 0.4);
}
.carousel .item.image_text .carousel-image {
- right: 50%;
left: 10%;
}
.carousel .carousel-control {
@@ -331,79 +401,71 @@ footer {
right: 10px;
}
-/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
-.dark {
- background: #eff8f8;
- background: rgba(100, 200, 200, 0.14);
- -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
- -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
- box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-}
-
-.nav-hierarchy {
- padding-left: 16px;
-}
-
-#themes-list .well {
- padding: 0 0 20px 0;
-}
-
/* Parallax Theme */
-.parallax_quote {
- background: url("/website/static/src/img/parallax/quote.png") center center no-repeat fixed;
- background-size: contain;
-}
-.parallax_quote .carousel-indicators li {
+div.carousel[data-snippet-id="slider"] .carousel-indicators li {
border: 1px solid grey;
}
-.parallax_quote .carousel-indicators .active {
+div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
background-color: grey;
}
.parallax {
position: relative;
background-size: 100%;
+ display: table;
+ width: 100%;
+ min-height: 100px;
}
.parallax.oe_small {
- height: 200px;
+ min-height: 200px;
}
.parallax.oe_medium {
- height: 300px;
+ min-height: 300px;
}
.parallax.oe_big {
- height: 450px;
+ min-height: 450px;
+}
+.parallax > div {
+ display: table-cell;
+ vertical-align: middle;
+ padding: 32px 0;
}
-/* -- Hack for removing double scrollbar from mobile preview -- */
-div#mobile-preview.modal {
- overflow: hidden;
- overflow-y: hidden;
+/* Background */
+.oe_dark {
+ background: #eff8f8;
+ background: rgba(100, 200, 200, 0.14);
+ -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
+ -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
+ box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
}
-ul.nav-stacked > li > a {
- padding: 2px 15px;
+.oe_black {
+ background-color: rgba(0, 0, 0, 0.9);
}
-#customize-menu .dropdown-header {
- text-transform: uppercase;
+.oe_green {
+ background-color: rgba(0, 128, 0, 0.8);
}
-/* ---- PUBLISH ---- */
-.css_unpublish, .css_publish {
- display: none;
+.oe_red {
+ background-color: rgba(255, 0, 0, 0.8);
}
-.css_published .css_unpublish, .css_unpublished .css_publish {
- display: block;
+.oe_img_bg {
+ background-size: 100%;
}
-[data-publish='off'] {
- opacity: 0.5;
+.texttop {
+ vertical-align: top;
}
-/* ---- END of PUBLISH ---- */
-::selection {
- background: rgba(150, 150, 220, 0.3);
+table.well tr th {
+ text-align: right;
+ padding-right: 10px;
+}
+table.well tr td {
+ padding-right: 5px;
}
.logo-img {
@@ -430,3 +492,64 @@ ul.nav-stacked > li > a {
.oe_demo div a {
color: white;
}
+
+address .fa.fa-mobile-phone {
+ margin: 0 3px 0 2px;
+}
+address .fa.fa-file-text-o {
+ margin-right: 1px;
+}
+
+span[data-oe-type="monetary"] {
+ white-space: nowrap;
+}
+
+.oe_template_fallback {
+ -webkit-column-count: 3;
+ -moz-column-count: 3;
+ -ms-column-count: 3;
+ -o-column-count: 3;
+ column-count: 3;
+}
+
+.bs-callout {
+ margin: 20px 0;
+ padding: 20px;
+ border-left: 3px solid #eeeeee;
+}
+
+.bs-callout h4 {
+ margin-top: 0;
+ margin-bottom: 5px;
+}
+
+.bs-callout p:last-child {
+ margin-bottom: 0;
+}
+
+.bs-callout-danger {
+ background-color: #fdf7f7;
+ border-color: #eed3d7;
+}
+
+.bs-callout-danger h4 {
+ color: #b94a48;
+}
+
+.bs-callout-warning {
+ background-color: #faf8f0;
+ border-color: #faebcc;
+}
+
+.bs-callout-warning h4 {
+ color: #8a6d3b;
+}
+
+.bs-callout-info {
+ background-color: #f4f8fa;
+ border-color: #bce8f1;
+}
+
+.bs-callout-info h4 {
+ color: #34789a;
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index f947a163a28..ccd11d3396f 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -1,5 +1,7 @@
@charset "utf-8"
+@import "common"
+
/*
* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
*
@@ -103,14 +105,8 @@
/* Extra Styles */
img.shadow
- -webkit-border-radius: 3px
- -moz-border-radius: 3px
- -ms-border-radius: 3px
- -o-border-radius: 3px
- border-radius: 3px
- -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
- -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
- box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
+ +border-radius(3px)
+ +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
margin: 0 auto
h1.text-muted, h2.text-muted, h3.text-muted
@@ -124,14 +120,14 @@ h1.text-muted, h2.text-muted, h3.text-muted
/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
html,body, #wrapwrap
- box-sizing: border-box
+ +box-sizing(border-box)
height: 100%
#wrapwrap
display: table
width: 100%
-header, #wrap, footer
+header, main, footer
display: table-row
footer
@@ -149,6 +145,9 @@ footer
float: left
width: 100%
+.row
+ min-height: 32px
+
/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
.oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
@@ -186,6 +185,64 @@ footer
// .nav > li a
// display: block
+/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
+
+.nav-hierarchy
+ padding-left: 16px
+
+#themes-list .well
+ padding: 0 0 20px 0
+
+/* -- Hack for removing double scrollbar from mobile preview -- */
+div#mobile-preview.modal
+ overflow: hidden
+ overflow-y: hidden
+
+ul.nav-stacked > li > a
+ padding: 2px 15px
+
+#customize-menu .dropdown-header
+ text-transform: uppercase
+
+/* ---- PUBLISH ---- */
+.css_published
+ .btn-danger, .css_publish
+ display: none
+.css_unpublished
+ .btn-success, .css_unpublish
+ display: none
+
+[data-publish='off']
+ +opacity(0.5)
+
+/* ---- END of PUBLISH ---- */
+
+@include selection
+ background: rgba(150, 150, 220, 0.3)
+
+.logo-img
+ width: 220px
+
+
+.oe_demo
+ position: relative
+ img
+ width: 100%
+ div
+ position: absolute
+ left: 0
+ background-color: rgba(0,0,0,0.4)
+ opacity: 0.85
+ bottom: 0px
+ width: 100%
+ padding: 7px
+ color: white
+ font-weight: bold
+ a
+ color: white
+
+/* ---- SNIPPETS --- */
+
.carousel-inner .item
height: 100%
background-size: 100%
@@ -198,27 +255,23 @@ footer
&.oe_big .carousel-inner
height: 450px
.carousel-caption
+ left: auto
+ right: auto
+ bottom: 10%
+ text-align: left
+ padding: 20px
+ background: rgba(0, 0, 0, 0.4)
h1, h2, h3
margin-top: 10px
margin-bottom: 10px
.carousel-image
- right: 10%
+ right: 50%
left: 50%
top: 5%
bottom: 5%
position: absolute
- text-align: center
- img
- height: 100%
- margin: 0 auto
- .item.text_image
- .carousel-caption
- left: auto
- right: auto
- bottom: 10%
- text-align: left
- padding: 20px
- background: rgba(0, 0, 0, 0.4)
+ max-height: 90%
+ margin: 0 auto
.item.text_only
.carousel-image
display: none !important
@@ -226,17 +279,13 @@ footer
left: 10%
right: 10%
top: 10%
+ bottom: auto
text-align: center
+ background: transparent
.item.image_text
.carousel-caption
- left: auto
- text-align: left
right: 10%
- bottom: 10%
- padding: 20px
- background: rgba(0, 0, 0, 0.4)
.carousel-image
- right: 50%
left: 10%
.carousel-control
cursor: pointer
@@ -249,26 +298,10 @@ footer
&.right span
right: 10px
-/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
-
-.dark
- background: #eff8f8
- background: rgba(100, 200, 200, 0.14)
- -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
- -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
- box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
-
-.nav-hierarchy
- padding-left: 16px
-
-#themes-list .well
- padding: 0 0 20px 0
/* Parallax Theme */
-.parallax_quote
- background: url('/website/static/src/img/parallax/quote.png') center center no-repeat fixed
- background-size: contain
+div.carousel[data-snippet-id="slider"]
.carousel-indicators
li
border: 1px solid grey
@@ -278,43 +311,48 @@ footer
.parallax
position: relative
background-size: 100%
+ display: table
+ width: 100%
+ min-height: 100px
&.oe_small
- height: 200px
+ min-height: 200px
&.oe_medium
- height: 300px
+ min-height: 300px
&.oe_big
- height: 450px
-/* -- Hack for removing double scrollbar from mobile preview -- */
-div#mobile-preview.modal
- overflow: hidden
- overflow-y: hidden
-
-ul.nav-stacked > li > a
- padding: 2px 15px
-
-#customize-menu .dropdown-header
- text-transform: uppercase
-
-/* ---- PUBLISH ---- */
-.css_unpublish, .css_publish
- display: none
-.css_published .css_unpublish, .css_unpublished .css_publish
- display: block
-
-[data-publish='off']
- opacity: 0.5
-
-/* ---- END of PUBLISH ---- */
+ min-height: 450px
+ > div
+ display: table-cell
+ vertical-align: middle
+ padding: 32px 0
+/* Background */
+
+.oe_dark
+ background: #eff8f8
+ background: rgba(100, 200, 200, 0.14)
+ +box-shadow(0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset)
+.oe_black
+ background-color: rgba(0, 0, 0, 0.9)
+.oe_green
+ background-color: rgba(0, 128, 0, 0.8)
+.oe_red
+ background-color: rgba(255, 0, 0, 0.8)
+.oe_img_bg
+ background-size: 100%
+.texttop
+ vertical-align: top
-::selection
- background: rgba(150, 150, 220, 0.3)
+table.well tr
+ th
+ text-align: right
+ padding-right: 10px
+ td
+ padding-right: 5px
.logo-img
width: 220px
-
.oe_demo
position: relative
img
@@ -331,3 +369,43 @@ ul.nav-stacked > li > a
font-weight: bold
a
color: white
+
+address
+ .fa.fa-mobile-phone
+ margin: 0 3px 0 2px
+ .fa.fa-file-text-o
+ margin-right: 1px
+
+span[data-oe-type="monetary"]
+ white-space: nowrap
+
+.oe_template_fallback
+ @include column-count(3)
+
+// ---- Callouts from bootstrap doc ---- {{{
+.bs-callout
+ margin: 20px 0
+ padding: 20px
+ border-left: 3px solid #eee
+.bs-callout h4
+ margin-top: 0
+ margin-bottom: 5px
+.bs-callout p:last-child
+ margin-bottom: 0
+
+.bs-callout-danger
+ background-color: #fdf7f7
+ border-color: #eed3d7
+.bs-callout-danger h4
+ color: #b94a48
+.bs-callout-warning
+ background-color: #faf8f0
+ border-color: #faebcc
+.bs-callout-warning h4
+ color: #8a6d3b
+.bs-callout-info
+ background-color: #f4f8fa
+ border-color: #bce8f1
+.bs-callout-info h4
+ color: #34789a
+// }}}