Lungo.js/src/stylesheets/theme.lungo.styl

/**
 * Stylesheet
 *
 * @namespace Lungo.Theme
 * @class Default
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

/* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
@import "CSSmethods/vendor.styl"
// @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")


/* -------------------------- THEME -------------------------- */
CONTENT         = #f4f5f5
COLOR           = #333
COLOR_secondary = #BFBFBF
COLOR_cancel    = #EE6557
COLOR_accept    = #3FB58E
DARK            = #222
DARK_light      = lighten(DARK, 25%)
DARK_dark       = darken(DARK, 15%)
DARK_darkest    = darken(DARK, 30%)
LIST_color      = lighten(COLOR, 5%)
LIST_color_2nd  = lighten(COLOR, 35%)
LIST_border     = lighten(COLOR, 90%)
NAV_LINK        = #888
NAV_LINK_ACTIVE = #FFF
THEME           = #0093D5
THEME_light     = lighten(THEME, 15%)
THEME_dark      = darken(THEME, 15%)

FORM_color      = #e5e5e5
BORDER_radius   = 2px
/* -------------------------- DEFAULTS -------------------------- */
body
  background-color: #000
  color: COLOR
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
  font-weight: 400
  font-size: 13px
  line-height: 1.3em
  letter-spacing: -0.05em

  & .theme
    background-color: THEME-light
    &:active
      background-color: THEME


/* -------------------------- LAYOUT COLORS -------------------------- */
section
  background-color: DARK
  & > header
    background-color: THEME
    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
    color: #fff
    border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0

  & > footer, & nav[data-control=groupbar]
    background-color: DARK
    box-shadow inset 0 3px 0 DARK_dark
  & > article, & > [data-control="pull"]
    background-color: CONTENT
    &.splash
      background: THEME
      color: #fff
  &.aside
    box-shadow -1px 0 2px rgba(0,0,0,0.2)
    &.right
      box-shadow 1px 0 2px rgba(0,0,0,0.2)

DARKEST = darken(DARK_darkest, 15%)
aside
  background-color: DARK_dark
  color: #fff
  & > header, > footer
    background-color: DARK_darkest
  & > header
    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 DARK, inset 0 -1px 0 DARKEST


/* -------------------------- NAVIGATION -------------------------- */
nav
  section > header > &
    & a:not(.button)
      color: darken(THEME, 35%)
      text-shadow 0 1px 0 lighten(THEME, 25%)
      &:active
        color: darken(THEME, 50%)

  section > &[data-control=groupbar] > a.active
    box-shadow inset 0 -3px 0 THEME

  section > footer > & > a, &[data-control=groupbar] > a
    color: NAV_LINK
    &.active
      color: NAV_LINK_ACTIVE

  section > footer > & > a
    box-shadow 1px 0 0 DARK_dark
    &.active
      color:  NAV_LINK_ACTIVE
      background-color: DARK_dark
      box-shadow inset 0 3px 0 THEME

  aside & a
    color: lighten(DARK, 20%)
    &:active
      color: lighten(DARK, 50%)

  &[data-control=menu]
    COLOR = DARK
    background: COLOR
    box-shadow 0 2px 0 rgba(0,0,0,0.15)
    &.icons
      background: rgba(0,0,0,0.8)
      & > a
        color: lighten(COLOR, 35%)
        &:active > .icon
          text-shadow: 0 0 32px #fff
        & > .icon
          color: #fff
    &:not(.icons)
      & > a
        color: #fff
        text-shadow 0 1px 0 #111
        border-bottom: 1px solid darken(COLOR, 40%)
        border-top: 1px solid lighten(COLOR, 5%)
        &:active
          background: #111
          border-color: transparent
        & > .icon
          color: lighten(COLOR, 25%)
    & > a
      font-weight: 700




/* -------------------------- LISTS -------------------------- */
.list
  section & li
    background: #fff
    &:not(.anchor)
      border-bottom: inset 1px LIST_border
    &.secondary
      box-shadow: inset 4px 0px 0px COLOR_secondary
    &.accept
      box-shadow: inset 4px 0px 0px COLOR_accept
    &.cancel
      box-shadow: inset 4px 0px 0px COLOR_cancel
    &.arrow::after
      border-color: COLOR_secondary

    &, a
      color: LIST_color
      &.anchor
        background: DARK
      &.dark
        background: DARK_light
      &.selectable:active, &.theme, &.active
        background: THEME_light
      &.light
        background:  LIST_border
        color: LIST_color_2nd
      &.dark, &.selectable:active, &.theme, &.anchor
        &, small, & .right:not(.tag), strong, .arrow::after
          color: #fff
        &.arrow::after
          border-color: #fff
      & small, & .right:not(.tag)
        color: LIST_color_2nd

  &:not(.indented) li
    &.dark, &.theme, &.light
      border-bottom-color: rgba(0,0,0,0.1)

  aside & li
    background: none
    &:not(:first-child)
      border-top: solid 1px  DARK
    &:not(:last-child)
      border-bottom: solid 1px DARKEST
    &:active
      background: DARK_darkest
    &.active
      background: THEME
    &.active, &:active
      border-color: transparent
      & strong, & small, & .icon
        color: #fff
    & strong
      color: #999
    & small, .icon
      color: #666


/* -------------------------- TAG -------------------------- */
.tag:not(.icon)
  color: #fff
  border-radius BORDER_radius
  font-weight: 700 !important
  &.count
    background-color: THEME
  header .count
    background-color: THEME-dark !important
  footer &
    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)


[data-control="pull"]
    text-shadow: 0 1px 0 #fff


/* -------------------------- NOTIFICATION -------------------------- */
.notification
  color: #fff
  background-color: rgba(0,0,0,0.75)
  & .window
    &.growl
      background: rgba(0,0,0,0.8)
    &:not(.growl)
      background: #e6e6e6
      color: #222
      box-shadow(0 0 8px #000)
      & button, .button
        background: #fff !important
        box-shadow: none !important
        color: THEME_dark !important
        border-radius 0px !important
        border: none !important
        margin-bottom: 1px
      &.error
        background: darken(COLOR_cancel, 25%)
        color: #fff
      &.success
        background: darken(COLOR_accept, 25%)
        color: #fff

/* -------------------------- BUTTONS -------------------------- */
header
  & .button, button
    color: #fff
    background-color: THEME_dark
    box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
    border-radius (BORDER_radius * 2)
    &:active
      background-color: darken(THEME, 40%)

article
  & .button, button
    color: #fff !important
    border-radius BORDER_radius
    box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
    border: solid 1px rgba(0,0,0,0.1)
    &:active
      box-shadow inset 0 0 128px rgba(0,0,0,0.25)
      border-color: none
    &.secondary
      color: #666 !important
    &[disabled], :disabled, &.disabled
      background: rgba(255,255,255,0.2)
      color: #999 !important
      box-shadow: none !important
    &, abbr
      font-weight: 700
    & .icon
      opacity: 0.65
      text-shadow: 0 -1px 0 rgba(0,0,0,0.25)

  & button, .button, .tag:not(.icon)
    &
      background-color: THEME_dark
    &.secondary
      background-color: COLOR_secondary
    &.accept
      background-color: COLOR_accept
    &.cancel
      background-color: COLOR_cancel


/* -------------------------- FORMS -------------------------- */
.splash fieldset
  &:first-child
    border-radius BORDER_radius BORDER_radius 0px 0px
  &:last-child
    border-radius 0px 0px BORDER_radius BORDER_radius

form, .form
  & label
    color: #aaa
    font-weight: 300

  & fieldset
    background: #fff
    border-bottom: solid 1px #eee
    & .icon
      color: #ccc

  & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea
    background-color: white
    color: rgba(0, 0, 0, 0.75)
    &.error, &:required
      color: COLOR_cancel
      background-color: lighten(COLOR_cancel, 75%)
      font-weight: 700
    &:focus, &:active, &:hover
      color: THEME_dark
    &[disabled]
      background: darken(FORM_color, 10%)
      color: #999
    &.large
      font-weight: 700

  & .select:after
    background: darken(FORM_color, 10%)
    color: #fff

  & input[type=range]
    border-radius 0px
    &:not(.checkbox)
      background-color: #ddd
      &:active
        background-color: THEME_light

    &.checkbox
      background-color: #aaa
      color: rgba(255,255,255,0.6)
      &.active
        color: #fff
        background-color: THEME_light

    &::-webkit-slider-thumb
      border-radius BORDER_radius
      background-color: lighten(FORM_color, 50%)
      border: solid 1px FORM_color
    &::-webkit-slider-thumb::after
      background: FORM_color

  & .progress .bar
    background-color: #ddd
    & .value
      background-color: THEME_light