846 lines
16 KiB
Plaintext
846 lines
16 KiB
Plaintext
// Assets
|
|
@import "bootstrap-3.3.6/less/bootstrap";
|
|
@import "mdi";
|
|
|
|
// Define custom variables for style and layout.
|
|
@import "variables";
|
|
|
|
@import "mixins";
|
|
@import "animations";
|
|
@import "typography";
|
|
@import "layout";
|
|
@import "header";
|
|
@import "footer";
|
|
@import "aside";
|
|
@import "print";
|
|
|
|
|
|
|
|
// Documentation header's customizations
|
|
// --------------------------------------
|
|
// Header style is based on odoo.com and can be find in the header.less file.
|
|
// The following rules are specific for the documentation website.
|
|
|
|
.o_main_header {
|
|
@o-sub-inner-h: @w-sub-nav-height - 2;
|
|
|
|
&.o_mobile_menu_opened .mdi-navigation-menu {
|
|
background-color: @footer-bg-color;
|
|
color: @gray-lighter;
|
|
}
|
|
|
|
> .o_sub_nav #o_sub-menu .o_breadcrumb {
|
|
|
|
@media screen and (min-width: @screen-sm-min) {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
margin: 0 0 0 -15px;
|
|
height: @o-sub-inner-h;
|
|
line-height: @o-sub-inner-h;
|
|
}
|
|
|
|
> li {
|
|
display: block;
|
|
&, > a {
|
|
height: 30px;
|
|
line-height: 2;
|
|
}
|
|
|
|
&:before {
|
|
font-weight: @fw_bold;
|
|
float: left;
|
|
padding: 0;
|
|
margin-right: -1px;
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (min-width: @screen-sm-min) {
|
|
margin-left: 0;
|
|
margin-right: -1px;
|
|
height: @o-sub-inner-h;
|
|
line-height: @o-sub-inner-h;
|
|
display: inline-block;
|
|
|
|
&:before {
|
|
display: block;
|
|
}
|
|
|
|
> a {
|
|
padding: 0;
|
|
height: @o-sub-inner-h;
|
|
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;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&:last-child > a {
|
|
max-width: 170px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1980px) {
|
|
> a {
|
|
max-width: 120px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: @screen-lg-min) {
|
|
&:last-child > a {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-xs-max) {
|
|
> a {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
> a:before {
|
|
content: "|";
|
|
margin-right: 0.5em;
|
|
}
|
|
&:nth-child(1) > a:before {
|
|
display: none;
|
|
}
|
|
&:nth-child(2) > a:before {
|
|
padding-left: 0.5em;
|
|
}
|
|
&:nth-child(3) > a:before {
|
|
padding-left: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.index {
|
|
@media screen and (max-width: @screen-xs-max ){
|
|
> .o_sub_nav #o_sub-menu .o_breadcrumb {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .o_sub_nav {
|
|
border-radius: 0;
|
|
|
|
.navbar-toggle {
|
|
padding: 0 15px;
|
|
margin: 0;
|
|
height: @o-sub-inner-h;
|
|
background-color: @gray-lighter;
|
|
|
|
span {
|
|
line-height: @o-sub-inner-h;
|
|
}
|
|
|
|
&.collapsed {
|
|
background-color: @w-header-white;
|
|
}
|
|
}
|
|
|
|
.collapse .nav {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
|
|
&:first-of-type {
|
|
margin-right: -15px;
|
|
}
|
|
|
|
> li {
|
|
margin: 0;
|
|
|
|
> a {
|
|
padding:0 0 0 10px;
|
|
}
|
|
|
|
&.divider {
|
|
height: auto;
|
|
line-height: 1;
|
|
border-bottom: 1px solid @gray-light;
|
|
padding: 4px 0px 5px;
|
|
}
|
|
|
|
&.dropdown {
|
|
.o-doc-dropdown();
|
|
}
|
|
}
|
|
}
|
|
|
|
> .container > .collapse > .nav,
|
|
> .container .o_breadcrumb {
|
|
> li > a {
|
|
@media screen and (min-width: @screen-sm-min) and ( max-width: @screen-sm-max ) {
|
|
font-size: 10px;
|
|
font-weight: @fw_semibold;
|
|
}
|
|
}
|
|
}
|
|
|
|
li.dropdown {
|
|
.o-doc-dropdown();
|
|
}
|
|
}
|
|
|
|
|
|
&.o_inverted:not(.o_scrolled) {
|
|
@media (max-width: @screen-xs-max) {
|
|
.o_sub_nav {
|
|
display: block;
|
|
margin-bottom: 0;
|
|
|
|
.nav {
|
|
margin: 0 0 0 -8px;
|
|
|
|
> li > a{
|
|
color: @text-color;
|
|
|
|
&:hover, &:focus {
|
|
color: @header-link-normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.o_sub_nav_actions {
|
|
margin-left: 10px;
|
|
|
|
> li {
|
|
background: fade(@gray-lightest, 10%);
|
|
margin-right: 1px;
|
|
|
|
&:last-child {
|
|
margin-right: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.o_scrolled {
|
|
.o_sub_nav {
|
|
#o_doc_title {
|
|
.opacity(1);
|
|
.translate(0, 0);
|
|
.transition(~'opacity 1s, transform 0.3s');
|
|
}
|
|
|
|
.o_sub_nav_actions {
|
|
margin-left: 10px;
|
|
|
|
&:first-of-type {
|
|
margin-right: -25px;
|
|
}
|
|
|
|
> li {
|
|
background: fade(@gray, 10%);
|
|
margin-right: 1px;
|
|
|
|
&:last-child {
|
|
margin-right: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#wrap {
|
|
z-index: 1;
|
|
position: relative;
|
|
background: @gray-lightest;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
main {
|
|
z-index: 0;
|
|
position: relative;
|
|
margin: -10px auto 0;
|
|
display: block;
|
|
border-radius: 2px;
|
|
background-color: @doc_paper;
|
|
.deep-1;
|
|
|
|
@media screen and(min-width: @screen-sm) {
|
|
margin: -40px auto 0px;
|
|
}
|
|
}
|
|
|
|
main.index {
|
|
.box-shadow(none);
|
|
padding-top: 50px;
|
|
background:transparent;
|
|
|
|
.row > h2 { // section title
|
|
margin-bottom: 1em;
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
.card {
|
|
border-radius: 2px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: @card_margin-bottom;
|
|
min-height: @card_min-height;
|
|
background-color: @doc_paper;
|
|
will-change: transform;
|
|
.deep-2;
|
|
.transform(scale3d(0, 0, 0) translate3d(50px, 0, 0));
|
|
.transition( all .5s @o-ease );
|
|
|
|
a, a:hover {
|
|
color: @text-color;
|
|
text-decoration: none;
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
.card-img{
|
|
.transition(all .5s @o-ease);
|
|
overflow:hidden;
|
|
span {
|
|
position: relative;
|
|
display: block;
|
|
background-size: cover;
|
|
background-position: 50%;
|
|
will-change: transform;
|
|
.square(100%);
|
|
.transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
|
|
.transform-origin(50%);
|
|
.opacity(1);
|
|
.transition(all .5s @o-ease);
|
|
}
|
|
}
|
|
figcaption {
|
|
.opacity(1);
|
|
display: block;
|
|
font-weight: @fw_regular;
|
|
font-family: @headings-font-family;
|
|
color: @headings-color;
|
|
margin: 0;
|
|
background-color: white;
|
|
font-size: 1.2em;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
.o-position-absolute(0);
|
|
.transition(all .5s @o-ease );
|
|
}
|
|
|
|
&:hover .card-img span{
|
|
.transform(scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0));
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
padding: 10% 0 8%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
.o-gradient();
|
|
.animation(fadeIn 1s);
|
|
.box-shadow(none);
|
|
.transform-origin(50% 0px 0px);
|
|
|
|
@media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) {
|
|
padding-top: 12%;
|
|
}
|
|
|
|
#wrap.index & {
|
|
padding: 0 0 4%;
|
|
|
|
@media screen and (min-width: @screen-sm-min) {
|
|
padding-top: 12%;
|
|
}
|
|
|
|
@media screen and (min-width: @screen-lg-min) {
|
|
padding-top: 8%;
|
|
}
|
|
}
|
|
|
|
&.stacked{
|
|
background:transparent;
|
|
.transition(background 1s);
|
|
}
|
|
|
|
&:before {
|
|
content:"";
|
|
display: block;
|
|
background-image: url("img/banner_bg.png");
|
|
background-size: cover;
|
|
background-position: 50%;
|
|
.o-position-absolute(0, 0);
|
|
.square(100%);
|
|
}
|
|
|
|
&:hover {
|
|
.box-shadow(none);
|
|
}
|
|
|
|
.card-img {
|
|
background-image: url("img/banner_bg.png");
|
|
}
|
|
|
|
@media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) {
|
|
padding: 12% 0 8%;
|
|
|
|
#wrap.index & {
|
|
padding: 12% 0 4%;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
h1 {
|
|
.h2;
|
|
color: white;
|
|
|
|
@media screen and (min-width: @screen-sm-min) {
|
|
.h1;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card.top.has_banner {
|
|
background: @footer-bg-color;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
.card-img {
|
|
opacity: 0.35;
|
|
}
|
|
}
|
|
|
|
// the first level of an application toctree should look more like sections
|
|
|
|
.toctree-wrapper > ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
> li.toctree-l1 > span {
|
|
font-family: @headings-font-family;
|
|
// copy h2 content :/
|
|
.h2()
|
|
}
|
|
}
|
|
|
|
// Elements
|
|
// -----------------------------------------------
|
|
|
|
hr.divider {
|
|
border-color: fadeout(@gray-lightest, 60%);
|
|
position: absolute;
|
|
width: 900%;
|
|
margin-left: -13px;
|
|
}
|
|
|
|
main .alert {
|
|
padding: 15px;
|
|
border-radius: 0;
|
|
border-width: 0 0 0 3px;
|
|
position: relative;
|
|
max-width: 95%;
|
|
display: inline-block;;
|
|
@media (min-width: @screen-sm-min){
|
|
padding-left: 5.5em;
|
|
}
|
|
> p, > ul {
|
|
margin: .5em 0;
|
|
}
|
|
.alert-info; // 'INFO' is the default style
|
|
|
|
> h3, > .alert-title {
|
|
font-size: 1.642857143em;
|
|
line-height: 1em;
|
|
margin: 0 0 10px 0;
|
|
font-size: 14px;
|
|
font-weight: @fw_bold;
|
|
font-family: @headings-font-family;
|
|
|
|
&:before {
|
|
.mdi-icon("\e639");
|
|
.o-position-absolute(50%, auto, auto, 6px);
|
|
.translate(0, -0.15em);
|
|
font-size: 4em;
|
|
|
|
@media (max-width: @screen-sm-min){
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
&.alert-success {
|
|
border-color: lighten(@brand-success, 30%);
|
|
background-color: lighten(@brand-success, 45%);
|
|
color: darken(@brand-success, 35%);
|
|
|
|
> .alert-title, > h3 {
|
|
color: @brand-success
|
|
}
|
|
> .alert-title:before, > h3:before {
|
|
content: "\e625";
|
|
}
|
|
}
|
|
&.alert-info, &.tip {
|
|
border-color: lighten(@brand-info, 30%);
|
|
background-color: lighten(@brand-info, 45%);
|
|
color: darken(@brand-info, 35%);
|
|
|
|
> .alert-title, > h3 {
|
|
color: @brand-info
|
|
}
|
|
> .alert-title:before, > h3:before {
|
|
content: "\e639";
|
|
}
|
|
}
|
|
&.alert-warning, &.warning {
|
|
border-color: lighten(@brand-warning, 30%);
|
|
background-color: lighten(@brand-warning, 35%);
|
|
color: darken(@brand-warning, 35%);
|
|
|
|
> .alert-title, > h3 {
|
|
color: @brand-warning
|
|
}
|
|
> .alert-title:before, > h3:before {
|
|
content: "\e6a4";
|
|
}
|
|
}
|
|
&.alert-danger {
|
|
border-color: lighten(@brand-danger, 30%);
|
|
background-color: lighten(@brand-danger, 40%);
|
|
color: darken(@brand-danger, 35%);
|
|
|
|
> .alert-title, > h3 {
|
|
color: @brand-danger
|
|
}
|
|
> .alert-title:before, > h3:before {
|
|
content: "\e6a4";
|
|
}
|
|
}
|
|
&.alert-exercise {
|
|
border-color: lighten(@doc_exercise, 30%);
|
|
background-color: lighten(@doc_exercise, 40%);
|
|
color: darken(@doc_exercise, 35%);
|
|
|
|
> .alert-title, > h3 {
|
|
color: @doc_exercise;
|
|
}
|
|
> .alert-title:before, > h3:before {
|
|
.translate(0;0);
|
|
top: 28px;
|
|
content: "\e709";
|
|
}
|
|
}
|
|
|
|
&.alert-go_to {
|
|
border-color: lighten(@brand-info, 30%);
|
|
background-color: lighten(@brand-info, 45%);
|
|
border-width: 2px;
|
|
margin: 2em auto;
|
|
a{
|
|
color: darken(@brand-info, 25%);
|
|
}
|
|
> .alert-title, > h3 {
|
|
color: @brand-info
|
|
}
|
|
> .alert-title:before, > h3:before {
|
|
content: "\e70d";
|
|
}
|
|
}
|
|
|
|
&.doc-content{
|
|
@media (min-width: @screen-lg-min) {
|
|
max-width: 55%;
|
|
}
|
|
}
|
|
}
|
|
|
|
img.img-responsive {
|
|
margin-bottom: (@line-height-computed / 2);
|
|
}
|
|
|
|
.figure {
|
|
h4 {
|
|
margin: 0.5em 0 1.5em;
|
|
padding-left: 1em;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.pq-patch{
|
|
background: @gray-light;
|
|
em {padding-left: 10px;}
|
|
}
|
|
|
|
span.menuselection{
|
|
font-weight: @fw_semibold;
|
|
}
|
|
|
|
.list-group-item {
|
|
border: none;
|
|
background:transparent;
|
|
}
|
|
|
|
dt { margin: .5em 0 .3em;}
|
|
|
|
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
|
|
|
|
// Theme tutorial
|
|
#thinking-modular > .clearfix.themes {
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
|