Skip to content
This repository has been archived by the owner on Nov 20, 2018. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
style(ui-updates): unique colors on qq-buttons and new delete and edi…
…t icon
  • Loading branch information
joshuaArd committed Feb 23, 2015
1 parent 9c38b84 commit 9514512
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 29 deletions.
Binary file modified client/edit.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 21 additions & 10 deletions client/fineuploader-gallery.css
Expand Up @@ -38,7 +38,7 @@
width: inherit;
border-radius: 6px;
border: 1px dashed #CCCCCC;
background-color: #FDFDFD;
background-color: #FAFAFA;
padding: 20px;
}
.qq-uploader:before {
Expand Down Expand Up @@ -103,7 +103,7 @@
line-height: 16px;
font-size: 13px;
color: #424242;
background-color: #F9F9F9;
background-color: #FFFFFF;
border-radius: 2px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22);
vertical-align: top;
Expand All @@ -121,11 +121,14 @@
.qq-upload-delete, .qq-upload-pause, .qq-upload-continue {
border:none;
background: none;
text-decoration: underline;
/*text-decoration: underline;*/
color: #00A0BA;
font-size: 11px;
font-size: 12px;
padding: 0;
}
.qq-upload-delete:hover, .qq-upload-pause:hover, .qq-upload-continue:hover {
text-decoration: underline;
}
.qq-upload-status-text {
color: #333333;
font-size: 12px;
Expand Down Expand Up @@ -217,11 +220,11 @@
}
.qq-upload-list li.qq-upload-fail {
background-color: #F5EDED;
box-shadow: 0 0 1px 0 red;
}
.qq-upload-list li.qq-upload-fail .qq-file-info {
border: 1px solid #BF2828;
border-top: none;
}
/*.qq-upload-list li.qq-upload-fail .qq-file-info {*/
/*border-top: none;*/
/*}*/
.qq-progress-bar {
display: block;
background: #00abc7;
Expand Down Expand Up @@ -294,6 +297,14 @@ INPUT.qq-edit-filename.qq-editing {
height: 15px;
vertical-align: text-bottom;
}
.qq-delete-icon {
/*display: none;*/
background: url("trash.gif");
width: 15px;
height: 15px;
vertical-align: sub;
display: inline-block;
}

.qq-hide {
display: none;
Expand All @@ -304,13 +315,13 @@ INPUT.qq-edit-filename.qq-editing {
------------------------------------------ */
.qq-thumbnail-wrapper {
overflow: hidden;
height: 120px;
/*height: 120px;*/
width: 120px;
position: relative;
}
.qq-thumbnail-selector {
border-radius: 2px 2px 0 0;
position:absolute;
/*position:absolute;*/
top:0;
bottom:0;
margin:auto;
Expand Down
68 changes: 58 additions & 10 deletions client/fineuploader-new.css
Expand Up @@ -2,6 +2,58 @@
/* Fine Uploader Styles
/* ---------------------------------------
/* Buttons
------------------------------------------ */
.qq-btn
{
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset,
1px 0 1px rgba(255, 255, 255, 0.07) inset,
0 1px 0 rgba(0, 0, 0, 0.36),
0 -2px 12px rgba(0, 0, 0, 0.08) inset;
padding: 3px 4px;
border: 1px solid #CCCCCC;
border-radius: 2px;
color: inherit;
background-color: #FFFFFF;
}
.qq-upload-delete, .qq-upload-pause, .qq-upload-continue {
display: inline;
}
.qq-upload-delete
{
background-color: #e65c47;
color: #FAFAFA;
border-color: #dc523d;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}
.qq-upload-delete:hover {
background-color: #f56b56;
}
.qq-upload-cancel
{
background-color: #F5D7D7;
border-color: #e6c8c8;
}
.qq-upload-cancel:hover {
background-color: #ffe1e1;
}
.qq-upload-retry
{
background-color: #EBF6E0;
border-color: #d2ddc7;
}
.qq-upload-retry:hover {
background-color: #f7ffec;
}
.qq-upload-pause, .qq-upload-continue {
background-color: #00ABC7;
color: #FAFAFA;
border-color: #2dadc2;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}
.qq-upload-pause:hover, .qq-upload-continue:hover {
background-color: #0fbad6;
}

/* Upload Button
------------------------------------------ */
Expand All @@ -15,11 +67,11 @@
background: #00ABC7;
color: #FFFFFF;
border-radius: 2px;
border: 1px solid #37B7CC;
border: 1px solid #2dadc2;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset,
1px 0 1px rgba(255, 255, 255, 0.07) inset,
0 1px 0 rgba(0, 0, 0, 0.36),
0 -2px 12px rgba(0, 0, 0, 0.08) inset
0 -2px 12px rgba(0, 0, 0, 0.08) inset;
}
.qq-upload-button-hover {
background: #33B6CC;
Expand Down Expand Up @@ -142,14 +194,10 @@
vertical-align: text-bottom;
}

.qq-upload-delete, .qq-upload-pause, .qq-upload-continue {
display: inline;
}

.qq-upload-retry, .qq-upload-delete, .qq-upload-cancel,
.qq-upload-pause, .qq-upload-continue {
color: #000000;
}
/*.qq-upload-retry, .qq-upload-delete, .qq-upload-cancel,*/
/*.qq-upload-pause, .qq-upload-continue {*/
/*color: #000000;*/
/*}*/

.qq-upload-size, .qq-upload-cancel, .qq-upload-retry,
.qq-upload-delete, .qq-upload-pause, .qq-upload-continue {
Expand Down
2 changes: 1 addition & 1 deletion client/html/templates/default.html
Expand Up @@ -11,7 +11,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../fine-uploader-{VERSION}.css" rel="stylesheet">
<link href="../../fine-uploader-new.css" rel="stylesheet">
<script src="../../fine-uploader-{VERSION}.js"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader">
Expand Down
19 changes: 11 additions & 8 deletions test/devenv.html
Expand Up @@ -37,7 +37,10 @@
<!--<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">-->
<!--<span class="qq-upload-size-selector qq-upload-size"></span>-->
<!--<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>-->
<!--<button class="qq-upload-delete-selector qq-upload-delete">Delete</button>-->
<!--<button class="qq-upload-delete-selector qq-upload-delete">-->
<!--<span class="qq-delete-icon" aria-label="Delete"></span>-->
<!--Delete-->
<!--</button>-->
<!--<button class="qq-upload-pause-selector qq-upload-pause">Pause</button>-->
<!--<button class="qq-upload-continue-selector qq-upload-continue">Continue</button>-->
<!--</div>-->
Expand Down Expand Up @@ -73,9 +76,9 @@
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button class="qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button class="qq-upload-retry-selector qq-upload-retry">Retry</button>
<button class="qq-upload-delete-selector qq-upload-delete">Delete</button>
<button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
Expand Down Expand Up @@ -108,9 +111,9 @@
<!--<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>-->
<!--<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">-->
<!--<span class="qq-upload-size-selector qq-upload-size"></span>-->
<!--<button class="qq-upload-cancel-selector qq-upload-cancel">Cancel</button>-->
<!--<button class="qq-upload-retry-selector qq-upload-retry">Retry</button>-->
<!--<button class="qq-upload-delete-selector qq-upload-delete">Delete</button>-->
<!--<button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>-->
<!--<button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>-->
<!--<button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>-->
<!--<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>-->
<!--</li>-->
<!--</ul>-->
Expand All @@ -121,7 +124,7 @@
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!--<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>-->
<link href="../client/fineuploader.css" rel="stylesheet" type="text/css"/>
<link href="../client/fineuploader-new.css" rel="stylesheet" type="text/css"/>
<!--<link href="../client/fineuploader-gallery.css" rel="stylesheet" type="text/css"/>-->
<!--<link href="../client/fineuploader-legacy.css" rel="stylesheet" type="text/css"/>-->
<link href="styles.css" rel="stylesheet" type="text/css"/>
Expand Down

0 comments on commit 9514512

Please sign in to comment.