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
 229 .col-md-12
 230     float: left
 231 .oe_drop_zone.oe_insert
 232     display: block
 233     height: 48px
 234     margin: 0px
 235     margin-top: -4px
 236     margin-bottom: -44px
 237     -webkit-transition: margin 250ms linear
 238     width: 100%
 239     position: absolute
 240     z-index: 1000
 241     &:not(.oe_vertical):before
 242         content: ""
 243         display: block
 244         border-top: dashed 2px rgba(209, 178, 255, 0.72)
 245         position: relative
 246         top: 0px
 247     &.oe_hover:before
 248         border-top: dashed 2px rgba(116, 255, 161, 0.72)
 249     &.oe_vertical
 250         width: 48px
 251         float: left
 252         position: relative
 253         margin: 0px -24px !important
 254     &.oe_overlay
 255         background: rgba(153, 0, 255, 0.17)
 256         border-radius: 3px
 257
 258 .oe_drop_zone, .oe_drop_zone_style
 259     background: rgba(153, 0, 255, 0.17)
 260     border-radius: 3px
 261     &.oe_hover
 262         background: rgba(0, 255, 133, 0.22)
 263         z-index: 1001
 264
 265 .oe_drop_zone_style
 266     color: white
 267     height: 48px
 268     margin-bottom: 32px
 269
 270 /* ---- SNIPPET MANIPULATOR ---- */
 271
 272 .oe_overlay
 273     display: none
 274     position: absolute
 275     background: transparent
 276     border-radius: 3px
 277     transition: opacity 100ms linear
 278     box-sizing: border-box
 279     pointer-events: none
 280     &.oe_active
 281         display: block
 282         border-style: dashed
 283         border-width: 1px
 284         box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
 285         border-color: rgba(153, 0, 255, 0.5)
 286         .oe_handle
 287             display: block !important
 288             pointer-events: auto
 289             &:before
 290                 position: relative
 291                 top: 50%
 292                 left: 50%
 293                 display: block
 294                 background: rgba(255, 255, 255, 1)
 295                 border: solid 1px rgba(153, 0, 255, 1)
 296                 border-radius: 8px
 297                 width: 16px
 298                 height: 16px
 299                 margin: -8px
 300                 padding-left: 1px
 301                 font-size: 14px
 302                 line-height: 14px
 303                 color: rgba(153, 0, 255, 1)
 304                 -webkit-transition: background 100ms linear
 305             &:hover:before
 306                 background: rgba(153, 0, 255, 1)
 307                 color: #fff
 308         .oe_handle.e:before
 309             content: "⇨"
 310         .oe_handle.s:before
 311             content: "⇩"
 312         .oe_handle.w:before
 313             content: "⇦"
 314         .oe_handle.n:before
 315             content: "⇧"
 316
 317     .icon.btn
 318         display: inline-block
 319
 320     .oe_overlay_options
 321         position: absolute
 322         width: 100%
 323         text-align: center
 324         top: -11px
 325         z-index: 1002
 326         .btn, a
 327             pointer-events: auto
 328             cursor: pointer
 329         .dropdown
 330             display: inline-block
 331         .dropdown-menu
 332             text-align: left
 333             min-width: 180px
 334         .dropdown-menu select,.dropdown-menu input
 335             display: block
 336
 337 .oe_handle
 338     pointer-events: auto
 339     position: absolute
 340     top: 50%
 341     left: 50%
 342     display: block
 343     box-sizing: border-box
 344     width: 8px
 345     height: 8px
 346     margin: -4px
 347
 348 .oe_handle.n
 349     left: 2px
 350     width: 100%
 351     top: 0px
 352     cursor: s-resize
 353 .oe_handle.e
 354     left: auto
 355     top: 2px
 356     height: 100%
 357     right: 0px
 358     cursor: w-resize
 359 .oe_handle.s
 360     top: auto
 361     left: 2px
 362     width: 100%
 363     bottom: 0px
 364     cursor: n-resize
 365 .oe_handle.w
 366     top: 2px
 367     height: 100%
 368     left: 0px
 369     cursor: e-resize
 370
 371 .s-resize-important, .s-resize-important *
 372     cursor: s-resize !important
 373 .n-resize-important, .n-resize-important *
 374     cursor: n-resize !important
 375 .e-resize-important, .e-resize-important *
 376     cursor: e-resize !important
 377 .w-resize-important, .w-resize-important *
 378     cursor: w-resize !important
 379 .move-important, .move-important *
 380     cursor: move !important
 381
 382
 383 /* ---- MOBILE PREVIEW ---- */
 384
 385 $mobile_preview_background: #000000
 386 $mobile_preview_border: #1C1F1F
 387 $icon_close: #E00101
 388 .oe_mobile_preview
 389     &.modal .modal-content
 390         height: 660px
 391         background-color: $mobile_preview_background
 392         border: 2px solid
 393         border-radius: 10px
 394         border-color: $mobile_preview_border
 395         margin: auto
 396         top: 0
 397         left: 0
 398         bottom: 0
 399         right: 0
 400         max-width: 330px
 401         .modal-header
 402             background-color: $mobile_preview_background
 403             border-bottom: 0
 404             border-top-left-radius: 10px
 405             border-top-right-radius: 10px
 406             .modal-title
 407                 color: $mobile_preview_border
 408             .close
 409                 color: lightgrey
 410                 opacity: 1
 411             .close:hover
 412                 color: $icon_close
 413                 opacity: 1
 414         .modal-body
 415             background-color: $mobile_preview_background
 416             max-height: 600px
 417             padding: 0
 418             margin: 0
 419             .oe_mobile_viewport
 420                 width: 320px
 421                 height: 568px
 422                 padding: 5px
 423                 border: none
 424         .modal-footer
 425             background-color: $mobile_preview_background
 426
 427 /* ---- SEO TOOLS ---- */
 428
 429 $remove_color: $icon_close
 430 $in_title_color: #5cb85c
 431 $in_description_color: #428bca
 432 $in_body_color: #5bc0de
 433 $highlighted_text_color: #ffffff
 434 .oe_seo_configuration
 435     .modal-dialog
 436         width: 80%
 437     .oe_remove
 438         color: $remove_color
 439     .oe_seo_suggestion
 440         cursor: pointer
 441     .oe_seo_keyword
 442         padding: .2em .4em .2em .5em
 443         border-radius: .4em
 444     .keyword-in-title
 445         background-color: $in_title_color
 446         color: $highlighted_text_color
 447     .keyword-in-description
 448         background-color: $in_description_color
 449         color: $highlighted_text_color
 450     .keyword-in-body
 451         background-color: $in_body_color
 452         color: $highlighted_text_color
 453
 454 /* ---- ACE EDITOR ---- */
 455
 456 $ace_width: 720px
 457 $editorbar_height: 40px
 458 // TODO Fix => might break with themes
 459 $navbar_height: 51px
 460
 461 @mixin editor-font
 462     font-size: 14px
 463     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
 464     line-height: normal
 465 .oe_ace_view_editor
 466     transition: all 0.2s ease-in
 467     -webkit-transition: all 0.2s ease-in
 468     -ms-transition: all 0.2s ease-in
 469     -o-transition: all 0.2s ease-in
 470     -moz-transition: all 0.2s ease-in
 471     opacity: 0.3
 472     position: fixed
 473     top: $navbar_height
 474     right: 0
 475     z-index: 1000
 476     height: 100%
 477     .oe_ace_view_editor_title
 478         width: 100%
 479         padding-top: 4px
 480         padding-left: 4px
 481         height: $editorbar_height
 482         background: #2F3129
 483         .oe_view_list
 484             width: 50%
 485             height: $editorbar_height - 8px
 486             @include editor-font
 487         .btn
 488             height: $editorbar_height - 8px
 489             padding: 0 4px 0 4px
 490             @include editor-font
 491     .ace_editor
 492         position: absolute
 493         top: $editorbar_height
 494         right: 0
 495         bottom: $navbar_height
 496         left: 0
 497         width: $ace_width
 498     &:hover
 499         opacity: 1
 500     &.oe_ace_open
 501         width: $ace_width
 502     &.oe_ace_closed
 503         width: 0
 504         opacity: 0
 505
 506 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: