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

   1 /* ---- SNIPPET EDITOR ---- {{{ */
   2 #oe_snippets {
   3   position: fixed;
   4   left: 0px;
   5   right: 0px;
   6   background: #282828;
   7   -webkit-box-shadow: 0px 10px 10px -10px black inset;
   8   -moz-box-shadow: 0px 10px 10px -10px black inset;
   9   box-shadow: 0px 10px 10px -10px black inset;
  10   z-index: 1010;
  11   overflow: hidden;
  12 }
  13 #oe_snippets:hover {
  14   height: auto;
  15 }
  16 #oe_snippets .scroll {
  17   white-space: nowrap;
  18   overflow-y: none;
  19 }
  20 #oe_snippets .nav {
  21   display: inline-block;
  22   border-bottom: none !important;
  23   vertical-align: middle;
  24   min-width: 120px;
  25   z-index: 1;
  26 }
  27 #oe_snippets .nav > li {
  28   display: block;
  29   float: none;
  30 }
  31 #oe_snippets .nav > li.active {
  32   background: black !important;
  33 }
  34 #oe_snippets .nav > li > a {
  35   padding: 2px 10px !important;
  36   width: 100%;
  37   display: block;
  38   border: 0;
  39 }
  40 #oe_snippets .pill-content {
  41   border: 0;
  42 }
  43 #oe_snippets .tab-content {
  44   display: inline-block;
  45   white-space: nowrap;
  46   background: black;
  47 }
  48 #oe_snippets .tab-content > div {
  49   background: black;
  50 }
  51 #oe_snippets .tab-content > div label {
  52   width: 44px;
  53   color: white;
  54   padding-left: 10px;
  55 }
  56 #oe_snippets .tab-content > div label div {
  57   width: 100px;
  58   text-align: center;
  59   -webkit-transform: translate(-39px, 44px);
  60   -moz-transform: translate(-39px, 44px);
  61   -ms-transform: translate(-39px, 44px);
  62   -o-transform: translate(-39px, 44px);
  63   transform: translate(-39px, 44px);
  64   -webkit-transform-origin: 50% 50% 50%;
  65   -moz-transform-origin: 50% 50% 50%;
  66   -ms-transform-origin: 50% 50% 50%;
  67   -o-transform-origin: 50% 50% 50%;
  68   transform-origin: 50% 50% 50%;
  69 }
  70
  71 .oe_snippet {
  72   float: left;
  73   vertical-align: top;
  74   width: 93px;
  75   margin-left: 1px;
  76   margin-top: 0px;
  77   position: relative;
  78   overflow: hidden;
  79   -webkit-user-select: none;
  80   -moz-user-select: none;
  81   user-select: none;
  82   cursor: move;
  83   pointer-events: none;
  84 }
  85 .oe_snippet .oe_snippet_thumbnail {
  86   pointer-events: auto;
  87   text-align: center;
  88   height: 100%;
  89   background: transparent;
  90   color: white;
  91   position: relative;
  92 }
  93 .oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
  94   -webkit-transform: scale(0.95, 0.95);
  95   -moz-transform: scale(0.95, 0.95);
  96   -ms-transform: scale(0.95, 0.95);
  97   -o-transform: scale(0.95, 0.95);
  98   transform: scale(0.95, 0.95);
  99 }
 100 .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
 101   font-size: 12px;
 102   display: block;
 103   text-shadow: 0 0 2px black;
 104 }
 105 .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
 106   height: 74px;
 107   -webkit-transition: all 150ms linear;
 108   -moz-transition: all 150ms linear;
 109   -o-transition: all 150ms linear;
 110   transition: all 150ms linear;
 111   -webkit-box-shadow: inset 0px 0px 0px 3px #333333;
 112   -moz-box-shadow: inset 0px 0px 0px 3px #333333;
 113   box-shadow: inset 0px 0px 0px 3px #333333;
 114   -webkit-transform: scale(1, 1);
 115   -moz-transform: scale(1, 1);
 116   -ms-transform: scale(1, 1);
 117   -o-transform: scale(1, 1);
 118   transform: scale(1, 1);
 119 }
 120 .oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
 121   line-height: 18px;
 122 }
 123 .oe_snippet > :not(.oe_snippet_thumbnail) {
 124   display: none !important;
 125 }
 126
 127 #oe_snippets .oe_snippet_thumbnail {
 128   background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0.4)));
 129   background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
 130   background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
 131   background: #747474, -o-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
 132   background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
 133 }
 134
 135 /* ---- SNIPPETS DROP ZONES ---- {{{ */
 136 .oe_drop_zone.oe_insert {
 137   display: block;
 138   height: 48px;
 139   margin: 0px;
 140   margin-top: -4px;
 141   margin-bottom: -44px;
 142   -webkit-transition: margin 250ms linear;
 143   -moz-transition: margin 250ms linear;
 144   -o-transition: margin 250ms linear;
 145   transition: margin 250ms linear;
 146   width: 100%;
 147   position: absolute;
 148   z-index: 1000;
 149 }
 150 .oe_drop_zone.oe_insert:not(.oe_vertical):before {
 151   content: "";
 152   display: block;
 153   border-top: dashed 2px rgba(209, 178, 255, 0.72);
 154   position: relative;
 155   top: 0px;
 156 }
 157 .oe_drop_zone.oe_insert.oe_hover:before {
 158   border-top: dashed 2px rgba(116, 255, 161, 0.72);
 159 }
 160 .oe_drop_zone.oe_insert.oe_vertical {
 161   width: 48px;
 162   float: left;
 163   position: relative;
 164   margin: 0px -24px !important;
 165 }
 166 .oe_drop_zone.oe_insert.oe_overlay {
 167   -webkit-border-radius: 3px;
 168   -moz-border-radius: 3px;
 169   -ms-border-radius: 3px;
 170   -o-border-radius: 3px;
 171   border-radius: 3px;
 172   background: rgba(153, 0, 255, 0.5);
 173 }
 174
 175 .oe_drop_zone, .oe_drop_zone_style {
 176   border: none;
 177   background: rgba(153, 0, 255, 0.3);
 178   -webkit-border-radius: 4px;
 179   -moz-border-radius: 4px;
 180   -ms-border-radius: 4px;
 181   -o-border-radius: 4px;
 182   border-radius: 4px;
 183 }
 184 .oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
 185   background: rgba(0, 255, 133, 0.3);
 186   z-index: 1001;
 187 }
 188
 189 .oe_drop_zone_style {
 190   color: white;
 191   height: 48px;
 192   margin-bottom: 32px;
 193   padding-top: 12px;
 194 }
 195
 196 /* ---- SNIPPET MANIPULATOR ----  {{{ */
 197 .resize_editor_busy {
 198   background-color: rgba(0, 0, 0, 0.3);
 199 }
 200
 201 .oe_overlay {
 202   display: none;
 203   position: absolute;
 204   background: transparent;
 205   -webkit-border-radius: 3px;
 206   -moz-border-radius: 3px;
 207   -ms-border-radius: 3px;
 208   -o-border-radius: 3px;
 209   border-radius: 3px;
 210   -webkit-transition: opacity 100ms linear;
 211   -moz-transition: opacity 100ms linear;
 212   -o-transition: opacity 100ms linear;
 213   transition: opacity 100ms linear;
 214   -webkit-box-sizing: border-box;
 215   -moz-box-sizing: border-box;
 216   box-sizing: border-box;
 217   pointer-events: none;
 218 }
 219 .oe_overlay.oe_active {
 220   display: block;
 221   border-style: dashed;
 222   border-width: 1px;
 223   -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
 224   -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
 225   box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
 226   border-color: rgba(0, 0, 0, 0.5);
 227 }
 228 .oe_overlay .oe_handle {
 229   display: block !important;
 230   pointer-events: auto;
 231   position: absolute;
 232   top: 50%;
 233   left: 50%;
 234   -webkit-box-sizing: border-box;
 235   -moz-box-sizing: border-box;
 236   box-sizing: border-box;
 237   width: 16px;
 238   height: 16px;
 239   margin: -2px;
 240 }
 241 .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
 242   position: relative;
 243   top: 50%;
 244   left: 50%;
 245   display: block;
 246   background: white;
 247   border: solid 1px rgba(0, 0, 0, 0.2);
 248   -webkit-border-radius: 5px;
 249   -moz-border-radius: 5px;
 250   -ms-border-radius: 5px;
 251   -o-border-radius: 5px;
 252   border-radius: 5px;
 253   width: 18px;
 254   height: 18px;
 255   margin: -9px;
 256   padding-left: 1px;
 257   font-size: 14px;
 258   line-height: 14px;
 259   font-family: FontAwesome;
 260   color: rgba(0, 0, 0, 0.5);
 261   -webkit-transition: background 100ms linear;
 262   -moz-transition: background 100ms linear;
 263   -o-transition: background 100ms linear;
 264   transition: background 100ms linear;
 265 }
 266 .oe_overlay .oe_handle.e:hover:before, .oe_overlay .oe_handle.w:hover:before, .oe_overlay .oe_handle.s:hover:before, .oe_overlay .oe_handle.n:hover:before {
 267   background: rgba(0, 0, 0, 0.5);
 268   color: white;
 269   -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 270   -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 271   box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 272 }
 273 .oe_overlay .oe_handle.e {
 274   left: auto;
 275   top: 2px;
 276   height: 100%;
 277   right: -6px;
 278   cursor: w-resize;
 279 }
 280 .oe_overlay .oe_handle.e:before {
 281   content: "\F061";
 282 }
 283 .oe_overlay .oe_handle.s {
 284   top: auto;
 285   left: 2px;
 286   width: 100%;
 287   bottom: -6px;
 288   cursor: n-resize;
 289 }
 290 .oe_overlay .oe_handle.s:before {
 291   z-index: 0;
 292   content: "\F063";
 293 }
 294 .oe_overlay .oe_handle.size {
 295   top: auto;
 296   left: 2px;
 297   width: 100%;
 298   bottom: -6px;
 299 }
 300 .oe_overlay .oe_handle.size .oe_handle_button {
 301   z-index: 1;
 302   content: "Resize";
 303   width: 64px;
 304   text-align: center;
 305   margin-left: -32px;
 306   margin-top: -10px;
 307   cursor: row-resize;
 308 }
 309 .oe_overlay .oe_handle.size .oe_handle_button:hover {
 310   background: rgba(30, 30, 30, 0.8);
 311   color: white;
 312   -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 313   -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 314   box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 315 }
 316 .oe_overlay .oe_handle.size div {
 317   border-style: dashed;
 318   border-width: 0 0 1px 0;
 319   border-color: rgba(0, 0, 0, 0.5);
 320   position: relative;
 321   top: 8px;
 322 }
 323 .oe_overlay .oe_handle.w {
 324   top: 2px;
 325   height: 100%;
 326   left: -6px;
 327   cursor: e-resize;
 328 }
 329 .oe_overlay .oe_handle.w:before {
 330   content: "\F060";
 331 }
 332 .oe_overlay .oe_handle.n {
 333   left: 2px;
 334   width: 100%;
 335   top: -6px;
 336   cursor: s-resize;
 337 }
 338 .oe_overlay .oe_handle.n:before {
 339   content: "\F062";
 340 }
 341 .oe_overlay .icon.btn {
 342   display: inline-block;
 343 }
 344 .oe_overlay .oe_overlay_options {
 345   position: absolute;
 346   width: 100%;
 347   text-align: center;
 348   top: -11px;
 349   z-index: 1002;
 350 }
 351 .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
 352   pointer-events: auto;
 353   cursor: pointer;
 354 }
 355 .oe_overlay .oe_overlay_options .dropdown {
 356   display: inline-block;
 357 }
 358 .oe_overlay .oe_overlay_options .dropdown-menu {
 359   text-align: left;
 360   min-width: 180px;
 361 }
 362 .oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
 363   display: block;
 364 }
 365
 366 .s-resize-important, .s-resize-important * {
 367   cursor: s-resize !important;
 368 }
 369
 370 .n-resize-important, .n-resize-important * {
 371   cursor: n-resize !important;
 372 }
 373
 374 .e-resize-important, .e-resize-important * {
 375   cursor: e-resize !important;
 376 }
 377
 378 .w-resize-important, .w-resize-important * {
 379   cursor: w-resize !important;
 380 }
 381
 382 .move-important, .move-important * {
 383   cursor: move !important;
 384 }
 385
 386 /* add CSS for bootstrap dropdown multi level */
 387 .dropdown-submenu {
 388   position: relative;
 389   z-index: 1000;
 390 }
 391
 392 .dropdown-submenu > .dropdown-menu {
 393   top: 0;
 394   left: 100%;
 395   margin-top: -6px;
 396   margin-left: -1px;
 397   -webkit-border-radius: 0 6px 6px 6px;
 398   -moz-border-radius: 0 6px 6px 6px;
 399   border-radius: 0 6px 6px 6px;
 400 }
 401 .dropdown-submenu:hover > .dropdown-menu {
 402   display: block;
 403 }
 404 .dropdown-submenu:hover > a:after {
 405   border-left-color: white;
 406 }
 407 .dropdown-submenu > a:after {
 408   display: block;
 409   content: " ";
 410   float: right;
 411   width: 0;
 412   height: 0;
 413   border-color: transparent;
 414   border-style: solid;
 415   border-width: 5px 0 5px 5px;
 416   border-left-color: #cccccc;
 417   margin-top: 5px;
 418   margin-right: -10px;
 419 }
 420 .dropdown-submenu.pull-left {
 421   float: none;
 422 }
 423 .dropdown-submenu.pull-left > .dropdown-menu {
 424   left: -100%;
 425   margin-left: 10px;
 426   -webkit-border-radius: 6px 0 6px 6px;
 427   -moz-border-radius: 6px 0 6px 6px;
 428   border-radius: 6px 0 6px 6px;
 429 }
 430
 431 .oe_snippet_list {
 432   width: auto;
 433   white-space: nowrap;
 434   margin-left: 20px;
 435 }
 436
 437 .oe_snippet_editor {
 438   position: fixed;
 439   z-index: 1000;
 440   bottom: 0;
 441   left: 0;
 442   right: 0;
 443   height: 214px;
 444   background: #a0a0a0;
 445   box-shadow: 0 1px 3px #646464 inset;
 446 }
 447 .oe_snippet_editor .oe_snippet {
 448   box-sizing: border-box;
 449   display: inline-block;
 450   width: 220px;
 451   height: 160px;
 452   border-radius: 3px;
 453   background: white;
 454   margin: 20px 20px 20px 0;
 455   cursor: pointer;
 456   border: 2px solid transparent;
 457   box-shadow: 0 1px 3px #646464;
 458   position: relative;
 459   top: 0;
 460   overflow: hidden;
 461   vertical-align: top;
 462   user-select: none;
 463   white-space: normal;
 464 }
 465 .oe_snippet_editor .oe_snippet:after {
 466   content: attr(name);
 467   position: absolute;
 468   bottom: 0px;
 469   left: 0px;
 470   right: 0px;
 471   background: rgba(255, 255, 255, 0.8);
 472   text-align: center;
 473   color: black;
 474   padding: 8px;
 475 }
 476 .oe_snippet_editor .oe_snippet.oe_selected, .oe_snippet_editor .oe_snippet.oe_active {
 477   border: 2px solid #9789ff;
 478   box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
 479 }
 480 .oe_snippet_editor .oe_snippet > * {
 481   pointer-events: none;
 482   margin-top: 16px;
 483   line-height: 1em;
 484   zoom: 0.6;
 485 }
 486 .oe_snippet_editor .oe_snippet > .container {
 487   margin-top: 15px;
 488   zoom: 0.17;
 489   line-height: 0.999em;
 490   line-height: 1em;
 491 }
 492 .oe_snippet_editor .oe_snippet > .row {
 493   margin-top: 0px;
 494   zoom: 0.23;
 495   line-height: 0.999em;
 496 }
 497 .oe_snippet_editor .oe_snippet > .span6 {
 498   margin-top: 18px;
 499   zoom: 0.34;
 500 }
 501 .oe_snippet_editor .oe_snippet > .span12 {
 502   margin-top: 16px;
 503   zoom: 0.23;
 504 }
 505 .oe_snippet_editor .oe_snippet > p {
 506   position: absolute;
 507   top: 0;
 508   right: 0;
 509   left: 0;
 510   bottom: 0;
 511   font-size: 20px;
 512   padding: 16px;
 513   zoom: 1;
 514   margin: 0px;
 515 }
 516 .oe_snippet_editor .oe_snippet.oe_new {
 517   background: gray;
 518   box-shadow: 0px 1px 3px #5a5a5a inset;
 519   border: 0px;
 520 }
 521 .oe_snippet_editor .oe_snippet.oe_new.oe_selected, .oe_snippet_editor .oe_snippet.oe_new.oe_active {
 522   box-shadow: 0px 2px 0px 0px #9789ff inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset;
 523 }
 524 .oe_snippet_editor .oe_snippet.oe_new > * {
 525   zoom: 1;
 526   margin: 0;
 527   line-height: 160px;
 528   text-align: center;
 529   color: white;
 530   font-size: 48px;
 531 }
 532 .oe_snippet_editor .oe_snippet.oe_new:after {
 533   position: absolute;
 534   left: 0px;
 535   right: 0px;
 536   top: 0px;
 537   bottom: 0px;
 538   background: transparent;
 539   color: white;
 540   text-shadow: 0px 1px 3px black;
 541   line-height: 160px;
 542   padding: 0px;
 543 }
 544
 545 .oe_snippet_drop {
 546   position: relative;
 547   border: 2px dashed #ae34ff;
 548   background: rgba(147, 52, 255, 0.1);
 549   min-height: 28px;
 550   margin: -16px auto;
 551   border-radius: 5px;
 552   max-width: 50%;
 553 }
 554 .oe_snippet_drop.oe_accepting {
 555   border: 2px dashed #34ffa6;
 556   background: rgba(52, 255, 190, 0.1);
 557 }
 558
 559 #website-top-edit li.oe_snippet_editorbar {
 560   padding: 1px 8px 2px;
 561   font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
 562   float: left;
 563   margin-top: 6px;
 564   border: 1px solid #a6a6a6;
 565   border-bottom-color: #979797;
 566   background: #eeeeee;
 567   border-radius: 3px;
 568 }
 569 #website-top-edit li.oe_snippet_editorbar > * {
 570   display: inline-block;
 571   height: 22px;
 572   padding: 4px 6px;
 573   outline: 0;
 574   border: 0;
 575 }
 576 #website-top-edit li.oe_snippet_editorbar a.button .icon {
 577   cursor: inherit;
 578   background-repeat: no-repeat;
 579   margin-top: 1px;
 580   width: 16px;
 581   height: 16px;
 582   display: inline-block;
 583 }
 584
 585 [data-snippet-id] {
 586   min-height: 10px;
 587   min-width: 10px;
 588 }