mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +00:00
- Removed jquery dependency for color-thief.js
- Updated jquery and modernizr for demo page.
This commit is contained in:
Lokesh Dhakar
220
css/app.css
220
css/app.css
@@ -89,7 +89,7 @@ h1 {
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
/* line 51, ../sass/app.sass */
|
||||
@@ -182,8 +182,52 @@ img {
|
||||
background: #444444;
|
||||
}
|
||||
|
||||
/* line 114, ../sass/app.sass */
|
||||
.examples .image-section .target-image {
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-webkit-box-shadow: 0 4px 0 #333333;
|
||||
-moz-box-shadow: 0 4px 0 #333333;
|
||||
box-shadow: 0 4px 0 #333333;
|
||||
}
|
||||
/* line 117, ../sass/app.sass */
|
||||
.examples .color-thief-output {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* line 120, ../sass/app.sass */
|
||||
.examples .image-section.with-color-thief-output .target-image {
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* line 123, ../sass/app.sass */
|
||||
.examples .image-section.with-color-thief-output .color-thief-output {
|
||||
-webkit-box-shadow: 0 4px 0 #333333;
|
||||
-moz-box-shadow: 0 4px 0 #333333;
|
||||
box-shadow: 0 4px 0 #333333;
|
||||
}
|
||||
|
||||
/* line 126, ../sass/app.sass */
|
||||
.sharing {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* -- Image examples ------------------------------------------------------------------ */
|
||||
/* line 115, ../sass/app.sass */
|
||||
/* line 133, ../sass/app.sass */
|
||||
.run-functions-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -200,16 +244,17 @@ img {
|
||||
border-radius: 50%;
|
||||
color: #686002;
|
||||
background-color: #fdf485;
|
||||
border-bottom: 2px solid #4f4901;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* line 130, ../sass/app.sass */
|
||||
/* line 149, ../sass/app.sass */
|
||||
.run-functions-button:hover {
|
||||
background-color: #fef9b7;
|
||||
color: #4f4901;
|
||||
}
|
||||
/* line 133, ../sass/app.sass */
|
||||
/* line 152, ../sass/app.sass */
|
||||
.run-functions-button:active {
|
||||
-webkit-transform: scale(0.9, 0.9);
|
||||
-moz-transform: scale(0.9, 0.9);
|
||||
@@ -217,12 +262,12 @@ img {
|
||||
-o-transform: scale(0.9, 0.9);
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
/* line 135, ../sass/app.sass */
|
||||
/* line 154, ../sass/app.sass */
|
||||
.run-functions-button.hide {
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
-webkit-transition: -webkit-transform 0.4s, top 0.4s;
|
||||
-moz-transition: -moz-transform 0.4s, top 0.4s;
|
||||
-o-transition: -o-transform 0.4s, top 0.4s;
|
||||
transition: transform 0.4s, top 0.4s;
|
||||
top: 100%;
|
||||
-webkit-transform: scale(0, 0);
|
||||
-moz-transform: scale(0, 0);
|
||||
@@ -231,29 +276,62 @@ img {
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
|
||||
/* line 140, ../sass/app.sass */
|
||||
.target-image {
|
||||
width: 100%;
|
||||
/* line 161, ../sass/app.sass */
|
||||
.touch .touch-label {
|
||||
display: inline;
|
||||
}
|
||||
/* line 163, ../sass/app.sass */
|
||||
.touch .no-touch-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 143, ../sass/app.sass */
|
||||
/* line 166, ../sass/app.sass */
|
||||
.no-touch .touch-label {
|
||||
display: none;
|
||||
}
|
||||
/* line 168, ../sass/app.sass */
|
||||
.no-touch .no-touch-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* line 171, ../sass/app.sass */
|
||||
.target-image {
|
||||
width: 100%;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* line 175, ../sass/app.sass */
|
||||
.color-thief-output {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
background-color: #eeeeee;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-webkit-box-shadow: 0 4px 0 #333333;
|
||||
-moz-box-shadow: 0 4px 0 #333333;
|
||||
box-shadow: 0 4px 0 #333333;
|
||||
}
|
||||
/* line 147, ../sass/app.sass */
|
||||
/* line 181, ../sass/app.sass */
|
||||
.color-thief-output .function-title {
|
||||
color: #444444;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* line 151, ../sass/app.sass */
|
||||
/* line 185, ../sass/app.sass */
|
||||
.function {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* line 154, ../sass/app.sass */
|
||||
/* line 188, ../sass/app.sass */
|
||||
.swatches {
|
||||
*zoom: 1;
|
||||
}
|
||||
@@ -264,7 +342,7 @@ img {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* line 157, ../sass/app.sass */
|
||||
/* line 191, ../sass/app.sass */
|
||||
.swatch {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
@@ -273,20 +351,20 @@ img {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* line 164, ../sass/app.sass */
|
||||
/* line 198, ../sass/app.sass */
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -- Animated logo ------------------------------------------------------------------ */
|
||||
/* line 169, ../sass/app.sass */
|
||||
/* line 203, ../sass/app.sass */
|
||||
.logo .char1 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-moz-transition: color 0.1s;
|
||||
-o-transition: color 0.1s;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
/* line 171, ../sass/app.sass */
|
||||
/* line 205, ../sass/app.sass */
|
||||
.logo .char2 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.05s;
|
||||
@@ -294,7 +372,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.05s;
|
||||
transition: color 0.1s 0.05s;
|
||||
}
|
||||
/* line 173, ../sass/app.sass */
|
||||
/* line 207, ../sass/app.sass */
|
||||
.logo .char3 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.1s;
|
||||
@@ -302,7 +380,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.1s;
|
||||
transition: color 0.1s 0.1s;
|
||||
}
|
||||
/* line 175, ../sass/app.sass */
|
||||
/* line 209, ../sass/app.sass */
|
||||
.logo .char4 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.15s;
|
||||
@@ -310,7 +388,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.15s;
|
||||
transition: color 0.1s 0.15s;
|
||||
}
|
||||
/* line 177, ../sass/app.sass */
|
||||
/* line 211, ../sass/app.sass */
|
||||
.logo .char5 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.2s;
|
||||
@@ -318,7 +396,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.2s;
|
||||
transition: color 0.1s 0.2s;
|
||||
}
|
||||
/* line 180, ../sass/app.sass */
|
||||
/* line 214, ../sass/app.sass */
|
||||
.logo .char7 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.3s;
|
||||
@@ -326,7 +404,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.3s;
|
||||
transition: color 0.1s 0.3s;
|
||||
}
|
||||
/* line 182, ../sass/app.sass */
|
||||
/* line 216, ../sass/app.sass */
|
||||
.logo .char8 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.35s;
|
||||
@@ -334,7 +412,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.35s;
|
||||
transition: color 0.1s 0.35s;
|
||||
}
|
||||
/* line 184, ../sass/app.sass */
|
||||
/* line 218, ../sass/app.sass */
|
||||
.logo .char9 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.4s;
|
||||
@@ -342,7 +420,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.4s;
|
||||
transition: color 0.1s 0.4s;
|
||||
}
|
||||
/* line 186, ../sass/app.sass */
|
||||
/* line 220, ../sass/app.sass */
|
||||
.logo .char10 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.45s;
|
||||
@@ -350,7 +428,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.45s;
|
||||
transition: color 0.1s 0.45s;
|
||||
}
|
||||
/* line 188, ../sass/app.sass */
|
||||
/* line 222, ../sass/app.sass */
|
||||
.logo .char11 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
@@ -358,7 +436,7 @@ canvas {
|
||||
-o-transition: color 0.1s 0.5s;
|
||||
transition: color 0.1s 0.5s;
|
||||
}
|
||||
/* line 191, ../sass/app.sass */
|
||||
/* line 225, ../sass/app.sass */
|
||||
.logo:hover .char1 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-moz-transition: color 0.1s;
|
||||
@@ -366,7 +444,7 @@ canvas {
|
||||
transition: color 0.1s;
|
||||
color: #ff4040;
|
||||
}
|
||||
/* line 194, ../sass/app.sass */
|
||||
/* line 228, ../sass/app.sass */
|
||||
.logo:hover .char2 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.05s;
|
||||
@@ -375,7 +453,7 @@ canvas {
|
||||
transition: color 0.1s 0.05s;
|
||||
color: #ff8000;
|
||||
}
|
||||
/* line 197, ../sass/app.sass */
|
||||
/* line 231, ../sass/app.sass */
|
||||
.logo:hover .char3 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.1s;
|
||||
@@ -384,7 +462,7 @@ canvas {
|
||||
transition: color 0.1s 0.1s;
|
||||
color: #fdf485;
|
||||
}
|
||||
/* line 200, ../sass/app.sass */
|
||||
/* line 234, ../sass/app.sass */
|
||||
.logo:hover .char4 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.15s;
|
||||
@@ -393,7 +471,7 @@ canvas {
|
||||
transition: color 0.1s 0.15s;
|
||||
color: #00bfa8;
|
||||
}
|
||||
/* line 203, ../sass/app.sass */
|
||||
/* line 237, ../sass/app.sass */
|
||||
.logo:hover .char5 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.2s;
|
||||
@@ -402,7 +480,7 @@ canvas {
|
||||
transition: color 0.1s 0.2s;
|
||||
color: #0096df;
|
||||
}
|
||||
/* line 207, ../sass/app.sass */
|
||||
/* line 241, ../sass/app.sass */
|
||||
.logo:hover .char7 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.3s;
|
||||
@@ -411,7 +489,7 @@ canvas {
|
||||
transition: color 0.1s 0.3s;
|
||||
color: #ff4040;
|
||||
}
|
||||
/* line 210, ../sass/app.sass */
|
||||
/* line 244, ../sass/app.sass */
|
||||
.logo:hover .char8 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.35s;
|
||||
@@ -420,7 +498,7 @@ canvas {
|
||||
transition: color 0.1s 0.35s;
|
||||
color: #ff8000;
|
||||
}
|
||||
/* line 213, ../sass/app.sass */
|
||||
/* line 247, ../sass/app.sass */
|
||||
.logo:hover .char9 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.4s;
|
||||
@@ -429,7 +507,7 @@ canvas {
|
||||
transition: color 0.1s 0.4s;
|
||||
color: #fdf485;
|
||||
}
|
||||
/* line 216, ../sass/app.sass */
|
||||
/* line 250, ../sass/app.sass */
|
||||
.logo:hover .char10 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.45s;
|
||||
@@ -438,7 +516,7 @@ canvas {
|
||||
transition: color 0.1s 0.45s;
|
||||
color: #00bfa8;
|
||||
}
|
||||
/* line 219, ../sass/app.sass */
|
||||
/* line 253, ../sass/app.sass */
|
||||
.logo:hover .char11 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
@@ -449,33 +527,38 @@ canvas {
|
||||
}
|
||||
|
||||
/* -- Drag and drop ------------------------------------------------------------------ */
|
||||
/* line 226, ../sass/app.sass */
|
||||
/* line 260, ../sass/app.sass */
|
||||
.drag-drop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 229, ../sass/app.sass */
|
||||
/* line 263, ../sass/app.sass */
|
||||
.drop-zone {
|
||||
height: 400px;
|
||||
margin-bottom: 80px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background: url("../img/dark_checkered_bg.png");
|
||||
}
|
||||
/* line 233, ../sass/app.sass */
|
||||
/* line 268, ../sass/app.sass */
|
||||
.drop-zone.dragging {
|
||||
-webkit-box-shadow: inset 0 0 0 4px #00bfa8;
|
||||
-moz-box-shadow: inset 0 0 0 4px #00bfa8;
|
||||
box-shadow: inset 0 0 0 4px #00bfa8;
|
||||
}
|
||||
/* line 235, ../sass/app.sass */
|
||||
/* line 270, ../sass/app.sass */
|
||||
.drop-zone.dragging .default-label {
|
||||
display: none;
|
||||
}
|
||||
/* line 237, ../sass/app.sass */
|
||||
/* line 272, ../sass/app.sass */
|
||||
.drop-zone.dragging .dragging-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* line 240, ../sass/app.sass */
|
||||
/* line 275, ../sass/app.sass */
|
||||
.drop-zone-label {
|
||||
position: relative;
|
||||
top: 170px;
|
||||
@@ -493,41 +576,72 @@ canvas {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* line 252, ../sass/app.sass */
|
||||
/* line 287, ../sass/app.sass */
|
||||
.dragging-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 256, ../sass/app.sass */
|
||||
/* line 291, ../sass/app.sass */
|
||||
.dropped-image .run-functions-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -- Responsive design -------------------------------------------------------------- */
|
||||
@media only screen and (max-width: 480px) {
|
||||
/* line 263, ../sass/app.sass */
|
||||
/* line 300, ../sass/app.sass */
|
||||
body {
|
||||
margin: 40px 0;
|
||||
font-size: 14px;
|
||||
margin: 80px 0 40px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* line 266, ../sass/app.sass */
|
||||
/* line 303, ../sass/app.sass */
|
||||
.intro {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* line 269, ../sass/app.sass */
|
||||
/* line 306, ../sass/app.sass */
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
/* line 271, ../sass/app.sass */
|
||||
/* line 308, ../sass/app.sass */
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* line 273, ../sass/app.sass */
|
||||
/* line 310, ../sass/app.sass */
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* line 315, ../sass/app.sass */
|
||||
.examples .image-section .target-image,
|
||||
.dragged-images .image-section .target-image {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-ms-border-radius: 0;
|
||||
-o-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* line 317, ../sass/app.sass */
|
||||
.examples .image-section .color-thief-output,
|
||||
.dragged-images .image-section .color-thief-output {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-ms-border-radius: 0;
|
||||
-o-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* line 320, ../sass/app.sass */
|
||||
.examples .image-wrap {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
/* line 325, ../sass/app.sass */
|
||||
.examples .image-wrap {
|
||||
min-height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user