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 body {
  21   position: relative;
  22 }
  23
  24 .document-super {
  25   .container();
  26 }
  27
  28 .document {
  29   .make-row();
  30 }
  31
  32 .documentwrapper {
  33   .make-md-column(9);
  34 }
  35 .sphinxsidebar {
  36   .make-md-column(3);
  37 }
  38
  39 .btn-outline {
  40   color: @brand-primary;
  41   background-color: transparent;
  42   border-color: @brand-primary;
  43   &:hover, &:focus, &:active {
  44     color: #fff;
  45     background-color: @brand-primary;
  46     border-color: @brand-primary;
  47   }
  48 }
  49
  50
  51 .btn-outline-inverse {
  52   color: #fff;
  53   background-color: transparent;
  54   border-color: @brand-text;
  55   &:hover, &:focus, &:active {
  56     color: @brand-primary;
  57     text-shadow: none;
  58     background-color: #fff;
  59     border-color: #fff;
  60   }
  61 }
  62 /*
  63  * Main navigation
  64  */
  65 .docs-nav {
  66   .navbar-brand,
  67   .navbar-nav > li > a {
  68     position: relative;
  69   }
  70
  71   .navbar-nav > li {
  72     > a:hover:before, &.current a:before {
  73       bottom: 10px;
  74       opacity: 1;
  75     }
  76     > a:before {
  77       display: block;
  78       position: absolute;
  79       bottom: 0;
  80       left: 10px;
  81       content: "";
  82       right: 10px;
  83       height: 3px;
  84       background: @brand-primary;
  85       opacity: 0;
  86       .transition(all 0.3s ease-out);
  87     }
  88     > a:after {
  89       content: " ";
  90       display: inline-block;
  91       width: 0;
  92       height: 0;
  93       margin-left: 5px;
  94       vertical-align: middle;
  95       border-top: 4px solid @gray-light;
  96       border-right: 4px solid transparent;
  97       border-left: 4px solid transparent;
  98     }
  99     .dropdown-menu > li.current > a.current {
 100       background-color: @brand-primary;
 101       color: white;
 102     }
 103   }
 104 }
 105
 106 // FIXME: protocol-relative urls for remote but absolute for local (file://)?
 107 .o_logo {
 108   display: inline-block;
 109   font-size: 300%;
 110   .o_logo_main {
 111     background-image: url(odoo_logo_rgb.png);
 112     background-repeat: no-repeat;
 113     background-position: center center;
 114     background-size: contain;
 115     color: rgba(255, 255, 255, 0);
 116     text-decoration: none;
 117   }
 118   .o_logo_app {
 119     text-decoration: none;
 120     color: rgb(143, 143, 143);
 121     font-family: Lato, Arial, sans-serif;
 122     font-size: 50%;
 123     margin: 0.2em;
 124   }
 125 }
 126
 127 /*
 128  * Side navigation
 129  *
 130  * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 131  * sections of docs content.
 132  */
 133
 134 /* By default it's not affixed in mobile views, so undo that */
 135 .sphinxsidebarwrapper.affix {
 136   position: static;
 137 }
 138 @media (min-width: @screen-sm-min) {
 139   .sphinxsidebarwrapper {
 140     padding-left: 20px;
 141   }
 142 }
 143
 144 /* Side navigation visibility changes */
 145 .sphinxsidebarwrapper {
 146   > .nav { // root (contains document categories), always show
 147     .nav {
 148       // hide sub-everything by default
 149       display: none;
 150     }
 151
 152     li.active > .nav,
 153     li.current > .nav {
 154       // sub-items of a current or active li are shown
 155       display: block;
 156     }
 157   }
 158 }
 159
 160 /* Side navigation graphical styling */
 161 @nav-spacing: 20px;
 162 @nav-spacing-increment: 5px;
 163 @nav-hover-offset: 1px;
 164 @nav-hover: @nav-spacing - @nav-hover-offset;
 165 @nav-current-offset: 2px;
 166 @nav-current: @nav-spacing - @nav-current-offset;
 167
 168 .sphinxsidebarwrapper {
 169   width: 100%;
 170
 171   .hidden-xs();
 172   .hidden-sm();
 173   .hidden-print();
 174
 175   /* First level of nav */
 176   > .nav {
 177     margin-top: 20px;
 178     margin-bottom: 20px;
 179   }
 180
 181   .nav > li > a {
 182     font-size: 13px;
 183     font-weight: bold;
 184     padding-left: @nav-spacing;
 185   }
 186   .nav .nav > li > a {
 187     font-size: 12px;
 188     padding-left: @nav-spacing + @nav-spacing-increment;
 189   }
 190   .nav .nav .nav > li > a {
 191     font-weight: normal;
 192     padding-left: @nav-spacing + 2*@nav-spacing-increment;
 193   }
 194   .nav .nav .nav .nav > li > a {
 195     font-size: 11px;
 196     padding-left: @nav-spacing + 3*@nav-spacing-increment;
 197   }
 198
 199   /* All levels of nav */
 200   .nav {
 201     > li > a {
 202       display: block;
 203       padding: 4px @nav-spacing;
 204       color: #999;
 205
 206       &:hover, &:focus {
 207         padding-left: @nav-hover;
 208         color: @brand-primary;
 209         text-decoration: none;
 210         background-color: transparent;
 211         border-left: @nav-hover-offset solid @brand-primary;
 212       }
 213     }
 214
 215     // before scrollspy is applied, need to use current for docs
 216     > .current > a, > .current:hover > a, > .current:focus > a,
 217     > .active > a, > .active:hover > a, > .active:focus > a {
 218       padding-left: @nav-current;
 219       font-weight: bold;
 220       color: @brand-primary;
 221       background-color: transparent;
 222       border-left: @nav-current-offset solid @brand-primary;
 223     }
 224   }
 225   .nav .nav {
 226     > li > a:hover, > li > a:focus {
 227       padding-left: @nav-hover + @nav-spacing-increment;
 228     }
 229     > .current > a, > .current:hover > a, > .current:focus > a,
 230     > .active > a, > .active:hover > a, > .active:focus > a {
 231       padding-left: @nav-current + @nav-spacing-increment;
 232     }
 233   }
 234   .nav .nav .nav {
 235     padding-bottom: 10px;
 236
 237     > li > a {
 238       padding-top: 1px;
 239       padding-bottom: 1px;
 240     }
 241
 242     > li > a:hover, > li > a:focus {
 243       padding-left: @nav-hover + 2 * @nav-spacing-increment;
 244     }
 245     > .active > a, > .active:hover > a, > .active:focus > a {
 246       padding-left: @nav-current + 2 * @nav-spacing-increment;
 247       font-weight: bold;
 248     }
 249   }
 250   .nav .nav .nav .nav {
 251     > li > a:hover, > li > a:focus {
 252       padding-left: @nav-hover + 3 * @nav-spacing-increment;
 253     }
 254     > .active > a, > .active:hover > a, > .active:focus > a {
 255       padding-left: @nav-current + 3 * @nav-spacing-increment;
 256     }
 257   }
 258 }
 259
 260 /* Show and affix the side nav when space allows it */
 261 @media (min-width: @screen-md-min) {
 262   .sphinxsidebarwrapper {
 263     .nav .nav > .active > ul {
 264       display: block;
 265     }
 266     /* Widen the fixed sidebar */
 267     &.affix, &.affix-bottom {
 268       width: 213px;
 269     }
 270     &.affix {
 271       position: fixed; /* Undo the static from mobile first approach */
 272       top: 20px;
 273     }
 274     &.affix-bottom {
 275       position: absolute; /* Undo the static from mobile first approach */
 276     }
 277     &.affix-bottom > .nav, &.affix > .nav {
 278       margin-top: 0;
 279       margin-bottom: 0;
 280     }
 281   }
 282 }
 283 @media (min-width: @screen-lg-min) {
 284   /* Widen the fixed sidebar again */
 285   .sphinxsidebarwrapper.affix-bottom,
 286   .sphinxsidebarwrapper.affix {
 287     width: 263px;
 288   }
 289 }
 290
 291 /*
 292  * Footer
 293  *
 294  * Separated section of content at the bottom of all pages, save the homepage.
 295  */
 296
 297 .footer {
 298   padding-top: 40px;
 299   padding-bottom: 40px;
 300   margin-top: 100px;
 301   color: #777;
 302   text-align: center;
 303   border-top: 1px solid #e5e5e5;
 304 }
 305 .docs-footer-links {
 306   padding-left: 0;
 307   margin-top: 20px;
 308   color: #999;
 309 }
 310 .docs-footer-links li {
 311   display: inline;
 312   padding: 0 2px;
 313 }
 314 .docs-footer-links li:first-child {
 315   padding-left: 0;
 316 }
 317
 318 @media (min-width: 768px) {
 319   .footer p {
 320     margin-bottom: 0;
 321   }
 322 }
 323
 324 // hide header ¶ link
 325 .headerlink {
 326   display: none;
 327 }
 328 // either that or overwrite visit_attribution/depart_attribution
 329 blockquote p.attribution:extend(blockquote footer) {}
 330
 331 div.section > h1 {
 332   .page-header();
 333   font-size: floor((@font-size-base * 3.05));
 334 }
 335
 336 div.section > h2 {
 337   .page-header();
 338   font-size: @font-size-h1;
 339   padding-top: 20px;
 340   margin-top: 0;
 341 }
 342 // ~docs-section
 343 .body > .section > .section {
 344   margin-bottom: 60px;
 345 }
 346
 347 .literal:extend(code) {}
 348
 349 .admonition {
 350   padding: 20px;
 351   margin: 20px 0;
 352   border: 1px solid @gray-lighter;
 353   border-left-width: 5px;
 354   border-radius: 3px;
 355
 356   .admonition-title:after {
 357     content: ": ";
 358   }
 359   > .admonition-title,
 360   // only "aphorisms" should have the same size as the admonition category
 361   &.aphorism > .admonition-title + p,
 362   &.exercise > .admonition-title + p {
 363     display: inline-block;
 364     margin-top: 0;
 365     margin-bottom: 5px;
 366
 367     font-family: @headings-font-family;
 368     font-weight: @headings-font-weight;
 369     line-height: @headings-line-height;
 370     color: @headings-color;
 371
 372     font-size: @font-size-h4;
 373   }
 374
 375   p:last-child {
 376     margin-bottom: 0;
 377   }
 378
 379   &.tip {
 380     border-left-color: @brand-info;
 381     > .admonition-title {
 382       color: @brand-info;
 383     }
 384   }
 385   &.warning {
 386     border-left-color: @brand-warning;
 387     > .admonition-title {
 388       color: @brand-warning;
 389     }
 390   }
 391   &.danger {
 392     border-left-color: @brand-danger;
 393     > .admonition-title {
 394       color: @brand-danger;
 395     }
 396   }
 397   &.exercise {
 398     border-left-color: @gray-light;
 399     > .admonition-title {
 400       color: @gray;
 401     }
 402   }
 403 }
 404
 405 /*
 406  * Code snippets
 407  *
 408  * Generated via Pygments
 409  */
 410
 411 .highlight {
 412   padding: 9px 14px;
 413   margin-bottom: 14px;
 414   background-color: #f7f7f9 !important;
 415   border: 1px solid #e1e1e8;
 416   border-radius: 4px;
 417 }
 418 .highlight pre {
 419   color: #333;
 420   padding: 0 45px 0 0;
 421   margin-top: 0;
 422   margin-bottom: 0;
 423   background-color: transparent;
 424   border: 0;
 425 }
 426
 427 /*
 428  * ZeroClipboard styles
 429  */
 430
 431 .zero-clipboard {
 432   position: relative;
 433   display: none;
 434 }
 435 .btn-clipboard {
 436   position: absolute;
 437   top: 0;
 438   right: 0;
 439   z-index: 10;
 440   display: block;
 441   padding: 5px 8px;
 442   font-size: 12px;
 443   color: #777;
 444   cursor: pointer;
 445   background-color: #fff;
 446   border: 1px solid #e1e1e8;
 447   border-radius: 0 4px 0 4px;
 448 }
 449 .btn-clipboard-hover {
 450   color: #fff;
 451   background-color: @brand-primary;
 452   border-color: @brand-primary;
 453 }
 454
 455 @media (min-width: 768px) {
 456   .zero-clipboard {
 457     display: block;
 458   }
 459 }
 460
 461 // rST styles
 462 img.align-center {
 463   display: block;
 464   margin: 0 auto;
 465 }
 466
 467 dd {
 468   // Reinstate dd indent, looks horrible and illegible otherwise
 469   margin-left: @item-indent;
 470 }
 471
 472 // By default there's (browser) padding on ``ul`` so lists of >1 field are
 473 // nicely separated from the section name (e.g. ``Parameters``) but single
 474 // fields/items are stuck to it and look horrible. Make everything neatly-ish
 475 // aligned. Other option: half and half so list bullets are aligned to text
 476 // instead of text to text
 477 td.field-body {
 478   padding-left: @item-indent;
 479   ul {
 480     padding-left: @item-indent;
 481   }
 482   > ul {
 483     padding-left: 0;
 484   }
 485 }
 486
 487 // naming collision, rST generates .container nodes with completely different
 488 // semantics so go away
 489 .section .container {
 490     width: auto;
 491     margin: 0;
 492     padding: 0;
 493 }
 494
 495 // code block lines should not wrap
 496 pre {
 497   word-break: normal;
 498   word-wrap: normal;
 499 }