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

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

@import "theme.lungo.colour.styl"

/* -------------------------- 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 -------------------------- */
body > 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.5) (BORDER_radius * 2.5) 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%)
body > 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_success
    &.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


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

/* -------------------------- 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)

/* -------------------------- NOTIFICATION -------------------------- */
.notification
  color: #fff
  &:not(.push)
    background-color: rgba(0,0,0,0.6)
  & .window
    &.growl
      background: rgba(0,0,0,0.75)
    &:not(.growl)
      box-shadow(0 0 8px #444)
      & button, .button
        background: #fff
        color: THEME_dark
    &.confirm, &.html
      background: #e6e6e6
      color: #222
    &.error
      background: COLOR_cancel
    &.success
      background: COLOR_success
    &.error, &.success
      color: #fff
      & small
        opacity: 0.75
        font-weight: 100
    &.html
      & .title
        background: THEME
        color: #fff
    &.push
      background: rgba(0,0,0,0.65)

/* -------------------------- 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 * 2)
    box-shadow inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.15)
    // 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
    &, abbr
      font-weight: 400
    & .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_success
    &.cancel
      background-color: COLOR_cancel
    &[disabled], :disabled, &.disabled
      background: FORM_color
      color: #999 !important
      box-shadow: none !important

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

  & fieldset
    background: #fff
    border-bottom: 1px solid CONTENT
    & .icon
      color: #ccc
    &.radius-top
      border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0
    &.radius-bottom
      border-radius 0 0 (BORDER_radius * 2) (BORDER_radius * 2)
    &.radius
      border-radius (BORDER_radius * 2)
    &.shadow
      border-bottom: 1px solid rgba(0,0,0,0.1)

  & 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, label.select
    background-color: white
    color: rgba(0, 0, 0, 0.75)
    &.border
      border: FORM_border solid FORM_color
      border-radius: FORM_border_radius
    &.error, &:required
      color: COLOR_cancel !important
      border-color: COLOR_cancel !important
    &.success
      color: COLOR_success !important
      border-color: COLOR_success !important
    &:focus, &:active, &:hover
      color: THEME_dark
      border-color: THEME
      &:after
        background-color: THEME
    &[disabled]
      background: FORM_color
      border-color: FORM_color
      color: darken(FORM_color, 25%)

  & .select:after
    background: FORM_color
    color: #fff

  & input[type=range]
    background-color: FORM_color
    color: darken(FORM_color, 25%)
    border-radius: (FORM_border_radius * 4)
    &:active
      background-color: THEME_light !important
      color: #fff
      &::-webkit-slider-thumb
        background-color: darken(THEME, 25%) !important
    &::-webkit-slider-thumb
      border-radius (FORM_border_radius * 4)
      background-color: darken(FORM_color, 25%)

  & [data-progress]
    background-color: #ddd
    & .value
      background-color: THEME_light
    &, & .value
      border-radius (FORM_border_radius * 3)

  & [data-control-checkbox]
    background: FORM_color
    color: darken(FORM_color, 25%)
    font-weight: 700
    border-radius: (FORM_border_radius * 4)
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.25), 0px 1px 0px rgba(255,255,255,0.25)

    & label
      border-radius: (FORM_border_radius * 4)
      background: darken(FORM_color, 25%)

    &.checked
      background-color: THEME_light
      color: #fff !important
      & label
        background-color: darken(THEME, 25%)

    // Expand
    &.twitter
      font-family:'lungojsicon'
      font-size: 1.3em
      line-height: 1.4em
      &:before
        content: "\f099"
      &:after
        content: "\f099"
        text-shadow: 0 1px 0 #fff
    &.ok
      font-family:'lungojsicon'
      font-size: 1.3em
      line-height: 1.4em
      &.checked
        background-color: COLOR_success
        & label
          background-color: darken(COLOR_success, 25%)
      &:before
        content: "\f00c"
      &:after
        content: "\f00d"