From c201cf2b77cf44e9ad15165ceadde41dfaa20ceb Mon Sep 17 00:00:00 2001 From: stefanorigano Date: Mon, 27 Nov 2017 14:32:22 +0100 Subject: [IMP] doc: revamp documentation design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A comprehensive theme’s revamp, details: === New features === - Show titles permalink markers on hover - “Scrollspy” effect for the sidebar === Fixes === - Solve an issue causing the sidebar to flicker on scroll - Hide the sidebar if less then two links === Design === - Improve typography vertical rhythm and line height - Visually increase separation between sections - Review alerts and
design - Reduce cover’s size - Reduce overall paddings/margins. Closes #21304 --- doc/_extensions/odoo_ext/layout.html | 7 +- doc/_extensions/odoo_ext/static/animations.less | 59 - doc/_extensions/odoo_ext/static/aside.less | 302 +- doc/_extensions/odoo_ext/static/components.less | 515 +++ doc/_extensions/odoo_ext/static/doc.js | 392 ++- doc/_extensions/odoo_ext/static/header.less | 2 +- doc/_extensions/odoo_ext/static/index.less | 114 + doc/_extensions/odoo_ext/static/layout.less | 298 +- doc/_extensions/odoo_ext/static/mixins.less | 123 +- doc/_extensions/odoo_ext/static/print.less | 4 - doc/_extensions/odoo_ext/static/style.css | 4011 ++++++++++------------- doc/_extensions/odoo_ext/static/style.less | 572 +--- doc/_extensions/odoo_ext/static/typography.less | 170 +- doc/_extensions/odoo_ext/static/variables.less | 25 +- doc/_extensions/odoo_ext/translator.py | 8 +- 15 files changed, 3148 insertions(+), 3454 deletions(-) delete mode 100644 doc/_extensions/odoo_ext/static/animations.less create mode 100644 doc/_extensions/odoo_ext/static/components.less create mode 100644 doc/_extensions/odoo_ext/static/index.less (limited to 'doc/_extensions') 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; - - $aside_nav.css('width', aside_width); - $aside_nav.affix({ - target: window, + 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.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"); + 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 (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_action_container").remove(); + + floating_menu_layout(); + set_scroll_to(aside_links); + ripple_animation(aside_links); + $aside_nav.find("li").has("ul").addClass("parent"); + } } - if (has_aside) { $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"); - - $link.on("click", function() { - var val = $(href).offset().top - 60; - $('html, body').animate({ - scrollTop: val - }, 400); + var set_scroll_to = function (el_list) { + el_list.each(function () { + var $link = $(this), + target_id = $link.attr("href"); + + $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; - - $card_top.css('transform', 'translateY(' + base_value + 'px)'); - $card_top_t.css({ - 'transform' : 'translateY( -' + ( base_value - (top/2)) + 'px)', - 'opacity' : 1 - opacity + // -- 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'); + + 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; + }); + }); + }; + + 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))) +')' }); - } - $(".content-switcher").each(function(index, switcher) { + $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%; +// ================================================ +// ================ Layout ======================= +// ================================================ + + +// Bootrstrap adaptations +// ------------------------------------------------------------------ +body, header { + position: relative; +} + +.container .container { + max-width: 100%; + padding: 0; + margin: 0; } -.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; +.img-responsive { + display: inline-block; } +.img-responsive.center-block { + display: block; +} -body, header { - position: relative; +article.doc-content *[class*="col-"] { + padding: 0; } -// Index layout + +// Main Components +// ------------------------------------------------------------------ #wrap { - > .container.index { - background-color: @gray-lightest; - width: 100%; + z-index: 1; + position: relative; + background: @gray-lightest; + padding-bottom: 40px; +} + +main { position: relative; + display: block; + + .o_content { + background-color: @doc_paper; + .deep-1; - > .index { - .container; + @media (min-width: @screen-sm-min) { + margin: -40px auto 0; + border-radius: 2px; + } } - } -} -#main_title { - margin: 10px; - @media (min-width:@screen-md-min) { - margin: 0 0 9px 0; - } -} + article.doc-body { + .pseudo-col(); + padding: 15px; + @media (min-width: @screen-sm-min) { + padding: 15px 30px; + } -.container .container { - max-width: 100%; - padding:0; - margin:0; -} + @media (min-width: @screen-md-min) { + max-width: 700px; + } -article.doc-content *[class^="col-"] { - padding:0; -} + @media (min-width: @screen-lg-min) { + margin-left: 7%; + margin-top: 20px; + } -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%; + } } - > *{ - max-width: 100%; +} + +main.o_aside_removed, main.o_slim_page { + max-width: 700px; + + @media (min-width: @screen-lg-min) { + max-width: 760px; } - } + article.doc-body { + @media (min-width: @screen-md-min) { + padding-left: 30px; + } + } } -main.has_code_col{ - .container; +main.has_code_col { + max-width: 700px; - aside { - display: none; - } + @media (min-width: @screen-lg-min) { + max-width: @container-lg; + } - article.doc-body { - width: 100%; + .doc-aside, .doc-content { + .pseudo-col(); - > *{ - max-width: 100%; + @media (max-width: @screen-md-max) { + padding: 0; + } } - > section { - position: relative; - display:block; - float: left; - width: 100%; + + aside { + display: none; } - @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; + article.doc-body { + > section { + max-width: 100%; } - > 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; + + @media (min-width: @screen-lg-min) { + width: 100%; + max-width: none; + margin:0; + + &:before { + .code-col(); } - > ul > li { - color: @gray-light; + > 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; + } + } } - } + } - } } - } -} - -main.index .toctree-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - > .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%; - } - } - - // FIXME: reimplement a single big box (.toc-single-entry) - } } 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,66 +150,12 @@ } } -// Elevation Shadows -// Visual cue indicating the amount of separation between surfaces. -// An object’s elevation determines the appearance of its shadow. -// ------------------------------------------------------------------ -.deep-1-shadow() { - 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); -} - +// Shadows +// -------------------------------------------------- .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(); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } - .transform(@args) { -webkit-transform : @args; -moz-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; +} +@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; + } } -.deep-2 { - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); +article.doc-body > section { + padding-bottom: 10px; } -.deep-3 { - box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09); +article.doc-body > section > :last-child { + margin-bottom: 0; } -.deep-4 { - box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07); +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; } -.deep-5 { - box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05); +article.doc-body > section > h2 { + padding-bottom: 5px; + border-bottom: 2px solid #f4f6f7; } -.img-responsive, -.thumbnail > img, -.thumbnail a > img, -.carousel-inner > .item > img, -.carousel-inner > .item > a > img { - display: inline-block; +article.doc-body > section > h5, +article.doc-body > section > h6 { + font-weight: 500; } -.img-responsive.center-block { +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; } -@-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); - } +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,931 +9482,1290 @@ 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; - font-weight: 300; +article.doc-body .code-fields .code-field-name { + width: auto; + display: block; + font-weight: 600; + color: #21313a; } -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; +article.doc-body .code-fields .code-field-name:after { + content: ":"; } -h3, -.h3, -h4, -.h4, -h5, -h6, -.h5, -.h6 { - font-weight: 400; +@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; + } } -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 { - font-weight: 500; +article.doc-body .code-fields ul { + list-style: none; + margin: 0.2em 0; } -h4, -.h4, -h5, -h6, -.h5, -.h6 { - margin-top: 21px; - margin-bottom: 7px; +article.doc-body .code-fields ul > li { + margin: 0 0 8px; + padding-left: 0px; + line-height: 1.5; } -ul:not(:empty), -ol:not(:empty) { - margin-bottom: 10.5px; +article.doc-body .code-fields ul > li:before { + display: none; } -ul ul:not(:empty), -ol ul:not(:empty), -ul ol:not(:empty), -ol ol:not(:empty) { - margin-bottom: 7px; +article.doc-body .code-fields ul strong { + color: #21313a; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } -body, -header { - position: relative; +article.doc-body .code-fields ul em { + color: #21313a; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-weight: 600; } -#wrap > .container.index { - background-color: #F9F9F9; +.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%; - position: relative; + height: 100%; + display: block; + background-size: cover; + background-position: 50%; } -#wrap > .container.index > .index { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; +.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 (min-width: 768px) { - #wrap > .container.index > .index { - width: 750px; +@media screen and (min-width: 768px) { + .card.top { + padding: 12% 0 5%; } } -@media (min-width: 992px) { - #wrap > .container.index > .index { - width: 970px; +@media screen and (min-width: 992px) { + .card.top { + padding: 10% 0 5%; } } -@media (min-width: 1200px) { - #wrap > .container.index > .index { - width: 1170px; +@media screen and (min-width: 1200px) { + .card.top { + padding: 8% 0 4%; } } -#wrap > .container.index > .index > .navbar-header, -#wrap > .container.index > .index > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; +.card.top.stacked { + background: transparent; + -webkit-transition: background 1s; + -o-transition: background 1s; + transition: background 1s; } -@media (min-width: 768px) { - #wrap > .container.index > .index > .navbar-header, - #wrap > .container.index > .index > .navbar-collapse { - margin-right: 0; - margin-left: 0; - } +.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%; } -#main_title { - margin: 10px; +.card.top .card-img { + background-image: url("img/banner_bg.png"); } -@media (min-width: 992px) { - #main_title { - margin: 0 0 9px 0; +.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; } } -.container .container { - max-width: 100%; - padding: 0; +.card.top .container h1 { + font-weight: 300; + font-size: 1em; + color: white; + line-height: 0.9; +} +.card.top.has_banner { + background: #282F33; +} +.card.top.has_banner:before { + display: none; +} +.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; } -article.doc-content *[class^="col-"] { - padding: 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 aside, -main article.doc-body, -main .doc-content, -main .doc-aside { - position: relative; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; - float: left; - width: 100%; +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 .doc-content, -main .doc-aside { - position: relative; +main .alert.alert-info > h3.alert-title { + display: none; } -main aside { - width: 25%; - max-width: 300px; - position: static; - padding: 0; - display: block; - float: left; +main .alert.alert-go_to { + border-color: #875A7B; + background-color: #f7f3f6; + color: #78506d; } -@media (max-width: 992px) { - main aside { - display: none; - } +main .alert.alert-go_to > h3.alert-title { + color: #593b51; } -main article.doc-body { - background: #fff; - border-left: 1px solid #F2F2F2; - padding: 15px 30px; +main .alert.alert-go_to > h3.alert-title:before { + content: "\e70d"; } -@media (min-width: 992px) { - main article.doc-body { - width: 75%; - } - main article.doc-body.doc-toc { - width: 100%; - } +main .alert.alert-success { + border-color: #b9dfb9; + background-color: #eef7ee; } -main article.doc-body > * { - max-width: 100%; +main .alert.alert-success > h3.alert-title { + color: #408c41; } -main.has_code_col { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; +main .alert.alert-success > h3.alert-title:before { + content: "\e625"; } -@media (min-width: 768px) { - main.has_code_col { - width: 750px; - } +main .alert.alert-warning, +main .alert.warning { + border-color: #fceedb; + background-color: #fef9f3; } -@media (min-width: 992px) { - main.has_code_col { - width: 970px; - } +main .alert.alert-warning > h3.alert-title, +main .alert.warning > h3.alert-title { + color: #F0AD4E; } -@media (min-width: 1200px) { - main.has_code_col { - width: 1170px; - } +main .alert.alert-warning > h3.alert-title:before, +main .alert.warning > h3.alert-title:before { + content: "\e6a4"; } -main.has_code_col > .navbar-header, -main.has_code_col > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; +main .alert.alert-danger { + border-color: #f4cecd; + background-color: #fdf7f7; } -@media (min-width: 768px) { - main.has_code_col > .navbar-header, - main.has_code_col > .navbar-collapse { - margin-right: 0; - margin-left: 0; - } +main .alert.alert-danger > h3.alert-title { + color: #c9302c; } -main.has_code_col aside { - display: none; +main .alert.alert-danger > h3.alert-title:before { + content: "\e6a4"; } -main.has_code_col article.doc-body { - width: 100%; +main .alert.alert-exercise { + border-color: #deddde; + background-color: #f7f7f7; + color: #393639; } -main.has_code_col article.doc-body > * { - max-width: 100%; +main .alert.alert-exercise > h3.alert-title { + color: #938E94; } -main.has_code_col article.doc-body > section { - position: relative; - display: block; - float: left; - width: 100%; +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.has_code_col article.doc-body { - width: 100%; - padding-right: 0; - } - main.has_code_col article.doc-body:before { - content: ""; - background: #21272b; - -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; - right: 0; - } - main.has_code_col article.doc-body > section > * { - width: 54.633333%; - max-width: 600px; - 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%; - float: none; - clear: none; - } - main.has_code_col article.doc-body > section .doc-aside { - width: 41%; - 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 { - color: #dcddde; + main .alert.doc-content { + max-width: 55%; } } -main.index .toctree-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; +hr.divider { + border-color: rgba(249, 249, 249, 0.4); + position: absolute; + width: 900%; + margin-left: -13px; } -main.index .toctree-wrapper > .row { - flex: 1 0 100%; +img.img-responsive { + box-shadow: 0 3px 15px #F2F2F2; + border: 1px solid #F2F2F2; + margin-bottom: 25px; } -@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%; - } +img.img-responsive:not(:first-child) { + margin-top: 25px; } -article.doc-toc .toctree-wrapper > ul > li > span { +.figure h4 { + margin: 0.5em 0 1.5em; + padding-left: 1em; + font-size: 1em; + font-style: italic; +} +.pq-patch em { display: block; - font-size: 28px; + border-radius: 4px 4px 0 0; + background: #F2F2F2; + padding-left: 10px; + font-size: 0.9em; + font-weight: 600; } -.code-fields { - display: table; - width: 100%; +.pq-patch em + .pq-section .highlight { + border-radius: 0 0 4px 4px; } -.code-fields .code-field { - display: table-row; +span.menuselection { + font-weight: 500; } -.code-fields .code-field-body { - display: block; - padding-left: 15px; +.list-group-item { + border: none; + background: transparent; } -@media screen and (min-width: 992px) { - .code-fields .code-field-body { - display: table-cell; - padding-left: 0; - } +blockquote { + font-family: Georgia, "Times New Roman", Times, serif; + font-weight: 600; + font-style: italic; } -.code-fields .code-field-name { - width: auto; - display: block; +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; } -@media screen and (min-width: 992px) { - .code-fields .code-field-name { - width: 20%; - padding-right: 20px; - display: table-cell; +blockquote footer cite { + font-style: italic; +} +@media (min-width: 992px) { + blockquote { + border-left: 3px solid rgba(33, 183, 153, 0.5); } } -.code-fields ul { - margin: .2em 0; - padding: 0; +.code, +code { + font-size: 0.8em; + font-weight: 600; + color: #0a352d; + background-color: #def9f4; } -#oe_main_menu_navbar ~ #wrapwrap .o_main_header.o_has_sub_nav.o_scrolled { - top: -17px; +.btn { + border-radius: 0; } -.o_main_header { - position: fixed; - width: 100%; - height: 50px; - z-index: 2; - background-color: rgba(255, 255, 255, 0.6); - color: #5a5f68; - font-family: "Work Sans", sans-serif; - font-size: 12px; +.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; - -webkit-transition-property: background, box-shadow; - transition-property: background, box-shadow; - -webkit-transform: translate3d(auto, auto, 0); - transform: translate3d(auto, auto, 0); -} -.o_main_header a:focus, -.o_main_header a:active, -.o_main_header a:focus:active { - outline: none; } -.o_main_header .btn-primary { - color: white!important; - font-size: inherit!important; - font-weight: 700; - text-transform: uppercase; +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; } -.o_main_header > .o_main_header_main { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; - height: 100%; +article.doc-body .content-switcher > ul > li:before { + content: none; } -@media (min-width: 768px) { - .o_main_header > .o_main_header_main { - width: 750px; - } +article.doc-body .content-switcher > ul > li.active { + border-bottom: 1px solid #21b799; + opacity: 1; } -@media (min-width: 992px) { - .o_main_header > .o_main_header_main { - width: 970px; - } +article.doc-body .content-switcher:hover > ul > li { + opacity: 1; + filter: alpha(opacity=100); } -@media (min-width: 1200px) { - .o_main_header > .o_main_header_main { - width: 1170px; - } +article.doc-body .content-switcher > .tabs > * { + display: none; + max-width: 100%; + overflow-x: auto; } -.o_main_header > .o_main_header_main > .navbar-header, -.o_main_header > .o_main_header_main > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; +article.doc-body .content-switcher > .tabs > .active { + display: block; } -@media (min-width: 768px) { - .o_main_header > .o_main_header_main > .navbar-header, - .o_main_header > .o_main_header_main > .navbar-collapse { - margin-right: 0; - margin-left: 0; - } +.highlight { + background: #21272b; + color: #dcddde; + border-radius: 4px; + margin-bottom: 11px; } -.o_main_header > .o_main_header_main a { - color: inherit; +.highlight pre { + margin-bottom: 0; } -.o_main_header > .o_main_header_main a:hover, -.o_main_header > .o_main_header_main a:focus { - color: #505d71; +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; } -.o_main_header > .o_main_header_main .o_logo { - margin: 15px 0; - width: 63px; - height: 20px; - background-size: cover; +body, +header { + position: relative; } -.o_main_header > .o_main_header_main > .o_primary_nav { - margin: 0 auto; +.container .container { + max-width: 100%; padding: 0; - text-align: center; - white-space: nowrap; + margin: 0; } -@media (min-width: 768px) { - .o_main_header > .o_main_header_main > .o_primary_nav { - height: 100%; - } - .o_main_header > .o_main_header_main > .o_primary_nav:before { - content: ""; - background: transparent; - z-index: -1; - visibility: hidden; - box-shadow: 0 1px 0 transparent; - width: 100%; - height: 50px; - position: absolute; - top: 0; - left: auto; - bottom: auto; - right: 0; - -webkit-transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 500ms, box-shadow 500ms linear 0ms; - -o-transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 500ms, box-shadow 500ms linear 0ms; - transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 500ms, box-shadow 500ms linear 0ms; - } - .o_main_header > .o_main_header_main > .o_primary_nav.o_sub_opened:before { - visibility: visible; - background: #FCFCFC; - box-shadow: 0 1px 0 #F2F2F2; - -webkit-transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0s, box-shadow 500ms linear 0ms; - -o-transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0s, box-shadow 500ms linear 0ms; - transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0s, box-shadow 500ms linear 0ms; - } +.img-responsive, +.thumbnail > img, +.thumbnail a > img, +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: inline-block; } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown { - position: static; +.img-responsive.center-block { + display: block; } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a { +article.doc-content *[class*="col-"] { + padding: 0; +} +#wrap { + z-index: 1; position: relative; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; + background: #F9F9F9; + padding-bottom: 40px; } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a::before, -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a::after { - content: ""; +main { + position: relative; display: block; - position: absolute; - top: 50%; - left: auto; - bottom: auto; - right: 0; - -ms-transform-origin: 50% 50% 0; - -webkit-transform-origin: 50% 50% 0; - -moz-transform-origin: 50% 50% 0; - transform-origin: 50% 50% 0; - -webkit-transition: all 300ms ease 0s; - -moz-transition: all 300ms ease 0s; - -o-transition: all 300ms ease 0s; - transition: all 300ms ease 0s; - width: 10px; - height: 1px; - background-color: #21313a; - box-shadow: 0 1px 1px rgba(33, 49, 58, 0.1); -} -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a::before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); - right: 6.07106781px; } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a::after { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); +main .o_content { + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a { - color: #9E588B !important; - font-weight: 600; +@media (min-width: 768px) { + main .o_content { + margin: -40px auto 0; + border-radius: 2px; + } } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a::before, -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a::after { - background-color: #9E588B !important; - box-shadow: 0 1px 1px rgba(158, 88, 139, 0.1); - right: 3.53553391px; +main article.doc-body { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + float: left; + width: 100%; + padding: 15px; } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a::before { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); +@media (min-width: 768px) { + main article.doc-body { + padding: 15px 30px; + } } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a::after { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); +@media (min-width: 992px) { + main article.doc-body { + max-width: 700px; + } } -.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > .dropdown-menu { - border: none; - border-radius: 0; - margin: 0; +@media (min-width: 1200px) { + main article.doc-body { + margin-left: 7%; + margin-top: 20px; + } } -.o_main_header > .o_main_header_main > .o_primary_nav > li { - display: inline-block; +main article.doc-body > * { + max-width: 100%; } -.o_main_header > .o_main_header_main > .o_primary_nav > li > a { - height: 100%; - line-height: 50px; +main.o_aside_removed, +main.o_slim_page { + max-width: 700px; } -.o_main_header > .o_main_header_main > .o_primary_nav > li > a:not(.btn) { - display: inline-block; - padding: 0 20px; - font-weight: 600; - text-transform: uppercase; +@media (min-width: 1200px) { + main.o_aside_removed, + main.o_slim_page { + max-width: 760px; + } } -@media screen and (min-width: 768px) and (max-width: 991px) { - .o_main_header > .o_main_header_main > .o_primary_nav > li > a:not(.btn) { - font-size: 11px; +@media (min-width: 992px) { + main.o_aside_removed article.doc-body, + main.o_slim_page article.doc-body { + padding-left: 30px; } - .o_main_header > .o_main_header_main > .o_primary_nav > li > a:not(.btn):not(.dropdown-toggle) { - padding: 0 10px; +} +main.has_code_col { + max-width: 700px; +} +@media (min-width: 1200px) { + main.has_code_col { + max-width: 1170px; } } -.o_main_header > .o_main_header_main > .o_primary_nav > li.dropdown > a { - margin-right: 20px; +main.has_code_col .doc-aside, +main.has_code_col .doc-content { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + float: left; + width: 100%; } -@media (min-width: 768px) { - .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav { - visibility: visible; - background-color: white; - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - -o-transform: translate(0, 0); - transform: translate(0, 0); - -webkit-transition: transform 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0ms, background-color 0ms linear 500ms; - -o-transition: transform 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0ms, background-color 0ms linear 500ms; - transition: transform 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0ms, background-color 0ms linear 500ms; +@media (max-width: 1199px) { + main.has_code_col .doc-aside, + main.has_code_col .doc-content { + padding: 0; } - .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div { - opacity: 1; - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - -o-transform: translate(0, 0); - transform: translate(0, 0); +} +main.has_code_col aside { + display: none; +} +main.has_code_col article.doc-body > section { + max-width: 100%; +} +@media (min-width: 1200px) { + main.has_code_col article.doc-body { + width: 100%; + max-width: none; + margin: 0; } - .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div:nth-child(1) { - -webkit-transition-delay: 100ms; - transition-delay: 100ms; + main.has_code_col article.doc-body:before { + content: ""; + background: #21272b; + -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; + top: 0; + left: auto; + bottom: auto; + right: 0; + width: 50%; + height: 100%; } - .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div:nth-child(2) { - -webkit-transition-delay: 200ms; - transition-delay: 200ms; + main.has_code_col article.doc-body > section { + position: relative; + display: block; + float: left; + width: 100%; } - .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div:nth-child(3) { - -webkit-transition-delay: 300ms; - transition-delay: 300ms; + main.has_code_col article.doc-body > section > * { + width: 48%; + float: left; + clear: left; } - .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div:nth-child(4) { - -webkit-transition-delay: 400ms; - transition-delay: 400ms; + 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, + main.has_code_col article.doc-body > section > h1 { + width: 48%; + float: none; + clear: none; } - .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .o_store_link { - max-height: 50px; - -webkit-transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1) 300ms; - -moz-transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1) 300ms; - -o-transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1) 300ms; - transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1) 300ms; + main.has_code_col article.doc-body > section .doc-aside { + width: 49%; + float: none; + clear: none; + margin-left: 51%; + color: #dcddde; + font-size: 14px; + line-height: 1.45; } - .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav::before { - opacity: 0.5; + main.has_code_col article.doc-body > section .doc-aside pre { + font-size: 12px; } } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav { - width: 100%; - padding: 15px 0 65px; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); +article.doc-toc .toctree-wrapper > ul > li > span { + display: block; + font-size: 28px; } -@media (min-width: 992px) { - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row { - margin-left: -45px; - margin-right: -45px; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div { - padding-left: 45px; - padding-right: 45px; +@media screen and (min-width: 992px) { + #wrap.index > .card.top { + padding: 10% 0 2%; } } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div { - font-size: 16px; +#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); } -@media (min-width: 768px) { - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div { - height: 340px; - padding-top: 10px; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div + div { - border-left: 1px solid #F2F2F2; +main.index .card .card-img span { + display: block; + background-size: cover; + background-position: 50%; + width: 100%; + height: 100%; +} +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) { + main.index .toc-single-entry .card figcaption { + font-size: 1.5em; + padding: 20px 15px; } } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul { - position: relative; +.toctree-wrapper > ul { list-style: none; padding: 0; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li { - height: 30px; - -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; - -moz-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; - -o-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; - transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; - -webkit-transition-property: height, opacity; - transition-property: height, opacity; +.toctree-wrapper > ul li { + line-height: 1.4; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li > a { - display: block; - height: 100%; - line-height: 30px; - font-weight: 500; - font-size: 1.4rem; +.toctree-wrapper > ul li.toctree-l1, +.toctree-wrapper > ul li.toctree-l3 { + padding-left: 0; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li.dropdown:not(.open) > a::before, -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li.dropdown:not(.open) > a::after { - -ms-transform-origin: 8px 50% 0; - -webkit-transform-origin: 8px 50% 0; - -moz-transform-origin: 8px 50% 0; - transform-origin: 8px 50% 0; - width: 8px; - right: 0; +.toctree-wrapper > ul li.toctree-l1:before, +.toctree-wrapper > ul li.toctree-l3:before { + content: none; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li.dropdown > ul { - position: absolute; - top: 30px; - left: 0; - bottom: 0; - right: 0; - -webkit-transform: translate(100%, 0); - -ms-transform: translate(100%, 0); - -o-transform: translate(100%, 0); - transform: translate(100%, 0); - opacity: 0; - filter: alpha(opacity=0); - -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; - -moz-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; - -o-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; - transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; +.toctree-wrapper > ul li.toctree-l1:first-child, +.toctree-wrapper > ul li.toctree-l3:first-child { + margin-top: 0; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li.dropdown.open > ul { - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - -o-transform: translate(0, 0); - transform: translate(0, 0); - opacity: 1; - filter: alpha(opacity=100); - -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; - -moz-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; - -o-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; - transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; +.toctree-wrapper > ul li.toctree-l1 { + margin: 0 0 15px; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul.o_sub_opened > li:not(.open) { - opacity: 0; - height: 0 !important; - overflow: hidden; - -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; - -moz-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; - -o-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; - transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; +.toctree-wrapper > ul li.toctree-l1 > span { + font-size: 21px; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family { - text-align: center; +.toctree-wrapper > ul li.toctree-l2 > span { font-weight: 500; - line-height: 2; - pointer-events: none; - cursor: default; -} -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family::selection, -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family *::selection { - background: transparent; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family::-moz-selection, -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family *::-moz-selection { - background: transparent; +.toctree-wrapper > ul li.toctree-l2 > ul { + margin: 0 0 15px; } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family > span { - background-image: url("img/apps_families_s.png"); - background-position: 0px 50%; - background-repeat: no-repeat; +.toctree-wrapper > ul li.toctree-l2 > ul:empty { display: none; } -@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family > span { - background-image: url("img/2x_apps_families_s.png"); - } +#oe_main_menu_navbar ~ #wrapwrap .o_main_header.o_has_sub_nav.o_scrolled { + top: -17px; } -@media (min-width: 768px) { - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family > span { - display: block; - margin: 0 auto; - background-size: auto 100%; - width: 51px; - height: 50px; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family > div { - font-size: 0.7em; - font-weight: 500; - line-height: 1.5; - color: #666c75; - margin-bottom: 1.3em; - } +.o_main_header { + position: fixed; + width: 100%; + height: 50px; + z-index: 2; + background-color: rgba(255, 255, 255, 0.6); + color: #2b3134; + font-family: "Work Sans", sans-serif; + font-size: 12px; + -webkit-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; + -webkit-transition-property: background, box-shadow; + transition-property: background, box-shadow; + -webkit-transform: translate3d(auto, auto, 0); + transform: translate3d(auto, auto, 0); +} +.o_main_header a:focus, +.o_main_header a:active, +.o_main_header a:focus:active { + outline: none; +} +.o_main_header .btn-primary { + color: white!important; + font-size: inherit!important; + font-weight: 700; + text-transform: uppercase; +} +.o_main_header > .o_main_header_main { + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; + height: 100%; } @media (min-width: 768px) { - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_website_apps a:hover, - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_website_apps a:focus, - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_website_apps .o_nav_app_family { - color: #5B899E; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_sale_apps a:hover, - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_sale_apps a:focus, - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_sale_apps .o_nav_app_family { - color: #E46F78; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_sale_apps .o_nav_app_family > span { - background-position: -60px 50%; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_operation_apps a:hover, - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_operation_apps a:focus, - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_operation_apps .o_nav_app_family { - color: #5C5B80; + .o_main_header > .o_main_header_main { + width: 750px; } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_operation_apps .o_nav_app_family > span { - background-position: -120px 50%; +} +@media (min-width: 992px) { + .o_main_header > .o_main_header_main { + width: 970px; } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_productivity_apps a:hover, - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_productivity_apps a:focus, - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_productivity_apps .o_nav_app_family { - color: #D5653E; +} +@media (min-width: 1200px) { + .o_main_header > .o_main_header_main { + width: 1170px; } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_productivity_apps .o_nav_app_family > span { - background-position: -181px 50%; +} +.o_main_header > .o_main_header_main > .navbar-header, +.o_main_header > .o_main_header_main > .navbar-collapse { + margin-right: -15px; + margin-left: -15px; +} +@media (min-width: 768px) { + .o_main_header > .o_main_header_main > .navbar-header, + .o_main_header > .o_main_header_main > .navbar-collapse { + margin-right: 0; + margin-left: 0; } } -.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .o_store_link { - position: absolute; - top: auto; - left: 0; - bottom: 0; - right: 0; - overflow: hidden; - display: block; - height: 50px; - line-height: 50px; - border-top: 1px solid #F2F2F2; +.o_main_header > .o_main_header_main a { + color: inherit; +} +.o_main_header > .o_main_header_main a:hover, +.o_main_header > .o_main_header_main a:focus { + color: #273239; +} +.o_main_header > .o_main_header_main .o_logo { + margin: 15px 0; + width: 63px; + height: 20px; + background-size: cover; +} +.o_main_header > .o_main_header_main > .o_primary_nav { + margin: 0 auto; + padding: 0; text-align: center; - font-size: 12px; - font-weight: 600; + white-space: nowrap; } @media (min-width: 768px) { - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav { - display: block; - background-color: #FCFCFC; + .o_main_header > .o_main_header_main > .o_primary_nav { + height: 100%; + } + .o_main_header > .o_main_header_main > .o_primary_nav:before { + content: ""; + background: transparent; + z-index: -1; visibility: hidden; - z-index: -2; - -webkit-transform: translate(0, -115%); - -ms-transform: translate(0, -115%); - -o-transform: translate(0, -115%); - transform: translate(0, -115%); - -webkit-transition: transform 333.3333333333333ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 333.3333333333333ms, background-color 0ms linear 0ms; - -o-transition: transform 333.3333333333333ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 333.3333333333333ms, background-color 0ms linear 0ms; - transition: transform 333.3333333333333ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 333.3333333333333ms, background-color 0ms linear 0ms; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav .container > .row > div { - opacity: 0; - -webkit-transform: translate(0, -30%); - -ms-transform: translate(0, -30%); - -o-transform: translate(0, -30%); - transform: translate(0, -30%); - -webkit-transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms; - -moz-transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms; - -o-transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms; - transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav .o_store_link { - max-height: 0; - -webkit-transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 0s; - } - .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav::before { - content: ""; + box-shadow: 0 1px 0 transparent; + width: 100%; + height: 50px; position: absolute; - top: 100%; - left: 0; - bottom: -1000px; + top: 0; + left: auto; + bottom: auto; right: 0; - display: block; - background-color: #000; - opacity: 0; - -webkit-transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 0s; - -moz-transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 0s; - -o-transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 0s; - transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + -webkit-transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 500ms, box-shadow 500ms linear 0ms; + -o-transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 500ms, box-shadow 500ms linear 0ms; + transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 500ms, box-shadow 500ms linear 0ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav.o_sub_opened:before { + visibility: visible; + background: #FCFCFC; + box-shadow: 0 1px 0 #F2F2F2; + -webkit-transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0s, box-shadow 500ms linear 0ms; + -o-transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0s, box-shadow 500ms linear 0ms; + transition: background 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0s, box-shadow 500ms linear 0ms; } } -.o_main_header > .o_main_header_main .o_header_buttons { - height: 100%; - line-height: 50px; - float: right; +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown { + position: static; } -.o_main_header > .o_main_header_main .o_header_buttons > * { +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a { + position: relative; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; +} +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a::before, +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a::after { + content: ""; + display: block; + position: absolute; + top: 50%; + left: auto; + bottom: auto; + right: 0; + -ms-transform-origin: 50% 50% 0; + -webkit-transform-origin: 50% 50% 0; + -moz-transform-origin: 50% 50% 0; + transform-origin: 50% 50% 0; + -webkit-transition: all 300ms ease 0s; + -moz-transition: all 300ms ease 0s; + -o-transition: all 300ms ease 0s; + transition: all 300ms ease 0s; + width: 10px; + height: 1px; + background-color: #21313a; + box-shadow: 0 1px 1px rgba(33, 49, 58, 0.1); +} +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a::before { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + right: 6.07106781px; +} +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > a::after { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a { + color: #9E588B !important; + font-weight: 600; +} +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a::before, +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a::after { + background-color: #9E588B !important; + box-shadow: 0 1px 1px rgba(158, 88, 139, 0.1); + right: 3.53553391px; +} +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a::before { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a::after { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +.o_main_header > .o_main_header_main > .o_primary_nav .dropdown > .dropdown-menu { + border: none; + border-radius: 0; + margin: 0; +} +.o_main_header > .o_main_header_main > .o_primary_nav > li { display: inline-block; - float: left; } -.o_main_header > .o_main_header_main .o_header_buttons a:not(.btn) { +.o_main_header > .o_main_header_main > .o_primary_nav > li > a { + height: 100%; + line-height: 50px; +} +.o_main_header > .o_main_header_main > .o_primary_nav > li > a:not(.btn) { display: inline-block; padding: 0 20px; font-weight: 600; text-transform: uppercase; } @media screen and (min-width: 768px) and (max-width: 991px) { - .o_main_header > .o_main_header_main .o_header_buttons a:not(.btn) { + .o_main_header > .o_main_header_main > .o_primary_nav > li > a:not(.btn) { font-size: 11px; } - .o_main_header > .o_main_header_main .o_header_buttons a:not(.btn):not(.dropdown-toggle) { + .o_main_header > .o_main_header_main > .o_primary_nav > li > a:not(.btn):not(.dropdown-toggle) { padding: 0 10px; } } -.o_main_header > .o_main_header_main .o_header_buttons a.dropdown-toggle { - padding: 0 10px; +.o_main_header > .o_main_header_main > .o_primary_nav > li.dropdown > a { + margin-right: 20px; } -.o_main_header > .o_main_header_main .o_header_buttons a.o_my_cart { - padding: 0; +@media (min-width: 768px) { + .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav { + visibility: visible; + background-color: white; + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); + -webkit-transition: transform 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0ms, background-color 0ms linear 500ms; + -o-transition: transform 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0ms, background-color 0ms linear 500ms; + transition: transform 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 0ms, background-color 0ms linear 500ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div { + opacity: 1; + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); + } + .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div:nth-child(1) { + -webkit-transition-delay: 100ms; + transition-delay: 100ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div:nth-child(2) { + -webkit-transition-delay: 200ms; + transition-delay: 200ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div:nth-child(3) { + -webkit-transition-delay: 300ms; + transition-delay: 300ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .container > .row > div:nth-child(4) { + -webkit-transition-delay: 400ms; + transition-delay: 400ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav .o_store_link { + max-height: 50px; + -webkit-transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1) 300ms; + -moz-transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1) 300ms; + -o-transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1) 300ms; + transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1) 300ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav > li.open > .o_secondary_nav::before { + opacity: 0.5; + } } -.o_main_header > .o_main_header_main .o_header_buttons a.o_my_cart .my_cart_quantity { - font-family: sans-serif; - border-radius: 100%; - font-weight: bold; - font-size: 90%; - padding: 4px 0; - min-width: 19px; - text-align: center; - display: inline-block; +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav { + width: 100%; + padding: 15px 0 65px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); } -.o_main_header > .o_main_header_main .o_header_buttons .btn-primary { - margin-top: 9px; +@media (min-width: 992px) { + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row { + margin-left: -45px; + margin-right: -45px; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div { + padding-left: 45px; + padding-right: 45px; + } } -.o_main_header > .o_main_header_main .o_header_buttons > .dropdown { - margin: 0 5px; +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div { + font-size: 16px; + overflow: hidden; } -@media screen and (min-width: 992px) { - .o_main_header > .o_main_header_main .o_header_buttons > .dropdown { - margin: 0 15px; +@media (min-width: 768px) { + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div { + height: 340px; + padding-top: 10px; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div + div { + border-left: 1px solid #F2F2F2; } } -.o_main_header > .o_main_header_main .o_header_buttons > .dropdown, -.o_main_header > .o_main_header_main .o_header_buttons > .dropdown .dropdown-toggle { - height: 100%; -} -.o_main_header > .o_main_header_main .o_header_buttons > .dropdown > .dropdown-menu { - left: auto; - right: 0; +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul { + position: relative; + list-style: none; + padding: 0; } -.o_main_header > .o_main_header_main .o_header_buttons > .dropdown > .dropdown-menu li a { - padding-top: 5px; - padding-bottom: 5px; - color: #666c75; +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li { + height: 30px; + -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; + -moz-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; + -o-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; + transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; + -webkit-transition-property: height, opacity; + transition-property: height, opacity; } -.o_main_header > .o_sub_nav { - min-height: 40px; - border: 1px solid rgba(0, 0, 0, 0.05); +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li > a { + display: block; + height: 100%; + line-height: 30px; + font-weight: 500; + font-size: 1.4rem; +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li.dropdown:not(.open) > a::before, +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li.dropdown:not(.open) > a::after { + -ms-transform-origin: 8px 50% 0; + -webkit-transform-origin: 8px 50% 0; + -moz-transform-origin: 8px 50% 0; + transform-origin: 8px 50% 0; + width: 8px; + right: 0; +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li.dropdown > ul { + position: absolute; + top: 30px; + left: 0; + bottom: 0; + right: 0; + -webkit-transform: translate(100%, 0); + -ms-transform: translate(100%, 0); + -o-transform: translate(100%, 0); + transform: translate(100%, 0); + opacity: 0; + filter: alpha(opacity=0); + -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; + -moz-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; + -o-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; + transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul > li.dropdown.open > ul { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); + opacity: 1; + filter: alpha(opacity=100); + -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; + -moz-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; + -o-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; + transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 100ms; +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul.o_sub_opened > li:not(.open) { + opacity: 0; + height: 0 !important; + overflow: hidden; + -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; + -moz-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; + -o-transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; + transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1) 0; +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family { + text-align: center; + font-weight: 500; + line-height: 2; + pointer-events: none; + cursor: default; +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family::selection, +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family *::selection { + background: transparent; +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family::-moz-selection, +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family *::-moz-selection { + background: transparent; +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family > span { + background-image: url("img/apps_families_s.png"); + background-position: 0px 50%; + background-repeat: no-repeat; + display: none; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family > span { + background-image: url("img/2x_apps_families_s.png"); + } +} +@media (min-width: 768px) { + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family > span { + display: block; + margin: 0 auto; + background-size: auto 100%; + width: 51px; + height: 50px; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div .o_nav_app_family > div { + font-size: 0.7em; + font-weight: 500; + line-height: 1.5; + color: #373e42; + margin-bottom: 1.3em; + } +} +@media (min-width: 768px) { + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_website_apps a:hover, + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_website_apps a:focus, + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_website_apps .o_nav_app_family { + color: #5B899E; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_sale_apps a:hover, + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_sale_apps a:focus, + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_sale_apps .o_nav_app_family { + color: #E46F78; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_sale_apps .o_nav_app_family > span { + background-position: -60px 50%; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_operation_apps a:hover, + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_operation_apps a:focus, + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_operation_apps .o_nav_app_family { + color: #5C5B80; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_operation_apps .o_nav_app_family > span { + background-position: -120px 50%; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_productivity_apps a:hover, + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_productivity_apps a:focus, + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_productivity_apps .o_nav_app_family { + color: #D5653E; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div.o_productivity_apps .o_nav_app_family > span { + background-position: -181px 50%; + } +} +.o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .o_store_link { + position: absolute; + top: auto; + left: 0; + bottom: 0; + right: 0; + overflow: hidden; + display: block; + height: 50px; + line-height: 50px; + border-top: 1px solid #F2F2F2; + text-align: center; + font-size: 12px; + font-weight: 600; +} +@media (min-width: 768px) { + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav { + display: block; + background-color: #FCFCFC; + visibility: hidden; + z-index: -2; + -webkit-transform: translate(0, -115%); + -ms-transform: translate(0, -115%); + -o-transform: translate(0, -115%); + transform: translate(0, -115%); + -webkit-transition: transform 333.3333333333333ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 333.3333333333333ms, background-color 0ms linear 0ms; + -o-transition: transform 333.3333333333333ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 333.3333333333333ms, background-color 0ms linear 0ms; + transition: transform 333.3333333333333ms cubic-bezier(0.55, 0, 0.1, 1) 0ms, visibility 0ms linear 333.3333333333333ms, background-color 0ms linear 0ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav .container > .row > div { + opacity: 0; + -webkit-transform: translate(0, -30%); + -ms-transform: translate(0, -30%); + -o-transform: translate(0, -30%); + transform: translate(0, -30%); + -webkit-transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms; + -moz-transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms; + -o-transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms; + transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) 0ms; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav .o_store_link { + max-height: 0; + -webkit-transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + -moz-transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + -o-transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + } + .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav::before { + content: ""; + position: absolute; + top: 100%; + left: 0; + bottom: -1000px; + right: 0; + display: block; + background-color: #000; + opacity: 0; + -webkit-transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + -moz-transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + -o-transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 0s; + } +} +.o_main_header > .o_main_header_main .o_header_buttons { + height: 100%; + line-height: 50px; + float: right; +} +.o_main_header > .o_main_header_main .o_header_buttons > * { + display: inline-block; + float: left; +} +.o_main_header > .o_main_header_main .o_header_buttons a:not(.btn) { + display: inline-block; + padding: 0 20px; + font-weight: 600; + text-transform: uppercase; +} +@media screen and (min-width: 768px) and (max-width: 991px) { + .o_main_header > .o_main_header_main .o_header_buttons a:not(.btn) { + font-size: 11px; + } + .o_main_header > .o_main_header_main .o_header_buttons a:not(.btn):not(.dropdown-toggle) { + padding: 0 10px; + } +} +.o_main_header > .o_main_header_main .o_header_buttons a.dropdown-toggle { + padding: 0 10px; +} +.o_main_header > .o_main_header_main .o_header_buttons a.o_my_cart { + padding: 0; +} +.o_main_header > .o_main_header_main .o_header_buttons a.o_my_cart .my_cart_quantity { + font-family: sans-serif; + border-radius: 100%; + font-weight: bold; + font-size: 90%; + padding: 4px 0; + min-width: 19px; + text-align: center; + display: inline-block; +} +.o_main_header > .o_main_header_main .o_header_buttons .btn-primary { + margin-top: 9px; +} +.o_main_header > .o_main_header_main .o_header_buttons > .dropdown { + margin: 0 5px; +} +@media screen and (min-width: 992px) { + .o_main_header > .o_main_header_main .o_header_buttons > .dropdown { + margin: 0 15px; + } +} +.o_main_header > .o_main_header_main .o_header_buttons > .dropdown, +.o_main_header > .o_main_header_main .o_header_buttons > .dropdown .dropdown-toggle { + height: 100%; +} +.o_main_header > .o_main_header_main .o_header_buttons > .dropdown > .dropdown-menu { + left: auto; + right: 0; +} +.o_main_header > .o_main_header_main .o_header_buttons > .dropdown > .dropdown-menu li a { + padding-top: 5px; + padding-bottom: 5px; + color: #373e42; +} +.o_main_header > .o_sub_nav { + min-height: 40px; + border: 1px solid rgba(0, 0, 0, 0.05); border-width: 1px 0; background-color: rgba(255, 255, 255, 0.8); } @@ -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,1141 +11712,340 @@ 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; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - } - .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:last-child > a { - max-width: 170px; - } -} -@media screen and (min-width: 1980px) { - .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li > a { - max-width: 120px; - } -} -@media screen and (min-width: 1200px) { - .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:last-child > a { - max-width: none; - } -} -@media screen and (max-width: 767px) { - .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li > a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li > a:before { - content: "|"; - margin-right: 0.5em; - } - .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:nth-child(1) > a:before { - display: none; - } - .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:nth-child(2) > a:before { - padding-left: 0.5em; - } - .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:nth-child(3) > a:before { - padding-left: 1em; - } -} -@media screen and (max-width: 767px) { - .o_main_header.index > .o_sub_nav #o_sub-menu .o_breadcrumb { - display: none; - } -} -.o_main_header > .o_sub_nav { - border-radius: 0; -} -.o_main_header > .o_sub_nav .navbar-toggle { - padding: 0 15px; - margin: 0; - height: 38px; - background-color: #F2F2F2; -} -.o_main_header > .o_sub_nav .navbar-toggle span { - line-height: 38px; -} -.o_main_header > .o_sub_nav .navbar-toggle.collapsed { - background-color: #FCFCFC; -} -.o_main_header > .o_sub_nav .collapse .nav { - margin-right: 0; - margin-bottom: 0; -} -.o_main_header > .o_sub_nav .collapse .nav:first-of-type { - margin-right: -15px; -} -.o_main_header > .o_sub_nav .collapse .nav > li { - margin: 0; -} -.o_main_header > .o_sub_nav .collapse .nav > li > a { - padding: 0 0 0 10px; -} -.o_main_header > .o_sub_nav .collapse .nav > li.divider { - height: auto; - line-height: 1; - border-bottom: 1px solid #dcddde; - padding: 4px 0px 5px; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown > a.dropdown-toggle { - padding: 0 5px 0 10px; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown > a.dropdown-toggle:after { - font-family: 'Material-Design-Icons'; - content: "\e7c1"; - display: inline-block; - text-rendering: geometricPrecision; - font-size: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -@media screen and (max-width: 767px) { - .o_main_header > .o_sub_nav .collapse .nav > li.dropdown > a.dropdown-toggle:after { - font-size: 1.5em; - } -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open { - z-index: 1; - position: relative; - background-color: #dcddde; - color: #5a5f68; -} -@media screen and (min-width: 768px) { - .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open { - background-color: #FCFCFC; - } -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-toggle { - color: #5a5f68; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-toggle:hover { - color: #21313a; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu { - margin-top: 0; - border: none; - border-radius: 0; - text-align: left; - min-width: 100%; - background-color: #FCFCFC; - 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; - float: none; - text-transform: none; - font-weight: 500; -} -@media screen and (max-width: 767px) { - .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu > li > a { - padding-left: 10px; - } -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu > li.active > a { - color: white; - background-color: #4c8c7f; -} -@media screen and (max-width: 767px) { - .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu { - position: static; - } -} -@media screen and (min-width: 768px) { - .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu { - background-color: #FCFCFC; - } -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav { - margin-left: 0; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav > .dropdown-toggle:after { - position: absolute; - top: 0; - left: auto; - bottom: auto; - right: 0; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li > a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li > a:before { - content: "|"; - margin-right: 0.5em; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(1) > a:before { - display: none; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(2) > a:before { - padding-left: 0.5em; -} -.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(3) > a:before { - padding-left: 1em; -} -@media screen and (min-width: 768px) and (max-width: 991px) { - .o_main_header > .o_sub_nav > .container > .collapse > .nav > li > a, - .o_main_header > .o_sub_nav > .container .o_breadcrumb > li > a { - font-size: 10px; - font-weight: 600; - } -} -.o_main_header > .o_sub_nav li.dropdown > a.dropdown-toggle { - padding: 0 5px 0 10px; -} -.o_main_header > .o_sub_nav li.dropdown > a.dropdown-toggle:after { - font-family: 'Material-Design-Icons'; - content: "\e7c1"; - display: inline-block; - text-rendering: geometricPrecision; - font-size: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -@media screen and (max-width: 767px) { - .o_main_header > .o_sub_nav li.dropdown > a.dropdown-toggle:after { - font-size: 1.5em; - } -} -.o_main_header > .o_sub_nav li.dropdown.open { - z-index: 1; - position: relative; - background-color: #dcddde; - color: #5a5f68; -} -@media screen and (min-width: 768px) { - .o_main_header > .o_sub_nav li.dropdown.open { - background-color: #FCFCFC; - } -} -.o_main_header > .o_sub_nav li.dropdown.open .dropdown-toggle { - color: #5a5f68; -} -.o_main_header > .o_sub_nav li.dropdown.open .dropdown-toggle:hover { - color: #21313a; -} -.o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu { - margin-top: 0; - border: none; - border-radius: 0; - text-align: left; - min-width: 100%; - background-color: #FCFCFC; - 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; - float: none; - text-transform: none; - font-weight: 500; -} -@media screen and (max-width: 767px) { - .o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu > li > a { - padding-left: 10px; - } -} -.o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu > li.active > a { - color: white; - background-color: #4c8c7f; -} -@media screen and (max-width: 767px) { - .o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu { - position: static; - } -} -@media screen and (min-width: 768px) { - .o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu { - background-color: #FCFCFC; - } -} -.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav { - margin-left: 0; -} -.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav > .dropdown-toggle:after { - position: absolute; - top: 0; - left: auto; - bottom: auto; - right: 0; -} -.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li > a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li > a:before { - content: "|"; - margin-right: 0.5em; -} -.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(1) > a:before { - display: none; -} -.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(2) > a:before { - padding-left: 0.5em; -} -.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(3) > a:before { - padding-left: 1em; -} -@media (max-width: 767px) { - .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav { - display: block; - margin-bottom: 0; - } - .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav .nav { - margin: 0 0 0 -8px; - } - .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav .nav > li > a { - color: #666c75; - } - .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; - } -} -.o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav_actions { - margin-left: 10px; -} -.o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav_actions > li { - background: rgba(249, 249, 249, 0.1); - margin-right: 1px; -} -.o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav_actions > li:last-child { - margin-right: 0; -} -.o_main_header.o_scrolled .o_sub_nav #o_doc_title { - opacity: 1; - filter: alpha(opacity=100); - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - -o-transform: translate(0, 0); - transform: translate(0, 0); - -webkit-transition: opacity 1s, transform 0.3s; - -o-transition: opacity 1s, transform 0.3s; - transition: opacity 1s, transform 0.3s; -} -.o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions { - margin-left: 10px; -} -.o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions:first-of-type { - margin-right: -25px; -} -.o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions > li { - background: rgba(136, 136, 136, 0.1); - margin-right: 1px; -} -.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%; + } + .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:last-child > a { + max-width: 170px; + } } -@media (min-width: 1200px) { - .has_code_col .doc-aside .card.top .container h1 { - color: white; +@media screen and (min-width: 1980px) { + .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li > a { + max-width: 120px; } } -.card.top .container h1 b, -.card.top .container h1 strong, -.card.top .container h1 a { - font-weight: 400; +@media screen and (min-width: 1200px) { + .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:last-child > a { + max-width: none; + } } -@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; +@media screen and (max-width: 767px) { + .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li > a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } - .card.top .container h1 small, - .card.top .container h1 .small { - font-weight: normal; - line-height: 1; - color: #21313a; + .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li > a:before { + content: "|"; + margin-right: 0.5em; } - .card.top .container h1 small, - .card.top .container h1 .small { - font-size: 65%; + .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:nth-child(1) > a:before { + display: none; } - .card.top .container h1 b, - .card.top .container h1 strong, - .card.top .container h1 a { - font-weight: 400; + .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:nth-child(2) > a:before { + padding-left: 0.5em; } -} -@media screen and (min-width: 768px) and (min-width: 1200px) { - .has_code_col .doc-aside .card.top .container h1 { - color: white; + .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb > li:nth-child(3) > a:before { + padding-left: 1em; } } -.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; +@media screen and (max-width: 767px) { + .o_main_header.index > .o_sub_nav #o_sub-menu .o_breadcrumb { + display: none; + } } -.toctree-wrapper > ul > li.toctree-l1 > span small, -.toctree-wrapper > ul > li.toctree-l1 > span .small { - font-size: 65%; +.o_main_header > .o_sub_nav { + border-radius: 0; } -@media (min-width: 1200px) { - .has_code_col .doc-aside .toctree-wrapper > ul > li.toctree-l1 > span { - color: white; - } +.o_main_header > .o_sub_nav .navbar-toggle { + padding: 0 15px; + margin: 0; + height: 38px; + background-color: #F2F2F2; } -.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; +.o_main_header > .o_sub_nav .navbar-toggle span { + line-height: 38px; } -hr.divider { - border-color: rgba(249, 249, 249, 0.4); - position: absolute; - width: 900%; - margin-left: -13px; +.o_main_header > .o_sub_nav .navbar-toggle.collapsed { + background-color: #FCFCFC; } -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; +.o_main_header > .o_sub_nav .collapse .nav { + margin-right: 0; + margin-bottom: 0; } -@media (min-width: 768px) { - main .alert { - padding-left: 5.5em; - } +.o_main_header > .o_sub_nav .collapse .nav:first-of-type { + margin-right: -15px; } -main .alert > p, -main .alert > ul { - margin: .5em 0; +.o_main_header > .o_sub_nav .collapse .nav > li { + margin: 0; } -main .alert > .alert-title, -main .alert > h3 { - color: #4B9EB6; +.o_main_header > .o_sub_nav .collapse .nav > li > a { + padding: 0 0 0 10px; } -main .alert > .alert-title:before, -main .alert > h3:before { - content: "\e639"; +.o_main_header > .o_sub_nav .collapse .nav > li.divider { + height: auto; + line-height: 1; + border-bottom: 1px solid #dcddde; + padding: 4px 0px 5px; } -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; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown > a.dropdown-toggle { + padding: 0 5px 0 10px; } -main .alert > h3:before, -main .alert > .alert-title:before { +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown > a.dropdown-toggle:after { font-family: 'Material-Design-Icons'; - content: "\e639"; + content: "\e7c1"; 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; +@media screen and (max-width: 767px) { + .o_main_header > .o_sub_nav .collapse .nav > li.dropdown > a.dropdown-toggle:after { + font-size: 1.5em; } } -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; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open { + z-index: 1; + position: relative; + background-color: #dcddde; + color: #2b3134; } -main .alert.alert-danger > .alert-title:before, -main .alert.alert-danger > h3:before { - content: "\e6a4"; +@media screen and (min-width: 768px) { + .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open { + background-color: #FCFCFC; + } } -main .alert.alert-exercise { - border-color: #deddde; - background-color: #f7f7f7; - color: #393639; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-toggle { + color: #2b3134; } -main .alert.alert-exercise > .alert-title, -main .alert.alert-exercise > h3 { - color: #938E94; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-toggle:hover { + color: #21313a; } -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"; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu { + margin-top: 0; + border: none; + border-radius: 0; + text-align: left; + min-width: 100%; + background-color: #FCFCFC; + padding-bottom: 12.5px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -main .alert.alert-go_to { - border-color: #b8d9e2; - background-color: #eef6f8; - border-width: 2px; - margin: 2em auto; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu > li > a { + font-size: 12px; + display: block; + color: #2b3134; + float: none; + text-transform: none; + font-weight: 500; } -main .alert.alert-go_to a { - color: #25505c; +@media screen and (max-width: 767px) { + .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu > li > a { + padding-left: 10px; + } } -main .alert.alert-go_to > .alert-title, -main .alert.alert-go_to > h3 { - color: #4B9EB6; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu > li.active > a { + color: white; + background-color: #4c8c7f; } -main .alert.alert-go_to > .alert-title:before, -main .alert.alert-go_to > h3:before { - content: "\e70d"; +@media screen and (max-width: 767px) { + .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu { + position: static; + } } -@media (min-width: 1200px) { - main .alert.doc-content { - max-width: 55%; +@media screen and (min-width: 768px) { + .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu { + background-color: #FCFCFC; } } -img.img-responsive { - margin-bottom: 10.5px; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav { + margin-left: 0; } -.figure h4 { - margin: 0.5em 0 1.5em; - padding-left: 1em; - font-size: 1em; - font-style: italic; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav > .dropdown-toggle:after { + position: absolute; + top: 0; + left: auto; + bottom: auto; + right: 0; } -.pq-patch { - background: #dcddde; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li > a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.pq-patch em { - padding-left: 10px; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li > a:before { + content: "|"; + margin-right: 0.5em; } -span.menuselection { - font-weight: 600; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(1) > a:before { + display: none; } -.list-group-item { - border: none; - background: transparent; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(2) > a:before { + padding-left: 0.5em; } -dt { - margin: .5em 0 .3em; - font-weight: normal; +.o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(3) > a:before { + padding-left: 1em; } -blockquote { - font-family: Georgia, "Times New Roman", Times, serif; - font-weight: 600; - font-style: italic; +@media screen and (min-width: 768px) and (max-width: 991px) { + .o_main_header > .o_sub_nav > .container > .collapse > .nav > li > a, + .o_main_header > .o_sub_nav > .container .o_breadcrumb > li > a { + font-size: 10px; + font-weight: 600; + } } -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; +.o_main_header > .o_sub_nav li.dropdown > a.dropdown-toggle { + padding: 0 5px 0 10px; } -blockquote footer cite { - font-style: italic; +.o_main_header > .o_sub_nav li.dropdown > a.dropdown-toggle:after { + font-family: 'Material-Design-Icons'; + content: "\e7c1"; + display: inline-block; + text-rendering: geometricPrecision; + font-size: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -@media (min-width: 992px) { - blockquote { - border-left: 3px solid rgba(33, 183, 153, 0.5); +@media screen and (max-width: 767px) { + .o_main_header > .o_sub_nav li.dropdown > a.dropdown-toggle:after { + font-size: 1.5em; } } -code, -.code { - font-size: 0.8em; - font-weight: 600; - color: #0a352d; - background-color: #def9f4; -} -.btn { - border-radius: 0; +.o_main_header > .o_sub_nav li.dropdown.open { + z-index: 1; + position: relative; + background-color: #dcddde; + color: #2b3134; } -dd { - margin-left: 40px; +@media screen and (min-width: 768px) { + .o_main_header > .o_sub_nav li.dropdown.open { + background-color: #FCFCFC; + } } -.code-fields { - font-size: .9em; - border: 2px solid #dcddde; +.o_main_header > .o_sub_nav li.dropdown.open .dropdown-toggle { + color: #2b3134; } -.code-fields .code-field-name { - font-weight: 600; +.o_main_header > .o_sub_nav li.dropdown.open .dropdown-toggle:hover { color: #21313a; } -.code-fields .code-field-name:after { - content: ":"; +.o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu { + margin-top: 0; + border: none; + border-radius: 0; + text-align: left; + min-width: 100%; + background-color: #FCFCFC; + padding-bottom: 12.5px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -@media screen and (min-width: 992px) { - .code-fields .code-field-name { - font-size: .9em; - text-align: right; +.o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu > li > a { + font-size: 12px; + display: block; + color: #2b3134; + float: none; + text-transform: none; + font-weight: 500; +} +@media screen and (max-width: 767px) { + .o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu > li > a { + padding-left: 10px; } } -.code-fields ul { - list-style: none; +.o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu > li.active > a { + color: white; + background-color: #4c8c7f; } -.code-fields ul strong { - color: #21313a; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +@media screen and (max-width: 767px) { + .o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu { + position: static; + } } -.code-fields ul em { - color: #21313a; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-weight: 600; - font-size: .9em; +@media screen and (min-width: 768px) { + .o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu { + background-color: #FCFCFC; + } } -table, -.table { - font-size: 0.9em; +.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav { + margin-left: 0; } -.code-namespace, -.code-module, -.code-class, -.code-staticmethod, -.code-classmethod, -.code-method, -.code-function, -.code-attribute, -.code-data { - padding-left: 20px; - margin-bottom: 2em; +.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav > .dropdown-toggle:after { + position: absolute; + top: 0; + left: auto; + bottom: auto; + right: 0; } -.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; +.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li > a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.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 { +.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li > a:before { + content: "|"; + margin-right: 0.5em; +} +.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(1) > a:before { 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; +.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(2) > a:before { + padding-left: 0.5em; } -.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; +.o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(3) > a:before { + padding-left: 1em; } -@media (min-width: 1200px) { - main.has_code_col .doc-aside { - color: #dcddde; +@media (max-width: 767px) { + .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav { + display: block; + margin-bottom: 0; } - main.has_code_col .doc-aside pre { - font-size: 12px; + .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav .nav { + margin: 0 0 0 -8px; } -} -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; + .o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav .nav > li > a { + 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: #2b3134; } } -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; +.o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav_actions { + margin-left: 10px; } -.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); +.o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav_actions > li { + background: rgba(249, 249, 249, 0.1); + margin-right: 1px; } -.content-switcher > ul > li.active { - border-bottom: 1px solid #21b799; - opacity: 1; - filter: alpha(opacity=100); +.o_main_header.o_inverted:not(.o_scrolled) .o_sub_nav_actions > li:last-child { + margin-right: 0; } -.content-switcher:hover > ul > li { +.o_main_header.o_scrolled .o_sub_nav #o_doc_title { opacity: 1; filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); + -webkit-transition: opacity 1s, transform 0.3s; + -o-transition: opacity 1s, transform 0.3s; + transition: opacity 1s, transform 0.3s; } -.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; +.o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions { + margin-left: 10px; } -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; +.o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions:first-of-type { + margin-right: -25px; } -#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; +.o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions > li { + background: rgba(136, 136, 136, 0.1); + margin-right: 1px; } -#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; +.o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions > li:last-child { + margin-right: 0; } #thinking-modular > .clearfix.themes, #thinking-modular > .dl-horizontal dd.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; } } +.headings-bordered () { + padding-bottom: @margin-base; + border-bottom: 2px solid #f4f6f7; +} + +article.doc-body { + + // 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; -h3, .h3, h4, .h4, h5, h6, .h5, .h6 { - font-weight: @fw_regular; - b, strong, a { - font-weight: @fw_medium; + &: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(); + } + } + } } -} -h4, .h4, h5, h6, .h5, .h6 { - margin-top: @line-height-computed; - margin-bottom: (@line-height-computed / 3); -} -// Lists -// ---------------------------------------- + // Typography components + > section { + line-height: 26px; + } -ul, ol { - &:not(:empty) { - margin-bottom: (@line-height-computed / 2); + a, a:hover { + text-decoration: underline; } - ul, ol { - &:not(:empty) { - margin-bottom: (@line-height-computed / 3); + + 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: -- cgit v1.2.3