mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 05:44:24 +00:00
179 lines
3.3 KiB
Sass
179 lines
3.3 KiB
Sass
@import "compass/reset"
|
|
@import "compass/css3"
|
|
@import "compass/utilities/general/clearfix"
|
|
|
|
body, input, textarea
|
|
margin: 40px
|
|
color: #888
|
|
background: #222
|
|
font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif
|
|
-wbkite-font-smoothing: antialiased
|
|
|
|
h1, h2, h3, h4, h5, h6
|
|
color: white
|
|
font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif
|
|
line-height: 1em
|
|
font-weight: 600
|
|
margin-bottom: 0.5em
|
|
|
|
h1
|
|
font-size: 72px
|
|
line-height: 0.5em
|
|
margin-bottom: 0.3em
|
|
small
|
|
font-size: 20px
|
|
span
|
|
+transition( color 1s)
|
|
&:hover
|
|
.char1
|
|
+transition( color .2s)
|
|
color: red
|
|
.char2
|
|
+transition( color .2s .1s)
|
|
color: orange
|
|
.char3
|
|
+transition( color .2s .2s)
|
|
color: yellow
|
|
.char4
|
|
+transition( color .2s .3s)
|
|
color: green
|
|
.char5
|
|
+transition( color .2s .4s)
|
|
color: blue
|
|
.char6
|
|
+transition( color .2s .5s)
|
|
color: indigo
|
|
.char7
|
|
+transition( color .2s .6s)
|
|
color: violet
|
|
.char8
|
|
+transition( color .2s .7s)
|
|
color: red
|
|
.char9
|
|
+transition( color .2s .8s)
|
|
color: orange
|
|
.char10
|
|
+transition( color .2s .9s)
|
|
color: yellow
|
|
.char11
|
|
+transition( color .2s 1s)
|
|
color: green
|
|
|
|
h2
|
|
font-size: 40px
|
|
line-height: 1.2em
|
|
text-align: center
|
|
|
|
h3
|
|
font-size: 16px
|
|
letter-spacing: 0.1em
|
|
text-transform: uppercase
|
|
|
|
h4
|
|
font-size: 20px
|
|
margin-bottom: 1.25em
|
|
|
|
p
|
|
margin-bottom: 1.25em
|
|
|
|
|
|
strong
|
|
font-weight: bold
|
|
|
|
|
|
/* Forms */
|
|
input
|
|
&[type=text], &[type=password]
|
|
background: #fafafa
|
|
+box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.1))
|
|
border: 1px solid #dddddd
|
|
color: #888888
|
|
+border-radius(4px)
|
|
|
|
textarea
|
|
background: #fafafa
|
|
+box-shadow( inset 0 1px 1px rgba(0, 0, 0, 0.1))
|
|
border: 1px solid #dddddd
|
|
color: #888888
|
|
+border-radius(4px)
|
|
|
|
input[type=text]:focus
|
|
color: #373737
|
|
|
|
textarea
|
|
&:focus
|
|
color: #373737
|
|
padding-left: 3px
|
|
width: 98%
|
|
|
|
input[type=text]
|
|
padding: 3px
|
|
|
|
|
|
/* Links */
|
|
a
|
|
color: #09a1ec
|
|
text-decoration: none
|
|
&:hover
|
|
color: #7fd2fa
|
|
|
|
#container
|
|
width: 900px
|
|
margin: 0 auto
|
|
|
|
header
|
|
padding-bottom: 40px
|
|
text-align: center
|
|
width: 600px
|
|
margin: 0 auto
|
|
|
|
.medianCutPalette h3
|
|
margin-top: 20px
|
|
|
|
.imageSection
|
|
margin-bottom: 80px
|
|
background: #111111
|
|
+border-radius(10px)
|
|
+pie-clearfix
|
|
.imageWrap
|
|
+border-left-radius(10px)
|
|
width: 400px
|
|
height: 300px
|
|
float: left
|
|
margin-right: 20px
|
|
background: url(../img/dark_checkered_bg.png)
|
|
.targetImage
|
|
+border-left-radius(10px)
|
|
.colors
|
|
margin-top: 20px
|
|
width: 400px
|
|
float: left
|
|
.function
|
|
clear: left
|
|
margin-bottom: 10px
|
|
+pie-clearfix
|
|
.swatches .swatch
|
|
width: 40px
|
|
height: 20px
|
|
margin-right: 2px
|
|
background: #dddddd
|
|
float: left
|
|
+transition( all .5s)
|
|
&:hover
|
|
+transition( none)
|
|
+scale(1.2, 1.2)
|
|
+box-shadow( 0 1px 10px black)
|
|
&:first-child
|
|
+border-left-radius(4px)
|
|
&:last-child
|
|
+border-right-radius(4px)
|
|
|
|
/* Hardcoding the offset for the FB icon example
|
|
.fbIcon .imageWrap .targetImage
|
|
+border-radius(0)
|
|
position: relative
|
|
top: 142px
|
|
left: 192px
|
|
|
|
canvas
|
|
display: none |