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