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

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