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