doc/_themes/odoodoc/static/style.less

   1 @import "bootstrap/less/bootstrap";
   2 @import url(http://fonts.googleapis.com/css?family=Lato);
   3
   4 @icon-font-path: 'fonts/';
   5 @brand-primary: #a24689;
   6 @brand-dark: darken(@brand-primary, 6%);
   7 @brand-light: lighten(@brand-primary, 10%);
   8 @brand-text: saturate(lighten(@brand-primary, 46%), 5%);
   9
  10 @headings-font-family: Lato, Arial, sans-serif;
  11
  12 @navbar-margin-bottom: 0;
  13
  14 @navbar-default-bg: white;
  15 @navbar-default-border: 0;
  16
  17 // indent level for various items list e.g. dl, fields lists, ...
  18 @item-indent: 30px;
  19
  20 * {
  21   box-sizing: border-box;
  22 }
  23 body {
  24   overflow: auto;
  25   position: relative;
  26 }
  27
  28 .document-super {
  29   .container();
  30 }
  31
  32 .document {
  33   .make-row();
  34 }
  35
  36 .documentwrapper {
  37   .make-md-column(9);
  38 }
  39 .sphinxsidebar {
  40   .make-md-column(3);
  41 }
  42
  43 .btn-outline {
  44   color: @brand-primary;
  45   background-color: transparent;
  46   border-color: @brand-primary;
  47   &:hover, &:focus, &:active {
  48     color: #fff;
  49     background-color: @brand-primary;
  50     border-color: @brand-primary;
  51   }
  52 }
  53
  54
  55 .btn-outline-inverse {
  56   color: #fff;
  57   background-color: transparent;
  58   border-color: @brand-text;
  59   &:hover, &:focus, &:active {
  60     color: @brand-primary;
  61     text-shadow: none;
  62     background-color: #fff;
  63     border-color: #fff;
  64   }
  65 }
  66 /*
  67  * Main navigation
  68  */
  69 .docs-nav {
  70   .navbar-brand,
  71   .navbar-nav > li > a {
  72     position: relative;
  73   }
  74
  75   .navbar-nav > li {
  76     > a:hover:before, &.current a:before {
  77       bottom: 10px;
  78       opacity: 1;
  79     }
  80     > a:before {
  81       display: block;
  82       position: absolute;
  83       bottom: 0;
  84       left: 10px;
  85       content: "";
  86       right: 10px;
  87       height: 3px;
  88       background: @brand-primary;
  89       opacity: 0;
  90       .transition(all 0.3s ease-out);
  91     }
  92     &.dropdown {
  93       > a:after {
  94         content: " ";
  95         display: inline-block;
  96         width: 0;
  97         height: 0;
  98         margin-left: 5px;
  99         vertical-align: middle;
 100         border-top: 4px solid @gray-light;
 101         border-right: 4px solid transparent;
 102         border-left: 4px solid transparent;
 103       }
 104       .dropdown-menu > li.current > a.current {
 105         background-color: @brand-primary;
 106         color: white;
 107       }
 108     }
 109   }
 110   /* version switcher */
 111   div.versions {
 112     position: relative;
 113     cursor: pointer;
 114     font-size: 300%;
 115     display: inline-block;
 116
 117     > a {
 118       font-size: 40%;
 119       margin: 0.2em;
 120       color: #999;
 121       font-family: Lato, Arial, sans-serif;
 122       &:hover, &:focus {
 123         text-decoration: none;
 124       }
 125     }
 126   }
 127 }
 128
 129 // FIXME: protocol-relative urls for remote but absolute for local (file://)?
 130 .o_logo {
 131   display: inline-block;
 132   font-size: 300%;
 133   .o_logo_main {
 134     background-image: url(odoo_logo_rgb.png);
 135     background-repeat: no-repeat;
 136     background-position: center center;
 137     background-size: contain;
 138     color: rgba(255, 255, 255, 0);
 139     text-decoration: none;
 140   }
 141   .o_logo_app {
 142     text-decoration: none;
 143     color: rgb(143, 143, 143);
 144     font-family: Lato, Arial, sans-serif;
 145     font-size: 50%;
 146     margin: 0.2em;
 147   }
 148 }
 149
 150 /*
 151  * Side navigation
 152  *
 153  * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 154  * sections of docs content.
 155  */
 156
 157 /* By default it's not affixed in mobile views, so undo that */
 158 .sphinxsidebarwrapper.affix {
 159   position: static;
 160 }
 161 @media (min-width: @screen-sm-min) {
 162   .sphinxsidebarwrapper {
 163     padding-left: 20px;
 164   }
 165 }
 166
 167 /* Side navigation visibility changes */
 168 .sphinxsidebarwrapper {
 169   > .nav { // root (contains document categories), always show
 170     .nav {
 171       // hide sub-everything by default
 172       display: none;
 173     }
 174
 175     li.active > .nav,
 176     li.current > .nav {
 177       // sub-items of a current or active li are shown
 178       display: block;
 179     }
 180   }
 181 }
 182
 183 /* Side navigation graphical styling */
 184 @nav-spacing: 20px;
 185 @nav-spacing-increment: 5px;
 186 @nav-hover-offset: 1px;
 187 @nav-hover: @nav-spacing - @nav-hover-offset;
 188 @nav-current-offset: 2px;
 189 @nav-current: @nav-spacing - @nav-current-offset;
 190
 191 .sphinxsidebar {
 192   z-index: 1;
 193 }
 194 .sphinxsidebarwrapper {
 195   width: 100%;
 196   font-size: 13px;
 197   z-index: 1;
 198
 199   .hidden-xs();
 200   .hidden-sm();
 201   .hidden-print();
 202
 203   /* First level of nav */
 204   > .nav {
 205     margin-top: 20px;
 206     margin-bottom: 20px;
 207   }
 208
 209   .nav > li > a {
 210     font-weight: bold;
 211     padding-left: @nav-spacing;
 212   }
 213   .nav .nav > li > a {
 214     font-size: 12px;
 215     padding-left: @nav-spacing + @nav-spacing-increment;
 216   }
 217   .nav .nav .nav > li > a {
 218     font-weight: normal;
 219     padding-left: @nav-spacing + 2*@nav-spacing-increment;
 220   }
 221   .nav .nav .nav .nav > li > a {
 222     font-size: 11px;
 223     padding-left: @nav-spacing + 3*@nav-spacing-increment;
 224   }
 225
 226   /* All levels of nav */
 227   .nav {
 228     > li > a {
 229       display: block;
 230       padding: 4px @nav-spacing;
 231       color: #999;
 232
 233       &:hover, &:focus {
 234         padding-left: @nav-hover;
 235         color: @brand-primary;
 236         text-decoration: none;
 237         background-color: transparent;
 238         border-left: @nav-hover-offset solid @brand-primary;
 239       }
 240     }
 241
 242     // before scrollspy is applied, need to use current for docs
 243     > .current > a, > .current:hover > a, > .current:focus > a,
 244     > .active > a, > .active:hover > a, > .active:focus > a {
 245       padding-left: @nav-current;
 246       font-weight: bold;
 247       color: @brand-primary;
 248       background-color: transparent;
 249       border-left: @nav-current-offset solid @brand-primary;
 250     }
 251   }
 252   .nav .nav {
 253     > li > a:hover, > li > a:focus {
 254       padding-left: @nav-hover + @nav-spacing-increment;
 255     }
 256     > .current > a, > .current:hover > a, > .current:focus > a,
 257     > .active > a, > .active:hover > a, > .active:focus > a {
 258       padding-left: @nav-current + @nav-spacing-increment;
 259     }
 260   }
 261   .nav .nav .nav {
 262     padding-bottom: 10px;
 263
 264     > li > a {
 265       padding-top: 1px;
 266       padding-bottom: 1px;
 267     }
 268
 269     > li > a:hover, > li > a:focus {
 270       padding-left: @nav-hover + 2 * @nav-spacing-increment;
 271     }
 272     > .active > a, > .active:hover > a, > .active:focus > a {
 273       padding-left: @nav-current + 2 * @nav-spacing-increment;
 274       font-weight: bold;
 275     }
 276   }
 277   .nav .nav .nav .nav {
 278     > li > a:hover, > li > a:focus {
 279       padding-left: @nav-hover + 3 * @nav-spacing-increment;
 280     }
 281     > .active > a, > .active:hover > a, > .active:focus > a {
 282       padding-left: @nav-current + 3 * @nav-spacing-increment;
 283     }
 284   }
 285 }
 286 /* github link for current document */
 287 .sphinxsidebarwrapper > p {
 288   margin: 5px 10px 10px;
 289   a {
 290     font-size: 13px;
 291     &:hover {
 292       text-decoration: none;
 293     }
 294
 295     &.github {
 296       padding-left: 15px;
 297       position: relative;
 298       &:before {
 299         left: 0;
 300         top: 1px;
 301         content: '';
 302         position: absolute;
 303         width: 13px;
 304         height: 13px;
 305         background: url(github-link.png) left bottom / 13px no-repeat;
 306       }
 307       &:hover:before {
 308         background-position: left top;
 309       }
 310     }
 311   }
 312 }
 313
 314 /* Show and affix the side nav when space allows it */
 315 @media (min-width: @screen-md-min) {
 316   .sphinxsidebarwrapper {
 317     .nav .nav > .active > ul {
 318       display: block;
 319     }
 320     /* Widen the fixed sidebar */
 321     &.affix, &.affix-bottom {
 322       width: 213px;
 323     }
 324     &.affix {
 325       position: fixed; /* Undo the static from mobile first approach */
 326       top: 20px;
 327     }
 328     &.affix-bottom {
 329       position: absolute; /* Undo the static from mobile first approach */
 330     }
 331     &.affix-bottom > .nav, &.affix > .nav {
 332       margin-top: 0;
 333       margin-bottom: 0;
 334     }
 335   }
 336 }
 337 @media (min-width: @screen-lg-min) {
 338   /* Widen the fixed sidebar again */
 339   .sphinxsidebarwrapper.affix-bottom,
 340   .sphinxsidebarwrapper.affix {
 341     width: 263px;
 342   }
 343 }
 344
 345 /*
 346  * Footer
 347  *
 348  * Separated section of content at the bottom of all pages, save the homepage.
 349  */
 350
 351 .footer {
 352   padding-top: 40px;
 353   padding-bottom: 40px;
 354   margin-top: 100px;
 355   color: #777;
 356   text-align: center;
 357   border-top: 1px solid #e5e5e5;
 358 }
 359 .docs-footer-links {
 360   padding-left: 0;
 361   margin-top: 20px;
 362   color: #999;
 363 }
 364 .docs-footer-links li {
 365   display: inline;
 366   padding: 0 2px;
 367 }
 368 .docs-footer-links li:first-child {
 369   padding-left: 0;
 370 }
 371
 372 @media (min-width: 768px) {
 373   .footer p {
 374     margin-bottom: 0;
 375   }
 376 }
 377
 378 // move [source] link to the right
 379 .viewcode-link {
 380   font-weight: normal;
 381   float: right;
 382   display: none;
 383 }
 384 dt:hover > a > .viewcode-link {
 385   display: inline;
 386 }
 387
 388 // either that or overwrite visit_attribution/depart_attribution
 389 blockquote p.attribution:extend(blockquote footer) {}
 390
 391 div.section > h1 {
 392   .page-header();
 393   font-size: floor((@font-size-base * 3.05));
 394 }
 395
 396 div.section > h2 {
 397   .page-header();
 398   font-size: @font-size-h1;
 399   padding-top: 20px;
 400   margin-top: 0;
 401 }
 402 // ~docs-section
 403 .body > .section > .section {
 404   margin-bottom: 60px;
 405 }
 406
 407 .literal:extend(code) {}
 408
 409 .admonition {
 410   padding: 20px;
 411   margin: 20px 0;
 412   border: 1px solid @gray-lighter;
 413   border-left-width: 5px;
 414   border-radius: 3px;
 415
 416   .admonition-title:after {
 417     content: ": ";
 418   }
 419   > .admonition-title,
 420   // only "aphorisms" should have the same size as the admonition category
 421   &.aphorism > .admonition-title + p,
 422   &.exercise > .admonition-title + p {
 423     display: inline-block;
 424     margin-top: 0;
 425     margin-bottom: 5px;
 426
 427     font-family: @headings-font-family;
 428     font-weight: @headings-font-weight;
 429     line-height: @headings-line-height;
 430     color: @headings-color;
 431
 432     font-size: @font-size-h4;
 433   }
 434
 435   p:last-child {
 436     margin-bottom: 0;
 437   }
 438
 439   &.tip {
 440     border-left-color: @brand-info;
 441     > .admonition-title {
 442       color: @brand-info;
 443     }
 444   }
 445   &.warning {
 446     border-left-color: @brand-warning;
 447     > .admonition-title {
 448       color: @brand-warning;
 449     }
 450   }
 451   &.danger {
 452     border-left-color: @brand-danger;
 453     > .admonition-title {
 454       color: @brand-danger;
 455     }
 456   }
 457   &.exercise {
 458     border-left-color: @gray-light;
 459     > .admonition-title {
 460       color: @gray;
 461     }
 462   }
 463 }
 464
 465 /*
 466  * Code snippets
 467  *
 468  * Generated via Pygments
 469  */
 470 .highlight pre {
 471   padding: 4px;
 472
 473   font-size: 75%;
 474   // don't break lines within words
 475   word-break: normal;
 476   word-wrap: normal;
 477 }
 478 .switchable .highlight.with-btn-clipboard pre {
 479   // avoid copy button overlapping with even long lines
 480   padding-right: 50px;
 481 }
 482
 483 /*
 484  * ZeroClipboard styles
 485  */
 486 .highlight {
 487   position: relative;
 488 }
 489 .btn-clipboard {
 490   position: absolute;
 491   top: 0;
 492   right: 0;
 493   z-index: 3;
 494   display: block;
 495   padding: 5px 8px;
 496   font-size: 12px;
 497   color: #777;
 498   cursor: pointer;
 499   background-color: #fff;
 500   border: 1px solid #e1e1e8;
 501   border-radius: 0 4px 0 4px;
 502
 503   &:focus {
 504     outline: none;
 505   }
 506
 507   &.active {
 508     background-color: #ffffad;
 509     .transition(background-color .5s linear);
 510   }
 511 }
 512
 513 // rST styles
 514 img.align-center {
 515   display: block;
 516   margin: 0 auto;
 517 }
 518
 519 dd {
 520   // Reinstate dd indent, looks horrible and illegible otherwise
 521   margin-left: @item-indent;
 522 }
 523
 524 // By default there's (browser) padding on ``ul`` so lists of >1 field are
 525 // nicely separated from the section name (e.g. ``Parameters``) but single
 526 // fields/items are stuck to it and look horrible. Make everything neatly-ish
 527 // aligned. Other option: half and half so list bullets are aligned to text
 528 // instead of text to text
 529 td.field-body {
 530   padding-left: @item-indent;
 531   ul {
 532     padding-left: @item-indent;
 533   }
 534   > ul {
 535     padding-left: 0;
 536   }
 537 }
 538
 539 // naming collision, rST generates .container nodes with completely different
 540 // semantics so go away
 541 .section .container {
 542     width: auto;
 543     margin: 0;
 544     padding: 0;
 545 }
 546
 547 // lighten js namespace/class name
 548 .descclassname {
 549   opacity: 0.5;
 550 }
 551
 552
 553 .index-tree {
 554   ul, li {
 555     list-style: none;
 556     padding: 0;
 557     margin: 0;
 558   }
 559   > ul > li {
 560     margin-bottom: 0.5em;
 561     > a {
 562       .h3();
 563       text-align: center;
 564     }
 565     > ul {
 566       display: -webkit-flex;
 567       display: flex;
 568       -webkit-flex-wrap: wrap;
 569       flex-wrap: wrap;
 570       > li {
 571         width: 50%;
 572         a {
 573           .h4();
 574           padding-left: 10%;
 575           padding-right: 10%;
 576         }
 577       }
 578     }
 579     a {
 580       display: block;
 581       color: @link-color !important;
 582       padding: 0.3em 0;
 583       margin: 3px !important;
 584       &:hover {
 585         background-color: @gray-lighter;
 586       }
 587     }
 588   }
 589 }
 590 // STRIPE-STYLE PAGES
 591 .stripe {
 592   .section {
 593     margin-bottom: 2em;
 594   }
 595
 596   // === columning only on medium+ ===
 597   @media (min-width: @screen-md-min) {
 598     // column 1
 599     .section > *,
 600     .section > .force-left {
 601       width: 49%;
 602       float: left;
 603       clear: left;
 604     }
 605     // column 2
 606     .section > .force-right,
 607     .section > [class*=highlight] {
 608       float: none;
 609       clear: none;
 610       margin-left: 51%;
 611     }
 612     // fullwidth elements
 613     .section > h1, .section > h2, .section > h3, .section > h4, .section > h5,
 614     .section > h6 {
 615       background-color: fadeout(@body-bg, 30%);
 616     }
 617     .section > h1, .section > h2, .section > h3, .section > h4, .section > h5,
 618     .section > h6, .section > .section {
 619       position: relative;
 620       width: auto;
 621       float: none;
 622       clear: both;
 623     }
 624
 625     .bodywrapper {
 626       position: relative;
 627       // middle separator
 628       &:before {
 629         position: absolute;
 630         top: 0;
 631         bottom: 0;
 632         left: 50%;
 633         content: "";
 634         width: 0;
 635         border-left: 1px solid @gray-light;
 636       }
 637     }
 638
 639     .highlight pre {
 640       // but allow additional line-breaks between "words" to avoid overflow
 641       white-space: pre-wrap;
 642     }
 643   }
 644
 645   .switcher {
 646     color: white;
 647     width: auto !important;
 648     float: none !important;
 649
 650     position: fixed;
 651     display: -webkit-flex;
 652     display: flex;
 653     -webkit-justify-content: flex-end;
 654     justify-content: flex-end;
 655
 656     right: 0.5em;
 657     list-style: none;
 658     padding: 0;
 659     margin: 0;
 660     z-index: 5;
 661
 662     li {
 663       background-color: #0f131a;
 664       padding: 0.4em 1em;
 665       border: 1px solid #333;
 666       border-left-width: 0;
 667       cursor: pointer;
 668       &:first-child {
 669         border-left-width: 1px;
 670         border-radius: 5px 0 0 5px;
 671       }
 672       &:last-child {
 673         border-radius: 0 5px 5px 0;
 674       }
 675       &:hover {
 676         background-color: #222;
 677       }
 678       &.active {
 679         background-color: #333;
 680       }
 681     }
 682   }
 683
 684   // === show/hide code snippets ===
 685   [class*=only-],
 686   .switchable > .highlight {
 687     display: none;
 688   }
 689   // must be final rule of page
 690   .only-python, .highlight-python > .highlight {
 691     display: block;
 692   }
 693 }