addons/website/static/src/css/website.css

   1 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
   2  *
   3  * css for editor buttons, openerp widget included in the website and other
   4  * stuff must go to the editor.css
   5  *
   6  */
   7 /* ----- GENERIC LAYOUTING HELPERS ---- */
   8 /* Vertical Spacing */
   9 .mt128 {
  10   margin-top: 128px !important;
  11 }
  12
  13 .mt92 {
  14   margin-top: 92px !important;
  15 }
  16
  17 .mt64 {
  18   margin-top: 64px !important;
  19 }
  20
  21 .mt48 {
  22   margin-top: 48px !important;
  23 }
  24
  25 .mt32 {
  26   margin-top: 32px !important;
  27 }
  28
  29 .mt16 {
  30   margin-top: 16px !important;
  31 }
  32
  33 .mt8 {
  34   margin-top: 8px !important;
  35 }
  36
  37 .mt4 {
  38   margin-top: 4px !important;
  39 }
  40
  41 .mt0 {
  42   margin-top: 0px !important;
  43 }
  44
  45 .mb128 {
  46   margin-bottom: 128px !important;
  47 }
  48
  49 .mb92 {
  50   margin-bottom: 92px !important;
  51 }
  52
  53 .mb64 {
  54   margin-bottom: 64px !important;
  55 }
  56
  57 .mb48 {
  58   margin-bottom: 48px !important;
  59 }
  60
  61 .mb32 {
  62   margin-bottom: 32px !important;
  63 }
  64
  65 .mb16 {
  66   margin-bottom: 16px !important;
  67 }
  68
  69 .mb8 {
  70   margin-bottom: 8px !important;
  71 }
  72
  73 .mb4 {
  74   margin-bottom: 4px !important;
  75 }
  76
  77 .mb0 {
  78   margin-bottom: 0px !important;
  79 }
  80
  81 .pt128 {
  82   padding-top: 128px !important;
  83 }
  84
  85 .pt92 {
  86   padding-top: 92px !important;
  87 }
  88
  89 .pt64 {
  90   padding-top: 64px !important;
  91 }
  92
  93 .pt48 {
  94   padding-top: 48px !important;
  95 }
  96
  97 .pt32 {
  98   padding-top: 32px !important;
  99 }
 100
 101 .pt16 {
 102   padding-top: 16px !important;
 103 }
 104
 105 .pt8 {
 106   padding-top: 8px !important;
 107 }
 108
 109 .pt4 {
 110   padding-top: 4px !important;
 111 }
 112
 113 .pt0 {
 114   padding-top: 0px !important;
 115 }
 116
 117 .pb128 {
 118   padding-bottom: 128px !important;
 119 }
 120
 121 .pb92 {
 122   padding-bottom: 92px !important;
 123 }
 124
 125 .pb64 {
 126   padding-bottom: 64px !important;
 127 }
 128
 129 .pb48 {
 130   padding-bottom: 48px !important;
 131 }
 132
 133 .pb32 {
 134   padding-bottom: 32px !important;
 135 }
 136
 137 .pb16 {
 138   padding-bottom: 16px !important;
 139 }
 140
 141 .pb8 {
 142   padding-bottom: 8px !important;
 143 }
 144
 145 .pb4 {
 146   padding-bottom: 4px !important;
 147 }
 148
 149 .pb0 {
 150   padding-bottom: 0px !important;
 151 }
 152
 153 /* Grid of unequally tall elements */
 154 .grid > [class*="col-md"] {
 155   display: inline-block;
 156   float: none;
 157   vertical-align: top;
 158   box-sizing: border-box;
 159 }
 160 .grid > [class*="col-md"].grid-align-top > [class*="col-md"] {
 161   vertical-align: top;
 162 }
 163 .grid > [class*="col-md"].grid-align-middle > [class*="col-md"] {
 164   vertical-align: middle;
 165 }
 166 .grid > [class*="col-md"].grid-align-bottom > [class*="col-md"] {
 167   vertical-align: bottom;
 168 }
 169
 170 /* Extra Styles */
 171 img.shadow {
 172   -webkit-border-radius: 3px;
 173   -moz-border-radius: 3px;
 174   -ms-border-radius: 3px;
 175   -o-border-radius: 3px;
 176   border-radius: 3px;
 177   -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 178   -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 179   box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 180   margin: 0 auto;
 181 }
 182
 183 h1.text-muted, h2.text-muted, h3.text-muted {
 184   margin-top: 10px;
 185 }
 186
 187 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 188 .navbar.navbar-default.navbar-static-top {
 189   margin-bottom: 0;
 190 }
 191
 192 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 193 html, body, #wrapwrap {
 194   -webkit-box-sizing: border-box;
 195   -moz-box-sizing: border-box;
 196   box-sizing: border-box;
 197   height: 100%;
 198 }
 199
 200 #wrapwrap {
 201   display: table;
 202   width: 100%;
 203 }
 204
 205 header, main, footer {
 206   display: table-row;
 207 }
 208
 209 footer {
 210   height: 100%;
 211   background: #eff8f8;
 212   background: rgba(100, 200, 200, 0.1);
 213 }
 214
 215 #footer_container {
 216   padding-top: 24px;
 217   padding-bottom: 12px;
 218 }
 219
 220 /* ----- BOOTSTRAP FIX ----- */
 221 .col-md-12 {
 222   float: left;
 223   width: 100%;
 224 }
 225
 226 .row {
 227   min-height: 32px;
 228 }
 229
 230 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 231 .oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 232   background-image: url("/website/static/src/img/drag_here.png");
 233 }
 234
 235 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 236   background-image: url("/website/static/src/img/edit_here.png");
 237   background-repeat: no-repeat;
 238   background-position: center;
 239   height: 220px !important;
 240 }
 241
 242 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 243   position: static;
 244 }
 245
 246 .oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
 247   content: "Press The Top-Left Edit Button";
 248   text-align: center;
 249   display: block;
 250   padding-top: 160px;
 251   padding-bottom: 30px;
 252   color: grey;
 253   font-size: 24px;
 254 }
 255
 256 .oe_structure.oe_editable.oe_empty:empty:before, .oe_editable[data-oe-type=html]:empty:before, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
 257   content: "Drag Building Blocks Here";
 258 }
 259
 260 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 261 .navbar .nav > li > p {
 262   margin-bottom: 0px;
 263 }
 264
 265 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 266 .nav-hierarchy {
 267   padding-left: 16px;
 268 }
 269
 270 #themes-list .well {
 271   padding: 0 0 20px 0;
 272 }
 273
 274 /* -- Hack for removing double scrollbar from mobile preview -- */
 275 div#mobile-preview.modal {
 276   overflow: hidden;
 277   overflow-y: hidden;
 278 }
 279
 280 ul.nav-stacked > li > a {
 281   padding: 2px 15px;
 282 }
 283
 284 #customize-menu .dropdown-header {
 285   text-transform: uppercase;
 286 }
 287
 288 /* ---- PUBLISH ---- */
 289 .css_published .btn-danger, .css_published .css_publish {
 290   display: none;
 291 }
 292
 293 .css_unpublished .btn-success, .css_unpublished .css_unpublish {
 294   display: none;
 295 }
 296
 297 [data-publish='off'] {
 298   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
 299   opacity: 0.5;
 300 }
 301
 302 /* ---- END of PUBLISH ---- */
 303 ::-moz-selection {
 304   background: rgba(150, 150, 220, 0.3);
 305 }
 306
 307 ::selection {
 308   background: rgba(150, 150, 220, 0.3);
 309 }
 310
 311 .logo-img {
 312   width: 220px;
 313 }
 314
 315 .oe_demo {
 316   position: relative;
 317 }
 318 .oe_demo img {
 319   width: 100%;
 320 }
 321 .oe_demo div {
 322   position: absolute;
 323   left: 0;
 324   background-color: rgba(0, 0, 0, 0.4);
 325   opacity: 0.85;
 326   bottom: 0px;
 327   width: 100%;
 328   padding: 7px;
 329   color: white;
 330   font-weight: bold;
 331 }
 332 .oe_demo div a {
 333   color: white;
 334 }
 335
 336 /* ---- SNIPPETS --- */
 337 [data-snippet-id],.colmd,.hr,.blockquote {
 338     overflow: hidden;
 339 }
 340
 341 .carousel-inner {
 342   height: 100%;
 343 }
 344 .carousel-inner .item {
 345   height: 100%;
 346   background-size: 100%;
 347 }
 348 .carousel .carousel-caption {
 349   left: auto;
 350   right: auto;
 351   bottom: 10%;
 352   text-align: left;
 353   padding: 20px;
 354   background: rgba(0, 0, 0, 0.4);
 355 }
 356 .carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
 357   margin-top: 10px;
 358   margin-bottom: 10px;
 359 }
 360 .carousel .carousel-image {
 361   right: 50%;
 362   left: 50%;
 363   top: 5%;
 364   bottom: 5%;
 365   position: absolute;
 366   max-height: 90%;
 367   margin: 0 auto;
 368 }
 369 .carousel .item.text_only .carousel-image {
 370   display: none !important;
 371 }
 372 .carousel .item.text_only .carousel-caption {
 373   left: 10%;
 374   right: 10%;
 375   top: 10%;
 376   bottom: auto;
 377   text-align: center;
 378   background: transparent;
 379 }
 380 .carousel .item.image_text .carousel-caption {
 381   right: 10%;
 382 }
 383 .carousel .item.image_text .carousel-image {
 384   left: 10%;
 385 }
 386 .carousel .carousel-control {
 387   cursor: pointer;
 388 }
 389 .carousel .carousel-control span {
 390   top: 50%;
 391   position: absolute;
 392   margin-top: -8px;
 393 }
 394 .carousel .carousel-control.left span {
 395   left: 10px;
 396 }
 397 .carousel .carousel-control.right span {
 398   right: 10px;
 399 }
 400
 401 /* Parallax Theme */
 402 div.carousel[data-snippet-id="slider"] .carousel-indicators li {
 403   border: 1px solid grey;
 404 }
 405 div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 406   background-color: grey;
 407 }
 408
 409 .parallax {
 410   position: relative;
 411   background-size: 100%;
 412   display: table;
 413   width: 100%;
 414   min-height: 100px;
 415 }
 416 .parallax.oe_small {
 417   min-height: 200px;
 418 }
 419 .parallax.oe_medium {
 420   min-height: 300px;
 421 }
 422 .parallax.oe_big {
 423   min-height: 450px;
 424 }
 425 .parallax > div {
 426   display: table-cell;
 427   vertical-align: middle;
 428   padding: 32px 0;
 429 }
 430
 431 /* Background */
 432 .oe_dark {
 433   background: #eff8f8;
 434   background: rgba(100, 200, 200, 0.14);
 435   -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
 436   -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
 437   box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
 438 }
 439
 440 .oe_black {
 441   background-color: rgba(0, 0, 0, 0.9);
 442 }
 443
 444 .oe_green {
 445   background-color: rgba(0, 128, 0, 0.8);
 446 }
 447
 448 .oe_red {
 449   background-color: rgba(255, 0, 0, 0.8);
 450 }
 451
 452 .oe_img_bg {
 453   background-size: 100%;
 454 }
 455
 456 .texttop {
 457   vertical-align: top;
 458 }
 459
 460 table.well tr th {
 461   text-align: right;
 462   padding-right: 10px;
 463 }
 464 table.well tr td {
 465   padding-right: 5px;
 466 }
 467
 468 .logo-img {
 469   width: 220px;
 470 }
 471
 472 .oe_demo {
 473   position: relative;
 474 }
 475 .oe_demo img {
 476   width: 100%;
 477 }
 478 .oe_demo div {
 479   position: absolute;
 480   left: 0;
 481   background-color: rgba(0, 0, 0, 0.4);
 482   opacity: 0.85;
 483   bottom: 0px;
 484   width: 100%;
 485   padding: 7px;
 486   color: white;
 487   font-weight: bold;
 488 }
 489 .oe_demo div a {
 490   color: white;
 491 }
 492
 493 address .fa.fa-mobile-phone {
 494   margin: 0 3px 0 2px;
 495 }
 496 address .fa.fa-file-text-o {
 497   margin-right: 1px;
 498 }
 499
 500 span[data-oe-type="monetary"] {
 501   white-space: nowrap;
 502 }
 503
 504 .oe_template_fallback {
 505   -webkit-column-count: 3;
 506   -moz-column-count: 3;
 507   -ms-column-count: 3;
 508   -o-column-count: 3;
 509   column-count: 3;
 510 }
 511
 512 .bs-callout {
 513   margin: 20px 0;
 514   padding: 20px;
 515   border-left: 3px solid #eeeeee;
 516 }
 517
 518 .bs-callout h4 {
 519   margin-top: 0;
 520   margin-bottom: 5px;
 521 }
 522
 523 .bs-callout p:last-child {
 524   margin-bottom: 0;
 525 }
 526
 527 .bs-callout-danger {
 528   background-color: #fdf7f7;
 529   border-color: #eed3d7;
 530 }
 531
 532 .bs-callout-danger h4 {
 533   color: #b94a48;
 534 }
 535
 536 .bs-callout-warning {
 537   background-color: #faf8f0;
 538   border-color: #faebcc;
 539 }
 540
 541 .bs-callout-warning h4 {
 542   color: #8a6d3b;
 543 }
 544
 545 .bs-callout-info {
 546   background-color: #f4f8fa;
 547   border-color: #bce8f1;
 548 }
 549
 550 .bs-callout-info h4 {
 551   color: #34789a;
 552 }