summaryrefslogtreecommitdiff
path: root/doc/_extensions/odoo/static/style.less
diff options
context:
space:
mode:
Diffstat (limited to 'doc/_extensions/odoo/static/style.less')
-rw-r--r--doc/_extensions/odoo/static/style.less989
1 files changed, 989 insertions, 0 deletions
diff --git a/doc/_extensions/odoo/static/style.less b/doc/_extensions/odoo/static/style.less
new file mode 100644
index 00000000000..e6d0a5a3edf
--- /dev/null
+++ b/doc/_extensions/odoo/static/style.less
@@ -0,0 +1,989 @@
+// 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 {
+ 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 {
+ font-size: 1.642857143em;
+ 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;
+ font-size: 1.6em;
+ 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
+ }
+ > .alert-title:before, > h3:before {
+ content: "\e639";
+ }
+ }
+ &.alert-warning, &.warning {
+ border-color: lighten(@doc_warning, 30%);
+ background-color: lighten(@doc_warning, 35%);
+ color: darken(@doc_warning, 35%);
+
+ > .alert-title, > h3 {
+ color: @doc_warning
+ }
+ > .alert-title:before, > h3: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
+ }
+ > .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";
+ }
+ }
+
+ &.doc-content{
+ @media (min-width: @w-size-large) {
+ max-width: 55%;
+ }
+ }
+}
+
+.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: none;
+ 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: none;
+ line-height: 1.2;
+ background: darken(@doc_paper_dark, 10%);
+ border-bottom: none;
+
+ &:hover, &:active, &:focus {
+ background-color: transparent;
+ text-decoration: none;
+ border-radius: none;
+ 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;
+ 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);
+ 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-bottom: 0;
+ 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;
+}
+
+
generated by cgit v1.2.3 (git 2.25.1) at 2026-10-23 15:52:35 +0000