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