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

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