Lungo2.0.js/src/stylesheets/Lungo.theme.default.styl

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

@import "import/vendor.styl"
@import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700")
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")



THEME         = #0093D5
THEME_lighten = lighten(THEME, 15%)
THEME_darken  = darken(THEME, 15%)

DARK          = #222
DARK_lighten = lighten(DARK, 25%)
DARK_darken  = darken(DARK, 25%)



THEME_dark = #222
THEME_dark_current = #111
THEME_dark_nav = #888
THEME_dark_nav_active = #fff
THEME_contrast = #444
ASIDE_COLOR = #191919
COLOR = #484a49
NOTIFICATION_error = #e33100
NOTIFICATION_alert = #ffb515
NOTIFICATION_success = #009600
FORM_border_radius = 1px


/* COLORS */
COLOR_SECONDARY = #ccc
COLOR_CANCEL    = #e33100
COLOR_ACCEPT    = #009600
COLOR_THEME     = #237fd7



body
  background: #000
  font-family: "Open Sans", "Titillium Web",  Helvetica, Arial, sans-serif
  font-weight: 400
  font-size: 13px
  line-height: 1.3em
  letter-spacing: -0.05em




.theme
  &, li&, a&
    background:
      THEME-light
    &:active
      background: THEME


[data-control="pull"]
    color: #666
    text-shadow: 0 1px 0 white


section
  & > header
    background-color: THEME
    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 THEME_lighten, inset 0 -1px 0 THEME_darken
    & .title
      color: #fff

  & > footer
    background-color: THEME-dark
    box-shadow inset 0 3px 0 #333
    & > nav a
      box-shadow 1px 0 0 #151515
      &.current
        color:  THEME_dark_nav_active
        background: THEME_dark_current
        box-shadow -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 THEME

  & > article, & > [data-control="pull"]
    background: #f4f5f5
    // background-color: #ddd

  &.aside
    box-shadow -1px 0 0 rgba(0,0,0,0.2)
    &.right
      box-shadow 4px 0 8px rgba(0,0,0,0.5)


aside
  color: #fff
  background: ASIDE_COLOR

  & header, footer
    background: THEME_dark_current
    text-shadow: none
  & header
    box-shadow inset 0 -1px 0 rgba(0,0,0,0.2)
  & article
    background: none
  & nav a
    &.current .icon
      color: white
    &:not(.current) .icon
      color: THEME_dark_nav

  & .list li
    background: none
    border-bottom-color: THEME_dark !important

    &.current
      background: THEME
      border-bottom-color: THEME
      & strong, & small, & .icon
        color: #fff

    & strong
      color: #999
    & small, .icon
      color: #666


header nav
  & a
    color: #fff

  &.box
    &:not(.right) a
      box-shadow 1px 0 0 THEME_lighten, inset -1px 0 0 THEME_darken
    &.right a
      box-shadow -1px 0 0 THEME_lighten, inset 1px 0 0 THEME_darken
    & a:active
      background: rgba(0,0,0,0.1)


section > nav.groupbar
  background-color: THEME_dark
  & > a.current
    box-shadow inset 0 -3px 0 THEME


footer > nav > a, nav.groupbar > a
  color: THEME_dark_nav
  &.current
    color: THEME_dark_nav_active



LIST-border = #e5e5e5
LIST-color = #111
LIST-color-secondary = #555

.list
  & li
    background: #fff
    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

    &, & a
      color: LIST-color

      &.dark
        background: THEME_contrast
        &, & a
          color: #fff

      &.selectable:active, &.theme
        background: THEME_lighten
        &, & a
          color: #fff

      &.light
        background:  LIST-border
        text-shadow: 0 1px 0 #eee
        &, & a
          color: THEME_dark_nav

      &.anchor
        background: THEME_dark
        border-bottom: none
        &, & a
          color: #fff !important

      & small, & .right:not(.tag)
        color: LIST-color-secondary

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

.splash
  background: THEME-dark
  color: #fff
  text-shadow: 0 1px 0px rgba(0,0,0,0.2)


/* ____________________ BUTTONS ____________________ */
a.button, button
  border-radius(FORM-border-radius)
  color: white
  border-radius 2px
  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]
    background-color: black

button, .button, .tag
  &
    background-color: THEME_darken
  &.secondary
    background-color: COLOR_SECONDARY
  &.accept
    background-color: COLOR_ACCEPT
  &.cancel
    background-color: COLOR_CANCEL

FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
FORM_border_color = #D0D4C6

form, .form
  & label
    color: #999

  & 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)
    border: 1px solid #ddd
    box-shadow inset 0 1px 2px rgba(0, 0, 0, 0.1)
    border-radius (0px)
    &.error, &:required
      border-color: color_alert
      color: color_alert
      background-color: rgba(198, 15, 19, 0.1)
    &:focus
      background: #FAFAFA;
      border-color: THEME;
      color: rgba(0, 0, 0, 0.75)
    &[disabled]
        background: #eee
        border-color: #aaa
        color: #999

  & .select:after
    background: FORM_border_color
    color: white
    border-top-right-radius: FORM_border_radius
    border-bottom-right-radius: FORM_border_radius

  & input[type=range]
    box-shadow  FORM_shadow_form
    border-radius FORM_border_radius

    &:not(.checkbox)
      background-color: #c7c7c7
      &:active
        background-color: THEME_lighten


    &.checkbox
      background-color: #aaaaaa
      color: rgba(255,255,255,0.6)
      &.active
        background-color: THEME_lighten

    &::-webkit-slider-thumb
      border-radius: FORM-border-radius
      background: #fff

    &::-webkit-slider-thumb::after
      background: #ddd


  & .progress
    .labels
      font-size: 12px
      line-height: 18px
      color: #858585

    & .bar
      background: #c7c7c7
      & .value
        background-color: THEME-light
        & .label
          float: right
          margin-right: 3px
          color: rgba(0,0,0,0.6)
          text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important
          font-size: 12px


.tag
  color: #fff
  border-radius 2px
  font-weight: 400 !important
  &.count
    background: THEME
  header .count
    background: 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)
  article .list &
    box-shadow inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)

.notification
  color: #fff
  & .window
    &.confirm
      background: #333
    &.notify
      text-shadow: 0 1px 0px rgba(0,0,0,0.1)
      .box-shadow( inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25) )
      &.error
        background: NOTIFICATION-error
      &.alert
        background: NOTIFICATION-alert
      &.success
        background: NOTIFICATION-success
    &.url
      & .close
        background: #000
        border: solid 2px #fff
        box-shadow: 0 0 4px black