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