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