addons/web/static/src/css/base.sass

   1 @charset "utf-8"
   2
   3 // Variables {{{
   4 $facets-border: #afafb6
   5 $section-title-color: #7C7BAD
   6 $tag-bg-light: #f0f0fa
   7 $tag-bg-dark: #7C7BAD
   8 $tag-border: #afafb6
   9 $tag-border-selected: #a6a6fe
  10 $hover-background: #f0f0fa
  11 $link-color: #7C7BAD
  12 $sheet-max-width: 860px
  13 // }}}
  14 // Mixins {{{
  15 @font-face
  16     font-family: 'mnmliconsRegular'
  17     src: url('/web/static/src/font/mnmliconsv21-webfont.eot') format('eot')
  18     src: url('/web/static/src/font/mnmliconsv21-webfont.woff') format('woff')
  19     src: url('/web/static/src/font/mnmliconsv21-webfont.ttf') format('truetype')
  20     src: url('/web/static/src/font/mnmliconsv21-webfont.svg') format('svg') active
  21     font-weight: normal
  22     font-style: normal
  23
  24 @font-face
  25     font-family: 'EntypoRegular'
  26     src: url('/web/static/src/font/entypo-webfont.eot') format('eot')
  27     src: url('/web/static/src/font/entypo-webfont.eot?#iefix') format('embedded-opentype')
  28     src: url('/web/static/src/font/entypo-webfont.woff') format('woff')
  29     src: url('/web/static/src/font/entypo-webfont.ttf') format('truetype')
  30     src: url('/web/static/src/font/entypo-webfont.svg') format('svg') active
  31     font-weight: normal
  32     font-style: normal
  33
  34 @mixin reset()
  35     border: none
  36     padding: 0
  37     margin: 0
  38     background: none
  39     @include radius(0)
  40     @include box-shadow(none)
  41
  42 @mixin vertical-gradient($startColor: #555, $endColor: #333)
  43     background-color: $startColor
  44     background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)) /* Saf4+, Chrome */
  45     background-image: -webkit-linear-gradient(top, $startColor, $endColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
  46     background-image:    -moz-linear-gradient(top, $startColor, $endColor) /* FF3.6 */
  47     background-image:     -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
  48     background-image:      -o-linear-gradient(top, $startColor, $endColor) /* Opera 11.10+ */
  49     background-image:         linear-gradient(to bottom, $startColor, $endColor)
  50
  51 @mixin radial-gradient($gradient)
  52     background-position: center center
  53     background-image: -webkit-radial-gradient(circle, $gradient)
  54     background-image: -moz-radial-gradient($gradient)
  55     background-image: -ms-radial-gradient($gradient)
  56     background-image: radial-gradient($gradient)
  57
  58 @mixin radius($radius: 5px)
  59     -moz-border-radius: $radius
  60     -webkit-border-radius: $radius
  61     border-radius: $radius
  62
  63 @mixin box-shadow($bsval: 0px 1px 4px #777)
  64     -moz-box-shadow: $bsval
  65     -webkit-box-shadow: $bsval
  66     box-shadow: $bsval
  67
  68 @mixin transition($transval: (border linear 0.2s, box-shadow linear 0.2s))
  69     -webkit-transition: $transval
  70     -moz-transition: $transval
  71     -ms-transition: $transval
  72     -o-transition: $transval
  73     transition: $transval
  74
  75 @mixin opacity($opacity: .5)
  76     filter: alpha(opacity=$opacity * 100)
  77     opacity: $opacity
  78
  79 @mixin background-clip($clip: padding-box)
  80     -webkit-background-clip: $clip
  81     -moz-background-clip: $clip
  82     background-clip: $clip
  83
  84 @mixin box-sizing($type: content)
  85     // type = border || content || padding
  86     -webkit-box-sizing: #{$type}-box
  87     -moz-box-sizing: #{$type}-box
  88     -ms-box-sizing: #{$type}-box
  89     box-sizing: #{$type}-box
  90
  91 @mixin skew-gradient($startColor: #555, $endColor: #333)
  92     background-color: $endColor
  93     background: -moz-linear-gradient(135deg, $endColor, $startColor)
  94     background: -o-linear-gradient(135deg, $startColor, $endColor)
  95     background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor))
  96
  97 @mixin transform($transform)
  98     -webkit-transform: $transform
  99     -moz-transform: $transform
 100     -ms-transform: $transform
 101     -o-transform: $transform
 102     transform: $transform
 103
 104 @mixin keyframes($name)
 105     @-webkit-keyframes #{$name}
 106         @content
 107     @-moz-keyframes #{$name}
 108         @content
 109     @-ms-keyframes #{$name}
 110         @content
 111     @-o-keyframes #{$name}
 112         @content
 113     @keyframes #{$name}
 114         @content
 115
 116
 117 // Transforms the (readable) text of an inline element into an mmlicons icon,
 118 // allows for actual readable text in-code (and in readers?) with iconic looks
 119 @mixin text-to-icon($icon-name, $color: #404040)
 120     font-size: 1px
 121     letter-spacing: -1px
 122     color: transparent
 123     font-weight: normal
 124     &:before
 125         font: 21px "mnmliconsRegular"
 126         content: $icon-name
 127         color: $color
 128
 129 @mixin text-to-entypo-icon($icon-name, $color: #404040, $size: 21px)
 130     font-size: 1px
 131     letter-spacing: -1px
 132     color: transparent
 133     font-weight: normal
 134     &:before
 135         font: $size "entypoRegular"
 136         content: $icon-name
 137         color: $color
 138
 139 // }}}
 140
 141 @media print
 142     .oe_topbar, .oe_leftbar, .oe_loading
 143         display: none !important
 144
 145 .openerp.openerp_webclient_container
 146     height: 100%
 147     position: relative
 148
 149 // jQueryUI css bug fixing
 150 .text-tag .text-button
 151     height: auto !important
 152     min-height: 16px
 153
 154 .openerp
 155     // Global style {{{
 156     padding: 0
 157     margin: 0
 158     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
 159     color: #4c4c4c
 160     font-size: 13px
 161     background: white
 162     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
 163     // }}}
 164     //Placeholder style{{{
 165     \:-moz-placeholder
 166         color: $tag-border !important
 167         font-style: italic !important
 168     \::-webkit-input-placeholder
 169         color: $tag-border !important
 170         font-style: italic !important
 171     //}}}
 172     // Tag reset {{{
 173     a
 174         text-decoration: none
 175         cursor: pointer !important
 176     table
 177         padding: 0
 178         border-collapse: collapse
 179     thead
 180         font-weight: bold
 181         background-color: #f0f0f0
 182         th
 183             border-right: 1px dotted $tag-border
 184             &:last-child
 185                 border-right: none
 186     th, td
 187         padding: 0
 188         text-align: left
 189     th
 190         font-weight: bold
 191         vertical-align: middle
 192     td
 193         vertical-align: top
 194     .zebra tbody tr:nth-child(odd) td
 195         background-color: #f0f0fa
 196         @include vertical-gradient(#f0f0fa, #eeeef6)
 197     .zebra tbody tr:hover td
 198         @include vertical-gradient(#eee, #dedede)
 199     input, textarea, select
 200         padding: 2px 4px
 201         border: 1px solid #ccc
 202         @include radius(3px)
 203         background: white
 204     img
 205         vertical-align: middle
 206     h4
 207         margin: 4px 0
 208     // }}}
 209     // Button style {{{
 210     a.button:link, a.button:visited, button, input[type='submit'], .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button
 211         display: inline-block
 212         border: 1px solid rgba(0,0,0,0.4)
 213         color: #4c4c4c
 214         margin: 0
 215         padding: 3px 12px
 216         font-size: 13px
 217         text-align: center
 218         @include vertical-gradient(#efefef, #d8d8d8)
 219         @include radius(3px)
 220         @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
 221         text-shadow: 0 1px 1px rgba(255, 255, 255, .5)
 222         -webkit-font-smoothing: antialiased
 223         outline: none
 224
 225     a.button:hover, button:hover, input[type='submit']:hover, .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-hover
 226         @include vertical-gradient(#f6f6f6, #e3e3e3)
 227         cursor: pointer
 228         background-position: 0
 229
 230     a.button:focus, button:focus, input[type='submit']:focus, .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-focus
 231         border: 1px solid #80bfff
 232         background-position: 0
 233         @include vertical-gradient(#f6f6f6, #e3e3e3)
 234         @include box-shadow((0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, .8) inset))
 235
 236     a.button:active, a.button.active, button:active, button.active, input[type='submit']:active, input[type='submit'].active, .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-active
 237         @include vertical-gradient(#e3e3e3, #f6f6f6)
 238         @include box-shadow(none)
 239
 240     a.button.disabled, button:disabled, input[type='submit']:disabled
 241         background: #efefef !important
 242         border: 1px solid #d1d1d1 !important
 243         @include box-shadow(none !important)
 244         color: #aaa !important
 245         cursor: default
 246         text-shadow: 0 1px 1px #fff !important
 247     // }}}
 248     // Jquery ui Overrides {{{
 249     .ui-widget-content a
 250         color: $link-color
 251     .oe_bounce_container
 252         display: inline-block
 253
 254     // Modal box
 255     &.ui-dialog
 256         display: none
 257         padding: 6px
 258         //overflow: hidden
 259         background-color: rgba(60,60,60,0.7)
 260         border: 1px solid
 261         border-color: #888 #555 #444
 262         //overflow: hidden
 263         @include radius(8px)
 264         @include box-shadow(0 1px 12px rgba(0, 0, 0, 0.6))
 265         @include background-clip()
 266         .ui-dialog-content
 267             padding: 0px
 268         .ui-dialog-titlebar, .ui-dialog-content, .ui-dialog-buttonpane
 269             padding: 16px
 270         .ui-dialog-titlebar
 271             border-bottom: 1px solid #cacaca
 272             @include radius(2px 2px 0 0)
 273             @include vertical-gradient(#FCFCFC, #DEDEDE)
 274             .ui-dialog-title
 275                 margin: 0
 276                 padding: 0
 277         .ui-widget-header
 278             border: none
 279         .ui-dialog-content
 280             background: white
 281         .ui-dialog-buttonpane
 282             border-top: 1px solid #e0e0e0
 283             background: #f5f7f9
 284             margin: 0
 285             @include radius(0 0 2px 2px)
 286             button
 287                 margin: 0 4px 0 0
 288             .ui-dialog-buttonset
 289                 float: left
 290                 .ui-button
 291                     margin-right: 4px
 292         .ui-dialog-titlebar-close
 293             padding: 0
 294             .ui-icon-closethick
 295                 display: none
 296             &:before
 297                 content: "×"
 298                 font-size: 18px
 299                 font-weight: bold
 300                 line-height: 16px
 301                 color: black
 302                 text-shadow: 0 1px 0 white
 303                 padding: 0
 304                 cursor: pointer
 305                 background: transparent
 306                 border: 0
 307                 &:hover
 308                     color: black
 309                     text-decoration: none
 310         .oe_about
 311             background-color: white
 312             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
 313             @include radius(0 0 2px 2px)
 314             a
 315                 color: $link-color
 316                 &:hover
 317                     text-decoration: underline
 318                 &:focus
 319                     outline: none
 320             .oe_logo
 321                 margin-left: -6px
 322             .oe_bottom
 323                 position: absolute
 324                 top: 50%
 325                 left: 0
 326                 right: 0
 327                 bottom: 0
 328                 text-shadow: 0 1px 1px #999999
 329                 @include vertical-gradient(#b41616, #600606)
 330                 color: #eee
 331                 padding: 0 16px
 332                 @include radius(0 0 2px 2px)
 333                 a
 334                     color: #eee
 335
 336     &.ui-dialog.oe_act_window
 337         .ui-dialog-content
 338             padding: 0px
 339
 340     .modal-backdrop
 341         position: fixed
 342         top: 0
 343         right: 0
 344         bottom: 0
 345         left: 0
 346         z-index: 1040
 347         background-color: black
 348         @include opacity(.3)
 349
 350     // }}}
 351     // Generic classes {{{
 352     .oe_i
 353         font-family: "mnmliconsRegular" !important
 354         font-size: 21px
 355         font-weight: 300 !important
 356     .oe_e
 357         font-family: "entypoRegular" !important
 358         font-size: 34px
 359         font-weight: 300 !important
 360     .oe_left
 361         float: left
 362         margin-right: 8px
 363     .oe_right
 364         float: right
 365         margin-left: 8px
 366     .oe_text_right
 367         text-align: right
 368     .oe_clear
 369         clear: both
 370     .oe_wait
 371         cursor: wait
 372     .oe_fade
 373         color: #888
 374         font-weight: normal
 375     .oe_bold
 376         font-weight: bold
 377     .oe_inline
 378         width: auto !important
 379     .oe_highlight
 380         color: white
 381         background: #DC5F59
 382     button.oe_highlight
 383         @include vertical-gradient(#df3f3f, #a21a1a)
 384         @include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
 385     button.oe_highlight:hover
 386         @include vertical-gradient(lighten(#e04f4f, 2%), lighten(#a21a1a, 2%))
 387     button.oe_highlight:active
 388         @include vertical-gradient(lighten(#a21a1a, 8%), darken(#df3f3f, 8%))
 389     .oe_background_grey
 390         background: #eee !important
 391
 392     .oe_form_dirty
 393         .oe_highlight_on_dirty
 394             color: white
 395             background: #dc5f59
 396             font-weight: bold
 397         button.oe_highlight_on_dirty
 398             @include vertical-gradient(#dc5f59, #b33630)
 399             @include box-shadow(none)
 400             &:hover
 401                 background: #ED6F6A
 402     .oe_title
 403         width: 50%
 404         float: left
 405     .oe_title:after
 406         content: "."
 407         display: block
 408         height: 0
 409         clear: both
 410         visibility: hidden
 411     .oe_button_box
 412         width: 270px
 413         text-align: right
 414         button
 415             margin: 4px
 416     .oe_avatar
 417         > img
 418             max-height: 90px
 419             max-width: 90px
 420             @include radius(3px)
 421             @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.4))
 422             border: none
 423             margin-bottom: 10px
 424     .oe_avatar + div
 425         margin-left: 5px
 426     .oe_image_small > img
 427         max-width: 50px
 428         max-height: 50px
 429     .oe_image_medium > img
 430         max-width: 180px
 431         max-height: 180px
 432     .oe_button.oe_link
 433         @include reset()
 434         img
 435             display: none
 436         span
 437             @include reset()
 438             color: $link-color
 439             font-weight: bold
 440             &:hover
 441                 text-decoration: underline
 442     .oe_webclient
 443         .oe_star_on, .oe_star_off
 444             color: #cccccc
 445             text-shadow: 0 0 2px black
 446             vertical-align: top
 447             position: relative
 448             top: -5px
 449         .oe_star_on:hover, .oe_star_off:hover
 450             text-decoration: none
 451         .oe_star_on
 452             color: gold
 453     // }}}
 454     // Tags (for many2many tags, among others) {{{
 455     .oe_tag
 456         border: 1px solid $tag-border
 457         font-size: 11px
 458         padding: 2px 4px
 459         margin: 0 2px 2px 0
 460         @include radius(3px)
 461         background: $tag-bg-light
 462         color: #4C4C4C
 463     .oe_tag_dark
 464         background: $tag-bg-dark
 465         color: #eee
 466
 467     .oe_tags
 468         &.oe_inline
 469             min-width: 250px
 470         .text-wrap
 471             width: 100% !important
 472             textarea
 473                 width: 100% !important
 474         .text-core .text-wrap .text-dropdown .text-list .text-suggestion em
 475             font-style: italic
 476             text-decoration: none
 477         margin-bottom: 1px
 478     // }}}
 479     // Tooltips {{{
 480     &.oe_tooltip
 481         font-size: 12px
 482         .oe_tooltip_string
 483             color: #FD5
 484             font-weight: bold
 485             font-size: 13px
 486         .oe_tooltip_help
 487             white-space: pre-wrap
 488         .oe_tooltip_technical
 489             padding: 0 0 4px 0
 490             margin: 5px 0 0 15px
 491             li
 492                 list-style: circle
 493         .oe_tooltip_technical_title
 494             font-weight: bold
 495         .oe_tooltip_close
 496             margin: -5px 0 0 2px
 497             cursor: default
 498             float: right
 499             color: white
 500             &:hover
 501                 color: #999
 502                 cursor: pointer
 503         .oe_tooltip_message
 504             max-width: 310px
 505     // }}}
 506     // Notebook {{{
 507     .oe_notebook
 508         margin: 8px 0
 509         padding: 0 16px
 510         list-style: none
 511         zoom: 1
 512     .oe_notebook.ui-corner-all
 513         @include radius(0)
 514     .oe_notebook:before, .oe_notebook:after
 515         display: table
 516         content: ""
 517         zoom: 1
 518     .oe_notebook:after
 519         clear: both
 520     .oe_notebook > li
 521         float: left
 522     .oe_notebook > li > a
 523         display: block
 524         color: #4c4c4c
 525     .oe_notebook
 526         border-color: #ddd
 527         border-style: solid
 528         border-width: 0 0 1px
 529     .oe_notebook > li
 530         position: relative
 531     .oe_notebook > li > a
 532         padding: 0 12px
 533         margin-right: 2px
 534         line-height: 30px
 535         border: 1px solid transparent
 536         @include radius(4px 4px 0 0)
 537     .oe_notebook > li > a:hover
 538         text-decoration: none
 539         background-color: #eee
 540         border-color: #eee #eee #ddd
 541     .oe_notebook > li.ui-state-active > a, .oe_notebook > li.ui-state-active > a:hover
 542         background-color: #ffffff
 543         border: 1px solid #ddd
 544         border-bottom-color: transparent
 545         cursor: default
 546     .oe_notebook_page
 547         padding: 0
 548     div.ui-tabs
 549         padding: 3px 0px 3px 0px
 550     .ui-tabs-hide
 551         display: none
 552     // }}}
 553     // Dropdown {{{
 554     .oe_dropdown, .oe_dropdown_hover, .oe_dropdown_toggle
 555         position: relative
 556         cursor: pointer
 557     .oe_dropdown_toggle
 558         color: rgba(0,0,0,0.5)
 559         font-weight: normal
 560     .oe_dropdown_hover:hover .oe_dropdown_menu, .oe_dropdown_menu.oe_opened
 561         display: block
 562     .oe_dropdown_menu
 563         display: none
 564         position: absolute
 565         top: 26px
 566         left: 0
 567         z-index: 3
 568         margin: 0
 569         padding: 0
 570         border: 1px solid $tag-border
 571         background: white
 572         padding: 4px 0
 573         min-width: 140px
 574         text-align: left
 575         @include radius(3px)
 576         @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
 577         > li
 578             &:hover
 579                 @include vertical-gradient(#f0f0fa, #eeeef6)
 580                 @include box-shadow(none)
 581             list-style-type: none
 582             float: none
 583             display: block
 584             position: relative
 585             margin: 0
 586             padding: 2px 8px
 587             > a
 588                 white-space: nowrap
 589                 display: block
 590                 color: #4c4c4c
 591                 text-decoration: none
 592                 &:hover
 593                     text-decoration: none
 594     .oe_dropdown_arrow:after
 595         width: 0
 596         height: 0
 597         display: inline-block
 598         content: "&darr"
 599         text-indent: -99999px
 600         vertical-align: top
 601         margin-top: 8px
 602         //margin-left set at 3px to avoid a strange overflow
 603         margin-left: 3px
 604         border-left: 4px solid transparent
 605         border-right: 4px solid transparent
 606         border-top: 4px solid#404040
 607         @include opacity(0.5)
 608     .oe_sidebar
 609         white-space: nowrap
 610         .oe_dropdown_menu
 611             .oe_sidebar_add_attachment
 612                 height: 20px
 613                 cursor: pointer
 614                 padding-left: 6px
 615                 margin-top: 6px
 616                 span
 617                     font-weight: bold
 618                 .oe_hidden_input_file
 619                     width: 200px
 620                 &:hover
 621                     @include vertical-gradient(#f0f0fa, #eeeef6)
 622                     @include box-shadow(none)
 623             li
 624                 .oe_sidebar_delete_item
 625                     position: absolute
 626                     top: 4px
 627                     right: 4px
 628                     display: none
 629                     width: 12px
 630                     height: 12px
 631                     padding: 1px
 632                     color: #8786b7
 633                     line-height: 8px
 634                     text-align: center
 635                     font-weight: bold
 636                     text-shadow: 0 1px 1px white
 637                     &:hover
 638                         text-decoration: none
 639                         color: white
 640                         background: #8786b7
 641                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
 642                         @include radius(2px)
 643                 &:hover
 644                     .oe_sidebar_delete_item
 645                         display: inline-block
 646     // }}}
 647     // Loading {{{
 648     .oe_loading
 649         display: none
 650         z-index: 100
 651         position: fixed
 652         top: 0
 653         right: 50%
 654         padding: 4px 12px
 655         background: #A61300
 656         color: white
 657         text-align: center
 658         border: 1px solid #900
 659         border-top: none
 660         -moz-border-radius-bottomright: 8px
 661         -moz-border-radius-bottomleft: 8px
 662         border-bottom-right-radius: 8px
 663         border-bottom-left-radius: 8px
 664     // }}}
 665     // Notification {{{
 666     .oe_notification
 667         z-index: 1050
 668     // }}}
 669     // Login {{{
 670     .oe_login
 671         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
 672         text-align: center
 673         font-size: 14px
 674         height: 100%
 675         ul, li
 676             margin: 0
 677             list-style-type: none
 678             padding: 0 0 4px 0
 679         button
 680             float: right
 681             display: inline-block
 682             cursor: pointer
 683             padding: 6px 16px
 684             border: 1px solid #222
 685             color: white
 686             margin: 0
 687             @include vertical-gradient(#b92020, #600606)
 688             @include radius(4px)
 689             @include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
 690         input, select
 691             width: 252px
 692             font-family: "Lucida Grande", Helvetica, Verdana, Arial
 693             border: 1px solid #999999
 694             background: whitesmoke
 695             @include box-shadow(inset 0 1px 4px rgba(0, 0, 0, 0.4))
 696             @include radius(3px)
 697         input
 698             margin-bottom: 9px
 699             padding: 5px 6px
 700         select
 701             padding: 1px
 702         .oe_login_dbpane
 703             position: fixed
 704             top: 0
 705             right: 8px
 706             padding: 5px 10px
 707             color: #eee
 708             border: solid 1px #333
 709             background: #1e1e1e
 710             background: rgba(30,30,30,0.94)
 711             @include radius(0 0 8px 8px)
 712             input
 713                 padding: 2px 4px
 714                 margin: 4px 0
 715         .oe_login_bottom
 716             position: absolute
 717             top: 50%
 718             left: 0
 719             right: 0
 720             bottom: 0
 721             text-shadow: 0 1px 1px #999999
 722             @include vertical-gradient(#b41616, #600606)
 723         .oe_login_pane
 724             position: absolute
 725             top: 50%
 726             left: 50%
 727             margin: -160px -166px
 728             border: solid 1px #333333
 729             background: #1e1e1e
 730             background: rgba(30,30,30,0.94)
 731             padding: 22px 32px
 732             color: #eee
 733             text-align: left
 734             @include radius(8px)
 735             @include box-shadow(0 0 18px rgba(0, 0, 0, 0.9))
 736             h2
 737                 margin-top: 0
 738                 font-size: 18px
 739         .oe_login_logo
 740             position: absolute
 741             top: -70px
 742             left: 0
 743             width: 100%
 744             margin: 0 auto
 745             text-align: center
 746         .oe_login_footer
 747             position: absolute
 748             bottom: -40px
 749             left: 0
 750             width: 100%
 751             text-align: center
 752             a
 753                 color: #eee
 754                 margin: 0 8px
 755                 &:hover
 756                     text-decoration: underline
 757             span
 758                 font-weight: bold
 759                 font-size: 16px
 760         .oe_login_error_message
 761             display: none
 762             background-color: #b41616
 763             color: #eee
 764             padding: 14px 18px
 765             margin-top: 15px
 766             text-align: center
 767             @include radius(4px)
 768             @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.8))
 769     .oe_login_invalid
 770         .oe_login_error_message
 771             display: inline-block
 772     // }}}
 773     // DatabaseManager {{{
 774     .oe_database_manager
 775         background: #fff
 776         color: #000
 777         text-align: left
 778         .oe_database_manager_menu
 779             color: #000
 780     // }}}
 781     // WebClient {{{
 782     .oe_webclient
 783         width: 100%
 784         height: 100%
 785         border-spacing: 0px
 786     // }}}
 787     // WebClient.fullscreen {{{
 788     .oe_content_full_screen
 789         .oe_application
 790             top: 0
 791             left: 0
 792         .oe_topbar, .oe_leftbar
 793             display: none
 794     // }}}
 795     // Top Menu {{{
 796
 797     .oe_topbar
 798         width: 100%
 799         height: 32px
 800         background-color: #414141
 801         @include vertical-gradient(#646060, #262626)
 802         .oe_topbar_item
 803             display: block
 804             padding: 5px 10px 7px
 805             line-height: 20px
 806             height: 20px
 807             text-decoration: none
 808             color: #eee
 809             vertical-align: top
 810             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 811             @include transition(all 0.2s ease-out)
 812             &:hover,
 813                 background: rgba(0,0,0,0.2)
 814                 text-shadow: black 0px 0px 3px
 815                 color: white
 816                 @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
 817
 818         .oe_topbar_avatar
 819             width: 24px
 820             height: 24px
 821             margin: -2px 2px 0 0
 822             @include radius(3px)
 823         .oe_topbar_avatar
 824             vertical-align: top
 825         .oe_dropdown_arrow:after
 826             border-top: 4px solid white
 827         .oe_dropdown_menu
 828             top: 32px
 829             background: #333
 830             background: rgba(37,37,37,0.9)
 831             border-color: #999
 832             border-color: rgba(0, 0, 0, 0.2)
 833             border-style: solid
 834             border-width: 0 1px 1px
 835             @include radius(0 0 6px 6px)
 836             @include background-clip()
 837             li
 838                 float: none
 839                 padding: 3px 12px
 840                 a
 841                     color: #eee
 842                 &:hover
 843                     @include vertical-gradient(#292929, #191919)
 844                     @include box-shadow(none)
 845
 846     // oe menu is the list of the buttons on the left side of the bar.
 847     // So why aren't the buttons oe_topbar_items ? This sad state of affairs
 848     // is a leftover from an uncomplete refactoring when the left and top menu
 849     // were merged. You are welcome to refactor and clean this up
 850     .oe_menu
 851         float: left
 852         padding: 0
 853         margin: 0
 854         font-size: 13px
 855         > li
 856             list-style-type: none
 857             padding: 0
 858             margin: 0
 859             float: left
 860             display: block
 861             color: #eeeeee
 862             > a
 863                 display: block
 864                 padding: 5px 10px 7px
 865                 line-height: 20px
 866                 height: 20px
 867                 text-decoration: none
 868                 color: #eee
 869                 vertical-align: top
 870                 text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 871                 @include transition(all 0.2s ease-out)
 872                 &:hover,
 873                     background: rgba(0,0,0,0.2)
 874                     text-shadow: black 0px 0px 3px
 875                     color: white
 876                     @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
 877             > .oe_active
 878                 background: rgba(0,0,0,0.30)
 879                 text-shadow: black 0px 0px 3px
 880                 @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
 881
 882     .oe_user_menu
 883         float: right
 884         padding: 0
 885         margin: 0
 886         li
 887             list-style-type: none
 888             float: left
 889         .oe_dropdown_menu
 890             right: -1px
 891
 892     .oe_systray > div
 893         float: left
 894         padding: 0 4px 0 4px
 895     .oe_systray
 896         float: right
 897
 898     // }}}
 899     // Webclient.leftbar {{{
 900     .oe_leftbar
 901         display: none
 902         width: 220px
 903         background: #f0eeee
 904         border-right: 1px solid $tag-border
 905         text-shadow: 0 1px 1px white
 906         padding-bottom: 16px
 907     a.oe_logo
 908         width: 220px
 909         display: block
 910         text-align: center
 911         height: 70px
 912         line-height: 70px
 913         img
 914             height: 40px
 915             width: 157px
 916             margin: 14px 0
 917     .oe_footer
 918         position: fixed
 919         bottom: 0
 920         padding: 4px 0
 921         background: #f0eeee
 922         width: 220px
 923         text-align: center
 924         a
 925             font-weight: 800
 926             font-family: serif
 927             font-size: 16px
 928             color: black
 929             span
 930                 color: #c81010
 931                 font-style: italic
 932     // }}}
 933     // Webclient.leftbar items {{{
 934
 935     .oe_secondary_menu_section
 936         font-weight: bold
 937         margin-left: 8px
 938         color: $link-color
 939     .oe_secondary_submenu
 940         padding: 2px 0 8px 0
 941         margin: 0
 942         width: 100%
 943         display: inline-block
 944         li
 945             position: relative
 946             margin: 0
 947             padding: 1px 0 1px 20px !important
 948             list-style-type: none
 949             a
 950                 display: block
 951                 color: #4c4c4c
 952                 padding: 2px 4px 2px 0
 953             .oe_menu_label
 954                 position: absolute
 955                 top: 1px
 956                 right: 1px
 957                 font-size: 10px
 958                 background: $link-color
 959                 color: white
 960                 padding: 2px 4px
 961                 margin: 1px 6px 0 0
 962                 border: 1px solid lightGray
 963                 text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 964                 @include radius(4px)
 965                 @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 966         .oe_menu_counter
 967             float: right
 968             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 969             margin: 1px
 970             padding: 1px 4px
 971             border: none
 972             &:hover
 973                 cursor: pointer
 974                 @include transform(scale(1.1))
 975         .oe_active
 976             border-top: 1px solid lightGray
 977             border-bottom: 1px solid #dedede
 978             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 979             @include box-shadow((inset 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 -1px 3px rgba(40, 40, 40, 0.2)))
 980             background: $link-color
 981             a
 982                 color: white
 983             .oe_menu_label
 984                 background: #eee
 985                 color: $link-color
 986                 text-shadow: 0 1px 1px white
 987                 @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
 988             .oe_menu_counter
 989                 background: #eee
 990                 color: $link-color
 991                 @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.2))
 992         .oe_menu_toggler:before
 993             width: 0
 994             height: 0
 995             display: inline-block
 996             content: "&darr"
 997             text-indent: -99999px
 998             vertical-align: top
 999             margin-left: -12px
1000             margin-top: 4px
1001             margin-right: 4px
1002             border-top: 4px solid transparent
1003             border-bottom: 4px solid transparent
1004             border-left: 4px solid #4c4c4c
1005             @include opacity(0.5)
1006         .oe_menu_opened:before
1007             margin-top: 6px
1008             margin-left: -16px
1009             margin-right: 4px
1010             border-left: 4px solid transparent
1011             border-right: 4px solid transparent
1012             border-top: 4px solid #4c4c4c
1013
1014     // }}}
1015     // About openerp {{{
1016     .oe_about
1017         background-color: white
1018         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
1019         @include radius(0 0 2px 2px)
1020         a
1021             color: $link-color
1022             &:hover
1023                 text-decoration: underline
1024             &:focus
1025                 outline: none
1026         .oe_logo
1027             margin-left: -6px
1028         .oe_bottom
1029             position: absolute
1030             top: 50%
1031             left: 0
1032             right: 0
1033             bottom: 0
1034             text-shadow: 0 1px 1px #999999
1035             @include vertical-gradient(#b41616, #600606)
1036             color: #eee
1037             padding: 0 16px
1038             @include radius(0 0 2px 2px)
1039             a
1040                 color: #eee
1041     // }}}
1042     // ActionManager {{{
1043     .oe_application
1044         width: 100%
1045         a
1046             color: $link-color
1047             &:hover
1048                 text-decoration: underline
1049         > div
1050             height: 100%
1051         .oe_breadcrumb_item:not(:last-child)
1052             display: inline-block
1053             max-width: 7em
1054             white-space: nowrap
1055             overflow: hidden
1056             text-overflow: ellipsis
1057     // }}}
1058     // ViewManager common {{{
1059     .oe_view_manager
1060         .oe_view_manager_body
1061             height: inherit
1062         .oe_view_manager_view_kanban
1063             height: inherit
1064
1065         table.oe_view_manager_header
1066             width: 100%
1067             table-layout: fixed
1068             .oe_header_row
1069                 //min-height: 26px
1070                 //line-height: 26px
1071                 clear: both
1072                 text-shadow: 0 1px 1px white
1073             .oe_header_row:last-child
1074                 td
1075                     padding-top: 0
1076             .oe_header_row:first-child
1077                 td
1078                     padding-top: 8px
1079             .oe_view_manager_sidebar
1080                 margin: 0px auto
1081                 text-align: center
1082             td
1083                 line-height: 26px
1084             h2
1085                 font-size: 18px
1086                 margin: 0
1087                 float: left
1088                 a
1089                     color: $link-color
1090             .oe_dropdown_menu
1091                 line-height: normal
1092             .oe_button_group
1093                 display: inline-block
1094                 border: 1px solid #ababab
1095                 @include radius(5px)
1096                 li
1097                     float: left
1098                     border-right: 1px solid #ababab
1099                     &:last-child
1100                         border: none
1101                 a
1102                     color: #4c4c4c
1103                     &:hover
1104                         text-decoration: none
1105                 .active
1106                     background: #999
1107                     @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
1108                     a
1109                         color: #fff
1110                         text-shadow: 0 1px 2px rgba(0,0,0,0.4)
1111             .oe_view_manager_buttons
1112                 white-space: nowrap
1113         // }}}
1114         // ViewManager.pager {{{
1115         .oe_view_manager_pager
1116             line-height: 26px
1117             .oe_list_pager_single_page .oe_pager_group
1118                 display: none
1119         .oe_pager_value
1120             float: left
1121             margin-right: 8px
1122         ul.oe_pager_group
1123             padding: 0
1124             margin: 0
1125         .oe_pager_group
1126             float: left
1127             height: 24px
1128             line-height: 24px
1129             display: inline-block
1130             border: 1px solid #ababab
1131             cursor: pointer
1132             @include radius(5px)
1133             li
1134                 height: 24px
1135                 line-height: 24px
1136                 padding: 0
1137                 margin: 0
1138                 list-style-type: none
1139                 float: left
1140                 border-right: 1px solid #ababab
1141                 &:last-child
1142                     border: none
1143             a
1144                 color: #4c4c4c
1145                 padding: 0 8px
1146                 &:hover
1147                     text-decoration: none
1148             .active
1149                 background: #999
1150                 @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
1151                 a
1152                     color: #fff
1153                     text-shadow: 0 1px 2px rgba(0,0,0,0.4)
1154         // }}}
1155         // ViewManager.switches {{{
1156         .oe_view_manager_switch
1157             padding: 0
1158             margin: 0 0 0 8px
1159             li
1160                 margin: 0
1161                 width: 24px
1162                 height: 24px
1163                 line-height: 16px
1164                 padding: 0
1165                 text-align: center
1166                 list-style-type: none
1167                 a
1168                     position: relative
1169             .oe_vm_switch_list:after, .oe_vm_switch_tree:after
1170                 padding: 2px
1171                 content: "i"
1172             .oe_vm_switch_form:after
1173                 content: "m"
1174             .oe_vm_switch_graph:after
1175                 font-family: "mnmliconsRegular" !important
1176                 font-size: 21px
1177                 font-weight: 300 !important
1178                 content: "}"
1179                 top: -2px
1180                 position: relative
1181             .oe_vm_switch_gantt:after
1182                 font-family: "mnmliconsRegular" !important
1183                 font-size: 21px
1184                 font-weight: 300 !important
1185                 content: "y"
1186                 top: -2px
1187                 position: relative
1188             .oe_vm_switch_calendar:after
1189                 content: "P"
1190             .oe_vm_switch_kanban:after
1191                 content: "k"
1192             .oe_vm_switch_diagram:after
1193                 content: "f"
1194         // }}}
1195     // ViewManager application {{{
1196     .oe_view_manager_current
1197         height: 100%
1198         > .oe_view_manager_header
1199             border-bottom: 1px solid #cacaca
1200             @include vertical-gradient(#fcfcfc, #dedede)
1201             @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
1202             .oe_header_row
1203                 td
1204                     padding: 8px
1205             .oe_header_row:first-child
1206                 td
1207                     padding-top: 8px
1208     // }}}
1209     // ViewManager inline {{{
1210     .oe_view_manager_inline, .oe_view_manager_inlineview
1211         height: 100%
1212         > .oe_view_manager_header
1213             display: none
1214     // }}}
1215     // Viewmanager popup {{{
1216     .oe_popup_form > .oe_formview > .oe_form_pager
1217         display: none !important
1218     // }}}
1219     // SearchView {{{
1220     .oe_searchview
1221         cursor: text
1222         position: relative
1223         float: right
1224         padding: 1px 0
1225         line-height: 18px
1226         width: 400px
1227         border: 1px solid #ababab
1228         background: white
1229         @include radius(13px)
1230         @include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset)
1231         input, textarea
1232             padding: 3px
1233             height: 14px
1234             font-size: 12px
1235             line-height: 18px
1236         &.oe_focused
1237             border-color: $tag-border-selected
1238             @include box-shadow(0 1px 2px $tag-border-selected inset)
1239         .oe_searchview_clear
1240             cursor: pointer
1241             position: absolute
1242             top: 0
1243             right: 18px
1244             width: 15px
1245             height: 100%
1246             background: url(../img/search_reset.gif) center center no-repeat
1247         .oe_searchview_unfold_drawer
1248             position: absolute
1249             top: 0
1250             right: 0
1251             height: 100%
1252             padding: 0 7px 0 4px
1253             color: #ccc
1254             cursor: pointer
1255             &:hover
1256                 color: #999
1257             &:before
1258                 position: absolute
1259                 top: 10px
1260                 right: 7px
1261                 width: 0
1262                 height: 0
1263                 display: inline-block
1264                 content: ""
1265                 vertical-align: top
1266                 border-top: 5px solid #4C4C4C
1267                 border-left: 5px solid transparent
1268                 border-right: 5px solid transparent
1269                 @include opacity()
1270
1271         .oe_searchview_search
1272             @include text-to-icon("r", #a3a3a3)
1273             @include box-shadow(none)
1274             @include radius(0)
1275             position: absolute
1276             left: 3px
1277             top: 1px
1278             padding: 0
1279             border: none
1280             background: transparent
1281
1282         .oe_searchview_facets
1283             min-height: 22px
1284             margin-left: 15px
1285             *
1286                 vertical-align: top
1287                 display: inline-block
1288                 line-height: 17px
1289             .oe_searchview_facet
1290                 height: 18px
1291                 margin: 1px 0
1292                 font-size: 11px
1293                 &:focus
1294                     outline: none
1295             .oe_searchview_input
1296                 padding: 0 0 0 6px
1297                 font-size: 12px
1298                 height: 16px
1299                 margin-top: 3px
1300                 &:focus
1301                     outline: none
1302             .oe_searchview_facet
1303                 position: relative
1304                 cursor: pointer
1305                 padding: 0
1306                 -webkit-font-smoothing: auto
1307                 // spacing for opera, FF
1308                 &:focus
1309                     border-color: $tag-border-selected
1310                     @include box-shadow(0 0 3px 1px $tag-border-selected)
1311                 .oe_facet_values
1312                     background: #f0f0fa
1313                     @include radius(0 3px 3px 0)
1314                 .oe_facet_category, .oe_facet_value
1315                     height: 18px
1316                     padding: 0 4px
1317                 .oe_facet_category
1318                     color: white
1319                     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
1320                 .oe_facet_category.oe_i
1321                     font-size: 16px
1322                 .oe_facet_value
1323                     border-left: 1px solid $tag-border
1324                     text-shadow: 0 1px 1px white
1325                     color: #4C4C4C
1326                     &:last-child
1327                         padding-right: 16px
1328                 .oe_facet_remove
1329                     position: absolute
1330                     top: 3px
1331                     right: 3px
1332                     color: #8786b7
1333                     line-height: 8px
1334                     width: 12px
1335                     height: 12px
1336                     padding-top: 1px
1337                     text-align: center
1338                     font-weight: bold
1339                     cursor: pointer
1340                     text-shadow: 0 1px 1px white
1341                     &:hover
1342                         color: white
1343                         background: #8786b7
1344                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
1345                         @include radius(2px)
1346         &.oe_searchview_open_drawer
1347             .oe_searchview_drawer
1348                 display: block
1349
1350         .oe_searchview_drawer
1351             position: absolute
1352             z-index: 100
1353             // detach drawer from field slightly
1354             margin-top: 4px
1355             top: 100%
1356             right: -1px
1357             background-color: white
1358             min-width: 100%
1359             display: none
1360             border: 1px solid $tag-border
1361             text-align: left
1362             @include radius(4px)
1363             @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
1364             > div
1365                 border-top: 1px solid #ccc
1366                 margin: 0
1367                 padding: 8px
1368             > div:first-child
1369                 border-top: none
1370                 margin: 0
1371             h3
1372                 margin: 8px 4px 4px 12px
1373                 color: $section-title-color
1374                 font-size: 13px
1375             h4, h4 *
1376                 margin: 0
1377                 cursor: pointer
1378                 font-weight: normal
1379                 display: inline-block
1380                 &:hover
1381                     background-color: $hover-background
1382             h4:before
1383                 content: "▸ "
1384                 color: #a3a3a3
1385             button
1386                 margin: 4px 0
1387             .button
1388                 border: none
1389                 background: transparent
1390                 padding: 0 2px
1391                 @include box-shadow(none)
1392                 @include radius(0)
1393             .oe_searchview_section
1394                 display: table
1395                 width: 100%
1396                 > div
1397                     @include box-sizing(border)
1398                     display: table-cell
1399                     width: 50%
1400                 ul
1401                     margin: 0 8px 8px
1402                     padding: 0
1403                     list-style: none
1404                 li
1405                     list-style: none
1406                     padding: 2px 4px 2px 20px
1407                     line-height: 14px
1408                     color: inherit
1409                     cursor: pointer
1410                     position: relative
1411                     &.oe_selected:before
1412                         content: "W"
1413                         font-family: "entypoRegular" !important
1414                         font-size: 24px
1415                         font-weight: 300 !important
1416                         color: #a3a3a3
1417                         position: absolute
1418                         left: 4px
1419                         top: -2px
1420                     // after oe_selected so background color is not overridden
1421                     &:hover
1422                         background-color: $hover-background
1423             form
1424                 margin-left: 12px
1425                 p
1426                     margin: 4px 0
1427                     line-height: 18px
1428                 button
1429                     margin: 0 0 8px 0
1430             .oe_searchview_custom
1431                 padding: 0 8px 8px 8px
1432                 form
1433                     display: none
1434                 li
1435                     cursor: pointer
1436                     position: relative
1437                     line-height: 14px
1438                     padding: 2px 4px 2px 20px
1439                     &:hover
1440                         background-color: $hover-background
1441                     button
1442                         position: absolute
1443                         top: 0
1444                         right: 5px
1445             .oe_searchview_dashboard
1446                 form
1447                     display: none
1448                     margin-top: 2px
1449
1450             .oe_searchview_advanced
1451                 form
1452                     display: none
1453                     margin-top: 8px
1454                 button.oe_add_condition:before
1455                     content: "Z"
1456                     font-family: "entypoRegular" !important
1457                     font-size: 24px
1458                     font-weight: 300 !important
1459                     margin-right: 4px
1460                 ul
1461                     list-style: none
1462                     padding: 0
1463                 li
1464                     position: relative
1465                     list-style: none
1466                     margin: 0
1467                     white-space: nowrap
1468                     &:first-child .searchview_extended_prop_or
1469                         visibility: hidden
1470                 .searchview_extended_prop_or
1471                     opacity: 0.5
1472                     margin-left: -14px
1473             .oe_opened
1474                 h4:before
1475                     content: "▾ "
1476                     position: relative
1477                     top: -1px
1478                 form
1479                     display: block
1480
1481             // delete buttons
1482             .oe_searchview_custom_delete, .searchview_extended_delete_prop
1483                 display: inline-block
1484                 width: 12px
1485                 height: 12px
1486                 line-height: 12px
1487                 padding: 1px
1488                 color: #8786b7
1489                 line-height: 8px
1490                 text-align: center
1491                 font-weight: bold
1492                 text-shadow: 0 1px 1px white
1493                 &:hover
1494                     text-decoration: none
1495                     color: white
1496                     background: #8786b7
1497                     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
1498                     @include radius(2px)
1499             .oe_searchview_custom_delete
1500                 display: none
1501                 position: absolute
1502                 bottom: 1px
1503                 right: 4px
1504             .oe_searchview_custom_private, .oe_searchview_custom_public
1505                 &:hover
1506                     .oe_searchview_custom_delete
1507                         display: inline-block
1508             .oe_searchview_custom_public:after
1509                 content: ","
1510                 font-family: "entypoRegular" !important
1511                 font-size: 22px
1512                 font-weight: 300 !important
1513                 margin: 0 0 0 4px
1514                 padding: 0
1515
1516
1517     // }}}
1518     // Views Common {{{
1519     .oe_view_nocontent
1520         padding: 15px
1521         margin-top: 0
1522         color: #777777
1523         font-size: 125%
1524         max-width: 700px
1525         .oe_view_nocontent_create
1526             background: transparent url(/web/static/src/img/view_empty_arrow.png) no-repeat 7px 0
1527             margin-top: 0
1528             padding-top: 35px
1529             min-height: 28px
1530             color: #4c4c4c
1531         > p
1532             padding-left: 95px
1533         .oe_empty_custom_dashboard
1534             background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0
1535             margin-top: -15px
1536             padding: 100px 0 0 137px
1537             min-height: 327px
1538             margin-left: -15px
1539
1540     // }}}
1541     // FormView.base and dynamic tags {{{
1542     .oe_formview
1543         background: white
1544     .oe_form_dropdown_section
1545         position: relative
1546         display: inline-block
1547     .oe_form_invalid
1548         input, select, textarea
1549             background-color: #F66 !important
1550             border: 1px solid #D00 !important
1551     .oe_view_manager_current .oe_form_editable
1552         .oe_highlight
1553             color: #404040
1554             background: none
1555         button.oe_highlight
1556             @include vertical-gradient(#efefef, #d8d8d8)
1557             @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
1558         button.oe_highlight:active
1559             @include vertical-gradient(#e3e3e3, #f6f6f6)
1560             @include box-shadow(none)
1561         button.oe_highlight:hover
1562             @include vertical-gradient(#f6f6f6, #e3e3e3)
1563             @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
1564     .oe_form_invisible
1565         display: none !important
1566     .oe_form_readonly
1567         .oe_edit_only, .oe_form_field:empty
1568             display: none !important
1569         .oe_form .oe_form_field_date
1570             width: auto
1571     // Sheet and padding
1572     .oe_form_nosheet
1573         margin: 16px
1574         > header
1575             margin: -16px -16px 0 -16px
1576             padding: 0
1577     .oe_form_sheetbg
1578         padding: 16px 0
1579     .oe_form_sheet_width
1580         min-width: 650px
1581         max-width: $sheet-max-width
1582         margin: 0 auto
1583     .oe_form_sheet
1584         background: white
1585         min-height: 330px
1586         padding: 16px
1587     // Sheet inline mode
1588     .oe_application
1589         .oe_form_sheetbg
1590             background: url(/web/static/src/img/form_sheetbg.png)
1591             border-bottom: 1px solid #ddd
1592         .oe_form_sheet
1593             border: 1px solid #c8c8d3 //$tag-border
1594             @include box-shadow(0 4px 20px rgba(0,0,0,0.15))
1595             .ui-tabs
1596                 margin: 0 -16px
1597             .oe_notebook_page
1598                 padding: 0 16px
1599     // }}}
1600     // FormView.custom tags and classes {{{
1601     .oe_form
1602         header
1603             position: relative
1604             border-bottom: 1px solid #cacaca
1605             padding-left: 2px
1606             @include vertical-gradient(#fcfcfc, #dedede)
1607             > span
1608                 margin-left: 4px
1609             ul
1610                 display: inline-block
1611                 float: right
1612             .oe_form_button
1613                 margin: 3px 2px 1px
1614             .oe_tags
1615                 margin: 5px 0 0 5px
1616                 width: 400px
1617                 padding-bottom: 0
1618         div.oe_chatter
1619             min-width: 650px
1620             max-width: $sheet-max-width
1621             margin: 0 auto
1622             padding: 16px 0 48px
1623         .oe_grey
1624             color: #aaa
1625             max-width: 650px
1626             margin: 0 0 10px 0
1627         div.oe_form_configuration
1628             p, ul, ol
1629                 color: #aaa
1630                 max-width: 650px
1631             label
1632                 min-width: 150px
1633             .oe_form_group_cell_label
1634                 padding: 1px 0
1635             .oe_form_group_cell div div
1636                 padding: 1px 0
1637         .oe_subtotal_footer
1638             width: 1% !important
1639             td.oe_form_group_cell
1640                 text-align: right
1641                 padding: 0 !important
1642             td.oe_form_group_cell_label
1643                 border-right: none
1644             .oe_subtotal_footer_separator
1645                 width: 108px
1646                 border-top: 1px solid #cacaca
1647                 margin-top: 4px
1648                 padding-top: 4px
1649                 font-weight: bold
1650                 font-size: 18px
1651             label:after
1652                 content: ":"
1653             label.oe_subtotal_footer_separator
1654                 font-weight: bold !important
1655                 padding: 2px 11px 2px 0px !important
1656             label.oe_form_label_help
1657                 font-weight: normal
1658
1659     // }}}
1660     // FormView.group {{{
1661     .oe_form
1662         .oe_form_button
1663             margin: 2px
1664         td.oe_form_group_cell_label
1665             border-right: 1px solid #ddd
1666             padding: 2px 0px
1667             label
1668                 line-height: 18px
1669                 display: block
1670                 min-width: 140px
1671         td.oe_form_group_cell + .oe_form_group_cell
1672             padding: 2px 0 2px 8px
1673         .oe_form_group
1674             width: 100%
1675             margin: 9px 0 9px 0
1676             .oe_form_group_cell.oe_group_right
1677                 padding-left: 20px
1678     // }}}
1679     // FormView.label {{{
1680     .oe_form
1681         .oe_form_label_help[for], .oe_form_label[for]
1682             font-weight: bold
1683             white-space: nowrap
1684             padding-right: 8px
1685             span
1686                 font-size: 80%
1687                 color: darkGreen
1688                 vertical-align: top
1689                 position: relative
1690                 top: -4px
1691                 padding: 0 2px
1692     // }}}
1693     // FormView.separator {{{
1694     .oe_horizontal_border
1695         border-bottom: 1px solid black
1696     .oe_horizontal_separator
1697         font-weight: bold
1698         font-size: 20px
1699         margin: 15px 0px 10px 0px
1700         color: $section-title-color
1701     .oe_horizontal_separator:empty
1702         height: 5px
1703     .oe_vertical_separator
1704         border-left: 1px solid #666
1705         padding: 0 4px 0 4px
1706     // }}}
1707     // FormView.progressbar {{{
1708     .oe_form_field_progressbar
1709         display: inline-block
1710         min-width: 70px
1711     .oe_form_field_progressbar.ui-progressbar
1712         height: 22px
1713         font-size: 10px
1714         @include box-sizing(border)
1715         border: 1px solid #999
1716         @include radius(3px)
1717         background: white
1718         min-width: 50px
1719         span
1720             position: absolute
1721             margin-left: 10px
1722             font-weight: bold
1723         .ui-widget-header
1724             background: #cccccc url(/web/static/lib/jquery.ui/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x
1725     // }}}
1726     // FormView.fields {{{
1727     .oe_form
1728         .oe_form_field_text
1729             width: 100%
1730         .oe_form_field_char input,
1731         .oe_form_field_url input,
1732         .oe_form_field_email input,
1733         .oe_form_field_text textarea,
1734         .oe_form_field_selection select
1735             width: 100%
1736         .oe_form_field_text.oe_inline, .oe_form_field_text.oe_inline > textarea
1737             width: 500px
1738         h1, h2, h3, h4, h5, h6
1739             margin: 0 0 4px 0
1740             input
1741                 height: inherit !important
1742                 font-size: inherit
1743         .oe_form_field
1744             width: 100%
1745             display: inline-block
1746             padding: 2px 2px 2px 0px
1747             input
1748                 margin: 0px
1749         input[type="text"], input[type="password"], input[type="file"], select
1750             height: 22px
1751             padding-top: 2px
1752         input[type="text"], input[type="password"], input[type="file"], select, textarea
1753             @include box-sizing(border)
1754             background: white
1755             min-width: 60px
1756             color: #1f1f1f
1757         input[readonly], select[readonly], textarea[readonly], input[disabled], select[disabled]
1758             background: #E5E5E5 !important
1759             color: #666
1760         textarea[disabled]
1761             border: none
1762             padding-left: 8px
1763             @include box-shadow(none)
1764             @include radius(0px)
1765         textarea.oe_inline[disabled]
1766             border-left: 8px solid #eee
1767         .oe_form_field_url button img
1768             vertical-align: top
1769         .oe_form_field_date,
1770         .oe_form_field_datetime
1771             white-space: nowrap
1772         .oe_form_field_boolean
1773             padding-top: 4px
1774             width: auto
1775         .oe_datepicker_container
1776             display: none
1777         .oe_datepicker_root
1778             display: inline-block
1779         .oe_form_required
1780             input:not([disabled]), select:not([disabled]), textarea:not([disabled])
1781                 background-color: #D2D2FF !important
1782         .oe_form_invalid
1783             input, select, textarea
1784                 background-color: #F66 !important
1785                 border: 1px solid #D00 !important
1786         .oe_input_icon
1787             cursor: pointer
1788             margin: 3px 0 0 -21px
1789             vertical-align: top
1790         .oe_input_icon_disabled
1791             position: absolute
1792             cursor: default
1793             opacity: 0.5
1794             filter: alpha(opacity=50)
1795             right: 5px
1796             top: 3px
1797         .oe_form_field_with_button.oe_no_button > .oe_button
1798             display: none
1799         .oe_form_field_with_button:not(.oe_no_button)
1800             > .oe_button
1801                 float: right
1802                 @include radius(0)
1803                 border-bottom-left-radius: 0px
1804                 height: 22px
1805         .oe_form_field_with_button
1806             input
1807                 width: 100%
1808             > div
1809                 position: relative
1810                 overflow: hidden
1811         .oe_form_field_html
1812             position: relative
1813             width: 600px
1814             margin-left: 130px
1815             margin-top: 32px
1816             margin-bottom: 32px
1817             text-align: justify
1818
1819     .oe_form_editable
1820         .oe_form
1821             .oe_form_field_integer
1822                 width: 6em !important
1823             .oe_form_field_float
1824                 width: 7em !important
1825             .oe_form_field_date
1826                 width: 7.5em !important
1827             .oe_form_field_datetime
1828                 width: 11.5em !important
1829     // }}}
1830     // FormView.fields_binary {{{
1831     /* http://www.quirksmode.org/dom/inputfile.html
1832      * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
1833      */
1834     .oe_hidden_input_file
1835         // Position: relative is used for the hidden input[type=file]
1836         // Do not remove it anymore !
1837         position: relative
1838         input.oe_form_binary_file
1839             z-index: 0
1840             line-height: 0
1841             font-size: 12px
1842             position: absolute
1843             top: 1px
1844             left: 0
1845             right: 0
1846             opacity: 0
1847             filter: alpha(opacity = 0)
1848             -ms-filter: "alpha(opacity=0)"
1849             margin: 0
1850             padding: 0
1851     .oe_form
1852         .oe_form_field_image
1853             padding: 0
1854             position: relative
1855             display: inline-block
1856             width: auto
1857             vertical-align: top
1858             .oe_form_field_image_controls
1859                 position: absolute
1860                 top: 1px
1861                 padding: 4px
1862                 width: 100%
1863                 display: none
1864                 text-align: center
1865                 color: #eee
1866                 background: rgba(37,37,37,0.9)
1867                 @include radius(3px 3px 0 0)
1868                 @include box-sizing(border)
1869             &:hover .oe_form_field_image_controls
1870                 display: block
1871     // }}}
1872     // FormView.many2one {{{
1873     .oe_form_field_many2one
1874         td:first-child
1875             position: relative
1876         span.oe_m2o_drop_down_button
1877             position: absolute
1878             top: 2px
1879             right: 0px
1880         .oe_m2o_cm_button
1881             line-height: 14px
1882             float: right
1883             padding-left: 2px
1884     &.ui-autocomplete
1885         li.oe_m2o_dropdown_option a
1886             font-style: italic
1887             padding-left: 2em
1888         li:not(.oe_m2o_dropdown_option) + li.oe_m2o_dropdown_option
1889             margin-top: 10px
1890     // }}}
1891     // FormView.fieldstatus {{{
1892     ul.oe_form_status, ul.oe_form_status_clickable
1893         display: inline-block
1894         margin: 0
1895         padding: 0 18px 0 0
1896         li
1897             display: inline-block
1898             list-style-type: none
1899             // It is probably a bad idea to modify this margin
1900             margin: 0 -18px 0 0
1901             padding: 0
1902             @include vertical-gradient(#fcfcfc, #dedede)
1903             &:first-child .label
1904                 border-left: 1px solid #cacaca
1905                 padding-left: 14px
1906             &:last-child
1907                 border-right: 1px solid #cacaca
1908                 .label
1909                     padding-right: 14px
1910                 .arrow
1911                     display: none
1912             .label
1913                 color: #4c4c4c
1914                 text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede
1915                 padding: 7px
1916                 display: inline-block
1917                 padding-left: 24px
1918                 margin: 0
1919                 position: relative
1920             .arrow
1921                 width: 17px
1922                 display: inline-block
1923                 vertical-align: top
1924                 overflow: hidden
1925                 margin-left: -5px
1926                 span
1927                     position: relative
1928                     width: 24px
1929                     height: 24px
1930                     display: inline-block
1931                     margin-left: -12px
1932                     margin-top: 3px
1933                     box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2)
1934                     @include skew-gradient(#fcfcfc, #dedede)
1935                     @include radius(3px)
1936                     @include transform(rotate(45deg))
1937         li.oe_active
1938             @include vertical-gradient(#729fcf, #3465a4)
1939             .arrow span
1940                 @include skew-gradient(#729fcf, #3465a4)
1941             .label
1942                 color: white
1943                 text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
1944     ul.oe_form_status_clickable
1945         li
1946             cursor: pointer
1947             &:hover
1948                 @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
1949                 .label
1950                     text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede
1951                 .arrow span
1952                     @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
1953             .label
1954                 color: $link-color
1955         li.oe_active
1956             &:hover
1957                 @include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
1958                 .label
1959                     text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
1960                 .arrow span
1961                     @include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
1962     // }}}
1963     // FormView.one2many {{{
1964     .oe_form .oe_form_field_one2many > .oe_view_manager
1965         .oe_list_pager_single_page
1966             display: none
1967     .oe_form_field_one2many,.oe_form_field_many2many
1968         // TODO: oe_form_field_one2many_list?
1969         > .oe_view_manager
1970             .oe_list_pager_single_page
1971                 display: none !important
1972         .oe_form_field_one2many_list_row_add
1973             font-weight: bold
1974         .oe_list_content
1975             > thead
1976                 border-bottom: 1px
1977             > tbody
1978                 tr:nth-child(odd)
1979                     background: transparent
1980         .oe_list .oe_list_edit_row_save
1981             background: url(/web/static/src/img/iconset-b-remove.png) 50% 50% no-repeat
1982             &:before
1983                 visibility: hidden
1984
1985         &> .oe_view_manager
1986             .oe_header_row_top
1987                 display: none
1988             .oe_view_manager_header2
1989                 td
1990                     padding: 0px 8px
1991                     line-height: 16px
1992                     .oe_i
1993                         font-size: 13px
1994                     .oe_pager_group
1995                         height: auto
1996                         line-height: 16px
1997                         li
1998                             height: auto
1999                             line-height: 16px
2000         .oe_list_buttons.oe_editing .oe_list_save
2001             // keep "save row" button hidden in o2m
2002             visibility: hidden
2003     .oe_form_editable
2004         .oe_list_editable
2005             .oe_list_content
2006                 td.oe_required
2007                     background-color: #d2d2ff
2008                 td.oe_readonly
2009                     background-color: #eee
2010
2011     $row-height: 27px
2012     .oe_list_editable
2013         .oe_list_content
2014             td.oe_list_field_cell
2015                 padding: 4px 6px 3px 6px
2016     .oe_list.oe_list_editable
2017         td.oe_list_record_delete
2018             position: absolute
2019     .oe_list.oe_list_editable.oe_editing
2020         .oe_m2o_drop_down_button
2021             top: 5px
2022         .oe_m2o_cm_button
2023             display: none
2024         .oe_form_field
2025             input, textarea
2026                 height: $row-height
2027             input, textarea
2028                 @include radius(0)
2029                 border: 1px solid #aaf
2030                 margin: 0
2031             &.oe_form_field_float,&.oe_form_view_integer
2032                 input
2033                     text-align: right
2034                     width: 100%
2035             &.oe_form_field_datetime,&.oe_form_field_date
2036                 > span
2037                     width: 100%
2038                 input.oe_datepicker_master
2039                     width: 100% !important
2040             .oe_form_field_float,.oe_form_view_integer,&.oe_form_field_datetime,&.oe_form_field_date
2041                 min-width: 0 !important
2042                 max-width: none !important
2043     // }}}
2044     // FormView.many2many {{{
2045     .oe_form .oe_form_field_many2many > .oe_list
2046         .oe_list_pager_single_page
2047             display: none
2048     // }}}
2049     // ListView {{{
2050     .oe_list_buttons
2051         .oe_alternative
2052             visibility: hidden
2053         .oe_list_save, .oe_list_discard
2054             display: none
2055         &.oe_editing
2056             .oe_list_add
2057                 display: none
2058             .oe_list_save
2059                 display: inline-block
2060             .oe_list_discard
2061                 display: inline
2062             .oe_alternative
2063                 visibility: visible
2064
2065     .oe_list
2066         position: relative
2067         .oe_form
2068             .oe_form_nosheet
2069                 margin: 0 // FIXME: either class or border should not be by default
2070                 padding: 0
2071                 border: none
2072             .oe_form_field
2073                 width: auto
2074                 position: absolute
2075                 margin: 0 !important // dammit
2076                 padding: 0
2077         .oe_list_content .oe_group_header
2078             @include vertical-gradient(#fcfcfc, #dedede)
2079
2080     .oe_list_content
2081         width: 100%
2082         td:first-child, th:first-child
2083             &:after
2084                 border-width: 0
2085         td.oe_number
2086             text-align: right !important
2087             max-width: 100px
2088         > thead
2089             border-bottom: 2px solid #cacaca
2090             background: #eee
2091             vertical-align: top
2092             th
2093                 position: relative
2094         td, th
2095             padding: 3px 6px
2096             line-height: 18px
2097         th:after
2098             position: absolute
2099             right: 6px
2100             content: ""
2101             margin-top: 7px
2102             border-width: 0 4px 4px
2103             border-style: solid
2104             border-color: #000 transparent
2105             visibility: hidden
2106         th.sortup:after
2107             visibility: visible
2108             @include opacity(0.6)
2109         th.sortdown:after
2110             border-bottom: none
2111             border-left: 4px solid transparent
2112             border-right: 4px solid transparent
2113             border-top: 4px solid #000
2114             visibility: visible
2115             @include box-shadow(none)
2116             @include opacity(0.6)
2117         > tbody
2118             cursor: pointer
2119             > tr
2120                 height: $row-height
2121                 border-top: 1px solid #ddd
2122                 > td.oe_list_field_cell
2123                     padding: 3px 6px
2124                     white-space: pre-line
2125                 > td, > th
2126                     > button
2127                         border: none
2128                         background: transparent
2129                         padding: 0
2130                         @include box-shadow(none)
2131                 > td.oe_list_checkbox:first-child, th.oe_list_checkbox:first-child
2132                     width: 17px
2133                     &:after
2134                         border-width: 0
2135             > tr:nth-child(odd)
2136                 background-color: #f0f0fa
2137                 @include vertical-gradient(#f0f0fa, #eeeef6)
2138
2139         > tfoot
2140             border-top: 2px solid #cacaca
2141             border-bottom: 1px solid #cacaca
2142             background: #eee
2143             font-weight: bold
2144
2145
2146         .numeric
2147             text-align: right
2148             width: 82px
2149             input
2150                 text-align: right
2151         th.oe_list_header_handle
2152             font-size: 1px
2153             overflow: hidden
2154             text-indent: -9001px
2155         td.oe_list_field_handle
2156             width: 1em
2157             padding: 0 !important
2158             cursor: ns-resize
2159             .oe_list_handle
2160                 @include text-to-entypo-icon("}",#E0E0E0,18px)
2161                 margin-right: 7px
2162
2163     .oe_list_cannot_edit
2164         .oe_list_header_handle, .oe_list_field_handle
2165             display: none !important
2166             padding: 0 !important
2167     .oe_list_cannot_delete
2168         .oe_list_record_delete
2169             display: none !important
2170
2171     // }}}
2172     // Tree view {{{
2173     .tree_header
2174         background-color: #f0f0f0
2175         border-bottom: 1px solid #cacaca
2176         color: #4c4c4c
2177         padding: 5px
2178         height: 25px
2179         button
2180             float: right
2181             height: 27px
2182             margin-right: 5px
2183     .oe-treeview-table
2184         width: 100%
2185         background-color: white
2186         border-spacing: 0
2187         color: #4c4c4c
2188         th
2189             padding: 10px
2190             font-weight: bold
2191             background-color: #f0f0f0
2192             border-bottom: 2px solid #cacaca
2193
2194         td
2195             cursor: pointer
2196             vertical-align: middle
2197             text-align: left
2198             vertical-align: middle
2199             height: 20px
2200             padding-left: 4px
2201             padding-right: 4px
2202             border-right: 1px solid #e7e7e7
2203
2204         td.oe_number
2205             text-align: right !important
2206         tr
2207             border-bottom: 1px solid #d6d6d6
2208             &:hover
2209                 background-color: #e7e7e7
2210         span
2211             font-size: 90%
2212             font-weight: normal
2213             white-space: nowrap
2214             display: block
2215         .treeview-tr.oe-treeview-first
2216             background: transparent url(/web/static/src/img/expand.gif) 0 50% no-repeat
2217         .oe_open .treeview-tr.oe-treeview-first
2218             background-image: url(/web/static/src/img/collapse.gif)
2219         .treeview-tr.oe-treeview-first span, .treeview-td.oe-treeview-first span
2220             margin-left: 16px
2221
2222     // }}}
2223     // Debugging stuff {{{
2224     .oe_layout_debugging
2225         .oe_form_group
2226             outline: 2px dashed green
2227         .oe_form_group_cell
2228             outline: 1px solid blue
2229         .oe_form_group:hover, .oe_form_group_cell:hover
2230             outline-color: red
2231         .oe_form_group_row_incomplete > td:last-child:after
2232             content: "[Incomplete Row]"
2233             background: red
2234             padding: 2px
2235             font-weight: bold
2236             color: white
2237             float: right
2238         .oe_form_group_row_incomplete.oe_form_group_row_newline > td:last-child:after
2239             content: "[newline]"
2240     .oe_debug_view
2241         float: left
2242     .oe_debug_view_log
2243         font-size: 95%
2244     .oe_debug_view_log label
2245         display: block
2246         width: 49%
2247         text-align: right
2248         float: left
2249         font-weight: bold
2250         color: #009
2251     .oe_debug_view_log span
2252         display: block
2253         width: 49%
2254         float: right
2255         color: #333
2256     // }}}
2257 // Kitten Mode {{{
2258 .kitten-mode-activated
2259     background-image: url(http://placekitten.com/g/1365/769)
2260     background-size: cover
2261     background-attachment: fixed
2262     >*
2263         opacity: 0.70
2264
2265 // }}}
2266
2267 // The jQuery-ui overlay and Autocomplete are outside the .openerp div, please don't add indentation !!!
2268 div.ui-widget-overlay
2269     background: black
2270     @include opacity(0.3)
2271
2272 .ui-widget
2273     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
2274     color: #4c4c4c
2275     font-size: 13px
2276
2277 .ui-menu
2278     padding: 2px 0
2279     @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
2280     margin-top: 4px
2281     border: 1px solid $tag-border
2282     .ui-menu-item
2283         width: 100%
2284         padding: 0
2285         a
2286             padding: 1px 16px
2287         a.ui-corner-all
2288             @include radius(0)
2289         a.ui-state-active
2290             background: #f0f0fa
2291     .ui-menu-item a.ui-state-hover, .ui-menu-item a.ui-state-active
2292         background: $tag-bg-dark
2293         //color: #4c4c4c
2294         //@include vertical-gradient(#f0f0fa, #eeeef6)
2295
2296 .ui-corner-all
2297     @include radius(3px)
2298
2299 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
2300 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: