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, .oe_form > .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                 span
2152                     padding: 0px 6px
2153                 input
2154                     width: 100% !important
2155                     text-align: right
2156             &.oe_form_field_datetime,&.oe_form_field_date
2157                 input.oe_datepicker_master
2158                     width: 100% !important
2159             &.oe_form_field_reference
2160                 display: table
2161     .oe_list_group_name
2162         white-space: nowrap
2163     // }}}
2164     // FormView.many2many {{{
2165     .oe_form .oe_form_field_many2many > .oe_list
2166         .oe_list_pager_single_page
2167             display: none
2168     // }}}
2169     // ListView {{{
2170     .oe_list_buttons
2171         .oe_alternative
2172             visibility: hidden
2173         .oe_list_save, .oe_list_discard
2174             display: none
2175         &.oe_editing
2176             .oe_list_add
2177                 display: none
2178             .oe_list_save
2179                 display: inline-block
2180             .oe_list_discard
2181                 display: inline
2182             .oe_alternative
2183                 visibility: visible
2184
2185     .oe_list
2186         &.oe_cannot_edit
2187             .oe_list_header_handle, .oe_list_field_handle
2188                 display: none !important
2189                 padding: 0 !important
2190         &.oe_cannot_delete
2191             .oe_list_record_delete
2192                 display: none !important
2193
2194         .oe_form
2195             .oe_form_nosheet
2196                 margin: 0 // FIXME: either class or border should not be by default
2197                 padding: 0
2198                 border: none
2199             .oe_form_field
2200                 width: auto
2201                 position: absolute
2202                 margin: 0 !important // dammit
2203                 padding: 0
2204             .oe_form_field_boolean input
2205                 margin: 1px 0 0 10px !important
2206         .oe_list_content .oe_group_header
2207             @include vertical-gradient(#fcfcfc, #dedede)
2208
2209     .oe_list_content
2210         width: 100%
2211         td:first-child, th:first-child
2212             &:after
2213                 border-width: 0
2214         td.oe_number
2215             text-align: right !important
2216             max-width: 100px
2217         td.oe_list_field_date, th.oe_list_header_date
2218             min-width: 6em
2219         > thead
2220             border-bottom: 2px solid #cacaca
2221             background: #eee
2222             vertical-align: top
2223         td, th
2224             padding: 3px 6px
2225             line-height: 18px
2226         th.oe_sortable, th.oe_sortable div
2227             cursor: pointer
2228         th.oe_sortable div
2229             position: relative
2230         th.oe_sortable div:after
2231             margin-right: 6px
2232             content: ""
2233             margin-top: 7px
2234             border-width: 0 4px 4px
2235             border-style: solid
2236             border-color: #000 transparent
2237             visibility: hidden
2238         th.sortup div:after
2239             float: right
2240             visibility: visible
2241             @include opacity(0.6)
2242         .oe_list_header_many2many_tags
2243             min-width: 70px
2244         th.sortdown div:after
2245             float: right
2246             border-bottom: none
2247             border-left: 4px solid transparent
2248             border-right: 4px solid transparent
2249             border-top: 4px solid #000
2250             visibility: visible
2251             @include box-shadow(none)
2252             @include opacity(0.6)
2253         > tbody
2254             cursor: pointer
2255             > tr
2256                 height: $row-height
2257                 border-top: 1px solid #ddd
2258                 > td.oe_list_field_cell
2259                     padding: 3px 6px
2260                     white-space: pre-line
2261                 > td, > th
2262                     > button
2263                         border: none
2264                         background: transparent
2265                         padding: 0
2266                     > button.btn_txt
2267                         border: 1px solid rgba(0,0,0,0.4)
2268                         background: #e3e3e3
2269                         padding: 3px 12px
2270                 > td.oe_list_checkbox:first-child, th.oe_list_checkbox:first-child
2271                     width: 17px
2272                     &:after
2273                         border-width: 0
2274                 > td.oe_list_field_boolean input
2275                     @include opacity()
2276             > tr:nth-child(odd)
2277                 background-color: #f0f0fa
2278                 @include vertical-gradient(#f0f0fa, #eeeef6)
2279
2280         > tfoot
2281             border-top: 2px solid #cacaca
2282             border-bottom: 1px solid #cacaca
2283             background: #eee
2284             font-weight: bold
2285
2286
2287         .numeric
2288             text-align: right
2289             width: 82px
2290             input
2291                 text-align: right
2292         th.oe_list_header_handle
2293             font-size: 1px
2294             overflow: hidden
2295             text-indent: -9001px
2296         td.oe_list_field_handle
2297             width: 1em
2298             padding: 0 !important
2299             cursor: ns-resize
2300             .oe_list_handle
2301                 @include text-to-entypo-icon("}",#E0E0E0,18px)
2302                 margin-right: 7px
2303         .oe_list_field_progressbar progress
2304             width: 100%
2305     // }}}
2306     // Tree view {{{
2307     .tree_header
2308         background-color: #f0f0f0
2309         border-bottom: 1px solid #cacaca
2310         color: #4c4c4c
2311         padding: 5px
2312         height: 25px
2313         button
2314             float: right
2315             height: 27px
2316             margin-right: 5px
2317     .oe-treeview-table
2318         width: 100%
2319         background-color: white
2320         border-spacing: 0
2321         color: #4c4c4c
2322         th
2323             padding: 10px
2324             font-weight: bold
2325             background-color: #f0f0f0
2326             border-bottom: 2px solid #cacaca
2327
2328         td
2329             cursor: pointer
2330             vertical-align: middle
2331             text-align: left
2332             vertical-align: middle
2333             height: 20px
2334             padding-left: 4px
2335             padding-right: 4px
2336             border-right: 1px solid #e7e7e7
2337
2338         td.oe_number
2339             text-align: right !important
2340         tr
2341             border-bottom: 1px solid #d6d6d6
2342             &:hover
2343                 background-color: #e7e7e7
2344         span
2345             font-size: 90%
2346             font-weight: normal
2347             white-space: nowrap
2348             display: block
2349         .treeview-tr.oe-treeview-first
2350             background: transparent url(/web/static/src/img/expand.gif) 0 50% no-repeat
2351         .oe_open .treeview-tr.oe-treeview-first
2352             background-image: url(/web/static/src/img/collapse.gif)
2353         .treeview-tr.oe-treeview-first span, .treeview-td.oe-treeview-first span
2354             margin-left: 16px
2355     // }}}
2356     // Debugging stuff {{{
2357     .oe_layout_debugging
2358         .oe_form_group
2359             outline: 2px dashed green
2360         .oe_form_group_cell
2361             outline: 1px solid blue
2362         .oe_form_group:hover, .oe_form_group_cell:hover
2363             outline-color: red
2364         .oe_form_group_row_incomplete > td:last-child:after
2365             content: "[Incomplete Row]"
2366             background: red
2367             padding: 2px
2368             font-weight: bold
2369             color: white
2370             float: right
2371         .oe_form_group_row_incomplete.oe_form_group_row_newline > td:last-child:after
2372             content: "[newline]"
2373     .oe_debug_view
2374         float: left
2375     .oe_debug_view_log
2376         font-size: 95%
2377         line-height: 1.2em
2378     // }}}
2379     // Bootstrap HACKS {{{
2380     .navbar
2381         min-height: 32px
2382         margin-bottom: 0px
2383         border: none
2384         z-index: 1
2385         position: static
2386         background-color: #414141
2387         @include vertical-gradient(#646060, #262626)
2388     .navbar-default
2389         .navbar-nav
2390             li
2391                 a:hover,a:focus
2392                     background: rgba(0, 0, 0, 0.3)
2393             .open > a,a:hover,a:focus
2394                 background: rgba(0, 0, 0, 0.3) !important
2395             .dropdown > a .caret
2396                 border-top-color: #777 !important
2397                 border-bottom-color: #777 !important
2398     .navbar-nav
2399         li
2400             a
2401                 padding: 4px 32px 4px 12px
2402     .oe_navbar .dropdown-menu
2403         font-size: 13px
2404         padding: 4px 0
2405         background: #333333 !important
2406         background: rgba(37, 37, 37, 0.9) !important
2407         border-color: #999999
2408         border-color: rgba(0, 0, 0, 0.2)
2409         background-color: #414141
2410         text-shadow: none
2411         @include vertical-gradient(#646060, #262626)
2412         @include radius(3px)
2413         li
2414             a,a:hover,a:focus
2415                 color: #eeeeee
2416
2417     // Minimized unused white space and label weight for wizard popup
2418     .oe_view_manager_new .oe_form_nosheet
2419         margin-top: 8px
2420         .oe_form_label
2421             font-weight: normal
2422
2423     // Customize bootstrap3 for leftbar
2424     .nav
2425         li > a
2426             padding: 3px 4px 2px 18px
2427             color: #4c4c4c
2428         nav-pills.nav-stacked > li > ul
2429             padding-left: 16px
2430     .nav-pills > li.active,a.list-group-item.active
2431         > a
2432             background-color: #7c7bad
2433             color: white
2434             border-radius: 0
2435         a:hover,a:focus
2436             background-color: #7c7bad
2437         .badge
2438             background-color: white
2439             color: #7c7bad
2440             text-shadow: none
2441     .badge
2442         font-weight: normal
2443         font-size: 11px
2444         background-color: #7c7bad
2445
2446     // Customize for global tags
2447     button, body
2448         line-height: normal
2449     h1,h2
2450         font-weight: bold
2451     h3
2452         font-size: 1.17em
2453         font-weight: bold
2454     p
2455         display: block
2456         -webkit-margin-before: 1em
2457         -webkit-margin-after: 1em
2458         -webkit-margin-start: 0px
2459         -webkit-margin-end: 0px
2460     pre
2461         background-color: #FFFFFF
2462         border: none
2463         padding: 10px 0 3px 0
2464
2465
2466
2467     // Customize for chatter
2468     h5
2469         font-weight: bold
2470         font-size: smaller
2471     .oe_form .oe_subtype label, .oe_subtype label
2472         font-weight: normal
2473     .oe_msg_subtype_check
2474         margin: 3px 3px 0 !important
2475     // }}}
2476 // Customize for kanban tooltip
2477 .jqstooltip
2478     height: auto !important
2479     width: auto !important
2480     padding: 0
2481
2482 @-moz-document url-prefix()
2483     .openerp
2484         .oe_searchview .oe_searchview_search
2485             top: -1px
2486         .oe_form_field_many2one .oe_m2o_cm_button
2487             line-height: 18px
2488         .oe_webclient
2489             .oe_star_on, .oe_star_off
2490                 top: 0px
2491
2492 // Kitten Mode {{{
2493 .kitten-mode-activated
2494     background-size: cover
2495     background-attachment: fixed
2496     >*
2497         opacity: 0.70
2498 .loading-kitten
2499     @include radius(15px)
2500     @include box-shadow(0 0 5px 5px #999)
2501 // }}}
2502
2503 // jQueryUI top level {{{
2504 // The jQuery-ui overlay and Autocomplete are outside the .openerp div, please don't add indentation !!!
2505 div.ui-widget-overlay
2506     background: black
2507     @include opacity(0.3)
2508 // TODO: I think only the overlay is problematic, the other top level widgets should use $.fn.openerpClass()
2509 //       eg: $el.autocomplete().openerpClass();
2510 .ui-widget
2511     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
2512     color: #4c4c4c
2513     font-size: 13px
2514
2515 .ui-menu
2516     padding: 2px 0
2517     @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
2518     margin-top: 4px
2519     border: 1px solid $tag-border
2520     .ui-menu-item
2521         width: 100%
2522         padding: 0
2523         a
2524             padding: 1px 16px
2525         a.ui-corner-all
2526             @include radius(0)
2527         a.ui-state-active
2528             background: #f0f0fa
2529     .ui-menu-item a.ui-state-hover, .ui-menu-item a.ui-state-active
2530         background: $tag-bg-dark
2531         //color: #4c4c4c
2532         //@include vertical-gradient(#f0f0fa, #eeeef6)
2533
2534 .ui-corner-all
2535     @include radius(3px)
2536 // }}}
2537
2538 .openerp
2539     .db_option_table
2540         td
2541             padding-bottom: 10px !important
2542
2543 // Server side single forms {{{
2544 @mixin single-form($width: 400px)
2545     padding: 10px
2546     position: absolute
2547     left: 50%
2548     top: 50%
2549     width: $width
2550     /* Set margins to offset 50% of the w/h */
2551     margin-top: -($width / 2)
2552     margin-left: -($width / 2)
2553
2554 body.oe_single_form
2555     background: #eee url(/web/static/src/img/form_sheetbg.png)
2556     height: 100%
2557
2558     .oe_single_form_logo
2559         padding: 10px
2560         text-align: center
2561         margin-bottom: 10px
2562
2563     .oe_single_form_footer
2564         position: absolute
2565         bottom: -30px
2566         right: 0px
2567         width: 100%
2568         text-align: center
2569
2570     .oe_single_form_container
2571         @include single-form(400px)
2572
2573 // }}}
2574
2575 // Internet Explorer 9+ specifics {{{
2576 .openerp_ie
2577     .placeholder
2578         color: $tag-border !important
2579         font-style: italic !important
2580     .oe_form_binary_file
2581         width: 80px
2582     .oe_form_field_boolean input
2583         background: #fff
2584     .db_option_table .oe_form_field_selection
2585         width: auto
2586     input[type='checkbox']
2587         border: none
2588         background: none
2589         box-shadow: none
2590     .oe_logo
2591         img
2592             border: none
2593     .oe_header_row
2594         button.oe_highlight
2595             padding-top: 0
2596             padding-bottom: 0
2597     .oe_view_manager_view_kanban
2598         display: table-cell
2599     .oe_view_manager_buttons
2600         button.oe_write_full
2601             padding-top: 0
2602             padding-bottom: 0
2603         button.oe_highlight
2604             padding-top: 0
2605             padding-bottom: 0
2606         button .oe_form_button_edit
2607             padding-top: 0
2608             padding-bottom: 0
2609         button .oe_form_button_create
2610             padding-top: 0
2611             padding-bottom: 0
2612     .oe_kanban_image
2613         border: none
2614     .oe_msg_icon
2615         border: none
2616     .oe_form
2617         header
2618             ul
2619                 height: 29px
2620     .oe_attach
2621         filter: none
2622     .oe_link
2623         filter: none
2624     .oe_kanban_show_more
2625         clear: both
2626         text-align: center
2627     &.oe_kanban_grouped .oe_kanban_show_more .oe_button
2628         width: 100%
2629         padding: 3px 12px
2630
2631     .oe_form_buttons button
2632         padding-top: 0
2633         padding-bottom: 0
2634     .oe_sidebar button
2635         padding-top: 0
2636         padding-bottom: 0
2637     img
2638         border: none
2639     //buttons.
2640     .oe_dropdown_arrow
2641         line-height: 1.7em
2642     .oe_form_buttons, .oe_view_manager_buttons
2643         button
2644             line-height: 1.7em
2645         .oe_highlight
2646             line-height: 1.7em
2647     .oe_topbar
2648         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646060', endColorstr='#262626')
2649     .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error
2650         filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
2651     .oe_popup_form
2652         width: 99% !important
2653     .oe_form_label
2654         white-space: normal !important
2655     ul.oe_form_status, ul.oe_form_status_clickable
2656         li
2657             display: inline-block
2658             clear: both
2659             &:last-child
2660                 overflow: hidden
2661                 border-right: 1px solid #cacaca
2662                 > .label
2663                     padding-right: 14px
2664                     border-right: none
2665                 > .arrow
2666                     display: inline-block
2667                     opacity: 0
2668                     filter: alpha(opacity = 0)
2669                     border: none
2670                     width: 0
2671                     border-right: none
2672             > .label
2673                 border-bottom: 1px solid #cacaca
2674                 background: transparent
2675             > .arrow
2676                 span
2677                     background-color: #eeeeee !important
2678         li.oe_active
2679             > .label
2680                 border-bottom: 1px solid #729fcf
2681             > .arrow span
2682                 background-color: #729fcf !important
2683
2684     .oe_webclient
2685         height: auto !important
2686 // }}}
2687
2688 // @media print {{{
2689 @media print
2690     .openerp
2691         .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
2692             // We use !important here because jQuery adds @style = display: block on elements when using $.fn.show()
2693             display: none !important
2694         .oe_list_content
2695             button, input[type=checkbox]
2696                 visibility: hidden
2697         .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
2698             visibility: hidden
2699         a
2700             &.oe_m2o_cm_button, &.oe_e
2701                 visibility: hidden
2702         .oe_form
2703             .oe_form_field_date img, .oe_form_field_datetime img
2704                 visibility: hidden
2705         .oe_notebook > li.ui-tabs-selected
2706             display: block
2707         .oe_application
2708             .oe_form_sheet, .oe_form_sheetbg
2709                 border: 0px !important
2710                 box-shadow: 0px 0px 0px
2711                 .oe_list
2712                     overflow-x: visible
2713         .oe_view_manager_current > .oe_view_manager_header
2714             border: 0px !important
2715             box-shadow: 0px 0px 0px
2716         text-shadow: none
2717         .text-core .text-wrap .text-arrow
2718             background: none
2719         .openerp div.oe_mail_wall
2720             overflow: hidden !important
2721 // }}}
2722
2723 // End of customize
2724
2725 // Customize bootstrap3 for tooltip
2726 .tooltip
2727     padding: 0
2728     margin: 0
2729     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
2730     color: #4c4c4c
2731     font-size: 12px
2732     background: white
2733     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
2734     background-color: transparent
2735     z-index: 1800
2736     .tooltip-inner
2737         text-align: left !important
2738         max-width: 350px
2739         .oe_tooltip_string
2740             color: #FD5
2741             font-weight: bold
2742             font-size: 13px
2743         .oe_tooltip_help
2744             white-space: pre-wrap
2745         .oe_tooltip_technical
2746             padding: 0 0 4px 0
2747             margin: 5px 0 0 15px
2748             li
2749                 list-style: circle
2750         .oe_tooltip_technical_title
2751             font-weight: bold
2752         .oe_tooltip_close
2753             margin: -5px 0 0 2px
2754             cursor: default
2755             float: right
2756             color: white
2757             &:hover
2758                 color: #999
2759                 cursor: pointer
2760         .oe_tooltip_message
2761             max-width: 310px
2762
2763 // Hack for ui icon {{{
2764 .ui-icon
2765     width: 18px
2766     height: 18px
2767 // End hack}}}
2768
2769 // Customized modal according bootstrap3
2770 .modal
2771     .modal-header button.close
2772         border: none
2773         background: none
2774         padding: 1px
2775         height: 18px
2776         font-size: 20px
2777     .modal-footer
2778         text-align: left
2779     .oe_button
2780         margin: 0 4px 0 0
2781     .oe_act_window.modal-body
2782         padding: 0
2783
2784 .ui-datepicker
2785     z-index: 1500 !important
2786
2787 input[type="radio"], input[type="checkbox"]
2788     margin-right: 4px
2789     margin-left: 4px
2790
2791 .blockUI.blockOverlay
2792     background-color: black
2793     opacity: 0.6000000238418579
2794
2795
2796 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
2797 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: