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 /* Extra Styles */
  83 img.shadow {
  84   -webkit-border-radius: 3px;
  85   -moz-border-radius: 3px;
  86   -ms-border-radius: 3px;
  87   -o-border-radius: 3px;
  88   border-radius: 3px;
  89   -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  90   -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  91   box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  92   margin: 0 auto;
  93 }
  94
  95 h1.text-muted, h2.text-muted, h3.text-muted {
  96   margin-top: 10px;
  97 }
  98
  99 header a.navbar-brand.logo {
 100   padding: 0 15px;
 101 }
 102 header a.navbar-brand img {
 103   max-height: 50px;
 104 }
 105
 106 /* ----- EDITOR ----- */
 107 .css_non_editable_mode_hidden {
 108   display: none;
 109 }
 110
 111 /* ----- BOOTSTRAP FIX ----- */
 112 .container .container {
 113   padding-left: 0;
 114   padding-right: 0;
 115 }
 116
 117 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 118 .navbar.navbar-static-top {
 119   margin-bottom: 0;
 120 }
 121 .navbar.navbar-static-top ul.nav > li.divider {
 122   margin-top: 15px;
 123   padding-top: 20px;
 124   border-right: 1px solid grey;
 125 }
 126
 127 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 128 html, body, #wrapwrap {
 129   -webkit-box-sizing: border-box;
 130   -moz-box-sizing: border-box;
 131   box-sizing: border-box;
 132   height: 100%;
 133 }
 134
 135 #wrapwrap {
 136   display: table;
 137   width: 100%;
 138 }
 139
 140 header, main, footer {
 141   display: table-row;
 142 }
 143
 144 footer {
 145   height: 100%;
 146   background: #eff8f8;
 147   background: rgba(200, 200, 200, 0.1);
 148 }
 149
 150 #footer_container {
 151   padding-top: 24px;
 152   padding-bottom: 12px;
 153 }
 154
 155 /* ----- BOOTSTRAP FIX ----- */
 156 .col-md-12 {
 157   float: left;
 158   width: 100%;
 159 }
 160
 161 .row {
 162   min-height: 32px;
 163   width: 100%;
 164 }
 165
 166 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 167 .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 {
 168   background-image: url("/website/static/src/img/drag_here.png");
 169 }
 170
 171 .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 {
 172   background-image: none;
 173   background-repeat: no-repeat;
 174   background-position: center;
 175   height: 220px !important;
 176 }
 177
 178 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 179   position: static;
 180 }
 181
 182 .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 {
 183   content: " ";
 184   text-align: center;
 185   display: block;
 186   padding-top: 160px;
 187   padding-bottom: 30px;
 188   color: grey;
 189   font-size: 24px;
 190 }
 191
 192 .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 {
 193   content: "Drag Building Blocks Here";
 194 }
 195
 196 .css_editable_display {
 197   display: none;
 198 }
 199
 200 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 201 .navbar .nav > li > p {
 202   margin-bottom: 0px;
 203 }
 204
 205 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 206 .nav-hierarchy {
 207   padding-left: 16px;
 208 }
 209
 210 #themes-list .well {
 211   padding: 0 0 20px 0;
 212 }
 213
 214 /* -- Hack for removing double scrollbar from mobile preview -- */
 215 div#mobile-preview.modal {
 216   overflow: hidden;
 217   overflow-y: hidden;
 218 }
 219
 220 ul.nav-stacked > li > a {
 221   padding: 2px 15px;
 222 }
 223
 224 #customize-menu .dropdown-header {
 225   text-transform: uppercase;
 226 }
 227
 228 /* ---- PUBLISH ---- */
 229 .css_published .btn-danger, .css_published .css_publish {
 230   display: none;
 231 }
 232
 233 .css_unpublished .btn-success, .css_unpublished .css_unpublish {
 234   display: none;
 235 }
 236
 237 [data-publish='off'] {
 238   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
 239   opacity: 0.5;
 240 }
 241
 242 /* ---- END of PUBLISH ---- */
 243 ::-moz-selection {
 244   background: rgba(150, 150, 220, 0.3);
 245 }
 246
 247 ::selection {
 248   background: rgba(150, 150, 220, 0.3);
 249 }
 250
 251 .logo-img {
 252   width: 220px;
 253 }
 254
 255 .oe_demo {
 256   position: relative;
 257 }
 258 .oe_demo img {
 259   width: 100%;
 260 }
 261 .oe_demo div {
 262   position: absolute;
 263   left: 0;
 264   background-color: rgba(0, 0, 0, 0.4);
 265   opacity: 0.85;
 266   bottom: 0px;
 267   width: 100%;
 268   padding: 7px;
 269   color: white;
 270   font-weight: bold;
 271 }
 272 .oe_demo div a {
 273   color: white;
 274 }
 275
 276 /* ---- SNIPPETS --- */
 277 [data-snippet-id], .colmd, .hr, .blockquote {
 278   overflow: hidden;
 279 }
 280
 281 @media (max-width: 400px) {
 282   [data-snippet-id] {
 283     height: auto !important;
 284   }
 285 }
 286 .carousel-inner {
 287   height: 100%;
 288 }
 289 .carousel-inner .item {
 290   height: 100%;
 291   background-size: 100%;
 292 }
 293
 294 .carousel .carousel-caption {
 295   left: auto;
 296   right: auto;
 297   bottom: 10%;
 298   text-align: left;
 299   padding: 20px;
 300   background: rgba(0, 0, 0, 0.4);
 301 }
 302 .carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
 303   margin-top: 10px;
 304   margin-bottom: 10px;
 305 }
 306 .carousel .carousel-image {
 307   right: 50%;
 308   left: 50%;
 309   top: 5%;
 310   bottom: 5%;
 311   position: absolute;
 312   max-height: 90%;
 313   margin: 0 auto;
 314 }
 315 .carousel .item.text_only .carousel-image {
 316   display: none !important;
 317 }
 318 .carousel .item.text_only .carousel-caption {
 319   left: 10%;
 320   right: 10%;
 321   top: 10%;
 322   bottom: auto;
 323   text-align: center;
 324   background: transparent;
 325 }
 326 .carousel .item.image_text .carousel-caption {
 327   right: 10%;
 328 }
 329 .carousel .item.image_text .carousel-image {
 330   left: 10%;
 331 }
 332 .carousel .carousel-control {
 333   cursor: pointer;
 334 }
 335 .carousel .carousel-control span {
 336   top: 50%;
 337   position: absolute;
 338   margin-top: -8px;
 339 }
 340 .carousel .carousel-control.left span {
 341   left: 10px;
 342 }
 343 .carousel .carousel-control.right span {
 344   right: 10px;
 345 }
 346
 347 .quotecarousel {
 348   padding-bottom: 16px;
 349 }
 350
 351 /* Parallax Theme */
 352 div.carousel[data-snippet-id="slider"] .carousel-indicators li {
 353   border: 1px solid grey;
 354 }
 355 div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 356   background-color: grey;
 357 }
 358
 359 .parallax {
 360   position: relative;
 361   background-size: 100%;
 362   display: table;
 363   width: 100%;
 364   min-height: 100px;
 365 }
 366 .parallax.oe_small {
 367   min-height: 200px;
 368 }
 369 .parallax.oe_medium {
 370   min-height: 300px;
 371 }
 372 .parallax.oe_big {
 373   min-height: 450px;
 374 }
 375 .parallax > div {
 376   display: table-cell;
 377   vertical-align: middle;
 378   padding: 32px 0;
 379 }
 380
 381 /* Background */
 382 .oe_dark {
 383   background: #eff8f8;
 384   background: rgba(200, 200, 200, 0.14);
 385   -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;
 386   -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;
 387   box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
 388 }
 389
 390 .oe_black {
 391   background-color: rgba(0, 0, 0, 0.9);
 392   color: white;
 393 }
 394
 395 .oe_green {
 396   background-color: #51d466;
 397   color: white;
 398 }
 399 .oe_green .text-muted {
 400   color: #dddddd;
 401 }
 402
 403 .oe_blue_light {
 404   background-color: #4791d2;
 405   color: white;
 406 }
 407 .oe_blue_light .text-muted {
 408   color: #dddddd;
 409 }
 410
 411 .oe_blue {
 412   background-color: #34495e;
 413   color: white;
 414 }
 415
 416 .oe_orange {
 417   background-color: #e67e22;
 418   color: white;
 419 }
 420 .oe_orange .text-muted {
 421   color: #dddddd;
 422 }
 423
 424 .oe_purple {
 425   background-color: #b163a3;
 426   color: white;
 427 }
 428 .oe_purple .text-muted {
 429   color: #dddddd;
 430 }
 431
 432 .oe_red {
 433   background-color: #f75353;
 434   color: white;
 435 }
 436 .oe_red .text-muted {
 437   color: #dddddd;
 438 }
 439
 440 /* Misc */
 441 .oe_img_bg {
 442   background-size: 100%;
 443 }
 444
 445 .texttop {
 446   vertical-align: top;
 447 }
 448
 449 table.well tr th {
 450   text-align: right;
 451   padding-right: 10px;
 452 }
 453 table.well tr td {
 454   padding-right: 5px;
 455 }
 456
 457 .logo-img {
 458   width: 220px;
 459 }
 460
 461 .oe_demo {
 462   position: relative;
 463 }
 464 .oe_demo img {
 465   width: 100%;
 466 }
 467 .oe_demo div {
 468   position: absolute;
 469   left: 0;
 470   background-color: rgba(0, 0, 0, 0.4);
 471   opacity: 0.85;
 472   bottom: 0px;
 473   width: 100%;
 474   padding: 7px;
 475   color: white;
 476   font-weight: bold;
 477 }
 478 .oe_demo div a {
 479   color: white;
 480 }
 481
 482 address .fa.fa-mobile-phone {
 483   margin: 0 3px 0 2px;
 484 }
 485 address .fa.fa-file-text-o {
 486   margin-right: 1px;
 487 }
 488
 489 span[data-oe-type="monetary"] {
 490   white-space: nowrap;
 491 }
 492
 493 .oe_template_fallback {
 494   -webkit-column-count: 3;
 495   -moz-column-count: 3;
 496   -ms-column-count: 3;
 497   -o-column-count: 3;
 498   column-count: 3;
 499 }
 500
 501 .oe_website_login_container {
 502   width: 400px;
 503   margin: 40px auto;
 504 }