|
|
@@ -22,7 +22,6 @@ DARK = #222
|
|
|
DARK_light = lighten(DARK, 25%)
|
|
|
DARK_dark = darken(DARK, 15%)
|
|
|
DARK_darkest = darken(DARK, 30%)
|
|
|
-FORM_radius = 1px
|
|
|
LIST_color = lighten(COLOR, 5%)
|
|
|
LIST_color_2nd = lighten(COLOR, 35%)
|
|
|
LIST_border = lighten(COLOR, 90%)
|
|
|
@@ -32,6 +31,8 @@ THEME = #0093D5
|
|
|
THEME_light = lighten(THEME, 15%)
|
|
|
THEME_dark = darken(THEME, 15%)
|
|
|
|
|
|
+FORM_color = #e5e5e5
|
|
|
+BORDER_radius = 2px
|
|
|
/* -------------------------- DEFAULTS -------------------------- */
|
|
|
body
|
|
|
background-color: #000
|
|
|
@@ -55,7 +56,7 @@ section
|
|
|
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 4px 4px 0 0
|
|
|
+ border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0
|
|
|
|
|
|
& > footer, & nav[data-control=groupbar]
|
|
|
background-color: DARK
|
|
|
@@ -63,7 +64,7 @@ section
|
|
|
& > article, & > [data-control="pull"]
|
|
|
background-color: CONTENT
|
|
|
&.splash
|
|
|
- background: DARK
|
|
|
+ background: THEME
|
|
|
color: #fff
|
|
|
&.aside
|
|
|
box-shadow -1px 0 2px rgba(0,0,0,0.2)
|
|
|
@@ -113,7 +114,6 @@ nav
|
|
|
COLOR = DARK
|
|
|
background: COLOR
|
|
|
box-shadow 0 2px 0 rgba(0,0,0,0.15)
|
|
|
-
|
|
|
&.icons
|
|
|
background: rgba(0,0,0,0.8)
|
|
|
& > a
|
|
|
@@ -200,7 +200,7 @@ nav
|
|
|
/* -------------------------- TAG -------------------------- */
|
|
|
.tag:not(.icon)
|
|
|
color: #fff
|
|
|
- border-radius 2px
|
|
|
+ border-radius BORDER_radius
|
|
|
font-weight: 700 !important
|
|
|
&.count
|
|
|
background-color: THEME
|
|
|
@@ -245,14 +245,14 @@ header
|
|
|
color: #fff
|
|
|
background-color: THEME_dark
|
|
|
box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
|
|
|
- border-radius 4px
|
|
|
+ border-radius (BORDER_radius * 2)
|
|
|
&:active
|
|
|
background-color: darken(THEME, 40%)
|
|
|
|
|
|
article
|
|
|
& .button, button
|
|
|
color: #fff !important
|
|
|
- border-radius 2px
|
|
|
+ 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
|
|
|
@@ -282,7 +282,11 @@ article
|
|
|
|
|
|
|
|
|
/* -------------------------- FORMS -------------------------- */
|
|
|
-FORM_border_color = #e5e5e5
|
|
|
+.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
|
|
|
@@ -303,21 +307,19 @@ form, .form
|
|
|
background-color: lighten(COLOR_cancel, 75%)
|
|
|
font-weight: 700
|
|
|
&:focus, &:active, &:hover
|
|
|
- background: lighten(THEME, 95%)
|
|
|
- color: rgba(0, 0, 0, 0.75)
|
|
|
+ color: THEME_dark
|
|
|
&[disabled]
|
|
|
- background: darken(FORM_border_color, 10%)
|
|
|
+ background: darken(FORM_color, 10%)
|
|
|
color: #999
|
|
|
&.large
|
|
|
font-weight: 700
|
|
|
|
|
|
-
|
|
|
& .select:after
|
|
|
- background: darken(FORM_border_color, 10%)
|
|
|
+ background: darken(FORM_color, 10%)
|
|
|
color: #fff
|
|
|
|
|
|
& input[type=range]
|
|
|
- border-radius: 0px
|
|
|
+ border-radius 0px
|
|
|
&:not(.checkbox)
|
|
|
background-color: #ddd
|
|
|
&:active
|
|
|
@@ -331,15 +333,13 @@ form, .form
|
|
|
background-color: THEME_light
|
|
|
|
|
|
&::-webkit-slider-thumb
|
|
|
- border-radius: 2px
|
|
|
- background-color: lighten(FORM_border_color, 50%)
|
|
|
- border: solid 1px FORM_border_color
|
|
|
+ border-radius BORDER_radius
|
|
|
+ background-color: lighten(FORM_color, 50%)
|
|
|
+ border: solid 1px FORM_color
|
|
|
&::-webkit-slider-thumb::after
|
|
|
- background: FORM_border_color
|
|
|
-
|
|
|
- & .progress
|
|
|
- & .bar
|
|
|
- background-color: #ddd
|
|
|
- & .value
|
|
|
- background-color: THEME_light
|
|
|
+ background: FORM_color
|
|
|
|
|
|
+ & .progress .bar
|
|
|
+ background-color: #ddd
|
|
|
+ & .value
|
|
|
+ background-color: THEME_light
|
Javi Jimenez Villar