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