Permalink
Browse files

design update

  • Loading branch information...
1 parent b30e687 commit 05352485add3913644d4ece2ca3f9bfeb2f8a0ce teppei machida committed May 23, 2012
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,3 +0,0 @@
-// Place all the styles related to the activities controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
@@ -1,6 +1,7 @@
@import compass/reset
@import compass/utilities
@import compass/css3
+@import sass/colors
@import sass/mixins
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono)
@import sass/layout
@@ -0,0 +1,67 @@
+$basic_font_famiry: 13px/1.231 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 'メイリオ', sans-serif
+$basic_bg_color: #223b51
+$basic_font_color: #c8e0f4
+$basic_right_color: #fff
+$basic_border_color: hsla(218, 75%, 9%, .4)
+
+=basic_link
+ &:link,
+ &:visited
+ color: $basic_font_color
+ &:hover,
+ &:active
+ color: $basic_right_color
+
+
+$global_bg: #061421
+
+$light_bg_color: #dff0fe
+$light_font_color: #000
+
+$member_header_bg_color: hsla(208, 28%, 39%, .35)
+
+$label_font_color: #172c42
+$label_text_shadow: #8bb0cf 0 1px 0
+$label_height: 32px
+$label_font_size: 18px
+$label_border_color: #103f68
+$label_box_shadow: rgba(255, 255, 255, .4) 0 0 2px inset
+
+=label
+ background-color: #7da8ca
+ @include filter-gradient(#7da8ca, #6690b3, vertical)
+ $experimental-support-for-svg: true
+ @include background-image(linear-gradient(top, hsla(206,42%,64%,1) 0%,hsla(207,34%,55%,1) 100%))
+ box-shadow: $label_box_shadow
+ border-top: #103f68 solid 1px
+ border-bottom: #103f68 solid 1px
+ padding: 0 0 0 12px
+ cursor: pointer
+ &:hover
+ background-color: #48a6f5
+ @include filter-gradient(#48a6f5, #308ddc, vertical)
+ $experimental-support-for-svg: true
+ @include background-image(linear-gradient(top, hsla(207,90%,62%,1) 0%,hsla(208,71%,53%,1) 100%))
+ h2
+ color: $label_font_color
+ text-shadow: $label_text_shadow
+ font:
+ size: $label_font_size
+ weight: bold
+ line-height: $label_height
+
+$blue_button_shadow: rgba(255, 255, 255, .6) 0 0 1px inset, rgba(0, 0, 0, .4) 0 2px 2px
+=blue_button_color
+ background-color: #84aac9
+ @include filter-gradient(#84aac9, #567a9a, vertical)
+ $experimental-support-for-svg: true
+ @include background-image(linear-gradient(top, hsla(207,39%,65%,1) 0%,hsla(208,28%,47%,1) 100%))
+
+=blue_button
+ display: block
+ +blue_button_color
+ +box-shadow($blue_button_shadow)
+ cursor: pointer
+ color: $label_font_color
+ font-weight: bold
+ text-shadow: $label_text_shadow
@@ -1,25 +1,27 @@
body
- background: image_url("body.gif")
- color: #cad5d7
+ background: image_url("body.gif") $basic_bg_color
+ color: $basic_font_color
+ font: $basic_font_famiry
#wrapper
overflow-y: hidden
min-width: 1000px
#header
+clearfix
- border-bottom: #495051 solid 1px
+ border-bottom: $basic_border_color solid 1px
.header
- border-bottom: #272d2e 4px solid
+ border-bottom: $basic_border_color 8px solid
+ $header_height: 58px
position: relative
+clearfix
h1
padding: 0 0 0 16px
- line-height: 52px
+ line-height: $header_height
float: left
- font-size: 30px
+ font-size: 26px
font-weight: bold
a
text-decoration: none
- color: #cad5d7
+ +basic_link
nav.members
padding: 4px 0 0 16px
float: left
@@ -72,26 +74,31 @@ body
$experimental-support-for-svg: true
@include background-image(linear-gradient(top, rgba(1,120,159,1) 0%,rgba(0,99,131,1) 100%))
-
+
+$global_widht: 70px
+
div#main
- margin: 0 0 0 50px
+ margin: 0 0 0 $global_widht
position: absolute
+clearfix
nav#global
- background: #222
+ background: $global_bg
position: absolute
left: 0
top: 0
- width: 40px
- padding: 10px 5px
- +box-shadow(#000 0 0 4px inset)
- a
- display: block
- width: 40px
- height: 40px
- background: rgba(200, 200, 200, .1)
- +border-radius(20px)
- margin: 0 0 10px 0
+ width: $global_widht
+ +box-shadow(#000 0 0 5px 1px inset)
+ ul
+ padding: 6px 10px
+ +clearfix
+ li
+ a
+ display: block
+ width: 50px
+ height: 50px
+ background: rgba(200, 200, 200, .1)
+ +border-radius(25px)
+ margin: 0 0 10px 0
#notice
position: absolute
top: 30px
@@ -112,55 +112,54 @@ body.parties_show
.member
height: 100%
float: left
- width: 290px
- border-right: #272d2e solid 3px
+ width: 284px
+ border-right: $basic_border_color solid 4px
margin: -1px 0 0 0
+clearfix
.header
- background: rgba(0, 0, 0, .2)
- padding: 6px 10px
+ $member_header_height: 80px
+ background: $member_header_bg_color
+ padding: 0 10px
position: relative
+ height: $member_header_height
+clearfix
- &.hover
- +box-shadow(rgba(0, 0, 0, .3) 0 2px 5px)
.information
float: left
ul
li
display: block
li.name
- padding: 2px 0 6px 0
+ padding: 8px 0 4px 0
white-space: nowrap
overflow: hidden
a
- color: #CAD5D7
- font-size: 16px
- font-weight: bold
+ font-size: 20px
text-decoration: none
line-height: 1.4
+ +basic_link
li.state
text-align: center
- width: 90px
- background: #000
- line-height: 24px
- font-size: 13px
- +border-radius(6px)
+ width: 120px
+ line-height: 26px
+ font-size: 14px
+ +border-radius(4px)
+ +blue_button
span
form
- font-size: 16px
+ font-size: 13px
.icon
float: left
- padding: 0 10px 0 0
+ padding: 8px 14px 0 0
a
- width: 50px
- height: 50px
- padding: 4px
+ width: 52px
+ height: 52px
+ padding: 6px
background: rgba(0, 0, 0, .2)
- +border-radius(28px)
+ +border-radius(32px)
display: block
+box-shadow(#495051 0 1px 0)
img
- width: 50px
+ width: 52px
height: auto
+border-radius(25px)
.body
@@ -170,29 +169,19 @@ body.parties_show
.current
+clearfix
.label
- padding: 0 10px
- border-bottom: #00516b solid 1px
- background-color: rgb(1,120,159)
- @include filter-gradient(#01789f, #006383, vertical)
- $experimental-support-for-svg: true
- @include background-image(linear-gradient(top, rgba(1,120,159,1) 0%,rgba(0,99,131,1) 100%))
- h2
- line-height: 26px
- font-size: 14px
- font-weight: bold
- color: #fff
+ +label
.doing
clear: both
padding: 10px
- background: rgba(0, 0, 0, .6)
+ background: $light_bg_color
cursor: pointer
+clearfix
ul
li.task
p
font-size: 13px
line-height: 1.6
- color: #fff
+ color: $light_font_color
+word-break
ul
li.empty
@@ -224,28 +213,26 @@ body.parties_show
float: right
display: block
+border-radius(4px)
- overflow: hidden
+ padding: 0 0 3px 0
+ +clearfix
li
display: inline
a
+ +blue_button
display: block
float: left
- font-size: 12px
- line-height: 28px
+ line-height: 22px
padding: 0 10px
- color: #fff
font-weight: bold
text-decoration: none
- background: rgba(255, 255, 255, .1)
- border: #000 1px solid
.hold
a
+border-radius(4px 0 0 4px)
- border-right: rgba(0, 0, 0, .4) 1px solid
+ border-right: $label_font_color 1px solid
.finish
a
+border-radius(0 4px 4px 0)
- border-left: rgba(100, 100, 100, .2) 1px solid
+ border-left: $label_text_shadow 1px solid
.activities
clear: both
@@ -285,17 +272,7 @@ body.parties_show
clear: both
+clearfix
.label
- padding: 0 10px
- border-bottom: #00516b solid 1px
- background-color: rgb(1,120,159)
- @include filter-gradient(#01789f, #006383, vertical)
- $experimental-support-for-svg: true
- @include background-image(linear-gradient(top, rgba(1,120,159,1) 0%,rgba(0,99,131,1) 100%))
- h2
- line-height: 26px
- font-size: 14px
- font-weight: bold
- color: #fff
+ +label
.add
padding: 10px 10px 10px 10px
+clearfix
@@ -392,17 +369,7 @@ body.parties_show
clear: both
+clearfix
.label
- padding: 0 10px
- border-bottom: #00516b solid 1px
- background-color: rgb(1,120,159)
- @include filter-gradient(#01789f, #006383, vertical)
- $experimental-support-for-svg: true
- @include background-image(linear-gradient(top, rgba(1,120,159,1) 0%,rgba(0,99,131,1) 100%))
- h2
- line-height: 26px
- font-size: 14px
- font-weight: bold
- color: #fff
+ +label
.add
padding: 10px 0
ul
@@ -1,3 +1,4 @@
-= link_to "HOME", root_path
-- if user_signed_in?
- = link_to "Sign Out", signout_path
+%ul
+ %li= link_to "HOME", root_path
+ - if user_signed_in?
+ %li= link_to "Sign Out", signout_path

0 comments on commit 0535248

Please sign in to comment.