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