diff options
Diffstat (limited to 'addons/website/static/src/css')
16 files changed, 464 insertions, 145 deletions
diff --git a/addons/website/static/src/css/bootswatch/amelia.fix.css b/addons/website/static/src/css/bootswatch/amelia.fix.css new file mode 100644 index 00000000000..2f16ea5465c --- /dev/null +++ b/addons/website/static/src/css/bootswatch/amelia.fix.css @@ -0,0 +1,27 @@ +#website-top-navbar a.btn-link { + color: #ad1d28; +} +.oe_product section { + background: rgba(16, 138, 147, 0.75) !important; +} +.oe_product section .text-info { + color: #DFD6F5; +} +ul.wizard li { + background: #debb27 !important; +} +ul.wizard .chevron:before { + border-left: 10px solid #debb27 !important; +} +ul.wizard .text-primary { + color: #ad1d28 !important; +} +ul.wizard .text-success { + color: #ffffff !important; +} +.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before { + color: #79D5DB !important; +} +.input-group-addon .fa { + color: #444; +} diff --git a/addons/website/static/src/css/bootswatch/cosmo.fix.css b/addons/website/static/src/css/bootswatch/cosmo.fix.css new file mode 100644 index 00000000000..907aa7bf757 --- /dev/null +++ b/addons/website/static/src/css/bootswatch/cosmo.fix.css @@ -0,0 +1,7 @@ +#website-top-navbar button.btn-primary { + color: #fff; + border: 2px solid #0061c2; +} +#website-top-navbar a.btn-link { + color: #fff; +}
\ No newline at end of file diff --git a/addons/website/static/src/css/bootswatch/cyborg.fix.css b/addons/website/static/src/css/bootswatch/cyborg.fix.css new file mode 100644 index 00000000000..e93b2aa8ded --- /dev/null +++ b/addons/website/static/src/css/bootswatch/cyborg.fix.css @@ -0,0 +1,30 @@ +.oe_product section { + background: rgba(40, 40, 40, 0.85) !important; +} +.oe_product section .text-info { + color: #BA66E4; +} +ul.wizard li { + background: #222 !important; +} +ul.wizard .chevron:before { + border-left: 10px solid #222 !important; +} +.popover, .modal-content { + border: 1px solid rgba(200,200,200,0.5); +} +.close { + color: #fff; +} +.popover.bottom .arrow:after { + border-bottom-color: #333; +} +.popover.top .arrow:after { + border-top-color: #333; +} +.popover.left .arrow:after { + border-left-color: #333; +} +.popover.right .arrow:after { + border-right-color: #333; +}
\ No newline at end of file diff --git a/addons/website/static/src/css/bootswatch/flatly.fix.css b/addons/website/static/src/css/bootswatch/flatly.fix.css new file mode 100644 index 00000000000..c2d9500f5da --- /dev/null +++ b/addons/website/static/src/css/bootswatch/flatly.fix.css @@ -0,0 +1,3 @@ +#website-top-navbar a.btn-link { + color: #2c3e50; +}
\ No newline at end of file diff --git a/addons/website/static/src/css/bootswatch/journal.fix.css b/addons/website/static/src/css/bootswatch/journal.fix.css new file mode 100644 index 00000000000..e9f41a33e8f --- /dev/null +++ b/addons/website/static/src/css/bootswatch/journal.fix.css @@ -0,0 +1,6 @@ +#website-top-navbar button.btn-primary { + border: 2px solid #e4332e; +} +#website-top-navbar a.btn-link { + color: #fff; +}
\ No newline at end of file diff --git a/addons/website/static/src/css/bootswatch/readable.fix.css b/addons/website/static/src/css/bootswatch/readable.fix.css new file mode 100644 index 00000000000..8e22d318615 --- /dev/null +++ b/addons/website/static/src/css/bootswatch/readable.fix.css @@ -0,0 +1,3 @@ +.oe_product section .text-info { + color: #2A9CBE; +}
\ No newline at end of file diff --git a/addons/website/static/src/css/bootswatch/simplex.fix.css b/addons/website/static/src/css/bootswatch/simplex.fix.css new file mode 100644 index 00000000000..56dbb1fdd5f --- /dev/null +++ b/addons/website/static/src/css/bootswatch/simplex.fix.css @@ -0,0 +1,3 @@ +#website-top-navbar a.btn-link { + color: #fff; +}
\ No newline at end of file diff --git a/addons/website/static/src/css/bootswatch/slate.fix.css b/addons/website/static/src/css/bootswatch/slate.fix.css new file mode 100644 index 00000000000..c2e1a999b03 --- /dev/null +++ b/addons/website/static/src/css/bootswatch/slate.fix.css @@ -0,0 +1,21 @@ +.oe_product section { + background: rgba(40, 40, 45, 0.80) !important; +} +ul.wizard li { + background-image: -webkit-linear-gradient(#8a9196,#7a8288 60%,#788084) !important; + background-image: linear-gradient(#8a9196,#7a8288 60%,#788084 ) !important; + color: #ccc; +} +ul.wizard .chevron:before { + border-left: 10px solid #7C8386 !important; +} +ul.wizard li.text-primary { + color: #fff; +} +.close { + color: #fff; +} +.popover { + -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.5); + box-shadow: 0px 0px 20px rgba(0,0,0,0.5); +} diff --git a/addons/website/static/src/css/bootswatch/spacelab.fix.css b/addons/website/static/src/css/bootswatch/spacelab.fix.css new file mode 100644 index 00000000000..6d01e9a2485 --- /dev/null +++ b/addons/website/static/src/css/bootswatch/spacelab.fix.css @@ -0,0 +1,8 @@ +.carousel .carousel-caption.content, +.carousel .carousel-caption.content h1, +.carousel .carousel-caption.content h2, +.carousel .carousel-caption.content h3, +.carousel .carousel-caption.content h4, +.carousel .carousel-caption.content h5 { + color: #ccc; +}
\ No newline at end of file diff --git a/addons/website/static/src/css/bootswatch/yeti.fix.css b/addons/website/static/src/css/bootswatch/yeti.fix.css new file mode 100644 index 00000000000..3fd285c826e --- /dev/null +++ b/addons/website/static/src/css/bootswatch/yeti.fix.css @@ -0,0 +1,6 @@ +#website-top-navbar a.btn-link { + color: #fff; +} +.popover .close { + color: #fff; +}
\ No newline at end of file diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 4fb4496e692..eb4c5b2851c 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -26,6 +26,7 @@ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; + -ms-filter: "alpha(opacity=50)"; } /* ---- OpenERP Style ---- {{{ */ @@ -93,6 +94,10 @@ display: none; } +.cke_editable .css_editable_mode_display { + display: block !important; +} + .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.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/edit_here.png") !important; } @@ -179,7 +184,7 @@ ul.oe_menu_editor .disclose { cursor: text !important; } -.modal-dialog.select-image { +.modal-dialog.select-media { width: 80%; } @@ -211,7 +216,7 @@ ul.oe_menu_editor .disclose { .modal .font-icons-icons { font-size: 2em; - max-height: 6em; + max-height: 9em; overflow: auto; } .modal .font-icons-icons .font-icons-icon { @@ -250,6 +255,30 @@ ul.oe_menu_editor .disclose { .existing-attachments .pager .disabled { display: none; } +.existing-attachments .existing-attachment-cell { + position: relative; +} +.existing-attachments .existing-attachment-cell .img { + border: 1px solid #848490; +} +.existing-attachments .existing-attachment-cell .existing-attachment-remove { + position: absolute; + top: 0; + left: 15px; + cursor: pointer; + background: white; + padding: 2px; + border: 1px solid #848490; + border-top: none; + border-left: none; + -moz-border-radius-bottomright: 8px; + -webkit-border-bottom-right-radius: 8px; + border-bottom-right-radius: 8px; +} +.existing-attachments .existing-attachment-cell.media_selected > i, .existing-attachments .existing-attachment-cell.media_selected > img { + border-width: 5px; + border-color: #00f8f8; +} .cke_widget_wrapper { position: static !important; @@ -275,17 +304,34 @@ ul.oe_menu_editor .disclose { background-color: #ffd9dd !important; } -.hover-edition-button { +.hover-edition { + display: inline-block; position: absolute; top: 0; left: 0; - z-index: 1000; + z-index: 1001; +} + +.preview-container { + text-align: center; + line-height: 100px; + height: 100px; +} +.preview-container > * { + max-height: 100px; + line-height: 100px; + margin: 0 auto; + display: inline-block; } .cke_editable .fa { cursor: pointer; } +.img-responsive { + text-align: center; +} + /* ---- MOBILE PREVIEW ---- {{{ */ .oe_mobile_preview.modal .modal-content { height: 660px; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 2e6513f7c1d..fb80fa47277 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -23,6 +23,7 @@ background: transparent border: none +box-shadow(none) + -ms-filter: "alpha(opacity=50)" // }}} @@ -76,6 +77,9 @@ .cke_editable .css_editable_mode_hidden display: none +.cke_editable .css_editable_mode_display + display: block !important + .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.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/edit_here.png') !important @@ -149,7 +153,7 @@ ul.oe_menu_editor +user-select(auto) cursor: text !important -.modal-dialog.select-image +.modal-dialog.select-media width: 80% .modal .existing-attachments @@ -178,7 +182,7 @@ ul.oe_menu_editor .modal .font-icons-icons font-size: 2em - max-height: 6em + max-height: 9em overflow: auto .font-icons-icon @@ -210,9 +214,31 @@ ul.oe_menu_editor .font-icons-selected background-color: #ddd +$attachment-border-color: #848490 +.existing-attachments + .pager .disabled + display: none -.existing-attachments .pager .disabled - display: none + .existing-attachment-cell + position: relative + .img + border: 1px solid $attachment-border-color + .existing-attachment-remove + position: absolute + top: 0 + left: 15px // padding-left on col-* + + cursor: pointer + background: white + padding: 2px + border: 1px solid $attachment-border-color + border-top: none + border-left: none + +border-bottom-right-radius(8px) + &.media_selected + > i, > img + border-width: 5px + border-color: rgb(0, 248, 248) // wrapper positioned relatively for drag&drop widget which is disabled below. // Breaks completely horribly crazy products listing page, so take it out. @@ -240,17 +266,30 @@ ul.oe_menu_editor outline: 1px solid red !important background-color: #ffd9dd !important -.hover-edition-button +.hover-edition + display: inline-block position: absolute top: 0 left: 0 - // This z-index is due to .navbar of bootstrap - z-index: 1000 + // This z-index is due to .navbar of bootstrap & jQuery-transfo + z-index: 1001 +.preview-container + text-align: center + line-height: 100px + height: 100px + > * + max-height: 100px + line-height: 100px + margin: 0 auto + display: inline-block // fontawesome .cke_editable .fa cursor: pointer +.img-responsive + text-align: center + // }}} /* ---- MOBILE PREVIEW ---- {{{ */ diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css index fe9c18c0081..cbfca8be131 100644 --- a/addons/website/static/src/css/snippets.css +++ b/addons/website/static/src/css/snippets.css @@ -80,10 +80,8 @@ -moz-user-select: none; user-select: none; cursor: move; - pointer-events: none; } .oe_snippet .oe_snippet_thumbnail { - pointer-events: auto; text-align: center; height: 100%; background: transparent; @@ -200,8 +198,10 @@ .oe_overlay { display: none; + height: 0; position: absolute; background: transparent; + z-index: 1001; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; @@ -214,20 +214,12 @@ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - pointer-events: none; } .oe_overlay.oe_active { display: block; - border-style: dashed; - border-width: 1px; - -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; - -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; - 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.3); } .oe_overlay .oe_handle { display: block !important; - pointer-events: auto; position: absolute; top: 50%; left: 50%; @@ -238,7 +230,18 @@ height: 16px; margin: -2px; } +.oe_overlay .oe_handle > div { + z-index: 1; + position: absolute; + border-style: dashed; + border-width: 1px; + border-color: #666666; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; +} .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button { + z-index: 2; position: relative; top: 50%; left: 50%; @@ -270,56 +273,68 @@ -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_handle.e, .oe_overlay .oe_handle.w { + top: 4px; + height: 100%; +} .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before { content: "\f0d9-\f0da"; line-height: 16px; } +.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div { + width: 0; + height: 100%; + top: 2px; + left: 8px; +} .oe_overlay .oe_handle.e { left: auto; - top: 2px; - height: 100%; right: -6px; cursor: w-resize; } .oe_overlay .oe_handle.w { - top: 2px; - height: 100%; left: -6px; cursor: e-resize; } +.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n { + left: 2px; + width: 100%; +} .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before { - z-index: 0; content: "\f07d"; text-align: center; padding: 1px; } +.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div { + width: 100%; + height: 0; + top: 7px; + left: 1px; +} .oe_overlay .oe_handle.s { top: auto; - left: 2px; - width: 100%; - bottom: -6px; cursor: n-resize; } .oe_overlay .oe_handle.n { - left: 2px; - width: 100%; - top: -6px; cursor: s-resize; } +.oe_overlay .oe_handle.n > div { + top: 5px; +} .oe_overlay .oe_handle.size { + z-index: 3; top: auto; - left: 2px; - width: 100%; + left: 50%; bottom: -6px; + margin-left: -50px; } .oe_overlay .oe_handle.size .oe_handle_button { - z-index: 1; - content: "Resize"; - width: 64px; + position: relative; + z-index: 3; text-align: center; - margin-left: -32px; + margin-left: -52px; margin-top: -10px; - cursor: row-resize; + left: 0px; } .oe_overlay .oe_handle.size .oe_handle_button:hover { background: rgba(30, 30, 30, 0.8); @@ -328,25 +343,40 @@ -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_handle.size div { - border-style: dashed; - border-width: 0 0 1px 0; - border-color: rgba(0, 0, 0, 0.5); - position: relative; - top: 8px; +.oe_overlay .oe_handle.size .size { + position: absolute; + width: 64px; + cursor: row-resize; + top: 9px; + margin-left: 52px; + padding: 0 5px; +} +.oe_overlay .oe_handle.size .auto_size { + position: absolute; + width: 100px; + top: 9px; + cursor: pointer; +} +.oe_overlay .oe_handle.readonly { + cursor: auto !important; +} +.oe_overlay .oe_handle.readonly:before, .oe_overlay .oe_handle.readonly.size { + display: none !important; } .oe_overlay .icon.btn { display: inline-block; } .oe_overlay .oe_overlay_options { position: absolute; - width: 100%; + left: 50% !important; text-align: center; - top: -11px; + top: -20px; z-index: 1002; } +.oe_overlay .oe_overlay_options > .btn-group { + left: -50%; +} .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a { - pointer-events: auto; cursor: pointer; } .oe_overlay .oe_overlay_options .dropdown { @@ -505,7 +535,6 @@ box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59); } .oe_snippet_editor .oe_snippet > * { - pointer-events: none; margin-top: 16px; line-height: 1em; zoom: 0.6; @@ -608,8 +637,3 @@ height: 16px; display: inline-block; } - -[data-snippet-id] { - min-height: 10px; - min-width: 10px; -} diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass index a06bba01dba..40467897e26 100644 --- a/addons/website/static/src/css/snippets.sass +++ b/addons/website/static/src/css/snippets.sass @@ -64,9 +64,7 @@ overflow: hidden +user-select(none) cursor: move - pointer-events: none .oe_snippet_thumbnail - pointer-events: auto text-align: center height: 100% background: transparent @@ -150,22 +148,18 @@ .oe_overlay display: none + height: 0 position: absolute background: transparent + z-index: 1001 //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px)) +border-radius(3px) @include transition(opacity 100ms linear) +box-sizing(border-box) - pointer-events: none &.oe_active display: block - border-style: dashed - 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.3) .oe_handle display: block !important - pointer-events: auto position: absolute top: 50% left: 50% @@ -173,7 +167,15 @@ width: 16px height: 16px margin: -2px + > div + z-index: 1 + position: absolute + border-style: dashed + border-width: 1px + border-color: #666666 + +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset) &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button + z-index: 2 position: relative top: 50% left: 50% @@ -196,72 +198,88 @@ color: #fff +box-shadow(0 0 5px 3px rgba(255,255,255,.7)) &.e, &.w + top: 4px + height: 100% &:before content: "\f0d9-\f0da" line-height: 16px + > div + width: 0 + height: 100% + top: 2px + left: 8px &.e left: auto - top: 2px - height: 100% right: -6px cursor: w-resize &.w - top: 2px - height: 100% left: -6px cursor: e-resize &.s, &.n + left: 2px + width: 100% &:before - z-index: 0 content: "\f07d" text-align: center padding: 1px + > div + width: 100% + height: 0 + top: 7px + left: 1px &.s top: auto - left: 2px - width: 100% - bottom: -6px cursor: n-resize &.n - left: 2px - width: 100% - top: -6px cursor: s-resize + > div + top: 5px &.size + z-index: 3 top: auto - left: 2px - width: 100% + left: 50% bottom: -6px + margin-left: -50px .oe_handle_button - z-index: 1 - content: "Resize" - width: 64px + position: relative + z-index: 3 text-align: center - margin-left: -32px + margin-left: -52px margin-top: -10px - cursor: row-resize + left: 0px &:hover background: rgba(30, 30, 30, .8) color: #fff +box-shadow(0 0 5px 3px rgba(255,255,255,.7)) - div - border-style: dashed - border-width: 0 0 1px 0 - border-color: rgba(0, 0, 0, 0.5) - position: relative - top: 8px + .size + position: absolute + width: 64px + cursor: row-resize + top: 9px + margin-left: 52px + padding: 0 5px + .auto_size + position: absolute + width: 100px + top: 9px + cursor: pointer + &.readonly + cursor: auto !important + &:before, &.size + display: none !important .icon.btn display: inline-block .oe_overlay_options position: absolute - width: 100% + left: 50% !important text-align: center - top: -11px + top: -20px z-index: 1002 + > .btn-group + left: -50% .btn, a - pointer-events: auto cursor: pointer .dropdown display: inline-block @@ -392,7 +410,6 @@ border: 2px solid rgb(151, 137, 255) box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59) & > * - pointer-events: none margin-top: 16px line-height: 1em zoom: 0.6 @@ -483,10 +500,6 @@ height: 16px display: inline-block -[data-snippet-id] - min-height: 10px - min-width: 10px - diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index e47b7a41baa..9339b5e03b9 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -1,3 +1,4 @@ +@charset "utf-8"; /* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY * * css for editor buttons, openerp widget included in the website and other @@ -102,6 +103,10 @@ header a.navbar-brand img { max-height: 50px; } +#wrapwrap p:empty:after { + content: "\2060"; +} + /* ----- Snippets Styles ----- */ .readable { font-size: 120%; @@ -116,9 +121,10 @@ header a.navbar-brand img { } /* ----- BOOTSTRAP FIX ----- */ -.container .container { +.container .container, .readable .container { padding-left: 0; padding-right: 0; + width: auto; } /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */ @@ -216,7 +222,6 @@ footer { /* -- Hack for removing double scrollbar from mobile preview -- */ div#mobile-preview.modal { overflow: hidden; - overflow-y: hidden; } ul.nav-stacked > li > a { @@ -236,7 +241,7 @@ ul.nav-stacked > li > a { display: none; } -[data-publish='off'] { +[data-publish='off'] > *:not(.css_options) { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } @@ -280,12 +285,12 @@ ul.nav-stacked > li > a { background-size: 100%; } -[data-snippet-id], .colmd, .hr, .blockquote { +.carousel, .parallax, .blockquote { overflow: hidden; } @media (max-width: 400px) { - [data-snippet-id]:not([data-snippet-id="carousel"]) { + section, .parallax, .row, .hr, .blockquote { height: auto !important; } } @@ -368,42 +373,51 @@ ul.nav-stacked > li > a { position: absolute; margin-top: -8px; } -.carousel .carousel-control.left span { - left: 10px; +.carousel .carousel-control.left { + left: -10px; +} +.carousel .carousel-control.left * { + position: absolute; + top: 50%; + z-index: 5; + right: 50%; +} +.carousel .carousel-control.right { + right: -10px; } -.carousel .carousel-control.right span { - right: 10px; +.carousel .carousel-control.right * { + position: absolute; + top: 50%; + z-index: 5; + left: 50%; } .quotecarousel { padding-bottom: 16px; } +.hr { + padding: 4px 0; +} + /* Parallax Theme */ -div.carousel[data-snippet-id="slider"] .carousel-indicators li { +div.carousel .carousel-indicators li { border: 1px solid grey; } -div.carousel[data-snippet-id="slider"] .carousel-indicators .active { +div.carousel .carousel-indicators .active { background-color: grey; } .parallax { - position: relative; background-size: cover; +} +.parallax > div { + position: relative; display: table; width: 100%; - min-height: 100px; -} -.parallax.oe_small { min-height: 200px; } -.parallax.oe_medium { - min-height: 300px; -} -.parallax.oe_big { - min-height: 450px; -} -.parallax > div { +.parallax > div > div { display: table-cell; vertical-align: middle; padding: 32px 0; @@ -413,9 +427,6 @@ div.carousel[data-snippet-id="slider"] .carousel-indicators .active { .oe_dark { background: #eff8f8; background: rgba(200, 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; } .oe_black { @@ -529,3 +540,33 @@ span[data-oe-type="monetary"] { width: 400px; margin: 40px auto; } + +div.media_iframe_video { + height: 0; + margin: 0 auto; + text-align: center; + position: relative; + overflow: hidden; + padding-bottom: 66.5%; +} +div.media_iframe_video iframe { + width: 100%; + height: 100%; +} +div.media_iframe_video div { + position: absolute; + width: 100%; + height: 100%; + display: none; +} + +/* Mobile view */ +@media (max-width: 768px) { + img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa { + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + -o-transform: none !important; + transform: none !important; + } +} diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index 3cdfe37a896..e8a7d870623 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -68,6 +68,12 @@ header img max-height: 50px +// add {WORD JOINER} (equivalent to deprecated ZERO WIDTH NO-BREAK SPACE) at +// the beginning of paragraphs so they don't "disappear" after saving when +// used solely for spacing. +#wrapwrap p:empty:after + content: '\2060' + /* ----- Snippets Styles ----- */ .readable @@ -78,17 +84,16 @@ header /* ----- EDITOR ----- */ - .css_non_editable_mode_hidden display: none - /* ----- BOOTSTRAP FIX ----- */ -.container +.container, .readable .container padding-left: 0 padding-right: 0 + width: auto /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */ @@ -179,7 +184,6 @@ footer /* -- 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 @@ -195,7 +199,7 @@ ul.nav-stacked > li > a .btn-success, .css_unpublish display: none -[data-publish='off'] +[data-publish='off']>*:not(.css_options) +opacity(0.5) /* ---- END of PUBLISH ---- */ @@ -230,11 +234,11 @@ ul.nav-stacked > li > a .oe_img_bg background-size: 100% -[data-snippet-id],.colmd,.hr,.blockquote +.carousel, .parallax, .blockquote overflow: hidden @media (max-width: 400px) - [data-snippet-id]:not([data-snippet-id="carousel"]) + section, .parallax, .row, .hr, .blockquote height: auto !important .carousel-inner @@ -302,17 +306,30 @@ ul.nav-stacked > li > a top: 50% position: absolute margin-top: -8px - &.left span - left: 10px - &.right span - right: 10px + &.left + left: -10px + * + position: absolute + top: 50% + z-index: 5 + right: 50% + &.right + right: -10px + * + position: absolute + top: 50% + z-index: 5 + left: 50% .quotecarousel padding-bottom: 16px +.hr + padding: 4px 0 + /* Parallax Theme */ -div.carousel[data-snippet-id="slider"] +div.carousel .carousel-indicators li border: 1px solid grey @@ -320,28 +337,22 @@ div.carousel[data-snippet-id="slider"] background-color: grey .parallax - position: relative background-size: cover - display: table - width: 100% - min-height: 100px - &.oe_small - min-height: 200px - &.oe_medium - min-height: 300px - &.oe_big - min-height: 450px > div - display: table-cell - vertical-align: middle - padding: 32px 0 + position: relative + display: table + width: 100% + min-height: 200px + > div + display: table-cell + vertical-align: middle + padding: 32px 0 /* Background */ .oe_dark background: #eff8f8 background: rgba(200, 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) @@ -428,3 +439,34 @@ span[data-oe-type="monetary"] .oe_website_login_container width: 400px margin: 40px auto + +.oe_website_overflow_ellipsis + white-space:nowrap + overflow:hidden + text-overflow:ellipsis + +div.media_iframe_video + height: 0 + margin: 0 auto + text-align: center + position: relative + overflow: hidden + padding-bottom: 66.5% + iframe + width: 100% + height: 100% + div + position: absolute + width: 100% + height: 100% + display: none + +/* Mobile view */ + +@media (max-width: 768px) + img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa + -webkit-transform: none !important + -moz-transform: none !important + -ms-transform: none !important + -o-transform: none !important + transform: none !important |