diff --git a/doc/_extensions/odoo_ext/layout.html b/doc/_extensions/odoo_ext/layout.html index 000019b32cf..cb1015d2ebe 100644 --- a/doc/_extensions/odoo_ext/layout.html +++ b/doc/_extensions/odoo_ext/layout.html @@ -22,6 +22,7 @@ {%- block htmltitle -%} + {{ super() }} {%- endblock -%} @@ -226,10 +227,9 @@ {% else %} {% set container = 'container' %} {% endif %} -
-
+
{% if pagename != master_doc %} -
+
{% if 'has-toc' not in meta and not (pagename in toc) %}
-
diff --git a/doc/_extensions/odoo_ext/static/animations.less b/doc/_extensions/odoo_ext/static/animations.less deleted file mode 100644 index bebebfe66f3..00000000000 --- a/doc/_extensions/odoo_ext/static/animations.less +++ /dev/null @@ -1,59 +0,0 @@ - -// Animations - -.keyframes(ripple; { - 100% { - opacity: 0; - .scale(2.5); - } -}); - -.keyframes(fadeInUp; { - 0% { - opacity: 0; - .translate(0; 60px); - } - 40% { opacity: 1} - 100% { - opacity: 1; - .translate(none; none); - } -}); - -.keyframes(fadeIn; { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -}); - - -.fadeInUp { - .animation(fadeInUp 1s); -} - -.fadeIn { - .animation(fadeIn 1s); -} - - -// Ripple Buttons - -.ripple { - z-index: 2; -} -.inner-ripple { - display: block; - position: absolute; - border-radius: 100%; - opacity: 1; - z-index: -1; - background: rgba(0, 0, 0, .05); - pointer-events: none; - .scale(0); -} -.inner-ripple-animated { - .animation(ripple 0.35s ease-in); -} \ No newline at end of file diff --git a/doc/_extensions/odoo_ext/static/aside.less b/doc/_extensions/odoo_ext/static/aside.less index 610ab5fad93..98d560a9a2a 100644 --- a/doc/_extensions/odoo_ext/static/aside.less +++ b/doc/_extensions/odoo_ext/static/aside.less @@ -1,113 +1,91 @@ // ====== Aside ======= // ====================== +aside { + .pseudo-col(); + width: 100%; + max-width: 240px; + position: static; + padding: 0; + display: block; + border-right: 1px solid @gray-lighter; + + @media (max-width:@screen-md-min) { + display: none; + } +} + .navbar-aside { - position : relative; - overflow : hidden; - font-family : @headings-font-family; - font-size : 0.85em; - line-height : 1.5; - font-weight : @fw_medium; - overflow-y : auto; - height : 100%; + position: relative; + overflow: hidden; + font-family: @headings-font-family; + font-size: 0.85em; + line-height: 1.5; + overflow-y: auto; &.affix { - z-index : 2; - top : @w-sub-nav-height - 1; - position : fixed; + z-index: 2; + top: @w-sub-nav-height - 1; + position: fixed; backface-visibility: hidden; - @media (max-width:@screen-md-min) { display: none; } } > ul.list-group { - margin : 0; - z-index : 0; + margin: 0; + z-index: 0; } > h3 { - margin : 0; - padding : 15px 0 10px; + margin: 0; + padding: 15px 0 10px; text-transform: uppercase; - font-weight : @fw_semibold; - font-size : 16px; - color : @text-color; - overflow-x : hidden; - position : relative; - z-index : 1; + font-weight: @fw_semibold; + font-size: 16px; + color: @text-color; + overflow-x: hidden; + position: relative; + z-index: 1; .box-shadow(0 10px 9px -10px #d2d2d2); } - .logo_box { - width : 100%; - background : rgb(253, 253, 253); - position : relative; - display : block; - padding : 15px 30px 10px; - border-bottom: 1px solid fadeout(@text-color, 90%); - text-align : center; - .box-shadow(inset 0px 0 40px rgba(114, 122, 142, .1)); - - .logo { - float : left; - width : 90%; - margin : auto auto 10px 5%; - height : 50px; - background-image : url('img/odoo_logo_rgb.png'); - background-repeat : no-repeat; - background-position: center center; - background-size : contain; - text-decoration : none; - } - } - .gith-container { - margin : 0; - z-index : 1; - position : relative; + margin: 0; + z-index: 1; + position: relative; overflow-x: hidden; .gith-link { - font-weight : 600; - color : @text-color; + color: @text-color; text-decoration: none; - display : inline-block; - position : relative; - margin : 10px 0; - .transition(color .2s); + display: inline-block; + position: relative; + margin: 10px 0; + font-family: @font-family-base; &:hover { - color : @headings-color; + color: @headings-color; text-decoration: none; } &:before { - .size(20px;20px); - .opacity(.5); - content : ''; - position : relative; + .square(1em); + content: ''; + position: relative; background-image: url('img/github-square_32.png'); - background-size : 100%; - display : inline-block; - vertical-align : middle; + background-size: 100%; + display: inline-block; + vertical-align: middle; .translate(0;-1px); - .transition(opacity .2s); - } - - &:hover, &:focus { - &:before { - .opacity(1); - } } } } - //-- All menu levels ul { - padding : 0; - position : relative; + padding: 0; + position: relative; margin-bottom: 0 !important; li { @@ -120,37 +98,64 @@ } &:first-child { - overflow : hidden; + overflow: hidden; border-radius: 2px 0 0 0; } > a { display: block; padding: 5px 15px; - color : @text-color; + color: @text-color; + line-height: 1.2; - &:hover, &:focus { + &:focus, &:hover { color: @headings-color; } } + + &.parent > a:after{ + content: '\e7c1'; + font-family: 'Material-Design-Icons'; + opacity: 0.8; + margin-top: -6px; + .o-position-absolute(50%, 10px); + .rotate(90deg); + .transition(transform 0.2s); + } + + &.parent.active > a:after{ + .rotate(0); + } } //-- Inner menu list ul { - max-height : 0; - background-color: @gray-lighter; - padding-left : 15px; - overflow : hidden; + max-height: 0; + background-color: fade(@gray-light, 20%); + padding: 0px; + overflow: hidden; + margin-left: 0; + box-shadow: inset 0 3px 5px -2px @gray-light; .transition(max-height 0.3s @o-ease); + + > li:not(:last-child) { + box-shadow: 0 1px 0 fade(black, 4%); + + &.active > ul > li:not(:first-child) { + border-top: 1px solid @gray-lighter; + } + } } } //-- Active lis li.active { - &, &:hover, &:focus { + &, &:focus, &:hover { border-color: @gray-lighter; - background : transparent; + background: transparent; + > a { + font-weight: bold; color: @headings-color; } } @@ -162,32 +167,44 @@ // First menu level > ul > li { - border-bottom: 1px solid @gray-lighter; - background : white; + background: white; + border-bottom: 1px solid fade(black, 8%); > a { padding: 10px 15px; + border-left: 3px solid transparent; } - &:hover, &:focus { + &:focus, &:hover { > a { - box-shadow : inset 5px 0 0 -3px @gray-light; + border-left: 3px solid @gray-light; background-color: transparent; } } - &.active, &.active:hover, &.active:focus{ + &.active, &.active:focus, &.active:hover { > a { - box-shadow : inset 5px 0 0 -3px @brand-primary; + border-left: 3px solid @brand-primary; } } - &.parent { - > a:after { - content : '\e7c1'; - font-family: 'Material-Design-Icons'; - opacity : 0.5; - .o-position-absolute(auto, 10px); + &.active.parent + li { + box-shadow: 0 -3px 5px -4px fade(@gray-darker, 40%); + } + + > ul > li { + > a { + padding-left: 20px; + } + + > ul > li { + > a { + padding-left: 30px; + } + + > ul > li > a { + padding-left: 40px; + } } } } @@ -195,25 +212,23 @@ .floating_action_container { position: fixed; - right : 8px; - bottom : 8px; - width : auto; - z-index : @zIndex--float_action; - + right: 8px; + bottom: 8px; + width: auto; + z-index: @zIndex--float_action; @media (min-width:@screen-md-min) { display: none; } } #floating_action { - width : 56px; - height : 56px; - display : inline-block; - z-index : 0; + .square(56px); + display: inline-block; + z-index: 0; background-color: transparent; - border-radius : 50%; - padding : 16px; - box-shadow : 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05); + border-radius: 50%; + padding: 16px; + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05); background-color: @brand-primary; .transition(transform 500ms @o-ease); @@ -222,55 +237,52 @@ } &.active { - .transform(~"translateZ(0px) rotateZ(-180deg)"); + .transform(~ "translateZ(0px) rotateZ(-180deg)"); } } #floating_action_menu { - position : absolute; - z-index : 1; - overflow : hidden; - right : 0; - width : 380px; - bottom : 0; - padding : 0; - display : block; + .o-position-absolute(auto,0,0); + z-index: 1; + overflow: hidden; + width: 380px; + padding: 0; + display: block; border-radius: 2px; - visibility : hidden; + visibility: hidden; .transition(all 0.5s); .box-shadow(0 0 0 transparent); .content { margin: 0; - .opacity(0); + opacity:0; li { - border : none; + border: none; border-top: 1px solid #DDD; + &:first-child { border-top: none; } } a { - display : inline-block; - cursor : pointer; - color : @headings-color; + display: inline-block; + cursor: pointer; + color: @headings-color; text-decoration: none; - float : left; - width : 100%; - padding : 5px 10px; + float: left; + width: 100%; + padding: 5px 10px; } } .bubble { - position : absolute; - .size(1px; 1px); - background : @brand-primary; - content : ''; - bottom : 28px; - right : 28px; - color : #fff; + .o-position-absolute(auto,28px,28px); + .square(1px); + background: @brand-primary; + content: ''; + color: #fff; border-radius: 50%; .transition(all 300ms @o-ease); } @@ -281,17 +293,17 @@ } &.active { - display : block; + display: block; visibility: visible; .transition(all 500ms @o-ease); - .bubble, &:before { + &:before, .bubble { .size(1000px; 2000px); border-radius: 50%; - .opacity(0); - margin-right : -500px; + opacity: 0; + margin-right: -500px; margin-bottom: -500px; - display : block; + display: block; .transition(all .4s @o-ease); } @@ -301,9 +313,27 @@ .content { position: relative; - z-index : 1; + z-index: 1; .opacity(1); .transition(all 500ms @ease-material-3); } } +} + +#mask { + .opacity(0); + position: fixed; + z-index: @zIndex--mask; + top: 0; + left: 0; + .size(100%; 0); + background-color: fade(black, 20%); + .transition(opacity .3s); + + &.active { + .opacity(1); + display: block; + .square(100%); + .transition(opacity .3s); + } } \ No newline at end of file diff --git a/doc/_extensions/odoo_ext/static/components.less b/doc/_extensions/odoo_ext/static/components.less new file mode 100644 index 00000000000..7dfd79a29b8 --- /dev/null +++ b/doc/_extensions/odoo_ext/static/components.less @@ -0,0 +1,515 @@ +// ================================================ +// ================ Components ==================== +// ================================================ + +// Ripple buttons +// ---------------------------------------- +@-webkit-keyframes ripple { + to { + opacity: 0; + -webkit-transform: scale(2.5); + } +} + +@keyframes ripple { + to { + opacity: 0; + .scale(2.5); + } +} + +.ripple { + z-index: 2; + + .inner-ripple { + display: block; + position: absolute; + border-radius: 100%; + opacity: 1; + z-index: -1; + background: rgba(0, 0, 0, .05); + pointer-events: none; + .scale(0); + + &.inner-ripple-animated { + .animation(ripple 0.35s ease-in); + } + } +} + + +// Code Fields +// ---------------------------------------- +article.doc-body .code-fields { + display: table; + width: 100%; + padding: 5px; + font-size: 0.8em; + border: 2px solid @gray-lighter; + + .code-field { + display: table-row; + } + + .code-field-body { + display: block; + padding-left: 15px; + @media screen and (min-width: @screen-md-min) { + display: table-cell; + padding-left: 0; + } + } + + .code-field-name { + width: auto; + display: block; + font-weight: @fw_semibold; + color: @headings-color; + + &:after { + content: ":"; + } + + @media screen and (min-width: @screen-md-min) { + text-align: right; + width: 20%; + padding-right: 10px; + display: table-cell; + } + } + + ul { + list-style: none; + margin: 0.2em 0; + + > li { + margin: 0 0 8px; + padding-left: 0px; + line-height: 1.5; + + &:before { + display: none; + } + } + + strong { + color: @headings-color; + font-family: @font-family-monospace; + } + + em { + color: @headings-color; + font-family: @font-family-monospace; + font-weight: @fw_semibold; + } + } +} + + +// Cards +// ---------------------------------------- +.card-img { + .o-gradient(); + .o-position-absolute(0, 0); + .translate3d(0;0;0); + .square(100%); + display: block; + background-size: cover; + background-position: 50%; +} + +.card.top { + position: relative; + overflow: hidden; + margin: 0; + padding: 0 0 2%; + .transform-origin(50% 0px 0px); + + @media screen and (min-width: @screen-sm-min) { + padding: 12% 0 5%; + } + + @media screen and (min-width: @screen-md-min) { + padding: 10% 0 5%; + } + + @media screen and (min-width: @screen-lg-min) { + padding: 8% 0 4%; + } + + &.stacked { + background: transparent; + .transition(background 1s); + } + + &:before { + content: ""; + display: block; + background-image: url("img/banner_bg.png"); + background-size: cover; + background-position: 50%; + .o-position-absolute(0, 0); + .square(100%); + } + + .card-img { + background-image: url("img/banner_bg.png"); + } + + .container { + position: relative; + font-size: 32px; + @media screen and (min-width: @screen-sm-min) { + &:not(.o_long_title) { + font-size: 40px; + } + + &.o_short_title { + font-size: 50px; + } + } + + h1 { + font-weight: @fw_light; + font-size: 1em; + color: white; + line-height: 0.9; + } + } +} + +.card.top.has_banner { + background: @footer-bg-color; + + &:before { + display: none; + } + + .card-img { + opacity: 0.35; + } +} + +// Alerts +// ---------------------------------------- +main .alert { + padding: 8px 15px; + border-radius: 0; + margin: 5px auto 15px; + border-width: 0 0 0 3px; + // 'INFO' is the default style + border-color: @brand-info; + background-color: lighten(@brand-info, 45%); + + &, p { + line-height: 1.3; + font-size: 14px; + } + + p { + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + } + + > ul { + margin: 0.5em 0; + + > li { + margin: 0; + } + } + + h3.alert-title { + font-size: 1em; + line-height: 1em; + margin: 0 0 5px; + font-weight: bold; + font-family: @font-family-base; + color: darken(@brand-info, 5%); + + &:before { + .mdi-icon( "\e639"); + .translate(0, 0.1em); + margin-right: 0.2em; + } + } + + &.alert-info { + > h3.alert-title { + display: none; + } + } + + &.alert-go_to { + border-color: @o-violet-dark; + background-color: lighten(@o-violet-dark, 52%); + color: darken(@o-violet-dark, 5%); + + > h3.alert-title { + color: darken(@o-violet-dark, 15%); + + &:before { + content: "\e70d"; + } + } + } + + &.alert-success { + border-color: lighten(@brand-success, 30%); + background-color: lighten(@brand-success, 45%); + + > h3.alert-title { + color: darken(@brand-success, 10%); + &:before { + content: "\e625"; + } + } + } + + &.alert-warning, &.warning { + border-color: lighten(@brand-warning, 30%); + background-color: lighten(@brand-warning, 35%); + + > h3.alert-title { + color: @brand-warning; + &:before { + content: "\e6a4"; + } + } + } + + &.alert-danger { + border-color: lighten(@brand-danger, 30%); + background-color: lighten(@brand-danger, 40%); + + > h3.alert-title { + color: darken(@brand-danger, 10%); + &:before { + content: "\e6a4"; + } + } + } + + &.alert-exercise { + border-color: lighten(@doc_exercise, 30%); + background-color: lighten(@doc_exercise, 40%); + color: darken(@doc_exercise, 35%); + + > h3.alert-title { + color: @doc_exercise; + } + + > h3.alert-title:before { + .translate(0;0); + top: 28px; + content: "\e709"; + } + } + + &.doc-content { + @media (min-width: @screen-lg-min) { + max-width: 55%; + } + } +} + + +// Elements +// ---------------------------------------- +hr.divider { + border-color: fadeout(@gray-lightest, 60%); + position: absolute; + width: 900%; + margin-left: -13px; +} + +img.img-responsive { + box-shadow: 0 3px 15px @gray-lighter; + border: 1px solid @gray-lighter; + margin-bottom: 25px; + + &:not(:first-child) { + margin-top: 25px; + } +} + +.figure { + h4 { + margin: 0.5em 0 1.5em; + padding-left: 1em; + font-size: 1em; + font-style: italic; + } +} + +.pq-patch { + em { + display: block; + border-radius: 4px 4px 0 0; + background: @gray-lighter; + padding-left: 10px; + font-size: 0.9em; + font-weight: @fw_semibold; + + + .pq-section .highlight { + border-radius: 0 0 4px 4px; + } + } +} + +span.menuselection { + font-weight: @fw_medium; +} + +.list-group-item { + border: none; + background: transparent; +} + +blockquote { + font-family: @font-family-serif; + font-weight: @fw_semibold; + font-style: italic; + + footer { + font-family: @font-family-base; + background: transparent; + text-align: left; + color: @text-color; + font-weight: normal; + font-style: normal; + + cite { + font-style: italic; + } + } + @media (min-width:@screen-md-min) { + border-left: 3px solid fade(@brand-primary, 50%); + } +} + +.code, code { + font-size: 0.8em; + font-weight: @fw_semibold; + color: darken(@brand-primary, 30%); + background-color: lighten(@brand-primary, 50%); +} + +.btn { + border-radius: 0; +} + +.table, table { + font-size: 0.9em; +} + +.code-attribute, .code-class, .code-classmethod, .code-data, .code-function, .code-method, .code-staticmethod { + // indents *all* content + padding-left: 20px; + margin-bottom: 2em; + // except for item title which gets dedented back + > h6 { + margin-left: -20px; + margin-bottom: 0.3em; + + .viewcode-link { + display: none; + float: right; + } + + &:hover .viewcode-link { + display: inline; + } + } + + p { + margin-bottom: 0.5em; + } +} + +article.doc-body { + &.index-category { + min-height: 300px; + min-height: 30vh; + + li.toctree-l1 { + padding: 5px 0; + } + } +} + + +article.doc-body .content-switcher { + margin-top: 0; + + > ul { + font-size: 10px; + padding: 0; + margin: 0; + .transition(all .2s ease); + + > li { + font-weight: @fw_semibold; + color: @gray-light; + border-bottom: 1px solid transparent; + margin: 0 20px 0 0; + padding-left: 0; + font-size: 1.3em; + cursor: pointer; + display: inline-block; + list-style: none; + .transition(all .2s); + opacity: 0.6; + + &:before { + content: none; + } + + &.active { + border-bottom: 1px solid @brand-primary; + opacity: 1; + } + } + } + + &:hover > ul > li { + .opacity(1); + } + + > .tabs > * { + display: none; + max-width: 100%; + overflow-x: auto; + } + + > .tabs > .active { + display: block; + } +} + +.highlight { + background: @doc_code-bg; + color: @gray-light; + border-radius: @border-radius-base; + margin-bottom: (@line-height-computed / 2); + + pre { + margin-bottom: 0; + } +} + +pre { + font-size: 0.8em; + color: @gray-light; + background: @doc_code-bg; + font-family: @font-family-monospace; + font-weight: @fw_semibold; + position: relative; + border: none; + max-width: 100%; + overflow: auto; + margin: 0 0 (@line-height-computed / 2); +} \ No newline at end of file diff --git a/doc/_extensions/odoo_ext/static/doc.js b/doc/_extensions/odoo_ext/static/doc.js index 7d86eded5c0..0424d8e0963 100644 --- a/doc/_extensions/odoo_ext/static/doc.js +++ b/doc/_extensions/odoo_ext/static/doc.js @@ -2,6 +2,15 @@ $(document).ready(function () { + // -- Initialize fallbacks for requestAnimationFrame + window.requestAnimationFrame = window.requestAnimationFrame + || window.webkitRequestAnimationFrame + || window.mozRequestAnimationFrame + || window.msRequestAnimationFrame + || window.oRequestAnimationFrame + || function (callback) { setTimeout(callback, 10); }; + + // ======= Define variables ======= // ================================= // -- Screen resolutions @@ -12,14 +21,33 @@ win_w = $win.width(); // -- Main elements - var $body = $('body'), - $header = $body.find('> header'), - $sub_nav = $header.find(".o_sub_nav"); - $wrap = $body.find('> #wrap'), - $card_top = $wrap.find('> .card.top'), - $card_top_t = $card_top.find('> .container'), - $main = $wrap.find('main'), - $footer = $body.find('> footer'); + var $body = $('body'), + $header = $body.find('> header'), + $sub_nav = $header.find(".o_sub_nav"), + $wrap = $body.find('> #wrap'), + $main = $wrap.find('main'), + $footer = $body.find('> footer'); + + // -- Detect page type + var page_type = (function () { + if ($wrap.hasClass('index')) { + return 'index'; + } else if ($main.find('article').hasClass('doc-tocindex-category')){ + return 'category-index'; + } else { + return 'article'; + } + })(); + + // -- CP > "Card Top" + var $cp = $wrap.find('> .card.top'), + $cp_image = $cp.find('> .card-img'), + $cp_text = $cp.find('> .container'), + + cp_h = $cp.outerHeight(), + has_cp_image = $cp_image.length > 0, + cp_image_alpha = has_cp_image ? $cp_image.css('opacity') : undefined, + cp_end_point = has_cp_image ? cp_h/2 : undefined; // -- Floating action var $mask = $body.find('#mask'), @@ -27,37 +55,34 @@ $float_menu = $body.find("#floating_action_menu"); // -- Elements' heights - var body_h = $body.height(), - header_h = $header.outerHeight(), - sub_nav_h = $sub_nav.height(); + var body_h = $body.height(), + header_h = $header.outerHeight(), + main_h = $main.height(), + sub_nav_h = $sub_nav.height(); // -- Aside var $aside = $main.find('aside'), has_aside = $aside.length > 0, - $aside_nav = undefined; - aside_links = undefined; + $aside_nav = has_aside ? $aside.find('> .navbar-aside') : undefined, + aside_links = has_aside ? $aside_nav.find("li > a") : undefined; + - if (has_aside) { - $aside_nav = $aside.find('> .navbar-aside'); - aside_links = $aside_nav.find("li > a"); - } // ======= Affix ================= // =============================== - function set_affix(body_h) { - var aside_offset = $aside.offset().top - sub_nav_h, - aside_width = $aside.width(), - main_bottom = 40; + function set_affix() { + var aside_offset_top = $aside.offset().top - sub_nav_h, + aside_offset_bot = parseInt($wrap.css('padding-bottom')), + aside_width = $aside.width(); - $aside_nav.css('width', aside_width); - $aside_nav.affix({ - target: window, + $aside.css('height', main_h); + $aside_nav.css('width', aside_width).affix({ offset: { - top : aside_offset, - bottom : main_bottom + top : aside_offset_top, + bottom : aside_offset_bot, } }); - }; + } // ======= Footer animations ===== // =============================== @@ -67,22 +92,22 @@ if (!footer_effect) { footer_stop(); return; - }; + } $footer.toggleClass('o_footer_effect', footer_effect); $body.css('padding-bottom', $footer.outerHeight()); - var checkIfSearch = function(e) { + var checkIfSearch = function (e) { if ((e.ctrlKey || e.metaKey) && String.fromCharCode(e.which).toLowerCase() === 'f') { footer_stop(); } }; - $win.on('keydown.footer', function(e) { + $win.on('keydown.footer', function (e) { checkIfSearch(e); }); }; - var footer_stop = function() { + var footer_stop = function () { $footer.removeClass('o_footer_effect'); $body.css('padding-bottom', 0); $win.off('keydown.footer'); @@ -92,24 +117,59 @@ // ======= Docs Functions ========== // ================================= // -- Layouting - var layouting = function () { - if ($main.hasClass("index")) { - $main.find("#index .index-tree > .row").each(function() { - var childs = $(this).find(".col-md-3"); - if (childs.length == 2) { - childs.removeClass("col-md-3").addClass("col-md-6"); - } - if (childs.length == 3) { - childs.removeClass("col-md-3").addClass("col-md-4"); - } - }) - $(".floating_action_container").remove(); + var init = function () { + var $floating_container = $body.find("> .floating_action_container"); + + // Adapt Title font size according to its length + $cp_text + .toggleClass('o_short_title', $cp_text.text().trim().length < 15) + .toggleClass('o_long_title', $cp_text.text().trim().length > 45); + + if (page_type == 'index') { + var half_cols_selector = '.tutorials,.api'; + + $main.find("#index .index-tree").find(half_cols_selector) + .wrap('
') + .find('.col-md-3').removeClass('col-md-3 col-sm-6').addClass('col-sm-12 col-md-6'); + + var half_cols_els = $main.find(".o_half_col"); + for(var i = 0; i < half_cols_els.length; i+=2) { + half_cols_els.slice(i, i+2).wrapAll("
"); + } } - if (has_aside) { $aside_nav.find("li").has("ul").addClass("parent"); }; - } + + if (page_type == 'index' || page_type == 'category-index') { + $floating_container.add($mask).remove(); + $main.toggleClass('o_slim_page', page_type == 'category-index'); + } + + if (page_type == 'article') { + attach_permalink_markers(); + + // Hide empty-permalink first sections + var $f_s = $main.find('article.doc-body > section:first-child'); + $f_s.toggleClass('hidden', $f_s[0].childElementCount == 1 && $f_s.children().is('i:empty')); + + if (has_aside) { + if (aside_links.length < 2) { + has_aside = false; + $main.addClass("o_aside_removed"); + $floating_container.add($mask).add($aside).remove(); + return; + } + + floating_menu_layout(); + set_scroll_to(aside_links); + ripple_animation(aside_links); + $aside_nav.find("li").has("ul").addClass("parent"); + } + } + + bind_window_events(); + }; // -- Float action menu - var floating_menu_layout = function() { + var floating_menu_layout = function () { var lis = $aside_nav.find("> ul > li").clone(true) .addClass("ripple") .css({ @@ -117,53 +177,46 @@ overflow: 'hidden' }); lis.find("ul").remove().end() - .find("a").removeClass("ripple").on("click", function() { - floating_menu_toggle(); + .find("a").removeClass("ripple").on("click", function () { + _toggle_float(); }); $float_menu.find(".content").empty().append(lis); $float.add($mask).on("click", function () { - floating_menu_toggle(); + _toggle_float(); return false; }); - } - var floating_menu_toggle = function() { - $float.toggleClass("active"); - setTimeout(function() { - $float_menu.toggleClass("active"); - $mask.toggleClass("active"); - }, 300); }; // -- Scroll To - var scroll_to = function(el_list) { - var offset = 80; - el_list.each(function() { - var $link = $(this), - href = $link.attr("href"); + var set_scroll_to = function (el_list) { + el_list.each(function () { + var $link = $(this), + target_id = $link.attr("href"); - $link.on("click", function() { - var val = $(href).offset().top - 60; - $('html, body').animate({ - scrollTop: val - }, 400); + $link.on("click", function () { $aside_nav.find("li").removeClass("active"); $link.parents("li").addClass("active"); - window.location.hash = $link.prop('hash'); + _scroll_and_set_hash(target_id); return false; - }) - }) - } + }); + }); + + $body.scrollspy({ + target: 'aside', + offset: 200, + }); + }; // -- Ripple buttons - var ripple_animation = function(el_list) { - el_list.each(function() { + var ripple_animation = function (el_list) { + el_list.each(function () { var btn = $(this); btn .css({ position: 'relative', overflow: 'hidden' }) - .bind('mousedown', function(e) { + .bind('mousedown', function (e) { var ripple; if (btn.find('.inner-ripple').length === 0) { ripple = $(''); @@ -186,43 +239,17 @@ top: y + 'px', left: x + 'px' }).addClass('inner-ripple-animated'); - setTimeout(function() { + setTimeout(function () { ripple.removeClass('inner-ripple-animated'); }, 351); }); }); }; - // -- Cards animation - var cards_animate = function(type, speed) { - type = type || 'in'; - speed = speed || 2000; - var $container = $("main.index"), - $cards = $container.find(".card"), - $titles = $container.find("h2"); - - $cards.each(function() { - var $card = $(this), - cardOffset = this.getBoundingClientRect(), - offset = cardOffset.left * 0.8 + cardOffset.top, - delay = parseFloat(offset / speed).toFixed(2); - $card.css("transition-delay", delay + "s"); - }); - - if (type === "in") { - $titles.fadeTo(0, 0); - $titles.fadeTo(1000, 1); - $container.addClass("animating"); - } else { - $titles.fadeTo(300, 0); - $container.removeClass("animating"); - } - }; - // -- Header buttons var header_buttons = function () { var timer; - $header.on('click', '.o_primary_nav .dropdown-toggle', function(e) { + $header.on('click', '.o_primary_nav .dropdown-toggle', function (e) { e.preventDefault(); var $a = $(this); @@ -233,12 +260,12 @@ if ($a.closest('.o_primary_nav').children('.open').length > 0) { $header.addClass("o_sub_opened"); } else { - timer = setTimeout(function() { + timer = setTimeout(function () { $header.removeClass("o_sub_opened"); }, 200); } }); - $header.on('click', '.o_primary_nav .o_secondary_nav', function(e) { + $header.on('click', '.o_primary_nav .o_secondary_nav', function (e) { if (e.target === e.currentTarget) { $header.find('.open').removeClass('open'); $header.find('.o_sub_opened').andSelf().removeClass('o_sub_opened'); @@ -246,28 +273,53 @@ }); // -- Mobile menu opening - $header.on('click', '.o_mobile_menu_toggle', function(e) { + $header.on('click', '.o_mobile_menu_toggle', function (e) { e.preventDefault(); $(this).find('i').toggleClass('fa-bars fa-times'); $header.toggleClass('o_mobile_menu_opened'); }); }; - var card_top_animation = function (win_top){ - var scrollFactor = 1.6, - bannerHeight = Math.max(450, $card_top.outerHeight(true) - 60), - top = Math.min(win_top, bannerHeight/scrollFactor), - base_value = top * (scrollFactor - 1), - opacity = top/bannerHeight * scrollFactor; + // -- Attach permalink markers to sections' title + var attach_permalink_markers = function () { + $main.find('article.doc-body > section').each( function () { + var $section = $(this), + $title = $section.find('> h2, > h3, > h4, > h5, > h6'), + target_id = $section.attr('id'), + $icon = $('').addClass('mdi-content-link'); - $card_top.css('transform', 'translateY(' + base_value + 'px)'); - $card_top_t.css({ - 'transform' : 'translateY( -' + ( base_value - (top/2)) + 'px)', - 'opacity' : 1 - opacity + if ($title.length <= 0) { + return; + } + + $title.addClass('o_has_permalink_marker').append($icon); + + $icon.on('click', function () { + _scroll_and_set_hash("#" + target_id); + + $title.addClass('o_marked').delay(1000).queue(function (){ + $title.removeClass('o_marked').dequeue(); + }); + return false; + }); }); - } + }; - $(".content-switcher").each(function(index, switcher) { + var cp_animation = function (win_top, cp_end_point){ + var top = Math.min(win_top, cp_h); + + $cp_image.css({ + 'opacity' : cp_image_alpha - (top * (cp_image_alpha/cp_end_point)), + 'transform' : 'scale(' + (1 + (top * (0.1/cp_end_point))) +')' + }); + + $cp_text.css({ + 'transform' : 'translateY(' + (top/4) + 'px)', + 'opacity' : 1 - (top/cp_h) + }); + }; + + $(".content-switcher").each(function (index, switcher) { var $switcher = $(switcher), $links = $switcher.find('> ul > li'), $tabs = $switcher.find('> .tabs > *'), @@ -278,66 +330,76 @@ $links.eq(index).add($tabs.eq(index)).addClass('active'); } select(0); - $switcher.on('click', '> ul > li', function() { + $switcher.on('click', '> ul > li', function () { select($(this).index()); return false; }); }); + + // ======= Utils ================== + // ================================= + var _scroll_and_set_hash = function (target_id) { + $('html, body').animate({ + scrollTop: $(target_id).offset().top - 60 + }, 100); + window.location.hash = target_id; + }; + + var _toggle_float = function () { + $float.toggleClass("active"); + setTimeout(function () { + $float_menu.toggleClass("active"); + $mask.toggleClass("active"); + }, 300); + }; + + + var bind_window_events = function () { + // ======= On resize ============== + // Update properties and conditionally call functions according to resolution + $win.on('resize', function () { + // Update size variables + win_w = $win.width(); + body_h = $body.height(); + cp_h = $cp.outerHeight(); + main_h = $main.height(); + cp_end_point = has_cp_image ? cp_h/2 : undefined; + + if (win_w >= screen_md){ + footer_animation(); + (has_aside)? set_affix(): ''; + } else { + footer_stop(); + } + }); + + // ======= On scroll ============== + $win.on('scroll', function () { + var win_top = $win.scrollTop(); + + $win[0].requestAnimationFrame(function () { + cp_animation(win_top, cp_end_point); + }); + + if (win_w >= screen_md) { + $header.toggleClass('o_scrolled', win_top > header_h); + } + }); + }; + + // ======= Onload ================== // ================================= // -- Call default functions - layouting(); - cards_animate(); + init(); header_buttons(); ripple_animation($(".ripple")); - if (has_aside) { - floating_menu_layout(); - scroll_to(aside_links); - ripple_animation(aside_links); - } - // -- Conditionally call specific functions according to resolution if (win_w >= screen_md){ footer_animation(); - - if (has_aside) { - $win.load(function (){ - // wait until page load before affix - body_h = $body.height(); - set_affix(body_h); - }) - } - }; - - // ======= On resize ============== - // ================================ - // Update properties and conditionally call functions according to resolution - $win.on('resize', function () { - win_w = $win.width(); - body_h = $body.height(); - - if (win_w >= screen_md){ - footer_animation(); - if (has_aside) { set_affix(body_h); }; - } else { - footer_stop(); - }; - }); - - // ======= On scroll ============== - // ================================ - $win.on('scroll', function () { - if (win_w >= screen_md) { - var win_top = $win.scrollTop(); - header_h = $header.outerHeight(); - - $header.toggleClass('o_scrolled', win_top > header_h); - card_top_animation(win_top); - } else { - $card_top.css('transform', ''); - } - }); + (has_aside)? set_affix(): ''; + } }); })(jQuery); diff --git a/doc/_extensions/odoo_ext/static/header.less b/doc/_extensions/odoo_ext/static/header.less index dcd5ae0fb81..ab5afd13b00 100644 --- a/doc/_extensions/odoo_ext/static/header.less +++ b/doc/_extensions/odoo_ext/static/header.less @@ -53,7 +53,7 @@ z-index: 2; background-color: fade(white, 60%); color: @header-link-normal; - font-family: @headings-font-family; + font-family: "Work Sans", sans-serif; font-size: 12px; .transition(all .2s ease); .transition-property(~'background, box-shadow' ); diff --git a/doc/_extensions/odoo_ext/static/index.less b/doc/_extensions/odoo_ext/static/index.less new file mode 100644 index 00000000000..9d13250ccf8 --- /dev/null +++ b/doc/_extensions/odoo_ext/static/index.less @@ -0,0 +1,114 @@ +// ================================================ +// ======= Index pages (covers and toctree) ======= +// ================================================ + +#wrap.index { + @media screen and (min-width: @screen-md-min) { + > .card.top { + padding: 10% 0 2%; + } + } + + > main.index { + margin: 10px auto; + + .o_content { + box-shadow: none; + background: none; + } + } +} + +main.index { + .toc-section h2 { + // section title + padding: 0 0 4px; + border-bottom: 1px solid @gray-lighter; + margin: 1.4em 0 0.8em; + font-size: 16px; + font-family: @font-family-base; + letter-spacing: 0; + font-weight: bold; + color: @text-muted; + } + + .card { + border-radius: 4px; + position: relative; + overflow: hidden; + margin-bottom: @card_margin-bottom; + padding-top: 56%; + background-color: @doc_paper; + .deep-1; + + .card-img { + span { + display: block; + background-size: cover; + background-position: 50%; + .square(100%); + } + } + + figcaption { + color: @text-color; + box-shadow: inset 0 1px 0 @gray-lighter; + font-weight: bold; + line-height: 1.2; + font-size: 14px; + background-color: white; + padding: 8px 12px 6px; + .o-position-absolute(0, -1px, auto, -1px); + } + } + + .toc-single-entry .card figcaption { + @media screen and(min-width: @screen-md) { + font-size: 1.5em; + padding: 20px 15px; + } + } +} + +.toctree-wrapper > ul { + list-style: none; + padding: 0; + + li { + line-height: 1.4; + + &.toctree-l1, &.toctree-l3 { + padding-left: 0; + + &:before { + content: none; + } + + &:first-child { + margin-top: 0; + } + } + + &.toctree-l1 { + margin: 0 0 15px; + + > span { + font-size: 21px; + } + } + + &.toctree-l2 { + > span { + font-weight: @fw_medium; + } + + > ul { + margin: 0 0 15px; + + &:empty { + display: none; + } + } + } + } +} \ No newline at end of file diff --git a/doc/_extensions/odoo_ext/static/layout.less b/doc/_extensions/odoo_ext/static/layout.less index 033468afa4e..c826e769544 100644 --- a/doc/_extensions/odoo_ext/static/layout.less +++ b/doc/_extensions/odoo_ext/static/layout.less @@ -1,210 +1,164 @@ -.pseudo-col(){ - position: relative; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; - float: left; - width: 100%; -} - -.code-col(){ - content: ""; - background: @doc_code-bg; - .box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); - position: absolute; - width: 43%; - height: 100%; - top: 0; - right: 0; -} +// ================================================ +// ================ Layout ======================= +// ================================================ +// Bootrstrap adaptations +// ------------------------------------------------------------------ body, header { - position: relative; -} - -// Index layout -#wrap { - > .container.index { - background-color: @gray-lightest; - width: 100%; position: relative; - - > .index { - .container; - } - } } -#main_title { - margin: 10px; - @media (min-width:@screen-md-min) { - margin: 0 0 9px 0; - } -} - - .container .container { - max-width: 100%; - padding:0; - margin:0; + max-width: 100%; + padding: 0; + margin: 0; } -article.doc-content *[class^="col-"] { - padding:0; +.img-responsive { + display: inline-block; } -main{ - - aside, article.doc-body, .doc-content, .doc-aside { - .pseudo-col(); - } - .doc-content, .doc-aside { - position:relative; - } - aside { - width: 25%; - max-width: 300px; - position:static; - padding:0; - display:block; - float:left; - @media (max-width:@screen-md-min) { - display: none; - } - } - article.doc-body { - background: @doc_paper; - border-left: 1px solid @gray-lighter; - padding: 15px 30px; - @media (min-width: @screen-md-min) { - width: 75%; - &.doc-toc { - width: 100%; - } - } - > *{ - max-width: 100%; - } - } - +.img-responsive.center-block { + display: block; } -main.has_code_col{ - .container; +article.doc-content *[class*="col-"] { + padding: 0; +} - aside { - display: none; - } - article.doc-body { - width: 100%; +// Main Components +// ------------------------------------------------------------------ +#wrap { + z-index: 1; + position: relative; + background: @gray-lightest; + padding-bottom: 40px; +} - > *{ - max-width: 100%; +main { + position: relative; + display: block; + + .o_content { + background-color: @doc_paper; + .deep-1; + + @media (min-width: @screen-sm-min) { + margin: -40px auto 0; + border-radius: 2px; + } } - > section { - position: relative; - display:block; - float: left; - width: 100%; + + article.doc-body { + .pseudo-col(); + padding: 15px; + + @media (min-width: @screen-sm-min) { + padding: 15px 30px; + } + + @media (min-width: @screen-md-min) { + max-width: 700px; + } + + @media (min-width: @screen-lg-min) { + margin-left: 7%; + margin-top: 20px; + } + + > * { + max-width: 100%; + } } +} + +main.o_aside_removed, main.o_slim_page { + max-width: 700px; @media (min-width: @screen-lg-min) { - width: 100%; - padding-right: 0; - &:before { - .code-col(); - } - > section { - > * { - width: 54.633333%; - max-width: 600px; - float: left; - clear: left; - } - > h1, > h2, > h3, > h4, > h5, > h6 { - width: 100%; - float: none; - clear: none; - } - .doc-aside { - width: 41%; - float: none; - clear: none; - margin-right: 15px; - margin-left: 57%; - - .content-switcher{ - margin-top:0; - > ul { - margin-bottom: 0; - } - - > ul > li { - color: @gray-light; - } - } - } - } + max-width: 760px; + } + + article.doc-body { + @media (min-width: @screen-md-min) { + padding-left: 30px; + } } - } } -main.index .toctree-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; +main.has_code_col { + max-width: 700px; - > .row { - flex: 1 0 100%; - } - @media screen and(min-width: @screen-md){ - // display these 2 as 2x2 squares - > .row.tutorials, .row.api { - flex: 0 0 50%; - - display: flex; - flex-wrap: wrap; - > div { - flex: 0 0 50%; - } + @media (min-width: @screen-lg-min) { + max-width: @container-lg; } - // FIXME: reimplement a single big box (.toc-single-entry) - } + .doc-aside, .doc-content { + .pseudo-col(); + + @media (max-width: @screen-md-max) { + padding: 0; + } + } + + aside { + display: none; + } + + article.doc-body { + > section { + max-width: 100%; + } + + @media (min-width: @screen-lg-min) { + width: 100%; + max-width: none; + margin:0; + + &:before { + .code-col(); + } + + > section { + position: relative; + display: block; + float: left; + width: 100%; + + > * { + width: 48%; + float: left; + clear: left; + } + + > h2, > h3, > h4, > h5, > h6, > h1 { + width: 48%; + float: none; + clear: none; + } + + .doc-aside { + width: 49%; + float: none; + clear: none; + margin-left: 51%; + color: @gray-light; + font-size: 14px; + line-height: 1.45; + + pre { + font-size: 12px; + } + } + } + + } + } } article.doc-toc .toctree-wrapper > ul > li > span { - display: block; - font-size: 28px; -} - -.code-fields{ - display: table; - width: 100%; - .code-field{ - display: table-row; - } - .code-field-body{ display: block; - padding-left: 15px; - @media screen and (min-width: @screen-md-min){ - display: table-cell; - padding-left: 0; - } - } - .code-field-name{ - width:auto; - display:block; - @media screen and (min-width: @screen-md-min){ - width:20%; - padding-right: 20px; - display: table-cell; - } - } - ul { - margin: .2em 0; - padding: 0; - } + font-size: 28px; } diff --git a/doc/_extensions/odoo_ext/static/mixins.less b/doc/_extensions/odoo_ext/static/mixins.less index 7c11317f07a..151791eb0d2 100644 --- a/doc/_extensions/odoo_ext/static/mixins.less +++ b/doc/_extensions/odoo_ext/static/mixins.less @@ -2,6 +2,25 @@ // ================ Mixins ======================= // ================================================ +// Code column layout mixins +// ------------------------------------------------------------------ +.pseudo-col() { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + float: left; + width: 100%; +} + +.code-col() { + content: ""; + background: @doc_code-bg; + .box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); + .o-position-absolute(0,0); + .size(50%, 100%); +} + // Utilities // ------------------------------------------------------------------ .o-no-select { @@ -131,65 +150,11 @@ } } -// Elevation Shadows -// Visual cue indicating the amount of separation between surfaces. -// An object’s elevation determines the appearance of its shadow. -// ------------------------------------------------------------------ -.deep-1-shadow() { +// Shadows +// -------------------------------------------------- +.deep-1() { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -.deep-2-shadow() { - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} -.deep-3-shadow() { - box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09); -} -.deep-4-shadow() { - box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07); -} -.deep-5-shadow() { - box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05); -} -.deep-transition() { - .o-transition(box-shadow, 0.3s, @o-ease); -} - -.deep-1() { - .deep-1-shadow(); - - &.deep_hover:hover { - .deep-transition(); - .deep-2-shadow(); - } -} -.deep-2() { - .deep-2-shadow(); - - &.deep_hover:hover { - .deep-transition(); - .deep-3-shadow(); - } -} -.deep-3() { - .deep-3-shadow(); - - &.deep_hover:hover { - .deep-transition(); - .deep-4-shadow(); - } -} -.deep-4() { - .deep-4-shadow(); - - &.deep_hover:hover { - .deep-transition(); - .deep-5-shadow(); - } -} -.deep-5() { - .deep-5-shadow(); -} - .transform(@args) { -webkit-transform : @args; @@ -199,7 +164,8 @@ transform : @args; } -//-- Material Design Icons +// Material Design Icons +// -------------------------------------------------- .mdi-icon(@content) { font-family: 'Material-Design-Icons'; content: @content; @@ -210,13 +176,8 @@ -moz-osx-font-smoothing: grayscale; } -.keyframes(@name; @arguments) { - @-moz-keyframes @name { @arguments(); } - @-webkit-keyframes @name { @arguments(); } - @keyframes @name { @arguments(); } -} - -//-- Documentation Dropdown style +// Documentation Dropdown style +// -------------------------------------------------- .o-doc-dropdown { > a.dropdown-toggle { padding: 0 5px 0 10px; @@ -314,35 +275,3 @@ } } } - - -// Shadows -// -------------------------------------------------- - -.shadow-none { - .box-shadow(none); -} - -.deep-1 { - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); -} -.deep-2 { - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} -.deep-3 { - box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09); -} -.deep-4 { - box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07); -} -.deep-5 { - box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05); -} - -// overwrite bootstrap inline forcing -.img-responsive { - display: inline-block; -} -.img-responsive.center-block { - display: block; -} diff --git a/doc/_extensions/odoo_ext/static/print.less b/doc/_extensions/odoo_ext/static/print.less index 3e7dfc8f3bf..997ba7139d5 100644 --- a/doc/_extensions/odoo_ext/static/print.less +++ b/doc/_extensions/odoo_ext/static/print.less @@ -5,10 +5,6 @@ header, footer{ display: none; } - .fadeInUp, .fadeIn{ - .opacity(1)!important; - .animation(none); - } #main_navbar{ position: relative; diff --git a/doc/_extensions/odoo_ext/static/style.css b/doc/_extensions/odoo_ext/static/style.css index a3f34516f98..f721ec371c9 100644 --- a/doc/_extensions/odoo_ext/static/style.css +++ b/doc/_extensions/odoo_ext/static/style.css @@ -4,7 +4,6 @@ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ -@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin,latin-ext); html { font-family: sans-serif; -ms-text-size-adjust: 100%; @@ -1072,10 +1071,10 @@ html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { - font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; - font-size: 15px; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 16px; line-height: 1.42857143; - color: #666c75; + color: #373e42; background-color: #F9F9F9; } input, @@ -1136,8 +1135,8 @@ img { border-radius: 50%; } hr { - margin-top: 21px; - margin-bottom: 21px; + margin-top: 22px; + margin-bottom: 22px; border: 0; border-top: 1px solid #F2F2F2; } @@ -1175,8 +1174,8 @@ h6, .h4, .h5, .h6 { - font-family: "Work Sans", sans-serif; - font-weight: 300; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-weight: 400; line-height: 1.1; color: #21313a; } @@ -1214,8 +1213,8 @@ h2, .h2, h3, .h3 { - margin-top: 21px; - margin-bottom: 10.5px; + margin-top: 22px; + margin-bottom: 11px; } h1 small, .h1 small, @@ -1237,8 +1236,8 @@ h5, .h5, h6, .h6 { - margin-top: 10.5px; - margin-bottom: 10.5px; + margin-top: 11px; + margin-bottom: 11px; } h4 small, .h4 small, @@ -1256,15 +1255,15 @@ h6 .small, } h1, .h1 { - font-size: 39px; + font-size: 41px; } h2, .h2 { - font-size: 32px; + font-size: 30px; } h3, .h3 { - font-size: 26px; + font-size: 24px; } h4, .h4 { @@ -1272,29 +1271,29 @@ h4, } h5, .h5 { - font-size: 15px; + font-size: 17px; } h6, .h6 { - font-size: 13px; + font-size: 17px; } p { - margin: 0 0 10.5px; + margin: 0 0 11px; } .lead { - margin-bottom: 21px; - font-size: 17px; + margin-bottom: 22px; + font-size: 18px; font-weight: 300; line-height: 1.4; } @media (min-width: 768px) { .lead { - font-size: 22.5px; + font-size: 24px; } } small, .small { - font-size: 86%; + font-size: 87%; } mark, .mark { @@ -1400,14 +1399,14 @@ a.bg-danger:focus { background-color: #e4b9b9; } .page-header { - padding-bottom: 9.5px; - margin: 42px 0 21px; + padding-bottom: 10px; + margin: 44px 0 22px; border-bottom: 1px solid #F2F2F2; } ul, ol { margin-top: 0; - margin-bottom: 10.5px; + margin-bottom: 11px; } ul ul, ol ul, @@ -1431,7 +1430,7 @@ ol ol { } dl { margin-top: 0; - margin-bottom: 21px; + margin-bottom: 22px; } dt, dd { @@ -1467,9 +1466,9 @@ abbr[data-original-title] { text-transform: uppercase; } blockquote { - padding: 10.5px 21px; - margin: 0 0 21px; - font-size: 18.75px; + padding: 11px 22px; + margin: 0 0 22px; + font-size: 20px; border-left: 5px solid #F2F2F2; } blockquote p:last-child, @@ -1515,7 +1514,7 @@ blockquote.pull-right .small:after { content: '\00A0 \2014'; } address { - margin-bottom: 21px; + margin-bottom: 22px; font-style: normal; line-height: 1.42857143; } @@ -1548,9 +1547,9 @@ kbd kbd { } pre { display: block; - padding: 10px; - margin: 0 0 10.5px; - font-size: 14px; + padding: 10.5px; + margin: 0 0 11px; + font-size: 15px; line-height: 1.42857143; word-break: break-all; word-wrap: break-word; @@ -2253,7 +2252,7 @@ th { .table { width: 100%; max-width: 100%; - margin-bottom: 21px; + margin-bottom: 22px; } .table > thead > tr > th, .table > tbody > tr > th, @@ -2436,7 +2435,7 @@ table th[class*="col-"] { @media screen and (max-width: 767px) { .table-responsive { width: 100%; - margin-bottom: 15.75px; + margin-bottom: 16.5px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; @@ -2488,8 +2487,8 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: 21px; - font-size: 22.5px; + margin-bottom: 22px; + font-size: 24px; line-height: inherit; color: #6B6D70; border: 0; @@ -2533,16 +2532,16 @@ input[type="checkbox"]:focus { output { display: block; padding-top: 7px; - font-size: 15px; + font-size: 16px; line-height: 1.42857143; color: #888888; } .form-control { display: block; width: 100%; - height: 35px; + height: 36px; padding: 6px 12px; - font-size: 15px; + font-size: 16px; line-height: 1.42857143; color: #888888; background-color: #fff; @@ -2596,7 +2595,7 @@ input[type="search"] { input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { - line-height: 35px; + line-height: 36px; } input[type="date"].input-sm, input[type="time"].input-sm, @@ -2606,7 +2605,7 @@ input[type="search"] { .input-group-sm input[type="time"], .input-group-sm input[type="datetime-local"], .input-group-sm input[type="month"] { - line-height: 31px; + line-height: 33px; } input[type="date"].input-lg, input[type="time"].input-lg, @@ -2616,7 +2615,7 @@ input[type="search"] { .input-group-lg input[type="time"], .input-group-lg input[type="datetime-local"], .input-group-lg input[type="month"] { - line-height: 48px; + line-height: 49px; } } .form-group { @@ -2631,7 +2630,7 @@ input[type="search"] { } .radio label, .checkbox label { - min-height: 21px; + min-height: 22px; padding-left: 20px; margin-bottom: 0; font-weight: normal; @@ -2688,7 +2687,7 @@ fieldset[disabled] .checkbox label { padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; - min-height: 36px; + min-height: 38px; } .form-control-static.input-lg, .form-control-static.input-sm { @@ -2696,84 +2695,84 @@ fieldset[disabled] .checkbox label { padding-right: 0; } .input-sm { - height: 31px; + height: 33px; padding: 5px 10px; - font-size: 13px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } select.input-sm { - height: 31px; - line-height: 31px; + height: 33px; + line-height: 33px; } textarea.input-sm, select[multiple].input-sm { height: auto; } .form-group-sm .form-control { - height: 31px; + height: 33px; padding: 5px 10px; - font-size: 13px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } .form-group-sm select.form-control { - height: 31px; - line-height: 31px; + height: 33px; + line-height: 33px; } .form-group-sm textarea.form-control, .form-group-sm select[multiple].form-control { height: auto; } .form-group-sm .form-control-static { - height: 31px; - min-height: 34px; + height: 33px; + min-height: 36px; padding: 6px 10px; - font-size: 13px; + font-size: 14px; line-height: 1.5; } .input-lg { - height: 48px; + height: 49px; padding: 10px 16px; - font-size: 19px; + font-size: 20px; line-height: 1.3333333; border-radius: 6px; } select.input-lg { - height: 48px; - line-height: 48px; + height: 49px; + line-height: 49px; } textarea.input-lg, select[multiple].input-lg { height: auto; } .form-group-lg .form-control { - height: 48px; + height: 49px; padding: 10px 16px; - font-size: 19px; + font-size: 20px; line-height: 1.3333333; border-radius: 6px; } .form-group-lg select.form-control { - height: 48px; - line-height: 48px; + height: 49px; + line-height: 49px; } .form-group-lg textarea.form-control, .form-group-lg select[multiple].form-control { height: auto; } .form-group-lg .form-control-static { - height: 48px; - min-height: 40px; + height: 49px; + min-height: 42px; padding: 11px 16px; - font-size: 19px; + font-size: 20px; line-height: 1.3333333; } .has-feedback { position: relative; } .has-feedback .form-control { - padding-right: 43.75px; + padding-right: 45px; } .form-control-feedback { position: absolute; @@ -2781,25 +2780,25 @@ select[multiple].input-lg { right: 0; z-index: 2; display: block; - width: 35px; - height: 35px; - line-height: 35px; + width: 36px; + height: 36px; + line-height: 36px; text-align: center; pointer-events: none; } .input-lg + .form-control-feedback, .input-group-lg + .form-control-feedback, .form-group-lg .form-control + .form-control-feedback { - width: 48px; - height: 48px; - line-height: 48px; + width: 49px; + height: 49px; + line-height: 49px; } .input-sm + .form-control-feedback, .input-group-sm + .form-control-feedback, .form-group-sm .form-control + .form-control-feedback { - width: 31px; - height: 31px; - line-height: 31px; + width: 33px; + height: 33px; + line-height: 33px; } .has-success .help-block, .has-success .control-label, @@ -2892,7 +2891,7 @@ select[multiple].input-lg { color: #a94442; } .has-feedback label ~ .form-control-feedback { - top: 26px; + top: 27px; } .has-feedback label.sr-only ~ .form-control-feedback { top: 0; @@ -2901,7 +2900,7 @@ select[multiple].input-lg { display: block; margin-top: 5px; margin-bottom: 10px; - color: #a7acb3; + color: #717f88; } @media (min-width: 768px) { .form-inline .form-group { @@ -2963,7 +2962,7 @@ select[multiple].input-lg { } .form-horizontal .radio, .form-horizontal .checkbox { - min-height: 28px; + min-height: 29px; } .form-horizontal .form-group { margin-left: -15px; @@ -2982,13 +2981,13 @@ select[multiple].input-lg { @media (min-width: 768px) { .form-horizontal .form-group-lg .control-label { padding-top: 11px; - font-size: 19px; + font-size: 20px; } } @media (min-width: 768px) { .form-horizontal .form-group-sm .control-label { padding-top: 6px; - font-size: 13px; + font-size: 14px; } } .btn { @@ -3003,7 +3002,7 @@ select[multiple].input-lg { border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; - font-size: 15px; + font-size: 16px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; @@ -3425,21 +3424,21 @@ fieldset[disabled] .btn-link:focus { .btn-lg, .btn-group-lg > .btn { padding: 10px 16px; - font-size: 19px; + font-size: 20px; line-height: 1.3333333; border-radius: 6px; } .btn-sm, .btn-group-sm > .btn { padding: 5px 10px; - font-size: 13px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } .btn-xs, .btn-group-xs > .btn { padding: 1px 5px; - font-size: 13px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } @@ -3516,7 +3515,7 @@ tbody.collapse.in { padding: 5px 0; margin: 2px 0 0; list-style: none; - font-size: 15px; + font-size: 16px; text-align: left; background-color: #fff; border: 1px solid #ccc; @@ -3532,7 +3531,7 @@ tbody.collapse.in { } .dropdown-menu .divider { height: 1px; - margin: 9.5px 0; + margin: 10px 0; overflow: hidden; background-color: #e5e5e5; } @@ -3589,7 +3588,7 @@ tbody.collapse.in { .dropdown-header { display: block; padding: 3px 20px; - font-size: 13px; + font-size: 14px; line-height: 1.42857143; color: #dcddde; white-space: nowrap; @@ -3823,17 +3822,17 @@ tbody.collapse.in { .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { - height: 48px; + height: 49px; padding: 10px 16px; - font-size: 19px; + font-size: 20px; line-height: 1.3333333; border-radius: 6px; } select.input-group-lg > .form-control, select.input-group-lg > .input-group-addon, select.input-group-lg > .input-group-btn > .btn { - height: 48px; - line-height: 48px; + height: 49px; + line-height: 49px; } textarea.input-group-lg > .form-control, textarea.input-group-lg > .input-group-addon, @@ -3846,17 +3845,17 @@ select[multiple].input-group-lg > .input-group-btn > .btn { .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { - height: 31px; + height: 33px; padding: 5px 10px; - font-size: 13px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } select.input-group-sm > .form-control, select.input-group-sm > .input-group-addon, select.input-group-sm > .input-group-btn > .btn { - height: 31px; - line-height: 31px; + height: 33px; + line-height: 33px; } textarea.input-group-sm > .form-control, textarea.input-group-sm > .input-group-addon, @@ -3884,7 +3883,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .input-group-addon { padding: 6px 12px; - font-size: 15px; + font-size: 16px; font-weight: normal; line-height: 1; color: #888888; @@ -3895,12 +3894,12 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .input-group-addon.input-sm { padding: 5px 10px; - font-size: 13px; + font-size: 14px; border-radius: 3px; } .input-group-addon.input-lg { padding: 10px 16px; - font-size: 19px; + font-size: 20px; border-radius: 6px; } .input-group-addon input[type="radio"], @@ -3995,7 +3994,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .nav .nav-divider { height: 1px; - margin: 9.5px 0; + margin: 10px 0; overflow: hidden; background-color: #e5e5e5; } @@ -4153,7 +4152,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .navbar { position: relative; min-height: 50px; - margin-bottom: 21px; + margin-bottom: 22px; border: 1px solid transparent; } @media (min-width: 768px) { @@ -4258,9 +4257,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .navbar-brand { float: left; - padding: 14.5px 15px; - font-size: 19px; - line-height: 21px; + padding: 14px 15px; + font-size: 20px; + line-height: 22px; height: 50px; } .navbar-brand:hover, @@ -4306,12 +4305,12 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } } .navbar-nav { - margin: 7.25px -15px; + margin: 7px -15px; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; - line-height: 21px; + line-height: 22px; } @media (max-width: 767px) { .navbar-nav .open .dropdown-menu { @@ -4328,7 +4327,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { - line-height: 21px; + line-height: 22px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { @@ -4344,8 +4343,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { float: left; } .navbar-nav > li > a { - padding-top: 14.5px; - padding-bottom: 14.5px; + padding-top: 14px; + padding-bottom: 14px; } } .navbar-form { @@ -4356,8 +4355,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - margin-top: 7.5px; - margin-bottom: 7.5px; + margin-top: 7px; + margin-bottom: 7px; } @media (min-width: 768px) { .navbar-form .form-group { @@ -4442,20 +4441,20 @@ select[multiple].input-group-sm > .input-group-btn > .btn { border-bottom-left-radius: 0; } .navbar-btn { - margin-top: 7.5px; - margin-bottom: 7.5px; + margin-top: 7px; + margin-bottom: 7px; } .navbar-btn.btn-sm { - margin-top: 9.5px; - margin-bottom: 9.5px; + margin-top: 8.5px; + margin-bottom: 8.5px; } .navbar-btn.btn-xs { margin-top: 14px; margin-bottom: 14px; } .navbar-text { - margin-top: 14.5px; - margin-bottom: 14.5px; + margin-top: 14px; + margin-bottom: 14px; } @media (min-width: 768px) { .navbar-text { @@ -4676,7 +4675,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { } .breadcrumb { padding: 8px 15px; - margin-bottom: 21px; + margin-bottom: 22px; list-style: none; background-color: #f5f5f5; border-radius: 4px; @@ -4695,7 +4694,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .pagination { display: inline-block; padding-left: 0; - margin: 21px 0; + margin: 22px 0; border-radius: 4px; } .pagination > li { @@ -4759,7 +4758,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .pagination-lg > li > a, .pagination-lg > li > span { padding: 10px 16px; - font-size: 19px; + font-size: 20px; line-height: 1.3333333; } .pagination-lg > li:first-child > a, @@ -4775,7 +4774,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .pagination-sm > li > a, .pagination-sm > li > span { padding: 5px 10px; - font-size: 13px; + font-size: 14px; line-height: 1.5; } .pagination-sm > li:first-child > a, @@ -4790,7 +4789,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { } .pager { padding-left: 0; - margin: 21px 0; + margin: 22px 0; list-style: none; text-align: center; } @@ -4897,7 +4896,7 @@ a.label:focus { display: inline-block; min-width: 10px; padding: 3px 7px; - font-size: 13px; + font-size: 14px; font-weight: bold; color: #fff; line-height: 1; @@ -4952,7 +4951,7 @@ a.badge:focus { } .jumbotron p { margin-bottom: 15px; - font-size: 23px; + font-size: 24px; font-weight: 200; } .jumbotron > hr { @@ -4979,13 +4978,13 @@ a.badge:focus { } .jumbotron h1, .jumbotron .h1 { - font-size: 68px; + font-size: 72px; } } .thumbnail { display: block; padding: 4px; - margin-bottom: 21px; + margin-bottom: 22px; line-height: 1.42857143; background-color: #F9F9F9; border: 1px solid #ddd; @@ -5006,11 +5005,11 @@ a.thumbnail.active { } .thumbnail .caption { padding: 9px; - color: #666c75; + color: #373e42; } .alert { padding: 15px; - margin-bottom: 21px; + margin-bottom: 22px; border: 1px solid transparent; border-radius: 4px; } @@ -5101,8 +5100,8 @@ a.thumbnail.active { } .progress { overflow: hidden; - height: 21px; - margin-bottom: 21px; + height: 22px; + margin-bottom: 22px; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); @@ -5112,8 +5111,8 @@ a.thumbnail.active { float: left; width: 0%; height: 100%; - font-size: 13px; - line-height: 21px; + font-size: 14px; + line-height: 22px; color: #fff; text-align: center; background-color: #21b799; @@ -5423,7 +5422,7 @@ button.list-group-item-danger.active:focus { line-height: 1.3; } .panel { - margin-bottom: 21px; + margin-bottom: 22px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; @@ -5445,7 +5444,7 @@ button.list-group-item-danger.active:focus { .panel-title { margin-top: 0; margin-bottom: 0; - font-size: 17px; + font-size: 18px; color: inherit; } .panel-title > a, @@ -5635,7 +5634,7 @@ button.list-group-item-danger.active:focus { margin-bottom: 0; } .panel-group { - margin-bottom: 21px; + margin-bottom: 22px; } .panel-group .panel { margin-bottom: 0; @@ -5815,7 +5814,7 @@ button.list-group-item-danger.active:focus { } .close { float: right; - font-size: 22.5px; + font-size: 24px; font-weight: bold; line-height: 1; color: #000; @@ -5965,7 +5964,7 @@ button.close { position: absolute; z-index: 1070; display: block; - font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; font-weight: normal; letter-spacing: normal; @@ -5980,7 +5979,7 @@ button.close { word-break: normal; word-spacing: normal; word-wrap: normal; - font-size: 13px; + font-size: 14px; opacity: 0; filter: alpha(opacity=0); } @@ -6083,7 +6082,7 @@ button.close { display: none; max-width: 276px; padding: 1px; - font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; font-weight: normal; letter-spacing: normal; @@ -6098,7 +6097,7 @@ button.close { word-break: normal; word-spacing: normal; word-wrap: normal; - font-size: 15px; + font-size: 16px; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; @@ -6122,7 +6121,7 @@ button.close { .popover-title { margin: 0; padding: 8px 14px; - font-size: 15px; + font-size: 16px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; @@ -6462,10 +6461,6 @@ button.close { .modal-header:after, .modal-footer:before, .modal-footer:after, -#wrap > .container.index > .index:before, -#wrap > .container.index > .index:after, -main.has_code_col:before, -main.has_code_col:after, .o_main_header > .o_main_header_main:before, .o_main_header > .o_main_header_main:after { content: " "; @@ -6487,8 +6482,6 @@ main.has_code_col:after, .panel-body:after, .modal-header:after, .modal-footer:after, -#wrap > .container.index > .index:after, -main.has_code_col:after, .o_main_header > .o_main_header_main:after { clear: both; } @@ -9199,7 +9192,7 @@ main.has_code_col:after, z-index: 1; position: relative; background-color: #dcddde; - color: #5a5f68; + color: #2b3134; } @media screen and (min-width: 768px) { .o-doc-dropdown.open { @@ -9207,7 +9200,7 @@ main.has_code_col:after, } } .o-doc-dropdown.open .dropdown-toggle { - color: #5a5f68; + color: #2b3134; } .o-doc-dropdown.open .dropdown-toggle:hover { color: #21313a; @@ -9222,17 +9215,10 @@ main.has_code_col:after, padding-bottom: 12.5px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -.o-doc-dropdown.open .dropdown-menu.deep_hover:hover { - -webkit-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} .o-doc-dropdown.open .dropdown-menu > li > a { font-size: 12px; display: block; - color: #5a5f68; + color: #2b3134; float: none; text-transform: none; font-weight: 500; @@ -9284,55 +9270,195 @@ main.has_code_col:after, .o-doc-dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(3) > a:before { padding-left: 1em; } -.shadow-none { - -webkit-box-shadow: none; - box-shadow: none; +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } -.deep-1 { - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); +h1, +h2, +h3, +h4, +h5, +h6 { + text-rendering: geometricPrecision; } -.deep-2 { - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} -.deep-3 { - box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09); -} -.deep-4 { - box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07); -} -.deep-5 { - box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05); -} -.img-responsive, -.thumbnail > img, -.thumbnail a > img, -.carousel-inner > .item > img, -.carousel-inner > .item > a > img { - display: inline-block; -} -.img-responsive.center-block { - display: block; -} -@-moz-keyframes ripple { - 100% { - opacity: 0; - -webkit-transform: scale(2.5); - -ms-transform: scale(2.5); - -o-transform: scale(2.5); - transform: scale(2.5); +@media (min-width: 1200px) { + .has_code_col .doc-aside h1, + .has_code_col .doc-aside h2, + .has_code_col .doc-aside h3, + .has_code_col .doc-aside h4, + .has_code_col .doc-aside h5, + .has_code_col .doc-aside h6 { + color: white; } } +article.doc-body > section { + padding-bottom: 10px; +} +article.doc-body > section > :last-child { + margin-bottom: 0; +} +article.doc-body > section > h2, +article.doc-body > section > h3, +article.doc-body > section > h4, +article.doc-body > section > h5, +article.doc-body > section > h6 { + margin-bottom: 5px; + margin-top: 40px; +} +article.doc-body > section > h2:last-child, +article.doc-body > section > h3:last-child, +article.doc-body > section > h4:last-child, +article.doc-body > section > h5:last-child, +article.doc-body > section > h6:last-child { + margin-bottom: -30px; + padding-bottom: 5px; + border-bottom: 2px solid #f4f6f7; +} +article.doc-body > section > h2 { + padding-bottom: 5px; + border-bottom: 2px solid #f4f6f7; +} +article.doc-body > section > h5, +article.doc-body > section > h6 { + font-weight: 500; +} +article.doc-body > section:first-of-type > h2, +article.doc-body > section:first-of-type > h3, +article.doc-body > section:first-of-type > h4, +article.doc-body > section:first-of-type > h5, +article.doc-body > section:first-of-type > h6 { + margin-top: 10px; +} +article.doc-body > section:first-of-type:empty, +article.doc-body > section:first-of-type.hidden { + display: none; +} +article.doc-body > section:first-of-type:empty + section > h2, +article.doc-body > section:first-of-type.hidden + section > h2, +article.doc-body > section:first-of-type:empty + section > h3, +article.doc-body > section:first-of-type.hidden + section > h3, +article.doc-body > section:first-of-type:empty + section > h4, +article.doc-body > section:first-of-type.hidden + section > h4, +article.doc-body > section:first-of-type:empty + section > h5, +article.doc-body > section:first-of-type.hidden + section > h5, +article.doc-body > section:first-of-type:empty + section > h6, +article.doc-body > section:first-of-type.hidden + section > h6 { + margin-top: 10px; +} +article.doc-body > section { + line-height: 26px; +} +article.doc-body a, +article.doc-body a:hover { + text-decoration: underline; +} +article.doc-body blockquote { + font-size: 15px; + line-height: 26px; +} +article.doc-body blockquote:not(:first-child) { + margin-top: 17px; +} +article.doc-body dl dt code { + font-size: 0.9em; +} +article.doc-body dl dd { + margin: 2px 0 15px 15px; +} +article.doc-body ol, +article.doc-body ul { + line-height: 26px; + padding: 0; + list-style: none; + counter-reset: a; +} +article.doc-body ol li, +article.doc-body ul li { + margin: 5px 0; + position: relative; + padding-left: 30px; +} +article.doc-body ol li:before, +article.doc-body ul li:before { + content: ""; + display: block; + position: absolute; + top: 9px; + left: 10px; + bottom: auto; + right: auto; + width: 6px; + height: 6px; + border-radius: 50%; + background: #939da3; +} +article.doc-body ol li p, +article.doc-body ul li p { + margin: 0; +} +article.doc-body ol li h2, +article.doc-body ul li h2, +article.doc-body ol li h3, +article.doc-body ul li h3, +article.doc-body ol li h4, +article.doc-body ul li h4, +article.doc-body ol li h5, +article.doc-body ul li h5, +article.doc-body ol li h6, +article.doc-body ul li h6 { + margin-top: 0; + padding-top: 0; +} +article.doc-body ol > li:before { + counter-increment: a; + content: counter(a); + color: #fff; + font-size: 13px; + font-weight: bold; + line-height: 1; + text-align: center; + padding: 4px 0; + width: 20px; + height: 20px; + border-radius: 10px; + position: absolute; + top: 3px; + left: 0; + bottom: auto; + right: auto; +} +article.doc-body .o_has_permalink_marker { + transition: all, 0.3s; + padding-left: 0; +} +article.doc-body .o_has_permalink_marker i { + cursor: pointer; + visibility: hidden; + margin-left: 0.1em; + font-size: 0.8em; + padding: 0.2em; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +article.doc-body .o_has_permalink_marker:hover i { + visibility: visible; +} +article.doc-body .o_has_permalink_marker.o_marked { + padding-left: 10px; + background-color: #fff7d1; +} @-webkit-keyframes ripple { - 100% { + to { opacity: 0; -webkit-transform: scale(2.5); - -ms-transform: scale(2.5); - -o-transform: scale(2.5); - transform: scale(2.5); } } @keyframes ripple { - 100% { + to { opacity: 0; -webkit-transform: scale(2.5); -ms-transform: scale(2.5); @@ -9340,101 +9466,10 @@ main.has_code_col:after, transform: scale(2.5); } } -@-moz-keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translate(0, 60px); - -ms-transform: translate(0, 60px); - -o-transform: translate(0, 60px); - transform: translate(0, 60px); - } - 40% { - opacity: 1; - } - 100% { - opacity: 1; - -webkit-transform: translate(none, none); - -ms-transform: translate(none, none); - -o-transform: translate(none, none); - transform: translate(none, none); - } -} -@-webkit-keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translate(0, 60px); - -ms-transform: translate(0, 60px); - -o-transform: translate(0, 60px); - transform: translate(0, 60px); - } - 40% { - opacity: 1; - } - 100% { - opacity: 1; - -webkit-transform: translate(none, none); - -ms-transform: translate(none, none); - -o-transform: translate(none, none); - transform: translate(none, none); - } -} -@keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translate(0, 60px); - -ms-transform: translate(0, 60px); - -o-transform: translate(0, 60px); - transform: translate(0, 60px); - } - 40% { - opacity: 1; - } - 100% { - opacity: 1; - -webkit-transform: translate(none, none); - -ms-transform: translate(none, none); - -o-transform: translate(none, none); - transform: translate(none, none); - } -} -@-moz-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -.fadeInUp { - -webkit-animation: fadeInUp 1s; - -o-animation: fadeInUp 1s; - animation: fadeInUp 1s; -} -.fadeIn { - -webkit-animation: fadeIn 1s; - -o-animation: fadeIn 1s; - animation: fadeIn 1s; -} .ripple { z-index: 2; } -.inner-ripple { +.ripple .inner-ripple { display: block; position: absolute; border-radius: 100%; @@ -9447,185 +9482,569 @@ main.has_code_col:after, -o-transform: scale(0); transform: scale(0); } -.inner-ripple-animated { +.ripple .inner-ripple.inner-ripple-animated { -webkit-animation: ripple 0.35s ease-in; -o-animation: ripple 0.35s ease-in; animation: ripple 0.35s ease-in; } -body { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +article.doc-body .code-fields { + display: table; + width: 100%; + padding: 5px; + font-size: 0.8em; + border: 2px solid #F2F2F2; } -h1, -h2, -h3, -h4, -h5, -h6, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; +article.doc-body .code-fields .code-field { + display: table-row; } -@media (min-width: 1200px) { - .has_code_col .doc-aside h1, - .has_code_col .doc-aside h2, - .has_code_col .doc-aside h3, - .has_code_col .doc-aside h4, - .has_code_col .doc-aside h5, - .has_code_col .doc-aside h6, - .has_code_col .doc-aside .h1, - .has_code_col .doc-aside .h2, - .has_code_col .doc-aside .h3, - .has_code_col .doc-aside .h4, - .has_code_col .doc-aside .h5, - .has_code_col .doc-aside .h6 { - color: white; +article.doc-body .code-fields .code-field-body { + display: block; + padding-left: 15px; +} +@media screen and (min-width: 992px) { + article.doc-body .code-fields .code-field-body { + display: table-cell; + padding-left: 0; } } -h1, -h2, -.h1, -.h2 { - margin-top: 31.5px; +article.doc-body .code-fields .code-field-name { + width: auto; + display: block; + font-weight: 600; + color: #21313a; +} +article.doc-body .code-fields .code-field-name:after { + content: ":"; +} +@media screen and (min-width: 992px) { + article.doc-body .code-fields .code-field-name { + text-align: right; + width: 20%; + padding-right: 10px; + display: table-cell; + } +} +article.doc-body .code-fields ul { + list-style: none; + margin: 0.2em 0; +} +article.doc-body .code-fields ul > li { + margin: 0 0 8px; + padding-left: 0px; + line-height: 1.5; +} +article.doc-body .code-fields ul > li:before { + display: none; +} +article.doc-body .code-fields ul strong { + color: #21313a; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +} +article.doc-body .code-fields ul em { + color: #21313a; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-weight: 600; +} +.card-img { + background: #75526b; + background: -webkit-linear-gradient(99deg, #875A7B 10%, #62495B 90%); + background: -moz-linear-gradient(99deg, #875A7B 10%, #62495B 90%); + background: -ms-linear-gradient(99deg, #875A7B 10%, #62495B 90%); + background: -o-linear-gradient(99deg, #875A7B 10%, #62495B 90%); + background: linear-gradient(99deg, #875A7B 10%, #62495B 90%); + position: absolute; + top: 0; + left: auto; + bottom: auto; + right: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + width: 100%; + height: 100%; + display: block; + background-size: cover; + background-position: 50%; +} +.card.top { + position: relative; + overflow: hidden; + margin: 0; + padding: 0 0 2%; + -webkit-transform-origin: 50% 0px 0px; + -moz-transform-origin: 50% 0px 0px; + -ms-transform-origin: 50% 0px 0px; + transform-origin: 50% 0px 0px; +} +@media screen and (min-width: 768px) { + .card.top { + padding: 12% 0 5%; + } +} +@media screen and (min-width: 992px) { + .card.top { + padding: 10% 0 5%; + } +} +@media screen and (min-width: 1200px) { + .card.top { + padding: 8% 0 4%; + } +} +.card.top.stacked { + background: transparent; + -webkit-transition: background 1s; + -o-transition: background 1s; + transition: background 1s; +} +.card.top:before { + content: ""; + display: block; + background-image: url("img/banner_bg.png"); + background-size: cover; + background-position: 50%; + position: absolute; + top: 0; + left: auto; + bottom: auto; + right: 0; + width: 100%; + height: 100%; +} +.card.top .card-img { + background-image: url("img/banner_bg.png"); +} +.card.top .container { + position: relative; + font-size: 32px; +} +@media screen and (min-width: 768px) { + .card.top .container:not(.o_long_title) { + font-size: 40px; + } + .card.top .container.o_short_title { + font-size: 50px; + } +} +.card.top .container h1 { font-weight: 300; + font-size: 1em; + color: white; + line-height: 0.9; } -h1 b, -h2 b, -.h1 b, -.h2 b, -h1 strong, -h2 strong, -.h1 strong, -.h2 strong, -h1 a, -h2 a, -.h1 a, -.h2 a { - font-weight: 400; +.card.top.has_banner { + background: #282F33; } -h3, -.h3, -h4, -.h4, -h5, -h6, -.h5, -.h6 { - font-weight: 400; +.card.top.has_banner:before { + display: none; } -h3 b, -.h3 b, -h4 b, -.h4 b, -h5 b, -h6 b, -.h5 b, -.h6 b, -h3 strong, -.h3 strong, -h4 strong, -.h4 strong, -h5 strong, -h6 strong, -.h5 strong, -.h6 strong, -h3 a, -.h3 a, -h4 a, -.h4 a, -h5 a, -h6 a, -.h5 a, -.h6 a { +.card.top.has_banner .card-img { + opacity: 0.35; +} +main .alert { + padding: 8px 15px; + border-radius: 0; + margin: 5px auto 15px; + border-width: 0 0 0 3px; + border-color: #4B9EB6; + background-color: #eef6f8; +} +main .alert, +main .alert p { + line-height: 1.3; + font-size: 14px; +} +main .alert p { + margin-bottom: 5px; +} +main .alert p:last-child { + margin-bottom: 0; +} +main .alert > ul { + margin: 0.5em 0; +} +main .alert > ul > li { + margin: 0; +} +main .alert h3.alert-title { + font-size: 1em; + line-height: 1em; + margin: 0 0 5px; + font-weight: bold; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + color: #438fa5; +} +main .alert h3.alert-title:before { + font-family: 'Material-Design-Icons'; + content: "\e639"; + display: inline-block; + text-rendering: geometricPrecision; + font-size: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-transform: translate(0, 0.1em); + -ms-transform: translate(0, 0.1em); + -o-transform: translate(0, 0.1em); + transform: translate(0, 0.1em); + margin-right: 0.2em; +} +main .alert.alert-info > h3.alert-title { + display: none; +} +main .alert.alert-go_to { + border-color: #875A7B; + background-color: #f7f3f6; + color: #78506d; +} +main .alert.alert-go_to > h3.alert-title { + color: #593b51; +} +main .alert.alert-go_to > h3.alert-title:before { + content: "\e70d"; +} +main .alert.alert-success { + border-color: #b9dfb9; + background-color: #eef7ee; +} +main .alert.alert-success > h3.alert-title { + color: #408c41; +} +main .alert.alert-success > h3.alert-title:before { + content: "\e625"; +} +main .alert.alert-warning, +main .alert.warning { + border-color: #fceedb; + background-color: #fef9f3; +} +main .alert.alert-warning > h3.alert-title, +main .alert.warning > h3.alert-title { + color: #F0AD4E; +} +main .alert.alert-warning > h3.alert-title:before, +main .alert.warning > h3.alert-title:before { + content: "\e6a4"; +} +main .alert.alert-danger { + border-color: #f4cecd; + background-color: #fdf7f7; +} +main .alert.alert-danger > h3.alert-title { + color: #c9302c; +} +main .alert.alert-danger > h3.alert-title:before { + content: "\e6a4"; +} +main .alert.alert-exercise { + border-color: #deddde; + background-color: #f7f7f7; + color: #393639; +} +main .alert.alert-exercise > h3.alert-title { + color: #938E94; +} +main .alert.alert-exercise > h3.alert-title:before { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); + top: 28px; + content: "\e709"; +} +@media (min-width: 1200px) { + main .alert.doc-content { + max-width: 55%; + } +} +hr.divider { + border-color: rgba(249, 249, 249, 0.4); + position: absolute; + width: 900%; + margin-left: -13px; +} +img.img-responsive { + box-shadow: 0 3px 15px #F2F2F2; + border: 1px solid #F2F2F2; + margin-bottom: 25px; +} +img.img-responsive:not(:first-child) { + margin-top: 25px; +} +.figure h4 { + margin: 0.5em 0 1.5em; + padding-left: 1em; + font-size: 1em; + font-style: italic; +} +.pq-patch em { + display: block; + border-radius: 4px 4px 0 0; + background: #F2F2F2; + padding-left: 10px; + font-size: 0.9em; + font-weight: 600; +} +.pq-patch em + .pq-section .highlight { + border-radius: 0 0 4px 4px; +} +span.menuselection { font-weight: 500; } -h4, -.h4, -h5, -h6, -.h5, -.h6 { - margin-top: 21px; - margin-bottom: 7px; +.list-group-item { + border: none; + background: transparent; } -ul:not(:empty), -ol:not(:empty) { - margin-bottom: 10.5px; +blockquote { + font-family: Georgia, "Times New Roman", Times, serif; + font-weight: 600; + font-style: italic; } -ul ul:not(:empty), -ol ul:not(:empty), -ul ol:not(:empty), -ol ol:not(:empty) { - margin-bottom: 7px; +blockquote footer { + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + background: transparent; + text-align: left; + color: #373e42; + font-weight: normal; + font-style: normal; +} +blockquote footer cite { + font-style: italic; +} +@media (min-width: 992px) { + blockquote { + border-left: 3px solid rgba(33, 183, 153, 0.5); + } +} +.code, +code { + font-size: 0.8em; + font-weight: 600; + color: #0a352d; + background-color: #def9f4; +} +.btn { + border-radius: 0; +} +.table, +table { + font-size: 0.9em; +} +.code-attribute, +.code-class, +.code-classmethod, +.code-data, +.code-function, +.code-method, +.code-staticmethod { + padding-left: 20px; + margin-bottom: 2em; +} +.code-attribute > h6, +.code-class > h6, +.code-classmethod > h6, +.code-data > h6, +.code-function > h6, +.code-method > h6, +.code-staticmethod > h6 { + margin-left: -20px; + margin-bottom: 0.3em; +} +.code-attribute > h6 .viewcode-link, +.code-class > h6 .viewcode-link, +.code-classmethod > h6 .viewcode-link, +.code-data > h6 .viewcode-link, +.code-function > h6 .viewcode-link, +.code-method > h6 .viewcode-link, +.code-staticmethod > h6 .viewcode-link { + display: none; + float: right; +} +.code-attribute > h6:hover .viewcode-link, +.code-class > h6:hover .viewcode-link, +.code-classmethod > h6:hover .viewcode-link, +.code-data > h6:hover .viewcode-link, +.code-function > h6:hover .viewcode-link, +.code-method > h6:hover .viewcode-link, +.code-staticmethod > h6:hover .viewcode-link { + display: inline; +} +.code-attribute p, +.code-class p, +.code-classmethod p, +.code-data p, +.code-function p, +.code-method p, +.code-staticmethod p { + margin-bottom: 0.5em; +} +article.doc-body.index-category { + min-height: 300px; + min-height: 30vh; +} +article.doc-body.index-category li.toctree-l1 { + padding: 5px 0; +} +article.doc-body .content-switcher { + margin-top: 0; +} +article.doc-body .content-switcher > ul { + font-size: 10px; + padding: 0; + margin: 0; + -webkit-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; +} +article.doc-body .content-switcher > ul > li { + font-weight: 600; + color: #dcddde; + border-bottom: 1px solid transparent; + margin: 0 20px 0 0; + padding-left: 0; + font-size: 1.3em; + cursor: pointer; + display: inline-block; + list-style: none; + -webkit-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; + opacity: 0.6; +} +article.doc-body .content-switcher > ul > li:before { + content: none; +} +article.doc-body .content-switcher > ul > li.active { + border-bottom: 1px solid #21b799; + opacity: 1; +} +article.doc-body .content-switcher:hover > ul > li { + opacity: 1; + filter: alpha(opacity=100); +} +article.doc-body .content-switcher > .tabs > * { + display: none; + max-width: 100%; + overflow-x: auto; +} +article.doc-body .content-switcher > .tabs > .active { + display: block; +} +.highlight { + background: #21272b; + color: #dcddde; + border-radius: 4px; + margin-bottom: 11px; +} +.highlight pre { + margin-bottom: 0; +} +pre { + font-size: 0.8em; + color: #dcddde; + background: #21272b; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-weight: 600; + position: relative; + border: none; + max-width: 100%; + overflow: auto; + margin: 0 0 11px; } body, header { position: relative; } -#wrap > .container.index { - background-color: #F9F9F9; - width: 100%; - position: relative; -} -#wrap > .container.index > .index { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 768px) { - #wrap > .container.index > .index { - width: 750px; - } -} -@media (min-width: 992px) { - #wrap > .container.index > .index { - width: 970px; - } -} -@media (min-width: 1200px) { - #wrap > .container.index > .index { - width: 1170px; - } -} -#wrap > .container.index > .index > .navbar-header, -#wrap > .container.index > .index > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; -} -@media (min-width: 768px) { - #wrap > .container.index > .index > .navbar-header, - #wrap > .container.index > .index > .navbar-collapse { - margin-right: 0; - margin-left: 0; - } -} -#main_title { - margin: 10px; -} -@media (min-width: 992px) { - #main_title { - margin: 0 0 9px 0; - } -} .container .container { max-width: 100%; padding: 0; margin: 0; } -article.doc-content *[class^="col-"] { +.img-responsive, +.thumbnail > img, +.thumbnail a > img, +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: inline-block; +} +.img-responsive.center-block { + display: block; +} +article.doc-content *[class*="col-"] { padding: 0; } -main aside, -main article.doc-body, -main .doc-content, -main .doc-aside { +#wrap { + z-index: 1; + position: relative; + background: #F9F9F9; + padding-bottom: 40px; +} +main { + position: relative; + display: block; +} +main .o_content { + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); +} +@media (min-width: 768px) { + main .o_content { + margin: -40px auto 0; + border-radius: 2px; + } +} +main article.doc-body { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + float: left; + width: 100%; + padding: 15px; +} +@media (min-width: 768px) { + main article.doc-body { + padding: 15px 30px; + } +} +@media (min-width: 992px) { + main article.doc-body { + max-width: 700px; + } +} +@media (min-width: 1200px) { + main article.doc-body { + margin-left: 7%; + margin-top: 20px; + } +} +main article.doc-body > * { + max-width: 100%; +} +main.o_aside_removed, +main.o_slim_page { + max-width: 700px; +} +@media (min-width: 1200px) { + main.o_aside_removed, + main.o_slim_page { + max-width: 760px; + } +} +@media (min-width: 992px) { + main.o_aside_removed article.doc-body, + main.o_slim_page article.doc-body { + padding-left: 30px; + } +} +main.has_code_col { + max-width: 700px; +} +@media (min-width: 1200px) { + main.has_code_col { + max-width: 1170px; + } +} +main.has_code_col .doc-aside, +main.has_code_col .doc-content { position: relative; min-height: 1px; padding-right: 15px; @@ -9633,91 +10052,23 @@ main .doc-aside { float: left; width: 100%; } -main .doc-content, -main .doc-aside { - position: relative; -} -main aside { - width: 25%; - max-width: 300px; - position: static; - padding: 0; - display: block; - float: left; -} -@media (max-width: 992px) { - main aside { - display: none; - } -} -main article.doc-body { - background: #fff; - border-left: 1px solid #F2F2F2; - padding: 15px 30px; -} -@media (min-width: 992px) { - main article.doc-body { - width: 75%; - } - main article.doc-body.doc-toc { - width: 100%; - } -} -main article.doc-body > * { - max-width: 100%; -} -main.has_code_col { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 768px) { - main.has_code_col { - width: 750px; - } -} -@media (min-width: 992px) { - main.has_code_col { - width: 970px; - } -} -@media (min-width: 1200px) { - main.has_code_col { - width: 1170px; - } -} -main.has_code_col > .navbar-header, -main.has_code_col > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; -} -@media (min-width: 768px) { - main.has_code_col > .navbar-header, - main.has_code_col > .navbar-collapse { - margin-right: 0; - margin-left: 0; +@media (max-width: 1199px) { + main.has_code_col .doc-aside, + main.has_code_col .doc-content { + padding: 0; } } main.has_code_col aside { display: none; } -main.has_code_col article.doc-body { - width: 100%; -} -main.has_code_col article.doc-body > * { - max-width: 100%; -} main.has_code_col article.doc-body > section { - position: relative; - display: block; - float: left; - width: 100%; + max-width: 100%; } @media (min-width: 1200px) { main.has_code_col article.doc-body { width: 100%; - padding-right: 0; + max-width: none; + margin: 0; } main.has_code_col article.doc-body:before { content: ""; @@ -9725,100 +10076,143 @@ main.has_code_col article.doc-body > section { -webkit-box-shadow: inset 40px 0 40px -18px rgba(22, 24, 29, 0.3); box-shadow: inset 40px 0 40px -18px rgba(22, 24, 29, 0.3); position: absolute; - width: 43%; - height: 100%; top: 0; + left: auto; + bottom: auto; right: 0; + width: 50%; + height: 100%; + } + main.has_code_col article.doc-body > section { + position: relative; + display: block; + float: left; + width: 100%; } main.has_code_col article.doc-body > section > * { - width: 54.633333%; - max-width: 600px; + width: 48%; float: left; clear: left; } - main.has_code_col article.doc-body > section > h1, main.has_code_col article.doc-body > section > h2, main.has_code_col article.doc-body > section > h3, main.has_code_col article.doc-body > section > h4, main.has_code_col article.doc-body > section > h5, - main.has_code_col article.doc-body > section > h6 { - width: 100%; + main.has_code_col article.doc-body > section > h6, + main.has_code_col article.doc-body > section > h1 { + width: 48%; float: none; clear: none; } main.has_code_col article.doc-body > section .doc-aside { - width: 41%; + width: 49%; float: none; clear: none; - margin-right: 15px; - margin-left: 57%; - } - main.has_code_col article.doc-body > section .doc-aside .content-switcher { - margin-top: 0; - } - main.has_code_col article.doc-body > section .doc-aside .content-switcher > ul { - margin-bottom: 0; - } - main.has_code_col article.doc-body > section .doc-aside .content-switcher > ul > li { + margin-left: 51%; color: #dcddde; + font-size: 14px; + line-height: 1.45; } -} -main.index .toctree-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -main.index .toctree-wrapper > .row { - flex: 1 0 100%; -} -@media screen and (min-width: 992px) { - main.index .toctree-wrapper > .row.tutorials, - main.index .toctree-wrapper .row.api { - flex: 0 0 50%; - display: flex; - flex-wrap: wrap; - } - main.index .toctree-wrapper > .row.tutorials > div, - main.index .toctree-wrapper .row.api > div { - flex: 0 0 50%; + main.has_code_col article.doc-body > section .doc-aside pre { + font-size: 12px; } } article.doc-toc .toctree-wrapper > ul > li > span { display: block; font-size: 28px; } -.code-fields { - display: table; +@media screen and (min-width: 992px) { + #wrap.index > .card.top { + padding: 10% 0 2%; + } +} +#wrap.index > main.index { + margin: 10px auto; +} +#wrap.index > main.index .o_content { + box-shadow: none; + background: none; +} +main.index .toc-section h2 { + padding: 0 0 4px; + border-bottom: 1px solid #F2F2F2; + margin: 1.4em 0 0.8em; + font-size: 16px; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + letter-spacing: 0; + font-weight: bold; + color: #888888; +} +main.index .card { + border-radius: 4px; + position: relative; + overflow: hidden; + margin-bottom: 25px; + padding-top: 56%; + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); +} +main.index .card .card-img span { + display: block; + background-size: cover; + background-position: 50%; width: 100%; + height: 100%; } -.code-fields .code-field { - display: table-row; -} -.code-fields .code-field-body { - display: block; - padding-left: 15px; +main.index .card figcaption { + color: #373e42; + box-shadow: inset 0 1px 0 #F2F2F2; + font-weight: bold; + line-height: 1.2; + font-size: 14px; + background-color: white; + padding: 8px 12px 6px; + position: absolute; + top: 0; + left: -1px; + bottom: auto; + right: -1px; } @media screen and (min-width: 992px) { - .code-fields .code-field-body { - display: table-cell; - padding-left: 0; + main.index .toc-single-entry .card figcaption { + font-size: 1.5em; + padding: 20px 15px; } } -.code-fields .code-field-name { - width: auto; - display: block; -} -@media screen and (min-width: 992px) { - .code-fields .code-field-name { - width: 20%; - padding-right: 20px; - display: table-cell; - } -} -.code-fields ul { - margin: .2em 0; +.toctree-wrapper > ul { + list-style: none; padding: 0; } +.toctree-wrapper > ul li { + line-height: 1.4; +} +.toctree-wrapper > ul li.toctree-l1, +.toctree-wrapper > ul li.toctree-l3 { + padding-left: 0; +} +.toctree-wrapper > ul li.toctree-l1:before, +.toctree-wrapper > ul li.toctree-l3:before { + content: none; +} +.toctree-wrapper > ul li.toctree-l1:first-child, +.toctree-wrapper > ul li.toctree-l3:first-child { + margin-top: 0; +} +.toctree-wrapper > ul li.toctree-l1 { + margin: 0 0 15px; +} +.toctree-wrapper > ul li.toctree-l1 > span { + font-size: 21px; +} +.toctree-wrapper > ul li.toctree-l2 > span { + font-weight: 500; +} +.toctree-wrapper > ul li.toctree-l2 > ul { + margin: 0 0 15px; +} +.toctree-wrapper > ul li.toctree-l2 > ul:empty { + display: none; +} #oe_main_menu_navbar ~ #wrapwrap .o_main_header.o_has_sub_nav.o_scrolled { top: -17px; } @@ -9828,7 +10222,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { height: 50px; z-index: 2; background-color: rgba(255, 255, 255, 0.6); - color: #5a5f68; + color: #2b3134; font-family: "Work Sans", sans-serif; font-size: 12px; -webkit-transition: all 0.2s ease; @@ -9889,7 +10283,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { } .o_main_header > .o_main_header_main a:hover, .o_main_header > .o_main_header_main a:focus { - color: #505d71; + color: #273239; } .o_main_header > .o_main_header_main .o_logo { margin: 15px 0; @@ -10208,7 +10602,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { font-size: 0.7em; font-weight: 500; line-height: 1.5; - color: #666c75; + color: #373e42; margin-bottom: 1.3em; } } @@ -10367,7 +10761,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { .o_main_header > .o_main_header_main .o_header_buttons > .dropdown > .dropdown-menu li a { padding-top: 5px; padding-bottom: 5px; - color: #666c75; + color: #373e42; } .o_main_header > .o_sub_nav { min-height: 40px; @@ -10379,7 +10773,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { height: 38px; line-height: 38px; font-weight: 600; - color: #666c75; + color: #373e42; overflow: hidden; } .o_main_header > .o_sub_nav > .container .navbar-header .o_app_name_logo, @@ -10452,7 +10846,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { padding: 0; font-size: 12px; font-weight: 500; - color: #666c75; + color: #373e42; } .o_main_header > .o_sub_nav > .container .nav > li > a:hover, .o_main_header > .o_sub_nav > .container .nav > li > a:focus { @@ -10526,7 +10920,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { } .o_main_header > .o_main_header_main > .o_header_buttons .dropdown.open { background-color: #FCFCFC; - color: #5a5f68; + color: #2b3134; } .o_main_header > .o_main_header_main > .o_header_buttons .dropdown.open .dropdown-menu { background-color: #FCFCFC; @@ -10538,16 +10932,9 @@ article.doc-toc .toctree-wrapper > ul > li > span { min-width: 100%; padding-bottom: 12.5px; } - .o_main_header > .o_main_header_main > .o_header_buttons .dropdown.open .dropdown-menu.deep_hover:hover { - -webkit-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); - } .o_main_header > .o_main_header_main > .o_header_buttons .dropdown.open .dropdown-menu > li > a { display: block; - color: #5a5f68; + color: #2b3134; float: none; text-transform: none; font-weight: normal; @@ -10556,17 +10943,9 @@ article.doc-toc .toctree-wrapper > ul > li > span { .o_main_header.o_scrolled:not(.o_transparent_blocked), .o_main_header.o_sub_opened { background-color: #FCFCFC; - color: #5a5f68; + color: #2b3134; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -.o_main_header.o_scrolled:not(.o_transparent_blocked).deep_hover:hover, -.o_main_header.o_sub_opened.deep_hover:hover { - -webkit-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} .o_main_header.o_scrolled:not(.o_transparent_blocked) .o_logo, .o_main_header.o_sub_opened .o_logo { background-position: 0 0; @@ -10575,8 +10954,8 @@ article.doc-toc .toctree-wrapper > ul > li > span { .o_main_header.o_sub_opened > .o_main_header_main > .o_primary_nav > li.dropdown > a::before, .o_main_header.o_scrolled:not(.o_transparent_blocked) > .o_main_header_main > .o_primary_nav > li.dropdown > a::after, .o_main_header.o_sub_opened > .o_main_header_main > .o_primary_nav > li.dropdown > a::after { - background-color: #5a5f68; - box-shadow: 0 1px 1px rgba(90, 95, 104, 0.1); + background-color: #2b3134; + box-shadow: 0 1px 1px rgba(43, 49, 52, 0.1); } .o_main_header.o_scrolled .o_sub_nav { background: #FCFCFC; @@ -10599,23 +10978,16 @@ article.doc-toc .toctree-wrapper > ul > li > span { height: auto; min-height: 50px; background-color: #FCFCFC; - color: #5a5f68; + color: #2b3134; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } - .o_main_header.deep_hover:hover { - -webkit-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); - } .o_main_header .o_logo { background-position: 0 0; } .o_main_header > .o_main_header_main > .o_primary_nav > li.dropdown > a::before, .o_main_header > .o_main_header_main > .o_primary_nav > li.dropdown > a::after { - background-color: #5a5f68; - box-shadow: 0 1px 1px rgba(90, 95, 104, 0.1); + background-color: #2b3134; + box-shadow: 0 1px 1px rgba(43, 49, 52, 0.1); } .o_main_header > .o_main_header_main { position: relative; @@ -10873,15 +11245,31 @@ body > footer .o_footer_bottom a:hover { body > footer .o_footer_bottom .social-links .fa { margin-left: 20px; } +aside { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + float: left; + width: 100%; + max-width: 240px; + position: static; + padding: 0; + display: block; + border-right: 1px solid #F2F2F2; +} +@media (max-width: 992px) { + aside { + display: none; + } +} .navbar-aside { position: relative; overflow: hidden; - font-family: "Work Sans", sans-serif; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 0.85em; line-height: 1.5; - font-weight: 500; overflow-y: auto; - height: 100%; } .navbar-aside.affix { z-index: 2; @@ -10904,35 +11292,13 @@ body > footer .o_footer_bottom .social-links .fa { text-transform: uppercase; font-weight: 600; font-size: 16px; - color: #666c75; + color: #373e42; overflow-x: hidden; position: relative; z-index: 1; -webkit-box-shadow: 0 10px 9px -10px #d2d2d2; box-shadow: 0 10px 9px -10px #d2d2d2; } -.navbar-aside .logo_box { - width: 100%; - background: #fdfdfd; - position: relative; - display: block; - padding: 15px 30px 10px; - border-bottom: 1px solid rgba(102, 108, 117, 0.1); - text-align: center; - -webkit-box-shadow: inset 0px 0 40px rgba(114, 122, 142, 0.1); - box-shadow: inset 0px 0 40px rgba(114, 122, 142, 0.1); -} -.navbar-aside .logo_box .logo { - float: left; - width: 90%; - margin: auto auto 10px 5%; - height: 50px; - background-image: url('img/odoo_logo_rgb.png'); - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - text-decoration: none; -} .navbar-aside .gith-container { margin: 0; z-index: 1; @@ -10940,25 +11306,20 @@ body > footer .o_footer_bottom .social-links .fa { overflow-x: hidden; } .navbar-aside .gith-container .gith-link { - font-weight: 600; - color: #666c75; + color: #373e42; text-decoration: none; display: inline-block; position: relative; margin: 10px 0; - -webkit-transition: color 0.2s; - -o-transition: color 0.2s; - transition: color 0.2s; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } .navbar-aside .gith-container .gith-link:hover { color: #21313a; text-decoration: none; } .navbar-aside .gith-container .gith-link:before { - width: 20px; - height: 20px; - opacity: 0.5; - filter: alpha(opacity=50); + width: 1em; + height: 1em; content: ''; position: relative; background-image: url('img/github-square_32.png'); @@ -10969,14 +11330,6 @@ body > footer .o_footer_bottom .social-links .fa { -ms-transform: translate(0, -1px); -o-transform: translate(0, -1px); transform: translate(0, -1px); - -webkit-transition: opacity 0.2s; - -o-transition: opacity 0.2s; - transition: opacity 0.2s; -} -.navbar-aside .gith-container .gith-link:hover:before, -.navbar-aside .gith-container .gith-link:focus:before { - opacity: 1; - filter: alpha(opacity=100); } .navbar-aside ul { padding: 0; @@ -10998,61 +11351,98 @@ body > footer .o_footer_bottom .social-links .fa { .navbar-aside ul li > a { display: block; padding: 5px 15px; - color: #666c75; + color: #373e42; + line-height: 1.2; } -.navbar-aside ul li > a:hover, -.navbar-aside ul li > a:focus { +.navbar-aside ul li > a:focus, +.navbar-aside ul li > a:hover { color: #21313a; } +.navbar-aside ul li.parent > a:after { + content: '\e7c1'; + font-family: 'Material-Design-Icons'; + opacity: 0.8; + margin-top: -6px; + position: absolute; + top: 50%; + left: auto; + bottom: auto; + right: 10px; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); + -webkit-transition: transform 0.2s; + -o-transition: transform 0.2s; + transition: transform 0.2s; +} +.navbar-aside ul li.parent.active > a:after { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); +} .navbar-aside ul ul { max-height: 0; - background-color: #F2F2F2; - padding-left: 15px; + background-color: rgba(220, 221, 222, 0.2); + padding: 0px; overflow: hidden; + margin-left: 0; + box-shadow: inset 0 3px 5px -2px #dcddde; -webkit-transition: max-height 0.3s cubic-bezier(0.55, 0, 0.1, 1); -o-transition: max-height 0.3s cubic-bezier(0.55, 0, 0.1, 1); transition: max-height 0.3s cubic-bezier(0.55, 0, 0.1, 1); } +.navbar-aside ul ul > li:not(:last-child) { + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); +} +.navbar-aside ul ul > li:not(:last-child).active > ul > li:not(:first-child) { + border-top: 1px solid #F2F2F2; +} .navbar-aside li.active, -.navbar-aside li.active:hover, -.navbar-aside li.active:focus { +.navbar-aside li.active:focus, +.navbar-aside li.active:hover { border-color: #F2F2F2; background: transparent; } .navbar-aside li.active > a, -.navbar-aside li.active:hover > a, -.navbar-aside li.active:focus > a { +.navbar-aside li.active:focus > a, +.navbar-aside li.active:hover > a { + font-weight: bold; color: #21313a; } .navbar-aside li.active > ul { max-height: 1000px; } .navbar-aside > ul > li { - border-bottom: 1px solid #F2F2F2; background: white; + border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .navbar-aside > ul > li > a { padding: 10px 15px; + border-left: 3px solid transparent; } -.navbar-aside > ul > li:hover > a, -.navbar-aside > ul > li:focus > a { - box-shadow: inset 5px 0 0 -3px #dcddde; +.navbar-aside > ul > li:focus > a, +.navbar-aside > ul > li:hover > a { + border-left: 3px solid #dcddde; background-color: transparent; } .navbar-aside > ul > li.active > a, -.navbar-aside > ul > li.active:hover > a, -.navbar-aside > ul > li.active:focus > a { - box-shadow: inset 5px 0 0 -3px #21b799; +.navbar-aside > ul > li.active:focus > a, +.navbar-aside > ul > li.active:hover > a { + border-left: 3px solid #21b799; } -.navbar-aside > ul > li.parent > a:after { - content: '\e7c1'; - font-family: 'Material-Design-Icons'; - opacity: 0.5; - position: absolute; - top: auto; - left: auto; - bottom: auto; - right: 10px; +.navbar-aside > ul > li.active.parent + li { + box-shadow: 0 -3px 5px -4px rgba(40, 47, 51, 0.4); +} +.navbar-aside > ul > li > ul > li > a { + padding-left: 20px; +} +.navbar-aside > ul > li > ul > li > ul > li > a { + padding-left: 30px; +} +.navbar-aside > ul > li > ul > li > ul > li > ul > li > a { + padding-left: 40px; } .floating_action_container { position: fixed; @@ -11092,11 +11482,13 @@ body > footer .o_footer_bottom .social-links .fa { } #floating_action_menu { position: absolute; + top: auto; + left: auto; + bottom: 0; + right: 0; z-index: 1; overflow: hidden; - right: 0; width: 380px; - bottom: 0; padding: 0; display: block; border-radius: 2px; @@ -11110,7 +11502,6 @@ body > footer .o_footer_bottom .social-links .fa { #floating_action_menu .content { margin: 0; opacity: 0; - filter: alpha(opacity=0); } #floating_action_menu .content li { border: none; @@ -11130,12 +11521,14 @@ body > footer .o_footer_bottom .social-links .fa { } #floating_action_menu .bubble { position: absolute; + top: auto; + left: auto; + bottom: 28px; + right: 28px; width: 1px; height: 1px; background: #21b799; content: ''; - bottom: 28px; - right: 28px; color: #fff; border-radius: 50%; -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1); @@ -11144,12 +11537,14 @@ body > footer .o_footer_bottom .social-links .fa { } #floating_action_menu:before { position: absolute; + top: auto; + left: auto; + bottom: 28px; + right: 28px; width: 1px; height: 1px; background: #21b799; content: ''; - bottom: 28px; - right: 28px; color: #fff; border-radius: 50%; -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1); @@ -11164,13 +11559,12 @@ body > footer .o_footer_bottom .social-links .fa { -o-transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1); transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1); } -#floating_action_menu.active .bubble, -#floating_action_menu.active:before { +#floating_action_menu.active:before, +#floating_action_menu.active .bubble { width: 1000px; height: 2000px; border-radius: 50%; opacity: 0; - filter: alpha(opacity=0); margin-right: -500px; margin-bottom: -500px; display: block; @@ -11191,19 +11585,35 @@ body > footer .o_footer_bottom .social-links .fa { -o-transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1); } +#mask { + opacity: 0; + filter: alpha(opacity=0); + position: fixed; + z-index: 700; + top: 0; + left: 0; + width: 100%; + height: 0; + background-color: rgba(0, 0, 0, 0.2); + -webkit-transition: opacity 0.3s; + -o-transition: opacity 0.3s; + transition: opacity 0.3s; +} +#mask.active { + opacity: 1; + filter: alpha(opacity=100); + display: block; + width: 100%; + height: 100%; + -webkit-transition: opacity 0.3s; + -o-transition: opacity 0.3s; + transition: opacity 0.3s; +} @media print { body header, body footer { display: none; } - body .fadeInUp, - body .fadeIn { - opacity: 1 !important; - filter: alpha(opacity=100) !important; - -webkit-animation: none; - -o-animation: none; - animation: none; - } body #main_navbar { position: relative; display: block; @@ -11302,7 +11712,6 @@ body > footer .o_footer_bottom .social-links .fa { line-height: 40px; letter-spacing: -0.1px; word-spacing: -1px; - font-size: 0.9em; display: inline-block; height: 100%; max-width: 80px; @@ -11404,7 +11813,7 @@ body > footer .o_footer_bottom .social-links .fa { z-index: 1; position: relative; background-color: #dcddde; - color: #5a5f68; + color: #2b3134; } @media screen and (min-width: 768px) { .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open { @@ -11412,7 +11821,7 @@ body > footer .o_footer_bottom .social-links .fa { } } .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-toggle { - color: #5a5f68; + color: #2b3134; } .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-toggle:hover { color: #21313a; @@ -11427,17 +11836,10 @@ body > footer .o_footer_bottom .social-links .fa { padding-bottom: 12.5px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu.deep_hover:hover { - -webkit-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu > li > a { font-size: 12px; display: block; - color: #5a5f68; + color: #2b3134; float: none; text-transform: none; font-weight: 500; @@ -11517,7 +11919,7 @@ body > footer .o_footer_bottom .social-links .fa { z-index: 1; position: relative; background-color: #dcddde; - color: #5a5f68; + color: #2b3134; } @media screen and (min-width: 768px) { .o_main_header > .o_sub_nav li.dropdown.open { @@ -11525,7 +11927,7 @@ body > footer .o_footer_bottom .social-links .fa { } } .o_main_header > .o_sub_nav li.dropdown.open .dropdown-toggle { - color: #5a5f68; + color: #2b3134; } .o_main_header > .o_sub_nav li.dropdown.open .dropdown-toggle:hover { color: #21313a; @@ -11540,17 +11942,10 @@ body > footer .o_footer_bottom .social-links .fa { padding-bottom: 12.5px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -.o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu.deep_hover:hover { - -webkit-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} .o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu > li > a { font-size: 12px; display: block; - color: #5a5f68; + color: #2b3134; float: none; text-transform: none; font-weight: 500; @@ -11611,11 +12006,11 @@ body > footer .o_footer_bottom .social-links .fa { margin: 0 0 0 -8px; } .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav .nav > li > a { - color: #666c75; + color: #373e42; } .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav .nav > li > a:hover, .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav .nav > li > a:focus { - color: #5a5f68; + color: #2b3134; } } .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav_actions { @@ -11652,792 +12047,6 @@ body > footer .o_footer_bottom .social-links .fa { .o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions > li:last-child { margin-right: 0; } -#wrap { - z-index: 1; - position: relative; - background: #F9F9F9; - padding-bottom: 40px; -} -main { - z-index: 0; - position: relative; - margin: -10px auto 0; - display: block; - border-radius: 2px; - background-color: #fff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); -} -main.deep_hover:hover { - -webkit-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} -@media screen and (min-width: 768px) { - main { - margin: -40px auto 0px; - } -} -main.index { - -webkit-box-shadow: none; - box-shadow: none; - padding-top: 50px; - background: transparent; -} -main.index .row > h2 { - margin-bottom: 1em; - margin-top: 1.5em; -} -main.index .card { - border-radius: 2px; - position: relative; - overflow: hidden; - margin-bottom: 20px; - min-height: 200px; - background-color: #fff; - will-change: transform; - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); - -webkit-transform: scale3d(0, 0, 0) translate3d(50px, 0, 0); - -moz-transform: scale3d(0, 0, 0) translate3d(50px, 0, 0); - -ms-transform: scale3d(0, 0, 0) translate3d(50px, 0, 0); - -o-transform: scale3d(0, 0, 0) translate3d(50px, 0, 0); - transform: scale3d(0, 0, 0) translate3d(50px, 0, 0); - -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - -o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); -} -main.index .card.deep_hover:hover { - -webkit-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: box-shadow 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s; - box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09); -} -main.index .card a, -main.index .card a:hover { - color: #666c75; - text-decoration: none; - border-radius: 2px 2px 0 0; -} -main.index .card .card-img { - -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - -o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - overflow: hidden; -} -main.index .card .card-img span { - position: relative; - display: block; - background-size: cover; - background-position: 50%; - will-change: transform; - width: 100%; - height: 100%; - -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -webkit-transform-origin: 50%; - -moz-transform-origin: 50%; - -ms-transform-origin: 50%; - transform-origin: 50%; - opacity: 1; - filter: alpha(opacity=100); - -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - -o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); -} -main.index .card figcaption { - opacity: 1; - filter: alpha(opacity=100); - display: block; - font-weight: 400; - font-family: "Work Sans", sans-serif; - color: #21313a; - margin: 0; - background-color: white; - font-size: 1.2em; - width: 100%; - padding: 8px 12px; - position: absolute; - top: 0; - left: auto; - bottom: auto; - right: auto; - -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - -o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); -} -main.index .card:hover .card-img span { - -webkit-transform: scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0); - -moz-transform: scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0); - -ms-transform: scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0); - -o-transform: scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0); - transform: scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0); -} -main.index.animating .card { - -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -} -.card-img { - background: #75526b; - background: -webkit-linear-gradient(99deg, #875A7B 10%, #62495B 90%); - background: -moz-linear-gradient(99deg, #875A7B 10%, #62495B 90%); - background: -ms-linear-gradient(99deg, #875A7B 10%, #62495B 90%); - background: -o-linear-gradient(99deg, #875A7B 10%, #62495B 90%); - background: linear-gradient(99deg, #875A7B 10%, #62495B 90%); - position: absolute; - top: 0; - left: auto; - bottom: auto; - right: 0; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - width: 100%; - height: 100%; - display: block; - background-size: cover; - background-position: 50%; -} -.card.top { - padding: 10% 0 8%; - position: relative; - overflow: hidden; - margin: 0; - background: #75526b; - background: -webkit-linear-gradient(99deg, #875A7B 10%, #62495B 90%); - background: -moz-linear-gradient(99deg, #875A7B 10%, #62495B 90%); - background: -ms-linear-gradient(99deg, #875A7B 10%, #62495B 90%); - background: -o-linear-gradient(99deg, #875A7B 10%, #62495B 90%); - background: linear-gradient(99deg, #875A7B 10%, #62495B 90%); - -webkit-animation: fadeIn 1s; - -o-animation: fadeIn 1s; - animation: fadeIn 1s; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transform-origin: 50% 0px 0px; - -moz-transform-origin: 50% 0px 0px; - -ms-transform-origin: 50% 0px 0px; - transform-origin: 50% 0px 0px; -} -@media screen and (min-width: 768px) and (max-width: 991px) { - .card.top { - padding-top: 12%; - } -} -#wrap.index .card.top { - padding: 0 0 4%; -} -@media screen and (min-width: 768px) { - #wrap.index .card.top { - padding-top: 12%; - } -} -@media screen and (min-width: 1200px) { - #wrap.index .card.top { - padding-top: 8%; - } -} -.card.top.stacked { - background: transparent; - -webkit-transition: background 1s; - -o-transition: background 1s; - transition: background 1s; -} -.card.top:before { - content: ""; - display: block; - background-image: url("img/banner_bg.png"); - background-size: cover; - background-position: 50%; - position: absolute; - top: 0; - left: auto; - bottom: auto; - right: 0; - width: 100%; - height: 100%; -} -.card.top:hover { - -webkit-box-shadow: none; - box-shadow: none; -} -.card.top .card-img { - background-image: url("img/banner_bg.png"); -} -@media screen and (min-width: 768px) and (max-width: 991px) { - .card.top { - padding: 12% 0 8%; - } - #wrap.index .card.top { - padding: 12% 0 4%; - } -} -.card.top .container { - position: relative; -} -.card.top .container h1 { - font-family: "Work Sans", sans-serif; - line-height: 1.1; - color: #21313a; - margin-top: 21px; - margin-bottom: 10.5px; - font-size: 32px; - text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; - margin-top: 31.5px; - font-weight: 300; - color: white; -} -.card.top .container h1 small, -.card.top .container h1 .small { - font-weight: normal; - line-height: 1; - color: #21313a; -} -.card.top .container h1 small, -.card.top .container h1 .small { - font-size: 65%; -} -@media (min-width: 1200px) { - .has_code_col .doc-aside .card.top .container h1 { - color: white; - } -} -.card.top .container h1 b, -.card.top .container h1 strong, -.card.top .container h1 a { - font-weight: 400; -} -@media screen and (min-width: 768px) { - .card.top .container h1 { - font-family: "Work Sans", sans-serif; - line-height: 1.1; - color: #21313a; - margin-top: 21px; - margin-bottom: 10.5px; - font-size: 39px; - text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; - margin-top: 31.5px; - font-weight: 300; - color: white; - } - .card.top .container h1 small, - .card.top .container h1 .small { - font-weight: normal; - line-height: 1; - color: #21313a; - } - .card.top .container h1 small, - .card.top .container h1 .small { - font-size: 65%; - } - .card.top .container h1 b, - .card.top .container h1 strong, - .card.top .container h1 a { - font-weight: 400; - } -} -@media screen and (min-width: 768px) and (min-width: 1200px) { - .has_code_col .doc-aside .card.top .container h1 { - color: white; - } -} -.card.top.has_banner { - background: #282F33; -} -.card.top.has_banner:before { - display: none; -} -.card.top.has_banner .card-img { - opacity: 0.35; -} -.toctree-wrapper > ul { - list-style: none; - padding: 0; -} -.toctree-wrapper > ul > li.toctree-l1 > span { - font-family: "Work Sans", sans-serif; - line-height: 1.1; - color: #21313a; - margin-top: 21px; - margin-bottom: 10.5px; - font-size: 32px; - text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; - margin-top: 31.5px; - font-weight: 300; -} -.toctree-wrapper > ul > li.toctree-l1 > span small, -.toctree-wrapper > ul > li.toctree-l1 > span .small { - font-weight: normal; - line-height: 1; - color: #21313a; -} -.toctree-wrapper > ul > li.toctree-l1 > span small, -.toctree-wrapper > ul > li.toctree-l1 > span .small { - font-size: 65%; -} -@media (min-width: 1200px) { - .has_code_col .doc-aside .toctree-wrapper > ul > li.toctree-l1 > span { - color: white; - } -} -.toctree-wrapper > ul > li.toctree-l1 > span b, -.toctree-wrapper > ul > li.toctree-l1 > span strong, -.toctree-wrapper > ul > li.toctree-l1 > span a { - font-weight: 400; -} -hr.divider { - border-color: rgba(249, 249, 249, 0.4); - position: absolute; - width: 900%; - margin-left: -13px; -} -main .alert { - padding: 15px; - border-radius: 0; - border-width: 0 0 0 3px; - position: relative; - max-width: 95%; - display: inline-block; - border-color: #b8d9e2; - background-color: #eef6f8; - color: #173038; -} -@media (min-width: 768px) { - main .alert { - padding-left: 5.5em; - } -} -main .alert > p, -main .alert > ul { - margin: .5em 0; -} -main .alert > .alert-title, -main .alert > h3 { - color: #4B9EB6; -} -main .alert > .alert-title:before, -main .alert > h3:before { - content: "\e639"; -} -main .alert > h3, -main .alert > .alert-title { - font-size: 1.642857143em; - line-height: 1em; - margin: 0 0 10px 0; - font-size: 14px; - font-weight: 700; - font-family: "Work Sans", sans-serif; -} -main .alert > h3:before, -main .alert > .alert-title:before { - font-family: 'Material-Design-Icons'; - content: "\e639"; - display: inline-block; - text-rendering: geometricPrecision; - font-size: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - top: 50%; - left: 6px; - bottom: auto; - right: auto; - -webkit-transform: translate(0, -0.15em); - -ms-transform: translate(0, -0.15em); - -o-transform: translate(0, -0.15em); - transform: translate(0, -0.15em); - font-size: 4em; -} -@media (max-width: 768px) { - main .alert > h3:before, - main .alert > .alert-title:before { - display: none; - } -} -main .alert.alert-success { - border-color: #b9dfb9; - background-color: #eef7ee; - color: #183518; -} -main .alert.alert-success > .alert-title, -main .alert.alert-success > h3 { - color: #50AF51; -} -main .alert.alert-success > .alert-title:before, -main .alert.alert-success > h3:before { - content: "\e625"; -} -main .alert.alert-info, -main .alert.tip { - border-color: #b8d9e2; - background-color: #eef6f8; - color: #173038; -} -main .alert.alert-info > .alert-title, -main .alert.tip > .alert-title, -main .alert.alert-info > h3, -main .alert.tip > h3 { - color: #4B9EB6; -} -main .alert.alert-info > .alert-title:before, -main .alert.tip > .alert-title:before, -main .alert.alert-info > h3:before, -main .alert.tip > h3:before { - content: "\e639"; -} -main .alert.alert-warning, -main .alert.warning { - border-color: #fceedb; - background-color: #fef9f3; - color: #81500b; -} -main .alert.alert-warning > .alert-title, -main .alert.warning > .alert-title, -main .alert.alert-warning > h3, -main .alert.warning > h3 { - color: #F0AD4E; -} -main .alert.alert-warning > .alert-title:before, -main .alert.warning > .alert-title:before, -main .alert.alert-warning > h3:before, -main .alert.warning > h3:before { - content: "\e6a4"; -} -main .alert.alert-danger { - border-color: #f4cecd; - background-color: #fdf7f7; - color: #611715; -} -main .alert.alert-danger > .alert-title, -main .alert.alert-danger > h3 { - color: #D9534F; -} -main .alert.alert-danger > .alert-title:before, -main .alert.alert-danger > h3:before { - content: "\e6a4"; -} -main .alert.alert-exercise { - border-color: #deddde; - background-color: #f7f7f7; - color: #393639; -} -main .alert.alert-exercise > .alert-title, -main .alert.alert-exercise > h3 { - color: #938E94; -} -main .alert.alert-exercise > .alert-title:before, -main .alert.alert-exercise > h3:before { - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - -o-transform: translate(0, 0); - transform: translate(0, 0); - top: 28px; - content: "\e709"; -} -main .alert.alert-go_to { - border-color: #b8d9e2; - background-color: #eef6f8; - border-width: 2px; - margin: 2em auto; -} -main .alert.alert-go_to a { - color: #25505c; -} -main .alert.alert-go_to > .alert-title, -main .alert.alert-go_to > h3 { - color: #4B9EB6; -} -main .alert.alert-go_to > .alert-title:before, -main .alert.alert-go_to > h3:before { - content: "\e70d"; -} -@media (min-width: 1200px) { - main .alert.doc-content { - max-width: 55%; - } -} -img.img-responsive { - margin-bottom: 10.5px; -} -.figure h4 { - margin: 0.5em 0 1.5em; - padding-left: 1em; - font-size: 1em; - font-style: italic; -} -.pq-patch { - background: #dcddde; -} -.pq-patch em { - padding-left: 10px; -} -span.menuselection { - font-weight: 600; -} -.list-group-item { - border: none; - background: transparent; -} -dt { - margin: .5em 0 .3em; - font-weight: normal; -} -blockquote { - font-family: Georgia, "Times New Roman", Times, serif; - font-weight: 600; - font-style: italic; -} -blockquote footer { - font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; - background: transparent; - text-align: left; - color: #666c75; - font-weight: normal; - font-style: normal; -} -blockquote footer cite { - font-style: italic; -} -@media (min-width: 992px) { - blockquote { - border-left: 3px solid rgba(33, 183, 153, 0.5); - } -} -code, -.code { - font-size: 0.8em; - font-weight: 600; - color: #0a352d; - background-color: #def9f4; -} -.btn { - border-radius: 0; -} -dd { - margin-left: 40px; -} -.code-fields { - font-size: .9em; - border: 2px solid #dcddde; -} -.code-fields .code-field-name { - font-weight: 600; - color: #21313a; -} -.code-fields .code-field-name:after { - content: ":"; -} -@media screen and (min-width: 992px) { - .code-fields .code-field-name { - font-size: .9em; - text-align: right; - } -} -.code-fields ul { - list-style: none; -} -.code-fields ul strong { - color: #21313a; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; -} -.code-fields ul em { - color: #21313a; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-weight: 600; - font-size: .9em; -} -table, -.table { - font-size: 0.9em; -} -.code-namespace, -.code-module, -.code-class, -.code-staticmethod, -.code-classmethod, -.code-method, -.code-function, -.code-attribute, -.code-data { - padding-left: 20px; - margin-bottom: 2em; -} -.code-namespace > h6, -.code-module > h6, -.code-class > h6, -.code-staticmethod > h6, -.code-classmethod > h6, -.code-method > h6, -.code-function > h6, -.code-attribute > h6, -.code-data > h6 { - margin-left: -20px; - margin-bottom: 0.3em; -} -.code-namespace > h6 .viewcode-link, -.code-module > h6 .viewcode-link, -.code-class > h6 .viewcode-link, -.code-staticmethod > h6 .viewcode-link, -.code-classmethod > h6 .viewcode-link, -.code-method > h6 .viewcode-link, -.code-function > h6 .viewcode-link, -.code-attribute > h6 .viewcode-link, -.code-data > h6 .viewcode-link { - display: none; - float: right; -} -.code-namespace > h6:hover .viewcode-link, -.code-module > h6:hover .viewcode-link, -.code-class > h6:hover .viewcode-link, -.code-staticmethod > h6:hover .viewcode-link, -.code-classmethod > h6:hover .viewcode-link, -.code-method > h6:hover .viewcode-link, -.code-function > h6:hover .viewcode-link, -.code-attribute > h6:hover .viewcode-link, -.code-data > h6:hover .viewcode-link { - display: inline; -} -.code-namespace p, -.code-module p, -.code-class p, -.code-staticmethod p, -.code-classmethod p, -.code-method p, -.code-function p, -.code-attribute p, -.code-data p { - margin-bottom: .5em; -} -@media (min-width: 1200px) { - main.has_code_col .doc-aside { - color: #dcddde; - } - main.has_code_col .doc-aside pre { - font-size: 12px; - } -} -article.doc-body { - background: #fff; -} -article.doc-body section.doc-content:first-of-type > p:first-child { - margin-bottom: 21px; - font-size: 17px; - font-weight: 300; - line-height: 1.4; -} -@media (min-width: 768px) { - article.doc-body section.doc-content:first-of-type > p:first-child { - font-size: 22.5px; - } -} -article.doc-body.index-category { - min-height: 300px; - min-height: 30vh; -} -article.doc-body.index-category li.toctree-l1 { - padding: 5px 0; -} -.content-switcher { - margin-top: 1.5em; -} -.content-switcher > ul { - font-size: 10px; - padding: 0; - margin: 0 0 10px; - -webkit-transition: all 0.2s ease; - -o-transition: all 0.2s ease; - transition: all 0.2s ease; -} -.content-switcher > ul > li { - color: text-color; - font-weight: 600; - border-bottom: 1px solid transparent; - margin: 5px; - font-size: 1.3em; - cursor: pointer; - display: inline-block; - list-style: none; - -webkit-transition: all 0.2s; - -o-transition: all 0.2s; - transition: all 0.2s; - opacity: 0.6; - filter: alpha(opacity=60); -} -.content-switcher > ul > li.active { - border-bottom: 1px solid #21b799; - opacity: 1; - filter: alpha(opacity=100); -} -.content-switcher:hover > ul > li { - opacity: 1; - filter: alpha(opacity=100); -} -.content-switcher > .tabs > * { - display: none; - max-width: 100%; - overflow-x: auto; -} -.content-switcher > .tabs > .active { - display: block; -} -.highlight { - background: #21272b; - color: #dcddde; - border-radius: 4px; - margin-bottom: 10.5px; -} -.highlight pre { - margin-bottom: 0; -} -pre { - font-size: 0.8em; - color: #dcddde; - background: #21272b; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-weight: 600; - position: relative; - border: none; - max-width: 100%; - overflow: auto; - margin: 0; - margin-bottom: 10.5px; -} -#mask { - opacity: 0; - filter: alpha(opacity=0); - position: fixed; - z-index: 700; - top: 0; - left: 0; - width: 100%; - height: 0; - background-color: rgba(0, 0, 0, 0.2); - -webkit-transition: opacity 0.3s; - -o-transition: opacity 0.3s; - transition: opacity 0.3s; -} -#mask.active { - opacity: 1; - filter: alpha(opacity=100); - display: block; - width: 100%; - height: 100%; - -webkit-transition: opacity 0.3s; - -o-transition: opacity 0.3s; - transition: opacity 0.3s; -} #thinking-modular > .clearfix.themes, #thinking-modular > .dl-horizontal dd.themes, #thinking-modular > .container.themes, @@ -12454,8 +12063,6 @@ pre { #thinking-modular > .panel-body.themes, #thinking-modular > .modal-header.themes, #thinking-modular > .modal-footer.themes, -#thinking-modular > #wrap > .container.index > .index.themes, -#thinking-modular > main.has_code_col.themes, #thinking-modular > .o_main_header > .o_main_header_main.themes { margin-bottom: 3em; } diff --git a/doc/_extensions/odoo_ext/static/style.less b/doc/_extensions/odoo_ext/static/style.less index 719ee1441f5..471e777d8ca 100644 --- a/doc/_extensions/odoo_ext/static/style.less +++ b/doc/_extensions/odoo_ext/static/style.less @@ -6,9 +6,10 @@ @import "variables"; @import "mixins"; -@import "animations"; @import "typography"; +@import "components"; @import "layout"; +@import "index"; @import "header"; @import "footer"; @import "aside"; @@ -71,7 +72,6 @@ line-height: @w-sub-nav-height; letter-spacing: -0.1px; word-spacing: -1px; - font-size: 0.9em; display: inline-block; height: 100%; max-width: 80px; @@ -252,570 +252,6 @@ } } -#wrap { - z-index: 1; - position: relative; - background: @gray-lightest; - padding-bottom: 40px; -} - -main { - z-index: 0; - position: relative; - margin: -10px auto 0; - display: block; - border-radius: 2px; - background-color: @doc_paper; - .deep-1; - - @media screen and(min-width: @screen-sm) { - margin: -40px auto 0px; - } -} - -main.index { - .box-shadow(none); - padding-top: 50px; - background:transparent; - - .row > h2 { // section title - margin-bottom: 1em; - margin-top: 1.5em; - } - - .card { - border-radius: 2px; - position: relative; - overflow: hidden; - margin-bottom: @card_margin-bottom; - min-height: @card_min-height; - background-color: @doc_paper; - will-change: transform; - .deep-2; - .transform(scale3d(0, 0, 0) translate3d(50px, 0, 0)); - .transition( all .5s @o-ease ); - - a, a:hover { - color: @text-color; - text-decoration: none; - border-radius: 2px 2px 0 0; - } - .card-img{ - .transition(all .5s @o-ease); - overflow:hidden; - span { - position: relative; - display: block; - background-size: cover; - background-position: 50%; - will-change: transform; - .square(100%); - .transform(scale3d(1, 1, 1) translate3d(0, 0, 0)); - .transform-origin(50%); - .opacity(1); - .transition(all .5s @o-ease); - } - } - figcaption { - .opacity(1); - display: block; - font-weight: @fw_regular; - font-family: @headings-font-family; - color: @headings-color; - margin: 0; - background-color: white; - font-size: 1.2em; - width: 100%; - padding: 8px 12px; - .o-position-absolute(0); - .transition(all .5s @o-ease ); - } - - &:hover .card-img span{ - .transform(scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0)); - } - } - - &.animating .card { - .transform(scale3d(1, 1, 1) translate3d(0, 0, 0)); - } -} - -.card-img { - .o-gradient(); - .o-position-absolute(0, 0); - .translate3d(0;0;0); - .square(100%); - display: block; - background-size: cover; - background-position: 50%; -} - -.card.top { - padding: 10% 0 8%; - position: relative; - overflow: hidden; - margin: 0; - .o-gradient(); - .animation(fadeIn 1s); - .box-shadow(none); - .transform-origin(50% 0px 0px); - - @media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) { - padding-top: 12%; - } - - #wrap.index & { - padding: 0 0 4%; - - @media screen and (min-width: @screen-sm-min) { - padding-top: 12%; - } - - @media screen and (min-width: @screen-lg-min) { - padding-top: 8%; - } - } - - &.stacked{ - background:transparent; - .transition(background 1s); - } - - &:before { - content:""; - display: block; - background-image: url("img/banner_bg.png"); - background-size: cover; - background-position: 50%; - .o-position-absolute(0, 0); - .square(100%); - } - - &:hover { - .box-shadow(none); - } - - .card-img { - background-image: url("img/banner_bg.png"); - } - - @media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) { - padding: 12% 0 8%; - - #wrap.index & { - padding: 12% 0 4%; - } - } - - .container { - position: relative; - h1 { - .h2; - color: white; - - @media screen and (min-width: @screen-sm-min) { - .h1; - color: white; - } - } - } -} - -.card.top.has_banner { - background: @footer-bg-color; - - &:before { - display: none; - } - - .card-img { - opacity: 0.35; - } -} - -// the first level of an application toctree should look more like sections - -.toctree-wrapper > ul { - list-style: none; - padding: 0; - - > li.toctree-l1 > span { - font-family: @headings-font-family; - // copy h2 content :/ - .h2() - } -} - -// Elements -// ----------------------------------------------- - -hr.divider { - border-color: fadeout(@gray-lightest, 60%); - position: absolute; - width: 900%; - margin-left: -13px; -} - -main .alert { - padding: 15px; - border-radius: 0; - border-width: 0 0 0 3px; - position: relative; - max-width: 95%; - display: inline-block;; - @media (min-width: @screen-sm-min){ - padding-left: 5.5em; - } - > p, > ul { - margin: .5em 0; - } - .alert-info; // 'INFO' is the default style - - > h3, > .alert-title { - font-size: 1.642857143em; - line-height: 1em; - margin: 0 0 10px 0; - font-size: 14px; - font-weight: @fw_bold; - font-family: @headings-font-family; - - &:before { - .mdi-icon("\e639"); - .o-position-absolute(50%, auto, auto, 6px); - .translate(0, -0.15em); - font-size: 4em; - - @media (max-width: @screen-sm-min){ - display:none; - } - } - } - &.alert-success { - border-color: lighten(@brand-success, 30%); - background-color: lighten(@brand-success, 45%); - color: darken(@brand-success, 35%); - - > .alert-title, > h3 { - color: @brand-success - } - > .alert-title:before, > h3:before { - content: "\e625"; - } - } - &.alert-info, &.tip { - border-color: lighten(@brand-info, 30%); - background-color: lighten(@brand-info, 45%); - color: darken(@brand-info, 35%); - - > .alert-title, > h3 { - color: @brand-info - } - > .alert-title:before, > h3:before { - content: "\e639"; - } - } - &.alert-warning, &.warning { - border-color: lighten(@brand-warning, 30%); - background-color: lighten(@brand-warning, 35%); - color: darken(@brand-warning, 35%); - - > .alert-title, > h3 { - color: @brand-warning - } - > .alert-title:before, > h3:before { - content: "\e6a4"; - } - } - &.alert-danger { - border-color: lighten(@brand-danger, 30%); - background-color: lighten(@brand-danger, 40%); - color: darken(@brand-danger, 35%); - - > .alert-title, > h3 { - color: @brand-danger - } - > .alert-title:before, > h3:before { - content: "\e6a4"; - } - } - &.alert-exercise { - border-color: lighten(@doc_exercise, 30%); - background-color: lighten(@doc_exercise, 40%); - color: darken(@doc_exercise, 35%); - - > .alert-title, > h3 { - color: @doc_exercise; - } - > .alert-title:before, > h3:before { - .translate(0;0); - top: 28px; - content: "\e709"; - } - } - - &.alert-go_to { - border-color: lighten(@brand-info, 30%); - background-color: lighten(@brand-info, 45%); - border-width: 2px; - margin: 2em auto; - a{ - color: darken(@brand-info, 25%); - } - > .alert-title, > h3 { - color: @brand-info - } - > .alert-title:before, > h3:before { - content: "\e70d"; - } - } - - &.doc-content{ - @media (min-width: @screen-lg-min) { - max-width: 55%; - } - } -} - -img.img-responsive { - margin-bottom: (@line-height-computed / 2); -} - -.figure { - h4 { - margin: 0.5em 0 1.5em; - padding-left: 1em; - font-size: 1em; - font-style: italic; - } -} - -.pq-patch{ - background: @gray-light; - em {padding-left: 10px;} -} - -span.menuselection{ - font-weight: @fw_semibold; -} - -.list-group-item { - border: none; - background:transparent; -} - -dt { margin: .5em 0 .3em; font-weight: normal; } - -blockquote { - font-family: @font-family-serif; - font-weight: @fw_semibold; - font-style: italic; - - footer { - font-family: @font-family-base; - background: transparent; - text-align: left; - color: @text-color; - font-weight: normal; - font-style: normal; - - cite { - font-style: italic; - } - } - @media (min-width:@screen-md-min) { - border-left: 3px solid fade(@brand-primary, 50%); - } -} -code, .code { - font-size: 0.8em; - font-weight: @fw_semibold; - color: darken(@brand-primary, 30%); - background-color: lighten(@brand-primary, 50%); -} -.btn { - border-radius: 0; -} -dd { - margin-left: 40px; -} - -.code-fields { - font-size: .9em; - border: 2px solid @gray-light; - - .code-field { - } - - .code-field-body { - } - - .code-field-name { - font-weight: @fw_semibold; - color: @headings-color; - - &:after{ - content:":"; - } - @media screen and (min-width: @screen-md-min){ - font-size: .9em; - text-align: right; - } - } - - ul { - list-style: none; - - strong { - color: @headings-color; - font-family:@font-family-monospace; - } - em { - color: @headings-color; - font-family:@font-family-monospace; - font-weight: @fw_semibold; - font-size: .9em; - } - } -} - -table, .table { - font-size: 0.9em; -} - -.code-namespace, .code-module, .code-class, -.code-staticmethod, .code-classmethod, .code-method, .code-function, -.code-attribute, .code-data { - // indents *all* content - padding-left: 20px; - margin-bottom: 2em; - // except for item title which gets dedented back - > h6 { - margin-left: -20px; - margin-bottom: 0.3em; - .viewcode-link { - display: none; - float: right - } - &:hover .viewcode-link { - display: inline; - } - } - p { - margin-bottom: .5em; - } -} - -main.has_code_col{ - @media (min-width: @screen-lg-min) { - .doc-aside { - color: @gray-light; - - pre{ - font-size: 12px; - } - } - } -} - -article.doc-body { - background: @doc_paper; - section.doc-content:first-of-type{ - > p:first-child{ - .lead; - } - } - - &.index-category { - min-height: 300px; - min-height: 30vh; - - li.toctree-l1 { - padding: 5px 0; - } - } -} - -.content-switcher { - margin-top: 1.5em; - > ul { - font-size: 10px; - padding: 0; - margin: 0 0 10px; - .transition(all .2s ease); - - > li { - color: text-color; - font-weight: @fw_semibold; - border-bottom: 1px solid transparent; - margin: 5px; - font-size: 1.3em; - cursor: pointer; - display: inline-block; - list-style: none; - .transition(all .2s); - .opacity(0.6); - - &.active { - border-bottom: 1px solid @brand-primary; - .opacity(1); - } - } - } - &:hover > ul > li { - .opacity(1); - } - > .tabs > * { - display: none; - max-width: 100%; - overflow-x: auto; - } - > .tabs > .active { - display: block; - } -} - -.highlight { - background: @doc_code-bg; - color: @gray-light; - border-radius: @border-radius-base; - margin-bottom: (@line-height-computed / 2); - pre { - margin-bottom: 0; - } -} - -pre { - font-size: 0.8em; - color: @gray-light; - background: @doc_code-bg; - font-family: @font-family-monospace; - font-weight: @fw_semibold; - position: relative; - border: none; - max-width: 100%; - overflow: auto; - margin: 0; - margin-bottom: (@line-height-computed / 2); -} - -#mask { - .opacity(0); - position: fixed; - z-index: @zIndex--mask; - top: 0; - left: 0; - .size(100%; 0); - background-color: fade(black, 20%); - .transition(opacity .3s); - - &.active { - .opacity(1); - display: block; - .square(100%); - .transition(opacity .3s); - } -} // Special Pages @@ -823,6 +259,4 @@ pre { // Theme tutorial #thinking-modular > .clearfix.themes { margin-bottom: 3em; -} - - +} \ No newline at end of file diff --git a/doc/_extensions/odoo_ext/static/typography.less b/doc/_extensions/odoo_ext/static/typography.less index 32fb821f8f0..6c535739f6d 100644 --- a/doc/_extensions/odoo_ext/static/typography.less +++ b/doc/_extensions/odoo_ext/static/typography.less @@ -1,21 +1,20 @@ // ============================================================================= // Typography // ============================================================================= +@margin-base: 5px; // Font rendering // ---------------------------------------- body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } // Headings // ---------------------------------------- -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { +h1, h2, h3, h4, h5, h6 { text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; @media (min-width: @screen-lg-min) { .has_code_col .doc-aside &{ @@ -24,35 +23,152 @@ h1, h2, h3, h4, h5, h6, } } -h1, h2, .h1, .h2 { - margin-top: @line-height-computed * 1.5; - font-weight: @fw_light; - b, strong, a { - font-weight: @fw_regular; +.headings-margin-small () { + > h2, > h3, > h4, > h5, > h6 { + margin-top: @margin-base*2; } } - -h3, .h3, h4, .h4, h5, h6, .h5, .h6 { - font-weight: @fw_regular; - b, strong, a { - font-weight: @fw_medium; - } -} -h4, .h4, h5, h6, .h5, .h6 { - margin-top: @line-height-computed; - margin-bottom: (@line-height-computed / 3); +.headings-bordered () { + padding-bottom: @margin-base; + border-bottom: 2px solid #f4f6f7; } -// Lists -// ---------------------------------------- +article.doc-body { -ul, ol { - &:not(:empty) { - margin-bottom: (@line-height-computed / 2); - } - ul, ol { - &:not(:empty) { - margin-bottom: (@line-height-computed / 3); + // Vertical rhythm + > section { + padding-bottom: @margin-base*2; + + > :last-child { + margin-bottom: 0; + } + + > h2, > h3, > h4, > h5, > h6 { + margin-bottom: @margin-base; + margin-top: @margin-base*8; + + &:last-child { + margin-bottom: -@margin-base*6; + .headings-bordered(); + } + } + + > h2 { + .headings-bordered(); + } + + > h5, > h6 { + font-weight: 500; + } + + &:first-of-type { + .headings-margin-small(); + + &:empty, &.hidden { + display: none; + + + section { + .headings-margin-small(); + } + } } } -} + + // Typography components + > section { + line-height: 26px; + } + + a, a:hover { + text-decoration: underline; + } + + blockquote { + font-size: 15px; + line-height: 26px; + &:not(:first-child) { + margin-top: 17px; + } + } + + dl { + dt code { + font-size: 0.9em; + } + + dd { + margin: 2px 0 @grid-gutter-width/2 @grid-gutter-width/2; + } + } + + ol, ul { + line-height: 26px; + padding: 0; + list-style: none; + counter-reset: a; + + li { + margin: 5px 0; + position: relative; + padding-left: 30px; + + &:before { + content: ""; + display: block; + .o-position-absolute(9px, @left: 10px); + .square(6px); + border-radius: 50%; + background: #939da3; + } + + p { + margin: 0; + } + + h2, h3, h4, h5, h6 { + margin-top: 0; + padding-top: 0; + } + } + } + + ol > li:before { + counter-increment: a; + content: counter(a); + color: #fff; + font-size: 13px; + font-weight: bold; + line-height: 1; + text-align: center; + padding: 4px 0; + .square(20px); + border-radius: 10px; + .o-position-absolute(3px, @left: 0); + } + + + .o_has_permalink_marker { + transition: all, 0.3s; + padding-left: 0; + + i { + cursor: pointer; + visibility: hidden; + margin-left: 0.1em; + font-size: 0.8em; + padding: 0.2em; + .rotate(-45deg); + } + + &:hover { + i { + visibility: visible; + } + } + + &.o_marked { + padding-left: 10px; + background-color: #fff7d1; + } + } +} \ No newline at end of file diff --git a/doc/_extensions/odoo_ext/static/variables.less b/doc/_extensions/odoo_ext/static/variables.less index 27399411813..d337f796865 100644 --- a/doc/_extensions/odoo_ext/static/variables.less +++ b/doc/_extensions/odoo_ext/static/variables.less @@ -78,11 +78,8 @@ // Typography // =============================================== -//== Fonts -@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin,latin-ext); - //== Font sizes/weigths -@font-size-base : 15px; +@font-size-base : 16px; @fw_light : 300; @fw_regular : 400; @@ -91,19 +88,20 @@ @fw_bold : 700; //== Paragraphs -@font-family-base : -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; -@text-color : saturate(@gray-dark, 5%); +@font-family-base : -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +@text-color : #373e42; //== Headings @headings-color : saturate(@gray-darker, 15%); -@headings-font-family : "Work Sans", sans-serif; -@headings-font-weight : @fw_light; +@headings-font-family : @font-family-base; +@headings-font-weight : @fw_regular; @headings-small-color : @headings-color; -@display1-size : 6rem; -@display2-size : 5.5rem; -@display3-size : 4.5rem; -@display4-size : 3.5rem; +@font-size-h2: 30px; +@font-size-h3: 24px; +@font-size-h4: 19px; +@font-size-h5: 17px; +@font-size-h6: 17px; //== Global textual link color. @link-color : @o-violet-dark; @@ -160,8 +158,7 @@ // Cards // -------------------------------------------------- -@card_min-height: 200px; -@card_margin-bottom: 20px; +@card_margin-bottom: 25px; diff --git a/doc/_extensions/odoo_ext/translator.py b/doc/_extensions/odoo_ext/translator.py index 9b038fd906b..da4e8731628 100644 --- a/doc/_extensions/odoo_ext/translator.py +++ b/doc/_extensions/odoo_ext/translator.py @@ -312,9 +312,9 @@ class BootstrapTranslator(nodes.NodeVisitor, object): def visit_title(self, node): parent = node.parent - closing = u'

' + closing = u'' if isinstance(parent, nodes.Admonition): - self.body.append(self.starttag(node, 'p', CLASS='alert-title')) + self.body.append(self.starttag(node, 'h3', CLASS='alert-title')) elif isinstance(node.parent, nodes.document): self.body.append(self.starttag(node, 'h1')) closing = u'' @@ -633,9 +633,9 @@ class BootstrapTranslator(nodes.NodeVisitor, object): classes = env.metadata[ref].get('types', 'tutorials') classes += ' toc-single-entry' if not toc else ' toc-section' self.body.append(self.starttag(node, 'div', CLASS="row " + classes)) - self.body.append(u'

') + self.body.append(u'

') self.body.append(title if title else util.nodes.clean_astext(env.titles[ref])) - self.body.append(u'

') + self.body.append(u'

') entries = [(title, ref)] if not toc else ((e[0], e[1]) for e in toc[0]['entries']) for subtitle, subref in entries: diff --git a/doc/_static/banners/actions.jpg b/doc/_static/banners/actions.jpg index 9a5df9d4382..ed64a7850f0 100644 Binary files a/doc/_static/banners/actions.jpg and b/doc/_static/banners/actions.jpg differ diff --git a/doc/_static/banners/actions.small.jpg b/doc/_static/banners/actions.small.jpg index 385cdf5f65e..5a727bb87d3 100644 Binary files a/doc/_static/banners/actions.small.jpg and b/doc/_static/banners/actions.small.jpg differ diff --git a/doc/_static/banners/build_a_module.jpg b/doc/_static/banners/build_a_module.jpg index 902d4d1def7..7e16ab9e10d 100644 Binary files a/doc/_static/banners/build_a_module.jpg and b/doc/_static/banners/build_a_module.jpg differ diff --git a/doc/_static/banners/build_a_module.small.jpg b/doc/_static/banners/build_a_module.small.jpg index d6d94e7fada..01eacfb8ecf 100644 Binary files a/doc/_static/banners/build_a_module.small.jpg and b/doc/_static/banners/build_a_module.small.jpg differ diff --git a/doc/_static/banners/build_a_theme.jpg b/doc/_static/banners/build_a_theme.jpg index 12f2abc8602..41f822d7f3d 100644 Binary files a/doc/_static/banners/build_a_theme.jpg and b/doc/_static/banners/build_a_theme.jpg differ diff --git a/doc/_static/banners/build_a_theme.small.jpg b/doc/_static/banners/build_a_theme.small.jpg index 01f2250e5d2..cbd2802f3f9 100644 Binary files a/doc/_static/banners/build_a_theme.small.jpg and b/doc/_static/banners/build_a_theme.small.jpg differ diff --git a/doc/_static/banners/build_a_website.jpg b/doc/_static/banners/build_a_website.jpg index 0afe2289d17..f15124ce340 100644 Binary files a/doc/_static/banners/build_a_website.jpg and b/doc/_static/banners/build_a_website.jpg differ diff --git a/doc/_static/banners/build_a_website.small.jpg b/doc/_static/banners/build_a_website.small.jpg index 87726d33749..37f02efeb69 100644 Binary files a/doc/_static/banners/build_a_website.small.jpg and b/doc/_static/banners/build_a_website.small.jpg differ diff --git a/doc/_static/banners/build_interface_ext.jpg b/doc/_static/banners/build_interface_ext.jpg index 711f6c9245c..0e0b55cca71 100644 Binary files a/doc/_static/banners/build_interface_ext.jpg and b/doc/_static/banners/build_interface_ext.jpg differ diff --git a/doc/_static/banners/build_interface_ext.small.jpg b/doc/_static/banners/build_interface_ext.small.jpg index f43137751d7..bd23fa278b1 100644 Binary files a/doc/_static/banners/build_interface_ext.small.jpg and b/doc/_static/banners/build_interface_ext.small.jpg differ diff --git a/doc/_static/banners/cdn.jpg b/doc/_static/banners/cdn.jpg new file mode 100644 index 00000000000..67efa8f0e53 Binary files /dev/null and b/doc/_static/banners/cdn.jpg differ diff --git a/doc/_static/banners/cdn.small.jpg b/doc/_static/banners/cdn.small.jpg new file mode 100644 index 00000000000..9d5a177b4b4 Binary files /dev/null and b/doc/_static/banners/cdn.small.jpg differ diff --git a/doc/_static/banners/cmdline.jpg b/doc/_static/banners/cmdline.jpg index 5770ef77ad2..ce7e30da4ab 100644 Binary files a/doc/_static/banners/cmdline.jpg and b/doc/_static/banners/cmdline.jpg differ diff --git a/doc/_static/banners/cmdline.small.jpg b/doc/_static/banners/cmdline.small.jpg index 3585911412f..cbd7e569025 100644 Binary files a/doc/_static/banners/cmdline.small.jpg and b/doc/_static/banners/cmdline.small.jpg differ diff --git a/doc/_static/banners/data_files.jpg b/doc/_static/banners/data_files.jpg index a114f279aae..aa82b595b0a 100644 Binary files a/doc/_static/banners/data_files.jpg and b/doc/_static/banners/data_files.jpg differ diff --git a/doc/_static/banners/data_files.small.jpg b/doc/_static/banners/data_files.small.jpg index 0c2b373614a..c961891e062 100644 Binary files a/doc/_static/banners/data_files.small.jpg and b/doc/_static/banners/data_files.small.jpg differ diff --git a/doc/_static/banners/deploying_odoo.jpg b/doc/_static/banners/deploying_odoo.jpg index 8cede6d4bc7..98bebb8121b 100644 Binary files a/doc/_static/banners/deploying_odoo.jpg and b/doc/_static/banners/deploying_odoo.jpg differ diff --git a/doc/_static/banners/deploying_odoo.small.jpg b/doc/_static/banners/deploying_odoo.small.jpg index 410e057398e..eed9fe7247b 100644 Binary files a/doc/_static/banners/deploying_odoo.small.jpg and b/doc/_static/banners/deploying_odoo.small.jpg differ diff --git a/doc/_static/banners/enterprise.jpg b/doc/_static/banners/enterprise.jpg new file mode 100644 index 00000000000..7247e783060 Binary files /dev/null and b/doc/_static/banners/enterprise.jpg differ diff --git a/doc/_static/banners/enterprise.small.jpg b/doc/_static/banners/enterprise.small.jpg new file mode 100644 index 00000000000..fa0d3122658 Binary files /dev/null and b/doc/_static/banners/enterprise.small.jpg differ diff --git a/doc/_static/banners/iap.jpg b/doc/_static/banners/iap.jpg new file mode 100644 index 00000000000..46102046566 Binary files /dev/null and b/doc/_static/banners/iap.jpg differ diff --git a/doc/_static/banners/iap.small.jpg b/doc/_static/banners/iap.small.jpg new file mode 100644 index 00000000000..6d17bda14c0 Binary files /dev/null and b/doc/_static/banners/iap.small.jpg differ diff --git a/doc/_static/banners/index.jpg b/doc/_static/banners/index.jpg index bc71cddaf03..2e57d937a83 100644 Binary files a/doc/_static/banners/index.jpg and b/doc/_static/banners/index.jpg differ diff --git a/doc/_static/banners/installing_odoo.jpg b/doc/_static/banners/installing_odoo.jpg index 7c83ff8c0fb..e94ca61ca80 100644 Binary files a/doc/_static/banners/installing_odoo.jpg and b/doc/_static/banners/installing_odoo.jpg differ diff --git a/doc/_static/banners/installing_odoo.small.jpg b/doc/_static/banners/installing_odoo.small.jpg index 64afa3c316c..f02b4fca219 100644 Binary files a/doc/_static/banners/installing_odoo.small.jpg and b/doc/_static/banners/installing_odoo.small.jpg differ diff --git a/doc/_static/banners/javascript.jpg b/doc/_static/banners/javascript.jpg index b3eb7d45739..9f71a98f202 100644 Binary files a/doc/_static/banners/javascript.jpg and b/doc/_static/banners/javascript.jpg differ diff --git a/doc/_static/banners/javascript.small.jpg b/doc/_static/banners/javascript.small.jpg index 1b2f12d204b..284b26ab257 100644 Binary files a/doc/_static/banners/javascript.small.jpg and b/doc/_static/banners/javascript.small.jpg differ diff --git a/doc/_static/banners/m_1.small.jpg b/doc/_static/banners/m_1.small.jpg index 345f2987424..09c6f69e1e9 100644 Binary files a/doc/_static/banners/m_1.small.jpg and b/doc/_static/banners/m_1.small.jpg differ diff --git a/doc/_static/banners/m_2.small.jpg b/doc/_static/banners/m_2.small.jpg index c63f1000b41..4cfc678a20d 100644 Binary files a/doc/_static/banners/m_2.small.jpg and b/doc/_static/banners/m_2.small.jpg differ diff --git a/doc/_static/banners/m_accounting.small.jpg b/doc/_static/banners/m_accounting.small.jpg index dea2c58ba05..41ae9b2fb6d 100644 Binary files a/doc/_static/banners/m_accounting.small.jpg and b/doc/_static/banners/m_accounting.small.jpg differ diff --git a/doc/_static/banners/mixins.jpg b/doc/_static/banners/mixins.jpg index 24854d70bd2..0be9d04a9ce 100644 Binary files a/doc/_static/banners/mixins.jpg and b/doc/_static/banners/mixins.jpg differ diff --git a/doc/_static/banners/mixins.small.jpg b/doc/_static/banners/mixins.small.jpg index 0abe571399e..204115648ee 100644 Binary files a/doc/_static/banners/mixins.small.jpg and b/doc/_static/banners/mixins.small.jpg differ diff --git a/doc/_static/banners/mobile.jpg b/doc/_static/banners/mobile.jpg index 56d29b6c529..7f5365c3cea 100644 Binary files a/doc/_static/banners/mobile.jpg and b/doc/_static/banners/mobile.jpg differ diff --git a/doc/_static/banners/module.jpg b/doc/_static/banners/module.jpg index a4aa822f7d0..f422179b97b 100644 Binary files a/doc/_static/banners/module.jpg and b/doc/_static/banners/module.jpg differ diff --git a/doc/_static/banners/module.small.jpg b/doc/_static/banners/module.small.jpg index 3dcf31fdba5..2299f0eb0e3 100644 Binary files a/doc/_static/banners/module.small.jpg and b/doc/_static/banners/module.small.jpg differ diff --git a/doc/_static/banners/odoo_guideline.jpg b/doc/_static/banners/odoo_guideline.jpg index c9731196442..eb16f7ef503 100644 Binary files a/doc/_static/banners/odoo_guideline.jpg and b/doc/_static/banners/odoo_guideline.jpg differ diff --git a/doc/_static/banners/odoo_guideline.small.jpg b/doc/_static/banners/odoo_guideline.small.jpg index ecfd79e590d..2e6ad27c325 100644 Binary files a/doc/_static/banners/odoo_guideline.small.jpg and b/doc/_static/banners/odoo_guideline.small.jpg differ diff --git a/doc/_static/banners/orm_api.jpg b/doc/_static/banners/orm_api.jpg index 6dbd5fc5079..fd7ca9a97a4 100644 Binary files a/doc/_static/banners/orm_api.jpg and b/doc/_static/banners/orm_api.jpg differ diff --git a/doc/_static/banners/orm_api.small.jpg b/doc/_static/banners/orm_api.small.jpg index a3409911bf1..43f8b4bb97d 100644 Binary files a/doc/_static/banners/orm_api.small.jpg and b/doc/_static/banners/orm_api.small.jpg differ diff --git a/doc/_static/banners/qweb.jpg b/doc/_static/banners/qweb.jpg index 0a7915f9d9f..c60c9be6967 100644 Binary files a/doc/_static/banners/qweb.jpg and b/doc/_static/banners/qweb.jpg differ diff --git a/doc/_static/banners/qweb.small.jpg b/doc/_static/banners/qweb.small.jpg index 5a8b33cf2bb..23108875d08 100644 Binary files a/doc/_static/banners/qweb.small.jpg and b/doc/_static/banners/qweb.small.jpg differ diff --git a/doc/_static/banners/reports.jpg b/doc/_static/banners/reports.jpg index 15d52eb80a9..ddb64abc539 100644 Binary files a/doc/_static/banners/reports.jpg and b/doc/_static/banners/reports.jpg differ diff --git a/doc/_static/banners/reports.small.jpg b/doc/_static/banners/reports.small.jpg index ad8cc66dd08..b4ab37122b6 100644 Binary files a/doc/_static/banners/reports.small.jpg and b/doc/_static/banners/reports.small.jpg differ diff --git a/doc/_static/banners/security.jpg b/doc/_static/banners/security.jpg index 9d8229a63a9..77ce9ef4da0 100644 Binary files a/doc/_static/banners/security.jpg and b/doc/_static/banners/security.jpg differ diff --git a/doc/_static/banners/security.small.jpg b/doc/_static/banners/security.small.jpg index 72cf65864a0..9b03c81d024 100644 Binary files a/doc/_static/banners/security.small.jpg and b/doc/_static/banners/security.small.jpg differ diff --git a/doc/_static/banners/testing_modules.jpg b/doc/_static/banners/testing_modules.jpg index ccbef42488d..11637ab46e1 100644 Binary files a/doc/_static/banners/testing_modules.jpg and b/doc/_static/banners/testing_modules.jpg differ diff --git a/doc/_static/banners/testing_modules.small.jpg b/doc/_static/banners/testing_modules.small.jpg index 69afa2e28f0..e65a1483668 100644 Binary files a/doc/_static/banners/testing_modules.small.jpg and b/doc/_static/banners/testing_modules.small.jpg differ diff --git a/doc/_static/banners/translate.jpg b/doc/_static/banners/translate.jpg index 876622f90b4..0da70f5f575 100644 Binary files a/doc/_static/banners/translate.jpg and b/doc/_static/banners/translate.jpg differ diff --git a/doc/_static/banners/translate.small.jpg b/doc/_static/banners/translate.small.jpg index 62f027fb600..93873d1292d 100644 Binary files a/doc/_static/banners/translate.small.jpg and b/doc/_static/banners/translate.small.jpg differ diff --git a/doc/_static/banners/upgrade_api.jpg b/doc/_static/banners/upgrade_api.jpg index f176831f840..58ca5dc495a 100644 Binary files a/doc/_static/banners/upgrade_api.jpg and b/doc/_static/banners/upgrade_api.jpg differ diff --git a/doc/_static/banners/views.jpg b/doc/_static/banners/views.jpg index 5d95a4c7e94..456a7c42d08 100644 Binary files a/doc/_static/banners/views.jpg and b/doc/_static/banners/views.jpg differ diff --git a/doc/_static/banners/views.small.jpg b/doc/_static/banners/views.small.jpg index 6c59d7bbe39..57a9a86c2ed 100644 Binary files a/doc/_static/banners/views.small.jpg and b/doc/_static/banners/views.small.jpg differ diff --git a/doc/_static/banners/web_controllers.jpg b/doc/_static/banners/web_controllers.jpg index ad68ce335b9..7bd944c7d65 100644 Binary files a/doc/_static/banners/web_controllers.jpg and b/doc/_static/banners/web_controllers.jpg differ diff --git a/doc/_static/banners/web_controllers.small.jpg b/doc/_static/banners/web_controllers.small.jpg index e9d36acee2a..428ced27d5b 100644 Binary files a/doc/_static/banners/web_controllers.small.jpg and b/doc/_static/banners/web_controllers.small.jpg differ diff --git a/doc/_static/banners/web_service_api.jpg b/doc/_static/banners/web_service_api.jpg index 791b37cd6bd..579b55fbf9e 100644 Binary files a/doc/_static/banners/web_service_api.jpg and b/doc/_static/banners/web_service_api.jpg differ diff --git a/doc/_static/banners/web_service_api.small.jpg b/doc/_static/banners/web_service_api.small.jpg index 4acb9f03520..949718e9185 100644 Binary files a/doc/_static/banners/web_service_api.small.jpg and b/doc/_static/banners/web_service_api.small.jpg differ diff --git a/doc/howtos/themes.rst b/doc/howtos/themes.rst index 18dba100f3b..30583cfd758 100644 --- a/doc/howtos/themes.rst +++ b/doc/howtos/themes.rst @@ -37,56 +37,60 @@ From common CMS to Odoo This is usually the first question from a web designer used to working with Wordpress or Joomla and coming to Odoo for the first time. -.. container:: col-sm-4 +.. container:: row - .. image:: theme_tutorial_assets/img/cms.jpg + .. container:: col-sm-4 -.. container:: col-sm-7 + .. image:: theme_tutorial_assets/img/cms.jpg - Indeed, when using common CMSs, you have to code several files (like header.php, page.php, post.php, etc.) in order to create a basic structure for your website. With those systems, this base structure acts as a design foundation that you have to update over time to ensure compatibility within your CMS. So, even after you have spent hours coding the files, you have not even started on the design yet. + .. container:: col-sm-7 - This **does not** apply to creating Odoo themes. + Indeed, when using common CMSs, you have to code several files (like header.php, page.php, post.php, etc.) in order to create a basic structure for your website. With those systems, this base structure acts as a design foundation that you have to update over time to ensure compatibility within your CMS. So, even after you have spent hours coding the files, you have not even started on the design yet. + + This **does not** apply to creating Odoo themes. .. note:: - :class: col-sm-12 - We think that theme design should be simple (and powerful). When we created our Website Builder, we decided to start from scratch instead of relying on what already existed. This approach gave us the freedom to focus on the things that are really important for designers: styles, content and the logic behind them. No more struggling with technical stuff. Odoo default theme structure ---------------------------- -.. container:: col-sm-8 +.. container:: row - Odoo comes with a default theme structure. - It is a very basic “theme” that provides minimal structure and layout. When you create a new theme, you are actually extending this. - Indeed it’s always enabled in your setup and it acts exactly like the CMS’s base structure we mentioned above, except that you don’t have to create or maintain it. - It will upgrade automatically within your Odoo installation and, since it is included in the Website Builder module, everything is smoothly integrated by default. + .. container:: col-sm-8 - As a result, you are totally free to focus on design while this structure does the job of providing integrations and functionality. + Odoo comes with a default theme structure. + It is a very basic “theme” that provides minimal structure and layout. When you create a new theme, you are actually extending this. + Indeed it’s always enabled in your setup and it acts exactly like the CMS’s base structure we mentioned above, except that you don’t have to create or maintain it. + It will upgrade automatically within your Odoo installation and, since it is included in the Website Builder module, everything is smoothly integrated by default. -.. container:: col-sm-4 + As a result, you are totally free to focus on design while this structure does the job of providing integrations and functionality. - .. image:: theme_tutorial_assets/img/def_structure.jpg + .. container:: col-sm-4 -.. container:: col-md-6 + .. image:: theme_tutorial_assets/img/def_structure.jpg - **Main features:** +.. container:: row - * Basic layouts for pages, blog and eCommerce - * Website Builder integration - * Basic Snippets - * Automatic Less/Sass compiling - * Automatic Js and CSS minification and combination + .. container:: col-md-6 -.. container:: col-md-6 + **Main features:** - **Main technologies:** + * Basic layouts for pages, blog and eCommerce + * Website Builder integration + * Basic Snippets + * Automatic Less/Sass compiling + * Automatic Js and CSS minification and combination - * Twitter Bootstrap - * jQuery - * jQuery UI - * underscore.js + .. container:: col-md-6 + + **Main technologies:** + + * Twitter Bootstrap + * jQuery + * jQuery UI + * underscore.js Thinking "modular" ================== @@ -103,42 +107,42 @@ As a designer, your goal is to style these elements in order to achieve a wonder Let’s take a tour of our “list” elements: -.. row +.. container:: row -.. figure:: theme_tutorial_assets/img/snippet.jpg - :figclass: col-sm-6 + .. figure:: theme_tutorial_assets/img/snippet.jpg + :figclass: col-sm-6 - Snippets (or building-blocks) + Snippets (or building-blocks) - A piece of HTML code. The user will drag&drop, modify and combine them using our built-in Website Builder interface. You can define sets of options and styles for each snippet. The user will choose from them according to their needs. + A piece of HTML code. The user will drag&drop, modify and combine them using our built-in Website Builder interface. You can define sets of options and styles for each snippet. The user will choose from them according to their needs. -.. figure:: theme_tutorial_assets/img/page.jpg - :figclass: col-sm-6 + .. figure:: theme_tutorial_assets/img/page.jpg + :figclass: col-sm-6 - Pages + Pages - These are normal web pages, except that they will be editable by the final user and that you can define an empty area that the user can “fill” by dragging snippets into it. + These are normal web pages, except that they will be editable by the final user and that you can define an empty area that the user can “fill” by dragging snippets into it. -.. /row .. raw:: html
-.. figure:: theme_tutorial_assets/img/styles.jpg - :figclass: col-sm-6 +.. container:: row - Styles + .. figure:: theme_tutorial_assets/img/styles.jpg + :figclass: col-sm-6 - Styles are defined using standard CSS files (or Less/Sass). You can define a style as **default** or **optional**. The default styles are always active in your theme, the optional styles can be enabled or disabled by the user. + Styles -.. figure:: theme_tutorial_assets/img/functionalities.jpg - :figclass: col-sm-6 + Styles are defined using standard CSS files (or Less/Sass). You can define a style as **default** or **optional**. The default styles are always active in your theme, the optional styles can be enabled or disabled by the user. - Functionalities + .. figure:: theme_tutorial_assets/img/functionalities.jpg + :figclass: col-sm-6 - Thanks to Odoo’s modularity, everything can be personalized even more. This means there are endless possibilities for your creativity. Adding functionalities is easy and it’s simple to provide the end user with customizable options. + Functionalities + + Thanks to Odoo’s modularity, everything can be personalized even more. This means there are endless possibilities for your creativity. Adding functionalities is easy and it’s simple to provide the end user with customizable options. -.. /row Odoo's XML files, an overview ----------------------------- @@ -182,17 +186,19 @@ Keep reading the tutorial to learn to how properly extend it with your own code. Update your theme ----------------- -.. container:: col-sm-6 +.. container:: row - Since XML files are only loaded when you install the theme, you will have to force reloading every time you make changes on an xml file. + .. container:: col-sm-6 - To do that, click on the Upgrade button in the module’s page. + Since XML files are only loaded when you install the theme, you will have to force reloading every time you make changes on an xml file. - .. image:: theme_tutorial_assets/img/restart.png + To do that, click on the Upgrade button in the module’s page. -.. container:: col-sm-5 + .. image:: theme_tutorial_assets/img/restart.png - .. image:: theme_tutorial_assets/img/upgrade_module.png + .. container:: col-sm-5 + + .. image:: theme_tutorial_assets/img/upgrade_module.png @@ -659,13 +665,13 @@ Options group properties Options are wrapped in groups. Groups can have properties that define how the included options will interact with the user interface. -``data-selector=" css selector(s) "`` +``data-selector="[css selector(s)]"`` Bind all the options included into the group to a particular element. ``data-js=" custom method name "`` Is used to bind custom Javascript methods. -``data-drop-in=" css selector(s) "`` +``data-drop-in="[css selector(s)]"`` Defines the list of elements where the snippet can be dropped into. -``data-drop-near=" css selector(s) "`` +``data-drop-near="[css selector(s)]"`` Defines the list of elements that the snippet can be dropped beside. Default option methods @@ -673,10 +679,10 @@ Default option methods Options apply standard CSS classes to the snippet. Depending on the method that you choose, the UI will behave differently. -``data-select-class=" class name "`` +``data-select-class="[class name]"`` More data-select-class in the same group defines a list of classes that the user can choose to apply. Only one option can be enabled at a time. -``data-toggle-class=" class name "`` +``data-toggle-class="[class name]"`` The data-toggle-class is used to apply one or more CSS classes from the list to a snippet. Multiple selections can be applied at once. Let's demonstrate how default options work with a basic example. @@ -903,27 +909,29 @@ As content is so important for SEO, you should concentrate on giving publishers Let’s have a look to this example of a classic two column snippet, implemented in two different ways. +.. container:: row -.. container:: col-sm-7 + .. container:: col-sm-7 - .. image:: theme_tutorial_assets/img/seo_snippet_wrong.png + .. image:: theme_tutorial_assets/img/seo_snippet_wrong.png -.. container:: col-sm-5 + .. container:: col-sm-5 - Bad + **Bad** - Using fixed image, the publisher will be forced to limit the text in order to follow the layout. + Using fixed image, the publisher will be forced to limit the text in order to follow the layout. +.. container:: row -.. container:: col-sm-7 + .. container:: col-sm-7 - .. image:: theme_tutorial_assets/img/seo_snippet_good.png + .. image:: theme_tutorial_assets/img/seo_snippet_good.png -.. container:: col-sm-5 + .. container:: col-sm-5 - Good + **Good** - Using background images that fit the column height, the publisher will be free to add the content regardless of the image’s height. + Using background images that fit the column height, the publisher will be free to add the content regardless of the image’s height. diff --git a/doc/setup/cdn.rst b/doc/setup/cdn.rst index 290a9aff400..211df06f7f6 100644 --- a/doc/setup/cdn.rst +++ b/doc/setup/cdn.rst @@ -1,3 +1,5 @@ +:banner: banners/cdn.jpg + ======================================== Deploying with Content Delivery Networks ======================================== diff --git a/doc/setup/enterprise.rst b/doc/setup/enterprise.rst index 76bbd24321e..49ba8af4c84 100644 --- a/doc/setup/enterprise.rst +++ b/doc/setup/enterprise.rst @@ -1,3 +1,4 @@ +:banner: banners/enterprise.jpg .. _setup/enterprise: ============================ diff --git a/doc/webservices/iap.rst b/doc/webservices/iap.rst index 382fd6da428..3cc82b15597 100644 --- a/doc/webservices/iap.rst +++ b/doc/webservices/iap.rst @@ -1,3 +1,4 @@ +:banner: banners/iap.jpg :types: api .. _webservices/iap: