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         > div
 848             height: 100%
 849             display: table
 850             width: 220px
 851             position: relative
 852             a.oe_logo
 853                 display: table-row
 854                 text-align: center
 855                 img
 856                     margin: 14px 0
 857                     border: 0
 858                 .oe_logo_edit
 859                     margin: 14px 0
 860                     position: absolute
 861                     top: 1px
 862                     padding: 4px
 863                     width: 100%
 864                     display: none
 865                     text-align: center
 866                     color: #eee
 867                     background: rgba(37,37,37,0.9)
 868                     @include box-sizing(border)
 869                 &:hover .oe_logo_edit_admin
 870                     display: block
 871             > div
 872                 display: table-row
 873                 height: 100%
 874                 > div
 875                     position: relative
 876                     height: 100%
 877                     > div.oe_secondary_menus_container
 878                         position: absolute
 879                         position: static\9
 880                         top: 0
 881                         bottom: 0
 882                         left: 0
 883                         right: 0
 884                         overflow-x: hidden
 885                         overflow-y: auto
 886             .oe_footer
 887                 background: #f0eeee
 888                 text-align: center
 889                 a
 890                     font-weight: bold
 891                     color: black
 892                     span
 893                         color: #a24689
 894     // }}}
 895     // Webclient.leftbar items {{{
 896
 897     .oe_secondary_menu_section
 898         font-weight: bold
 899         margin-left: 8px
 900         color: $link-color
 901     .oe_secondary_submenu
 902         margin-bottom: 10px !important
 903         line-height: 1.1em
 904         margin-top: 3px
 905         .oe_menu_text
 906             white-space: nowrap
 907             overflow: hidden
 908             display: inline-block
 909             text-overflow: ellipsis
 910             max-width: 85%
 911             margin-top: 1px
 912         .badge
 913             &:hover
 914                 cursor: pointer
 915                 @include transform(scale(1.1))
 916         .oe_menu_toggler:before
 917             width: 0
 918             height: 0
 919             display: inline-block
 920             content: "&darr"
 921             text-indent: -99999px
 922             vertical-align: top
 923             margin-left: -12px
 924             margin-top: 4px
 925             margin-right: 4px
 926             border-top: 4px solid transparent
 927             border-bottom: 4px solid transparent
 928             border-left: 4px solid #4c4c4c
 929             @include opacity(0.5)
 930         .oe_menu_opened:before
 931             margin-top: 6px
 932             margin-left: -16px
 933             margin-right: 4px
 934             border-left: 4px solid transparent
 935             border-right: 4px solid transparent
 936             border-top: 4px solid #4c4c4c
 937         .oe_secondary_submenu li
 938             margin-left: 20px
 939     // }}}
 940     // About openerp {{{
 941     .oe_about
 942         background-color: white
 943         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
 944         @include radius(0 0 2px 2px)
 945         a
 946             color: $link-color
 947             &:hover
 948                 text-decoration: underline
 949             &:focus
 950                 outline: none
 951         .oe_logo
 952             margin-left: -6px
 953         .oe_bottom
 954             text-shadow: 0 1px 1px #999999
 955             @include vertical-gradient(#b41616, #600606)
 956             color: #eee
 957             padding: 0 16px
 958             @include radius(0 0 2px 2px)
 959             a
 960                 color: #eee
 961     // }}}
 962     // ActionManager {{{
 963     a.oe_form_uri:hover
 964         text-decoration: underline
 965     .oe_application
 966         width: 100%
 967         height: 100%
 968         a
 969             color: $link-color
 970         > div
 971             position: relative
 972             height: 100%
 973             > .oe_view_manager
 974                 > .oe_view_manager_wrapper
 975                     display: table-row
 976                     height: 100%
 977                     > div
 978                         position: relative
 979                         height: 100%
 980                         > .oe_view_manager_body
 981                             position: absolute
 982                             position: static\9
 983                             top: 0
 984                             bottom: 0
 985                             left: 0
 986                             right: 0
 987                             overflow: auto
 988
 989
 990         .oe_breadcrumb_item:not(:last-child)
 991             max-width: 7em
 992             white-space: nowrap
 993             text-overflow: ellipsis
 994         .oe_breadcrumb_title > *
 995             display: inline-block
 996             overflow: hidden
 997             font-weight: bold
 998     // }}}
 999     // ViewManager common {{{
1000     .oe_view_manager
1001         display: table
1002         height: inherit
1003         width: 100%
1004         .oe_view_manager_view_kanban:not(:empty)
1005             height: 100%
1006         &[data-view-type=kanban]
1007             .oe_view_manager_body
1008                 display: table-row
1009
1010         table.oe_view_manager_header
1011             border-collapse: separate
1012             width: 100%
1013             table-layout: fixed
1014             .oe_header_row
1015                 //min-height: 26px
1016                 //line-height: 26px
1017                 clear: both
1018                 text-shadow: 0 1px 1px white
1019             .oe_header_row:last-child
1020                 td
1021                     padding-top: 0
1022             .oe_header_row:first-child
1023                 td
1024                     padding-top: 8px
1025             .oe_view_manager_sidebar
1026                 margin: 0px auto
1027                 text-align: center
1028                 .oe_dropdown_arrow:after
1029                     opacity: 0.9
1030             td
1031                 line-height: 26px
1032             h2
1033                 font-size: 18px
1034                 margin: 0
1035                 float: left
1036                 line-height: 30px
1037                 a
1038                     color: $link-color
1039             .oe_dropdown_menu
1040                 line-height: normal
1041             .oe_button_group
1042                 display: inline-block
1043                 border: 1px solid #ababab
1044                 @include radius(5px)
1045                 li
1046                     float: left
1047                     border-right: 1px solid #ababab
1048                     &:last-child
1049                         border: none
1050                 a
1051                     color: #4c4c4c
1052                     &:hover
1053                         text-decoration: none
1054                 .active
1055                     background: #999
1056                     @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
1057                     a
1058                         color: #fff
1059                         text-shadow: 0 1px 2px rgba(0,0,0,0.4)
1060             .oe_view_manager_buttons
1061                 white-space: nowrap
1062         // }}}
1063         // ViewManager.switches {{{
1064         .oe_view_manager_switch
1065             padding: 0
1066             margin: 0 0 0 8px
1067             li
1068                 margin: 0
1069                 width: 24px
1070                 height: 24px
1071                 line-height: 16px
1072                 padding: 0
1073                 text-align: center
1074                 list-style-type: none
1075                 a
1076                     position: relative
1077             .oe_vm_switch_list:after, .oe_vm_switch_tree:after
1078                 padding: 2px
1079                 content: "i"
1080             .oe_vm_switch_form:after
1081                 content: "m"
1082             .oe_vm_switch_graph:after
1083                 font-family: "mnmliconsRegular" !important
1084                 font-size: 21px
1085                 font-weight: 300 !important
1086                 content: "}"
1087                 top: -2px
1088                 position: relative
1089             .oe_vm_switch_gantt:after
1090                 font-family: "mnmliconsRegular" !important
1091                 font-size: 21px
1092                 font-weight: 300 !important
1093                 content: "y"
1094                 top: -2px
1095                 position: relative
1096             .oe_vm_switch_calendar:after
1097                 content: "P"
1098             .oe_vm_switch_kanban:after
1099                 content: "k"
1100             .oe_vm_switch_diagram:after
1101                 content: "f"
1102         // }}}
1103     // List pager {{{
1104     .oe_list_pager
1105         line-height: 26px
1106     .oe_pager_value
1107         float: left
1108         margin-right: 8px
1109     ul.oe_pager_group
1110         padding: 0
1111         margin: 0
1112     .oe_pager_group
1113         float: left
1114         height: 24px
1115         line-height: 24px
1116         display: inline-block
1117         border: 1px solid #ababab
1118         cursor: pointer
1119         @include radius(5px)
1120         li
1121             height: 24px
1122             line-height: 24px
1123             padding: 0
1124             margin: 0
1125             list-style-type: none
1126             float: left
1127             border-right: 1px solid #ababab
1128             &:last-child
1129                 border: none
1130         a
1131             color: #4c4c4c
1132             padding: 0 8px
1133             &:hover
1134                 text-decoration: none
1135         .active
1136             background: #999
1137             @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
1138             a
1139                 color: #fff
1140                 text-shadow: 0 1px 2px rgba(0,0,0,0.4)
1141     .oe_list_pager.oe_list_pager_single_page .oe_pager_group
1142         display: none
1143     // }}}
1144     // ViewManager application {{{
1145     .oe_view_manager_current
1146         height: 100%
1147         > .oe_view_manager_header
1148             border-bottom: 1px solid #cacaca
1149             @include vertical-gradient(#fcfcfc, #dedede)
1150             @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
1151             .oe_header_row
1152                 td
1153                     padding: 8px
1154             .oe_header_row:first-child
1155                 td
1156                     padding-top: 8px
1157     // }}}
1158     // ViewManager inline {{{
1159     .oe_view_manager_inline, .oe_view_manager_inlineview
1160         height: 100%
1161         > .oe_view_manager_header
1162             display: none
1163     // }}}
1164     // FormPopup {{{
1165     .oe_popup_form
1166         .oe_formview .oe_form_pager
1167             display: none !important
1168         // Customize label weight for popup wizard appear from another wizard according bootstrap3
1169         table label
1170             font-weight: normal
1171         // End of customize
1172     .oe_popup_list_pager
1173         float: right
1174     // }}}
1175     // SearchView {{{
1176     .oe_searchview
1177         cursor: text
1178         position: relative
1179         float: right
1180         padding: 1px 0
1181         line-height: 18px
1182         min-width: 400px
1183         border: 1px solid #ababab
1184         background: white
1185         @include radius(13px)
1186         @include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset)
1187         input, textarea
1188             padding: 3px
1189             height: 14px
1190             font-size: 12px
1191             line-height: 18px
1192         //Customize searchview input, select
1193         input:not([type]), input[type="text"], input[type="number"]
1194             width: 156px
1195             height: 22px
1196         input[type="checkbox"]
1197             margin: 3px 3px 3px 4px
1198         select
1199             margin: 2px 4px 2px 0
1200         //End of customize
1201         &.oe_focused
1202             border-color: $tag-border-selected
1203             @include box-shadow(0 1px 2px $tag-border-selected inset)
1204         .oe_searchview_clear
1205             cursor: pointer
1206             position: absolute
1207             top: 0
1208             right: 18px
1209             width: 15px
1210             height: 24px
1211             background: url(../img/search_reset.gif) center center no-repeat
1212         .oe_searchview_unfold_drawer
1213             position: absolute
1214             top: 0
1215             right: 0
1216             height: 24px
1217             padding: 0 7px 0 4px
1218             color: #ccc
1219             cursor: pointer
1220             &:hover
1221                 color: #999
1222             &:before
1223                 position: absolute
1224                 top: 10px
1225                 right: 7px
1226                 width: 0
1227                 height: 0
1228                 display: inline-block
1229                 content: ""
1230                 vertical-align: top
1231                 border-top: 5px solid #4C4C4C
1232                 border-left: 5px solid transparent
1233                 border-right: 5px solid transparent
1234                 @include opacity()
1235
1236         .oe_searchview_search
1237             @include text-to-icon("r", #a3a3a3)
1238             @include box-shadow(none)
1239             @include radius(0)
1240             position: absolute
1241             left: 3px
1242             top: 1px
1243             padding: 0
1244             border: none
1245             background: transparent
1246
1247         .oe_searchview_facets
1248             min-height: 22px
1249             margin: 0 35px 0 15px
1250             *
1251                 vertical-align: top
1252                 display: inline-block
1253                 line-height: 17px
1254             .oe_searchview_facet
1255                 margin: 1px 0
1256                 font-size: 11px
1257                 &:focus
1258                     outline: none
1259             .oe_searchview_input
1260                 padding: 0 0 0 6px
1261                 font-size: 12px
1262                 height: 16px
1263                 margin-top: 3px
1264                 &:focus
1265                     outline: none
1266             .oe_searchview_facet
1267                 position: relative
1268                 cursor: pointer
1269                 padding: 0
1270                 -webkit-font-smoothing: auto
1271                 // spacing for opera, FF
1272                 &:focus
1273                     border-color: $tag-border-selected
1274                     @include box-shadow(0 0 3px 1px $tag-border-selected)
1275                 .oe_facet_values
1276                     background: $tag-bg-light
1277                     @include radius(0 3px 3px 0)
1278                 .oe_facet_category, .oe_facet_value
1279                     padding: 0 4px
1280                 .oe_facet_category
1281                     color: white
1282                     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
1283                 .oe_facet_category.oe_i
1284                     font-size: 16px
1285                 .oe_facet_value
1286                     border-left: 1px solid $tag-border
1287                     text-shadow: 0 1px 1px white
1288                     color: #4C4C4C
1289                     &:last-child
1290                         padding-right: 16px
1291                 .oe_facet_remove
1292                     position: absolute
1293                     top: 3px
1294                     right: 3px
1295                     color: #8786b7
1296                     line-height: 8px
1297                     width: 12px
1298                     height: 12px
1299                     padding-top: 1px
1300                     text-align: center
1301                     font-weight: bold
1302                     cursor: pointer
1303                     text-shadow: 0 1px 1px white
1304                     &:hover
1305                         color: white
1306                         background: #8786b7
1307                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
1308                         @include radius(2px)
1309
1310         .oe-autocomplete
1311             display: none
1312             position: absolute
1313             width: 300px
1314             background-color: white
1315             border: 1px solid black
1316             z-index: 666
1317             margin-top: 5px
1318             cursor: default
1319             ul
1320                 list-style-type: none
1321                 padding-left: 0
1322                 margin: 5px
1323                 li
1324                     padding-left: 20px
1325                     text-shadow: 0 0 0 white
1326                     span:first-child
1327                         margin-right: 5px
1328                     span.oe-expand
1329                         cursor: pointer
1330                 li.oe-indent
1331                     margin-left: 20px
1332                 li.oe-selection-focus
1333                     background-color: #7c7bad
1334                     color: white
1335                 li.oe-separator
1336                     margin-top: 2px
1337                     margin-bottom: 2px
1338                     border-top: 1px solid #afafb6
1339                 li.oe-separator:last-child
1340                     display: none
1341
1342
1343     .oe_searchview_drawer_container
1344         overflow: auto
1345     .oe_searchview_drawer
1346         display: none
1347         width: 100%
1348         cursor: default
1349         display: none
1350         overflow: hidden
1351         border-bottom: 1px solid $tag-border
1352         text-align: left
1353         padding: 8px 0
1354         .badge
1355             font-size: 12px
1356             line-height: 12px
1357         > div:first-child
1358             border: none
1359             padding-left: 0
1360             li:hover:not(.badge)
1361                 background-color: $hover-background
1362         .col-md-5
1363             padding-left: 0
1364         dl
1365             margin-bottom: 0
1366         dt
1367             color: $section-title-color
1368             font-size: 13px
1369             line-height: 24px
1370         dd
1371             line-height: 24px
1372             font-size: 13px
1373             padding-top: 3px
1374         h4, h4 *
1375             margin: 0 0 0 2px
1376             padding-left: 20px
1377             cursor: pointer
1378             font-weight: normal
1379             display: inline-block
1380             &:hover
1381                 background-color: $hover-background
1382         h4:before
1383             content: "▸ "
1384             color: #a3a3a3
1385         button
1386             margin: 4px 0
1387         .button
1388             border: none
1389             background: transparent
1390             padding: 0 2px
1391             @include box-shadow(none)
1392             @include radius(0)
1393         .oe_searchview_section
1394             ul
1395                 margin: 0 8px
1396                 padding: 0
1397                 list-style: none
1398                 display: inline
1399             li
1400                 display: inline-block
1401                 cursor: pointer
1402                 position: relative
1403                 margin-right: 8px
1404                 > span
1405                     display: inline-block
1406                     max-width: 250px
1407                     text-overflow: ellipsis
1408                     vertical-align: bottom
1409                     overflow: hidden
1410         form
1411             margin-left: 12px
1412             p
1413                 margin: 4px 0
1414                 line-height: 18px
1415             button
1416                 margin: 0 0 8px -3px // Managed margin-left according bootstrap3
1417         .oe_searchview_savefilter
1418             form
1419                 display: none
1420         .oe_searchview_custom
1421             display: none
1422             li
1423                 cursor: pointer
1424                 position: relative
1425                 line-height: 14px
1426                 margin-right: 0
1427                 button
1428                     position: absolute
1429                     top: 0
1430                     right: 5px
1431                 a
1432                     margin-left: 10px
1433                     position: inherit
1434                     visibility: hidden
1435                     display: inline-block
1436                 span:hover:not(.badge)
1437                     background-color: $hover-background
1438             li:hover a
1439                 visibility: visible
1440             //Customize for searchview label
1441             label
1442                 font-weight: normal
1443             //End of Customize
1444         .oe_searchview_dashboard
1445             form
1446                 display: none
1447                 margin-top: 2px
1448
1449         .oe_searchview_advanced
1450             overflow: auto
1451             form
1452                 display: none
1453                 margin-top: 8px
1454             button.oe_add_condition:before
1455                 content: "Z"
1456                 font-family: "entypoRegular" !important
1457                 font-size: 24px
1458                 font-weight: 300 !important
1459                 margin-right: 4px
1460             ul
1461                 list-style: none
1462                 padding: 0
1463             li
1464                 position: relative
1465                 list-style: none
1466                 margin: 0
1467                 white-space: nowrap
1468                 &:first-child .searchview_extended_prop_or
1469                     visibility: hidden
1470                     margin-left: -14px
1471             .searchview_extended_prop_or
1472                 opacity: 0.5
1473                 margin-left: -14px //Customize 'or' in searchview
1474         .oe_opened
1475             h4:before
1476                 content: "▾ "
1477                 position: relative
1478                 top: -1px
1479             form
1480                 display: block
1481
1482         // delete buttons
1483         .oe_searchview_custom_delete, .searchview_extended_delete_prop
1484             display: inline-block
1485             width: 12px
1486             height: 12px
1487             line-height: 12px
1488             padding: 1px
1489             color: #8786b7
1490             line-height: 8px
1491             text-align: center
1492             font-weight: bold
1493             text-shadow: 0 1px 1px white
1494             &:hover
1495                 text-decoration: none
1496                 color: white
1497                 background: #8786b7
1498                 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
1499                 @include radius(2px)
1500         .oe_searchview_custom_delete
1501             display: none
1502             position: absolute
1503             bottom: 1px
1504             right: 4px
1505         .oe_searchview_custom_private, .oe_searchview_custom_public
1506             &:hover
1507                 .oe_searchview_custom_delete
1508                     display: inline-block
1509         .oe_searchview_custom_public:after
1510             content: ","
1511             font-family: "entypoRegular" !important
1512             font-size: 22px
1513             font-weight: 300 !important
1514             margin: 0 0 0 4px
1515             padding: 0
1516     // }}}
1517     // Views Common {{{
1518     .oe_view_nocontent
1519         padding: 15px
1520         margin-top: 0
1521         color: #777777
1522         font-size: 125%
1523         max-width: 700px
1524         .oe_view_nocontent_create
1525             margin-top: 0
1526             padding-top: 35px
1527             color: #4c4c4c
1528             &:before
1529                 content: ""
1530                 display: inline-block
1531                 position: absolute
1532                 width: 70px
1533                 height: 80px
1534                 margin-left: -70px
1535                 margin-top: -50px
1536                 background: transparent url(/web/static/src/img/view_empty_arrow.png) no-repeat 0px 0px
1537         > p
1538             padding-left: 78px
1539         .oe_empty_custom_dashboard
1540             background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0
1541             margin-top: -15px
1542             padding: 100px 0 0 137px
1543             min-height: 327px
1544             margin-left: -15px
1545     .oe_view.oe_cannot_create
1546         .oe_view_nocontent_create
1547             display: none
1548     // }}}
1549     // FormView.base and dynamic tags {{{
1550     .oe_formview
1551         background: white
1552     .oe_form_dropdown_section
1553         position: relative
1554         display: inline-block
1555     .oe_form_invalid
1556         input, select, textarea
1557             background-color: #F66 !important
1558             border: 1px solid #D00 !important
1559     .oe_view_manager_current .oe_form_editable
1560         .oe_highlight
1561             color: #404040
1562             background: none
1563         button.oe_highlight
1564             @include vertical-gradient(#efefef, #d8d8d8)
1565             @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
1566         button.oe_highlight:active
1567             @include vertical-gradient(#e3e3e3, #f6f6f6)
1568             @include box-shadow(none)
1569         button.oe_highlight:hover
1570             @include vertical-gradient(#f6f6f6, #e3e3e3)
1571             @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
1572     .oe_form_invisible
1573         display: none !important
1574     .oe_form_editable
1575         .oe_read_only
1576             display: none !important
1577     .oe_form_readonly
1578         .oe_edit_only, .oe_form_field:empty
1579             display: none !important
1580         .oe_form .oe_form_field_date
1581             width: auto
1582         .oe_form_field_boolean.boolean
1583             position: relative
1584             top: -20px
1585             width: 14px
1586             height: 14px
1587             z-index: 10000
1588             // IE needs a color in order for the layer to respond to mouse events
1589             backgroundColor: "#fff"
1590             opacity: 0
1591     // Sheet and padding
1592     .oe_form_nosheet
1593         margin: 16px
1594         > header
1595             margin: -16px -16px 0 -16px
1596             padding: 0
1597     .oe_form_nosheet.oe_form_nomargin
1598         margin: 0
1599         > header
1600             margin: 0
1601     .oe_form_sheetbg
1602         padding: 16px 0
1603     .oe_form_sheet_width
1604         min-width: 650px
1605         max-width: $sheet-max-width
1606         margin: 0 auto
1607     .oe_form_sheet
1608         background: white
1609         min-height: 330px
1610         padding: 16px
1611         .oe_list
1612             overflow-x: auto
1613     // Sheet inline mode
1614     .oe_application
1615         .oe_form_sheetbg
1616             background: url(/web/static/src/img/form_sheetbg.png)
1617             border-bottom: 1px solid #ddd
1618             // Customize font weight according bootstrap3
1619             .oe_subtotal_footer label
1620                 font-weight: bold
1621             table label
1622                 font-weight: normal
1623             // End of customize
1624         .oe_form_sheet
1625             border: 1px solid #c8c8d3 //$tag-border
1626             @include box-shadow(0 4px 20px rgba(0,0,0,0.15))
1627             .ui-tabs
1628                 margin: 0 -16px
1629             .oe_notebook_page
1630                 padding: 0 16px
1631     // }}}
1632     // FormView.header {{{
1633     .oe_form > :not(.oe_form_nosheet) header
1634         padding-left: 2px
1635         ul:not(.oe_tooltip_technical):not(.oe_dropdown_menu)
1636             display: inline-block
1637             float: right
1638         .oe_button
1639             margin: 3px 2px 1px
1640             &:first-child
1641                 margin-left: 6px
1642
1643     .oe_form  header
1644         border-bottom: 1px solid #cacaca
1645         padding-left: 2px
1646         @include vertical-gradient(#fcfcfc, #dedede)
1647         > span
1648             margin-left: 4px
1649
1650     // }}}
1651     // FormView.custom tags and classes {{{
1652     .oe_form
1653         header
1654             .oe_tags
1655                 margin: 5px 0 0 5px
1656                 width: 400px
1657                 padding-bottom: 0
1658         div.oe_chatter
1659             box-sizing: border-box
1660             min-width: $sheet-min-width + 2* $sheet-padding
1661             max-width: $sheet-max-width + 2* $sheet-padding
1662             margin: 0 auto
1663             padding: 16px 16px 48px
1664         div.oe_form_configuration
1665             p, ul, ol
1666                 color: #aaa
1667                 max-width: 650px
1668             label
1669                 min-width: 150px
1670             .oe_form_group_cell_label
1671                 padding: 1px 0
1672             .oe_form_group_cell div div
1673                 padding: 1px 0
1674         .oe_subtotal_footer
1675             width: 1% !important
1676             td.oe_form_group_cell
1677                 text-align: right
1678                 padding: 0 !important
1679             td.oe_form_group_cell_label
1680                 border-right: none
1681             .oe_subtotal_footer_separator
1682                 width: 108px
1683                 border-top: 1px solid #cacaca
1684                 margin-top: 4px
1685                 padding-top: 4px
1686                 font-weight: bold
1687                 font-size: 18px
1688             label:after
1689                 content: ":"
1690             label.oe_subtotal_footer_separator
1691                 font-weight: bold !important
1692                 padding: 2px 11px 2px 0px !important
1693             label.oe_form_label_help
1694                 font-weight: normal !important
1695         .oe_form_box_info
1696             background: #fe9
1697             border-bottom: 1px solid #cb6
1698             padding: 4px
1699             > p
1700                 margin: auto
1701         .oe_form_box_warning
1702             background: #bd362f
1703             border-bottom: 1px solid #900
1704             padding: 4px
1705             *
1706                 color: white
1707                 text-shadow: none
1708             > p
1709                 margin: auto
1710     // }}}
1711     // FormView.group {{{
1712     .oe_form
1713         .oe_form_button
1714             margin: 2px
1715         td.oe_form_group_cell_label
1716             border-right: 1px solid #ddd
1717             padding: 2px 0px
1718             label
1719                 line-height: 18px
1720                 display: block
1721                 min-width: 150px
1722                 font-weight: bold !important
1723         td.oe_form_group_cell + .oe_form_group_cell
1724             padding: 2px 0 2px 8px
1725         .oe_form_group
1726             width: 100%
1727             margin: 9px 0 9px 0
1728             .oe_form_group_cell.oe_group_right
1729                 padding-left: 20px
1730     // }}}
1731     // FormView.label {{{
1732     .oe_form
1733         .oe_form_label_help[for], .oe_form_label[for]
1734             white-space: nowrap
1735             padding-right: 8px
1736             span
1737                 font-size: 80%
1738                 color: darkGreen
1739                 vertical-align: top
1740                 position: relative
1741                 top: -4px
1742                 padding: 0 2px
1743     // }}}
1744     // FormView.separator {{{
1745     .oe_horizontal_border
1746         border-bottom: 1px solid black
1747     .oe_horizontal_separator
1748         font-weight: bold
1749         font-size: 20px
1750         margin: 15px 0px 10px 0px
1751         color: $section-title-color
1752     .oe_horizontal_separator:empty
1753         height: 5px
1754     .oe_vertical_separator
1755         border-left: 1px solid #666
1756         padding: 0 4px 0 4px
1757     // }}}
1758     // FormView.progressbar {{{
1759     .oe_form_field_progressbar
1760         display: inline-block
1761         min-width: 70px
1762     .oe_form_field_progressbar.ui-progressbar
1763         height: 22px
1764         font-size: 10px
1765         @include box-sizing(border)
1766         border: 1px solid #999
1767         @include radius(3px)
1768         background: white
1769         min-width: 50px
1770         span
1771             position: absolute
1772             margin-left: 10px
1773             font-weight: bold
1774         .ui-widget-header
1775             background: #cccccc url(/web/static/lib/jquery.ui/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x
1776     // }}}
1777     // FormView.fields {{{
1778     .oe_form
1779         .oe_form_field_text
1780             width: 100%
1781             .oe_form_text_content
1782                 text-overflow: ellipsis
1783                 display: inline-block
1784                 white-space: pre-wrap
1785                 overflow-x: hidden
1786                 width: 100%
1787         .oe_form_field_char input,
1788         .oe_form_field_url input,
1789         .oe_form_field_email input,
1790         .oe_form_field_text textarea,
1791         .oe_form_field_selection select
1792             width: 100%
1793         .oe_notebook_page .oe_form_field_text textarea
1794             min-height: 96px
1795         .oe_form_field_text.oe_inline, .oe_form_field_text.oe_inline > textarea
1796             width: 500px
1797         h1, h2, h3, h4, h5, h6
1798             margin: 0 0 4px 0
1799             input
1800                 height: inherit !important
1801                 font-size: inherit
1802         // Customize for formview
1803         .oe_title h1, h1
1804             font-weight: bold
1805             font-size: 2em
1806         h2
1807             font-size: 1.5em
1808         label
1809             font-weight: bold
1810             margin-bottom: 0px
1811             display: inline
1812         // End of customize
1813         .oe_form_field
1814             width: 100%
1815             display: inline-block
1816             padding: 2px 2px 2px 0px
1817             vertical-align: top
1818             input
1819                 margin: 0px
1820         input[type="text"], input[type="password"], input[type="file"], select
1821             height: 22px
1822             padding-top: 2px
1823         input[type="text"], input[type="password"], input[type="file"], select, textarea
1824             @include box-sizing(border)
1825             background: white
1826             min-width: 60px
1827             color: #1f1f1f
1828             font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
1829         input[readonly], select[readonly], textarea[readonly], input[disabled], select[disabled]
1830             background: #E5E5E5 !important
1831             color: #666
1832         textarea[disabled]
1833             border: none
1834             padding-left: 8px
1835             @include box-shadow(none)
1836             @include radius(0px)
1837             color: #4c4c4c
1838         textarea.oe_inline[disabled]
1839             border-left: 8px solid #eee
1840         .oe_form_field_url button img
1841             vertical-align: top
1842         .oe_form_field_monetary,
1843         .oe_form_field_date,
1844         .oe_form_field_datetime
1845             white-space: nowrap
1846         .oe_form_field_boolean
1847             width: auto
1848         .oe_datepicker_container
1849             display: none
1850         .oe_datepicker_root
1851             display: inline-block
1852         .oe_form_required
1853             input:not([disabled]):not([readonly]), select:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])
1854                 background-color: #D2D2FF !important
1855         .oe_form_invalid
1856             input, select, textarea
1857                 background-color: #F66 !important
1858                 border: 1px solid #D00 !important
1859         .oe_input_icon
1860             cursor: pointer
1861             margin: 3px 0 0 -21px
1862             vertical-align: top
1863         .oe_input_icon_disabled
1864             position: absolute
1865             cursor: default
1866             opacity: 0.5
1867             filter: alpha(opacity=50)
1868             right: 5px
1869             top: 3px
1870         .oe_form_field_with_button.oe_no_button > .oe_button
1871             display: none
1872         .oe_form_field_with_button:not(.oe_no_button)
1873             > .oe_button
1874                 float: right
1875                 @include radius(0)
1876                 border-bottom-left-radius: 0px
1877                 height: 22px
1878         .oe_form_field_with_button
1879             input
1880                 width: 100%
1881             > div
1882                 position: relative
1883                 overflow: hidden
1884         .oe_form_embedded_html
1885             position: relative
1886             width: 100%
1887             margin: auto
1888             overflow: auto
1889             text-align: justify
1890         .oe_form_field_html .oe_input_icon
1891             float: right
1892             margin: 4px 7px
1893
1894     .oe_form_editable
1895         .oe_form
1896             .oe_form_field_integer input
1897                 width: 6em
1898             .oe_form_field_float input
1899                 width: 7em
1900             .oe_form_field_date input
1901                 width: 100px
1902             .oe_form_field_datetime input
1903                 width: 150px
1904     // }}}
1905     // FormView.fields_binary {{{
1906     /* http://www.quirksmode.org/dom/inputfile.html
1907      * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
1908      */
1909     .oe_hidden_input_file
1910         // Position: relative is used for the hidden input[type=file]
1911         // Do not remove it anymore !
1912         position: relative
1913         input.oe_form_binary_file
1914             z-index: 0
1915             line-height: 0
1916             font-size: 12px
1917             position: absolute
1918             top: 1px
1919             left: 0
1920             right: 0
1921             opacity: 0
1922             filter: alpha(opacity = 0)
1923             -ms-filter: "alpha(opacity=0)"
1924             margin: 0
1925             padding: 0
1926     .oe_form
1927         .oe_form_field_binary
1928             display: inline-block
1929         .oe_form_field_image
1930             padding: 0
1931             position: relative
1932             display: inline-block
1933             width: auto
1934             vertical-align: top
1935             .oe_form_field_image_controls
1936                 position: absolute
1937                 top: 1px
1938                 padding: 6px 0
1939                 width: 100%
1940                 display: none
1941                 text-align: center
1942                 color: #eee
1943                 background: rgba(37,37,37,0.9)
1944                 @include radius(3px 3px 0 0)
1945                 @include box-sizing(border)
1946             &:hover .oe_form_field_image_controls
1947                 display: block
1948     .oe_fileupload
1949         display: inline-block
1950         clear: both
1951         width: 100%
1952         margin-bottom: -15px
1953         .oe_add
1954             float: left
1955             position: relative
1956             width: 100%
1957             left: +2px
1958             margin: 9px 0 /* Customize margin according bootstrap3 */
1959             overflow: hidden
1960             button
1961                 display: inline
1962                 height: 24px
1963                 font-size: 12px
1964                 line-height: 12px
1965                 vertical-align: middle
1966             button.oe_attach
1967                 width: 24px
1968                 background: transparent
1969                 color: #7C7BAD
1970                 box-shadow: none
1971                 border: none
1972                 text-shadow: none
1973                 .oe_e
1974                     position: relative
1975                     top: -10px
1976                     left: -9px
1977             input.oe_form_binary_file
1978                 display: inline-block
1979                 margin-left: -85px
1980                 height: 22px
1981                 width: 152px
1982                 margin-top: -24px
1983                 cursor: pointer
1984             .oe_attach_label
1985                 color: #7C7BAD
1986                 margin-left: -3px
1987         .oe_attachments
1988             margin-bottom: 4px
1989             margin-right: 0px
1990             font-size: 12px
1991             border-radius: 2px
1992             border: solid 1px rgba(124,123,173,0.14)
1993             .oe_attachment
1994                 padding: 2px
1995                 padding-left: 4px
1996                 padding-right: 4px
1997                 .oe_e
1998                     font-size: 23px
1999                     margin-top: -5px
2000                 .oe_e:hover
2001                     text-decoration: none
2002             .oe_attachment:nth-child(odd)
2003                 background: white
2004             .oe_attachment:nth-child(even)
2005                 background: #F4F5FA
2006     // }}}
2007     // FormView.many2one {{{
2008     .oe_form_field_many2one
2009         display: inline-block
2010         td:first-child
2011             position: relative
2012         span.oe_m2o_drop_down_button
2013             position: absolute
2014             top: 2px
2015             right: 0px
2016         .oe_m2o_cm_button
2017             line-height: 14px
2018             float: right
2019             padding-left: 2px
2020         input
2021             padding-right: 13px
2022     &.ui-autocomplete
2023         li.oe_m2o_dropdown_option a
2024             font-style: italic
2025             padding-left: 2em
2026         li:not(.oe_m2o_dropdown_option) + li.oe_m2o_dropdown_option
2027             margin-top: 10px
2028     // }}}
2029     // FormView.fieldstatus {{{
2030     ul.oe_form_status, ul.oe_form_status_clickable
2031         display: inline-block
2032         margin: 0
2033         padding: 0 18px 0 0
2034         li
2035             display: inline-block
2036             list-style-type: none
2037             // It is probably a bad idea to modify this margin
2038             margin: 0 -18px 0 0
2039             padding: 0
2040             @include vertical-gradient(#fcfcfc, #dedede)
2041             &:first-child > .label
2042                 border-left: 1px solid #cacaca
2043                 padding-left: 14px
2044             &:last-child
2045                 border-right: 1px solid #cacaca
2046                 > .label
2047                     padding-right: 14px
2048                 > .arrow
2049                     display: none
2050             > .label
2051                 color: #4c4c4c
2052                 text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede
2053                 padding: 7px
2054                 display: inline-block
2055                 padding-left: 24px
2056                 margin: 0
2057                 position: relative
2058                 // Customize for statusbar label
2059                 line-height: normal
2060                 font-size: 100%
2061                 font-weight: normal
2062                 // End of customize
2063             > .arrow
2064                 width: 17px
2065                 height: 30px
2066                 display: inline-block
2067                 vertical-align: top
2068                 overflow: hidden
2069                 margin-left: -5px
2070                 span
2071                     position: relative
2072                     width: 24px
2073                     height: 24px
2074                     display: inline-block
2075                     margin-left: -12px
2076                     margin-top: 3px
2077                     box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2)
2078                     @include skew-gradient(#fcfcfc, #dedede)
2079                     @include radius(3px)
2080                     @include transform(rotate(45deg))
2081         ul.oe_dropdown_menu
2082             display: none
2083             padding: 0
2084             min-width: 0
2085             &.oe_opened
2086                 display: block
2087             li
2088                 margin: 0
2089                 width: 100%
2090                 span.label
2091                     padding-left: 14px
2092
2093         li.oe_active
2094             @include vertical-gradient(#729fcf, #3465a4)
2095             > .arrow span
2096                 @include skew-gradient(#729fcf, #3465a4)
2097             > .label
2098                 color: white
2099                 text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
2100     ul.oe_form_status_clickable
2101         li
2102             cursor: pointer
2103             &:hover
2104                 @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
2105                 > .label
2106                     text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede
2107                 > .arrow span
2108                     @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
2109             > .label
2110                 color: $link-color
2111         li.oe_active
2112             &:hover
2113                 @include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
2114                 > .label
2115                     text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
2116                 > .arrow span
2117                     @include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
2118     // }}}
2119     // FormView.one2many {{{
2120     .oe_form .oe_form_field_one2many > .oe_view_manager
2121         .oe_list_pager_single_page
2122             display: none
2123     .oe_form_field_one2many,.oe_form_field_many2many
2124         // TODO: oe_form_field_one2many_list?
2125         > .oe_view_manager
2126             .oe_list_pager_single_page
2127                 display: none !important
2128             .oe_view_manager_view_list
2129                 min-height: 132px
2130
2131         .oe_form_field_one2many_list_row_add
2132             font-weight: bold
2133         .oe_list_content
2134             > thead
2135                 border-bottom: 1px
2136             > tbody
2137                 tr:nth-child(odd)
2138                     background: transparent
2139         .oe_list .oe_list_edit_row_save
2140             background: url(/web/static/src/img/iconset-b-remove.png) 50% 50% no-repeat
2141             &:before
2142                 visibility: hidden
2143
2144         &> .oe_view_manager
2145             .oe_header_row_top
2146                 display: none
2147             .oe_view_manager_header2
2148                 td
2149                     padding: 0px 8px
2150                     line-height: 16px
2151                     .oe_i
2152                         font-size: 13px
2153                     .oe_pager_group
2154                         height: auto
2155                         line-height: 16px
2156                         li
2157                             height: auto
2158                             line-height: 16px
2159         .oe_list_buttons.oe_editing .oe_list_save
2160             // keep "save row" button hidden in o2m
2161             visibility: hidden
2162     .oe_form_editable
2163         .oe_list_editable
2164             .oe_list_content
2165                 td.oe_required
2166                     background-color: #d2d2ff
2167                 td.oe_readonly
2168                     background-color: #eee
2169
2170     $row-height: 27px
2171     .oe_list_editable .oe_list_content td.oe_list_field_cell
2172         padding: 4px 6px 3px
2173     .oe_list.oe_list_editable.oe_editing
2174         .oe_edition .oe_list_field_cell
2175             *
2176                 visibility: hidden
2177             color: transparent
2178             text-shadow: none
2179         .oe_m2o_drop_down_button
2180             top: 5px
2181         .oe_m2o_cm_button
2182             line-height: 19px
2183         .oe_input_icon
2184             margin-top: 5px
2185         .oe_form_field
2186             &.oe_list_field_handle
2187                 color: transparent
2188             &.oe_readonly
2189                 padding: 4px 6px 3px
2190                 text-align: left
2191             min-width: 0
2192             max-width: none
2193             input, textarea
2194                 height: $row-height
2195                 @include radius(0)
2196                 border: 1px solid #aaf
2197                 margin: 0
2198             input, textarea, select
2199                 min-width: 0
2200             &.oe_form_field_float,&.oe_form_view_integer
2201                 &.oe_readonly
2202                     padding: 6px 0px 0px
2203                     text-align: right
2204                     max-width: 100px
2205                 input
2206                     width: 100% !important
2207                     text-align: right
2208             &.oe_form_field_datetime,&.oe_form_field_date
2209                 input.oe_datepicker_master
2210                     width: 100% !important
2211             &.oe_form_field_reference
2212                 display: table
2213     .oe_list_group_name
2214         white-space: nowrap
2215     // }}}
2216     // FormView.many2many {{{
2217     .oe_form .oe_form_field_many2many > .oe_list
2218         .oe_list_pager_single_page
2219             display: none
2220     // }}}
2221     // ListView {{{
2222     .oe_list_buttons
2223         .oe_alternative
2224             visibility: hidden
2225         .oe_list_save, .oe_list_discard
2226             display: none
2227         &.oe_editing
2228             .oe_list_add
2229                 display: none
2230             .oe_list_save
2231                 display: inline-block
2232             .oe_list_discard
2233                 display: inline
2234             .oe_alternative
2235                 visibility: visible
2236
2237     .oe_list
2238         &.oe_cannot_edit
2239             .oe_list_header_handle, .oe_list_field_handle
2240                 display: none !important
2241                 padding: 0 !important
2242         &.oe_cannot_delete
2243             .oe_list_record_delete
2244                 display: none !important
2245
2246         .oe_form
2247             .oe_form_nosheet
2248                 margin: 0 // FIXME: either class or border should not be by default
2249                 padding: 0
2250                 border: none
2251             .oe_form_field
2252                 width: auto
2253                 position: absolute
2254                 margin: 0 !important // dammit
2255                 padding: 0
2256             .oe_form_field_boolean input
2257                 margin: 1px 0 0 10px !important
2258         .oe_list_content .oe_group_header
2259             @include vertical-gradient(#fcfcfc, #dedede)
2260
2261     .oe_list_content
2262         width: 100%
2263         td:first-child, th:first-child
2264             &:after
2265                 border-width: 0
2266         td.oe_number
2267             text-align: right !important
2268             max-width: 100px
2269         td.oe_list_field_date, th.oe_list_header_date
2270             min-width: 6em
2271         > thead
2272             border-bottom: 2px solid #cacaca
2273             background: #eee
2274             vertical-align: top
2275         td, th
2276             padding: 3px 6px
2277             line-height: 18px
2278         th.oe_sortable, th.oe_sortable div
2279             cursor: pointer
2280         th.oe_sortable div
2281             position: relative
2282         th.oe_sortable div:after
2283             margin-right: 6px
2284             content: ""
2285             margin-top: 7px
2286             border-width: 0 4px 4px
2287             border-style: solid
2288             border-color: #000 transparent
2289             visibility: hidden
2290         th.sortup div:after
2291             float: right
2292             visibility: visible
2293             @include opacity(0.6)
2294         .oe_list_header_many2many_tags
2295             min-width: 70px
2296         th.sortdown div:after
2297             float: right
2298             border-bottom: none
2299             border-left: 4px solid transparent
2300             border-right: 4px solid transparent
2301             border-top: 4px solid #000
2302             visibility: visible
2303             @include box-shadow(none)
2304             @include opacity(0.6)
2305         > tbody
2306             cursor: pointer
2307             > tr
2308                 height: $row-height
2309                 border-top: 1px solid #ddd
2310                 > td.oe_list_field_cell
2311                     padding: 3px 6px
2312                     white-space: pre-line
2313                 > td, > th
2314                     > button
2315                         border: none
2316                         background: transparent
2317                         padding: 0
2318                     > button.btn_txt
2319                         border: 1px solid rgba(0,0,0,0.4)
2320                         background: #e3e3e3
2321                         padding: 3px 12px
2322                 > td.oe_list_checkbox:first-child, th.oe_list_checkbox:first-child
2323                     width: 17px
2324                     &:after
2325                         border-width: 0
2326                 > td.oe_list_field_boolean input
2327                     @include opacity()
2328             > tr:nth-child(odd)
2329                 background-color: #f0f0fa
2330                 @include vertical-gradient(#f0f0fa, #eeeef6)
2331
2332         > tfoot
2333             border-top: 2px solid #cacaca
2334             border-bottom: 1px solid #cacaca
2335             background: #eee
2336             font-weight: bold
2337
2338
2339         .numeric
2340             text-align: right
2341             width: 82px
2342             input
2343                 text-align: right
2344         th.oe_list_header_handle
2345             font-size: 1px
2346             overflow: hidden
2347             text-indent: -9001px
2348         td.oe_list_field_handle
2349             width: 1em
2350             padding: 0 !important
2351             cursor: ns-resize
2352             .oe_list_handle
2353                 @include text-to-entypo-icon("}",#E0E0E0,18px)
2354                 margin-right: 7px
2355         .oe_list_field_progressbar progress
2356             width: 100%
2357     // }}}
2358     // Tree view {{{
2359     .tree_header
2360         background-color: #f0f0f0
2361         border-bottom: 1px solid #cacaca
2362         color: #4c4c4c
2363         padding: 5px
2364         height: 25px
2365         button
2366             float: right
2367             height: 27px
2368             margin-right: 5px
2369     .oe-treeview-table
2370         width: 100%
2371         background-color: white
2372         border-spacing: 0
2373         color: #4c4c4c
2374         th
2375             padding: 10px
2376             font-weight: bold
2377             background-color: #f0f0f0
2378             border-bottom: 2px solid #cacaca
2379
2380         td
2381             cursor: pointer
2382             vertical-align: middle
2383             text-align: left
2384             vertical-align: middle
2385             height: 20px
2386             padding-left: 4px
2387             padding-right: 4px
2388             border-right: 1px solid #e7e7e7
2389
2390         td.oe_number
2391             text-align: right !important
2392         tr
2393             border-bottom: 1px solid #d6d6d6
2394             &:hover
2395                 background-color: #e7e7e7
2396         span
2397             font-size: 90%
2398             font-weight: normal
2399             white-space: nowrap
2400             display: block
2401         .treeview-tr.oe-treeview-first
2402             background: transparent url(/web/static/src/img/expand.gif) 0 50% no-repeat
2403         .oe_open .treeview-tr.oe-treeview-first
2404             background-image: url(/web/static/src/img/collapse.gif)
2405         .treeview-tr.oe-treeview-first span, .treeview-td.oe-treeview-first span
2406             margin-left: 16px
2407     // }}}
2408     // Debugging stuff {{{
2409     .oe_layout_debugging
2410         .oe_form_group
2411             outline: 2px dashed green
2412         .oe_form_group_cell
2413             outline: 1px solid blue
2414         .oe_form_group:hover, .oe_form_group_cell:hover
2415             outline-color: red
2416         .oe_form_group_row_incomplete > td:last-child:after
2417             content: "[Incomplete Row]"
2418             background: red
2419             padding: 2px
2420             font-weight: bold
2421             color: white
2422             float: right
2423         .oe_form_group_row_incomplete.oe_form_group_row_newline > td:last-child:after
2424             content: "[newline]"
2425     .oe_debug_view
2426         float: left
2427     .oe_debug_view_log
2428         font-size: 95%
2429         line-height: 1.2em
2430     // }}}
2431     // Bootstrap HACKS {{{
2432     .navbar
2433         min-height: 32px
2434         margin-bottom: 0px
2435         border: none
2436         z-index: 1
2437         position: static
2438         background-color: #414141
2439         @include vertical-gradient(#646060, #262626)
2440     .navbar-default
2441         .navbar-nav
2442             li
2443                 a:hover,a:focus
2444                     background: rgba(0, 0, 0, 0.3)
2445             .open > a,a:hover,a:focus
2446                 background: rgba(0, 0, 0, 0.3) !important
2447             .dropdown > a .caret
2448                 border-top-color: #777 !important
2449                 border-bottom-color: #777 !important
2450     .navbar-nav
2451         li
2452             a
2453                 padding: 4px 32px 4px 12px
2454     .oe_navbar .dropdown-menu
2455         font-size: 13px
2456         padding: 4px 0
2457         background: #333333 !important
2458         background: rgba(37, 37, 37, 0.9) !important
2459         border-color: #999999
2460         border-color: rgba(0, 0, 0, 0.2)
2461         background-color: #414141
2462         text-shadow: none
2463         @include vertical-gradient(#646060, #262626)
2464         @include radius(3px)
2465         li
2466             a,a:hover,a:focus
2467                 color: #eeeeee
2468
2469     // Minimized unused white space and label weight for wizard popup
2470     .oe_view_manager_new .oe_form_nosheet
2471         margin-top: 8px
2472         .oe_form_label
2473             font-weight: normal
2474
2475     // Customize bootstrap3 for leftbar
2476     .nav
2477         li > a
2478             padding: 3px 4px 2px 18px
2479             color: #4c4c4c
2480         nav-pills.nav-stacked > li > ul
2481             padding-left: 16px
2482     .nav-pills > li.active,a.list-group-item.active
2483         > a
2484             background-color: #7c7bad
2485             color: white
2486             border-radius: 0
2487         a:hover,a:focus
2488             background-color: #7c7bad
2489         .badge
2490             background-color: white
2491             color: #7c7bad
2492             text-shadow: none
2493     .badge
2494         font-weight: normal
2495         font-size: 11px
2496         background-color: #7c7bad
2497
2498     // Customize for global tags
2499     button, body
2500         line-height: normal
2501     h1,h2
2502         font-weight: bold
2503     h3
2504         font-size: 1.17em
2505         font-weight: bold
2506     p
2507         display: block
2508         -webkit-margin-before: 1em
2509         -webkit-margin-after: 1em
2510         -webkit-margin-start: 0px
2511         -webkit-margin-end: 0px
2512     pre
2513         background-color: #FFFFFF
2514         border: none
2515         padding: 10px 0 3px 0
2516
2517
2518
2519     // Customize for chatter
2520     h5
2521         font-weight: bold
2522         font-size: smaller
2523     .oe_form .oe_subtype label, .oe_subtype label
2524         font-weight: normal
2525     .oe_msg_subtype_check
2526         margin: 3px 3px 0 !important
2527     // }}}
2528 // Customize for kanban tooltip
2529 .jqstooltip
2530     height: auto !important
2531     width: auto !important
2532     padding: 0
2533
2534 @-moz-document url-prefix()
2535     .openerp
2536         .oe_searchview .oe_searchview_search
2537             top: -1px
2538         .oe_form_field_many2one .oe_m2o_cm_button
2539             line-height: 18px
2540         .oe_webclient
2541             .oe_star_on, .oe_star_off
2542                 top: 0px
2543
2544 // Kitten Mode {{{
2545 .kitten-mode-activated
2546     background-size: cover
2547     background-attachment: fixed
2548     >*
2549         opacity: 0.70
2550 .loading-kitten
2551     @include radius(15px)
2552     @include box-shadow(0 0 5px 5px #999)
2553 // }}}
2554
2555 // jQueryUI top level {{{
2556 // The jQuery-ui overlay and Autocomplete are outside the .openerp div, please don't add indentation !!!
2557 div.ui-widget-overlay
2558     background: black
2559     @include opacity(0.3)
2560 // TODO: I think only the overlay is problematic, the other top level widgets should use $.fn.openerpClass()
2561 //       eg: $el.autocomplete().openerpClass();
2562 .ui-widget
2563     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
2564     color: #4c4c4c
2565     font-size: 13px
2566
2567 .ui-menu
2568     padding: 2px 0
2569     @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
2570     margin-top: 4px
2571     border: 1px solid $tag-border
2572     .ui-menu-item
2573         width: 100%
2574         padding: 0
2575         a
2576             padding: 1px 16px
2577         a.ui-corner-all
2578             @include radius(0)
2579         a.ui-state-active
2580             background: #f0f0fa
2581     .ui-menu-item a.ui-state-hover, .ui-menu-item a.ui-state-active
2582         background: $tag-bg-dark
2583         //color: #4c4c4c
2584         //@include vertical-gradient(#f0f0fa, #eeeef6)
2585
2586 .ui-corner-all
2587     @include radius(3px)
2588 // }}}
2589
2590 .openerp
2591     .db_option_table
2592         td
2593             padding-bottom: 10px !important
2594
2595 // Server side single forms {{{
2596 @mixin single-form($width: 400px)
2597     padding: 10px
2598     position: absolute
2599     left: 50%
2600     top: 50%
2601     width: $width
2602     /* Set margins to offset 50% of the w/h */
2603     margin-top: -($width / 2)
2604     margin-left: -($width / 2)
2605
2606 body.oe_single_form
2607     background: #eee url(/web/static/src/img/form_sheetbg.png)
2608     height: 100%
2609
2610     .oe_single_form_logo
2611         padding: 10px
2612         text-align: center
2613         margin-bottom: 10px
2614
2615     .oe_single_form_footer
2616         position: absolute
2617         bottom: -30px
2618         right: 0px
2619         width: 100%
2620         text-align: center
2621
2622     .oe_single_form_container
2623         @include single-form(400px)
2624
2625 // }}}
2626
2627 // Internet Explorer 9+ specifics {{{
2628 .openerp_ie
2629     .placeholder
2630         color: $tag-border !important
2631         font-style: italic !important
2632     .oe_form_binary_file
2633         width: 80px
2634     .oe_form_field_boolean input
2635         background: #fff
2636     .db_option_table .oe_form_field_selection
2637         width: auto
2638     input[type='checkbox']
2639         border: none
2640         background: none
2641         box-shadow: none
2642     .oe_logo
2643         img
2644             border: none
2645     .oe_header_row
2646         button.oe_highlight
2647             padding-top: 0
2648             padding-bottom: 0
2649     .oe_view_manager_view_kanban
2650         display: table-cell
2651     .oe_view_manager_buttons
2652         button.oe_write_full
2653             padding-top: 0
2654             padding-bottom: 0
2655         button.oe_highlight
2656             padding-top: 0
2657             padding-bottom: 0
2658         button .oe_form_button_edit
2659             padding-top: 0
2660             padding-bottom: 0
2661         button .oe_form_button_create
2662             padding-top: 0
2663             padding-bottom: 0
2664     .oe_kanban_image
2665         border: none
2666     .oe_msg_icon
2667         border: none
2668     .oe_form
2669         header
2670             ul
2671                 height: 29px
2672     .oe_attach
2673         filter: none
2674     .oe_link
2675         filter: none
2676     .oe_kanban_show_more
2677         clear: both
2678         text-align: center
2679     &.oe_kanban_grouped .oe_kanban_show_more .oe_button
2680         width: 100%
2681         padding: 3px 12px
2682
2683     .oe_form_buttons button
2684         padding-top: 0
2685         padding-bottom: 0
2686     .oe_sidebar button
2687         padding-top: 0
2688         padding-bottom: 0
2689     img
2690         border: none
2691     //buttons.
2692     .oe_dropdown_arrow
2693         line-height: 1.7em
2694     .oe_form_buttons, .oe_view_manager_buttons
2695         button
2696             line-height: 1.7em
2697         .oe_highlight
2698             line-height: 1.7em
2699     .oe_topbar
2700         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646060', endColorstr='#262626')
2701     .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error
2702         filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
2703     .oe_popup_form
2704         width: 99% !important
2705     .oe_form_label
2706         white-space: normal !important
2707     ul.oe_form_status, ul.oe_form_status_clickable
2708         li
2709             display: inline-block
2710             clear: both
2711             &:last-child
2712                 overflow: hidden
2713                 border-right: 1px solid #cacaca
2714                 > .label
2715                     padding-right: 14px
2716                     border-right: none
2717                 > .arrow
2718                     display: inline-block
2719                     opacity: 0
2720                     filter: alpha(opacity = 0)
2721                     border: none
2722                     width: 0
2723                     border-right: none
2724             > .label
2725                 border-bottom: 1px solid #cacaca
2726                 background: transparent
2727             > .arrow
2728                 span
2729                     background-color: #eeeeee !important
2730         li.oe_active
2731             > .label
2732                 border-bottom: 1px solid #729fcf
2733             > .arrow span
2734                 background-color: #729fcf !important
2735
2736     .oe_webclient
2737         height: auto !important
2738 // }}}
2739
2740 // @media print {{{
2741 @media print
2742     .openerp
2743         .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
2744             // We use !important here because jQuery adds @style = display: block on elements when using $.fn.show()
2745             display: none !important
2746         .oe_list_content
2747             button, input[type=checkbox]
2748                 visibility: hidden
2749         .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
2750             visibility: hidden
2751         a
2752             &.oe_m2o_cm_button, &.oe_e
2753                 visibility: hidden
2754         .oe_form
2755             .oe_form_field_date img, .oe_form_field_datetime img
2756                 visibility: hidden
2757         .oe_notebook > li.ui-tabs-selected
2758             display: block
2759         .oe_application
2760             .oe_form_sheet, .oe_form_sheetbg
2761                 border: 0px !important
2762                 box-shadow: 0px 0px 0px
2763                 .oe_list
2764                     overflow-x: visible
2765         .oe_view_manager_current > .oe_view_manager_header
2766             border: 0px !important
2767             box-shadow: 0px 0px 0px
2768         text-shadow: none
2769         .text-core .text-wrap .text-arrow
2770             background: none
2771         .openerp div.oe_mail_wall
2772             overflow: hidden !important
2773 // }}}
2774
2775 // End of customize
2776
2777 // Customize bootstrap3 for tooltip
2778 .tooltip
2779     padding: 0
2780     margin: 0
2781     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
2782     color: #4c4c4c
2783     font-size: 12px
2784     background: white
2785     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
2786     background-color: transparent
2787     .tooltip-inner
2788         text-align: left !important
2789         max-width: 350px
2790         .oe_tooltip_string
2791             color: #FD5
2792             font-weight: bold
2793             font-size: 13px
2794         .oe_tooltip_help
2795             white-space: pre-wrap
2796         .oe_tooltip_technical
2797             padding: 0 0 4px 0
2798             margin: 5px 0 0 15px
2799             li
2800                 list-style: circle
2801         .oe_tooltip_technical_title
2802             font-weight: bold
2803         .oe_tooltip_close
2804             margin: -5px 0 0 2px
2805             cursor: default
2806             float: right
2807             color: white
2808             &:hover
2809                 color: #999
2810                 cursor: pointer
2811         .oe_tooltip_message
2812             max-width: 310px
2813
2814 // Hack for ui icon {{{
2815 .ui-icon
2816     width: 18px
2817     height: 18px
2818 // End hack}}}
2819
2820 // Customized modal according bootstrap3
2821 .modal
2822     .modal-header button.close
2823         border: none
2824         background: none
2825         padding: 1px
2826         height: 18px
2827         font-size: 20px
2828     .modal-footer
2829         text-align: left
2830     .oe_button
2831         margin: 0 4px 0 0
2832     .oe_act_window.modal-body
2833         padding: 0
2834
2835 .ui-datepicker
2836     z-index: 1500 !important
2837
2838 input[type="radio"], input[type="checkbox"]
2839     margin-right: 4px
2840     margin-left: 4px
2841
2842 .blockUI.blockOverlay
2843     background-color: black
2844     opacity: 0.6000000238418579
2845
2846 /* ---- EDITOR TOUR ---- {{{ */
2847
2848 div.tour-backdrop
2849     z-index: 2009
2850 .popover.tour
2851     &.orphan .arrow
2852         display: none
2853     .popover-navigation
2854         padding: 9px 14px
2855         *[data-role="end"]
2856             float: right
2857         *[data-role="next"],*[data-role="end"]
2858             cursor: pointer
2859 .popover.fixed
2860     position: fixed
2861 .tour-backdrop
2862     position: fixed
2863     top: 0
2864     right: 0
2865     bottom: 0
2866     left: 0
2867     z-index: 1100
2868     background-color: #000
2869     opacity: 0.8
2870
2871
2872 // }}}
2873
2874 body
2875     overflow: auto
2876 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
2877 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: