Source

jqui / sass / aristo.sass

Full commit
/*
 *CSS 3 Docs
 *http://qooxdoo.org/documentation/general/webkit_css_styles
 *http://trac.webkit.org/browser/trunk/LayoutTests//fast/css

*
  font-family: "Arial"
  font-size: 14px
  font-weight: bold

input
  &[type="checkbox"]
    -khtml-appearance: none
    background: url(../images/check-box-bezel.png) no-repeat
    width: 15px
    height: 16px
    &:checked
      background: url(../images/check-box-bezel-selected.png) no-repeat
  &[type="radio"]
    -khtml-appearance: none
    background: url(../images/radio-bezel.png) no-repeat
    width: 17px
    height: 17px
    &:checked
      border: none
      background: url(../images/radio-bezel-selected.png) no-repeat

button
  margin: 5px
  -khtml-appearance: none
  -moz-appearance: none
  background: none
  -webkit-border-image: url(../images/button-bezel.png) 2 2 2 2 stretch stretch
  -moz-border-image: url(../images/button-bezel.png) 2 2 2 2 stretch stretch
  padding: 3px 8px
  color: #4f4f4f
  -webkit-transition: -webkit-box-shadow 0.2s linear
  text-shadow: 0px 1px 1px white
  &.default
    color: #1c4257
    -webkit-border-image: url(../images/default-button-bezel.png) 2 2 2 2 stretch stretch
    -moz-border-image: url(../images/default-button-bezel.png) 2 2 2 2 stretch stretch

.hud button
  font-size: 11px
  color: white
  padding: 0
  -webkit-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
  -moz-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
  text-shadow: none

button
  &.hud
    font-size: 11px
    color: white
    padding: 0
    -webkit-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
    -moz-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
    text-shadow: none
  &:hover:not(:disabled)
    -webkit-box-shadow: 0 0 15px #d4d4d4
    -moz-box-shadow: 0 0 15px #d4d4d4
  &.default:hover
    -webkit-box-shadow: 0 0 15px #a1cae2
    -moz-box-shadow: 0 0 15px #a1cae2

.hud button:hover
  -webkit-box-shadow: none
  -moz-box-shadow: none

button
  &.hud:hover
    -webkit-box-shadow: none
    -moz-box-shadow: none
  &:active:not(:disabled)
    -webkit-border-image: url(../images/button-bezel-highlighted.png) 2 2 2 2 stretch stretch
    -moz-border-image: url(../images/button-bezel-highlighted.png) 2 2 2 2 stretch stretch
  &.default:active
    -webkit-border-image: url(../images/default-button-bezel-highlighted.png) 2 2 2 2 stretch stretch
    -moz-border-image: url(../images/default-button-bezel-highlighted.png) 2 2 2 2 stretch stretch

.hud button:active
  -webkit-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
  -moz-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat

button
  &.hud:active
    -webkit-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
    -moz-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
  &:disabled
    opacity: 0.5

\:
  &:-webkit-scrollbar
    width: 17px
    height: 17px
  &:-webkit-scrollbar-button
    &:vertical
      &:end
        background: url(../images/scroller-down-arrow.png) no-repeat
        width: 17px
        height: 20px
      &:start
        background: url(../images/scroller-up-arrow.png) no-repeat
        width: 17px
        height: 22px
    &:horizontal
      &:start
        background: url(../images/scroller-left-arrow.png) no-repeat
        width: 22px
        height: 17px
      &:end
        background: url(../images/scroller-right-arrow.png) no-repeat
        width: 22px
        height: 17px
  &:-webkit-scrollbar-thumb
    &:vertical
      -webkit-border-image: url(../images/scroller-vertical-knob.png) 8 0 8 0 / 8px 0 8px 0 stretch repeat
    &:horizontal
      -webkit-border-image: url(../images/scroller-horizontal-knob.png) 7 9 7 9 / 7px 9px 7px 9px stretch repeat
  &:-webkit-scrollbar-track-piece
    &:vertical
      &:start
        background-image: url(../images/scroller-up-arrow-track.png), url(../images/scroller-vertical-track.png)
        background-repeat: no-repeat, repeat-y
      &:end
        background-image: url(../images/scroller-down-arrow-track.png), url(../images/scroller-vertical-track.png)
        background-repeat: no-repeat, repeat-y
        background-position: bottom left, 0 0
    &:horizontal
      &:end
        background-image: url(../images/scroller-right-arrow-track.png), url(../images/scroller-horizontal-track.png)
        background-repeat: no-repeat, repeat-x
        background-position: bottom right, 0 0
      &:start
        background-image: url(../images/scroller-left-arrow-track.png), url(../images/scroller-horizontal-track.png)
        background-repeat: no-repeat, repeat-x
  &:-webkit-scrollbar-button
    &:start:decrement, &:end:increment
      display: block
    &:start:increment, &:end:decrement
      display: none

/* Turn on single button up on top, and down on bottom

/* Turn off the down area up on top, and up area on bottom

input[type="range"]
  -khtml-appearance: none
  -webkit-border-image: url(../images/slider-horizontal-track.png) 2 4 2 4 / 2px 4px 2px 4px repeat repeat
  height: 5px
  padding: 0

\::-webkit-slider-thumb
  -khtml-appearance: none
  background: url(../images/slider-knob.png) no-repeat
  width: 23px
  height: 24px
  &:active
    background: url(../images/slider-knob-highlighted.png) no-repeat

/*This doesn't seem to be implemented yet

input, textarea
  font-size: 12px
  color: black !important
  font-weight: normal
  padding: 4px !important
  border: none

\::-webkit-input-placeholder
  color: #bdc7d3

.copy
  cursor: copy

.progress
  cursor: progress

header, .header
  display: block
  height: 30px
  width: 300px
  padding: 10px
  text-align: center
  border-bottom: 2px solid #979797
  background: #c2c2c2
  background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c2c2c2))
  background: -moz-linear-gradient(left top, left bottom, from(#eaeaea), to(#c2c2c2))
  text-shadow: 0px 1px 1px white
  color: #2c2c2c

.hud
  -webkit-border-radius: 3px
  color: white
  background: -webkit-gradient(linear, left top, left bottom, from(#525252), color-stop(0.3, #212121), color-stop(0.33, #1d1d1d), to(#1d1d1d))
  background: -moz-linear-gradient(left top, left bottom, from(#525252), color-stop(0.3, #212121), color-stop(0.33, #1d1d1d), to(#1d1d1d))
  height: 100px
  width: 200px

nav
  display: block
  width: 100%
  height: 33px
  background: -webkit-gradient(linear, left top, left bottom, from(#030303), to(#44474b))
  background: -moz-linear-gradient(left top, left bottom, from(#030303), to(#44474b))
  clear: both
  a
    display: block
    float: left
    padding: 10px
    color: #a5a5a5
    font-size: 11px
    font-weight: normal
    text-shadow: 0px 1px 1px black
    text-decoration: none
    &:hover, &.active
      background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#bbe1f7))
      background: -moz-linear-gradient(left top, left bottom, from(#81afc8), to(#bbe1f7))
      color: #1c4257
      text-shadow: 0px 1px 1px white