From 4203285f93ec2bbbc5175395213cc2f2b553aa57 Mon Sep 17 00:00:00 2001 From: "kosta (kts)" Date: Mon, 10 Feb 2020 11:27:26 +0100 Subject: [PATCH] [REF] port developer doc's design Task #2188277 --- _extensions/odoo/layout.html | 43 +- _extensions/odoo/static/aside.less | 304 +-- _extensions/odoo/static/components.less | 516 ++++ _extensions/odoo/static/doc.js | 391 +-- _extensions/odoo/static/header.less | 2 +- _extensions/odoo/static/index.less | 114 + _extensions/odoo/static/layout.less | 316 +-- _extensions/odoo/static/mixins.less | 123 +- _extensions/odoo/static/print.less | 4 - _extensions/odoo/static/style.css | 3007 ++++++++++------------- _extensions/odoo/static/style.less | 590 +---- _extensions/odoo/static/typography.less | 170 +- _extensions/odoo/static/variables.less | 25 +- 13 files changed, 2724 insertions(+), 2881 deletions(-) create mode 100644 _extensions/odoo/static/components.less create mode 100644 _extensions/odoo/static/index.less diff --git a/_extensions/odoo/layout.html b/_extensions/odoo/layout.html index 6eba82ada..d2c155ac4 100644 --- a/_extensions/odoo/layout.html +++ b/_extensions/odoo/layout.html @@ -201,16 +201,6 @@ Start Now - - + + @@ -247,10 +247,9 @@ {% else %} {% set container = 'container' %} {% endif %} -
-
+
{% if pagename != master_doc %} -
+
{% if 'has-toc' not in meta and not (pagename in toc) %} {% endif %} -
+
{% endif %} {% block body %} {% endblock %} {% if pagename != master_doc %}
@@ -271,7 +270,6 @@ {% endif %}
-
@@ -311,29 +309,33 @@
Services
-
+
About us
@@ -362,3 +364,4 @@
{%- endblock -%} + diff --git a/_extensions/odoo/static/aside.less b/_extensions/odoo/static/aside.less index 610ab5fad..a98de73cd 100644 --- a/_extensions/odoo/static/aside.less +++ b/_extensions/odoo/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); } } -} \ No newline at end of file +} + +#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); + } +} diff --git a/_extensions/odoo/static/components.less b/_extensions/odoo/static/components.less new file mode 100644 index 000000000..678ac4bce --- /dev/null +++ b/_extensions/odoo/static/components.less @@ -0,0 +1,516 @@ +// ================================================ +// ================ 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); + .o-gradient(); + + @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); +} diff --git a/_extensions/odoo/static/doc.js b/_extensions/odoo/static/doc.js index 7d86eded5..768dcc8f2 100644 --- a/_extensions/odoo/static/doc.js +++ b/_extensions/odoo/static/doc.js @@ -1,6 +1,15 @@ (function ($) { - $(document).ready(function () { + $(function () { + + // -- Initialize fallbacks for requestAnimationFrame + window.requestAnimationFrame = window.requestAnimationFrame + || window.webkitRequestAnimationFrame + || window.mozRequestAnimationFrame + || window.msRequestAnimationFrame + || window.oRequestAnimationFrame + || function (callback) { setTimeout(callback, 10); }; + // ======= Define variables ======= // ================================= @@ -12,14 +21,33 @@ win_w = $win.width(); // -- Main elements - var $body = $('body'), - $header = $body.find('> header'), - $sub_nav = $header.find(".o_sub_nav"); - $wrap = $body.find('> #wrap'), - $card_top = $wrap.find('> .card.top'), - $card_top_t = $card_top.find('> .container'), - $main = $wrap.find('main'), - $footer = $body.find('> footer'); + var $body = $('body'), + $header = $body.find('> header'), + $sub_nav = $header.find(".o_sub_nav"), + $wrap = $body.find('> #wrap'), + $main = $wrap.find('main'), + $footer = $body.find('> footer'); + + // -- Detect page type + var page_type = (function () { + if ($wrap.hasClass('index')) { + return 'index'; + } else if ($main.find('article').hasClass('doc-tocindex-category')){ + return 'category-index'; + } else { + return 'article'; + } + })(); + + // -- CP > "Card Top" + var $cp = $wrap.find('> .card.top'), + $cp_image = $cp.find('> .card-img'), + $cp_text = $cp.find('> .container'), + + cp_h = $cp.outerHeight(), + has_cp_image = $cp_image.length > 0, + cp_image_alpha = has_cp_image ? $cp_image.css('opacity') : undefined, + cp_end_point = has_cp_image ? cp_h/2 : undefined; // -- Floating action var $mask = $body.find('#mask'), @@ -27,37 +55,34 @@ $float_menu = $body.find("#floating_action_menu"); // -- Elements' heights - var body_h = $body.height(), - header_h = $header.outerHeight(), - sub_nav_h = $sub_nav.height(); + var body_h = $body.height(), + header_h = $header.outerHeight(), + main_h = $main.height(), + sub_nav_h = $sub_nav.height(); // -- Aside var $aside = $main.find('aside'), has_aside = $aside.length > 0, - $aside_nav = undefined; - aside_links = undefined; + $aside_nav = has_aside ? $aside.find('> .navbar-aside') : undefined, + aside_links = has_aside ? $aside_nav.find("li > a") : undefined; + - if (has_aside) { - $aside_nav = $aside.find('> .navbar-aside'); - aside_links = $aside_nav.find("li > a"); - } // ======= Affix ================= // =============================== - function set_affix(body_h) { - var aside_offset = $aside.offset().top - sub_nav_h, - aside_width = $aside.width(), - main_bottom = 40; + function set_affix() { + var aside_offset_top = $aside.offset().top - sub_nav_h, + aside_offset_bot = parseInt($wrap.css('padding-bottom')), + aside_width = $aside.width(); - $aside_nav.css('width', aside_width); - $aside_nav.affix({ - target: window, + $aside.css('height', main_h); + $aside_nav.css('width', aside_width).affix({ offset: { - top : aside_offset, - bottom : main_bottom + top : aside_offset_top, + bottom : aside_offset_bot, } }); - }; + } // ======= Footer animations ===== // =============================== @@ -67,22 +92,22 @@ if (!footer_effect) { footer_stop(); return; - }; + } $footer.toggleClass('o_footer_effect', footer_effect); $body.css('padding-bottom', $footer.outerHeight()); - var checkIfSearch = function(e) { + var checkIfSearch = function (e) { if ((e.ctrlKey || e.metaKey) && String.fromCharCode(e.which).toLowerCase() === 'f') { footer_stop(); } }; - $win.on('keydown.footer', function(e) { + $win.on('keydown.footer', function (e) { checkIfSearch(e); }); }; - var footer_stop = function() { + var footer_stop = function () { $footer.removeClass('o_footer_effect'); $body.css('padding-bottom', 0); $win.off('keydown.footer'); @@ -92,24 +117,59 @@ // ======= Docs Functions ========== // ================================= // -- Layouting - var layouting = function () { - if ($main.hasClass("index")) { - $main.find("#index .index-tree > .row").each(function() { - var childs = $(this).find(".col-md-3"); - if (childs.length == 2) { - childs.removeClass("col-md-3").addClass("col-md-6"); - } - if (childs.length == 3) { - childs.removeClass("col-md-3").addClass("col-md-4"); - } - }) - $(".floating_action_container").remove(); + var init = function () { + var $floating_container = $body.find("> .floating_action_container"); + + // Adapt Title font size according to its length + $cp_text + .toggleClass('o_short_title', $cp_text.text().trim().length < 15) + .toggleClass('o_long_title', $cp_text.text().trim().length > 45); + + if (page_type == 'index') { + var half_cols_selector = '.tutorials,.api'; + + $main.find("#index .index-tree").find(half_cols_selector) + .wrap('
') + .find('.col-md-3').removeClass('col-md-3 col-sm-6').addClass('col-sm-12 col-md-6'); + + var half_cols_els = $main.find(".o_half_col"); + for(var i = 0; i < half_cols_els.length; i+=2) { + half_cols_els.slice(i, i+2).wrapAll("
"); + } } - if (has_aside) { $aside_nav.find("li").has("ul").addClass("parent"); }; - } + + if (page_type == 'index' || page_type == 'category-index') { + $floating_container.add($mask).remove(); + $main.toggleClass('o_slim_page', page_type == 'category-index'); + } + + if (page_type == 'article') { + attach_permalink_markers(); + + // Hide empty-permalink first sections + var $f_s = $main.find('article.doc-body > section:first-child'); + $f_s.toggleClass('hidden', $f_s[0].childElementCount == 1 && $f_s.children().is('i:empty')); + + if (has_aside) { + if (aside_links.length < 2) { + has_aside = false; + $main.addClass("o_aside_removed"); + $floating_container.add($mask).add($aside).remove(); + return; + } + + floating_menu_layout(); + set_scroll_to(aside_links); + ripple_animation(aside_links); + $aside_nav.find("li").has("ul").addClass("parent"); + } + } + + bind_window_events(); + }; // -- Float action menu - var floating_menu_layout = function() { + var floating_menu_layout = function () { var lis = $aside_nav.find("> ul > li").clone(true) .addClass("ripple") .css({ @@ -117,53 +177,46 @@ overflow: 'hidden' }); lis.find("ul").remove().end() - .find("a").removeClass("ripple").on("click", function() { - floating_menu_toggle(); + .find("a").removeClass("ripple").on("click", function () { + _toggle_float(); }); $float_menu.find(".content").empty().append(lis); $float.add($mask).on("click", function () { - floating_menu_toggle(); + _toggle_float(); return false; }); - } - var floating_menu_toggle = function() { - $float.toggleClass("active"); - setTimeout(function() { - $float_menu.toggleClass("active"); - $mask.toggleClass("active"); - }, 300); }; // -- Scroll To - var scroll_to = function(el_list) { - var offset = 80; - el_list.each(function() { - var $link = $(this), - href = $link.attr("href"); + var set_scroll_to = function (el_list) { + el_list.each(function () { + var $link = $(this), + target_id = $link.attr("href"); - $link.on("click", function() { - var val = $(href).offset().top - 60; - $('html, body').animate({ - scrollTop: val - }, 400); + $link.on("click", function () { $aside_nav.find("li").removeClass("active"); $link.parents("li").addClass("active"); - window.location.hash = $link.prop('hash'); + _scroll_and_set_hash(target_id); return false; - }) - }) - } + }); + }); + + $body.scrollspy({ + target: 'aside', + offset: 200, + }); + }; // -- Ripple buttons - var ripple_animation = function(el_list) { - el_list.each(function() { + var ripple_animation = function (el_list) { + el_list.each(function () { var btn = $(this); btn .css({ position: 'relative', overflow: 'hidden' }) - .bind('mousedown', function(e) { + .bind('mousedown', function (e) { var ripple; if (btn.find('.inner-ripple').length === 0) { ripple = $(''); @@ -186,43 +239,17 @@ top: y + 'px', left: x + 'px' }).addClass('inner-ripple-animated'); - setTimeout(function() { + setTimeout(function () { ripple.removeClass('inner-ripple-animated'); }, 351); }); }); }; - // -- Cards animation - var cards_animate = function(type, speed) { - type = type || 'in'; - speed = speed || 2000; - var $container = $("main.index"), - $cards = $container.find(".card"), - $titles = $container.find("h2"); - - $cards.each(function() { - var $card = $(this), - cardOffset = this.getBoundingClientRect(), - offset = cardOffset.left * 0.8 + cardOffset.top, - delay = parseFloat(offset / speed).toFixed(2); - $card.css("transition-delay", delay + "s"); - }); - - if (type === "in") { - $titles.fadeTo(0, 0); - $titles.fadeTo(1000, 1); - $container.addClass("animating"); - } else { - $titles.fadeTo(300, 0); - $container.removeClass("animating"); - } - }; - // -- Header buttons var header_buttons = function () { var timer; - $header.on('click', '.o_primary_nav .dropdown-toggle', function(e) { + $header.on('click', '.o_primary_nav .dropdown-toggle', function (e) { e.preventDefault(); var $a = $(this); @@ -233,12 +260,12 @@ if ($a.closest('.o_primary_nav').children('.open').length > 0) { $header.addClass("o_sub_opened"); } else { - timer = setTimeout(function() { + timer = setTimeout(function () { $header.removeClass("o_sub_opened"); }, 200); } }); - $header.on('click', '.o_primary_nav .o_secondary_nav', function(e) { + $header.on('click', '.o_primary_nav .o_secondary_nav', function (e) { if (e.target === e.currentTarget) { $header.find('.open').removeClass('open'); $header.find('.o_sub_opened').andSelf().removeClass('o_sub_opened'); @@ -246,28 +273,53 @@ }); // -- Mobile menu opening - $header.on('click', '.o_mobile_menu_toggle', function(e) { + $header.on('click', '.o_mobile_menu_toggle', function (e) { e.preventDefault(); $(this).find('i').toggleClass('fa-bars fa-times'); $header.toggleClass('o_mobile_menu_opened'); }); }; - var card_top_animation = function (win_top){ - var scrollFactor = 1.6, - bannerHeight = Math.max(450, $card_top.outerHeight(true) - 60), - top = Math.min(win_top, bannerHeight/scrollFactor), - base_value = top * (scrollFactor - 1), - opacity = top/bannerHeight * scrollFactor; + // -- Attach permalink markers to sections' title + var attach_permalink_markers = function () { + $main.find('article.doc-body > section').each( function () { + var $section = $(this), + $title = $section.find('> h2, > h3, > h4, > h5, > h6'), + target_id = $section.attr('id'), + $icon = $('').addClass('mdi-content-link'); - $card_top.css('transform', 'translateY(' + base_value + 'px)'); - $card_top_t.css({ - 'transform' : 'translateY( -' + ( base_value - (top/2)) + 'px)', - 'opacity' : 1 - opacity + if ($title.length <= 0) { + return; + } + + $title.addClass('o_has_permalink_marker').append($icon); + + $icon.on('click', function () { + _scroll_and_set_hash("#" + target_id); + + $title.addClass('o_marked').delay(1000).queue(function (){ + $title.removeClass('o_marked').dequeue(); + }); + return false; + }); }); - } + }; - $(".content-switcher").each(function(index, switcher) { + var cp_animation = function (win_top, cp_end_point){ + var top = Math.min(win_top, cp_h); + + $cp_image.css({ + 'opacity' : cp_image_alpha - (top * (cp_image_alpha/cp_end_point)), + 'transform' : 'scale(' + (1 + (top * (0.1/cp_end_point))) +')' + }); + + $cp_text.css({ + 'transform' : 'translateY(' + (top/4) + 'px)', + 'opacity' : 1 - (top/cp_h) + }); + }; + + $(".content-switcher").each(function (index, switcher) { var $switcher = $(switcher), $links = $switcher.find('> ul > li'), $tabs = $switcher.find('> .tabs > *'), @@ -278,66 +330,77 @@ $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/_extensions/odoo/static/header.less b/_extensions/odoo/static/header.less index dcd5ae0fb..ab5afd13b 100644 --- a/_extensions/odoo/static/header.less +++ b/_extensions/odoo/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/_extensions/odoo/static/index.less b/_extensions/odoo/static/index.less new file mode 100644 index 000000000..9d13250cc --- /dev/null +++ b/_extensions/odoo/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/_extensions/odoo/static/layout.less b/_extensions/odoo/static/layout.less index c350defa2..c826e7695 100644 --- a/_extensions/odoo/static/layout.less +++ b/_extensions/odoo/static/layout.less @@ -1,214 +1,164 @@ -.pseudo-col(){ - position: relative; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; - float: left; - width: 100%; -} - -.code-col(){ - content: ""; - background: @doc_code-bg; - .box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); - position: absolute; - width: 43%; - height: 100%; - top: 0; - right: 0; -} +// ================================================ +// ================ Layout ======================= +// ================================================ +// Bootrstrap adaptations +// ------------------------------------------------------------------ body, header { - position: relative; -} - -// Index layout -#wrap { - > .container.index { - background-color: @gray-lightest; - width: 100%; position: relative; - - > .index { - .container; - } - } } -#main_title { - margin: 10px; - @media (min-width:@screen-md-min) { - margin: 0 0 9px 0; - } -} - - .container .container { - max-width: 100%; - padding:0; - margin:0; + max-width: 100%; + padding: 0; + margin: 0; } -article.doc-content *[class^="col-"] { - padding:0; +.img-responsive { + display: inline-block; } -main{ - - aside, article.doc-body, .doc-content, .doc-aside { - .pseudo-col(); - } - .doc-content, .doc-aside { - position:relative; - } - aside { - width: 25%; - max-width: 300px; - position:static; - padding:0; - display:block; - float:left; - @media (max-width:@screen-md-min) { - display: none; - } - } - article.doc-body { - background: @doc_paper; - border-left: 1px solid @gray-lighter; - padding: 15px 30px; - @media (min-width: @screen-md-min) { - width: 75%; - &.doc-toc { - width: 100%; - } - } - > *{ - max-width: 100%; - } - } - +.img-responsive.center-block { + display: block; } -main.has_code_col{ - .container; +article.doc-content *[class*="col-"] { + padding: 0; +} - aside { - display: none; - } - article.doc-body { - width: 100%; +// Main Components +// ------------------------------------------------------------------ +#wrap { + z-index: 1; + position: relative; + background: @gray-lightest; + padding-bottom: 40px; +} - > *{ - max-width: 100%; +main { + position: relative; + display: block; + + .o_content { + background-color: @doc_paper; + .deep-1; + + @media (min-width: @screen-sm-min) { + margin: -40px auto 0; + border-radius: 2px; + } } - section { - position: relative; - display:block; - float: left; - width: 100%; + + article.doc-body { + .pseudo-col(); + padding: 15px; + + @media (min-width: @screen-sm-min) { + padding: 15px 30px; + } + + @media (min-width: @screen-md-min) { + max-width: 700px; + } + + @media (min-width: @screen-lg-min) { + margin-left: 7%; + margin-top: 20px; + } + + > * { + max-width: 100%; + } } +} + +main.o_aside_removed, main.o_slim_page { + max-width: 700px; @media (min-width: @screen-lg-min) { - width: 100%; - padding-right: 0; - &:before { - .code-col(); - } - section { - > * { - width: 54.633333%; - max-width: 600px; - float: left; - clear: left; - } - > h1, > h2, > h3, > h4, > h5, > h6 { - width: 100%; - float: none; - clear: none; - } - .doc-aside { - width: 41%; - float: none; - clear: none; - margin-right: 15px; - margin-left: 57%; - - .content-switcher{ - margin-top:0; - > ul { - margin-bottom: 0; - } - - > ul > li { - color: @gray-light; - } - } - } - } + max-width: 760px; + } + + article.doc-body { + @media (min-width: @screen-md-min) { + padding-left: 30px; + } } - } } -main.index .toctree-wrapper{ - @media screen and(min-width: @screen-md){ +main.has_code_col { + max-width: 700px; - > .row:first-child { //trigg first section - > .col-md-3:nth-child(3), > .col-md-3:nth-child(5) { //trig cards (title + 2, title + 4) - margin-right: 50%; - } + @media (min-width: @screen-lg-min) { + max-width: @container-lg; } - position: relative; - .toc-single-entry{ - position: absolute; - top: 0; - right: 0; - width: 50%; - padding-right: floor((@grid-gutter-width / 2)); // compensate bootstrap default gutter - > .col-md-3 { - width: 100%; - } - > *[class^="col-"] { - padding-left: 0; //remove Bootstrap default gutter - } - .card { - min-height: (@card_min-height * 2 ) + @card_margin-bottom; - } + + .doc-aside, .doc-content { + .pseudo-col(); + + @media (max-width: @screen-md-max) { + padding: 0; + } + } + + aside { + display: none; + } + + article.doc-body { + > section { + max-width: 100%; + } + + @media (min-width: @screen-lg-min) { + width: 100%; + max-width: none; + margin:0; + + &:before { + .code-col(); + } + + > section { + position: relative; + display: block; + float: left; + width: 100%; + + > * { + width: 48%; + float: left; + clear: left; + } + + > h2, > h3, > h4, > h5, > h6, > h1 { + width: 48%; + float: none; + clear: none; + } + + .doc-aside { + width: 49%; + float: none; + clear: none; + margin-left: 51%; + color: @gray-light; + font-size: 14px; + line-height: 1.45; + + pre { + font-size: 12px; + } + } + } + + } } - } } article.doc-toc .toctree-wrapper > ul > li > span { - display: block; - font-size: 28px; -} - -.code-fields{ - display: table; - width: 100%; - .code-field{ - display: table-row; - } - .code-field-body{ display: block; - padding-left: 15px; - @media screen and (min-width: @screen-md-min){ - display: table-cell; - padding-left: 0; - } - } - .code-field-name{ - width:auto; - display:block; - @media screen and (min-width: @screen-md-min){ - width:20%; - padding-right: 20px; - display: table-cell; - } - } - ul { - margin: .2em 0; - padding: 0; - } + font-size: 28px; } diff --git a/_extensions/odoo/static/mixins.less b/_extensions/odoo/static/mixins.less index 7c11317f0..151791eb0 100644 --- a/_extensions/odoo/static/mixins.less +++ b/_extensions/odoo/static/mixins.less @@ -2,6 +2,25 @@ // ================ Mixins ======================= // ================================================ +// Code column layout mixins +// ------------------------------------------------------------------ +.pseudo-col() { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + float: left; + width: 100%; +} + +.code-col() { + content: ""; + background: @doc_code-bg; + .box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); + .o-position-absolute(0,0); + .size(50%, 100%); +} + // Utilities // ------------------------------------------------------------------ .o-no-select { @@ -131,65 +150,11 @@ } } -// Elevation Shadows -// Visual cue indicating the amount of separation between surfaces. -// An object’s elevation determines the appearance of its shadow. -// ------------------------------------------------------------------ -.deep-1-shadow() { +// Shadows +// -------------------------------------------------- +.deep-1() { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); } -.deep-2-shadow() { - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} -.deep-3-shadow() { - box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09); -} -.deep-4-shadow() { - box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07); -} -.deep-5-shadow() { - box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05); -} -.deep-transition() { - .o-transition(box-shadow, 0.3s, @o-ease); -} - -.deep-1() { - .deep-1-shadow(); - - &.deep_hover:hover { - .deep-transition(); - .deep-2-shadow(); - } -} -.deep-2() { - .deep-2-shadow(); - - &.deep_hover:hover { - .deep-transition(); - .deep-3-shadow(); - } -} -.deep-3() { - .deep-3-shadow(); - - &.deep_hover:hover { - .deep-transition(); - .deep-4-shadow(); - } -} -.deep-4() { - .deep-4-shadow(); - - &.deep_hover:hover { - .deep-transition(); - .deep-5-shadow(); - } -} -.deep-5() { - .deep-5-shadow(); -} - .transform(@args) { -webkit-transform : @args; @@ -199,7 +164,8 @@ transform : @args; } -//-- Material Design Icons +// Material Design Icons +// -------------------------------------------------- .mdi-icon(@content) { font-family: 'Material-Design-Icons'; content: @content; @@ -210,13 +176,8 @@ -moz-osx-font-smoothing: grayscale; } -.keyframes(@name; @arguments) { - @-moz-keyframes @name { @arguments(); } - @-webkit-keyframes @name { @arguments(); } - @keyframes @name { @arguments(); } -} - -//-- Documentation Dropdown style +// Documentation Dropdown style +// -------------------------------------------------- .o-doc-dropdown { > a.dropdown-toggle { padding: 0 5px 0 10px; @@ -314,35 +275,3 @@ } } } - - -// Shadows -// -------------------------------------------------- - -.shadow-none { - .box-shadow(none); -} - -.deep-1 { - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); -} -.deep-2 { - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} -.deep-3 { - box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09); -} -.deep-4 { - box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07); -} -.deep-5 { - box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05); -} - -// overwrite bootstrap inline forcing -.img-responsive { - display: inline-block; -} -.img-responsive.center-block { - display: block; -} diff --git a/_extensions/odoo/static/print.less b/_extensions/odoo/static/print.less index 3e7dfc8f3..997ba7139 100644 --- a/_extensions/odoo/static/print.less +++ b/_extensions/odoo/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/_extensions/odoo/static/style.css b/_extensions/odoo/static/style.css index 1a99320ae..1828b940c 100644 --- a/_extensions/odoo/static/style.css +++ b/_extensions/odoo/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%; @@ -182,30 +181,6 @@ td, th { padding: 0; } - -/* footnotes */ -.footnote-ref { - vertical-align: baseline; - position: relative; - top: -0.4em; - line-height: 0; - font-size: 90%; -} -.footnote { - margin: 15px 0; - width: 100%; - border: 1px solid #eee; - background: #fdfdfd; - font-size: 0.9em; -} -.footnote + .footnote { - margin-top: -15px; - border-top: none; -} -.footnote + :not(.footnote) { - margin-top: 1em; -} - /*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ @media print { *, @@ -1100,7 +1075,7 @@ body { font-size: 15px; line-height: 1.42857143; color: #666c75; - background-color: #f9f9f9; + background-color: #F9F9F9; } input, button, @@ -1111,7 +1086,7 @@ textarea { line-height: inherit; } a { - color: #875a7b; + color: #875A7B; text-decoration: none; } a:hover, @@ -1146,8 +1121,8 @@ img { .img-thumbnail { padding: 4px; line-height: 1.42857143; - background-color: #f9f9f9; - border: 1px solid #dddddd; + background-color: #F9F9F9; + border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; @@ -1163,7 +1138,7 @@ hr { margin-top: 21px; margin-bottom: 21px; border: 0; - border-top: 1px solid #f2f2f2; + border-top: 1px solid #F2F2F2; } .sr-only { position: absolute; @@ -1323,7 +1298,7 @@ small, mark, .mark { background-color: #fcf8e3; - padding: .2em; + padding: 0.2em; } .text-left { text-align: left; @@ -1426,7 +1401,7 @@ a.bg-danger:focus { .page-header { padding-bottom: 9.5px; margin: 42px 0 21px; - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid #F2F2F2; } ul, ol { @@ -1494,7 +1469,7 @@ blockquote { padding: 10.5px 21px; margin: 0 0 21px; font-size: 18.75px; - border-left: 5px solid #f2f2f2; + border-left: 5px solid #F2F2F2; } blockquote p:last-child, blockquote ul:last-child, @@ -1518,7 +1493,7 @@ blockquote .small:before { blockquote.pull-right { padding-right: 15px; padding-left: 0; - border-right: 5px solid #f2f2f2; + border-right: 5px solid #F2F2F2; border-left: 0; text-align: right; } @@ -1559,8 +1534,8 @@ code { kbd { padding: 2px 4px; font-size: 90%; - color: #ffffff; - background-color: #333333; + color: #fff; + background-color: #333; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); } @@ -1578,9 +1553,9 @@ pre { line-height: 1.42857143; word-break: break-all; word-wrap: break-word; - color: #6b6d70; + color: #6B6D70; background-color: #f5f5f5; - border: 1px solid #cccccc; + border: 1px solid #ccc; border-radius: 4px; } pre code { @@ -1626,13 +1601,71 @@ pre code { margin-left: -15px; margin-right: -15px; } -.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { +.col-xs-1, +.col-sm-1, +.col-md-1, +.col-lg-1, +.col-xs-2, +.col-sm-2, +.col-md-2, +.col-lg-2, +.col-xs-3, +.col-sm-3, +.col-md-3, +.col-lg-3, +.col-xs-4, +.col-sm-4, +.col-md-4, +.col-lg-4, +.col-xs-5, +.col-sm-5, +.col-md-5, +.col-lg-5, +.col-xs-6, +.col-sm-6, +.col-md-6, +.col-lg-6, +.col-xs-7, +.col-sm-7, +.col-md-7, +.col-lg-7, +.col-xs-8, +.col-sm-8, +.col-md-8, +.col-lg-8, +.col-xs-9, +.col-sm-9, +.col-md-9, +.col-lg-9, +.col-xs-10, +.col-sm-10, +.col-md-10, +.col-lg-10, +.col-xs-11, +.col-sm-11, +.col-md-11, +.col-lg-11, +.col-xs-12, +.col-sm-12, +.col-md-12, +.col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } -.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { float: left; } .col-xs-12 { @@ -1789,7 +1822,18 @@ pre code { margin-left: 0%; } @media (min-width: 768px) { - .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12 { float: left; } .col-sm-12 { @@ -1947,7 +1991,18 @@ pre code { } } @media (min-width: 992px) { - .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12 { float: left; } .col-md-12 { @@ -2105,7 +2160,18 @@ pre code { } } @media (min-width: 1200px) { - .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12 { float: left; } .col-lg-12 { @@ -2288,11 +2354,11 @@ th { padding: 8px; line-height: 1.42857143; vertical-align: top; - border-top: 1px solid #dddddd; + border-top: 1px solid #ddd; } .table > thead > tr > th { vertical-align: bottom; - border-bottom: 2px solid #dddddd; + border-bottom: 2px solid #ddd; } .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, @@ -2303,10 +2369,10 @@ th { border-top: 0; } .table > tbody + tbody { - border-top: 2px solid #dddddd; + border-top: 2px solid #ddd; } .table .table { - background-color: #f9f9f9; + background-color: #F9F9F9; } .table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, @@ -2317,7 +2383,7 @@ th { padding: 5px; } .table-bordered { - border: 1px solid #dddddd; + border: 1px solid #ddd; } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, @@ -2325,7 +2391,7 @@ th { .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { - border: 1px solid #dddddd; + border: 1px solid #ddd; } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { @@ -2463,7 +2529,7 @@ table th[class*="col-"] { margin-bottom: 15.75px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; - border: 1px solid #dddddd; + border: 1px solid #ddd; } .table-responsive > .table { margin-bottom: 0; @@ -2515,7 +2581,7 @@ legend { margin-bottom: 21px; font-size: 22.5px; line-height: inherit; - color: #6b6d70; + color: #6B6D70; border: 0; border-bottom: 1px solid #e5e5e5; } @@ -2569,9 +2635,9 @@ output { font-size: 15px; line-height: 1.42857143; color: #888888; - background-color: #ffffff; + background-color: #fff; background-image: none; - border: 1px solid #cccccc; + border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); @@ -2586,14 +2652,14 @@ output { box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); } .form-control::-moz-placeholder { - color: #999999; + color: #999; opacity: 1; } .form-control:-ms-input-placeholder { - color: #999999; + color: #999; } .form-control::-webkit-input-placeholder { - color: #999999; + color: #999; } .form-control::-ms-expand { border: 0; @@ -2602,7 +2668,7 @@ output { .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - background-color: #f2f2f2; + background-color: #F2F2F2; opacity: 1; } .form-control[disabled], @@ -3048,7 +3114,7 @@ select[multiple].input-lg { .btn:hover, .btn:focus, .btn.focus { - color: #333333; + color: #333; text-decoration: none; } .btn:active, @@ -3072,25 +3138,25 @@ fieldset[disabled] a.btn { pointer-events: none; } .btn-default { - color: #333333; - background-color: #ffffff; - border-color: #cccccc; + color: #333; + background-color: #fff; + border-color: #ccc; } .btn-default:focus, .btn-default.focus { - color: #333333; + color: #333; background-color: #e6e6e6; border-color: #8c8c8c; } .btn-default:hover { - color: #333333; + color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { - color: #333333; + color: #333; background-color: #e6e6e6; border-color: #adadad; } @@ -3103,7 +3169,7 @@ fieldset[disabled] a.btn { .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus { - color: #333333; + color: #333; background-color: #d4d4d4; border-color: #8c8c8c; } @@ -3121,33 +3187,33 @@ fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus { - background-color: #ffffff; - border-color: #cccccc; + background-color: #fff; + border-color: #ccc; } .btn-default .badge { - color: #ffffff; - background-color: #333333; + color: #fff; + background-color: #333; } .btn-primary { - color: #ffffff; + color: #fff; background-color: #21b799; border-color: #1da187; } .btn-primary:focus, .btn-primary.focus { - color: #ffffff; + color: #fff; background-color: #198c75; border-color: #0a352d; } .btn-primary:hover { - color: #ffffff; + color: #fff; background-color: #198c75; border-color: #146e5c; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { - color: #ffffff; + color: #fff; background-color: #198c75; border-color: #146e5c; } @@ -3160,7 +3226,7 @@ fieldset[disabled] .btn-default.focus { .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus { - color: #ffffff; + color: #fff; background-color: #146e5c; border-color: #0a352d; } @@ -3183,28 +3249,28 @@ fieldset[disabled] .btn-primary.focus { } .btn-primary .badge { color: #21b799; - background-color: #ffffff; + background-color: #fff; } .btn-success { - color: #ffffff; - background-color: #50af51; + color: #fff; + background-color: #50AF51; border-color: #489e49; } .btn-success:focus, .btn-success.focus { - color: #ffffff; + color: #fff; background-color: #408c41; border-color: #204620; } .btn-success:hover { - color: #ffffff; + color: #fff; background-color: #408c41; border-color: #357435; } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { - color: #ffffff; + color: #fff; background-color: #408c41; border-color: #357435; } @@ -3217,7 +3283,7 @@ fieldset[disabled] .btn-primary.focus { .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus { - color: #ffffff; + color: #fff; background-color: #357335; border-color: #204620; } @@ -3235,33 +3301,33 @@ fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus { - background-color: #50af51; + background-color: #50AF51; border-color: #489e49; } .btn-success .badge { - color: #50af51; - background-color: #ffffff; + color: #50AF51; + background-color: #fff; } .btn-info { - color: #ffffff; - background-color: #4b9eb6; + color: #fff; + background-color: #4B9EB6; border-color: #438fa5; } .btn-info:focus, .btn-info.focus { - color: #ffffff; + color: #fff; background-color: #3b7f93; border-color: #1e404a; } .btn-info:hover { - color: #ffffff; + color: #fff; background-color: #3b7f93; border-color: #316979; } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { - color: #ffffff; + color: #fff; background-color: #3b7f93; border-color: #316979; } @@ -3274,7 +3340,7 @@ fieldset[disabled] .btn-success.focus { .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus { - color: #ffffff; + color: #fff; background-color: #316979; border-color: #1e404a; } @@ -3292,33 +3358,33 @@ fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus { - background-color: #4b9eb6; + background-color: #4B9EB6; border-color: #438fa5; } .btn-info .badge { - color: #4b9eb6; - background-color: #ffffff; + color: #4B9EB6; + background-color: #fff; } .btn-warning { - color: #ffffff; - background-color: #f0ad4e; + color: #fff; + background-color: #F0AD4E; border-color: #eea236; } .btn-warning:focus, .btn-warning.focus { - color: #ffffff; + color: #fff; background-color: #ec971f; border-color: #985f0d; } .btn-warning:hover { - color: #ffffff; + color: #fff; background-color: #ec971f; border-color: #d58512; } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { - color: #ffffff; + color: #fff; background-color: #ec971f; border-color: #d58512; } @@ -3331,7 +3397,7 @@ fieldset[disabled] .btn-info.focus { .btn-warning:active.focus, .btn-warning.active.focus, .open > .dropdown-toggle.btn-warning.focus { - color: #ffffff; + color: #fff; background-color: #d58512; border-color: #985f0d; } @@ -3349,33 +3415,33 @@ fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus { - background-color: #f0ad4e; + background-color: #F0AD4E; border-color: #eea236; } .btn-warning .badge { - color: #f0ad4e; - background-color: #ffffff; + color: #F0AD4E; + background-color: #fff; } .btn-danger { - color: #ffffff; - background-color: #d9534f; + color: #fff; + background-color: #D9534F; border-color: #d43f3a; } .btn-danger:focus, .btn-danger.focus { - color: #ffffff; + color: #fff; background-color: #c9302c; border-color: #761c19; } .btn-danger:hover { - color: #ffffff; + color: #fff; background-color: #c9302c; border-color: #ac2925; } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { - color: #ffffff; + color: #fff; background-color: #c9302c; border-color: #ac2925; } @@ -3388,7 +3454,7 @@ fieldset[disabled] .btn-warning.focus { .btn-danger:active.focus, .btn-danger.active.focus, .open > .dropdown-toggle.btn-danger.focus { - color: #ffffff; + color: #fff; background-color: #ac2925; border-color: #761c19; } @@ -3406,15 +3472,15 @@ fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus { - background-color: #d9534f; + background-color: #D9534F; border-color: #d43f3a; } .btn-danger .badge { - color: #d9534f; - background-color: #ffffff; + color: #D9534F; + background-color: #fff; } .btn-link { - color: #875a7b; + color: #875A7B; font-weight: normal; border-radius: 0; } @@ -3542,8 +3608,8 @@ tbody.collapse.in { list-style: none; font-size: 15px; text-align: left; - background-color: #ffffff; - border: 1px solid #cccccc; + background-color: #fff; + border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); @@ -3566,7 +3632,7 @@ tbody.collapse.in { clear: both; font-weight: normal; line-height: 1.42857143; - color: #6b6d70; + color: #6B6D70; white-space: nowrap; } .dropdown-menu > li > a:hover, @@ -3578,7 +3644,7 @@ tbody.collapse.in { .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { - color: #ffffff; + color: #fff; text-decoration: none; outline: 0; background-color: #21b799; @@ -3913,8 +3979,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { line-height: 1; color: #888888; text-align: center; - background-color: #f2f2f2; - border: 1px solid #cccccc; + background-color: #F2F2F2; + border: 1px solid #ccc; border-radius: 4px; } .input-group-addon.input-sm { @@ -3999,7 +4065,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; - background-color: #f2f2f2; + background-color: #F2F2F2; } .nav > li.disabled > a { color: #dcddde; @@ -4014,8 +4080,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { - background-color: #f2f2f2; - border-color: #875a7b; + background-color: #F2F2F2; + border-color: #875A7B; } .nav .nav-divider { height: 1px; @@ -4027,7 +4093,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { max-width: none; } .nav-tabs { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; } .nav-tabs > li { float: left; @@ -4040,14 +4106,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn { border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { - border-color: #f2f2f2 #f2f2f2 #dddddd; + border-color: #F2F2F2 #F2F2F2 #ddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #888888; - background-color: #f9f9f9; - border: 1px solid #dddddd; + background-color: #F9F9F9; + border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; } @@ -4082,17 +4148,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { - border: 1px solid #dddddd; + border: 1px solid #ddd; } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { - border-bottom-color: #f9f9f9; + border-bottom-color: #F9F9F9; } } .nav-pills > li { @@ -4107,7 +4173,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { - color: #ffffff; + color: #fff; background-color: #21b799; } .nav-stacked > li { @@ -4150,17 +4216,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { - border: 1px solid #dddddd; + border: 1px solid #ddd; } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { - border-bottom-color: #f9f9f9; + border-bottom-color: #F9F9F9; } } .tab-content > .tab-pane { @@ -4505,7 +4571,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { border-color: #e7e7e7; } .navbar-default .navbar-brand { - color: #777777; + color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { @@ -4513,37 +4579,37 @@ select[multiple].input-group-sm > .input-group-btn > .btn { background-color: transparent; } .navbar-default .navbar-text { - color: #777777; + color: #777; } .navbar-default .navbar-nav > li > a { - color: #777777; + color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { - color: #333333; + color: #333; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { - color: #555555; + color: #555; background-color: #e7e7e7; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { - color: #cccccc; + color: #ccc; background-color: transparent; } .navbar-default .navbar-toggle { - border-color: #dddddd; + border-color: #ddd; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { - background-color: #dddddd; + background-color: #ddd; } .navbar-default .navbar-toggle .icon-bar { - background-color: #888888; + background-color: #888; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { @@ -4553,51 +4619,51 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #e7e7e7; - color: #555555; + color: #555; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { - color: #777777; + color: #777; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { - color: #333333; + color: #333; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { - color: #555555; + color: #555; background-color: #e7e7e7; } .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { - color: #cccccc; + color: #ccc; background-color: transparent; } } .navbar-default .navbar-link { - color: #777777; + color: #777; } .navbar-default .navbar-link:hover { - color: #333333; + color: #333; } .navbar-default .btn-link { - color: #777777; + color: #777; } .navbar-default .btn-link:hover, .navbar-default .btn-link:focus { - color: #333333; + color: #333; } .navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:focus { - color: #cccccc; + color: #ccc; } .navbar-inverse { - background-color: #222222; + background-color: #222; border-color: #080808; } .navbar-inverse .navbar-brand { @@ -4605,7 +4671,7 @@ fieldset[disabled] .navbar-default .btn-link:focus { } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { - color: #ffffff; + color: #fff; background-color: transparent; } .navbar-inverse .navbar-text { @@ -4616,30 +4682,30 @@ fieldset[disabled] .navbar-default .btn-link:focus { } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { - color: #ffffff; + color: #fff; background-color: transparent; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { - color: #ffffff; + color: #fff; background-color: #080808; } .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus { - color: #444444; + color: #444; background-color: transparent; } .navbar-inverse .navbar-toggle { - border-color: #333333; + border-color: #333; } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { - background-color: #333333; + background-color: #333; } .navbar-inverse .navbar-toggle .icon-bar { - background-color: #ffffff; + background-color: #fff; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { @@ -4649,7 +4715,7 @@ fieldset[disabled] .navbar-default .btn-link:focus { .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: #080808; - color: #ffffff; + color: #fff; } @media (max-width: 767px) { .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { @@ -4663,19 +4729,19 @@ fieldset[disabled] .navbar-default .btn-link:focus { } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { - color: #ffffff; + color: #fff; background-color: transparent; } .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { - color: #ffffff; + color: #fff; background-color: #080808; } .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { - color: #444444; + color: #444; background-color: transparent; } } @@ -4683,20 +4749,20 @@ fieldset[disabled] .navbar-default .btn-link:focus { color: #ffffff; } .navbar-inverse .navbar-link:hover { - color: #ffffff; + color: #fff; } .navbar-inverse .btn-link { color: #ffffff; } .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { - color: #ffffff; + color: #fff; } .navbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:focus { - color: #444444; + color: #444; } .breadcrumb { padding: 8px 15px; @@ -4711,7 +4777,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .breadcrumb > li + li:before { content: "/\00a0"; padding: 0 5px; - color: #cccccc; + color: #ccc; } .breadcrumb > .active { color: #dcddde; @@ -4732,9 +4798,9 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { padding: 6px 12px; line-height: 1.42857143; text-decoration: none; - color: #875a7b; - background-color: #ffffff; - border: 1px solid #dddddd; + color: #875A7B; + background-color: #fff; + border: 1px solid #ddd; margin-left: -1px; } .pagination > li:first-child > a, @@ -4754,8 +4820,8 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .pagination > li > span:focus { z-index: 2; color: #926485; - background-color: #f2f2f2; - border-color: #dddddd; + background-color: #F2F2F2; + border-color: #ddd; } .pagination > .active > a, .pagination > .active > span, @@ -4764,7 +4830,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 3; - color: #ffffff; + color: #fff; background-color: #21b799; border-color: #21b799; cursor: default; @@ -4776,8 +4842,8 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { color: #dcddde; - background-color: #ffffff; - border-color: #dddddd; + background-color: #fff; + border-color: #ddd; cursor: not-allowed; } .pagination-lg > li > a, @@ -4825,14 +4891,14 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .pager li > span { display: inline-block; padding: 5px 14px; - background-color: #ffffff; - border: 1px solid #dddddd; + background-color: #fff; + border: 1px solid #ddd; border-radius: 15px; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; - background-color: #f2f2f2; + background-color: #F2F2F2; } .pager .next > a, .pager .next > span { @@ -4847,24 +4913,24 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .pager .disabled > a:focus, .pager .disabled > span { color: #dcddde; - background-color: #ffffff; + background-color: #fff; cursor: not-allowed; } .label { display: inline; - padding: .2em .6em .3em; + padding: 0.2em 0.6em 0.3em; font-size: 75%; font-weight: bold; line-height: 1; - color: #ffffff; + color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; - border-radius: .25em; + border-radius: 0.25em; } a.label:hover, a.label:focus { - color: #ffffff; + color: #fff; text-decoration: none; cursor: pointer; } @@ -4890,28 +4956,28 @@ a.label:focus { background-color: #198c75; } .label-success { - background-color: #50af51; + background-color: #50AF51; } .label-success[href]:hover, .label-success[href]:focus { background-color: #408c41; } .label-info { - background-color: #4b9eb6; + background-color: #4B9EB6; } .label-info[href]:hover, .label-info[href]:focus { background-color: #3b7f93; } .label-warning { - background-color: #f0ad4e; + background-color: #F0AD4E; } .label-warning[href]:hover, .label-warning[href]:focus { background-color: #ec971f; } .label-danger { - background-color: #d9534f; + background-color: #D9534F; } .label-danger[href]:hover, .label-danger[href]:focus { @@ -4923,7 +4989,7 @@ a.label:focus { padding: 3px 7px; font-size: 13px; font-weight: bold; - color: #ffffff; + color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; @@ -4945,14 +5011,14 @@ a.label:focus { } a.badge:hover, a.badge:focus { - color: #ffffff; + color: #fff; text-decoration: none; cursor: pointer; } .list-group-item.active > .badge, .nav-pills > .active > a > .badge { - color: #875a7b; - background-color: #ffffff; + color: #875A7B; + background-color: #fff; } .list-group-item > .badge { float: right; @@ -4968,7 +5034,7 @@ a.badge:focus { padding-bottom: 30px; margin-bottom: 30px; color: inherit; - background-color: #f2f2f2; + background-color: #F2F2F2; } .jumbotron h1, .jumbotron .h1 { @@ -5011,8 +5077,8 @@ a.badge:focus { padding: 4px; margin-bottom: 21px; line-height: 1.42857143; - background-color: #f9f9f9; - border: 1px solid #dddddd; + background-color: #F9F9F9; + border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; @@ -5026,7 +5092,7 @@ a.badge:focus { a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { - border-color: #875a7b; + border-color: #875A7B; } .thumbnail .caption { padding: 9px; @@ -5138,7 +5204,7 @@ a.thumbnail.active { height: 100%; font-size: 13px; line-height: 21px; - color: #ffffff; + color: #fff; text-align: center; background-color: #21b799; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); @@ -5161,7 +5227,7 @@ a.thumbnail.active { animation: progress-bar-stripes 2s linear infinite; } .progress-bar-success { - background-color: #50af51; + background-color: #50AF51; } .progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); @@ -5169,7 +5235,7 @@ a.thumbnail.active { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-info { - background-color: #4b9eb6; + background-color: #4B9EB6; } .progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); @@ -5177,7 +5243,7 @@ a.thumbnail.active { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-warning { - background-color: #f0ad4e; + background-color: #F0AD4E; } .progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); @@ -5185,7 +5251,7 @@ a.thumbnail.active { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-danger { - background-color: #d9534f; + background-color: #D9534F; } .progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); @@ -5249,8 +5315,8 @@ a.thumbnail.active { display: block; padding: 10px 15px; margin-bottom: -1px; - background-color: #ffffff; - border: 1px solid #dddddd; + background-color: #fff; + border: 1px solid #ddd; } .list-group-item:first-child { border-top-right-radius: 4px; @@ -5263,18 +5329,18 @@ a.thumbnail.active { } a.list-group-item, button.list-group-item { - color: #555555; + color: #555; } a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading { - color: #333333; + color: #333; } a.list-group-item:hover, button.list-group-item:hover, a.list-group-item:focus, button.list-group-item:focus { text-decoration: none; - color: #555555; + color: #555; background-color: #f5f5f5; } button.list-group-item { @@ -5284,7 +5350,7 @@ button.list-group-item { .list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus { - background-color: #f2f2f2; + background-color: #F2F2F2; color: #dcddde; cursor: not-allowed; } @@ -5302,7 +5368,7 @@ button.list-group-item { .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; - color: #ffffff; + color: #fff; background-color: #21b799; border-color: #21b799; } @@ -5448,7 +5514,7 @@ button.list-group-item-danger.active:focus { } .panel { margin-bottom: 21px; - background-color: #ffffff; + background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); @@ -5482,7 +5548,7 @@ button.list-group-item-danger.active:focus { .panel-footer { padding: 10px 15px; background-color: #f5f5f5; - border-top: 1px solid #dddddd; + border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } @@ -5596,7 +5662,7 @@ button.list-group-item-danger.active:focus { .panel > .panel-body + .table-responsive, .panel > .table + .panel-body, .panel > .table-responsive + .panel-body { - border-top: 1px solid #dddddd; + border-top: 1px solid #ddd; } .panel > .table > tbody:first-child > tr:first-child th, .panel > .table > tbody:first-child > tr:first-child td { @@ -5673,37 +5739,37 @@ button.list-group-item-danger.active:focus { } .panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group { - border-top: 1px solid #dddddd; + border-top: 1px solid #ddd; } .panel-group .panel-footer { border-top: 0; } .panel-group .panel-footer + .panel-collapse .panel-body { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; } .panel-default { - border-color: #dddddd; + border-color: #ddd; } .panel-default > .panel-heading { - color: #6b6d70; + color: #6B6D70; background-color: #f5f5f5; - border-color: #dddddd; + border-color: #ddd; } .panel-default > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #dddddd; + border-top-color: #ddd; } .panel-default > .panel-heading .badge { color: #f5f5f5; - background-color: #6b6d70; + background-color: #6B6D70; } .panel-default > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #dddddd; + border-bottom-color: #ddd; } .panel-primary { border-color: #21b799; } .panel-primary > .panel-heading { - color: #ffffff; + color: #fff; background-color: #21b799; border-color: #21b799; } @@ -5712,7 +5778,7 @@ button.list-group-item-danger.active:focus { } .panel-primary > .panel-heading .badge { color: #21b799; - background-color: #ffffff; + background-color: #fff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #21b799; @@ -5842,14 +5908,14 @@ button.list-group-item-danger.active:focus { font-size: 22.5px; font-weight: bold; line-height: 1; - color: #000000; - text-shadow: 0 1px 0 #ffffff; + color: #000; + text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); } .close:hover, .close:focus { - color: #000000; + color: #000; text-decoration: none; cursor: pointer; opacity: 0.5; @@ -5904,8 +5970,8 @@ button.close { } .modal-content { position: relative; - background-color: #ffffff; - border: 1px solid #999999; + background-color: #fff; + border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); @@ -5920,7 +5986,7 @@ button.close { bottom: 0; left: 0; z-index: 1040; - background-color: #000000; + background-color: #000; } .modal-backdrop.fade { opacity: 0; @@ -6031,9 +6097,9 @@ button.close { .tooltip-inner { max-width: 200px; padding: 3px 8px; - color: #ffffff; + color: #fff; text-align: center; - background-color: #000000; + background-color: #000; border-radius: 4px; } .tooltip-arrow { @@ -6048,56 +6114,56 @@ button.close { left: 50%; margin-left: -5px; border-width: 5px 5px 0; - border-top-color: #000000; + border-top-color: #000; } .tooltip.top-left .tooltip-arrow { bottom: 0; right: 5px; margin-bottom: -5px; border-width: 5px 5px 0; - border-top-color: #000000; + border-top-color: #000; } .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; - border-top-color: #000000; + border-top-color: #000; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; - border-right-color: #000000; + border-right-color: #000; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; - border-left-color: #000000; + border-left-color: #000; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; - border-bottom-color: #000000; + border-bottom-color: #000; } .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; - border-bottom-color: #000000; + border-bottom-color: #000; } .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; - border-bottom-color: #000000; + border-bottom-color: #000; } .popover { position: absolute; @@ -6123,9 +6189,9 @@ button.close { word-spacing: normal; word-wrap: normal; font-size: 15px; - background-color: #ffffff; + background-color: #fff; background-clip: padding-box; - border: 1px solid #cccccc; + border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); @@ -6183,7 +6249,7 @@ button.close { bottom: 1px; margin-left: -10px; border-bottom-width: 0; - border-top-color: #ffffff; + border-top-color: #fff; } .popover.right > .arrow { top: 50%; @@ -6198,7 +6264,7 @@ button.close { left: 1px; bottom: -10px; border-left-width: 0; - border-right-color: #ffffff; + border-right-color: #fff; } .popover.bottom > .arrow { left: 50%; @@ -6213,7 +6279,7 @@ button.close { top: 1px; margin-left: -10px; border-top-width: 0; - border-bottom-color: #ffffff; + border-bottom-color: #fff; } .popover.left > .arrow { top: 50%; @@ -6227,7 +6293,7 @@ button.close { content: " "; right: 1px; border-right-width: 0; - border-left-color: #ffffff; + border-left-color: #fff; bottom: -10px; } .carousel { @@ -6321,7 +6387,7 @@ button.close { opacity: 0.5; filter: alpha(opacity=50); font-size: 20px; - color: #ffffff; + color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0); @@ -6345,7 +6411,7 @@ button.close { .carousel-control:hover, .carousel-control:focus { outline: 0; - color: #ffffff; + color: #fff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90); @@ -6400,7 +6466,7 @@ button.close { height: 10px; margin: 1px; text-indent: -999px; - border: 1px solid #ffffff; + border: 1px solid #fff; border-radius: 10px; cursor: pointer; background-color: #000 \9; @@ -6410,7 +6476,7 @@ button.close { margin: 0; width: 12px; height: 12px; - background-color: #ffffff; + background-color: #fff; } .carousel-caption { position: absolute; @@ -6420,7 +6486,7 @@ button.close { z-index: 10; padding-top: 20px; padding-bottom: 20px; - color: #ffffff; + color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } @@ -6486,10 +6552,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: " "; @@ -6511,8 +6573,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; } @@ -6787,11 +6847,11 @@ main.has_code_col:after, } [class^="mdi-"].pull-left, [class*="mdi-"].pull-left { - margin-right: .3em; + margin-right: 0.3em; } [class^="mdi-"].pull-right, [class*="mdi-"].pull-right { - margin-left: .3em; + margin-left: 0.3em; } [class^="mdi-"].mdi-lg:before, [class*="mdi-"].mdi-lg:before, @@ -9130,6 +9190,36 @@ main.has_code_col:after, .mdi-toggle-star:before { content: "\e8f5"; } +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 300; + src: local('Work Sans Light'), local('WorkSans-Light'), url(https://fonts.gstatic.com/s/worksans/v5/QGYpz_wNahGAdqQ43Rh314L8lthI.ttf) format('truetype'); +} +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 400; + src: local('Work Sans'), local('WorkSans-Regular'), url(https://fonts.gstatic.com/s/worksans/v5/QGYsz_wNahGAdqQ43Rh_cqDs.ttf) format('truetype'); +} +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 500; + src: local('Work Sans Medium'), local('WorkSans-Medium'), url(https://fonts.gstatic.com/s/worksans/v5/QGYpz_wNahGAdqQ43Rh3j4P8lthI.ttf) format('truetype'); +} +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 600; + src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url(https://fonts.gstatic.com/s/worksans/v5/QGYpz_wNahGAdqQ43Rh3o4T8lthI.ttf) format('truetype'); +} +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 700; + src: local('Work Sans Bold'), local('WorkSans-Bold'), url(https://fonts.gstatic.com/s/worksans/v5/QGYpz_wNahGAdqQ43Rh3x4X8lthI.ttf) format('truetype'); +} .o-no-select { pointer-events: none; cursor: default; @@ -9227,7 +9317,7 @@ main.has_code_col:after, } @media screen and (min-width: 768px) { .o-doc-dropdown.open { - background-color: #fcfcfc; + background-color: #FCFCFC; } } .o-doc-dropdown.open .dropdown-toggle { @@ -9242,17 +9332,10 @@ main.has_code_col:after, border-radius: 0; text-align: left; min-width: 100%; - background-color: #fcfcfc; + background-color: #FCFCFC; 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; @@ -9277,7 +9360,7 @@ main.has_code_col:after, } @media screen and (min-width: 768px) { .o-doc-dropdown.open .dropdown-menu { - background-color: #fcfcfc; + background-color: #FCFCFC; } } .o-doc-dropdown.o_dropdown_mobile_nav { @@ -9308,55 +9391,195 @@ main.has_code_col:after, .o-doc-dropdown.o_dropdown_mobile_nav .o_breadcrumb_dropdown_menu > li:nth-child(3) > a:before { padding-left: 1em; } -.shadow-none { - -webkit-box-shadow: none; - box-shadow: none; +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } -.deep-1 { - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); +h1, +h2, +h3, +h4, +h5, +h6 { + text-rendering: geometricPrecision; } -.deep-2 { - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); -} -.deep-3 { - box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09); -} -.deep-4 { - box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07); -} -.deep-5 { - box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05); -} -.img-responsive, -.thumbnail > img, -.thumbnail a > img, -.carousel-inner > .item > img, -.carousel-inner > .item > a > img { - display: inline-block; -} -.img-responsive.center-block { - display: block; -} -@-moz-keyframes ripple { - 100% { - opacity: 0; - -webkit-transform: scale(2.5); - -ms-transform: scale(2.5); - -o-transform: scale(2.5); - transform: scale(2.5); +@media (min-width: 1200px) { + .has_code_col .doc-aside h1, + .has_code_col .doc-aside h2, + .has_code_col .doc-aside h3, + .has_code_col .doc-aside h4, + .has_code_col .doc-aside h5, + .has_code_col .doc-aside h6 { + color: white; } } +article.doc-body > section { + padding-bottom: 10px; +} +article.doc-body > section > :last-child { + margin-bottom: 0; +} +article.doc-body > section > h2, +article.doc-body > section > h3, +article.doc-body > section > h4, +article.doc-body > section > h5, +article.doc-body > section > h6 { + margin-bottom: 5px; + margin-top: 40px; +} +article.doc-body > section > h2:last-child, +article.doc-body > section > h3:last-child, +article.doc-body > section > h4:last-child, +article.doc-body > section > h5:last-child, +article.doc-body > section > h6:last-child { + margin-bottom: -30px; + padding-bottom: 5px; + border-bottom: 2px solid #f4f6f7; +} +article.doc-body > section > h2 { + padding-bottom: 5px; + border-bottom: 2px solid #f4f6f7; +} +article.doc-body > section > h5, +article.doc-body > section > h6 { + font-weight: 500; +} +article.doc-body > section:first-of-type > h2, +article.doc-body > section:first-of-type > h3, +article.doc-body > section:first-of-type > h4, +article.doc-body > section:first-of-type > h5, +article.doc-body > section:first-of-type > h6 { + margin-top: 10px; +} +article.doc-body > section:first-of-type:empty, +article.doc-body > section:first-of-type.hidden { + display: none; +} +article.doc-body > section:first-of-type:empty + section > h2, +article.doc-body > section:first-of-type.hidden + section > h2, +article.doc-body > section:first-of-type:empty + section > h3, +article.doc-body > section:first-of-type.hidden + section > h3, +article.doc-body > section:first-of-type:empty + section > h4, +article.doc-body > section:first-of-type.hidden + section > h4, +article.doc-body > section:first-of-type:empty + section > h5, +article.doc-body > section:first-of-type.hidden + section > h5, +article.doc-body > section:first-of-type:empty + section > h6, +article.doc-body > section:first-of-type.hidden + section > h6 { + margin-top: 10px; +} +article.doc-body > section { + line-height: 26px; +} +article.doc-body a, +article.doc-body a:hover { + text-decoration: underline; +} +article.doc-body blockquote { + font-size: 15px; + line-height: 26px; +} +article.doc-body blockquote:not(:first-child) { + margin-top: 17px; +} +article.doc-body dl dt code { + font-size: 0.9em; +} +article.doc-body dl dd { + margin: 2px 0 15px 15px; +} +article.doc-body ol, +article.doc-body ul { + line-height: 26px; + padding: 0; + list-style: none; + counter-reset: a; +} +article.doc-body ol li, +article.doc-body ul li { + margin: 5px 0; + position: relative; + padding-left: 30px; +} +article.doc-body ol li:before, +article.doc-body ul li:before { + content: ""; + display: block; + position: absolute; + top: 9px; + left: 10px; + bottom: auto; + right: auto; + width: 6px; + height: 6px; + border-radius: 50%; + background: #939da3; +} +article.doc-body ol li p, +article.doc-body ul li p { + margin: 0; +} +article.doc-body ol li h2, +article.doc-body ul li h2, +article.doc-body ol li h3, +article.doc-body ul li h3, +article.doc-body ol li h4, +article.doc-body ul li h4, +article.doc-body ol li h5, +article.doc-body ul li h5, +article.doc-body ol li h6, +article.doc-body ul li h6 { + margin-top: 0; + padding-top: 0; +} +article.doc-body ol > li:before { + counter-increment: a; + content: counter(a); + color: #fff; + font-size: 13px; + font-weight: bold; + line-height: 1; + text-align: center; + padding: 4px 0; + width: 20px; + height: 20px; + border-radius: 10px; + position: absolute; + top: 3px; + left: 0; + bottom: auto; + right: auto; +} +article.doc-body .o_has_permalink_marker { + transition: all, 0.3s; + padding-left: 0; +} +article.doc-body .o_has_permalink_marker i { + cursor: pointer; + visibility: hidden; + margin-left: 0.1em; + font-size: 0.8em; + padding: 0.2em; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +article.doc-body .o_has_permalink_marker:hover i { + visibility: visible; +} +article.doc-body .o_has_permalink_marker.o_marked { + padding-left: 10px; + background-color: #fff7d1; +} @-webkit-keyframes ripple { - 100% { + to { opacity: 0; -webkit-transform: scale(2.5); - -ms-transform: scale(2.5); - -o-transform: scale(2.5); - transform: scale(2.5); } } @keyframes ripple { - 100% { + to { opacity: 0; -webkit-transform: scale(2.5); -ms-transform: scale(2.5); @@ -9364,101 +9587,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%; @@ -9471,185 +9603,575 @@ main.has_code_col:after, -o-transform: scale(0); transform: scale(0); } -.inner-ripple-animated { +.ripple .inner-ripple.inner-ripple-animated { -webkit-animation: ripple 0.35s ease-in; -o-animation: ripple 0.35s ease-in; animation: ripple 0.35s ease-in; } -body { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +article.doc-body .code-fields { + display: table; + width: 100%; + padding: 5px; + font-size: 0.8em; + border: 2px solid #F2F2F2; } -h1, -h2, -h3, -h4, -h5, -h6, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; +article.doc-body .code-fields .code-field { + display: table-row; } -@media (min-width: 1200px) { - .has_code_col .doc-aside h1, - .has_code_col .doc-aside h2, - .has_code_col .doc-aside h3, - .has_code_col .doc-aside h4, - .has_code_col .doc-aside h5, - .has_code_col .doc-aside h6, - .has_code_col .doc-aside .h1, - .has_code_col .doc-aside .h2, - .has_code_col .doc-aside .h3, - .has_code_col .doc-aside .h4, - .has_code_col .doc-aside .h5, - .has_code_col .doc-aside .h6 { - color: white; +article.doc-body .code-fields .code-field-body { + display: block; + padding-left: 15px; +} +@media screen and (min-width: 992px) { + article.doc-body .code-fields .code-field-body { + display: table-cell; + padding-left: 0; } } -h1, -h2, -.h1, -.h2 { - margin-top: 31.5px; +article.doc-body .code-fields .code-field-name { + width: auto; + display: block; + font-weight: 600; + color: #21313a; +} +article.doc-body .code-fields .code-field-name:after { + content: ":"; +} +@media screen and (min-width: 992px) { + article.doc-body .code-fields .code-field-name { + text-align: right; + width: 20%; + padding-right: 10px; + display: table-cell; + } +} +article.doc-body .code-fields ul { + list-style: none; + margin: 0.2em 0; +} +article.doc-body .code-fields ul > li { + margin: 0 0 8px; + padding-left: 0px; + line-height: 1.5; +} +article.doc-body .code-fields ul > li:before { + display: none; +} +article.doc-body .code-fields ul strong { + color: #21313a; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +} +article.doc-body .code-fields ul em { + color: #21313a; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-weight: 600; +} +.card-img { + background: #75526b; + background: -webkit-linear-gradient(99deg, #875A7B 10%, #62495B 90%); + background: -moz-linear-gradient(99deg, #875A7B 10%, #62495B 90%); + background: -ms-linear-gradient(99deg, #875A7B 10%, #62495B 90%); + background: -o-linear-gradient(99deg, #875A7B 10%, #62495B 90%); + background: linear-gradient(99deg, #875A7B 10%, #62495B 90%); + position: absolute; + top: 0; + left: auto; + bottom: auto; + right: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + width: 100%; + height: 100%; + display: block; + background-size: cover; + background-position: 50%; +} +.card.top { + position: relative; + overflow: hidden; + margin: 0; + padding: 0 0 2%; + -webkit-transform-origin: 50% 0px 0px; + -moz-transform-origin: 50% 0px 0px; + -ms-transform-origin: 50% 0px 0px; + transform-origin: 50% 0px 0px; + 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%); +} +@media screen and (min-width: 768px) { + .card.top { + padding: 12% 0 5%; + } +} +@media screen and (min-width: 992px) { + .card.top { + padding: 10% 0 5%; + } +} +@media screen and (min-width: 1200px) { + .card.top { + padding: 8% 0 4%; + } +} +.card.top.stacked { + background: transparent; + -webkit-transition: background 1s; + -o-transition: background 1s; + transition: background 1s; +} +.card.top:before { + content: ""; + display: block; + background-image: url("img/banner_bg.png"); + background-size: cover; + background-position: 50%; + position: absolute; + top: 0; + left: auto; + bottom: auto; + right: 0; + width: 100%; + height: 100%; +} +.card.top .card-img { + background-image: url("img/banner_bg.png"); +} +.card.top .container { + position: relative; + font-size: 32px; +} +@media screen and (min-width: 768px) { + .card.top .container:not(.o_long_title) { + font-size: 40px; + } + .card.top .container.o_short_title { + font-size: 50px; + } +} +.card.top .container h1 { font-weight: 300; + font-size: 1em; + color: white; + line-height: 0.9; } -h1 b, -h2 b, -.h1 b, -.h2 b, -h1 strong, -h2 strong, -.h1 strong, -.h2 strong, -h1 a, -h2 a, -.h1 a, -.h2 a { - font-weight: 400; +.card.top.has_banner { + background: #282F33; } -h3, -.h3, -h4, -.h4, -h5, -h6, -.h5, -.h6 { - font-weight: 400; +.card.top.has_banner:before { + display: none; } -h3 b, -.h3 b, -h4 b, -.h4 b, -h5 b, -h6 b, -.h5 b, -.h6 b, -h3 strong, -.h3 strong, -h4 strong, -.h4 strong, -h5 strong, -h6 strong, -.h5 strong, -.h6 strong, -h3 a, -.h3 a, -h4 a, -.h4 a, -h5 a, -h6 a, -.h5 a, -.h6 a { +.card.top.has_banner .card-img { + opacity: 0.35; +} +main .alert { + padding: 8px 15px; + border-radius: 0; + margin: 5px auto 15px; + border-width: 0 0 0 3px; + border-color: #4B9EB6; + background-color: #eef6f8; +} +main .alert, +main .alert p { + line-height: 1.3; + font-size: 14px; +} +main .alert p { + margin-bottom: 5px; +} +main .alert p:last-child { + margin-bottom: 0; +} +main .alert > ul { + margin: 0.5em 0; +} +main .alert > ul > li { + margin: 0; +} +main .alert h3.alert-title { + font-size: 1em; + line-height: 1em; + margin: 0 0 5px; + font-weight: bold; + font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; + color: #438fa5; +} +main .alert h3.alert-title:before { + font-family: 'Material-Design-Icons'; + content: "\e639"; + display: inline-block; + text-rendering: geometricPrecision; + font-size: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-transform: translate(0, 0.1em); + -ms-transform: translate(0, 0.1em); + -o-transform: translate(0, 0.1em); + transform: translate(0, 0.1em); + margin-right: 0.2em; +} +main .alert.alert-info > h3.alert-title { + display: none; +} +main .alert.alert-go_to { + border-color: #875A7B; + background-color: #f7f3f6; + color: #78506d; +} +main .alert.alert-go_to > h3.alert-title { + color: #593b51; +} +main .alert.alert-go_to > h3.alert-title:before { + content: "\e70d"; +} +main .alert.alert-success { + border-color: #b9dfb9; + background-color: #eef7ee; +} +main .alert.alert-success > h3.alert-title { + color: #408c41; +} +main .alert.alert-success > h3.alert-title:before { + content: "\e625"; +} +main .alert.alert-warning, +main .alert.warning { + border-color: #fceedb; + background-color: #fef9f3; +} +main .alert.alert-warning > h3.alert-title, +main .alert.warning > h3.alert-title { + color: #F0AD4E; +} +main .alert.alert-warning > h3.alert-title:before, +main .alert.warning > h3.alert-title:before { + content: "\e6a4"; +} +main .alert.alert-danger { + border-color: #f4cecd; + background-color: #fdf7f7; +} +main .alert.alert-danger > h3.alert-title { + color: #c9302c; +} +main .alert.alert-danger > h3.alert-title:before { + content: "\e6a4"; +} +main .alert.alert-exercise { + border-color: #deddde; + background-color: #f7f7f7; + color: #393639; +} +main .alert.alert-exercise > h3.alert-title { + color: #938E94; +} +main .alert.alert-exercise > h3.alert-title:before { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); + top: 28px; + content: "\e709"; +} +@media (min-width: 1200px) { + main .alert.doc-content { + max-width: 55%; + } +} +hr.divider { + border-color: rgba(249, 249, 249, 0.4); + position: absolute; + width: 900%; + margin-left: -13px; +} +img.img-responsive { + box-shadow: 0 3px 15px #F2F2F2; + border: 1px solid #F2F2F2; + margin-bottom: 25px; +} +img.img-responsive:not(:first-child) { + margin-top: 25px; +} +.figure h4 { + margin: 0.5em 0 1.5em; + padding-left: 1em; + font-size: 1em; + font-style: italic; +} +.pq-patch em { + display: block; + border-radius: 4px 4px 0 0; + background: #F2F2F2; + padding-left: 10px; + font-size: 0.9em; + font-weight: 600; +} +.pq-patch em + .pq-section .highlight { + border-radius: 0 0 4px 4px; +} +span.menuselection { font-weight: 500; } -h4, -.h4, -h5, -h6, -.h5, -.h6 { - margin-top: 21px; - margin-bottom: 7px; +.list-group-item { + border: none; + background: transparent; } -ul:not(:empty), -ol:not(:empty) { +blockquote { + font-family: Georgia, "Times New Roman", Times, serif; + font-weight: 600; + font-style: italic; +} +blockquote footer { + font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; + background: transparent; + text-align: left; + color: #666c75; + font-weight: normal; + font-style: normal; +} +blockquote footer cite { + font-style: italic; +} +@media (min-width: 992px) { + blockquote { + border-left: 3px solid rgba(33, 183, 153, 0.5); + } +} +.code, +code { + font-size: 0.8em; + font-weight: 600; + color: #0a352d; + background-color: #def9f4; +} +.btn { + border-radius: 0; +} +.table, +table { + font-size: 0.9em; +} +.code-attribute, +.code-class, +.code-classmethod, +.code-data, +.code-function, +.code-method, +.code-staticmethod { + padding-left: 20px; + margin-bottom: 2em; +} +.code-attribute > h6, +.code-class > h6, +.code-classmethod > h6, +.code-data > h6, +.code-function > h6, +.code-method > h6, +.code-staticmethod > h6 { + margin-left: -20px; + margin-bottom: 0.3em; +} +.code-attribute > h6 .viewcode-link, +.code-class > h6 .viewcode-link, +.code-classmethod > h6 .viewcode-link, +.code-data > h6 .viewcode-link, +.code-function > h6 .viewcode-link, +.code-method > h6 .viewcode-link, +.code-staticmethod > h6 .viewcode-link { + display: none; + float: right; +} +.code-attribute > h6:hover .viewcode-link, +.code-class > h6:hover .viewcode-link, +.code-classmethod > h6:hover .viewcode-link, +.code-data > h6:hover .viewcode-link, +.code-function > h6:hover .viewcode-link, +.code-method > h6:hover .viewcode-link, +.code-staticmethod > h6:hover .viewcode-link { + display: inline; +} +.code-attribute p, +.code-class p, +.code-classmethod p, +.code-data p, +.code-function p, +.code-method p, +.code-staticmethod p { + margin-bottom: 0.5em; +} +article.doc-body.index-category { + min-height: 300px; + min-height: 30vh; +} +article.doc-body.index-category li.toctree-l1 { + padding: 5px 0; +} +article.doc-body .content-switcher { + margin-top: 0; +} +article.doc-body .content-switcher > ul { + font-size: 10px; + padding: 0; + margin: 0; + -webkit-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; +} +article.doc-body .content-switcher > ul > li { + font-weight: 600; + color: #dcddde; + border-bottom: 1px solid transparent; + margin: 0 20px 0 0; + padding-left: 0; + font-size: 1.3em; + cursor: pointer; + display: inline-block; + list-style: none; + -webkit-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; + opacity: 0.6; +} +article.doc-body .content-switcher > ul > li:before { + content: none; +} +article.doc-body .content-switcher > ul > li.active { + border-bottom: 1px solid #21b799; + opacity: 1; +} +article.doc-body .content-switcher:hover > ul > li { + opacity: 1; + filter: alpha(opacity=100); +} +article.doc-body .content-switcher > .tabs > * { + display: none; + max-width: 100%; + overflow-x: auto; +} +article.doc-body .content-switcher > .tabs > .active { + display: block; +} +.highlight { + background: #21272b; + color: #dcddde; + border-radius: 4px; margin-bottom: 10.5px; } -ul ul:not(:empty), -ol ul:not(:empty), -ul ol:not(:empty), -ol ol:not(:empty) { - margin-bottom: 7px; +.highlight pre { + margin-bottom: 0; +} +pre { + font-size: 0.8em; + color: #dcddde; + background: #21272b; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-weight: 600; + position: relative; + border: none; + max-width: 100%; + overflow: auto; + margin: 0 0 10.5px; } body, header { position: relative; } -#wrap > .container.index { - background-color: #f9f9f9; - width: 100%; - position: relative; -} -#wrap > .container.index > .index { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 768px) { - #wrap > .container.index > .index { - width: 750px; - } -} -@media (min-width: 992px) { - #wrap > .container.index > .index { - width: 970px; - } -} -@media (min-width: 1200px) { - #wrap > .container.index > .index { - width: 1170px; - } -} -#wrap > .container.index > .index > .navbar-header, -#wrap > .container.index > .index > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; -} -@media (min-width: 768px) { - #wrap > .container.index > .index > .navbar-header, - #wrap > .container.index > .index > .navbar-collapse { - margin-right: 0; - margin-left: 0; - } -} -#main_title { - margin: 10px; -} -@media (min-width: 992px) { - #main_title { - margin: 0 0 9px 0; - } -} .container .container { max-width: 100%; padding: 0; margin: 0; } -article.doc-content *[class^="col-"] { +.img-responsive, +.thumbnail > img, +.thumbnail a > img, +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: inline-block; +} +.img-responsive.center-block { + display: block; +} +article.doc-content *[class*="col-"] { padding: 0; } -main aside, -main article.doc-body, -main .doc-content, -main .doc-aside { +#wrap { + z-index: 1; + position: relative; + background: #F9F9F9; + padding-bottom: 40px; +} +main { + position: relative; + display: block; +} +main .o_content { + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); +} +@media (min-width: 768px) { + main .o_content { + margin: -40px auto 0; + border-radius: 2px; + } +} +main article.doc-body { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + float: left; + width: 100%; + padding: 15px; +} +@media (min-width: 768px) { + main article.doc-body { + padding: 15px 30px; + } +} +@media (min-width: 992px) { + main article.doc-body { + max-width: 700px; + } +} +@media (min-width: 1200px) { + main article.doc-body { + margin-left: 7%; + margin-top: 20px; + } +} +main article.doc-body > * { + max-width: 100%; +} +main.o_aside_removed, +main.o_slim_page { + max-width: 700px; +} +@media (min-width: 1200px) { + main.o_aside_removed, + main.o_slim_page { + max-width: 760px; + } +} +@media (min-width: 992px) { + main.o_aside_removed article.doc-body, + main.o_slim_page article.doc-body { + padding-left: 30px; + } +} +main.has_code_col { + max-width: 700px; +} +@media (min-width: 1200px) { + main.has_code_col { + max-width: 1170px; + } +} +main.has_code_col .doc-aside, +main.has_code_col .doc-content { position: relative; min-height: 1px; padding-right: 15px; @@ -9657,91 +10179,23 @@ main .doc-aside { float: left; width: 100%; } -main .doc-content, -main .doc-aside { - position: relative; -} -main aside { - width: 25%; - max-width: 300px; - position: static; - padding: 0; - display: block; - float: left; -} -@media (max-width: 992px) { - main aside { - display: none; - } -} -main article.doc-body { - background: #ffffff; - border-left: 1px solid #f2f2f2; - padding: 15px 30px; -} -@media (min-width: 992px) { - main article.doc-body { - width: 75%; - } - main article.doc-body.doc-toc { - width: 100%; - } -} -main article.doc-body > * { - max-width: 100%; -} -main.has_code_col { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 768px) { - main.has_code_col { - width: 750px; - } -} -@media (min-width: 992px) { - main.has_code_col { - width: 970px; - } -} -@media (min-width: 1200px) { - main.has_code_col { - width: 1170px; - } -} -main.has_code_col > .navbar-header, -main.has_code_col > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; -} -@media (min-width: 768px) { - main.has_code_col > .navbar-header, - main.has_code_col > .navbar-collapse { - margin-right: 0; - margin-left: 0; +@media (max-width: 1199px) { + main.has_code_col .doc-aside, + main.has_code_col .doc-content { + padding: 0; } } main.has_code_col aside { display: none; } -main.has_code_col article.doc-body { - width: 100%; -} -main.has_code_col article.doc-body > * { +main.has_code_col article.doc-body > section { max-width: 100%; } -main.has_code_col article.doc-body section { - position: relative; - display: block; - float: left; - width: 100%; -} @media (min-width: 1200px) { main.has_code_col article.doc-body { width: 100%; - padding-right: 0; + max-width: none; + margin: 0; } main.has_code_col article.doc-body:before { content: ""; @@ -9749,105 +10203,143 @@ main.has_code_col article.doc-body section { -webkit-box-shadow: inset 40px 0 40px -18px rgba(22, 24, 29, 0.3); box-shadow: inset 40px 0 40px -18px rgba(22, 24, 29, 0.3); position: absolute; - width: 43%; - height: 100%; top: 0; + left: auto; + bottom: auto; right: 0; + width: 50%; + height: 100%; } - main.has_code_col article.doc-body section > * { - width: 54.633333%; - max-width: 600px; + main.has_code_col article.doc-body > section { + position: relative; + display: block; + float: left; + width: 100%; + } + main.has_code_col article.doc-body > section > * { + width: 48%; float: left; clear: left; } - main.has_code_col article.doc-body section > h1, - main.has_code_col article.doc-body section > h2, - main.has_code_col article.doc-body section > h3, - main.has_code_col article.doc-body section > h4, - main.has_code_col article.doc-body section > h5, - main.has_code_col article.doc-body section > h6 { - width: 100%; + main.has_code_col article.doc-body > section > 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; } - main.has_code_col article.doc-body section .doc-aside { - width: 41%; + main.has_code_col article.doc-body > section .doc-aside { + width: 49%; float: none; clear: none; - margin-right: 15px; - margin-left: 57%; - } - main.has_code_col article.doc-body section .doc-aside .content-switcher { - margin-top: 0; - } - main.has_code_col article.doc-body section .doc-aside .content-switcher > ul { - margin-bottom: 0; - } - main.has_code_col article.doc-body section .doc-aside .content-switcher > ul > li { + margin-left: 51%; color: #dcddde; + font-size: 14px; + line-height: 1.45; } -} -@media screen and (min-width: 992px) { - main.index .toctree-wrapper { - position: relative; - } - main.index .toctree-wrapper > .row:first-child > .col-md-3:nth-child(3), - main.index .toctree-wrapper > .row:first-child > .col-md-3:nth-child(5) { - margin-right: 50%; - } - main.index .toctree-wrapper .toc-single-entry { - position: absolute; - top: 0; - right: 0; - width: 50%; - padding-right: 15px; - } - main.index .toctree-wrapper .toc-single-entry > .col-md-3 { - width: 100%; - } - main.index .toctree-wrapper .toc-single-entry > *[class^="col-"] { - padding-left: 0; - } - main.index .toctree-wrapper .toc-single-entry .card { - min-height: 420px; + main.has_code_col article.doc-body > section .doc-aside pre { + font-size: 12px; } } article.doc-toc .toctree-wrapper > ul > li > span { display: block; font-size: 28px; } -.code-fields { - display: table; +@media screen and (min-width: 992px) { + #wrap.index > .card.top { + padding: 10% 0 2%; + } +} +#wrap.index > main.index { + margin: 10px auto; +} +#wrap.index > main.index .o_content { + box-shadow: none; + background: none; +} +main.index .toc-section h2 { + padding: 0 0 4px; + border-bottom: 1px solid #F2F2F2; + margin: 1.4em 0 0.8em; + font-size: 16px; + font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; + letter-spacing: 0; + font-weight: bold; + color: #888888; +} +main.index .card { + border-radius: 4px; + position: relative; + overflow: hidden; + margin-bottom: 20px; + padding-top: 56%; + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17); +} +main.index .card .card-img span { + display: block; + background-size: cover; + background-position: 50%; width: 100%; + height: 100%; } -.code-fields .code-field { - display: table-row; -} -.code-fields .code-field-body { - display: block; - padding-left: 15px; +main.index .card figcaption { + color: #666c75; + box-shadow: inset 0 1px 0 #F2F2F2; + font-weight: bold; + line-height: 1.2; + font-size: 14px; + background-color: white; + padding: 8px 12px 6px; + position: absolute; + top: 0; + left: -1px; + bottom: auto; + right: -1px; } @media screen and (min-width: 992px) { - .code-fields .code-field-body { - display: table-cell; - padding-left: 0; + main.index .toc-single-entry .card figcaption { + font-size: 1.5em; + padding: 20px 15px; } } -.code-fields .code-field-name { - width: auto; - display: block; -} -@media screen and (min-width: 992px) { - .code-fields .code-field-name { - width: 20%; - padding-right: 20px; - display: table-cell; - } -} -.code-fields ul { - margin: .2em 0; +.toctree-wrapper > ul { + list-style: none; padding: 0; } +.toctree-wrapper > ul li { + line-height: 1.4; +} +.toctree-wrapper > ul li.toctree-l1, +.toctree-wrapper > ul li.toctree-l3 { + padding-left: 0; +} +.toctree-wrapper > ul li.toctree-l1:before, +.toctree-wrapper > ul li.toctree-l3:before { + content: none; +} +.toctree-wrapper > ul li.toctree-l1:first-child, +.toctree-wrapper > ul li.toctree-l3:first-child { + margin-top: 0; +} +.toctree-wrapper > ul li.toctree-l1 { + margin: 0 0 15px; +} +.toctree-wrapper > ul li.toctree-l1 > span { + font-size: 21px; +} +.toctree-wrapper > ul li.toctree-l2 > span { + font-weight: 500; +} +.toctree-wrapper > ul li.toctree-l2 > ul { + margin: 0 0 15px; +} +.toctree-wrapper > ul li.toctree-l2 > ul:empty { + display: none; +} #oe_main_menu_navbar ~ #wrapwrap .o_main_header.o_has_sub_nav.o_scrolled { top: -17px; } @@ -9955,8 +10447,8 @@ article.doc-toc .toctree-wrapper > ul > li > span { } .o_main_header > .o_main_header_main > .o_primary_nav.o_sub_opened:before { visibility: visible; - background: #fcfcfc; - box-shadow: 0 1px 0 #f2f2f2; + 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; @@ -10007,12 +10499,12 @@ article.doc-toc .toctree-wrapper > ul > li > span { transform: rotate(-45deg); } .o_main_header > .o_main_header_main > .o_primary_nav .dropdown.open > a { - color: #9e588b !important; + 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; + background-color: #9E588B !important; box-shadow: 0 1px 1px rgba(158, 88, 139, 0.1); right: 3.53553391px; } @@ -10124,11 +10616,11 @@ article.doc-toc .toctree-wrapper > ul > li > span { } @media (min-width: 768px) { .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div { - height: 355px; + 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; + border-left: 1px solid #F2F2F2; } } .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav > .container > .row > div ul { @@ -10220,7 +10712,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { 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) { +@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), 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"); } @@ -10245,12 +10737,12 @@ article.doc-toc .toctree-wrapper > ul > li > span { .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; + 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; + 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%; @@ -10258,7 +10750,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { .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; + 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%; @@ -10266,7 +10758,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { .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; + 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%; @@ -10282,7 +10774,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { display: block; height: 50px; line-height: 50px; - border-top: 1px solid #f2f2f2; + border-top: 1px solid #F2F2F2; text-align: center; font-size: 12px; font-weight: 600; @@ -10290,7 +10782,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { @media (min-width: 768px) { .o_main_header > .o_main_header_main > .o_primary_nav .o_secondary_nav { display: block; - background-color: #fcfcfc; + background-color: #FCFCFC; visibility: hidden; z-index: -2; -webkit-transform: translate(0, -115%); @@ -10554,11 +11046,11 @@ article.doc-toc .toctree-wrapper > ul > li > span { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); } .o_main_header > .o_main_header_main > .o_header_buttons .dropdown.open { - background-color: #fcfcfc; + background-color: #FCFCFC; color: #5a5f68; } .o_main_header > .o_main_header_main > .o_header_buttons .dropdown.open .dropdown-menu { - background-color: #fcfcfc; + background-color: #FCFCFC; margin-top: 0; border: none; border-radius: 0; @@ -10567,13 +11059,6 @@ 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; @@ -10584,18 +11069,10 @@ 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; + background-color: #FCFCFC; color: #5a5f68; 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; @@ -10608,7 +11085,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { box-shadow: 0 1px 1px rgba(90, 95, 104, 0.1); } .o_main_header.o_scrolled .o_sub_nav { - background: #fcfcfc; + background: #FCFCFC; } .o_main_header.o_scrolled .o_sub_nav > .container .navbar-header > span { -webkit-transform: translate(0, 0); @@ -10627,17 +11104,10 @@ article.doc-toc .toctree-wrapper > ul > li > span { position: relative; height: auto; min-height: 50px; - background-color: #fcfcfc; + background-color: #FCFCFC; color: #5a5f68; 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; } @@ -10672,7 +11142,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_header_buttons { float: none; - background-color: #25252d; + background-color: #25252D; padding: 0 15px; box-sizing: content-box; margin: 50px -15px 0; @@ -10683,7 +11153,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_header_buttons > * { overflow: visible!important; - color: #fcfcfc; + color: #FCFCFC; float: none; display: inline; } @@ -10691,7 +11161,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { display: initial!important; } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_header_buttons > * .dropdown-toggle { - color: #fcfcfc !important; + color: #FCFCFC !important; } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_header_buttons > * .dropdown-menu { position: relative; @@ -10707,7 +11177,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { display: block; margin-bottom: 5px; padding: 10px; - color: #fcfcfc !important; + color: #FCFCFC !important; font-size: 0.8em; } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_header_buttons > * .dropdown-menu > li > a:hover { @@ -10715,7 +11185,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_primary_nav { display: block; - background-color: #25252d; + background-color: #25252D; color: white; margin: 0 -15px 0; padding: 0; @@ -10728,7 +11198,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { color: white; } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_primary_nav li { - border: 0 solid #33343d; + border: 0 solid #33343D; border-width: 1px 5px 0; } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_primary_nav > li { @@ -10774,7 +11244,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_primary_nav > li.dropdown > .o_secondary_nav > .container > .row > div > .o_nav_app_family { height: 50px; line-height: 50px; - background-color: #33343d; + background-color: #33343D; } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_primary_nav > li.dropdown > .o_secondary_nav > .container > .row > div > .o_nav_app_family > * { display: none; @@ -10784,7 +11254,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { } .o_main_header.o_mobile_menu_opened > .o_main_header_main > .o_primary_nav > li.dropdown > .o_secondary_nav > .o_store_link { position: relative; - border: 0 solid #33343d; + border: 0 solid #33343D; border-width: 14px 0 0; padding-top: 14px; line-height: 1.5; @@ -10796,7 +11266,7 @@ article.doc-toc .toctree-wrapper > ul > li > span { width: 100%; height: 20px; margin-bottom: -5px; - background-color: #33343d; + background-color: #33343D; } } body > footer { @@ -10805,7 +11275,7 @@ body > footer { width: 100%; height: auto; min-height: 300px; - background-color: #282f33; + background-color: #282F33; color: #888888; z-index: 1; } @@ -10833,14 +11303,14 @@ body > footer a:focus { color: white; } body > footer .dropdown-menu a { - color: #6b6d70; + color: #6B6D70; } body > footer .dropdown-menu a:hover, body > footer .dropdown-menu a:focus { color: #5f6063; } body > footer .dropdown-menu a:active { - color: #ffffff; + color: #fff; } body > footer .divider { margin: 10px 0; @@ -10902,15 +11372,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-size: 0.85em; line-height: 1.5; - font-weight: 500; overflow-y: auto; - height: 100%; } .navbar-aside.affix { z-index: 2; @@ -10940,28 +11426,6 @@ body > footer .o_footer_bottom .social-links .fa { -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; @@ -10969,25 +11433,20 @@ body > footer .o_footer_bottom .social-links .fa { overflow-x: hidden; } .navbar-aside .gith-container .gith-link { - font-weight: 600; color: #666c75; 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, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; } .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'); @@ -10998,14 +11457,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; @@ -11028,60 +11479,97 @@ body > footer .o_footer_bottom .social-links .fa { display: block; padding: 5px 15px; color: #666c75; + 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 { - border-color: #f2f2f2; +.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; @@ -11121,11 +11609,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; @@ -11139,7 +11629,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; @@ -11159,12 +11648,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); @@ -11173,12 +11664,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); @@ -11193,13 +11686,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; @@ -11220,19 +11712,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; @@ -11264,7 +11772,7 @@ body > footer .o_footer_bottom .social-links .fa { } body main article h2, body main article .h2 { - font-size: 1.642857143em; + font-size: 1.64285714em; } body main article h3, body main article .h3 { @@ -11287,8 +11795,20 @@ body > footer .o_footer_bottom .social-links .fa { } } .o_main_header.o_mobile_menu_opened .mdi-navigation-menu { - background-color: #282f33; - color: #f2f2f2; + background-color: #282F33; + color: #F2F2F2; +} +.o_main_header > .o_sub_nav #o_sub-menu #searchbox { + display: flex; + align-items: center; + justify-content: center; +} +.o_main_header > .o_sub_nav #o_sub-menu #searchbox > form { + display: flex; + flex-grow: 1; +} +.o_main_header > .o_sub_nav #o_sub-menu #searchbox > form > .form-control { + border-radius: 0; } @media screen and (min-width: 768px) { .o_main_header > .o_sub_nav #o_sub-menu .o_breadcrumb { @@ -11331,7 +11851,6 @@ body > footer .o_footer_bottom .social-links .fa { line-height: 40px; letter-spacing: -0.1px; word-spacing: -1px; - font-size: 0.9em; display: inline-block; height: 100%; max-width: 80px; @@ -11385,13 +11904,13 @@ body > footer .o_footer_bottom .social-links .fa { padding: 0 15px; margin: 0; height: 38px; - background-color: #f2f2f2; + 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; + background-color: #FCFCFC; } .o_main_header > .o_sub_nav .collapse .nav { margin-right: 0; @@ -11437,7 +11956,7 @@ body > footer .o_footer_bottom .social-links .fa { } @media screen and (min-width: 768px) { .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open { - background-color: #fcfcfc; + background-color: #FCFCFC; } } .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-toggle { @@ -11452,17 +11971,10 @@ body > footer .o_footer_bottom .social-links .fa { border-radius: 0; text-align: left; min-width: 100%; - background-color: #fcfcfc; + 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; @@ -11487,7 +11999,7 @@ body > footer .o_footer_bottom .social-links .fa { } @media screen and (min-width: 768px) { .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.open .dropdown-menu { - background-color: #fcfcfc; + background-color: #FCFCFC; } } .o_main_header > .o_sub_nav .collapse .nav > li.dropdown.o_dropdown_mobile_nav { @@ -11550,7 +12062,7 @@ body > footer .o_footer_bottom .social-links .fa { } @media screen and (min-width: 768px) { .o_main_header > .o_sub_nav li.dropdown.open { - background-color: #fcfcfc; + background-color: #FCFCFC; } } .o_main_header > .o_sub_nav li.dropdown.open .dropdown-toggle { @@ -11565,17 +12077,10 @@ body > footer .o_footer_bottom .social-links .fa { border-radius: 0; text-align: left; min-width: 100%; - background-color: #fcfcfc; + 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; @@ -11600,7 +12105,7 @@ body > footer .o_footer_bottom .social-links .fa { } @media screen and (min-width: 768px) { .o_main_header > .o_sub_nav li.dropdown.open .dropdown-menu { - background-color: #fcfcfc; + background-color: #FCFCFC; } } .o_main_header > .o_sub_nav li.dropdown.o_dropdown_mobile_nav { @@ -11681,798 +12186,6 @@ body > footer .o_footer_bottom .social-links .fa { .o_main_header.o_scrolled .o_sub_nav .o_sub_nav_actions > li:last-child { margin-right: 0; } -#wrap { - z-index: 1; - position: relative; - background: #f9f9f9; - padding-bottom: 40px; -} -main { - z-index: 0; - position: relative; - margin: -10px auto 0; - display: block; - border-radius: 2px; - background-color: #ffffff; - 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: #ffffff; - 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); -} -@media screen and (min-width: 992px) { - main.index .toc-single-entry .card figcaption { - font-size: 1.5em; - padding: 20px 15px; - } -} -@media screen and (min-width: 992px) { - main.index .col-md-6 .card, - main.index .col-md-4 .card { - min-height: 300px; - } - main.index .col-md-6 .card figcaption, - main.index .col-md-4 .card figcaption { - font-size: 1.5em; - padding: 20px 15px; - } -} -main.index.animating .card { - -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); - transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -} -.card-img { - background: #75526b; - background: -webkit-linear-gradient(99deg, #875a7b 10%, #62495b 90%); - background: -moz-linear-gradient(99deg, #875a7b 10%, #62495b 90%); - background: -ms-linear-gradient(99deg, #875a7b 10%, #62495b 90%); - background: -o-linear-gradient(99deg, #875a7b 10%, #62495b 90%); - background: linear-gradient(99deg, #875a7b 10%, #62495b 90%); - position: absolute; - top: 0; - left: auto; - bottom: auto; - right: 0; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - width: 100%; - height: 100%; - display: block; - background-size: cover; - background-position: 50%; -} -.card.top { - padding: 10% 0 8%; - position: relative; - overflow: hidden; - margin: 0; - background: #75526b; - background: -webkit-linear-gradient(99deg, #875a7b 10%, #62495b 90%); - background: -moz-linear-gradient(99deg, #875a7b 10%, #62495b 90%); - background: -ms-linear-gradient(99deg, #875a7b 10%, #62495b 90%); - background: -o-linear-gradient(99deg, #875a7b 10%, #62495b 90%); - background: linear-gradient(99deg, #875a7b 10%, #62495b 90%); - -webkit-animation: fadeIn 1s; - -o-animation: fadeIn 1s; - animation: fadeIn 1s; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transform-origin: 50% 0px 0px; - -moz-transform-origin: 50% 0px 0px; - -ms-transform-origin: 50% 0px 0px; - transform-origin: 50% 0px 0px; -} -@media screen and (min-width: 768px) and (max-width: 991px) { - .card.top { - padding-top: 12%; - } -} -#wrap.index .card.top { - padding: 0 0 4%; -} -@media screen and (min-width: 768px) { - #wrap.index .card.top { - padding-top: 12%; - } -} -@media screen and (min-width: 1200px) { - #wrap.index .card.top { - padding-top: 8%; - } -} -.card.top.stacked { - background: transparent; - -webkit-transition: background 1s; - -o-transition: background 1s; - transition: background 1s; -} -.card.top:before { - content: ""; - display: block; - background-image: url("img/banner_bg.png"); - background-size: cover; - background-position: 50%; - position: absolute; - top: 0; - left: auto; - bottom: auto; - right: 0; - width: 100%; - height: 100%; -} -.card.top:hover { - -webkit-box-shadow: none; - box-shadow: none; -} -.card.top .card-img { - background-image: url("img/banner_bg.png"); -} -@media screen and (min-width: 768px) and (max-width: 991px) { - .card.top { - padding: 12% 0 8%; - } - #wrap.index .card.top { - padding: 12% 0 4%; - } -} -.card.top .container { - position: relative; -} -.card.top .container h1 { - font-family: "Work Sans", sans-serif; - line-height: 1.1; - color: #21313a; - margin-top: 21px; - margin-bottom: 10.5px; - font-size: 32px; - text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; - margin-top: 31.5px; - font-weight: 300; - color: white; -} -.card.top .container h1 small, -.card.top .container h1 .small { - font-weight: normal; - line-height: 1; - color: #21313a; -} -.card.top .container h1 small, -.card.top .container h1 .small { - font-size: 65%; -} -@media (min-width: 1200px) { - .has_code_col .doc-aside .card.top .container h1 { - color: white; - } -} -.card.top .container h1 b, -.card.top .container h1 strong, -.card.top .container h1 a { - font-weight: 400; -} -@media screen and (min-width: 768px) { - .card.top .container h1 { - font-family: "Work Sans", sans-serif; - line-height: 1.1; - color: #21313a; - margin-top: 21px; - margin-bottom: 10.5px; - font-size: 39px; - text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; - margin-top: 31.5px; - font-weight: 300; - color: white; - } - .card.top .container h1 small, - .card.top .container h1 .small { - font-weight: normal; - line-height: 1; - color: #21313a; - } - .card.top .container h1 small, - .card.top .container h1 .small { - font-size: 65%; - } - .card.top .container h1 b, - .card.top .container h1 strong, - .card.top .container h1 a { - font-weight: 400; - } -} -@media screen and (min-width: 768px) and (min-width: 1200px) { - .has_code_col .doc-aside .card.top .container h1 { - color: white; - } -} -.card.top.has_banner { - background: #282f33; -} -.card.top.has_banner:before { - display: none; -} -.card.top.has_banner .card-img { - opacity: 0.35; -} -.toctree-wrapper > ul { - list-style: none; - padding: 0; -} -.toctree-wrapper > ul > li.toctree-l1 > span { - font-family: "Work Sans", sans-serif; - line-height: 1.1; - color: #21313a; - margin-top: 21px; - margin-bottom: 10.5px; - font-size: 32px; - text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; - margin-top: 31.5px; - font-weight: 300; -} -.toctree-wrapper > ul > li.toctree-l1 > span small, -.toctree-wrapper > ul > li.toctree-l1 > span .small { - font-weight: normal; - line-height: 1; - color: #21313a; -} -.toctree-wrapper > ul > li.toctree-l1 > span small, -.toctree-wrapper > ul > li.toctree-l1 > span .small { - font-size: 65%; -} -@media (min-width: 1200px) { - .has_code_col .doc-aside .toctree-wrapper > ul > li.toctree-l1 > span { - color: white; - } -} -.toctree-wrapper > ul > li.toctree-l1 > span b, -.toctree-wrapper > ul > li.toctree-l1 > span strong, -.toctree-wrapper > ul > li.toctree-l1 > span a { - font-weight: 400; -} -hr.divider { - border-color: rgba(249, 249, 249, 0.4); - position: absolute; - width: 900%; - margin-left: -13px; -} -main .alert { - padding: 15px; - border-radius: 0; - border-width: 0 0 0 3px; - position: relative; - max-width: 95%; - display: inline-block; - border-color: #b8d9e2; - background-color: #eef6f8; - color: #173038; -} -@media (min-width: 768px) { - main .alert { - padding-left: 5.5em; - } -} -main .alert > p, -main .alert > ul { - margin: .5em 0; -} -main .alert > .alert-title, -main .alert > h3 { - color: #4b9eb6; -} -main .alert > .alert-title:before, -main .alert > h3:before { - content: "\e639"; -} -main .alert > h3, -main .alert > .alert-title { - font-size: 1.642857143em; - line-height: 1em; - margin: 0 0 10px 0; - font-size: 14px; - font-weight: 700; - font-family: "Work Sans", sans-serif; -} -main .alert > h3:before, -main .alert > .alert-title:before { - font-family: 'Material-Design-Icons'; - content: "\e639"; - display: inline-block; - text-rendering: geometricPrecision; - font-size: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - top: 50%; - left: 6px; - bottom: auto; - right: auto; - -webkit-transform: translate(0, -0.15em); - -ms-transform: translate(0, -0.15em); - -o-transform: translate(0, -0.15em); - transform: translate(0, -0.15em); - font-size: 4em; -} -@media (max-width: 768px) { - main .alert > h3:before, - main .alert > .alert-title:before { - display: none; - } -} -main .alert.alert-success { - border-color: #b9dfb9; - background-color: #eef7ee; - color: #183518; -} -main .alert.alert-success > .alert-title, -main .alert.alert-success > h3 { - color: #50af51; -} -main .alert.alert-success > .alert-title:before, -main .alert.alert-success > h3:before { - content: "\e625"; -} -main .alert.alert-info, -main .alert.tip { - border-color: #b8d9e2; - background-color: #eef6f8; - color: #173038; -} -main .alert.alert-info > .alert-title, -main .alert.tip > .alert-title, -main .alert.alert-info > h3, -main .alert.tip > h3 { - color: #4b9eb6; -} -main .alert.alert-info > .alert-title:before, -main .alert.tip > .alert-title:before, -main .alert.alert-info > h3:before, -main .alert.tip > h3:before { - content: "\e639"; -} -main .alert.alert-warning, -main .alert.warning { - border-color: #fceedb; - background-color: #fef9f3; - color: #81500b; -} -main .alert.alert-warning > .alert-title, -main .alert.warning > .alert-title, -main .alert.alert-warning > h3, -main .alert.warning > h3 { - color: #f0ad4e; -} -main .alert.alert-warning > .alert-title:before, -main .alert.warning > .alert-title:before, -main .alert.alert-warning > h3:before, -main .alert.warning > h3:before { - content: "\e6a4"; -} -main .alert.alert-danger { - border-color: #f4cecd; - background-color: #fdf7f7; - color: #611715; -} -main .alert.alert-danger > .alert-title, -main .alert.alert-danger > h3 { - color: #d9534f; -} -main .alert.alert-danger > .alert-title:before, -main .alert.alert-danger > h3:before { - content: "\e6a4"; -} -main .alert.alert-exercise { - border-color: #deddde; - background-color: #f7f7f7; - color: #393639; -} -main .alert.alert-exercise > .alert-title, -main .alert.alert-exercise > h3 { - color: #938e94; -} -main .alert.alert-exercise > .alert-title:before, -main .alert.alert-exercise > h3:before { - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - -o-transform: translate(0, 0); - transform: translate(0, 0); - top: 28px; - content: "\e709"; -} -main .alert.alert-go_to { - border-color: #b8d9e2; - background-color: #eef6f8; - border-width: 2px; - margin: 2em auto; -} -main .alert.alert-go_to a { - color: #25505c; -} -main .alert.alert-go_to > .alert-title, -main .alert.alert-go_to > h3 { - color: #4b9eb6; -} -main .alert.alert-go_to > .alert-title:before, -main .alert.alert-go_to > h3:before { - content: "\e70d"; -} -@media (min-width: 1200px) { - main .alert.doc-content { - max-width: 55%; - } -} -img.img-responsive { - margin-bottom: 10.5px; -} -.figure h4 { - margin: 0.5em 0 1.5em; - padding-left: 1em; - font-size: 1em; - font-style: italic; -} -.pq-patch { - background: #dcddde; -} -.pq-patch em { - padding-left: 10px; -} -span.menuselection { - font-weight: 600; -} -.list-group-item { - border: none; - background: transparent; -} -dt { - margin: .5em 0 .3em; -} -blockquote { - font-family: Georgia, "Times New Roman", Times, serif; - font-weight: 600; - font-style: italic; -} -blockquote footer { - font-family: -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif; - background: transparent; - text-align: left; - color: #666c75; - font-weight: normal; - font-style: normal; -} -blockquote footer cite { - font-style: italic; -} -@media (min-width: 992px) { - blockquote { - border-left: 3px solid rgba(33, 183, 153, 0.5); - } -} -code, -.code { - font-size: 0.8em; - font-weight: 600; - color: #0a352d; - background-color: #def9f4; -} -.btn { - border-radius: 0; -} -dd { - margin-left: 40px; -} -.code-fields { - font-size: .9em; - border: 2px solid #dcddde; -} -.code-fields .code-field-name { - font-weight: 600; - color: #21313a; -} -.code-fields .code-field-name:after { - content: ":"; -} -@media screen and (min-width: 992px) { - .code-fields .code-field-name { - font-size: .9em; - text-align: right; - } -} -.code-fields ul { - list-style: none; -} -.code-fields ul strong { - color: #21313a; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; -} -.code-fields ul em { - color: #21313a; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-weight: 600; - font-size: .9em; -} -table, -.table { - font-size: 0.9em; -} -.code-class, -.code-staticmethod, -.code-classmethod, -.code-method, -.code-function, -.code-attribute, -.code-data { - padding-left: 20px; - margin-bottom: 2em; -} -.code-class > h6, -.code-staticmethod > h6, -.code-classmethod > h6, -.code-method > h6, -.code-function > h6, -.code-attribute > h6, -.code-data > h6 { - margin-left: -20px; - margin-bottom: 0.3em; -} -.code-class > h6 .viewcode-link, -.code-staticmethod > h6 .viewcode-link, -.code-classmethod > h6 .viewcode-link, -.code-method > h6 .viewcode-link, -.code-function > h6 .viewcode-link, -.code-attribute > h6 .viewcode-link, -.code-data > h6 .viewcode-link { - display: none; - float: right; -} -.code-class > h6:hover .viewcode-link, -.code-staticmethod > h6:hover .viewcode-link, -.code-classmethod > h6:hover .viewcode-link, -.code-method > h6:hover .viewcode-link, -.code-function > h6:hover .viewcode-link, -.code-attribute > h6:hover .viewcode-link, -.code-data > h6:hover .viewcode-link { - display: inline; -} -.code-class p, -.code-staticmethod p, -.code-classmethod p, -.code-method p, -.code-function p, -.code-attribute p, -.code-data p { - margin-bottom: .5em; -} -@media (min-width: 1200px) { - main.has_code_col .doc-aside { - color: #dcddde; - } - main.has_code_col .doc-aside pre { - font-size: 12px; - } -} -article.doc-body { - background: #ffffff; -} -article.doc-body section.doc-content:first-of-type > p:first-child { - margin-bottom: 21px; - font-size: 17px; - font-weight: 300; - line-height: 1.4; -} -@media (min-width: 768px) { - article.doc-body section.doc-content:first-of-type > p:first-child { - font-size: 22.5px; - } -} -article.doc-body.index-category { - min-height: 300px; - min-height: 30vh; -} -article.doc-body.index-category li.toctree-l1 { - padding: 5px 0; -} -.content-switcher { - margin-top: 1.5em; -} -.content-switcher > ul { - font-size: 10px; - padding: 0; - margin: 0 0 10px; - -webkit-transition: all 0.2s ease; - -o-transition: all 0.2s ease; - transition: all 0.2s ease; -} -.content-switcher > ul > li { - color: text-color; - font-weight: 600; - border-bottom: 1px solid transparent; - margin: 5px; - font-size: 1.3em; - cursor: pointer; - display: inline-block; - list-style: none; - -webkit-transition: all 0.2s; - -o-transition: all 0.2s; - transition: all 0.2s; - opacity: 0.6; - filter: alpha(opacity=60); -} -.content-switcher > ul > li.active { - border-bottom: 1px solid #21b799; - opacity: 1; - filter: alpha(opacity=100); -} -.content-switcher:hover > ul > li { - opacity: 1; - filter: alpha(opacity=100); -} -.content-switcher > .tabs > * { - display: none; - max-width: 100%; - overflow-x: auto; -} -.content-switcher > .tabs > .active { - display: block; -} -.highlight { - background: #21272b; - color: #dcddde; - border-radius: 4px; - margin-bottom: 10.5px; -} -.highlight pre { - margin-bottom: 0; -} -pre { - font-size: 0.8em; - color: #dcddde; - background: #21272b; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-weight: 600; - position: relative; - border: none; - max-width: 100%; - overflow: auto; - margin: 0; - margin-bottom: 10.5px; -} -#mask { - opacity: 0; - filter: alpha(opacity=0); - position: fixed; - z-index: 700; - top: 0; - left: 0; - width: 100%; - height: 0; - background-color: rgba(0, 0, 0, 0.2); - -webkit-transition: opacity 0.3s; - -o-transition: opacity 0.3s; - transition: opacity 0.3s; -} -#mask.active { - opacity: 1; - filter: alpha(opacity=100); - display: block; - width: 100%; - height: 100%; - -webkit-transition: opacity 0.3s; - -o-transition: opacity 0.3s; - transition: opacity 0.3s; -} #thinking-modular > .clearfix.themes, #thinking-modular > .dl-horizontal dd.themes, #thinking-modular > .container.themes, @@ -12489,8 +12202,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/_extensions/odoo/static/style.less b/_extensions/odoo/static/style.less index 6a16802f8..4ea0bfc49 100644 --- a/_extensions/odoo/static/style.less +++ b/_extensions/odoo/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"; @@ -28,12 +29,12 @@ background-color: @footer-bg-color; color: @gray-lighter; } - + > .o_sub_nav #o_sub-menu #searchbox { display: flex; align-items: center; justify-content: center; - + > form { display: flex; flex-grow: 1; @@ -85,7 +86,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; @@ -266,586 +266,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; - padding-top: 56%; - 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_bold; - font-family: @headings-font-family; - color: @headings-color; - margin: 0; - background-color: white; - font-size: 14px; - line-height: 1.2; - 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)); - } - } - - .toc-single-entry .card figcaption { - @media screen and(min-width: @screen-md){ - font-size: 1.5em; - padding: 20px 15px; - } - } - - .col-md-6 .card, .col-md-4 .card{ - @media screen and(min-width: @screen-md){ - min-height: 300px; - figcaption{ - font-size: 1.5em; - padding: 20px 15px; - } - } - } - - &.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 { - position: relative; - overflow: hidden; - - margin: 0; - padding: 0 0 2%; - - .o-gradient(); - .animation(fadeIn 1s); - .box-shadow(none); - .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 2%; - } - @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%); - } - - &: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;} - -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-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 @@ -854,5 +274,3 @@ pre { #thinking-modular > .clearfix.themes { margin-bottom: 3em; } - - diff --git a/_extensions/odoo/static/typography.less b/_extensions/odoo/static/typography.less index 32fb821f8..0f4528334 100644 --- a/_extensions/odoo/static/typography.less +++ b/_extensions/odoo/static/typography.less @@ -1,21 +1,20 @@ // ============================================================================= // Typography // ============================================================================= +@margin-base: 5px; // Font rendering // ---------------------------------------- body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } // Headings // ---------------------------------------- -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { +h1, h2, h3, h4, h5, h6 { text-rendering: geometricPrecision; - letter-spacing: -0.01em; - line-height: 1.4; @media (min-width: @screen-lg-min) { .has_code_col .doc-aside &{ @@ -24,35 +23,152 @@ h1, h2, h3, h4, h5, h6, } } -h1, h2, .h1, .h2 { - margin-top: @line-height-computed * 1.5; - font-weight: @fw_light; - b, strong, a { - font-weight: @fw_regular; +.headings-margin-small () { + > h2, > h3, > h4, > h5, > h6 { + margin-top: @margin-base*2; } } - -h3, .h3, h4, .h4, h5, h6, .h5, .h6 { - font-weight: @fw_regular; - b, strong, a { - font-weight: @fw_medium; - } -} -h4, .h4, h5, h6, .h5, .h6 { - margin-top: @line-height-computed; - margin-bottom: (@line-height-computed / 3); +.headings-bordered () { + padding-bottom: @margin-base; + border-bottom: 2px solid #f4f6f7; } -// Lists -// ---------------------------------------- +article.doc-body { -ul, ol { - &:not(:empty) { - margin-bottom: (@line-height-computed / 2); + // Vertical rhythm + > section { + padding-bottom: @margin-base*2; + + > :last-child { + margin-bottom: 0; + } + + > h2, > h3, > h4, > h5, > h6 { + margin-bottom: @margin-base; + margin-top: @margin-base*8; + + &:last-child { + margin-bottom: -@margin-base*6; + .headings-bordered(); + } + } + + > h2 { + .headings-bordered(); + } + + > h5, > h6 { + font-weight: 500; + } + + &:first-of-type { + .headings-margin-small(); + + &:empty, &.hidden { + display: none; + + + section { + .headings-margin-small(); + } + } + } } - ul, ol { - &:not(:empty) { - margin-bottom: (@line-height-computed / 3); + + // Typography components + > section { + line-height: 26px; + } + + a, a:hover { + text-decoration: underline; + } + + blockquote { + font-size: 15px; + line-height: 26px; + &:not(:first-child) { + margin-top: 17px; + } + } + + dl { + dt code { + font-size: 0.9em; + } + + dd { + margin: 2px 0 @grid-gutter-width/2 @grid-gutter-width/2; + } + } + + ol, ul { + line-height: 26px; + padding: 0; + list-style: none; + counter-reset: a; + + li { + margin: 5px 0; + position: relative; + padding-left: 30px; + + &:before { + content: ""; + display: block; + .o-position-absolute(9px, @left: 10px); + .square(6px); + border-radius: 50%; + background: #939da3; + } + + p { + margin: 0; + } + + h2, h3, h4, h5, h6 { + margin-top: 0; + padding-top: 0; + } + } + } + + ol > li:before { + counter-increment: a; + content: counter(a); + color: #fff; + font-size: 13px; + font-weight: bold; + line-height: 1; + text-align: center; + padding: 4px 0; + .square(20px); + border-radius: 10px; + .o-position-absolute(3px, @left: 0); + } + + + .o_has_permalink_marker { + transition: all, 0.3s; + padding-left: 0; + + i { + cursor: pointer; + visibility: hidden; + margin-left: 0.1em; + font-size: 0.8em; + padding: 0.2em; + .rotate(-45deg); + } + + &:hover { + i { + visibility: visible; + } + } + + &.o_marked { + padding-left: 10px; + background-color: #fff7d1; } } } diff --git a/_extensions/odoo/static/variables.less b/_extensions/odoo/static/variables.less index 273994118..d337f7968 100644 --- a/_extensions/odoo/static/variables.less +++ b/_extensions/odoo/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;