addons/website/static/src/css/editor.css

   1 @charset "utf-8";
   2 /* ---- CKEditor Minimal Reset ---- */
   3 .navbar.navbar-inverse .cke_chrome {
   4   border: none;
   5 }
   6
   7 .navbar.navbar-inverse .cke_inner {
   8   background: transparent;
   9 }
  10
  11 .navbar.navbar-inverse .cke_toolbar {
  12   position: relative;
  13   top: 1px;
  14 }
  15 .navbar.navbar-inverse .cke_combo_button {
  16   padding-top: 3px;
  17   padding-bottom: 3px;
  18 }
  19 .navbar.navbar-inverse .cke_button {
  20   padding-top: 7px;
  21   padding-bottom: 7px;
  22 }
  23
  24 .navbar.navbar-inverse .cke_top {
  25   background: transparent;
  26   border: none;
  27   box-shadow: none;
  28   -webkit-box-shadow: none;
  29   -moz-box-shadow: none;
  30 }
  31
  32 /* ---- OpenERP Style ---- */
  33 .oe_website_editorbar {
  34   position: fixed;
  35   top: 0;
  36   right: 0;
  37   display: block;
  38   width: 100%;
  39   padding: 2px;
  40   margin: 0;
  41   z-index: 20000;
  42   background-color: #414141;
  43   background: -webkit-linear-gradient(#646060, #262626);
  44   box-sizing: border-box;
  45 }
  46 .oe_website_editorbar li {
  47   display: inline;
  48   color: #eeeeee;
  49 }
  50 .oe_website_editorbar li:hover {
  51   background: rgba(0, 0, 0, 0.2);
  52   text-shadow: black 0px 0px 3px;
  53   color: white;
  54 }
  55
  56 .oe_website_editorbar .oe_rte_toolbar div.dropdown {
  57   display: inline-block;
  58 }
  59 .oe_website_editorbar .oe_rte_toolbar div.dropdown li {
  60   display: list-item;
  61 }
  62 .oe_website_editorbar .oe_rte_toolbar button {
  63   font-family: FontAwesome;
  64   font-weight: normal;
  65   font-style: normal;
  66   text-decoration: inherit;
  67 }
  68 .oe_website_editorbar .oe_rte_toolbar button.oe_button_list {
  69   padding-right: 3px;
  70 }
  71 .oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after {
  72   content: "\F0D7";
  73   padding-left: 6px;
  74 }
  75
  76 .oe_editable:focus {
  77   outline: none !important;
  78 }
  79
  80 .css_non_editable_mode_hidden {
  81   display: none;
  82 }
  83
  84 .oe_carousel_options {
  85   cursor: pointer;
  86   position: absolute;
  87   white-space: nowrap;
  88   z-index: 1;
  89   display: none;
  90 }
  91 .oe_carousel_options > * {
  92   display: inline-block !important;
  93   vertical-align: middle !important;
  94   position: relative !important;
  95   top: 2px;
  96 }
  97
  98 /* ---- EDITOR BAR ---- */
  99 table.editorbar-panel {
 100   cursor: pointer;
 101   width: 100%;
 102 }
 103 table.editorbar-panel td {
 104   border: 1px solid #aaaaaa;
 105 }
 106 table.editorbar-panel td.selected {
 107   background-color: #b1c9d9;
 108 }
 109
 110 .oe_translate_examples li {
 111   margin: 10px;
 112   padding: 4px;
 113 }
 114
 115 .oe_translatable_text {
 116   outline: 1px solid black;
 117 }
 118
 119 .oe_translatable_field {
 120   outline: 1px dashed black;
 121 }
 122
 123 .oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty {
 124   outline-color: red;
 125 }
 126
 127 .oe_translatable_text.oe_dirty:empty {
 128   padding: 0 10px;
 129 }
 130
 131 .oe_translatable_todo {
 132   background: #ffffb6;
 133 }
 134
 135 /* ---- RTE ---- */
 136 .oe_editable .btn {
 137   -webkit-user-select: auto;
 138   -moz-user-select: auto;
 139   -ms-user-select: auto;
 140   -o-user-select: auto;
 141   user-select: auto;
 142 }
 143
 144 .modal-dialog.select-image {
 145   width: 80%;
 146 }
 147
 148 .modal .existing-attachments .pager {
 149   margin: 0;
 150 }
 151
 152 .modal .image-preview {
 153   margin-bottom: 0.5em;
 154 }
 155
 156 .cke_widget_drag_handler_container {
 157   display: none !important;
 158 }
 159
 160 /* ---- SNIPPET EDITOR ---- */
 161 #oe_snippets {
 162   position: fixed;
 163   left: 0px;
 164   right: 0px;
 165   top: 50px;
 166   background: #282828;
 167   box-shadow: 0px 10px 10px -10px black inset;
 168   z-index: 1010;
 169   overflow: hidden;
 170   height: 110px;
 171 }
 172 #oe_snippets:hover {
 173   height: auto;
 174 }
 175 #oe_snippets .scroll {
 176   white-space: nowrap;
 177   overflow-y: auto;
 178 }
 179 #oe_snippets .nav {
 180   padding: 3px 15px;
 181   width: 162px;
 182   background: #444444;
 183   position: fixed;
 184   z-index: 1;
 185   height: 108px;
 186 }
 187 #oe_snippets .nav > li {
 188   display: block;
 189   float: none;
 190 }
 191 #oe_snippets .nav > li > a {
 192   padding: 2px 10px !important;
 193   width: 100%;
 194   display: block;
 195 }
 196 #oe_snippets .pill-content {
 197   display: inline-block;
 198   height: 110px;
 199   white-space: nowrap;
 200   padding-left: 166px;
 201 }
 202 #oe_snippets .pill-content > div {
 203   display: inline-block;
 204 }
 205 #oe_snippets .pill-content > div label {
 206   width: 44px;
 207   height: 100%;
 208   color: white;
 209   padding-left: 10px;
 210 }
 211 #oe_snippets .pill-content > div label div {
 212   width: 100px;
 213   text-align: center;
 214   -webkit-transform: translate(-39px, 44px) rotate(-90deg);
 215   -moz-transform: translate(-39px, 44px) rotate(-90deg);
 216   -o-transform: translate(-39px, 44px) rotate(-90deg);
 217   transform: translate(-39px, 44px) rotate(-90deg);
 218   -webkit-transform-origin: 50% 50%;
 219   -moz-transform-origin: 50% 50%;
 220   -ms-transform-origin: 50% 50%;
 221   -o-transform-origin: 50% 50%;
 222   transform-origin: 50% 50%;
 223 }
 224
 225 .oe_snippet {
 226   display: inline-block;
 227   vertical-align: top;
 228   width: 108px;
 229   height: 108px;
 230   border-radius: 3px;
 231   margin: 1px;
 232   margin-top: 0px;
 233   position: relative;
 234   overflow: hidden;
 235   -webkit-user-select: none;
 236   user-select: none;
 237   cursor: move;
 238   pointer-events: none;
 239 }
 240 .oe_snippet .oe_snippet_thumbnail {
 241   pointer-events: auto;
 242   text-align: center;
 243   height: 100%;
 244   background: transparent;
 245   color: white;
 246   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
 247   position: relative;
 248 }
 249 .oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
 250   line-height: 18px;
 251 }
 252 .oe_snippet > :not(.oe_snippet_thumbnail) {
 253   display: none !important;
 254 }
 255
 256 #oe_snippets .oe_snippet_thumbnail {
 257   background: #747474;
 258   background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
 259   box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
 260 }
 261
 262 /* ---- SNIPPETS DROP ZONES ---- */
 263 .oe_drop_zone.oe_insert {
 264   display: block;
 265   height: 48px;
 266   margin: 0px;
 267   margin-top: -4px;
 268   margin-bottom: -44px;
 269   -webkit-transition: margin 250ms linear;
 270   width: 100%;
 271   position: absolute;
 272   z-index: 1000;
 273 }
 274 .oe_drop_zone.oe_insert:not(.oe_vertical):before {
 275   content: "";
 276   display: block;
 277   border-top: dashed 2px rgba(209, 178, 255, 0.72);
 278   position: relative;
 279   top: 0px;
 280 }
 281 .oe_drop_zone.oe_insert.oe_hover:before {
 282   border-top: dashed 2px rgba(116, 255, 161, 0.72);
 283 }
 284 .oe_drop_zone.oe_insert.oe_vertical {
 285   width: 48px;
 286   float: left;
 287   position: relative;
 288   margin: 0px -24px !important;
 289 }
 290 .oe_drop_zone.oe_insert.oe_overlay {
 291   background: rgba(153, 0, 255, 0.17);
 292   border-radius: 3px;
 293 }
 294
 295 .oe_drop_zone, .oe_drop_zone_style {
 296   background: rgba(153, 0, 255, 0.17);
 297   border-radius: 3px;
 298 }
 299 .oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
 300   background: rgba(0, 255, 133, 0.22);
 301   z-index: 1001;
 302 }
 303
 304 .oe_drop_zone_style {
 305   color: white;
 306   height: 48px;
 307   margin-bottom: 32px;
 308 }
 309
 310 /* ---- SNIPPET MANIPULATOR ---- */
 311 .oe_overlay {
 312   display: none;
 313   position: absolute;
 314   background: transparent;
 315   border-radius: 3px;
 316   transition: opacity 100ms linear;
 317   box-sizing: border-box;
 318   pointer-events: none;
 319 }
 320 .oe_overlay.oe_active {
 321   display: block;
 322   border-style: dashed;
 323   border-width: 1px;
 324   box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
 325   border-color: rgba(153, 0, 255, 0.5);
 326 }
 327 .oe_overlay.oe_active .oe_handle {
 328   display: block !important;
 329   pointer-events: auto;
 330 }
 331 .oe_overlay.oe_active .oe_handle:before {
 332   position: relative;
 333   top: 50%;
 334   left: 50%;
 335   display: block;
 336   background: white;
 337   border: solid 1px #9900ff;
 338   border-radius: 8px;
 339   width: 16px;
 340   height: 16px;
 341   margin: -8px;
 342   padding-left: 1px;
 343   font-size: 14px;
 344   line-height: 14px;
 345   color: #9900ff;
 346   -webkit-transition: background 100ms linear;
 347 }
 348 .oe_overlay.oe_active .oe_handle:hover:before {
 349   background: #9900ff;
 350   color: white;
 351 }
 352 .oe_overlay.oe_active .oe_handle.e:before {
 353   content: "⇨";
 354 }
 355 .oe_overlay.oe_active .oe_handle.s:before {
 356   content: "⇩";
 357 }
 358 .oe_overlay.oe_active .oe_handle.w:before {
 359   content: "⇦";
 360 }
 361 .oe_overlay.oe_active .oe_handle.n:before {
 362   content: "⇧";
 363 }
 364 .oe_overlay .icon.btn {
 365   display: inline-block;
 366 }
 367 .oe_overlay .oe_overlay_options {
 368   position: absolute;
 369   width: 100%;
 370   text-align: center;
 371   top: -11px;
 372   z-index: 1002;
 373 }
 374 .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
 375   pointer-events: auto;
 376   cursor: pointer;
 377 }
 378 .oe_overlay .oe_overlay_options .dropdown {
 379   display: inline-block;
 380 }
 381 .oe_overlay .oe_overlay_options .dropdown-menu {
 382   text-align: left;
 383   min-width: 180px;
 384 }
 385 .oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
 386   display: block;
 387 }
 388
 389 .oe_handle {
 390   pointer-events: auto;
 391   position: absolute;
 392   top: 50%;
 393   left: 50%;
 394   display: block;
 395   box-sizing: border-box;
 396   width: 8px;
 397   height: 8px;
 398   margin: -4px;
 399 }
 400
 401 .oe_handle.n {
 402   left: 2px;
 403   width: 100%;
 404   top: 0px;
 405   cursor: s-resize;
 406 }
 407
 408 .oe_handle.e {
 409   left: auto;
 410   top: 2px;
 411   height: 100%;
 412   right: 0px;
 413   cursor: w-resize;
 414 }
 415
 416 .oe_handle.s {
 417   top: auto;
 418   left: 2px;
 419   width: 100%;
 420   bottom: 0px;
 421   cursor: n-resize;
 422 }
 423
 424 .oe_handle.w {
 425   top: 2px;
 426   height: 100%;
 427   left: 0px;
 428   cursor: e-resize;
 429 }
 430
 431 .s-resize-important, .s-resize-important * {
 432   cursor: s-resize !important;
 433 }
 434
 435 .n-resize-important, .n-resize-important * {
 436   cursor: n-resize !important;
 437 }
 438
 439 .e-resize-important, .e-resize-important * {
 440   cursor: e-resize !important;
 441 }
 442
 443 .w-resize-important, .w-resize-important * {
 444   cursor: w-resize !important;
 445 }
 446
 447 .move-important, .move-important * {
 448   cursor: move !important;
 449 }
 450
 451 /* ---- MOBILE PREVIEW ---- */
 452 .oe_mobile_preview.modal .modal-content {
 453   height: 660px;
 454   background-color: black;
 455   border: 2px solid;
 456   border-radius: 10px;
 457   border-color: #1c1f1f;
 458   margin: auto;
 459   top: 0;
 460   left: 0;
 461   bottom: 0;
 462   right: 0;
 463   max-width: 330px;
 464 }
 465 .oe_mobile_preview.modal .modal-content .modal-header {
 466   background-color: black;
 467   border-bottom: 0;
 468   border-top-left-radius: 10px;
 469   border-top-right-radius: 10px;
 470 }
 471 .oe_mobile_preview.modal .modal-content .modal-header .modal-title {
 472   color: #1c1f1f;
 473 }
 474 .oe_mobile_preview.modal .modal-content .modal-header .close {
 475   color: lightgrey;
 476   opacity: 1;
 477 }
 478 .oe_mobile_preview.modal .modal-content .modal-header .close:hover {
 479   color: #e00101;
 480   opacity: 1;
 481 }
 482 .oe_mobile_preview.modal .modal-content .modal-body {
 483   background-color: black;
 484   max-height: 600px;
 485   padding: 0;
 486   margin: 0;
 487 }
 488 .oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport {
 489   width: 320px;
 490   height: 568px;
 491   padding: 5px;
 492   border: none;
 493 }
 494 .oe_mobile_preview.modal .modal-content .modal-footer {
 495   background-color: black;
 496 }
 497
 498 /* ---- SEO TOOLS ---- */
 499 .oe_seo_configuration .modal-dialog {
 500   width: 80%;
 501 }
 502 .oe_seo_configuration .oe_remove {
 503   color: #e00101;
 504 }
 505 .oe_seo_configuration .oe_seo_suggestion {
 506   cursor: pointer;
 507 }
 508 .oe_seo_configuration .oe_seo_keyword {
 509   padding: 0.2em 0.4em 0.2em 0.5em;
 510   border-radius: 0.4em;
 511 }
 512 .oe_seo_configuration .keyword-in-title {
 513   background-color: #5cb85c;
 514   color: white;
 515 }
 516 .oe_seo_configuration .keyword-in-description {
 517   background-color: #428bca;
 518   color: white;
 519 }
 520 .oe_seo_configuration .keyword-in-body {
 521   background-color: #5bc0de;
 522   color: white;
 523 }
 524
 525 /* ---- ACE EDITOR ---- */
 526 .oe_ace_view_editor {
 527   transition: all 0.2s ease-in;
 528   -webkit-transition: all 0.2s ease-in;
 529   -ms-transition: all 0.2s ease-in;
 530   -o-transition: all 0.2s ease-in;
 531   -moz-transition: all 0.2s ease-in;
 532   opacity: 0.3;
 533   position: fixed;
 534   top: 51px;
 535   right: 0;
 536   z-index: 1000;
 537   height: 100%;
 538 }
 539 .oe_ace_view_editor .oe_ace_view_editor_title {
 540   width: 100%;
 541   padding-top: 4px;
 542   padding-left: 4px;
 543   height: 40px;
 544   background: #2f3129;
 545 }
 546 .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
 547   width: 50%;
 548   height: 32px;
 549   font-size: 14px;
 550   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
 551   line-height: normal;
 552 }
 553 .oe_ace_view_editor .oe_ace_view_editor_title .btn {
 554   height: 32px;
 555   padding: 0 4px 0 4px;
 556   font-size: 14px;
 557   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
 558   line-height: normal;
 559 }
 560 .oe_ace_view_editor .ace_editor {
 561   position: absolute;
 562   top: 40px;
 563   right: 0;
 564   bottom: 51px;
 565   left: 0;
 566   width: 720px;
 567 }
 568 .oe_ace_view_editor:hover {
 569   opacity: 1;
 570 }
 571 .oe_ace_view_editor.oe_ace_open {
 572   width: 720px;
 573 }
 574 .oe_ace_view_editor.oe_ace_closed {
 575   width: 0;
 576   opacity: 0;
 577 }