|
|
@@ -59,13 +59,15 @@ section
|
|
|
background-color: THEME
|
|
|
box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
|
|
|
color: #fff
|
|
|
+ border-radius: 4px 4px 0 0
|
|
|
+
|
|
|
& > footer, & nav.groupbar
|
|
|
background-color: DARK
|
|
|
box-shadow inset 0 3px 0 DARK_dark
|
|
|
& > article, & > [data-control="pull"]
|
|
|
background-color: CONTENT
|
|
|
&.splash
|
|
|
- background: THEME
|
|
|
+ background: DARK
|
|
|
color: #fff
|
|
|
&.aside
|
|
|
box-shadow -1px 0 2px rgba(0,0,0,0.2)
|
|
|
@@ -85,15 +87,11 @@ aside
|
|
|
/* -------------------------- NAVIGATION -------------------------- */
|
|
|
nav
|
|
|
section > header > &
|
|
|
- & a
|
|
|
- color: #fff
|
|
|
- &.box
|
|
|
- &:not(.right) a
|
|
|
- box-shadow 1px 0 0 THEME_light, inset -1px 0 0 THEME_dark
|
|
|
- &.right a
|
|
|
- box-shadow -1px 0 0 THEME_light, inset 1px 0 0 THEME_dark
|
|
|
- & a:active
|
|
|
- background: THEME_dark
|
|
|
+ & a:not(.button)
|
|
|
+ color: darken(THEME, 35%)
|
|
|
+ text-shadow 0 1px 0 lighten(THEME, 25%)
|
|
|
+ &:active
|
|
|
+ color: darken(THEME, 50%)
|
|
|
|
|
|
section > &.groupbar > a.active
|
|
|
box-shadow inset 0 -3px 0 THEME
|
|
|
@@ -112,17 +110,22 @@ nav
|
|
|
|
|
|
aside &
|
|
|
& a
|
|
|
- &.active .icon
|
|
|
- color: white
|
|
|
- &:not(.active) .icon
|
|
|
- color: NAV_LINK
|
|
|
- &.box
|
|
|
- &:not(.right) a
|
|
|
- box-shadow 1px 0 0 DARK, inset -1px 0 0 DARKEST
|
|
|
- &.right a
|
|
|
- box-shadow -1px 0 0 DARK, inset 1px 0 0 DARKEST
|
|
|
- & a:active
|
|
|
- background: DARKEST
|
|
|
+ color: lighten(DARK, 20%)
|
|
|
+ &:active
|
|
|
+ color: lighten(DARK, 50%)
|
|
|
+
|
|
|
+ // &.active .icon
|
|
|
+ // color: white
|
|
|
+ // &:not(.active) .icon
|
|
|
+ // color: NAV_LINK
|
|
|
+ // color: red
|
|
|
+ // &.box
|
|
|
+ // &:not(.right) a
|
|
|
+ // box-shadow 1px 0 0 DARK, inset -1px 0 0 DARKEST
|
|
|
+ // &.right a
|
|
|
+ // box-shadow -1px 0 0 DARK, inset 1px 0 0 DARKEST
|
|
|
+ // & a:active
|
|
|
+ // background: DARKEST
|
|
|
|
|
|
|
|
|
/* -------------------------- LISTS -------------------------- */
|
|
|
@@ -214,30 +217,39 @@ nav
|
|
|
color: #fff
|
|
|
|
|
|
/* -------------------------- 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:not(.icon)
|
|
|
- &
|
|
|
+header
|
|
|
+ & .button, button
|
|
|
background-color: THEME_dark
|
|
|
- &.secondary
|
|
|
- background-color: COLOR_secondary
|
|
|
- &.accept
|
|
|
- background-color: COLOR_accept
|
|
|
- &.cancel
|
|
|
- background-color: COLOR_cancel
|
|
|
+ box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
|
|
|
+ border-radius 4px
|
|
|
+ &:active
|
|
|
+ background-color: darken(THEME, 40%)
|
|
|
+
|
|
|
+article
|
|
|
+ & .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:not(.icon)
|
|
|
+ &
|
|
|
+ background-color: THEME_dark
|
|
|
+ &.secondary
|
|
|
+ background-color: COLOR_secondary
|
|
|
+ &.accept
|
|
|
+ background-color: COLOR_accept
|
|
|
+ &.cancel
|
|
|
+ background-color: COLOR_cancel
|
|
|
|
|
|
|
|
|
|