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

   1 @charset "utf-8"
   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     -webkit-box-shadow: none
  27     -moz-box-shadow: none
  28
  29 /* ---- OpenERP Style ---- */
  30
  31 .oe_website_editorbar
  32     position: fixed
  33     top: 0
  34     right: 0
  35     display: block
  36     width: 100%
  37     padding: 2px
  38     margin: 0
  39     z-index: 20000
  40     background-color: #414141
  41     background: -webkit-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_non_editable_mode_hidden
  72     display: none
  73
  74 .oe_carousel_options
  75     cursor: pointer
  76     position: absolute
  77     white-space: nowrap
  78     z-index: 1
  79     display: none
  80     > *
  81         display: inline-block !important
  82         vertical-align: middle !important
  83         position: relative !important
  84         top: +2px
  85
  86 /* ---- EDITOR BAR ---- */
  87
  88 table.editorbar-panel
  89     cursor: pointer
  90     width: 100%
  91     td
  92         border: 1px solid #aaa
  93     td.selected
  94         background-color: #b1c9d9
  95
  96 // ---- TRANSLATIONS ---- {{{
  97 .oe_translate_examples li
  98     margin: 10px
  99     padding: 4px
 100 .oe_translatable_text
 101     outline: 1px solid black
 102 .oe_translatable_field
 103     outline: 1px dashed black
 104 .oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty
 105     outline-color: red
 106 .oe_translatable_text.oe_dirty:empty
 107     padding: 0 10px
 108 .oe_translatable_todo
 109     background: rgb(255, 255, 182)
 110 // }}}
 111
 112 /* ---- RTE ---- */
 113
 114 // bootstrap makes .btn elements unselectable -> RTE double-click can't know
 115 // about them either
 116 .oe_editable .btn
 117     -webkit-user-select: auto
 118     -moz-user-select: auto
 119     -ms-user-select: auto
 120     -o-user-select: auto
 121     user-select: auto
 122
 123 .modal-dialog.select-image
 124     width: 80%
 125
 126 .modal .existing-attachments
 127     .pager
 128         margin: 0
 129
 130 .modal .image-preview
 131     margin-bottom: 0.5em
 132
 133 // "remove" drag & drop of CKE widgets
 134 .cke_widget_drag_handler_container
 135     display: none !important
 136
 137 /* ---- SNIPPET EDITOR ---- */
 138
 139 #oe_snippets
 140     position: fixed
 141     left: 0px
 142     right: 0px
 143     top: 50px
 144     background: rgb(40,40,40)
 145     box-shadow: 0px 10px 10px -10px black inset
 146     z-index: 1010
 147     overflow: hidden
 148     height: 110px
 149     &:hover
 150         height: auto
 151     .scroll
 152         white-space: nowrap
 153         overflow-y: auto
 154     .nav
 155         padding: 3px 15px
 156         width: 162px
 157         background: #444444
 158         > li
 159             display: block
 160             float: none
 161             > a
 162                 padding: 2px 10px !important
 163                 width: 100%
 164                 display: block
 165         position: fixed
 166         z-index: 1
 167         height: 108px
 168     .pill-content
 169         display: inline-block
 170         height: 110px
 171         white-space: nowrap
 172         padding-left: 166px
 173         > div
 174             display: inline-block
 175             label
 176                 width: 44px
 177                 height: 100%
 178                 color: #fff
 179                 padding-left: 10px
 180                 div
 181                     width: 100px
 182                     text-align: center
 183                     -webkit-transform: translate(-39px, 44px) rotate(-90deg)
 184                     -moz-transform: translate(-39px, 44px) rotate(-90deg)
 185                     -o-transform: translate(-39px, 44px) rotate(-90deg)
 186                     transform: translate(-39px, 44px) rotate(-90deg)
 187                     -webkit-transform-origin: 50% 50%
 188                     -moz-transform-origin: 50% 50%
 189                     -ms-transform-origin: 50% 50%
 190                     -o-transform-origin: 50% 50%
 191                     transform-origin: 50% 50%
 192
 193 .oe_snippet
 194     display: inline-block
 195     vertical-align: top
 196     width: 108px
 197     height: 108px
 198     border-radius: 3px
 199     margin: 1px
 200     margin-top: 0px
 201     position: relative
 202     overflow: hidden
 203     -webkit-user-select: none
 204     user-select: none
 205     cursor: move
 206     pointer-events: none
 207
 208     .oe_snippet_thumbnail
 209         pointer-events: auto
 210         text-align: center
 211         height: 100%
 212         background: transparent
 213         color: white
 214         text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
 215         position: relative
 216         span, div
 217             line-height: 18px
 218     & > :not(.oe_snippet_thumbnail)
 219         display: none !important
 220
 221 #oe_snippets .oe_snippet_thumbnail
 222     background: rgb(116, 116, 116)
 223     background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
 224     box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
 225
 226 /* ---- SNIPPETS DROP ZONES ---- */
 227
 228 .oe_drop_zone.oe_insert
 229     display: block
 230     height: 48px
 231     margin: 0px
 232     margin-top: -4px
 233     margin-bottom: -44px
 234     -webkit-transition: margin 250ms linear
 235     width: 100%
 236     position: absolute
 237     z-index: 1000
 238     &:not(.oe_vertical):before
 239         content: ""
 240         display: block
 241         border-top: dashed 2px rgba(209, 178, 255, 0.72)
 242         position: relative
 243         top: 0px
 244     &.oe_hover:before
 245         border-top: dashed 2px rgba(116, 255, 161, 0.72)
 246     &.oe_vertical
 247         width: 48px
 248         float: left
 249         position: relative
 250         margin: 0px -24px !important
 251     &.oe_overlay
 252         background: rgba(153, 0, 255, 0.17)
 253         border-radius: 3px
 254
 255 .oe_drop_zone, .oe_drop_zone_style
 256     background: rgba(153, 0, 255, 0.17)
 257     border-radius: 3px
 258     &.oe_hover
 259         background: rgba(0, 255, 133, 0.22)
 260         z-index: 1001
 261
 262 .oe_drop_zone_style
 263     color: white
 264     height: 48px
 265     margin-bottom: 32px
 266
 267 /* ---- SNIPPET MANIPULATOR ---- */
 268
 269 .oe_overlay
 270     display: none
 271     position: absolute
 272     background: transparent
 273     border-radius: 3px
 274     transition: opacity 100ms linear
 275     box-sizing: border-box
 276     pointer-events: none
 277     &.oe_active
 278         display: block
 279         border-style: dashed
 280         border-width: 1px
 281         box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
 282         border-color: rgba(153, 0, 255, 0.5)
 283         .oe_handle
 284             display: block !important
 285             pointer-events: auto
 286             &:before
 287                 position: relative
 288                 top: 50%
 289                 left: 50%
 290                 display: block
 291                 background: rgba(255, 255, 255, 1)
 292                 border: solid 1px rgba(153, 0, 255, 1)
 293                 border-radius: 8px
 294                 width: 16px
 295                 height: 16px
 296                 margin: -8px
 297                 padding-left: 1px
 298                 font-size: 14px
 299                 line-height: 14px
 300                 color: rgba(153, 0, 255, 1)
 301                 -webkit-transition: background 100ms linear
 302             &:hover:before
 303                 background: rgba(153, 0, 255, 1)
 304                 color: #fff
 305         .oe_handle.e:before
 306             content: "⇨"
 307         .oe_handle.s:before
 308             content: "⇩"
 309         .oe_handle.w:before
 310             content: "⇦"
 311         .oe_handle.n:before
 312             content: "⇧"
 313
 314     .icon.btn
 315         display: inline-block
 316
 317     .oe_overlay_options
 318         position: absolute
 319         width: 100%
 320         text-align: center
 321         top: -11px
 322         z-index: 1002
 323         .btn, a
 324             pointer-events: auto
 325             cursor: pointer
 326         .dropdown
 327             display: inline-block
 328         .dropdown-menu
 329             text-align: left
 330             min-width: 180px
 331         .dropdown-menu select,.dropdown-menu input
 332             display: block
 333
 334 .oe_handle
 335     pointer-events: auto
 336     position: absolute
 337     top: 50%
 338     left: 50%
 339     display: block
 340     box-sizing: border-box
 341     width: 8px
 342     height: 8px
 343     margin: -4px
 344
 345 .oe_handle.n
 346     left: 2px
 347     width: 100%
 348     top: 0px
 349     cursor: s-resize
 350 .oe_handle.e
 351     left: auto
 352     top: 2px
 353     height: 100%
 354     right: 0px
 355     cursor: w-resize
 356 .oe_handle.s
 357     top: auto
 358     left: 2px
 359     width: 100%
 360     bottom: 0px
 361     cursor: n-resize
 362 .oe_handle.w
 363     top: 2px
 364     height: 100%
 365     left: 0px
 366     cursor: e-resize
 367
 368 .s-resize-important, .s-resize-important *
 369     cursor: s-resize !important
 370 .n-resize-important, .n-resize-important *
 371     cursor: n-resize !important
 372 .e-resize-important, .e-resize-important *
 373     cursor: e-resize !important
 374 .w-resize-important, .w-resize-important *
 375     cursor: w-resize !important
 376 .move-important, .move-important *
 377     cursor: move !important
 378
 379
 380 /* ---- MOBILE PREVIEW ---- */
 381
 382 $mobile_preview_background: #000000
 383 $mobile_preview_border: #1C1F1F
 384 $icon_close: #E00101
 385 .oe_mobile_preview
 386     &.modal .modal-content
 387         height: 660px
 388         background-color: $mobile_preview_background
 389         border: 2px solid
 390         border-radius: 10px
 391         border-color: $mobile_preview_border
 392         margin: auto
 393         top: 0
 394         left: 0
 395         bottom: 0
 396         right: 0
 397         max-width: 330px
 398         .modal-header
 399             background-color: $mobile_preview_background
 400             border-bottom: 0
 401             border-top-left-radius: 10px
 402             border-top-right-radius: 10px
 403             .modal-title
 404                 color: $mobile_preview_border
 405             .close
 406                 color: lightgrey
 407                 opacity: 1
 408             .close:hover
 409                 color: $icon_close
 410                 opacity: 1
 411         .modal-body
 412             background-color: $mobile_preview_background
 413             max-height: 600px
 414             padding: 0
 415             margin: 0
 416             .oe_mobile_viewport
 417                 width: 320px
 418                 height: 568px
 419                 padding: 5px
 420                 border: none
 421         .modal-footer
 422             background-color: $mobile_preview_background
 423
 424 /* ---- SEO TOOLS ---- */
 425
 426 $remove_color: $icon_close
 427 $in_title_color: #5cb85c
 428 $in_description_color: #428bca
 429 $in_body_color: #5bc0de
 430 $highlighted_text_color: #ffffff
 431 .oe_seo_configuration
 432     .modal-dialog
 433         width: 80%
 434     .oe_remove
 435         color: $remove_color
 436     .oe_seo_suggestion
 437         cursor: pointer
 438     .oe_seo_keyword
 439         padding: .2em .4em .2em .5em
 440         border-radius: .4em
 441     .keyword-in-title
 442         background-color: $in_title_color
 443         color: $highlighted_text_color
 444     .keyword-in-description
 445         background-color: $in_description_color
 446         color: $highlighted_text_color
 447     .keyword-in-body
 448         background-color: $in_body_color
 449         color: $highlighted_text_color
 450
 451 /* ---- ACE EDITOR ---- */
 452
 453 $ace_width: 720px
 454 $editorbar_height: 40px
 455 // TODO Fix => might break with themes
 456 $navbar_height: 51px
 457
 458 @mixin editor-font
 459     font-size: 14px
 460     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
 461     line-height: normal
 462 .oe_ace_view_editor
 463     transition: all 0.2s ease-in
 464     -webkit-transition: all 0.2s ease-in
 465     -ms-transition: all 0.2s ease-in
 466     -o-transition: all 0.2s ease-in
 467     -moz-transition: all 0.2s ease-in
 468     opacity: 0.3
 469     position: fixed
 470     top: $navbar_height
 471     right: 0
 472     z-index: 1000
 473     height: 100%
 474     .oe_ace_view_editor_title
 475         width: 100%
 476         padding-top: 4px
 477         padding-left: 4px
 478         height: $editorbar_height
 479         background: #2F3129
 480         .oe_view_list
 481             width: 50%
 482             height: $editorbar_height - 8px
 483             @include editor-font
 484         .btn
 485             height: $editorbar_height - 8px
 486             padding: 0 4px 0 4px
 487             @include editor-font
 488     .ace_editor
 489         position: absolute
 490         top: $editorbar_height
 491         right: 0
 492         bottom: $navbar_height
 493         left: 0
 494         width: $ace_width
 495     &:hover
 496         opacity: 1
 497     &.oe_ace_open
 498         width: $ace_width
 499     &.oe_ace_closed
 500         width: 0
 501         opacity: 0
 502
 503 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: