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   box-sizing: border-box;
 196   height: 100%;
 197 }
 198
 199 #wrapwrap {
 200   display: table;
 201   width: 100%;
 202 }
 203
 204 header, #wrap, footer {
 205   display: table-row;
 206 }
 207
 208 footer {
 209   height: 100%;
 210   background: #eff8f8;
 211   background: rgba(100, 200, 200, 0.1);
 212 }
 213
 214 #footer_container {
 215   padding-top: 24px;
 216   padding-bottom: 12px;
 217 }
 218
 219 /* ----- BOOTSTRAP FIX ----- */
 220 .col-md-12 {
 221   float: left;
 222   width: 100%;
 223 }
 224
 225 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 226 .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 {
 227   background-image: url("/website/static/src/img/drag_here.png");
 228 }
 229
 230 .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 {
 231   background-image: url("/website/static/src/img/edit_here.png");
 232   background-repeat: no-repeat;
 233   background-position: center;
 234   height: 220px !important;
 235 }
 236
 237 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 238   position: static;
 239 }
 240
 241 .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 {
 242   content: "Click Edit To Create Content";
 243   text-align: center;
 244   display: block;
 245   padding-top: 160px;
 246   padding-bottom: 30px;
 247   color: grey;
 248   font-size: 24px;
 249 }
 250
 251 .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 {
 252   content: "Drag Building Blocks Here";
 253 }
 254
 255 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 256 .navbar .nav > li > p {
 257   margin-bottom: 0px;
 258 }
 259
 260 .carousel-inner .item {
 261   height: 100%;
 262   background-size: 100%;
 263 }
 264
 265 .carousel.oe_small .carousel-inner {
 266   height: 200px;
 267 }
 268 .carousel.oe_medium .carousel-inner {
 269   height: 300px;
 270 }
 271 .carousel.oe_big .carousel-inner {
 272   height: 450px;
 273 }
 274 .carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
 275   margin-top: 10px;
 276   margin-bottom: 10px;
 277 }
 278 .carousel .carousel-image {
 279   right: 10%;
 280   left: 50%;
 281   top: 5%;
 282   bottom: 5%;
 283   position: absolute;
 284   text-align: center;
 285 }
 286 .carousel .carousel-image img {
 287   height: 100%;
 288   margin: 0 auto;
 289 }
 290 .carousel .item.text_image .carousel-caption {
 291   left: auto;
 292   right: auto;
 293   bottom: 10%;
 294   text-align: left;
 295   padding: 20px;
 296   background: rgba(0, 0, 0, 0.4);
 297 }
 298 .carousel .item.text_only .carousel-image {
 299   display: none !important;
 300 }
 301 .carousel .item.text_only .carousel-caption {
 302   left: 10%;
 303   right: 10%;
 304   top: 10%;
 305   text-align: center;
 306 }
 307 .carousel .item.image_text .carousel-caption {
 308   left: auto;
 309   text-align: left;
 310   right: 10%;
 311   bottom: 10%;
 312   padding: 20px;
 313   background: rgba(0, 0, 0, 0.4);
 314 }
 315 .carousel .item.image_text .carousel-image {
 316   right: 50%;
 317   left: 10%;
 318 }
 319 .carousel .carousel-control {
 320   cursor: pointer;
 321 }
 322 .carousel .carousel-control span {
 323   top: 50%;
 324   position: absolute;
 325   margin-top: -8px;
 326 }
 327 .carousel .carousel-control.left span {
 328   left: 10px;
 329 }
 330 .carousel .carousel-control.right span {
 331   right: 10px;
 332 }
 333
 334 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 335 .dark {
 336   background: #eff8f8;
 337   background: rgba(100, 200, 200, 0.14);
 338   -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;
 339   -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;
 340   box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
 341 }
 342
 343 .nav-hierarchy {
 344   padding-left: 16px;
 345 }
 346
 347 #themes-list .well {
 348   padding: 0 0 20px 0;
 349 }
 350
 351 /* Parallax Theme */
 352 .parallax_quote {
 353   background: url("/website/static/src/img/parallax/quote.png") center center no-repeat fixed;
 354   background-size: contain;
 355 }
 356 .parallax_quote .carousel-indicators li {
 357   border: 1px solid grey;
 358 }
 359 .parallax_quote .carousel-indicators .active {
 360   background-color: grey;
 361 }
 362
 363 .parallax_full {
 364   background: #eeeeee bottom center repeat fixed;
 365   min-height: 650px;
 366   width: 100%;
 367   background-size: 100%;
 368 }
 369
 370 /* -- Hack for removing double scrollbar from mobile preview -- */
 371 div#mobile-preview.modal {
 372   overflow: hidden;
 373   overflow-y: hidden;
 374 }
 375
 376 ul.nav-stacked > li > a {
 377   padding: 2px 15px;
 378 }
 379
 380 #customize-menu .dropdown-header {
 381   text-transform: uppercase;
 382 }
 383
 384 /* ---- PUBLISH ---- */
 385 a[data-publish] {
 386   text-decoration: none !important;
 387 }
 388 a[data-publish] .css_unpublish, a[data-publish] .css_publish, a[data-publish] .css_unpublished, a[data-publish] .css_published {
 389   display: none;
 390 }
 391 a[data-publish][data-publish='off'] .css_unpublished, a[data-publish][data-publish='off']:hover .css_publish {
 392   display: inline;
 393 }
 394 a[data-publish][data-publish='off']:hover .css_unpublished {
 395   display: none;
 396 }
 397 a[data-publish][data-publish='on'] .css_published, a[data-publish][data-publish='on']:hover .css_unpublish {
 398   display: inline;
 399 }
 400 a[data-publish][data-publish='on']:hover .css_published {
 401   display: none;
 402 }
 403
 404 .dropdown .css_unpublish, .dropdown .css_publish {
 405   display: none;
 406 }
 407
 408 .dropdown.css_publish .css_unpublish, .dropdown.css_unpublish .css_publish {
 409   display: block;
 410 }
 411
 412 .unpublish {
 413   opacity: 0.5;
 414 }
 415
 416 [data-publish='off']:not(a) > :not(.js_publish) {
 417   opacity: 0.5;
 418 }
 419
 420 [data-publish]:not(a) {
 421   position: relative;
 422   overflow: visible;
 423   /*&:hover .js_publish */
 424   /*     display: block */
 425 }
 426 [data-publish]:not(a) .js_publish {
 427   position: absolute;
 428   right: -6px;
 429   top: -10px;
 430   display: none;
 431 }
 432
 433 ::selection {
 434   background: rgba(150, 150, 220, 0.3);
 435 }