documentation/extensions/odoo_theme/static/style.scss

948 lines
26 KiB
SCSS
Raw Permalink Normal View History

[REF][MOV] documentation apocalypse Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
2021-04-30 17:40:29 +07:00
@import "scss/_sphinx_basic";
@import "scss/_variables";
@import "scss/bootstrap_overridden";
@import "scss/bootstrap_scss/bootstrap";
@import "scss/_mixins";
@import "scss/_typography";
@import "scss/_iconfont";
div[aria-label="related navigation"] {
display: none;
}
body {
a:not(:hover), a.o_logo {
text-decoration: none !important;
}
dd {
margin-left: 1rem;
}
// This fixes the scroll position on all elements, including refs
:target {
&:before {
@include o-scroll-padding()
}
}
abbr[title="Pull Request"] {
@include o-easter-egg();
}
}
.hidden {
visibility: hidden !important;
display: none !important;
opacity: 0 !important;
}
//------------------------------------------------------------------------------
// Header with logo, searchbar and switchers
//------------------------------------------------------------------------------
header.o_main_header{
width: 100%;
height: $o-header-mobile-height;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: $o-header-white;
z-index: 10;
@include media-breakpoint-up(lg) {
height: $o-header-height;
padding-right: 3rem;
}
.o_logo_wrapper {
padding: 0 1rem;
> .o_logo {
img {
margin-bottom: -2px;
vertical-align: baseline;
}
span {
@include font-size($font-size-base);
color: $o-violet;
@include o-easter-egg($img:'img/ducky.svg');
}
}
@include media-breakpoint-up(xl) {
width: $o-side-nav-width;
}
@include media-breakpoint-up(lg) {
padding-left: 3rem;
margin-right: 3rem;
}
}
.o_search_wrapper {
display: flex;
[REF][MOV] documentation apocalypse Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
2021-04-30 17:40:29 +07:00
@include media-breakpoint-down(lg) {
display: block;
position: absolute;
width: 100%;
padding: 0 10px;
top: calc(100% + 30px);
[REF][MOV] documentation apocalypse Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
2021-04-30 17:40:29 +07:00
}
}
.highlight-link {
margin-bottom: 0;
padding: 0 1rem;
text-align: center;
align-self: center;
[REF][MOV] documentation apocalypse Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
2021-04-30 17:40:29 +07:00
a {
@include font-size($font-size-secondary);
}
}
.navbar-toggler {
border: none;
&[aria-expanded="true"] {
.icon-bar {
&:nth-of-type(1) {
@include o-transform(rotate(45deg));;
@include o-transform-origin(10%, 10%)
}
&:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}
&:nth-of-type(3) {
@include o-transform(rotate(-45deg));
@include o-transform-origin(10%, 90%)
}
}
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: $gray-dark;
@include o-transition(all, .2s);
&+ .icon-bar {
margin-top: 4px;
}
&:nth-of-type(1) {
@include o-transform(rotate(0));
}
&:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
}
&:nth-of-type(3) {
@include o-transform(rotate(0));
}
}
&:focus {
box-shadow: none;
outline:none;
}
}
}
.o_logo img {
@include media-breakpoint-up(lg) {
height: 30px
}
}
.o_search_wrapper {
.o_search {
position: relative;
width: 100%;
@include media-breakpoint-up(lg) {
max-width: 500px;
}
.btn{
@include o-position-absolute($top: 50%, $right: 1rem);
@include o-transform (translateY(-50%)) ;
padding: 0;
font-size: 1.2rem;
color: $gray;
}
}
}
//------------------------------------------------------------------------------
// Left side nav toctree
//------------------------------------------------------------------------------
.o_side_nav {
width: 100%;
height: calc(100vh - #{$o-header-mobile-height});
overflow-y: auto;
position: fixed;
top: -100%;
left:0;
&.show {
top: $o-header-mobile-height;
}
@include media-breakpoint-up(lg) {
width: $o-side-nav-width;
height: calc(100vh - #{$o-header-height});
top: $o-header-height;
padding-top: 2rem;
padding-left: 3rem;
}
@include o-transition(all, .3s);
padding-top: 1rem;
padding-left: 1rem;
background-color: lighten($o-violet-dark, 70%) ;
z-index: 10;
@include font-size($font-size-secondary);
color: $o-violet-dark;
.toctree-l1 {
padding-top: .5rem;
padding-bottom: .5rem;
}
.toctree-l1 > ul {
padding-left: 1.5rem;
}
ul {
.o_deepest_active_toc_entry {
background-color: $gray-lightest;
}
> .toctree-l1 {
&[class*="o_menu_"] > .o_toc_entry_wrapper > i {
opacity: .75;
&:before {
@include o-inline-icon($i-doc-apps, 0 1rem 0 0);
color: $o-violet-dark;
margin-right: 0.5rem;
}
}
&.o_menu_applications > .o_toc_entry_wrapper > i:before{
content:'#{$i-doc-apps}';
}
&.o_menu_administration > .o_toc_entry_wrapper > i:before{
content:'#{$i-doc-admin}';
}
&.o_menu_developer > .o_toc_entry_wrapper > i:before{
content:'#{$i-doc-dev}';
}
&.o_menu_services > .o_toc_entry_wrapper > i:before{
content:'#{$i-doc-services}';
}
&.o_menu_contributing > .o_toc_entry_wrapper > i:before{
content:'#{$i-doc-contribute}';
}
}
}
scrollbar-width: thin;
scrollbar-color: $o-violet-darker transparent;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: $white;
}
&::-webkit-scrollbar-thumb {
background-color: $o-violet-darker ;
border-radius: 0;
}
}
.o_side_nav, .o_page_toc_nav {
ul { // all uls in toc
list-style: none;
padding-left: 1rem;
li {
padding-left: .2rem;
> a.reference {
padding-left: 1.2rem;
}
a {
display: inline-block;
padding: .5rem 0;
color: inherit;
opacity: .75;
&.current, &:hover {
opacity: 1;
}
}
&:not(.toctree-l1) {
.o_toc_entry_wrapper {
&:not(.o_page_toc_title) {
display: flex;
align-items: baseline;
}
> i[class^="i-"] {
display: inline-block;
margin-right: .2rem;
@include o-transition(rotate, .3s);
font-weight: $fw_bold;
color: inherit;
&[aria-expanded="true"] {
@include o-transform(rotate(90deg));
}
}
}
}
&.o_active_toc_entry {
&:not(.toctree-l1) > .o_toc_entry_wrapper {
i[class^="i-"]:not(.collapsed) {
@include o-transform(rotate(90deg));
}
}
> a , > .o_toc_entry_wrapper a {
font-weight: $fw_bold;
opacity: 1;
}
}
}
}
> ul { //is first ul in toc
padding-left: 0;
}
}
//------------------------------------------------------------------------------
// On this page local toctree
//------------------------------------------------------------------------------
aside.o_page_toc {
display: none;
@include font-size($font-size-secondary);
@include media-breakpoint-up(lg) {
display: block;
position: -webkit-sticky;
position: sticky;
top: $o-header-height;
right: 0;
width: $o-on-page-width;
height: 100%;
max-height: calc(100vh - #{$o-header-height});
padding: 3rem 3rem 3rem 0;
overflow-y: auto;
}
h3 {
text-transform: uppercase;
font-weight: $fw_bold;
color: $gray-darker;
padding-left: .5rem;
margin-bottom: .5rem;
}
a {
font-weight: $fw_regular;
color: $gray-darkest;
}
.o_page_toc_title {
display:none;
+ ul {
padding-left: 0;
}
}
}
//------------------------------------------------------------------------------
// Main page content
//------------------------------------------------------------------------------
#wrap {
margin-top: $o-header-mobile-height;
@include media-breakpoint-up(lg) {
display: flex;
justify-content: space-between;
margin-top: $o-header-height;
}
code {
display: inline-block;
color: inherit;
background: $doc_code-bg;
padding: 0 .3rem;
margin: 0 0.1rem;
line-height: 1.3;
border: 1px solid $gray-light;
overflow-wrap: anywhere;
}
iframe {
max-width: 100%;
}
main {
position: relative;
padding-top: 3rem;
@include media-breakpoint-down(lg) {
padding-top: 7rem;
}
[REF][MOV] documentation apocalypse Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
2021-04-30 17:40:29 +07:00
padding-bottom: 3rem;
@include media-breakpoint-up(lg) {
left: $o-side-nav-width;
max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) - #{$o-on-page-width});
padding: 3rem;
margin: 0;
}
&.o_index, &.o_fullwidth_page, &.o_has_code_column {
@include media-breakpoint-up(lg) {
max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1rem)) );
}
}
// Homepage
&.o_index {
.o_content_fw_banner {
margin: -3rem -0.75rem 3rem;
padding: 2rem 1rem;
align-items: center;
@include o-gradient();
@include media-breakpoint-up(lg) {
margin: -3rem -3rem 3rem;
padding: 2rem 3rem;
}
.btn-primary {
background-color: #00A09D;
border-color: #00A09D;
}
}
p, h5 {
color: $gray;
}
h5 {
font-size: 12px;
}
ul {
> li {
position: relative;
padding-bottom: .5rem;
display: flex;
align-items: center;
&:before {
@include o-inline-icon($i-article, 0 .2rem 0 0);
color: $gray-light;
}
}
}
.o_cat_banner {
background-color: $o-violet;
border-radius: 5px;
text-align: center;
background-repeat: no-repeat;
background-size: 90%;
background-position: center;
i {
font-size: 100px;
color: $white;
}
&.o-bg-violet-light {
background-color: lighten($o-violet, 20%);
}
&:not(.shadow){
background-image: url('img/bg-cat.svg');
}
&.shadow {
box-shadow: 0px 2px 25px rgba(19, 28, 40, .08) !important;
}
}
.o_changelog {
.row:last-of-type > .border-bottom {
border: none !important;
}
}
}
// pages with full width: Legal
[REF][MOV] documentation apocalypse Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
2021-04-30 17:40:29 +07:00
&.o_fullwidth_page {
.toctree-l1 > a {
display: block;
color: $gray-darker;
@include font-size($h2-font-size);
padding-bottom: .5rem;
border-bottom: 1px solid $gray-light;
margin-bottom: 1rem;
}
}
// pages with column for code on the right
[REF][MOV] documentation apocalypse Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
2021-04-30 17:40:29 +07:00
&.o_has_code_column {
article.doc-body {
> *{
max-width: 100%;
}
.content-switcher {
.nav-tabs .nav-link.active {
background-color: #f8f8f8;
border-color: #dee2e6 #dee2e6 #f8f8f8;
font-weight: $fw_semibold;
}
.tab-content {
background: $doc_code-bg;
border: 1px $gray-300 solid;
border-top: 0;
div[class^="highlight"] {
border: 0;
margin: 0;
}
}
}
@include media-breakpoint-up(xl) {
width: 100%;
padding-right: 0;
&:before {
@include o-code-col();
}
.o_git_link {
right: calc(#{$o-codecol-width} + 2rem);
}
section {
> * {
width: $o-halfpage-width;
float: left;
clear: left;
}
> h1 {
max-width: calc(#{$o-halfpage-width} - 120px);
}
> h1, > h2, > h3, > h4, > h5, > h6 {
float: none;
clear: none;
}
.doc-aside {
width: $o-codecol-width;
float: none;
clear: none;
margin-left: 57%;
padding: 1rem;
blockquote {
font-weight: $fw_semibold;
font-style: italic;
}
pre {
font-size: 12px;
}
}
}
}
}
+ aside.o_page_toc{
display: none;
}
}
article.doc-body {
position: relative;
// hide ugly toctree on "in between" pages (e.g.: /applications.html, /administration.html, ...)
.toctree-wrapper {
display: none;
}
[REF][MOV] documentation apocalypse Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
2021-04-30 17:40:29 +07:00
.o_git_link {
@include font-size($font-size-secondary);
@include o-position-absolute($top: 0px, $right: 1rem);
@include media-breakpoint-up(lg) {
@include o-position-absolute($top: 10px, $right: 1rem);
}
i {
margin-right: .2rem;
}
}
.command {
font-family: var(--bs-font-monospace);
}
.field-list {
@include font-size($font-size-secondary);
padding: .5rem;
border: 1px solid $gray-light;
ul {
list-style: none;
padding-left: 0;
li {
padding-bottom: .5rem;
}
}
}
// Search items highlighted
span.highlighted {
background-color: lighten($warning, 15%);
}
section {
> h1 {
color: $o-violet-dark;
font-weight: $fw_bold;
@include media-breakpoint-up(lg) {
max-width: calc(100% - 120px);
}
+ * {
margin-top: 1rem;
}
}
> h2 {
font-family: $font-family-serif;
color: $gray-darker;
margin-top: 3rem;
margin-bottom: 1rem;
padding-bottom: .3rem;
border-bottom: 1px solid $gray-light;
}
> h3 {
margin-top: 2rem;
font-weight: $fw_bold;
}
> h4 {
margin-top: 2rem;
}
> h4, > h5, > h6 {
font-weight: $fw_semibold;
}
img:not([alt="green"]):not([alt="orange"]):not([alt="red"]) {
border: 1px solid $gray-lighter;
background: $white;
padding: .5rem;
}
img:not([alt="green"]):not([alt="orange"]):not([alt="red"]), iframe {
margin-bottom: 1rem;
}
p > img {
border: none;
padding: 0;
margin-bottom: 0;
}
.figure {
.caption, .caption-text {
font-weight: $fw_semibold;
color: $gray;
}
.caption, .caption-text, .legend, .legend p{
font-style: italic;
margin: 0 auto;
}
@include media-breakpoint-up(md) {
&:not([class^="col"]) .legend {
max-width: 60%;
}
}
}
a.headerlink {
text-decoration: none;
font-size: 0;
visibility: hidden !important;
&:before {
content: "\a0";
}
&:after {
content: '#{$i-link}';
font-family: icomoon !important;
@include font-size($font-size-base);
margin: 0 0 0 .3rem;
visibility: hidden;
color: $gray-light;
opacity: 0;
@include o-transition(all, .1s)
}
}
*:hover > a.headerlink:after{
// This makes permalinks only visible on hover.
visibility: visible;
opacity: 1;
}
table.table {
@include media-breakpoint-down(lg){
display: block;
overflow-x: auto;
code {
overflow-wrap: break-word;
}
}
}
}
}
div[class^="highlight"] {
// This styles the consoles like read-the-doc's consoles
overflow-x: auto;
border: 1px solid $gray-light;
margin: 1px 0 24px 0;
/* max-width: 90vw; */
div[class^="highlight"] {
padding: 0px;
border: none;
margin: 0;
}
pre {
white-space: pre;
margin: 0;
padding: 1rem;
display: block;
overflow: auto;
}
}
// fixes on pages
.guilabel, .menuselection {
font-weight: $fw_semibold;
}
.dfn{
@include font-size($font-size-secondary);
line-height: 1;
color: $o-violet;
font-weight: $fw_semibold;
&:before {
content:'?';
display: inline-block;
width: 15px;
height: 15px;
background-color: $o-violet;
border: 1px solid $o-violet;
border-radius: 20px;
text-align: center;
color: $white;
font-weight: $fw_extrabold;
font-style: normal;
margin: 0 .2rem;
}
}
.pq-patch em {
display: block;
border-radius: 4px 4px 0 0;
background: $gray-lighter;
padding: .2rem 1rem;
@include font-size($font-size-secondary);
font-weight: 600;
}
.container .container:not([class^="col"]) {
padding: 0;
margin: 0;
}
ul, ol {
text-align: left;
}
// restyle numbers on lists
ol {
/* list-style: none;
counter-reset: a;
> li {
position: relative;
counter-increment: a;
&:before {
content: counter(a) '.';
font-weight: $fw_semibold;
@include o-position-absolute(auto, auto, auto, -1.8rem);
}
} */
ol {
list-style: lower-alpha;
> li:before {
content: none;
}
}
}
//------------------------------------------------------------------------------
// Alerts
//------------------------------------------------------------------------------
// alert-info
// alert-warning
// alert-danger
// alert-go_to
// alert-exercise
// alert-success // removed : never used in doc
.alert {
position: relative;
display: block;
border-radius: 0;
border-width: 0 0 0 3px;
@include font-size($font-size-secondary);
code {
background-color: $white !important;
}
> p , > ul{
margin-bottom: .5rem;
}
> *:last-child {
margin-bottom: 0;
}
> h3, > .alert-title {
line-height: 1em;
margin: 0 0 10px 0;
@include font-size($font-size-base);
font-weight: $fw_bold;
&:before {
@include o-inline-icon($i-info, 0 .2rem 0 0, baseline, $font-size-base, inherit);
@include media-breakpoint-down(md) {
display:none;
}
}
}
&.alert-info, &[class^="admonition"] {
border-color: tint-color($brand-info, 30%);
background-color: tint-color($brand-info, 85%);
color: shade-color($brand-info, 35%);
> .alert-title, > h3 {
color: $brand-info;
&:before {
content: '#{$i-info}';
}
}
}
&.alert-note {
border-color: shade-color($info, 30%);
background-color: $gray-lightest;
color: shade-color($info, 55%);
> .alert-title, > h3 {
color: shade-color($info, 45%);
&:before {
content: '#{$i-note}';
}
}
}
&.alert-tip, &.tip {
border-color: shade-color($color-alpha, 10%);
background-color: $gray-lightest;
color: shade-color($color-alpha, 55%);
> .alert-title, > h3 {
color: shade-color($color-alpha, 40%);
&:before {
content: '#{$i-lightbulb}';
@include font-size(1.2rem);
}
}
}
&.alert-warning, &.warning {
border-color: $brand-warning;
> .alert-title, > h3 {
color: shade-color($brand-warning, 10%);
&:before {
content: '#{$i-warning}';
}
}
}
&.alert-danger {
border-color: $danger;
> .alert-title, > h3 {
color: darken($brand-danger,20%);
&:before {
content: '#{$i-danger}';
}
}
}
&.alert-exercise {
border-color: tint-color($doc_exercise, 30%);
background-color: tint-color($doc_exercise, 90%);
color: shade-color($doc_exercise, 35%);
> .alert-title, > h3 {
color: shade-color($doc_exercise, 35%);
}
> .alert-title:before, > h3:before {
content: '#{$i-exercise}';
}
}
&.alert-go_to {
border-color: $o-violet;
background-color: $gray-lightest;
@include media-breakpoint-up(lg){
display: inline-block;
width: calc(50% - 1rem);
}s
a {
color: $o-violet-dark;
}
> .alert-title, > h3 {
color: $o-violet-dark;
}
> .alert-title:before, > h3:before {
content: '#{$i-arrow-right}';
}
}
}
}
}
//------------------------------------------------------------------------------
// Footer
//------------------------------------------------------------------------------
footer {
.o_get_help {
padding-top: 3rem;
padding-bottom: 3rem;
background: $gray-100;
@include media-breakpoint-up(lg) {
padding-left: calc(#{$o-side-nav-width} + 3rem)
}
h5 {
color: $secondary;
font-size: 20px;
font-weight: $fw_bold;
margin-bottom: 1.5rem;
}
}
}