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

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