diff options
Diffstat (limited to 'addons/website/static/src/css')
| -rw-r--r-- | addons/website/static/src/css/common.css | 0 | ||||
| -rw-r--r-- | addons/website/static/src/css/common.sass | 25 | ||||
| -rw-r--r-- | addons/website/static/src/css/editor.css | 149 | ||||
| -rw-r--r-- | addons/website/static/src/css/editor.sass | 233 | ||||
| -rw-r--r-- | addons/website/static/src/css/website.backend.css | 6 | ||||
| -rw-r--r-- | addons/website/static/src/css/website.css | 253 | ||||
| -rw-r--r-- | addons/website/static/src/css/website.sass | 224 |
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 +// }}} |
