mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 22:04:25 +00:00
Drag-n-drop support+. Thanks nspady.
- Updated to higher res demo images. - Split template into two. - Style clean up in color-thief.js
This commit is contained in:
Lokesh Dhakar
651
css/app.css
651
css/app.css
@@ -1,4 +1,4 @@
|
|||||||
/* line 17, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 17, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
html, body, div, span, applet, object, iframe,
|
html, body, div, span, applet, object, iframe,
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
a, abbr, acronym, address, big, cite, code,
|
a, abbr, acronym, address, big, cite, code,
|
||||||
@@ -20,412 +20,220 @@ time, mark, audio, video {
|
|||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 22, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 22, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
html {
|
html {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 24, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 24, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
ol, ul {
|
ol, ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 26, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 26, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 28, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 28, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
caption, th, td {
|
caption, th, td {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 30, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 30, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
q, blockquote {
|
q, blockquote {
|
||||||
quotes: none;
|
quotes: none;
|
||||||
}
|
}
|
||||||
/* line 103, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 103, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
q:before, q:after, blockquote:before, blockquote:after {
|
q:before, q:after, blockquote:before, blockquote:after {
|
||||||
content: "";
|
content: "";
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 32, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 32, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
a img {
|
a img {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 116, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 116, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 5, ../sass/app.sass */
|
/* line 29, ../sass/app.sass */
|
||||||
body, input, textarea {
|
body, input, textarea {
|
||||||
margin: 40px;
|
margin: 40px;
|
||||||
color: #888888;
|
color: #aaaaaa;
|
||||||
background: #222222;
|
background: #444444;
|
||||||
font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif;
|
font-size: 18px;
|
||||||
-wbkite-font-smoothing: antialiased;
|
font-family: "Karla", "lucida grande", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 12, ../sass/app.sass */
|
/* line 36, ../sass/app.sass */
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif;
|
line-height: 1.2em;
|
||||||
line-height: 1em;
|
font-weight: 500;
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 19, ../sass/app.sass */
|
/* line 42, ../sass/app.sass */
|
||||||
h1 {
|
|
||||||
font-size: 72px;
|
|
||||||
line-height: 0.5em;
|
|
||||||
margin-bottom: 0.3em;
|
|
||||||
}
|
|
||||||
/* line 23, ../sass/app.sass */
|
|
||||||
h1 small {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
/* line 25, ../sass/app.sass */
|
|
||||||
h1 span {
|
|
||||||
-webkit-transition: color 1s;
|
|
||||||
-moz-transition: color 1s;
|
|
||||||
-o-transition: color 1s;
|
|
||||||
transition: color 1s;
|
|
||||||
}
|
|
||||||
/* line 28, ../sass/app.sass */
|
|
||||||
h1:hover .char1 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-moz-transition: color 0.2s;
|
|
||||||
-o-transition: color 0.2s;
|
|
||||||
transition: color 0.2s;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
/* line 31, ../sass/app.sass */
|
|
||||||
h1:hover .char2 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.1s;
|
|
||||||
-moz-transition: color 0.2s 0.1s;
|
|
||||||
-o-transition: color 0.2s 0.1s;
|
|
||||||
transition: color 0.2s 0.1s;
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
/* line 34, ../sass/app.sass */
|
|
||||||
h1:hover .char3 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.2s;
|
|
||||||
-moz-transition: color 0.2s 0.2s;
|
|
||||||
-o-transition: color 0.2s 0.2s;
|
|
||||||
transition: color 0.2s 0.2s;
|
|
||||||
color: yellow;
|
|
||||||
}
|
|
||||||
/* line 37, ../sass/app.sass */
|
|
||||||
h1:hover .char4 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.3s;
|
|
||||||
-moz-transition: color 0.2s 0.3s;
|
|
||||||
-o-transition: color 0.2s 0.3s;
|
|
||||||
transition: color 0.2s 0.3s;
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
/* line 40, ../sass/app.sass */
|
|
||||||
h1:hover .char5 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.4s;
|
|
||||||
-moz-transition: color 0.2s 0.4s;
|
|
||||||
-o-transition: color 0.2s 0.4s;
|
|
||||||
transition: color 0.2s 0.4s;
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
/* line 43, ../sass/app.sass */
|
|
||||||
h1:hover .char6 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.5s;
|
|
||||||
-moz-transition: color 0.2s 0.5s;
|
|
||||||
-o-transition: color 0.2s 0.5s;
|
|
||||||
transition: color 0.2s 0.5s;
|
|
||||||
color: indigo;
|
|
||||||
}
|
|
||||||
/* line 46, ../sass/app.sass */
|
|
||||||
h1:hover .char7 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.6s;
|
|
||||||
-moz-transition: color 0.2s 0.6s;
|
|
||||||
-o-transition: color 0.2s 0.6s;
|
|
||||||
transition: color 0.2s 0.6s;
|
|
||||||
color: violet;
|
|
||||||
}
|
|
||||||
/* line 49, ../sass/app.sass */
|
|
||||||
h1:hover .char8 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.7s;
|
|
||||||
-moz-transition: color 0.2s 0.7s;
|
|
||||||
-o-transition: color 0.2s 0.7s;
|
|
||||||
transition: color 0.2s 0.7s;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
/* line 52, ../sass/app.sass */
|
|
||||||
h1:hover .char9 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.8s;
|
|
||||||
-moz-transition: color 0.2s 0.8s;
|
|
||||||
-o-transition: color 0.2s 0.8s;
|
|
||||||
transition: color 0.2s 0.8s;
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
/* line 55, ../sass/app.sass */
|
|
||||||
h1:hover .char10 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 0.9s;
|
|
||||||
-moz-transition: color 0.2s 0.9s;
|
|
||||||
-o-transition: color 0.2s 0.9s;
|
|
||||||
transition: color 0.2s 0.9s;
|
|
||||||
color: yellow;
|
|
||||||
}
|
|
||||||
/* line 58, ../sass/app.sass */
|
|
||||||
h1:hover .char11 {
|
|
||||||
-webkit-transition: color 0.2s;
|
|
||||||
-webkit-transition-delay: 1s;
|
|
||||||
-moz-transition: color 0.2s 1s;
|
|
||||||
-o-transition: color 0.2s 1s;
|
|
||||||
transition: color 0.2s 1s;
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* line 62, ../sass/app.sass */
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 40px;
|
font-size: 36px;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 67, ../sass/app.sass */
|
/* line 46, ../sass/app.sass */
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 72, ../sass/app.sass */
|
/* line 51, ../sass/app.sass */
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-bottom: 1.25em;
|
margin-bottom: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 76, ../sass/app.sass */
|
/* line 55, ../sass/app.sass */
|
||||||
p {
|
p {
|
||||||
|
line-height: 1.5em;
|
||||||
margin-bottom: 1.25em;
|
margin-bottom: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 80, ../sass/app.sass */
|
/* line 59, ../sass/app.sass */
|
||||||
strong {
|
strong {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Drag and Drop area */
|
|
||||||
/* line 84, ../sass/app.sass */
|
|
||||||
.dropZone {
|
|
||||||
width: 900px;
|
|
||||||
height: 200px;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
background: url("../img/drag_placeholder.png");
|
|
||||||
}
|
|
||||||
/* line 89, ../sass/app.sass */
|
|
||||||
.dropZone.dragging {
|
|
||||||
-webkit-box-shadow: inset 0 1px 10px #09a1ec;
|
|
||||||
-moz-box-shadow: inset 0 1px 10px #09a1ec;
|
|
||||||
box-shadow: inset 0 1px 10px #09a1ec;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* line 91, ../sass/app.sass */
|
|
||||||
.droppedImage {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forms */
|
|
||||||
/* line 99, ../sass/app.sass */
|
|
||||||
input[type=text], input[type=password] {
|
|
||||||
background: #fafafa;
|
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
||||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
color: #888888;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
-ms-border-radius: 4px;
|
|
||||||
-o-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* line 106, ../sass/app.sass */
|
|
||||||
textarea {
|
|
||||||
background: #fafafa;
|
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
||||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
color: #888888;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
-ms-border-radius: 4px;
|
|
||||||
-o-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* line 113, ../sass/app.sass */
|
|
||||||
input[type=text]:focus {
|
|
||||||
color: #373737;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* line 116, ../sass/app.sass */
|
|
||||||
textarea {
|
|
||||||
padding-left: 3px;
|
|
||||||
width: 98%;
|
|
||||||
}
|
|
||||||
/* line 117, ../sass/app.sass */
|
|
||||||
textarea:focus {
|
|
||||||
color: #373737;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* line 122, ../sass/app.sass */
|
|
||||||
input[type=text] {
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Links */
|
/* Links */
|
||||||
/* line 127, ../sass/app.sass */
|
/* line 63, ../sass/app.sass */
|
||||||
a {
|
a {
|
||||||
color: #09a1ec;
|
color: #00bfa8;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
/* line 130, ../sass/app.sass */
|
/* line 66, ../sass/app.sass */
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #7fd2fa;
|
color: #59ffeb;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 133, ../sass/app.sass */
|
/* -- Layout ------------------------------------------------------------------ */
|
||||||
#container {
|
/* line 71, ../sass/app.sass */
|
||||||
width: 900px;
|
.wrapper {
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* line 137, ../sass/app.sass */
|
|
||||||
header {
|
|
||||||
padding-bottom: 40px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 600px;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 143, ../sass/app.sass */
|
/* line 76, ../sass/app.sass */
|
||||||
.medianCutPalette h3 {
|
.description {
|
||||||
|
max-width: 450px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 81, ../sass/app.sass */
|
||||||
|
.image-section {
|
||||||
|
margin-bottom: 80px;
|
||||||
|
background: #2b2b2b;
|
||||||
|
}
|
||||||
|
/* line 84, ../sass/app.sass */
|
||||||
|
.image-section .image-wrap {
|
||||||
|
position: relative;
|
||||||
|
background: #444444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 89, ../sass/app.sass */
|
||||||
|
.target-image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 92, ../sass/app.sass */
|
||||||
|
.run-functions-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin-top: -50px;
|
||||||
|
margin-left: -50px;
|
||||||
|
border: none;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
-ms-border-radius: 50%;
|
||||||
|
-o-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #817702;
|
||||||
|
background-color: #fdf485;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* line 106, ../sass/app.sass */
|
||||||
|
.run-functions-button:hover {
|
||||||
|
background-color: #fef9b7;
|
||||||
|
color: #9a8f03;
|
||||||
|
}
|
||||||
|
/* line 109, ../sass/app.sass */
|
||||||
|
.run-functions-button:active {
|
||||||
|
-webkit-transform: scale(0.9, 0.9);
|
||||||
|
-moz-transform: scale(0.9, 0.9);
|
||||||
|
-ms-transform: scale(0.9, 0.9);
|
||||||
|
-o-transform: scale(0.9, 0.9);
|
||||||
|
transform: scale(0.9, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 112, ../sass/app.sass */
|
||||||
|
.color-thief-output {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 146, ../sass/app.sass */
|
/* line 115, ../sass/app.sass */
|
||||||
.imageSection {
|
.function {
|
||||||
margin-bottom: 80px;
|
|
||||||
background: #111111;
|
|
||||||
-webkit-border-radius: 10px;
|
|
||||||
-moz-border-radius: 10px;
|
|
||||||
-ms-border-radius: 10px;
|
|
||||||
-o-border-radius: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
*zoom: 1;
|
|
||||||
}
|
|
||||||
/* line 38, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
|
||||||
.imageSection:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
/* line 151, ../sass/app.sass */
|
|
||||||
.imageSection .imageWrap {
|
|
||||||
-moz-border-radius-topleft: 10px;
|
|
||||||
-webkit-border-top-left-radius: 10px;
|
|
||||||
border-top-left-radius: 10px;
|
|
||||||
-moz-border-radius-bottomleft: 10px;
|
|
||||||
-webkit-border-bottom-left-radius: 10px;
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
width: 400px;
|
|
||||||
height: 300px;
|
|
||||||
float: left;
|
|
||||||
margin-right: 20px;
|
|
||||||
background: url(../img/dark_checkered_bg.png);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
/* line 160, ../sass/app.sass */
|
|
||||||
.imageSection .colors {
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 400px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
/* line 164, ../sass/app.sass */
|
|
||||||
.imageSection .colors .function {
|
|
||||||
clear: left;
|
clear: left;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
}
|
}
|
||||||
/* line 38, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
||||||
.imageSection .colors .function:after {
|
.function:after {
|
||||||
content: "";
|
content: "";
|
||||||
display: table;
|
display: table;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
/* line 168, ../sass/app.sass */
|
|
||||||
.imageSection .colors .function .swatches .swatch {
|
/* line 120, ../sass/app.sass */
|
||||||
width: 40px;
|
.swatch {
|
||||||
height: 20px;
|
width: 60px;
|
||||||
|
height: 30px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
background: #dddddd;
|
background: #dddddd;
|
||||||
float: left;
|
float: left;
|
||||||
-webkit-transition: all 0.5s;
|
-webkit-transition: scale 0.5s;
|
||||||
-moz-transition: all 0.5s;
|
-moz-transition: scale 0.5s;
|
||||||
-o-transition: all 0.5s;
|
-o-transition: scale 0.5s;
|
||||||
transition: all 0.5s;
|
transition: scale 0.5s;
|
||||||
}
|
}
|
||||||
/* line 175, ../sass/app.sass */
|
/* line 127, ../sass/app.sass */
|
||||||
.imageSection .colors .function .swatches .swatch:hover {
|
.swatch:hover {
|
||||||
-webkit-transition: none;
|
-webkit-transition: none;
|
||||||
-moz-transition: none;
|
-moz-transition: none;
|
||||||
-o-transition: none;
|
-o-transition: none;
|
||||||
transition: none;
|
transition: none;
|
||||||
-webkit-transform: scale(1.2, 1.2);
|
-webkit-transform: scale(1.1, 1.1);
|
||||||
-moz-transform: scale(1.2, 1.2);
|
-moz-transform: scale(1.1, 1.1);
|
||||||
-ms-transform: scale(1.2, 1.2);
|
-ms-transform: scale(1.1, 1.1);
|
||||||
-o-transform: scale(1.2, 1.2);
|
-o-transform: scale(1.1, 1.1);
|
||||||
transform: scale(1.2, 1.2);
|
transform: scale(1.1, 1.1);
|
||||||
-webkit-box-shadow: 0 1px 10px black;
|
-webkit-box-shadow: 0 1px 10px black;
|
||||||
-moz-box-shadow: 0 1px 10px black;
|
-moz-box-shadow: 0 1px 10px black;
|
||||||
box-shadow: 0 1px 10px black;
|
box-shadow: 0 1px 10px black;
|
||||||
}
|
}
|
||||||
/* line 179, ../sass/app.sass */
|
|
||||||
.imageSection .colors .function .swatches .swatch:first-child {
|
|
||||||
-moz-border-radius-topleft: 4px;
|
|
||||||
-webkit-border-top-left-radius: 4px;
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
-moz-border-radius-bottomleft: 4px;
|
|
||||||
-webkit-border-bottom-left-radius: 4px;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
}
|
|
||||||
/* line 181, ../sass/app.sass */
|
|
||||||
.imageSection .colors .function .swatches .swatch:last-child {
|
|
||||||
-moz-border-radius-topright: 4px;
|
|
||||||
-webkit-border-top-right-radius: 4px;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
-moz-border-radius-bottomright: 4px;
|
|
||||||
-webkit-border-bottom-right-radius: 4px;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hardcoding the offset for the FB icon example */
|
/* Hardcoding the offset for the FB icon example */
|
||||||
/* line 185, ../sass/app.sass */
|
/* line 133, ../sass/app.sass */
|
||||||
.fbIcon .imageWrap .targetImage {
|
.fbIcon .imageWrap .targetImage {
|
||||||
-webkit-border-radius: 0;
|
-webkit-border-radius: 0;
|
||||||
-moz-border-radius: 0;
|
-moz-border-radius: 0;
|
||||||
@@ -437,7 +245,240 @@ header {
|
|||||||
left: 192px;
|
left: 192px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* line 191, ../sass/app.sass */
|
/* line 139, ../sass/app.sass */
|
||||||
canvas {
|
canvas {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* -- Animated logo ------------------------------------------------------------------ */
|
||||||
|
/* line 143, ../sass/app.sass */
|
||||||
|
h1 {
|
||||||
|
font-size: 72px;
|
||||||
|
line-height: 0.5em;
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
/* line 147, ../sass/app.sass */
|
||||||
|
h1 small {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
/* line 150, ../sass/app.sass */
|
||||||
|
h1 .char1 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-moz-transition: color 0.1s;
|
||||||
|
-o-transition: color 0.1s;
|
||||||
|
transition: color 0.1s;
|
||||||
|
}
|
||||||
|
/* line 152, ../sass/app.sass */
|
||||||
|
h1 .char2 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.05s;
|
||||||
|
-moz-transition: color 0.1s 0.05s;
|
||||||
|
-o-transition: color 0.1s 0.05s;
|
||||||
|
transition: color 0.1s 0.05s;
|
||||||
|
}
|
||||||
|
/* line 154, ../sass/app.sass */
|
||||||
|
h1 .char3 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.1s;
|
||||||
|
-moz-transition: color 0.1s 0.1s;
|
||||||
|
-o-transition: color 0.1s 0.1s;
|
||||||
|
transition: color 0.1s 0.1s;
|
||||||
|
}
|
||||||
|
/* line 156, ../sass/app.sass */
|
||||||
|
h1 .char4 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.15s;
|
||||||
|
-moz-transition: color 0.1s 0.15s;
|
||||||
|
-o-transition: color 0.1s 0.15s;
|
||||||
|
transition: color 0.1s 0.15s;
|
||||||
|
}
|
||||||
|
/* line 158, ../sass/app.sass */
|
||||||
|
h1 .char5 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.2s;
|
||||||
|
-moz-transition: color 0.1s 0.2s;
|
||||||
|
-o-transition: color 0.1s 0.2s;
|
||||||
|
transition: color 0.1s 0.2s;
|
||||||
|
}
|
||||||
|
/* line 161, ../sass/app.sass */
|
||||||
|
h1 .char7 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.3s;
|
||||||
|
-moz-transition: color 0.1s 0.3s;
|
||||||
|
-o-transition: color 0.1s 0.3s;
|
||||||
|
transition: color 0.1s 0.3s;
|
||||||
|
}
|
||||||
|
/* line 163, ../sass/app.sass */
|
||||||
|
h1 .char8 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.35s;
|
||||||
|
-moz-transition: color 0.1s 0.35s;
|
||||||
|
-o-transition: color 0.1s 0.35s;
|
||||||
|
transition: color 0.1s 0.35s;
|
||||||
|
}
|
||||||
|
/* line 165, ../sass/app.sass */
|
||||||
|
h1 .char9 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.4s;
|
||||||
|
-moz-transition: color 0.1s 0.4s;
|
||||||
|
-o-transition: color 0.1s 0.4s;
|
||||||
|
transition: color 0.1s 0.4s;
|
||||||
|
}
|
||||||
|
/* line 167, ../sass/app.sass */
|
||||||
|
h1 .char10 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.45s;
|
||||||
|
-moz-transition: color 0.1s 0.45s;
|
||||||
|
-o-transition: color 0.1s 0.45s;
|
||||||
|
transition: color 0.1s 0.45s;
|
||||||
|
}
|
||||||
|
/* line 169, ../sass/app.sass */
|
||||||
|
h1 .char11 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.5s;
|
||||||
|
-moz-transition: color 0.1s 0.5s;
|
||||||
|
-o-transition: color 0.1s 0.5s;
|
||||||
|
transition: color 0.1s 0.5s;
|
||||||
|
}
|
||||||
|
/* line 172, ../sass/app.sass */
|
||||||
|
h1:hover .char1 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-moz-transition: color 0.1s;
|
||||||
|
-o-transition: color 0.1s;
|
||||||
|
transition: color 0.1s;
|
||||||
|
color: #ff4040;
|
||||||
|
}
|
||||||
|
/* line 175, ../sass/app.sass */
|
||||||
|
h1:hover .char2 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.05s;
|
||||||
|
-moz-transition: color 0.1s 0.05s;
|
||||||
|
-o-transition: color 0.1s 0.05s;
|
||||||
|
transition: color 0.1s 0.05s;
|
||||||
|
color: #ff8000;
|
||||||
|
}
|
||||||
|
/* line 178, ../sass/app.sass */
|
||||||
|
h1:hover .char3 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.1s;
|
||||||
|
-moz-transition: color 0.1s 0.1s;
|
||||||
|
-o-transition: color 0.1s 0.1s;
|
||||||
|
transition: color 0.1s 0.1s;
|
||||||
|
color: #fdf485;
|
||||||
|
}
|
||||||
|
/* line 181, ../sass/app.sass */
|
||||||
|
h1:hover .char4 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.15s;
|
||||||
|
-moz-transition: color 0.1s 0.15s;
|
||||||
|
-o-transition: color 0.1s 0.15s;
|
||||||
|
transition: color 0.1s 0.15s;
|
||||||
|
color: #00bfa8;
|
||||||
|
}
|
||||||
|
/* line 184, ../sass/app.sass */
|
||||||
|
h1:hover .char5 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.2s;
|
||||||
|
-moz-transition: color 0.1s 0.2s;
|
||||||
|
-o-transition: color 0.1s 0.2s;
|
||||||
|
transition: color 0.1s 0.2s;
|
||||||
|
color: #0096df;
|
||||||
|
}
|
||||||
|
/* line 188, ../sass/app.sass */
|
||||||
|
h1:hover .char7 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.3s;
|
||||||
|
-moz-transition: color 0.1s 0.3s;
|
||||||
|
-o-transition: color 0.1s 0.3s;
|
||||||
|
transition: color 0.1s 0.3s;
|
||||||
|
color: #ff4040;
|
||||||
|
}
|
||||||
|
/* line 191, ../sass/app.sass */
|
||||||
|
h1:hover .char8 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.35s;
|
||||||
|
-moz-transition: color 0.1s 0.35s;
|
||||||
|
-o-transition: color 0.1s 0.35s;
|
||||||
|
transition: color 0.1s 0.35s;
|
||||||
|
color: #ff8000;
|
||||||
|
}
|
||||||
|
/* line 194, ../sass/app.sass */
|
||||||
|
h1:hover .char9 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.4s;
|
||||||
|
-moz-transition: color 0.1s 0.4s;
|
||||||
|
-o-transition: color 0.1s 0.4s;
|
||||||
|
transition: color 0.1s 0.4s;
|
||||||
|
color: #fdf485;
|
||||||
|
}
|
||||||
|
/* line 197, ../sass/app.sass */
|
||||||
|
h1:hover .char10 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.45s;
|
||||||
|
-moz-transition: color 0.1s 0.45s;
|
||||||
|
-o-transition: color 0.1s 0.45s;
|
||||||
|
transition: color 0.1s 0.45s;
|
||||||
|
color: #00bfa8;
|
||||||
|
}
|
||||||
|
/* line 200, ../sass/app.sass */
|
||||||
|
h1:hover .char11 {
|
||||||
|
-webkit-transition: color 0.1s;
|
||||||
|
-webkit-transition-delay: 0.5s;
|
||||||
|
-moz-transition: color 0.1s 0.5s;
|
||||||
|
-o-transition: color 0.1s 0.5s;
|
||||||
|
transition: color 0.1s 0.5s;
|
||||||
|
color: #0096df;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- Drag and drop ------------------------------------------------------------------ */
|
||||||
|
/* line 207, ../sass/app.sass */
|
||||||
|
.drag-and-drop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 210, ../sass/app.sass */
|
||||||
|
.dropZone {
|
||||||
|
height: 200px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
background: url("../img/drag_placeholder.png");
|
||||||
|
}
|
||||||
|
/* line 214, ../sass/app.sass */
|
||||||
|
.dropZone.dragging {
|
||||||
|
-webkit-box-shadow: inset 0 1px 10px #09a1ec;
|
||||||
|
-moz-box-shadow: inset 0 1px 10px #09a1ec;
|
||||||
|
box-shadow: inset 0 1px 10px #09a1ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 216, ../sass/app.sass */
|
||||||
|
.droppedImage {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
/* line 223, ../sass/app.sass */
|
||||||
|
body {
|
||||||
|
margin: 40px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 226, ../sass/app.sass */
|
||||||
|
.intro {
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 229, ../sass/app.sass */
|
||||||
|
h1 {
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 231, ../sass/app.sass */
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 233, ../sass/app.sass */
|
||||||
|
h3 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,79 +1,76 @@
|
|||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
|
||||||
// Use mustache.js templating to create layout
|
// Uses mustache.js templating to create layout
|
||||||
|
var imageArray = {images: [
|
||||||
var imageArray = { images: [
|
{"file": "img/photo1.jpg"},
|
||||||
{"file": "img/3.jpg"},
|
{"file": "img/photo2.jpg"},
|
||||||
{"file": "img/4.jpg"},
|
{"file": "img/photo3.jpg"}
|
||||||
{"file": "img/5.jpg"},
|
|
||||||
{"file": "img/logo1.png"},
|
|
||||||
{"file": "img/icon1.png", "colorCount": "4", "class": "fbIcon"}
|
|
||||||
]};
|
]};
|
||||||
|
|
||||||
|
var displayColors = function(image) {
|
||||||
|
var $image = $(image);
|
||||||
|
var imageSection = $image.closest('.image-section');
|
||||||
|
var appendColors = function(colors, root) {
|
||||||
|
$.each(colors, function(index, value) {
|
||||||
|
var swatchEl = $('<div>', {'class': 'swatch'})
|
||||||
|
.css('background-color', 'rgba('+ value +', 1)');
|
||||||
|
root.append(swatchEl);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var colorThief = new ColorThief();
|
||||||
|
|
||||||
|
// Dominant Color
|
||||||
|
var dominantColor = colorThief.getColor(image);
|
||||||
|
var dominantSwatch = imageSection.find('.get-color .swatches');
|
||||||
|
appendColors([dominantColor], dominantSwatch);
|
||||||
|
|
||||||
|
// Palette
|
||||||
|
var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
|
||||||
|
var medianPalette = colorThief.getPalette(image, colorCount);
|
||||||
|
var medianCutPalette = imageSection.find('.get-palette .swatches');
|
||||||
|
appendColors(medianPalette, medianCutPalette);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
// Setup the drag and drop behavior if supported
|
// Setup the drag and drop behavior if supported
|
||||||
if (typeof window.FileReader === 'function') {
|
if (typeof window.FileReader === 'function') {
|
||||||
$('#dragDrop').show();
|
$('#dragDrop').show();
|
||||||
|
|
||||||
var $dropZone = $('#dropZone');
|
var $dropZone = $('#dropZone');
|
||||||
|
|
||||||
var dragEnter = function( evt ){
|
var handleDragEnter = function(event){
|
||||||
evt.stopPropagation();
|
|
||||||
evt.preventDefault();
|
|
||||||
$dropZone.addClass('dragging');
|
$dropZone.addClass('dragging');
|
||||||
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
var dragLeave = function( evt ){
|
var handleDragLeave = function(event){
|
||||||
evt.stopPropagation();
|
|
||||||
evt.preventDefault();
|
|
||||||
$dropZone.removeClass('dragging');
|
$dropZone.removeClass('dragging');
|
||||||
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
var dragOver = function( evt ){
|
var handleDragOver = function(event){
|
||||||
evt.stopPropagation();
|
return false;
|
||||||
evt.preventDefault();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var drop = function( evt ){
|
var handleDrop = function(event){
|
||||||
evt.stopPropagation();
|
|
||||||
evt.preventDefault();
|
|
||||||
$dropZone.removeClass('dragging');
|
$dropZone.removeClass('dragging');
|
||||||
|
|
||||||
var dt = evt.originalEvent.dataTransfer;
|
var dt = event.originalEvent.dataTransfer;
|
||||||
var files = dt.files;
|
var files = dt.files;
|
||||||
|
|
||||||
handleFiles( files );
|
handleFiles(files);
|
||||||
|
|
||||||
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
$dropZone
|
$dropZone
|
||||||
.on('dragenter', dragEnter)
|
.on('dragenter', handleDragEnter)
|
||||||
.on('dragleave', dragLeave)
|
.on('dragleave', handleDragLeave)
|
||||||
.on('dragover', dragOver)
|
.on('dragover', handleDragOver)
|
||||||
.on('drop', drop);
|
.on('drop', handleDrop);
|
||||||
}
|
}
|
||||||
|
|
||||||
var displayColors = function( image ) {
|
|
||||||
var $image = $(image);
|
|
||||||
var imageSection = $image.closest('.imageSection');
|
|
||||||
var appendColors = function (colors, root) {
|
|
||||||
$.each(colors, function (index, value) {
|
|
||||||
var swatchEl = $('<div>', {'class': 'swatch'})
|
|
||||||
.css('background-color', 'rgba('+ value +', 1)');
|
|
||||||
root.append(swatchEl);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Dominant Color
|
|
||||||
var dominantColor = getDominantColor(image);
|
|
||||||
var dominantSwatch = imageSection.find('.dominantColor .swatches');
|
|
||||||
appendColors([dominantColor], dominantSwatch);
|
|
||||||
|
|
||||||
// Palette
|
|
||||||
var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
|
|
||||||
var medianPalette = createPalette(image, colorCount);
|
|
||||||
var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
|
|
||||||
appendColors(medianPalette, medianCutPalette);
|
|
||||||
};
|
|
||||||
|
|
||||||
function handleFiles( files ) {
|
function handleFiles( files ) {
|
||||||
var imageType = /image.*/;
|
var imageType = /image.*/;
|
||||||
var fileCount = files.length;
|
var fileCount = files.length;
|
||||||
@@ -108,18 +105,20 @@ $(document).ready(function () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var html = Mustache.to_html($('#template').html(), imageArray);
|
|
||||||
$('#main').append(html);
|
|
||||||
|
|
||||||
// Use lettering.js to give letter by letter styling control for the h1 title
|
// Use lettering.js to give letter by letter styling control for the h1 title
|
||||||
$("h1").lettering();
|
$("h1").lettering();
|
||||||
|
|
||||||
|
|
||||||
|
var html = Mustache.to_html($('#image-section-template').html(), imageArray);
|
||||||
|
$('#examples').append(html);
|
||||||
|
|
||||||
|
|
||||||
// For each image:
|
// For each image:
|
||||||
// Once image is loaded, get dominant color and palette and display them.
|
// Once image is loaded, get dominant color and palette and display them.
|
||||||
$('img').bind('load', function (event) {
|
// $('img').bind('load', function (event) {
|
||||||
var image = event.target;
|
// var image = event.target;
|
||||||
displayColors( image );
|
// displayColors(image);
|
||||||
});
|
// });
|
||||||
});
|
});
|
||||||
|
|
||||||
var util = {
|
var util = {
|
||||||
BIN
img/icon1.png
BIN
img/icon1.png
Binary file not shown.
|
Before Width: | Height: | Size: 259 B |
BIN
img/logo1.png
BIN
img/logo1.png
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
BIN
img/photo1.jpg
Normal file
BIN
img/photo1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
img/photo2.jpg
Normal file
BIN
img/photo2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
img/photo3.jpg
Normal file
BIN
img/photo3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
93
index.html
93
index.html
@@ -4,74 +4,87 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
|
||||||
<link href='http://fonts.googleapis.com/css?family=Varela+Round|Terminal+Dosis:400,700,600' rel='stylesheet' type='text/css'>
|
|
||||||
|
|
||||||
<title>Color Thief</title>
|
<title>Color Thief</title>
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="">
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/app.css">
|
<script src="js/libs/modernizr-2.0.6.min.js"></script>
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Karla:400,700|Cousine' rel='stylesheet' type='text/css'>
|
||||||
|
<link rel="stylesheet" href="css/app.css">
|
||||||
|
|
||||||
<script src="js/libs/modernizr-2.0.6.min.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="container">
|
<div class="wrapper">
|
||||||
<header>
|
|
||||||
|
<section class="intro">
|
||||||
<h1>Color Thief</h1>
|
<h1>Color Thief</h1>
|
||||||
<h4><a href="http://lokeshdhakar.com">by Lokesh Dhakar</a></small></h4>
|
<h4><a href="http://lokeshdhakar.com">by Lokesh Dhakar</a></small></h4>
|
||||||
|
|
||||||
<p>A script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen.</p>
|
<p class="description">A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.</p>
|
||||||
<p><a href="http://www.lokeshdhakar.com/color-thief/">Read more on my blog</a> | <a href="https://github.com/lokesh/color-thief">Get the code on Github</a>
|
<p><a href="http://www.lokeshdhakar.com/color-thief/">Read more about it on my blog</a> or <a href="https://github.com/lokesh/color-thief">get the code on Github</a>
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</section>
|
||||||
|
|
||||||
<div id="main" role="main">
|
|
||||||
<div id='dragDrop' style='display: none'>
|
|
||||||
<h2>Test it out</h2>
|
|
||||||
<div id="dropZone" class="dropZone">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="draggedImages"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<section class="examples" id="examples">
|
||||||
<h2>Examples</h2>
|
<h2>Examples</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<sectcion class="drag-and-drop" id="dragDrop">
|
||||||
|
<h2>Try it yourself</h2>
|
||||||
|
<div id="dropZone" class="dropZone">
|
||||||
|
</div>
|
||||||
|
<div id="draggedImages"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div> <!--! end of #container -->
|
</div> <!--! end of #container -->
|
||||||
|
|
||||||
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.3.min.js"><\/script>')</script>
|
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.3.min.js"><\/script>')</script>
|
||||||
<script src="js/libs/jquery.lettering.js"></script>
|
<script src="js/libs/jquery.lettering.js"></script>
|
||||||
<script src="js/libs/mustache.js"></script>
|
<script src="js/libs/mustache.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<script src="js/libs/quantize.js"></script>
|
<script src="js/libs/quantize.js"></script>
|
||||||
<script src="js/color-thief.js"></script>
|
<script src="js/color-thief.js"></script>
|
||||||
|
|
||||||
|
<!-- Using Mustache for templating -->
|
||||||
<!-- Using Mustache templating -->
|
<script id='image-section-template' type='text/x-mustache'>
|
||||||
<script id='template' type='text/x-mustache'>
|
|
||||||
{{#images}}
|
{{#images}}
|
||||||
<div class="imageSection {{class}} ">
|
<div class="image-section {{class}} ">
|
||||||
<div class="imageWrap">
|
<div class="image-wrap">
|
||||||
<img class="targetImage" src="{{file}}" data-colorcount="{{colorCount}}" />
|
<button class="run-functions-button">Click</button>
|
||||||
</div>
|
<img class="target-image" src="{{file}}" data-colorcount="{{colorCount}}" />
|
||||||
<div class="colors">
|
|
||||||
<div class="function dominantColor">
|
|
||||||
<h3>Dominant Color</h3>
|
|
||||||
<div class="swatches"></div>
|
|
||||||
</div>
|
|
||||||
<div class="function medianCutPalette clearfix">
|
|
||||||
<h3>Palette</h3>
|
|
||||||
<div class="swatches"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="color-thief-output-template"></div>
|
||||||
</div>
|
</div>
|
||||||
{{/images}}
|
{{/images}}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="index.js"></script>
|
<script id='color-thief-output-template' type='text/x-mustache'>
|
||||||
|
<div class="function get-color">
|
||||||
|
<div class="function-details">
|
||||||
|
<h3 class="function-title">Dominant Color</h3>
|
||||||
|
<div class="function-code">colorThief.getColor()</div>
|
||||||
|
<div class="function-execution-time">20ms</div>
|
||||||
|
</div>
|
||||||
|
<div class="function-output">
|
||||||
|
<div class="swatches"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="function get-palette">
|
||||||
|
<div class="function-details">
|
||||||
|
<h3 class="function-title">Palette</h3>
|
||||||
|
<div class="function-code">colorThief.getPalette()</div>
|
||||||
|
<div class="function-execution-time">20ms</div>
|
||||||
|
</div>
|
||||||
|
<div class="function-output">
|
||||||
|
<div class="swatches"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="demo.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -2,19 +2,16 @@
|
|||||||
* Color Thief v1.0
|
* Color Thief v1.0
|
||||||
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||||
*
|
*
|
||||||
* Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
|
* License
|
||||||
|
* -------
|
||||||
|
* Creative Commons Attribution 2.5 License:
|
||||||
|
* http://creativecommons.org/licenses/by/2.5/
|
||||||
*
|
*
|
||||||
* # Thanks
|
* Thanks
|
||||||
* Nick Rabinowitz: Created quantize.js which is used by the median cut palette function. This handles all the hard clustering math.
|
* ------
|
||||||
* John Schulz: All around mad genius who helped clean and optimize the code. @JFSIII
|
* Nick Rabinowitz - For creating quantize.js.
|
||||||
*
|
* John Schulz - For clean up and optimization. @JFSIII
|
||||||
* ## Classes
|
* Nathan Spady - For adding drag and drop support to the demo page.
|
||||||
* CanvasImage
|
|
||||||
* ## Functions
|
|
||||||
* getDominantColor()
|
|
||||||
* createPalette()
|
|
||||||
* getAverageRGB()
|
|
||||||
* createAreaBasedPalette()
|
|
||||||
*
|
*
|
||||||
* Requires jquery and quantize.js.
|
* Requires jquery and quantize.js.
|
||||||
*/
|
*/
|
||||||
@@ -30,12 +27,12 @@ var CanvasImage = function (image) {
|
|||||||
// If jquery object is passed in, get html element
|
// If jquery object is passed in, get html element
|
||||||
imgEl = (image.jquery) ? image[0] : image;
|
imgEl = (image.jquery) ? image[0] : image;
|
||||||
|
|
||||||
this.canvas = document.createElement('canvas');
|
this.canvas = document.createElement('canvas');
|
||||||
this.context = this.canvas.getContext('2d');
|
this.context = this.canvas.getContext('2d');
|
||||||
|
|
||||||
document.body.appendChild(this.canvas);
|
document.body.appendChild(this.canvas);
|
||||||
|
|
||||||
this.width = this.canvas.width = imgEl.width;
|
this.width = this.canvas.width = imgEl.width;
|
||||||
this.height = this.canvas.height = imgEl.height;
|
this.height = this.canvas.height = imgEl.height;
|
||||||
|
|
||||||
this.context.drawImage(imgEl, 0, 0, this.width, this.height);
|
this.context.drawImage(imgEl, 0, 0, this.width, this.height);
|
||||||
@@ -62,19 +59,19 @@ CanvasImage.prototype.removeCanvas = function () {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var ColorThief = function () {};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* getDominantColor(sourceImage)
|
* getColor(sourceImage)
|
||||||
* returns {r: num, g: num, b: num}
|
* returns {r: num, g: num, b: num}
|
||||||
*
|
*
|
||||||
* Use the median cut algorithm provided by quantize.js to cluster similar
|
* Use the median cut algorithm provided by quantize.js to cluster similar
|
||||||
* colors and return the base color from the largest cluster. */
|
* colors and return the base color from the largest cluster. */
|
||||||
function getDominantColor(sourceImage) {
|
ColorThief.prototype.getColor = function(sourceImage) {
|
||||||
|
var palette = this.getPalette(sourceImage, 5);
|
||||||
var palette = createPalette(sourceImage, 5);
|
var dominantColor = palette[0];
|
||||||
var dominant = palette[0];
|
return dominantColor;
|
||||||
|
};
|
||||||
return dominant;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -86,13 +83,13 @@ function getDominantColor(sourceImage) {
|
|||||||
*
|
*
|
||||||
* BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
|
* BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
|
||||||
*/
|
*/
|
||||||
function createPalette(sourceImage, colorCount) {
|
ColorThief.prototype.getPalette = function(sourceImage, colorCount) {
|
||||||
|
|
||||||
// Create custom CanvasImage object
|
// Create custom CanvasImage object
|
||||||
var image = new CanvasImage(sourceImage),
|
var image = new CanvasImage(sourceImage);
|
||||||
imageData = image.getImageData(),
|
var imageData = image.getImageData();
|
||||||
pixels = imageData.data,
|
var pixels = imageData.data;
|
||||||
pixelCount = image.getPixelCount();
|
var pixelCount = image.getPixelCount();
|
||||||
|
|
||||||
// Store the RGB values in an array format suitable for quantize function
|
// Store the RGB values in an array format suitable for quantize function
|
||||||
var pixelArray = [];
|
var pixelArray = [];
|
||||||
@@ -112,117 +109,11 @@ function createPalette(sourceImage, colorCount) {
|
|||||||
|
|
||||||
// Send array to quantize function which clusters values
|
// Send array to quantize function which clusters values
|
||||||
// using median cut algorithm
|
// using median cut algorithm
|
||||||
|
var cmap = MMCQ.quantize(pixelArray, colorCount);
|
||||||
var cmap = MMCQ.quantize(pixelArray, colorCount);
|
|
||||||
var palette = cmap.palette();
|
var palette = cmap.palette();
|
||||||
|
|
||||||
// Clean up
|
// Clean up
|
||||||
image.removeCanvas();
|
image.removeCanvas();
|
||||||
|
|
||||||
return palette;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* getAverageRGB(sourceImage)
|
|
||||||
* returns {r: num, g: num, b: num}
|
|
||||||
*
|
|
||||||
* Add up all pixels RGB values and return average.
|
|
||||||
* Tends to return muddy gray/brown color. Most likely, you'll be better
|
|
||||||
* off using getDominantColor() instead.
|
|
||||||
*/
|
|
||||||
function getAverageRGB(sourceImage) {
|
|
||||||
// Config
|
|
||||||
var sampleSize = 10;
|
|
||||||
|
|
||||||
// Create custom CanvasImage object
|
|
||||||
var image = new CanvasImage(sourceImage),
|
|
||||||
imageData = image.getImageData(),
|
|
||||||
pixels = imageData.data,
|
|
||||||
pixelCount = image.getPixelCount();
|
|
||||||
|
|
||||||
// Reset vars
|
|
||||||
var i = 0,
|
|
||||||
count = 0,
|
|
||||||
rgb = {r:0, g:0, b:0};
|
|
||||||
|
|
||||||
// Loop through every # pixels. (# is set in Config above via the blockSize var)
|
|
||||||
// Add all the red values together, repeat for blue and green.
|
|
||||||
// Last step, divide by the number of pixels checked to get average.
|
|
||||||
while ( (i += sampleSize * 4) < pixelCount ) {
|
|
||||||
// if pixel is mostly opaque
|
|
||||||
if (pixels[i+3] > 125) {
|
|
||||||
++count;
|
|
||||||
rgb.r += pixels[i];
|
|
||||||
rgb.g += pixels[i+1];
|
|
||||||
rgb.b += pixels[i+2];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
rgb.r = ~~(rgb.r/count);
|
|
||||||
rgb.g = ~~(rgb.g/count);
|
|
||||||
rgb.b = ~~(rgb.b/count);
|
|
||||||
|
|
||||||
return rgb;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* createAreaBasedPalette(sourceImage, colorCount)
|
|
||||||
* returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
|
|
||||||
*
|
|
||||||
* Break the image into sections. Loops through pixel RGBS in the section and average color.
|
|
||||||
* Tends to return muddy gray/brown color. You're most likely better off using createPalette().
|
|
||||||
*
|
|
||||||
* BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
function createAreaBasedPalette(sourceImage, colorCount) {
|
|
||||||
|
|
||||||
var palette = [];
|
|
||||||
|
|
||||||
// Create custom CanvasImage object
|
|
||||||
var image = new CanvasImage(sourceImage),
|
|
||||||
imageData = image.getImageData(),
|
|
||||||
pixels = imageData.data,
|
|
||||||
pixelCount = image.getPixelCount();
|
|
||||||
|
|
||||||
|
|
||||||
// How big a pixel area does each palette color get
|
|
||||||
var rowCount = Math.round(Math.sqrt(colorCount)),
|
|
||||||
colCount = rowCount,
|
|
||||||
colWidth = Math.round(image.width / colCount),
|
|
||||||
rowHeight = Math.round(image.height / rowCount);
|
|
||||||
|
|
||||||
// Loop through pixels section by section.
|
|
||||||
// At the end of each section, push the average rgb color to palette array.
|
|
||||||
for (var i = 0, vertOffset; i<rowCount; i++) {
|
|
||||||
vertOffset = i * rowHeight * image.width * 4;
|
|
||||||
|
|
||||||
for (var j = 0, horizOffset, rgb, count; j<colCount; j++) {
|
|
||||||
horizOffset = j * colWidth * 4;
|
|
||||||
rgb = {r:0, g:0, b:0};
|
|
||||||
count = 0;
|
|
||||||
|
|
||||||
for (var k = 0, rowOffset; k < rowHeight; k++) {
|
|
||||||
rowOffset = k * image.width * 4;
|
|
||||||
|
|
||||||
for (var l = 0, offset; l < colWidth; l++) {
|
|
||||||
offset = vertOffset + horizOffset + rowOffset + (l * 4);
|
|
||||||
rgb.r += pixels[offset];
|
|
||||||
rgb.g += pixels[offset+1];
|
|
||||||
rgb.b += pixels[offset+2];
|
|
||||||
count++;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
rgb.r = ~~(rgb.r/count);
|
|
||||||
rgb.g = ~~(rgb.g/count);
|
|
||||||
rgb.b = ~~(rgb.b/count);
|
|
||||||
palette.push(rgb);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return palette;
|
return palette;
|
||||||
}
|
}
|
||||||
343
sass/app.sass
343
sass/app.sass
@@ -2,67 +2,46 @@
|
|||||||
@import "compass/css3"
|
@import "compass/css3"
|
||||||
@import "compass/utilities/general/clearfix"
|
@import "compass/utilities/general/clearfix"
|
||||||
|
|
||||||
|
$lightGray: #eeeeee
|
||||||
|
$blue: #0096df
|
||||||
|
$green: #00bfa8
|
||||||
|
$yellow: #fdf485
|
||||||
|
$orange: #ff8000
|
||||||
|
$red: #ff4040
|
||||||
|
|
||||||
|
$color: #aaa
|
||||||
|
$bgColor: #444
|
||||||
|
|
||||||
|
$headingColor: #444
|
||||||
|
$linkColor: $green
|
||||||
|
|
||||||
|
$fontSize: 18px
|
||||||
|
$columnWidth: 600px
|
||||||
|
|
||||||
|
// $codeColor: #eff
|
||||||
|
// $inputColor: #555
|
||||||
|
// $selectionColor: $yellow
|
||||||
|
|
||||||
|
// $altColor: lighten($color, 30%)
|
||||||
|
// $altCommentsColor: lighten($color, 10%)
|
||||||
|
|
||||||
|
|
||||||
body, input, textarea
|
body, input, textarea
|
||||||
margin: 40px
|
margin: 40px
|
||||||
color: #888
|
color: $color
|
||||||
background: #222
|
background: $bgColor
|
||||||
font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif
|
font-size: $fontSize
|
||||||
-wbkite-font-smoothing: antialiased
|
font-family: "Karla", "lucida grande", sans-serif
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6
|
h1, h2, h3, h4, h5, h6
|
||||||
color: white
|
color: white
|
||||||
font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif
|
line-height: 1.2em
|
||||||
line-height: 1em
|
font-weight: 500
|
||||||
font-weight: 600
|
|
||||||
margin-bottom: 0.5em
|
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
|
h2
|
||||||
font-size: 40px
|
font-size: 36px
|
||||||
line-height: 1.2em
|
line-height: 1.2em
|
||||||
text-align: center
|
|
||||||
|
|
||||||
h3
|
h3
|
||||||
font-size: 16px
|
font-size: 16px
|
||||||
@@ -74,15 +53,161 @@ h4
|
|||||||
margin-bottom: 1.25em
|
margin-bottom: 1.25em
|
||||||
|
|
||||||
p
|
p
|
||||||
|
line-height: 1.5em
|
||||||
margin-bottom: 1.25em
|
margin-bottom: 1.25em
|
||||||
|
|
||||||
|
|
||||||
strong
|
strong
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
|
|
||||||
/* Drag and Drop area */
|
/* Links */
|
||||||
|
a
|
||||||
|
color: $linkColor
|
||||||
|
text-decoration: none
|
||||||
|
&:hover
|
||||||
|
color: lighten($linkColor, 30%)
|
||||||
|
|
||||||
|
/* -- Layout ------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
.wrapper
|
||||||
|
text-align: center
|
||||||
|
max-width: $columnWidth
|
||||||
|
margin: 0 auto
|
||||||
|
|
||||||
|
.description
|
||||||
|
max-width: 450px
|
||||||
|
margin-right: auto
|
||||||
|
margin-left: auto
|
||||||
|
|
||||||
|
.image-section
|
||||||
|
margin-bottom: 80px
|
||||||
|
background: darken($bgColor, 10%)
|
||||||
|
.image-wrap
|
||||||
|
position: relative
|
||||||
|
background: #444
|
||||||
|
// background: url(../img/dark_checkered_bg.png)
|
||||||
|
|
||||||
|
.target-image
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
.run-functions-button
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
left: 50%
|
||||||
|
width: 100px
|
||||||
|
height: 100px
|
||||||
|
margin-top: -50px
|
||||||
|
margin-left: -50px
|
||||||
|
border: none
|
||||||
|
+border-radius(50%)
|
||||||
|
color: darken($yellow, 50%)
|
||||||
|
background-color: $yellow
|
||||||
|
font-size: 24px
|
||||||
|
cursor: pointer
|
||||||
|
&:hover
|
||||||
|
background-color: lighten($yellow, 10%)
|
||||||
|
color: darken($yellow, 45%)
|
||||||
|
&:active
|
||||||
|
+scale(0.9)
|
||||||
|
|
||||||
|
.color-thief-output
|
||||||
|
margin-top: 20px
|
||||||
|
|
||||||
|
.function
|
||||||
|
clear: left
|
||||||
|
margin-bottom: 10px
|
||||||
|
+pie-clearfix
|
||||||
|
|
||||||
|
.swatch
|
||||||
|
width: 60px
|
||||||
|
height: 30px
|
||||||
|
margin-right: 2px
|
||||||
|
background: #dddddd
|
||||||
|
float: left
|
||||||
|
+transition(scale .5s)
|
||||||
|
&:hover
|
||||||
|
+transition(none)
|
||||||
|
+scale(1.1, 1.1)
|
||||||
|
+box-shadow( 0 1px 10px black)
|
||||||
|
|
||||||
|
/* Hardcoding the offset for the FB icon example */
|
||||||
|
.fbIcon .imageWrap .targetImage
|
||||||
|
+border-radius(0)
|
||||||
|
position: relative
|
||||||
|
top: 142px
|
||||||
|
left: 192px
|
||||||
|
|
||||||
|
canvas
|
||||||
|
display: none
|
||||||
|
|
||||||
|
/* -- Animated logo ------------------------------------------------------------------ */
|
||||||
|
h1
|
||||||
|
font-size: 72px
|
||||||
|
line-height: 0.5em
|
||||||
|
margin-bottom: 0.3em
|
||||||
|
small
|
||||||
|
font-size: 20px
|
||||||
|
|
||||||
|
.char1
|
||||||
|
+transition( color .1s)
|
||||||
|
.char2
|
||||||
|
+transition( color .1s .05s)
|
||||||
|
.char3
|
||||||
|
+transition( color .1s .1s)
|
||||||
|
.char4
|
||||||
|
+transition( color .1s .15s)
|
||||||
|
.char5
|
||||||
|
+transition( color .1s .2s)
|
||||||
|
|
||||||
|
.char7
|
||||||
|
+transition( color .1s .3s)
|
||||||
|
.char8
|
||||||
|
+transition( color .1s .35s)
|
||||||
|
.char9
|
||||||
|
+transition( color .1s .4s)
|
||||||
|
.char10
|
||||||
|
+transition( color .1s .45s)
|
||||||
|
.char11
|
||||||
|
+transition( color .1s .5s)
|
||||||
|
&:hover
|
||||||
|
.char1
|
||||||
|
+transition( color .1s)
|
||||||
|
color: $red
|
||||||
|
.char2
|
||||||
|
+transition( color .1s .05s)
|
||||||
|
color: $orange
|
||||||
|
.char3
|
||||||
|
+transition( color .1s .1s)
|
||||||
|
color: $yellow
|
||||||
|
.char4
|
||||||
|
+transition( color .1s .15s)
|
||||||
|
color: $green
|
||||||
|
.char5
|
||||||
|
+transition( color .1s .2s)
|
||||||
|
color: $blue
|
||||||
|
|
||||||
|
.char7
|
||||||
|
+transition( color .1s .3s)
|
||||||
|
color: $red
|
||||||
|
.char8
|
||||||
|
+transition( color .1s .35s)
|
||||||
|
color: $orange
|
||||||
|
.char9
|
||||||
|
+transition( color .1s .4s)
|
||||||
|
color: $yellow
|
||||||
|
.char10
|
||||||
|
+transition( color .1s .45s)
|
||||||
|
color: $green
|
||||||
|
.char11
|
||||||
|
+transition( color .1s .5s)
|
||||||
|
color: $blue
|
||||||
|
|
||||||
|
|
||||||
|
/* -- Drag and drop ------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
.drag-and-drop
|
||||||
|
display: none
|
||||||
|
|
||||||
.dropZone
|
.dropZone
|
||||||
width: 900px
|
|
||||||
height: 200px
|
height: 200px
|
||||||
margin-bottom: 60px
|
margin-bottom: 60px
|
||||||
background: url("../img/drag_placeholder.png")
|
background: url("../img/drag_placeholder.png")
|
||||||
@@ -94,98 +219,16 @@ strong
|
|||||||
// width: 100%
|
// width: 100%
|
||||||
|
|
||||||
|
|
||||||
/* Forms */
|
@media only screen and (max-width : 480px)
|
||||||
input
|
body
|
||||||
&[type=text], &[type=password]
|
margin: 40px 0
|
||||||
background: #fafafa
|
font-size: $fontSize - 4
|
||||||
+box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.1))
|
.intro
|
||||||
border: 1px solid #dddddd
|
padding-left: 20px
|
||||||
color: #888888
|
padding-right: 20px
|
||||||
+border-radius(4px)
|
h1
|
||||||
|
font-size: 48px // from 72px
|
||||||
textarea
|
h2
|
||||||
background: #fafafa
|
font-size: 24px // from 40px
|
||||||
+box-shadow( inset 0 1px 1px rgba(0, 0, 0, 0.1))
|
h3
|
||||||
border: 1px solid #dddddd
|
font-size: 14px // from 16px
|
||||||
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)
|
|
||||||
overflow: hidden
|
|
||||||
.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
|
|
||||||
|
|||||||
Reference in New Issue
Block a user