odoo/doc/_extensions/odoo/static/style.less

988 lines
19 KiB
Plaintext

// Assets
@import "bootstrap-3.3.4/less/bootstrap";
@import "mdi";
// Define custom variables for style and layout.
@import "variables";
// Define custom mixins missing in Bootstrap
@import "mixins";
@import "animations";
@import "typography";
@import "layout";
html, body {
.antialiased;
}
// Header
// -----------------------------------
header {
background: @doc_violet;
.transition(background 1s);
&.stacked{
background:transparent;
.transition(background 1s);
}
}
#main-back {
float : left;
.transition(margin .5s);
a:hover{
border-bottom: 1px solid transparent!important;
}
}
.index #main-back {
visibility: hidden;
}
#main_title {
line-height: 2.4;
color: white;
font-weight: 900;
white-space: nowrap;
position: absolute;
bottom: 0;
margin:0;
will-change: transform;
.transform-origin(0% 100% 0px);
}
.index #main_title {
font-weight: 300;
&:before {
content:"";
display: inline-block;
width: 75px;
height: 25px;
margin-right: 9px;
background-image: url(img/odoo_logo_white.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
text-decoration: none;
.translate(0; 3px);
@media screen and(min-width: @screen-sm){
width: 140px;
height: 48px;
.translate(0; 5px);
}
}
}
#main_navbar {
z-index: @zIndex--header;
background-color: transparent;
border-radius: 0;
border: none;
margin: 0;
min-height: 45px;
width: 100%;
position: fixed;
top:0;
.box-shadow(none);
.navbar-toggle {
padding: 7px 10px 9px;
.icon-bar {
background: #FFF;
}
}
.navbar-nav > li > a {
color: white;
border-radius: 0;
padding: 5px;
margin: 5px;
background: transparent;
border-bottom: 1px solid transparent;
.transition(border .2s);
&:hover, &:active {
background-color: transparent;
border-bottom: 1px solid white;
}
}
.navbar-nav {
> li {
height: 45px;
.transition(background-color 500ms);
&.open{
background-color: fadeout(@doc_violet, 10%);
background-color: transparent;
> a:hover{
background:transparent;
border-bottom: 1px solid transparent;
};
}
}
}
.dropdown-menu {
box-shadow: none;
border:none;
background-color: fadeout(@doc_violet, 10%);
border-top: none;
border-radius: 0;
padding: 0;
margin-top: 0px;
.transition(background-color 500ms);
a {
color: white;
&:hover{
background-color: lighten(@doc_violet, 10%);
}
}
}
&.stacked {
background-color: @doc_violet;
.navbar-nav > li > a {
&:hover, &:active {
background-color: fadeout(#fff, 80%);
background-color: transparent;
}
}
.dropdown-menu {
background-color: darken(@doc_violet,5%);
}
.navbar-nav {
> li {
&.open{
background-color: darken(@doc_violet,5%);
> a:hover{background:transparent};
}
}
}
}
@media screen and (max-width: 767px) {
.open .dropdown-menu {
position: absolute;
width: 100%;
}
}
}
#main_navbar {
.container-fluid,
.navbar-header,
.navbar-header .navbar-right,
.navbar-header .navbar-right li,
.navbar-header .navbar-left,
.navbar-header .navbar-left > li {
height:100%;
min-height: 45px;
}
li.versions {
margin-left: 10px;
height: auto;
cursor: pointer;
background-color: darken(@doc_violet,5%);
> a {
cursor: pointer;
&:hover{
border-bottom: 1px solid transparent;
}
}
.dropdown-menu{
min-width: 80px;
}
&.open{
background-color: darken(@doc_violet,5%);
}
}
}
main {
z-index: 0;
position: relative;
margin: 0px auto;
display: block;
border-radius: 2px;
color: @doc_text;
background-color: @doc_paper_dark;
.fadeIn;
.shadow-0;
@media screen and(min-width: @screen-sm) {
.fadeInUp;
}
}
main.index {
.animation-name(none);
.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;
margin-bottom: @card_margin-bottom;
min-height: @card_min-height;
background-color: @doc_paper;
will-change: transform;
.shadow-1;
.transform(scale3d(0, 0, 0) translate3d(50px, 0, 0));
.transition( all .5s @ease-material);
a, a:hover {
color: @doc_text;
text-decoration: none;
border-radius: 2px 2px 0 0;
}
.card-img{
.transition(all .5s @ease-material-3);
overflow:hidden;
span {
height: 100%;
width: 100%;
position: relative;
display: block;
background-size: cover;
background-position: 50%;
will-change: transform;
.transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
.transform-origin(50%);
.opacity(1);
.transition(all .5s @ease-material);
}
}
figcaption {
.opacity(1);
display: block;
font-weight: 400;
font-family: @headings-font-family;
color: @doc_heading;
margin: 0;
background-color: white;
font-size: 1.2em;
top: 0;
position: absolute;
width: 100%;
padding: 8px 12px;
.transition(all .5s @ease-material);
}
&: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.top {
background: @doc_violet;
.animation(fadeIn 1s);
.box-shadow(none);
.transform-origin(0px 0px 0px);
&.stacked{
background:transparent;
.transition(background 1s);
}
&:hover {
.box-shadow(none);
}
@media (min-width:@w-size-medium) {
padding-top: 10%;
padding-bottom: 15%;
}
}
.card-img {
top: 0;
left: 0;
display: block;
position: absolute;
background-image: url("img/geometric_gradient.png");
background-size: cover;
background-position: 50%;
.translate3d(0;0;0);
.square(100%);
}
// Elements
// -----------------------------------------------
hr.divider {
border-color: fadeout(@doc_bg, 60%);
position: absolute;
width: 900%;
margin-left: -13px;
}
main .alert, main .deprecated {
padding: 15px;
border-radius: 0;
border-width: 0 0 0 3px;
position: relative;
max-width: 95%;
display: inline-block;;
@media (min-width: @w-size-small){
padding-left: 5.5em;
}
> p, > ul {
margin: .5em 0;
}
.alert-info; // 'INFO' is the default style
> h3, > .alert-title, > p > .versionmodified {
line-height: 1em;
margin: 0 0 10px 0;
font-size: 14px;
font-weight: bold;
font-family: @headings-font-family;
&:before {
font-family: 'Material-Design-Icons';
content: "\e639";
display: inline-block;
text-rendering: geometricPrecision;
transform: translate(0, -0.15em);
position: absolute;
top: 50%;
left: 6px;
font-size: 4em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (max-width: @w-size-small){
display:none;
}
}
}
&.alert-success {
border-color: lighten(@doc_success, 30%);
background-color: lighten(@doc_success, 45%);
color: darken(@doc_success, 35%);
> .alert-title, > h3 {
color: @doc_success
}
> .alert-title:before, > h3:before {
content: "\e625";
}
}
&.alert-info, &.tip {
border-color: lighten(@doc_info, 30%);
background-color: lighten(@doc_info, 45%);
color: darken(@doc_info, 35%);
> .alert-title, > h3 {
color: @doc_info;
&:before {
content: "\e639";
}
}
}
&.alert-warning, &.warning, &.deprecated {
border-color: lighten(@doc_warning, 30%);
background-color: lighten(@doc_warning, 35%);
color: darken(@doc_warning, 35%);
> .alert-title, > h3, > p > .versionmodified {
color: @doc_warning;
&:before {
content: "\e6a4";
}
}
}
&.alert-danger {
border-color: lighten(@doc_danger, 30%);
background-color: lighten(@doc_danger, 40%);
color: darken(@doc_danger, 35%);
> .alert-title, > h3 {
color: @doc_danger;
&: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;
&:before {
.translate(0;0);
top: 28px;
content: "\e709";
}
}
}
&.doc-content{
@media (min-width: @w-size-large) {
max-width: 55%;
}
}
}
main .deprecated .versionmodified {
display: block;
}
.pq-patch{
background: rgb(194, 194, 194);
em {padding-left: 10px;}
}
span.menuselection{
font-weight: bold;
}
.list-group-item {
border: none;
background:transparent;
}
dt { margin: .5em 0 .3em;}
blockquote {
font-family: Georgia, serif;
font-weight: bold;
font-style: italic;
footer {
font-family: sans-serif;
background: transparent;
text-align: left;
color: @doc_text;
font-weight: normal;
font-style: normal;
cite {
font-style: italic;
}
}
@media (min-width:@w-size-medium) {
border-left: 3px solid fade(@doc_accent, 50%);
}
}
code, .code {
font-weight: bold;
color: darken(@doc_accent, 30%);
background-color: lighten(@doc_accent, 50%);
}
.btn {
border-radius: 0;
}
dd {
margin-left: 40px;
}
.code-fields {
font-size: .9em;
border: 2px solid #EAEAEA;
.code-field {
}
.code-field-body {
}
.code-field-name {
font-weight: bold;
color: @doc_heading;
&:after{
content:":";
}
@media screen and (min-width: @w-size-medium ){
font-size: .9em;
text-align: right;
}
}
ul {
list-style: none;
strong {
color: @doc_heading;
font-family:@font-family-monospace;
}
em {
color: @doc_heading;
font-family:@font-family-monospace;
font-weight: bold;
font-size: .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;
}
}
aside{
background: rgb(253, 253, 253);
margin-top: 45px;
}
.navbar-aside, #navClone {
position: relative;
overflow: hidden;
background-color: @doc_paper_dark;
.box-shadow(inset 0px 0 40px rgba(114, 122, 142, .1));
&.affix {
z-index: 2;
top: 45px;
position:fixed;
backface-visibility: hidden;
@media (max-width:@w-size-medium) {
display: none;
}
}
> ul.list-group{
overflow-y: scroll;
z-index: 0;
}
> h3 {
margin:0;
padding: 15px 0 10px;
text-transform: uppercase;
font-weight: 600;
font-size: 16px;
color: @doc_text;
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(@doc_text, 90%);
.box-shadow(inset 0px 0 40px rgba(114, 122, 142, .1));
text-align: center;
.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;
}
}
> .list-group {
margin: 0;
}
.gith-container {
margin:0;
z-index: 1;
position: relative;
overflow-x:hidden;
.box-shadow(0 -10px 9px -10px #d2d2d2;);
.gith-link{
font-weight: 600;
color: @doc_text;
text-decoration: none;
display: inline-block;
position:relative;
margin: 10px 0;
//z-index: 1;
.transition(color .2s);
&:hover{
color: @doc_heading;
text-decoration: none;
}
&:before {
.size(20px;20px);
.opacity(.5);
content:"";
position:relative;
background-image: url("img/github-square_32.png");
background-size: 100%;
display: inline-block;
vertical-align: middle;
.translate(0;-1px);
.transition(opacity .2s);
}
&:hover, &:focus{
&:before {
.opacity(1);
}
}
}
}
// All levels
ul {
padding:0;
position:relative;
margin-bottom: 0!important;
ul {
max-height: 0;
overflow:hidden;
}
li {
padding: 0;
position:relative;
border-radius: 0;
border-bottom: 1px solid fadeout(@doc_text, 90%);
> a {
font-size: 0.7em;
border-left: 5px solid transparent;
margin: 0;
padding: 8px 0 8px 15px;
color: @doc_heading;
font-weight: bold;
display: block;
border-radius: 0;
line-height: 1.2;
background: darken(@doc_paper_dark, 10%);
border-bottom: none;
&:hover, &:active, &:focus {
text-decoration: none;
border-radius: 0;
background: darken(@doc_paper_dark, 15%);
border-left: 5px solid fadeout(@doc_accent, 50%);
}
}
&:first-child, &:last-child{
border-radius:0;
}
}
}
li.active {
border-color: transparent;
background: darken(@doc_paper_dark, 5%);
border-bottom: 1px solid fadeout(@doc_text, 90%);
border-left: 5px solid @doc_accent, 50%;
&:hover, &:active, &:focus{
border-color: transparent;
background: darken(@doc_paper_dark, 5%);
border-bottom: 1px solid fadeout(@doc_text, 90%);
border-left: 5px solid @doc_accent, 50%;
}
> a {
border-left: 5px solid @doc_accent;
}
}
// First level
> ul > li {
border-radius: 0;
padding:0;
background: darken(@doc_paper_dark, 5%);
border-bottom: 2px solid fadeout(@doc_text, 90%);
> a {
font-size: 0.9em;
color: @doc_heading;
padding: 12px 30px 12px 5px;
background: darken(@doc_paper_dark, 5%);
}
&.parent{
> a:after {
content:"\e7c1";
position:absolute;
right: 10px;
font-family: "Material-Design-Icons";
opacity: 0.5;
}
}
&.active {
>a {
border-bottom: inherit;
}
ul{
max-height: 10000px;
}
&.parent{
> a:after {
opacity:1;
color: @doc_accent;
}
}
}
}
}
.floating_action_container {
position: fixed;
right: 8px;
bottom: 8px;
width: auto;
z-index: @zIndex--float_action;
@media (min-width:@w-size-medium) {
display: none;
}
}
#floating_action {
width: 56px;
height: 56px;
display: inline-block;
z-index: 0;
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: @doc_accent;
.transition(transform 500ms @ease-material);
i {
color: white;
}
&.active {
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;
border-radius: 2px;
.transition(all 0.5s);
visibility: hidden;
.box-shadow(0 0 0 transparent);
.content {
margin:0;
li {
border: none;
border-top: 1px solid #DDD;
&:first-child{
border-top: none;
}
}
a {
display: inline-block;
cursor: pointer;
color: @doc_heading;
text-decoration: none;
float: left;
width: 100%;
padding: 5px 10px;
}
.opacity(0);
}
.bubble {
position: absolute;
.size(1px; 1px);
background: @doc_accent;
content: '';
bottom: 28px;
right: 28px;
color: #fff;
border-radius: 50%;
.transition(all 300ms @ease-material-2);
}
&:before {
.bubble;
background: white;
}
&.active {
display: block;
visibility: visible;
.transition(all 500ms @ease-material-2);
.bubble, &:before {
.size(1000px; 2000px);
border-radius: 50%;
.opacity(0);
margin-right: -500px;
margin-bottom: -500px;
display: block;
.transition(all .4s @ease-material-2);
}
&:before {
.opacity(1);
}
.content {
position: relative;
z-index: 1;
.opacity(1);
.transition(all 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19));
}
}
}
main.has_code_col{
@media (min-width: @w-size-large) {
.doc-aside {
color: lighten(@doc_heading, 30%);
pre{
font-size: 12px;
}
}
}
}
article.doc-body {
background: @doc_paper;
section.doc-content:first-of-type{
> p:first-child{
.lead;
}
}
}
.content-switcher {
margin-top: 1.5em;
> ul {
font-size: 10px;
padding: 0;
margin: 0;
.opacity(0.6);
.transition(all .2s ease);
> li {
color: lighten(@doc_heading, 30%);
font-weight: bold;
border-bottom: 1px solid lighten(@doc_code-bg, 30%);
margin: 5px;
font-size: 1.3em;
.transition(all .2s);
cursor: pointer;
display: inline-block;
list-style: none;
&.active {
border-bottom: 1px solid @doc_accent;
}
}
}
&:hover > ul {
.opacity(1);
}
> .tabs > * {
display: none;
max-width: 100%;
overflow-x: auto;
}
> .tabs > .active {
display: block;
}
}
pre {
color: #e7e9db;
background: @doc_code-bg;
font-family: monospace;
font-weight: bold;
position: relative;
border: none;
max-width: 100%;
overflow: auto;
margin: 0;
}
#mask {
.opacity(0);
position: fixed;
z-index: @zIndex--mask;
top: 0;
left: 0;
.size(100%; 0);
background-color: rgba(0, 0, 0, 0.2);
.transition(opacity .3s);
&.active {
.opacity(1);
display: block;
.square(100%);
.transition(opacity .3s);
}
}
// Special Pages
// Theme tutorial
#thinking-modular > .clearfix.themes {
margin-bottom: 3em;
}
footer {
display: none;
/// <----------------
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}