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

   1 /* ---- CKEditor Minimal Reset ---- {{{ */
   2 .navbar.navbar-inverse .cke_chrome {
   3   border: none;
   4 }
   5
   6 .navbar.navbar-inverse .cke_inner {
   7   background: transparent;
   8 }
   9
  10 .navbar.navbar-inverse .cke_toolbar {
  11   position: relative;
  12   top: 1px;
  13 }
  14 .navbar.navbar-inverse .cke_combo_button {
  15   padding-top: 3px;
  16   padding-bottom: 3px;
  17 }
  18 .navbar.navbar-inverse .cke_button {
  19   padding-top: 7px;
  20   padding-bottom: 7px;
  21 }
  22
  23 .navbar.navbar-inverse .cke_top {
  24   background: transparent;
  25   border: none;
  26   -webkit-box-shadow: none;
  27   -moz-box-shadow: none;
  28   box-shadow: none;
  29   -ms-filter: "alpha(opacity=50)";
  30 }
  31
  32 #cke_1_top {
  33   padding: 0;
  34 }
  35
  36 #cke_wrapwrap {
  37   -moz-box-shadow: none;
  38   -webkit-box-shadow: none;
  39   box-shadow: none;
  40 }
  41 #cke_wrapwrap .cke_button {
  42   padding-top: 5px;
  43   padding-bottom: 5px;
  44 }
  45 #cke_wrapwrap .cke_combo_button {
  46   padding-top: 1px;
  47   padding-bottom: 1px;
  48 }
  49
  50 /* ---- OpenERP Style ---- {{{ */
  51 .oe_website_editorbar {
  52   position: fixed;
  53   top: 0;
  54   right: 0;
  55   display: block;
  56   width: 100%;
  57   padding: 2px;
  58   margin: 0;
  59   z-index: 20000;
  60   background: #414141, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646060), color-stop(100%, #262626));
  61   background: #414141, -webkit-linear-gradient(#646060, #262626);
  62   background: #414141, -moz-linear-gradient(#646060, #262626);
  63   background: #414141, -o-linear-gradient(#646060, #262626);
  64   background: #414141, linear-gradient(#646060, #262626);
  65   -webkit-box-sizing: border-box;
  66   -moz-box-sizing: border-box;
  67   box-sizing: border-box;
  68 }
  69 .oe_website_editorbar li {
  70   display: inline;
  71   color: #eeeeee;
  72 }
  73 .oe_website_editorbar li:hover {
  74   background: rgba(0, 0, 0, 0.2);
  75   text-shadow: black 0px 0px 3px;
  76   color: white;
  77 }
  78
  79 .oe_website_editorbar .oe_rte_toolbar div.dropdown {
  80   display: inline-block;
  81 }
  82 .oe_website_editorbar .oe_rte_toolbar div.dropdown li {
  83   display: list-item;
  84 }
  85 .oe_website_editorbar .oe_rte_toolbar button {
  86   font-family: FontAwesome;
  87   font-weight: normal;
  88   font-style: normal;
  89   text-decoration: inherit;
  90 }
  91 .oe_website_editorbar .oe_rte_toolbar button.oe_button_list {
  92   padding-right: 3px;
  93 }
  94 .oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after {
  95   content: "\F0D7";
  96   padding-left: 6px;
  97 }
  98
  99 .oe_editable:focus {
 100   outline: none !important;
 101 }
 102
 103 .css_editable_display {
 104   display: block !important;
 105 }
 106
 107 .css_editable_hidden {
 108   display: none !important;
 109 }
 110
 111 .cke_editable .css_editable_mode_hidden {
 112   display: none;
 113 }
 114
 115 .cke_editable .css_editable_mode_display {
 116   display: block !important;
 117 }
 118
 119 .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 {
 120   background-image: url("/website/static/src/img/edit_here.png") !important;
 121 }
 122
 123 .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 {
 124   content: "Press The Top-Left Edit Button" !important;
 125 }
 126
 127 [data-oe-type=html].oe_no_empty:empty:before {
 128   content: "" !important;
 129 }
 130
 131 [data-oe-type=html].oe_no_empty:empty {
 132   background-image: none !important;
 133   height: 16px !important;
 134 }
 135
 136 #website-top-edit {
 137   width: 100%;
 138 }
 139 #website-top-edit > ul > li {
 140   margin: 0;
 141 }
 142
 143 #website-top-navbar {
 144   min-height: 34px;
 145   height: 34px;
 146 }
 147 #website-top-navbar form {
 148   margin: 0;
 149 }
 150 #website-top-navbar form button, #website-top-navbar form a {
 151   padding: 4px 8px 4px 8px;
 152   margin-top: 2px;
 153   font-size: 13px;
 154 }
 155
 156 /* ---- EDITOR BAR ---- {{{ */
 157 table.editorbar-panel {
 158   cursor: pointer;
 159   width: 100%;
 160 }
 161 table.editorbar-panel td {
 162   border: 1px solid #aaaaaa;
 163 }
 164 table.editorbar-panel td.selected {
 165   background-color: #b1c9d9;
 166 }
 167
 168 .link-style .dropdown > .btn {
 169   min-width: 160px;
 170 }
 171 .link-style .link-style {
 172   display: none;
 173 }
 174 .link-style li {
 175   text-align: center;
 176 }
 177 .link-style li label {
 178   width: 100px;
 179   margin: 0 5px;
 180 }
 181 .link-style .col-sm-2 > * {
 182   line-height: 2em;
 183 }
 184
 185 /* ---- TRANSLATIONS ---- {{{ */
 186 .oe_translate_or {
 187   color: white;
 188   padding: 0 0 0 1em;
 189 }
 190
 191 .oe_translate_examples li {
 192   margin: 10px;
 193   padding: 4px;
 194 }
 195
 196 .oe_translatable_text {
 197   outline: 1px solid black;
 198 }
 199
 200 .oe_translatable_field {
 201   outline: 1px dashed black;
 202 }
 203
 204 .oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty {
 205   outline-color: red;
 206 }
 207
 208 .oe_translatable_text.oe_dirty:empty {
 209   padding: 0 10px;
 210 }
 211
 212 .oe_translatable_todo {
 213   background: #ffffb6;
 214 }
 215
 216 /* ---- MENU ---- {{{ */
 217 div.oe_menu_buttons {
 218   top: -8px;
 219   right: -8px;
 220 }
 221
 222 ul.oe_menu_editor .fa-home {
 223   display: none;
 224 }
 225 ul.oe_menu_editor > li:first-child > div > span > .fa-home {
 226   display: block;
 227 }
 228 ul.oe_menu_editor .oe_menu_placeholder {
 229   outline: 1px dashed #4183c4;
 230 }
 231 ul.oe_menu_editor ul {
 232   list-style: none;
 233 }
 234 ul.oe_menu_editor li div {
 235   cursor: move;
 236 }
 237 ul.oe_menu_editor .disclose {
 238   cursor: pointer;
 239   width: 10px;
 240   display: none;
 241 }
 242
 243 /* ---- RTE ---- {{{ */
 244 .oe_editable .btn, .btn.oe_editable {
 245   -webkit-user-select: auto;
 246   -moz-user-select: auto;
 247   user-select: auto;
 248   cursor: text !important;
 249 }
 250
 251 .modal-dialog.select-media {
 252   width: 80%;
 253 }
 254
 255 .modal .existing-attachments .pager {
 256   margin: 0;
 257 }
 258
 259 .modal .image-preview {
 260   margin-bottom: 0.5em;
 261 }
 262
 263 .modal-footer {
 264   text-align: left;
 265 }
 266
 267 .modal.nosave .wait {
 268   display: inline-block !important;
 269   visibility: visible !important;
 270 }
 271 .modal.nosave .modal-body .filepicker, .modal.nosave .modal-body .image-preview {
 272   display: none;
 273 }
 274 .modal.nosave .modal-body .wait {
 275   width: 100%;
 276 }
 277 .modal.nosave .modal-footer .save {
 278   display: none;
 279 }
 280
 281 .modal .font-icons-icons {
 282   font-size: 2em;
 283   max-height: 9em;
 284   overflow: auto;
 285 }
 286 .modal .font-icons-icons .font-icons-icon {
 287   display: inline-block;
 288   width: 2em;
 289   padding: 0.25em;
 290   text-align: center;
 291   cursor: pointer;
 292 }
 293 .modal .font-icons {
 294   position: relative;
 295   display: block;
 296 }
 297 .modal .font-icons:before {
 298   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
 299   opacity: 0.7;
 300   position: absolute;
 301   top: 2px;
 302   left: 3px;
 303   font-size: 2em;
 304 }
 305 .modal #icon-search {
 306   padding-left: 2.5em;
 307 }
 308 .modal #fa-preview {
 309   text-align: center;
 310 }
 311 .modal #fa-preview span {
 312   cursor: pointer;
 313   padding: 0 15px;
 314 }
 315 .modal #fa-preview .font-icons-selected {
 316   background-color: #dddddd;
 317 }
 318
 319 .existing-attachments .pager .disabled {
 320   display: none;
 321 }
 322 .existing-attachments .existing-attachment-cell {
 323   position: relative;
 324 }
 325 .existing-attachments .existing-attachment-cell .img {
 326   border: 1px solid #848490;
 327 }
 328 .existing-attachments .existing-attachment-cell .existing-attachment-remove {
 329   position: absolute;
 330   top: 0;
 331   left: 15px;
 332   cursor: pointer;
 333   background: white;
 334   padding: 2px;
 335   border: 1px solid #848490;
 336   border-top: none;
 337   border-left: none;
 338   -moz-border-radius-bottomright: 8px;
 339   -webkit-border-bottom-right-radius: 8px;
 340   border-bottom-right-radius: 8px;
 341 }
 342 .existing-attachments .existing-attachment-cell.media_selected > i, .existing-attachments .existing-attachment-cell.media_selected > img {
 343   border-width: 5px;
 344   border-color: #00f8f8;
 345 }
 346
 347 .cke_widget_wrapper {
 348   position: static !important;
 349 }
 350
 351 .cke_widget_inline {
 352   display: inline !important;
 353 }
 354
 355 .cke_widget_editable:empty:after {
 356   opacity: 0.3;
 357   white-space: pre-wrap;
 358 }
 359 .cke_widget_editable:not([placeholder]):empty::after {
 360   content: " ";
 361 }
 362 .cke_widget_editable[placeholder]:not(:focus):empty::after {
 363   content: attr(placeholder);
 364 }
 365
 366 .oe_carlos_danger {
 367   outline: 1px solid red !important;
 368   background-color: #ffd9dd !important;
 369 }
 370
 371 .hover-edition {
 372   display: inline-block;
 373   position: absolute;
 374   top: 0;
 375   left: 0;
 376   z-index: 1001;
 377 }
 378
 379 .preview-container {
 380   text-align: center;
 381   line-height: 100px;
 382   height: 100px;
 383 }
 384 .preview-container > * {
 385   max-height: 100px;
 386   line-height: 100px;
 387   margin: 0 auto;
 388   display: inline-block;
 389 }
 390
 391 .cke_editable .fa {
 392   cursor: pointer;
 393 }
 394
 395 .img-responsive {
 396   text-align: center;
 397 }
 398
 399 /* ---- MOBILE PREVIEW ---- {{{ */
 400 .oe_mobile_preview.modal .modal-content {
 401   height: 660px;
 402   background-color: black;
 403   border: 2px solid #1c1f1f;
 404   -webkit-border-radius: 10px;
 405   -moz-border-radius: 10px;
 406   -ms-border-radius: 10px;
 407   -o-border-radius: 10px;
 408   border-radius: 10px;
 409   margin: auto;
 410   top: 0;
 411   left: 0;
 412   bottom: 0;
 413   right: 0;
 414   max-width: 330px;
 415 }
 416 .oe_mobile_preview.modal .modal-content .modal-header {
 417   background-color: black;
 418   border-bottom: 0;
 419   -moz-border-radius-topleft: 10px;
 420   -webkit-border-top-left-radius: 10px;
 421   border-top-left-radius: 10px;
 422   -moz-border-radius-topright: 10px;
 423   -webkit-border-top-right-radius: 10px;
 424   border-top-right-radius: 10px;
 425 }
 426 .oe_mobile_preview.modal .modal-content .modal-header .modal-title {
 427   color: #1c1f1f;
 428 }
 429 .oe_mobile_preview.modal .modal-content .modal-header .close {
 430   color: lightgrey;
 431   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 432   opacity: 1;
 433 }
 434 .oe_mobile_preview.modal .modal-content .modal-header .close:hover {
 435   color: #e00101;
 436   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 437   opacity: 1;
 438 }
 439 .oe_mobile_preview.modal .modal-content .modal-body {
 440   background-color: black;
 441   max-height: 600px;
 442   padding: 0;
 443   margin: 0;
 444 }
 445 .oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport {
 446   width: 320px;
 447   height: 568px;
 448   padding: 5px;
 449   border: none;
 450 }
 451 .oe_mobile_preview.modal .modal-content .modal-footer {
 452   background-color: black;
 453 }
 454
 455 /* ---- SEO TOOLS ---- {{{ */
 456 .oe_seo_configuration .modal-dialog {
 457   width: 80%;
 458 }
 459 .oe_seo_configuration .oe_remove {
 460   color: #e00101;
 461 }
 462 .oe_seo_configuration .oe_seo_suggestion {
 463   cursor: pointer;
 464 }
 465 .oe_seo_configuration .oe_seo_keyword {
 466   padding: 0.2em 0.4em 0.2em 0.5em;
 467   -webkit-border-radius: 0.4em;
 468   -moz-border-radius: 0.4em;
 469   -ms-border-radius: 0.4em;
 470   -o-border-radius: 0.4em;
 471   border-radius: 0.4em;
 472 }
 473 .oe_seo_configuration li.oe_seo_preview_g {
 474   line-height: 1.2;
 475   list-style: none;
 476   list-style-image: none;
 477   list-style-position: outside;
 478   list-style-type: none;
 479   font-size: small;
 480   font-family: arial, sans-serif;
 481 }
 482 .oe_seo_configuration li.oe_seo_preview_g h3 {
 483   font-size: medium;
 484 }
 485 .oe_seo_configuration li.oe_seo_preview_g .r {
 486   margin: 0;
 487   font-size: 16px;
 488   font-style: normal;
 489   font-weight: normal;
 490   overflow: hidden;
 491   text-overflow: ellipsis;
 492   -webkit-text-overflow: ellipsis;
 493   white-space: nowrap;
 494 }
 495 .oe_seo_configuration li.oe_seo_preview_g .r a {
 496   color: #1e0fbe;
 497   text-decoration: underline;
 498   text-transform: none;
 499 }
 500 .oe_seo_configuration li.oe_seo_preview_g .r a em {
 501   font-style: normal !important;
 502 }
 503 .oe_seo_configuration li.oe_seo_preview_g .s {
 504   color: #444444;
 505   max-width: 42em;
 506 }
 507 .oe_seo_configuration li.oe_seo_preview_g .kv, .oe_seo_configuration li.oe_seo_preview_g .slp {
 508   display: block;
 509   margin-bottom: 1px;
 510 }
 511 .oe_seo_configuration li.oe_seo_preview_g .f {
 512   color: #666666;
 513   margin-bottom: 1px;
 514 }
 515 .oe_seo_configuration li.oe_seo_preview_g .f cite {
 516   color: #006621;
 517   font-style: normal;
 518   font-size: 14px;
 519 }
 520 .oe_seo_configuration li.oe_seo_preview_g .st {
 521   line-height: 1.24;
 522 }
 523
 524 /* ---- ACE EDITOR ---- {{{ */
 525 .oe_ace_view_editor {
 526   position: fixed;
 527   right: 0;
 528   z-index: 1001;
 529   height: 100%;
 530   background: #2f3129;
 531   color: white;
 532 }
 533 .oe_ace_view_editor .oe_ace_view_editor_title {
 534   width: 100%;
 535   padding-top: 0;
 536   padding-left: 0;
 537   height: 30px;
 538 }
 539 .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
 540   width: 50%;
 541   height: 30px;
 542   font-size: 14px;
 543   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
 544   line-height: normal;
 545 }
 546 .oe_ace_view_editor .oe_ace_view_editor_title .btn {
 547   height: 30px;
 548   padding: 0 4px 0 4px;
 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 .ace_editor {
 554   position: absolute;
 555   top: 50px;
 556   right: 0;
 557   left: 0;
 558 }
 559 .oe_ace_view_editor .ace_editor .ace_gutter {
 560   cursor: ew-resize;
 561 }
 562 .oe_ace_view_editor #ace-view-id {
 563   padding: 0 1em;
 564 }
 565 .oe_ace_view_editor.oe_ace_open {
 566   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97);
 567   opacity: 0.97;
 568 }
 569 .oe_ace_view_editor.oe_ace_closed {
 570   z-index: -1000;
 571   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 572   opacity: 0;
 573 }
 574
 575 .oe_include_bundles {
 576   font-weight: normal;
 577   padding: 0 8px;
 578 }
 579
 580 /* ---- CUSTOMIZE THEME ---- {{{ */
 581 #theme_error {
 582   background: #ffffcc;
 583 }
 584
 585 #theme_customize_modal {
 586   overflow: visible;
 587   z-index: 1020;
 588   background: transparent;
 589   display: block;
 590 }
 591 #theme_customize_modal .modal-dialog {
 592   top: 75px;
 593   width: auto;
 594   margin: 0;
 595   position: absolute;
 596   right: 10px;
 597   font-family: "Lato-Regular";
 598   font-weight: normal;
 599   text-transform: capitalize;
 600   letter-spacing: normal;
 601 }
 602 #theme_customize_modal .modal-h5 {
 603   color: white;
 604   font-family: "Lato-Regular";
 605   font-weight: normal;
 606   text-transform: uppercase;
 607   letter-spacing: normal;
 608   font-size: 14px;
 609   color: white;
 610   padding: 4px 0 4px 4px;
 611   background-color: #bdc3c7;
 612 }
 613 #theme_customize_modal table {
 614   width: 100%;
 615   margin-bottom: 8px;
 616 }
 617 #theme_customize_modal label {
 618   display: block;
 619   text-align: center;
 620 }
 621 #theme_customize_modal label > div, #theme_customize_modal label > img {
 622   border: 1px solid white;
 623   line-height: 30px;
 624   font-size: 0.9em;
 625   margin: 2px 4px;
 626 }
 627 #theme_customize_modal label.checked > div, #theme_customize_modal label.checked > img {
 628   box-shadow: 2px 2px 3px #888888;
 629   border: 1px solid #666666;
 630 }
 631 #theme_customize_modal label img {
 632   width: 60px;
 633   height: 35px;
 634   margin: 2px;
 635   border: 1px solid rgba(136, 136, 136, 0.5);
 636 }
 637 #theme_customize_modal label input {
 638   display: none;
 639 }
 640 #theme_customize_modal .loading_backdrop {
 641   display: none;
 642 }
 643 #theme_customize_modal.loading .loading_backdrop {
 644   display: block;
 645   width: 100%;
 646   height: 100%;
 647   background: black;
 648   opacity: 0.3;
 649   position: absolute;
 650   z-index: 1;
 651 }
 652
 653 /* ---- force the browse to re-compute the stylesheets ---- */
 654 body.theme_customize_css_loading {
 655   magin-top: 1px;
 656 }
 657 body.theme_customize_css_loading #wrapwrap {
 658   magin-top: -1px;
 659 }