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 .cke_top
  12     background: transparent
  13     border: none
  14     box-shadow: none
  15     -webkit-box-shadow: none
  16     -moz-box-shadow: none
  17
  18 /* ---- OpenERP Style ---- */
  19
  20 .oe_website_editorbar
  21     position: fixed
  22     top: 0
  23     right: 0
  24     display: block
  25     width: 100%
  26     padding: 2px
  27     margin: 0
  28     z-index: 10000
  29     background-color: #414141
  30     background: -webkit-linear-gradient(#646060, #262626)
  31     box-sizing: border-box
  32     li
  33         display: inline
  34         color: #eee
  35         &:hover
  36             background: rgba(0,0,0,0.2)
  37             text-shadow: black 0px 0px 3px
  38             color: white
  39
  40 .oe_website_editorbar .oe_rte_toolbar
  41     div.dropdown
  42         display: inline-block
  43         li
  44             display: list-item
  45
  46     button
  47         font-family: FontAwesome
  48         font-weight: normal
  49         font-style: normal
  50         text-decoration: inherit
  51         &.oe_button_list
  52             padding-right: 3px
  53             &:after
  54                 content: "\F0D7"
  55                 padding-left: 6px
  56
  57 .oe_editable:focus
  58     outline: none !important
  59
  60 .css_non_editable_mode_hidden
  61     display: none
  62
  63 .oe_carousel_options
  64     cursor: pointer
  65     position: absolute
  66     white-space: nowrap
  67     z-index: 1
  68     display: none
  69     > *
  70         display: inline-block !important
  71         vertical-align: middle !important
  72         position: relative !important
  73         top: +2px
  74
  75 /* ---- EDITOR BAR ---- */
  76
  77 table.editorbar-panel
  78     cursor: pointer
  79     width: 100%
  80     td.selected
  81         background-color: #b1c9d9
  82
  83 /* ---- RTE ---- */
  84
  85 // bootstrap makes .btn elements unselectable -> RTE double-click can't know
  86 // about them either
  87 .oe_editable .btn
  88     -webkit-user-select: auto
  89     -moz-user-select: auto
  90     -ms-user-select: auto
  91     -o-user-select: auto
  92     user-select: auto
  93
  94 /* ---- SNIPPET EDITOR ---- */
  95
  96 .oe_snippets
  97     position: fixed
  98     left: 0px
  99     right: 0px
 100     bottom: 0px
 101     max-height: 280px
 102     min-height: 140px
 103     background: rgb(40,40,40)
 104     box-shadow: 0px 10px 10px -10px black inset
 105     overflow-y: auto
 106     z-index: 100
 107
 108 .oe_snippet
 109     display: inline-block
 110     vertical-align: top
 111     background: white
 112     width: 120px
 113     height: 120px
 114     border-radius: 3px
 115     margin: 10px
 116     margin-right: 0px
 117     position: relative
 118     box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
 119     overflow: hidden
 120     -webkit-user-select: none
 121     user-select: none
 122     cursor: move
 123
 124     .oe_snippet_thumbnail.oe_label
 125         text-align: center
 126         background: rgb(116, 116, 116)
 127         background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
 128         height: 100%
 129         line-height: 120px
 130         color: white
 131         text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
 132         box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
 133
 134     .oe_snippet_body
 135         display: none
 136     & > *
 137         pointer-events: none
 138     & > :not(.oe_snippet_body):not(.oe_snippet_thumbnail)
 139         display: none !important
 140
 141     & > *:first-child:not(.oe_snippet_thumbnail)
 142         display: block
 143         -webkit-transform-origin-x: 5px
 144         -webkit-transform-origin-y: 10px
 145         -webkit-transform: scale(0.095)
 146
 147
 148 /* ---- SNIPPETS DROP ZONES ---- */
 149
 150
 151 .oe_drop_zone.oe_insert
 152     display: block
 153     height: 32px
 154     margin: -16px 0px
 155     -webkit-transition: margin 250ms linear
 156     &:first-child:not(:last-child)
 157         margin-top: -8px
 158         margin-bottom: -24px
 159     &:last-child:not(:first-child)
 160         margin-top: -24px
 161         margin-bottom: -8px
 162     &:before
 163         content: ""
 164         display: block
 165         border-top: dashed 2px rgba(209, 178, 255, 0.72)
 166         position: relative
 167         top: 16px
 168     &:first-child:not(:last-child):before
 169         top: 8px
 170     &:last-child:not(:first-child):before
 171         top: 24px
 172     &.oe_hover:before
 173         border-top: dashed 2px rgba(116, 255, 161, 0.72)
 174
 175 .oe_drop_zone.oe_overlay
 176     position: absolute
 177     background: rgba(153, 0, 255, 0.17)
 178     border-radius: 3px
 179
 180 .oe_drop_zone
 181     background: rgba(153, 0, 255, 0.17)
 182     border-radius: 3px
 183     &.oe_hover
 184         background: rgba(0, 255, 133, 0.22)
 185         z-index: 99
 186
 187 /* ---- SNIPPET MANIPULATOR ---- */
 188
 189 .oe_snippet_manipulator
 190     display: block
 191     position: absolute
 192     background: transparent //rgba(153, 0, 255, 0.05)
 193     border-radius: 3px
 194     opacity: 0
 195     transition: opacity 100ms linear
 196     box-sizing: border-box
 197     pointer-events: none
 198     .oe_boxsize, .oe_margin
 199         position: absolute
 200         pointer-events: none
 201     .oe_handle
 202         display: none
 203     &.oe_hover
 204         opacity: 1
 205         cursor: pointer
 206     &.oe_selected, &.oe_active, .oe_boxsize, .oe_margin
 207         opacity: 1
 208         background: transparent
 209         border: dashed 1px rgba(153, 0, 255, 0.5)
 210         box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
 211         .oe_handle
 212             pointer-events: auto
 213     .oe_buttons
 214         display: none
 215         position: absolute
 216         right: 16px
 217         top: 16px
 218         background: rgb(173, 0, 255)
 219         color: white
 220         padding: 0px 2px
 221         border-radius: 3px
 222         .oe_icon
 223             display: inline-block
 224             padding: 8px
 225             cursor: pointer
 226     &.oe_active
 227         z-index: 100000
 228         .oe_handle, .oe_buttons
 229             display: block
 230
 231 .oe_handle
 232     pointer-events: auto
 233     position: absolute
 234     top: 50%
 235     left: 50%
 236     display: block
 237     background: rgba(255, 255, 255, 1)
 238     border: solid 1px rgba(153, 0, 255, 1)
 239     box-sizing: border-box
 240     border-radius: 8px
 241     width: 16px
 242     height: 16px
 243     margin: -8px
 244     -webkit-transition: background 100ms linear
 245     &:hover
 246         background: rgb(153, 0, 255)
 247
 248 .oe_handle.nw,.oe_handle.n,.oe_handle.ne
 249     top: 0px
 250 .oe_handle.ne,.oe_handle.e,.oe_handle.se
 251     left: auto
 252     right: 0px
 253 .oe_handle.sw,.oe_handle.s,.oe_handle.se
 254     top: auto
 255     bottom: 0px
 256 .oe_handle.nw,.oe_handle.w,.oe_handle.sw
 257     left: 0px
 258 .oe_handle.n
 259     cursor: n-resize
 260 .oe_handle.ne
 261     cursor: ne-resize
 262 .oe_handle.nw
 263     cursor: nw-resize
 264 .oe_handle.s
 265     cursor: s-resize
 266 .oe_handle.se
 267     cursor: se-resize
 268 .oe_handle.sw
 269     cursor: sw-resize
 270 .oe_handle.e
 271     cursor: e-resize
 272 .oe_handle.w
 273     cursor: w-resize
 274
 275
 276 /* ---- MOBILE PREVIEW ---- */
 277
 278 $mobile_preview_background: #000000
 279 $mobile_preview_border: #1C1F1F
 280 $icon_close: #E00101
 281 .oe_mobile_preview
 282     &.modal .modal-content
 283         height: 660px
 284         background-color: $mobile_preview_background
 285         border: 2px solid
 286         border-radius: 10px
 287         border-color: $mobile_preview_border
 288         margin: auto
 289         top: 0
 290         left: 0
 291         bottom: 0
 292         right: 0
 293         max-width: 330px
 294         .modal-header
 295             background-color: $mobile_preview_background
 296             border-bottom: 0
 297             border-top-left-radius: 10px
 298             border-top-right-radius: 10px
 299             .modal-title
 300                 color: $mobile_preview_border
 301             .close
 302                 color: lightgrey
 303                 opacity: 1
 304             .close:hover
 305                 color: $icon_close
 306                 opacity: 1
 307         .modal-body
 308             background-color: $mobile_preview_background
 309             max-height: 600px
 310             padding: 0
 311             margin: 0
 312             .oe_mobile_viewport
 313                 width: 320px
 314                 height: 568px
 315                 padding: 5px
 316                 border: none
 317         .modal-footer
 318             background-color: $mobile_preview_background
 319
 320 /* ---- SEO TOOLS ---- */
 321
 322 $remove_color: $icon_close
 323 .oe_seo_configuration
 324     .modal-dialog
 325         width: 80%
 326     .oe_remove
 327         color: $remove_color
 328     .oe_seo_suggestion
 329         cursor: pointer