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

   1 @import "common"
   2
   3 /* ---- CKEditor Minimal Reset ---- {{{ */
   4
   5 .navbar.navbar-inverse .cke_chrome
   6     border: none
   7
   8 .navbar.navbar-inverse .cke_inner
   9     background: transparent
  10
  11 .navbar.navbar-inverse
  12     .cke_toolbar
  13         position: relative
  14         top: 1px
  15     .cke_combo_button
  16         padding-top: 3px
  17         padding-bottom: 3px
  18     .cke_button
  19         padding-top: 7px
  20         padding-bottom: 7px
  21
  22 .navbar.navbar-inverse .cke_top
  23     background: transparent
  24     border: none
  25     +box-shadow(none)
  26     -ms-filter: "alpha(opacity=50)"
  27
  28 // }}}
  29
  30 /* ---- OpenERP Style ---- {{{ */
  31
  32 .oe_website_editorbar
  33     position: fixed
  34     top: 0
  35     right: 0
  36     display: block
  37     width: 100%
  38     padding: 2px
  39     margin: 0
  40     z-index: 20000
  41     @include background(#414141, linear-gradient(#646060, #262626))
  42     +box-sizing(border-box)
  43     li
  44         display: inline
  45         color: #eee
  46         &:hover
  47             background: rgba(0,0,0,0.2)
  48             +text-shadow(black 0px 0px 3px)
  49             color: white
  50
  51 .oe_website_editorbar .oe_rte_toolbar
  52     div.dropdown
  53         display: inline-block
  54         li
  55             display: list-item
  56
  57     button
  58         font-family: FontAwesome
  59         font-weight: normal
  60         font-style: normal
  61         text-decoration: inherit
  62         &.oe_button_list
  63             padding-right: 3px
  64             &:after
  65                 content: "\F0D7"
  66                 padding-left: 6px
  67
  68 .oe_editable:focus
  69     outline: none !important
  70
  71 .css_editable_display
  72     display: block !important
  73
  74 .css_editable_hidden
  75     display: none !important
  76
  77 .cke_editable .css_editable_mode_hidden
  78     display: none
  79
  80 .cke_editable .css_editable_mode_display
  81     display: block !important
  82
  83 .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
  84     background-image: url('/website/static/src/img/edit_here.png') !important
  85
  86 .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
  87     content: 'Press The Top-Left Edit Button' !important
  88
  89 [data-oe-type=html].oe_no_empty:empty:before
  90     content: '' !important
  91
  92 [data-oe-type=html].oe_no_empty:empty
  93     background-image: none !important
  94     height: 16px !important
  95
  96 // }}}
  97
  98 /* ---- EDITOR BAR ---- {{{ */
  99
 100 table.editorbar-panel
 101     cursor: pointer
 102     width: 100%
 103     td
 104         border: 1px solid #aaa
 105     td.selected
 106         background-color: #b1c9d9
 107
 108 // }}}
 109
 110 /* ---- TRANSLATIONS ---- {{{ */
 111
 112 .oe_translate_or
 113     color: white
 114     padding: 0 0 0 1em
 115 .oe_translate_examples li
 116     margin: 10px
 117     padding: 4px
 118 .oe_translatable_text
 119     outline: 1px solid black
 120 .oe_translatable_field
 121     outline: 1px dashed black
 122 .oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty
 123     outline-color: red
 124 .oe_translatable_text.oe_dirty:empty
 125     padding: 0 10px
 126 .oe_translatable_todo
 127     background: rgb(255, 255, 182)
 128
 129 // }}}
 130
 131 /* ---- MENU ---- {{{ */
 132
 133 div.oe_menu_buttons
 134     top: -8px
 135     right: -8px
 136
 137 ul.oe_menu_editor
 138     .fa-home
 139         display: none
 140     > li:first-child > div > span > .fa-home
 141         display: block
 142     .oe_menu_placeholder
 143         outline: 1px dashed #4183C4
 144     ul
 145         list-style: none
 146     li div
 147         cursor: move
 148     .disclose
 149         cursor: pointer
 150         width: 10px
 151         display: none
 152
 153 // }}}
 154
 155 /* ---- RTE ---- {{{ */
 156
 157 // bootstrap makes .btn elements unselectable -> RTE double-click can't know
 158 // about them either
 159 .oe_editable .btn, .btn.oe_editable
 160     +user-select(auto)
 161     cursor: text !important
 162
 163 .modal-dialog.select-media
 164     width: 80%
 165
 166 .modal .existing-attachments
 167     .pager
 168         margin: 0
 169
 170 .modal .image-preview
 171     margin-bottom: 0.5em
 172
 173 .modal-footer
 174     text-align: left
 175
 176 .modal.nosave
 177     .wait
 178         display: inline-block !important
 179         visibility: visible !important
 180     .modal-body
 181         .filepicker, .image-preview
 182             display: none
 183         .wait
 184             width: 100%
 185     .modal-footer .save
 186         display: none
 187
 188 // fontawesome modal
 189 .modal
 190     .font-icons-icons
 191         font-size: 2em
 192         max-height: 9em
 193         overflow: auto
 194
 195         .font-icons-icon
 196             display: inline-block
 197             width: 2em
 198             padding: 0.25em
 199             text-align: center
 200             cursor: pointer
 201
 202     .font-icons
 203         position: relative
 204         display: block
 205
 206         &:before
 207             +opacity(0.7)
 208             position: absolute
 209             top: 2px
 210             left: 3px
 211             font-size: 2em
 212     #icon-search
 213         padding-left: 2.5em
 214
 215     #fa-preview
 216         text-align: center
 217
 218         span
 219             cursor: pointer
 220             padding: 0 15px
 221         .font-icons-selected
 222             background-color: #ddd
 223
 224 $attachment-border-color: #848490
 225 .existing-attachments
 226     .pager .disabled
 227         display: none
 228
 229     .existing-attachment-cell
 230         position: relative
 231         .img
 232             border: 1px solid $attachment-border-color
 233         .existing-attachment-remove
 234             position: absolute
 235             top: 0
 236             left: 15px // padding-left on col-*
 237
 238             cursor: pointer
 239             background: white
 240             padding: 2px
 241             border: 1px solid $attachment-border-color
 242             border-top: none
 243             border-left: none
 244             +border-bottom-right-radius(8px)
 245         &.media_selected
 246             > i, > img
 247                 border-width: 5px
 248                 border-color: rgb(0, 248, 248)
 249
 250 // wrapper positioned relatively for drag&drop widget which is disabled below.
 251 // Breaks completely horribly crazy products listing page, so take it out.
 252 .cke_widget_wrapper
 253     position: static !important
 254
 255 .cke_widget_inline
 256     display: inline !important
 257
 258 // prevent inline widgets from entirely disappearing when their (textual)
 259 // content is removed
 260 .cke_widget_editable
 261     // basic config
 262     &:empty:after
 263         opacity: 0.3
 264         white-space: pre-wrap
 265     // no @placeholder -> just add some padding
 266     &:not([placeholder]):empty::after
 267         content: " "
 268     // with placeholder and when not (yet) focused -> display placeholder
 269     &[placeholder]:not(:focus):empty::after
 270         content: attr(placeholder)
 271
 272 .oe_carlos_danger
 273     outline: 1px solid red !important
 274     background-color: #ffd9dd !important
 275
 276 .hover-edition
 277     display: inline-block
 278     position: absolute
 279     top: 0
 280     left: 0
 281     // This z-index is due to .navbar of bootstrap & jQuery-transfo
 282     z-index: 1001
 283 .preview-container
 284     text-align: center
 285     line-height: 100px
 286     height: 100px
 287     > *
 288         max-height: 100px
 289         line-height: 100px
 290         margin: 0 auto
 291         display: inline-block
 292
 293 // fontawesome
 294 .cke_editable .fa
 295     cursor: pointer
 296
 297 .img-responsive
 298     text-align: center
 299
 300 // }}}
 301
 302 /* ---- MOBILE PREVIEW ---- {{{ */
 303
 304 $mobile_preview_background: #000000
 305 $mobile_preview_border: #1C1F1F
 306 $icon_close: #E00101
 307 .oe_mobile_preview
 308     &.modal .modal-content
 309         height: 660px
 310         background-color: $mobile_preview_background
 311         border: 2px solid $mobile_preview_border
 312         +border-radius(10px)
 313         margin: auto
 314         top: 0
 315         left: 0
 316         bottom: 0
 317         right: 0
 318         max-width: 330px
 319         .modal-header
 320             background-color: $mobile_preview_background
 321             border-bottom: 0
 322             +border-top-left-radius(10px)
 323             +border-top-right-radius(10px)
 324             .modal-title
 325                 color: $mobile_preview_border
 326             .close
 327                 color: lightgrey
 328                 +opacity(1)
 329             .close:hover
 330                 color: $icon_close
 331                 +opacity(1)
 332         .modal-body
 333             background-color: $mobile_preview_background
 334             max-height: 600px
 335             padding: 0
 336             margin: 0
 337             .oe_mobile_viewport
 338                 width: 320px
 339                 height: 568px
 340                 padding: 5px
 341                 border: none
 342         .modal-footer
 343             background-color: $mobile_preview_background
 344
 345 // }}}
 346
 347 /* ---- SEO TOOLS ---- {{{ */
 348
 349 $remove_color: $icon_close
 350 $in_title_color: #5cb85c
 351 $in_description_color: #428bca
 352 $in_body_color: #5bc0de
 353 $highlighted_text_color: #ffffff
 354 .oe_seo_configuration
 355     .modal-dialog
 356         width: 80%
 357     .oe_remove
 358         color: $remove_color
 359     .oe_seo_suggestion
 360         cursor: pointer
 361     .oe_seo_keyword
 362         padding: .2em .4em .2em .5em
 363         +border-radius(.4em)
 364     li.oe_seo_preview_g
 365         line-height: 1.2
 366         list-style: none
 367         list-style-image: none
 368         list-style-position: outside
 369         list-style-type: none
 370         font-size: small
 371         font-family: arial,sans-serif
 372         h3
 373             font-size: medium
 374         .r
 375             margin: 0
 376             font-size: 16px
 377             font-style: normal
 378             font-weight: normal
 379             overflow: hidden
 380             text-overflow: ellipsis
 381             -webkit-text-overflow: ellipsis
 382             white-space: nowrap
 383             a
 384                 color: rgb(30, 15, 190)
 385                 text-decoration: underline
 386                 text-transform: none
 387                 em
 388                     font-style: normal !important
 389         .s
 390             color: #444
 391             max-width: 42em
 392         .kv,.slp
 393             display: block
 394             margin-bottom: 1px
 395         .f
 396             color: #666
 397             margin-bottom: 1px
 398             cite
 399                 color: #006621
 400                 font-style: normal
 401                 font-size: 14px
 402         .st
 403             line-height: 1.24
 404
 405
 406 // }}}
 407
 408 /* ---- ACE EDITOR ---- {{{ */
 409
 410 $editorbar_height: 30px
 411 // TODO Fix => might break with themes
 412
 413 .oe_ace_view_editor
 414     position: fixed
 415     // top property is set programmatically
 416     right: 0
 417     z-index: 1000
 418     height: 100%
 419     .oe_ace_view_editor_title
 420         width: 100%
 421         padding-top: 0
 422         padding-left: 0
 423         height: $editorbar_height
 424         background: #2F3129
 425         .oe_view_list
 426             width: 50%
 427             height: $editorbar_height
 428             @include editor-font
 429         .btn
 430             height: $editorbar_height
 431             padding: 0 4px 0 4px
 432             @include editor-font
 433     .ace_editor
 434         position: absolute
 435         top: $editorbar_height
 436         right: 0
 437         // bottom property is set programmatically
 438         left: 0
 439         .ace_gutter
 440             cursor: ew-resize
 441     &.oe_ace_open
 442         +opacity(0.97)
 443     &.oe_ace_closed
 444         z-index: -1000
 445         +opacity(0)
 446
 447 // }}}
 448
 449 /* ---- EDITOR TOUR ---- {{{ */
 450
 451 div.tour-backdrop
 452     z-index: 2009
 453 .popover.tour
 454     z-index: 2010
 455 .popover.fixed
 456     position: fixed
 457
 458 // }}}
 459
 460 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: