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 /* ---- 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: #414141, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646060), color-stop(100%, #262626));
  43   background: #414141, -webkit-linear-gradient(#646060, #262626);
  44   background: #414141, -moz-linear-gradient(#646060, #262626);
  45   background: #414141, -o-linear-gradient(#646060, #262626);
  46   background: #414141, linear-gradient(#646060, #262626);
  47   -webkit-box-sizing: border-box;
  48   -moz-box-sizing: border-box;
  49   box-sizing: border-box;
  50 }
  51 .oe_website_editorbar li {
  52   display: inline;
  53   color: #eeeeee;
  54 }
  55 .oe_website_editorbar li:hover {
  56   background: rgba(0, 0, 0, 0.2);
  57   text-shadow: black 0px 0px 3px;
  58   color: white;
  59 }
  60
  61 .oe_website_editorbar .oe_rte_toolbar div.dropdown {
  62   display: inline-block;
  63 }
  64 .oe_website_editorbar .oe_rte_toolbar div.dropdown li {
  65   display: list-item;
  66 }
  67 .oe_website_editorbar .oe_rte_toolbar button {
  68   font-family: FontAwesome;
  69   font-weight: normal;
  70   font-style: normal;
  71   text-decoration: inherit;
  72 }
  73 .oe_website_editorbar .oe_rte_toolbar button.oe_button_list {
  74   padding-right: 3px;
  75 }
  76 .oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after {
  77   content: "\F0D7";
  78   padding-left: 6px;
  79 }
  80
  81 .oe_editable:focus {
  82   outline: none !important;
  83 }
  84
  85 .css_editable_display {
  86   display: block !important;
  87 }
  88
  89 .css_editable_hidden {
  90   display: none !important;
  91 }
  92
  93 .cke_editable .css_editable_mode_hidden {
  94   display: none;
  95 }
  96
  97 .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 {
  98   background-image: url("/website/static/src/img/edit_here.png") !important;
  99 }
 100
 101 .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 {
 102   content: "Press The Top-Left Edit Button" !important;
 103 }
 104
 105 /* ---- EDITOR BAR ---- {{{ */
 106 table.editorbar-panel {
 107   cursor: pointer;
 108   width: 100%;
 109 }
 110 table.editorbar-panel td {
 111   border: 1px solid #aaaaaa;
 112 }
 113 table.editorbar-panel td.selected {
 114   background-color: #b1c9d9;
 115 }
 116
 117 /* ---- TRANSLATIONS ---- {{{ */
 118 .oe_translate_or {
 119   color: white;
 120   padding: 0 0 0 1em;
 121 }
 122
 123 .oe_translate_examples li {
 124   margin: 10px;
 125   padding: 4px;
 126 }
 127
 128 .oe_translatable_text {
 129   outline: 1px solid black;
 130 }
 131
 132 .oe_translatable_field {
 133   outline: 1px dashed black;
 134 }
 135
 136 .oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty {
 137   outline-color: red;
 138 }
 139
 140 .oe_translatable_text.oe_dirty:empty {
 141   padding: 0 10px;
 142 }
 143
 144 .oe_translatable_todo {
 145   background: #ffffb6;
 146 }
 147
 148 /* ---- MENU ---- {{{ */
 149 div.oe_menu_buttons {
 150   top: -8px;
 151   right: -8px;
 152 }
 153
 154 ul.oe_menu_editor .fa-home {
 155   display: none;
 156 }
 157 ul.oe_menu_editor > li:first-child > div > span > .fa-home {
 158   display: block;
 159 }
 160 ul.oe_menu_editor .oe_menu_placeholder {
 161   outline: 1px dashed #4183c4;
 162 }
 163 ul.oe_menu_editor ul {
 164   list-style: none;
 165 }
 166 ul.oe_menu_editor li div {
 167   cursor: move;
 168 }
 169 ul.oe_menu_editor .disclose {
 170   cursor: pointer;
 171   width: 10px;
 172   display: none;
 173 }
 174
 175 /* ---- RTE ---- {{{ */
 176 .oe_editable .btn, .btn.oe_editable {
 177   -webkit-user-select: auto;
 178   -moz-user-select: auto;
 179   user-select: auto;
 180   cursor: text !important;
 181 }
 182
 183 .modal-dialog.select-image {
 184   width: 80%;
 185 }
 186
 187 .modal .existing-attachments .pager {
 188   margin: 0;
 189 }
 190
 191 .modal .image-preview {
 192   margin-bottom: 0.5em;
 193 }
 194
 195 .modal-footer {
 196   text-align: left;
 197 }
 198
 199 .modal.nosave .wait {
 200   display: inline-block !important;
 201   visibility: visible !important;
 202 }
 203 .modal.nosave .modal-body .filepicker, .modal.nosave .modal-body .image-preview {
 204   display: none;
 205 }
 206 .modal.nosave .modal-body .wait {
 207   width: 100%;
 208 }
 209 .modal.nosave .modal-footer .save {
 210   display: none;
 211 }
 212
 213 .modal .font-icons-icons {
 214   font-size: 2em;
 215   max-height: 6em;
 216   overflow: auto;
 217 }
 218 .modal .font-icons-icons .font-icons-icon {
 219   display: inline-block;
 220   width: 2em;
 221   padding: 0.25em;
 222   text-align: center;
 223   cursor: pointer;
 224 }
 225 .modal .font-icons {
 226   position: relative;
 227   display: block;
 228 }
 229 .modal .font-icons:before {
 230   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
 231   opacity: 0.7;
 232   position: absolute;
 233   top: 2px;
 234   left: 3px;
 235   font-size: 2em;
 236 }
 237 .modal #icon-search {
 238   padding-left: 2.5em;
 239 }
 240 .modal #fa-preview {
 241   text-align: center;
 242 }
 243 .modal #fa-preview span {
 244   cursor: pointer;
 245   padding: 0 15px;
 246 }
 247 .modal #fa-preview .font-icons-selected {
 248   background-color: #dddddd;
 249 }
 250
 251 .existing-attachments .pager .disabled {
 252   display: none;
 253 }
 254 .existing-attachments .existing-attachment-cell {
 255   position: relative;
 256 }
 257 .existing-attachments .existing-attachment-cell .img {
 258   border: 1px solid #848490;
 259 }
 260 .existing-attachments .existing-attachment-cell .existing-attachment-remove {
 261   position: absolute;
 262   top: 0;
 263   left: 15px;
 264   cursor: pointer;
 265   background: white;
 266   padding: 2px;
 267   border: 1px solid #848490;
 268   border-top: none;
 269   border-left: none;
 270   -moz-border-radius-bottomright: 8px;
 271   -webkit-border-bottom-right-radius: 8px;
 272   border-bottom-right-radius: 8px;
 273 }
 274
 275 .cke_widget_wrapper {
 276   position: static !important;
 277 }
 278
 279 .cke_widget_inline {
 280   display: inline !important;
 281 }
 282
 283 .cke_widget_editable:empty:after {
 284   opacity: 0.3;
 285   white-space: pre-wrap;
 286 }
 287 .cke_widget_editable:not([placeholder]):empty::after {
 288   content: " ";
 289 }
 290 .cke_widget_editable[placeholder]:not(:focus):empty::after {
 291   content: attr(placeholder);
 292 }
 293
 294 .oe_carlos_danger {
 295   outline: 1px solid red !important;
 296   background-color: #ffd9dd !important;
 297 }
 298
 299 .hover-edition-button {
 300   position: absolute;
 301   top: 0;
 302   left: 0;
 303   z-index: 1000;
 304 }
 305
 306 .cke_editable .fa {
 307   cursor: pointer;
 308 }
 309
 310 /* ---- MOBILE PREVIEW ---- {{{ */
 311 .oe_mobile_preview.modal .modal-content {
 312   height: 660px;
 313   background-color: black;
 314   border: 2px solid #1c1f1f;
 315   -webkit-border-radius: 10px;
 316   -moz-border-radius: 10px;
 317   -ms-border-radius: 10px;
 318   -o-border-radius: 10px;
 319   border-radius: 10px;
 320   margin: auto;
 321   top: 0;
 322   left: 0;
 323   bottom: 0;
 324   right: 0;
 325   max-width: 330px;
 326 }
 327 .oe_mobile_preview.modal .modal-content .modal-header {
 328   background-color: black;
 329   border-bottom: 0;
 330   -moz-border-radius-topleft: 10px;
 331   -webkit-border-top-left-radius: 10px;
 332   border-top-left-radius: 10px;
 333   -moz-border-radius-topright: 10px;
 334   -webkit-border-top-right-radius: 10px;
 335   border-top-right-radius: 10px;
 336 }
 337 .oe_mobile_preview.modal .modal-content .modal-header .modal-title {
 338   color: #1c1f1f;
 339 }
 340 .oe_mobile_preview.modal .modal-content .modal-header .close {
 341   color: lightgrey;
 342   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 343   opacity: 1;
 344 }
 345 .oe_mobile_preview.modal .modal-content .modal-header .close:hover {
 346   color: #e00101;
 347   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 348   opacity: 1;
 349 }
 350 .oe_mobile_preview.modal .modal-content .modal-body {
 351   background-color: black;
 352   max-height: 600px;
 353   padding: 0;
 354   margin: 0;
 355 }
 356 .oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport {
 357   width: 320px;
 358   height: 568px;
 359   padding: 5px;
 360   border: none;
 361 }
 362 .oe_mobile_preview.modal .modal-content .modal-footer {
 363   background-color: black;
 364 }
 365
 366 /* ---- SEO TOOLS ---- {{{ */
 367 .oe_seo_configuration .modal-dialog {
 368   width: 80%;
 369 }
 370 .oe_seo_configuration .oe_remove {
 371   color: #e00101;
 372 }
 373 .oe_seo_configuration .oe_seo_suggestion {
 374   cursor: pointer;
 375 }
 376 .oe_seo_configuration .oe_seo_keyword {
 377   padding: 0.2em 0.4em 0.2em 0.5em;
 378   -webkit-border-radius: 0.4em;
 379   -moz-border-radius: 0.4em;
 380   -ms-border-radius: 0.4em;
 381   -o-border-radius: 0.4em;
 382   border-radius: 0.4em;
 383 }
 384 .oe_seo_configuration li.oe_seo_preview_g {
 385   line-height: 1.2;
 386   list-style: none;
 387   list-style-image: none;
 388   list-style-position: outside;
 389   list-style-type: none;
 390   font-size: small;
 391   font-family: arial, sans-serif;
 392 }
 393 .oe_seo_configuration li.oe_seo_preview_g h3 {
 394   font-size: medium;
 395 }
 396 .oe_seo_configuration li.oe_seo_preview_g .r {
 397   margin: 0;
 398   font-size: 16px;
 399   font-style: normal;
 400   font-weight: normal;
 401   overflow: hidden;
 402   text-overflow: ellipsis;
 403   -webkit-text-overflow: ellipsis;
 404   white-space: nowrap;
 405 }
 406 .oe_seo_configuration li.oe_seo_preview_g .r a {
 407   color: #1e0fbe;
 408   text-decoration: underline;
 409   text-transform: none;
 410 }
 411 .oe_seo_configuration li.oe_seo_preview_g .r a em {
 412   font-style: normal !important;
 413 }
 414 .oe_seo_configuration li.oe_seo_preview_g .s {
 415   color: #444444;
 416   max-width: 42em;
 417 }
 418 .oe_seo_configuration li.oe_seo_preview_g .kv, .oe_seo_configuration li.oe_seo_preview_g .slp {
 419   display: block;
 420   margin-bottom: 1px;
 421 }
 422 .oe_seo_configuration li.oe_seo_preview_g .f {
 423   color: #666666;
 424   margin-bottom: 1px;
 425 }
 426 .oe_seo_configuration li.oe_seo_preview_g .f cite {
 427   color: #006621;
 428   font-style: normal;
 429   font-size: 14px;
 430 }
 431 .oe_seo_configuration li.oe_seo_preview_g .st {
 432   line-height: 1.24;
 433 }
 434
 435 /* ---- ACE EDITOR ---- {{{ */
 436 .oe_ace_view_editor {
 437   position: fixed;
 438   right: 0;
 439   z-index: 1000;
 440   height: 100%;
 441 }
 442 .oe_ace_view_editor .oe_ace_view_editor_title {
 443   width: 100%;
 444   padding-top: 0;
 445   padding-left: 0;
 446   height: 30px;
 447   background: #2f3129;
 448 }
 449 .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
 450   width: 50%;
 451   height: 30px;
 452   font-size: 14px;
 453   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
 454   line-height: normal;
 455 }
 456 .oe_ace_view_editor .oe_ace_view_editor_title .btn {
 457   height: 30px;
 458   padding: 0 4px 0 4px;
 459   font-size: 14px;
 460   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
 461   line-height: normal;
 462 }
 463 .oe_ace_view_editor .ace_editor {
 464   position: absolute;
 465   top: 30px;
 466   right: 0;
 467   left: 0;
 468 }
 469 .oe_ace_view_editor .ace_editor .ace_gutter {
 470   cursor: ew-resize;
 471 }
 472 .oe_ace_view_editor.oe_ace_open {
 473   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97);
 474   opacity: 0.97;
 475 }
 476 .oe_ace_view_editor.oe_ace_closed {
 477   z-index: -1000;
 478   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 479   opacity: 0;
 480 }
 481
 482 /* ---- EDITOR TOUR ---- {{{ */
 483 div.tour-backdrop {
 484   z-index: 2009;
 485 }
 486
 487 .popover.tour {
 488   z-index: 2010;
 489 }
 490
 491 .popover.fixed {
 492   position: fixed;
 493 }