diff options
| author | Chirag Dodiya (OpenERP) <cod@tinyerp.com> | 2014-03-19 12:37:36 +0530 |
|---|---|---|
| committer | Chirag Dodiya (OpenERP) <cod@tinyerp.com> | 2014-03-19 12:37:36 +0530 |
| commit | dd404cd70108432a8cef9de5fc7aefb81b749955 (patch) | |
| tree | 62c7459f3c780c07a509329ea2ac5904d4282cb4 /addons/website/static/src/css | |
| parent | dbc6a8368da0e26146013b18d3858b6dbb5739da (diff) | |
| parent | edf0f26d5963a5a9736d9358bbf37b9fd7b9d5d7 (diff) | |
[MRG]Merge with lp:openobject-addons
bzr revid: cod@tinyerp.com-20140319070736-oxjw6beks1fda6xn
Diffstat (limited to 'addons/website/static/src/css')
16 files changed, 305 insertions, 122 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..da0fad43caf 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 ---- {{{ */ @@ -250,6 +251,26 @@ 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; +} .cke_widget_wrapper { position: static !important; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 2e6513f7c1d..4571dcd257e 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)" // }}} @@ -210,9 +211,27 @@ 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) // wrapper positioned relatively for drag&drop widget which is disabled below. // Breaks completely horribly crazy products listing page, so take it out. diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css index fe9c18c0081..726855f311b 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,6 +198,7 @@ .oe_overlay { display: none; + height: 0; position: absolute; background: transparent; -webkit-border-radius: 3px; @@ -214,20 +213,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 +229,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 +272,66 @@ -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; } .oe_overlay .oe_handle.size .oe_handle_button { - z-index: 1; - content: "Resize"; - width: 64px; + z-index: 3; text-align: center; margin-left: -32px; 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 +340,38 @@ -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 { + width: 64px; + cursor: row-resize; + top: 9px; +} +.oe_overlay .oe_handle.size .auto_size { + width: 20px; + padding: 0 5px; + top: 1px; + margin-left: 36px; + 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 +530,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 +632,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..9b12e9df246 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,17 @@ .oe_overlay display: none + height: 0 position: absolute background: transparent //@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 +166,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 +197,84 @@ 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 .oe_handle_button - z-index: 1 - content: "Resize" - width: 64px + z-index: 3 text-align: center margin-left: -32px 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 + width: 64px + cursor: row-resize + top: 9px + .auto_size + width: 20px + padding: 0 5px + top: 1px + margin-left: 36px + 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 +405,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 +495,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..e9df2841347 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -102,6 +102,10 @@ header a.navbar-brand img { max-height: 50px; } +#wrapwrap p:empty:after { + content: "\2060"; +} + /* ----- Snippets Styles ----- */ .readable { font-size: 120%; @@ -116,9 +120,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 +221,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 +240,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 +284,16 @@ ul.nav-stacked > li > a { background-size: 100%; } -[data-snippet-id], .colmd, .hr, .blockquote { +section, .carousel, .parallax, .row, .hr, .blockquote { + min-height: 30px; +} + +.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; } } @@ -380,30 +388,23 @@ ul.nav-stacked > li > a { } /* 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; diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index 3cdfe37a896..2c8d5d2fdda 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,13 @@ ul.nav-stacked > li > a .oe_img_bg background-size: 100% -[data-snippet-id],.colmd,.hr,.blockquote +section, .carousel, .parallax, .row, .hr, .blockquote + min-height: 30px +.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 @@ -312,7 +318,7 @@ ul.nav-stacked > li > a /* Parallax Theme */ -div.carousel[data-snippet-id="slider"] +div.carousel .carousel-indicators li border: 1px solid grey @@ -320,21 +326,16 @@ 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 */ |
