diff --git a/admin/css/screen.css b/admin/css/screen.css
index 040b2d4a5..47ec1de2f 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -340,12 +340,12 @@ body.cms { overflow: hidden; }
.cms-content-actions { margin: 0; padding: 12px 16px; z-index: 0; border-top: 1px solid rgba(201, 205, 206, 0.8); border-top: 1px solid #FAFAFA; -webkit-box-shadow: #cccccc 0 -1px 1px; -moz-box-shadow: #cccccc 0 -1px 1px; box-shadow: #cccccc 0 -1px 1px; }
/** -------------------------------------------- Messages -------------------------------------------- */
-.message { display: block; clear: both; margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
-.message.notice { background-color: #ffbe66; border-color: #ff9300; }
+.message { display: block; clear: both; margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px #ccc solid; background: #fff; background: rgba(255, 255, 255, 0.5); -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
+.message.notice { background: #d9edf7; border-color: #bce8f1; }
.message.notice a, .message.notice .cms .jstree .jstree-wholerow a:hover, .cms .jstree .jstree-wholerow .message.notice a:hover, .message.notice .cms .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow #vakata-contextmenu .message.notice li.vakata-hover > a, .message.notice .cms #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .jstree .jstree-wholerow .message.notice li.vakata-hover > a, .message.notice .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .message.notice li.vakata-hover > a, .message.notice .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow .message.notice li.vakata-hover > a, .message.notice .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow a:hover, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.notice a:hover, .message.notice .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu .message.notice li.vakata-hover > a, .message.notice .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.notice li.vakata-hover > a, .message.notice .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu .message.notice li.vakata-hover > a, .message.notice .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow .message.notice li.vakata-hover > a { color: #999; }
.message.warning { background-color: #ffbe66; border-color: #ff9300; }
-.message.error, .message.bad, .message.required, .message.validation { background-color: #ffbe66; border-color: #ff9300; }
-.message.good { background-color: #65a839; background-color: rgba(101, 168, 57, 0.7); border-color: #65a839; color: #fff; text-shadow: 1px -1px 0 #1f9433; -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
+.message.error, .message.bad, .message.required, .message.validation { background: #f6e7e7; background: rgba(241, 220, 220, 0.5); border-color: #efd4d8; color: #b94a48; }
+.message.good { background: #65a839; background: rgba(101, 168, 57, 0.7); border-color: #65a839; color: #fff; text-shadow: 1px -1px 0 #1f9433; }
.message.good a, .message.good .cms .jstree .jstree-wholerow a:hover, .cms .jstree .jstree-wholerow .message.good a:hover, .message.good .cms .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .cms #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow a:hover, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.good a:hover, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow .message.good li.vakata-hover > a { text-shadow: none; }
.message p { margin: 0; }
@@ -644,9 +644,9 @@ form.import-form label.left { width: 250px; }
.ss-uploadfield-item-edit-all .ui-button-text { padding-right: 0; }
.toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -217px no-repeat; }
-.fileOverview .toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -159px no-repeat; display: inline-block; width: 8px; height: 8px; padding-left: 5px; }
+.ss-uploadfield-item-edit-all .toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -159px no-repeat; display: inline-block; width: 8px; height: 8px; padding-left: 5px; }
.toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -905px no-repeat; }
-.fileOverview .toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -143px no-repeat; }
+.ss-uploadfield-item-edit-all .toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -143px no-repeat; }
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */
.cms .jstree > ul > li, .TreeDropdownField .treedropdownfield-panel .jstree > ul > li { margin-left: 0px; }
diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss
index 8c3e50cd1..7842db5d1 100644
--- a/admin/scss/_style.scss
+++ b/admin/scss/_style.scss
@@ -436,35 +436,34 @@ body.cms {
clear: both;
margin: 0 0 $grid-y 0;
padding: $grid-y - 1 $grid-x - 1;
- font-weight: bold;
-
- border: 1px black solid;
-
+ font-weight: bold;
+ border: 1px #ccc solid;
+ background:#fff; //for browsers that don't understand rgba
+ background:rgba(#fff,0.5);
+ @include border-radius(3px 3px 3px 3px);
&.notice {
- background-color: lighten($color-notice, 20%);
- border-color: $color-notice;
-
+ background: $color-notice;
+ border-color: darken(adjust-hue($color-notice, -10), 7%);
a {
color: #999;
}
- }
-
+ }
&.warning {
background-color: lighten($color-warning, 20%);
border-color: $color-warning;
}
&.error, &.bad, &.required, &.validation {
- background-color: lighten($color-error, 20%);
- border-color: $color-error;
- }
-
+ background: lighten($color-error, 43%);//for browsers that don't understand rgba
+ background: rgba(lighten($color-error, 40%), 0.5);
+ border-color: lighten(adjust-hue($color-error, -10), 38%);
+ color:$color-error;
+ }
&.good {
- background-color: $color-good;//for browsers that don't understand rgba
- background-color: rgba($color-good,0.7);
+ background: $color-good;//for browsers that don't understand rgba
+ background: rgba($color-good,0.7);
border-color: $color-good;
- color:#fff;
- @include text-shadow(1px -1px 0 $color-button-constructive);
- @include border-radius(3px 3px 3px 3px);
+ color:#fff;
+ @include text-shadow(1px -1px 0 $color-button-constructive);
a {
text-shadow:none;
}
@@ -521,7 +520,7 @@ body.cms {
padding-top:5px; //aligns label with point of arrow
font-weight:bold; //to match pagetype label
@include text-shadow(1px 1px 0 $color-text-shadow);
- }
+ }
}
ul.SelectionGroup {
padding-left:28px;
@@ -1709,10 +1708,10 @@ body.cms-dialog {
.title {
height: 26px - 2*4px; // minus padding
padding: 4px;
- }
-
+ }
}
+
/** --------------------------------------------
* Item Edit Form
* -------------------------------------------- */
@@ -1881,12 +1880,10 @@ form.import-form {
.ss-uploadfield-item-edit-all .ui-button-text{
padding-right:0;
}
-
-
.toggle-details-icon {
background: sprite($sprites32, menu-arrow-down) no-repeat;
- .fileOverview &{
+ .ss-uploadfield-item-edit-all &{
background: sprite($sprites32, menu-arrow-deselected-down) no-repeat;
display:inline-block;
width:8px;
@@ -1896,7 +1893,7 @@ form.import-form {
&.opened {
background: sprite($sprites32, menu-arrow-up) no-repeat;
- .fileOverview &{
+ .ss-uploadfield-item-edit-all &{
background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;
}
}
diff --git a/admin/scss/themes/_default.scss b/admin/scss/themes/_default.scss
index 41cad3ccc..ad87302ab 100644
--- a/admin/scss/themes/_default.scss
+++ b/admin/scss/themes/_default.scss
@@ -55,8 +55,8 @@ $color-button-destructive: #f00 !default;
$color-button-disabled: #eeeded !default;
$color-warning: #FF9300 !default;
-$color-error: #FF9300 !default;
-$color-notice: #FF9300 !default;
+$color-error: #b94a48 !default;
+$color-notice: #d9edf7 !default;
$color-good: #65A839 !default;
$color-cms-batchactions-menu-background: #f5f5f5 !default;
diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css
index 6bea44ff6..469d082f6 100644
--- a/css/AssetUploadField.css
+++ b/css/AssetUploadField.css
@@ -4,29 +4,34 @@
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
+.ss-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; }
+
#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: 16px; overflow: auto; background: #E2E2E2; }
body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-assetuploadfield .details fieldset .fieldholder-small label { margin-left: 0; }
-.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
+.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; position: relative; }
.ss-assetuploadfield .field { border-bottom: 0; box-shadow: none; }
-.ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; margin-bottom: 5px; padding-bottom: 5px; height: 50px; position: relative; }
-.ss-assetuploadfield .fileOverview .ss-ui-button { position: absolute; bottom: 0; padding: 0; background: none; border: 0; right: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #444444; }
-.ss-assetuploadfield .fileOverview .ss-ui-button:hover { color: #1e7cba; }
-.ss-assetuploadfield .fileOverview .state { font-size: 16px; font-weight: bold; line-height: 20px; margin-bottom: 5px; }
-.ss-assetuploadfield .fileOverview .details { color: #6a6a6a; }
-.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; }
+.ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; position: relative; }
+.ss-assetuploadfield .fileOverview .uploadStatus:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+*:first-child .ss-assetuploadfield .fileOverview .uploadStatus { zoom: 1; }
+.ss-assetuploadfield .fileOverview .uploadStatus .state { float: left; font-size: 16px; font-weight: bold; line-height: 1.1em; }
+.ss-assetuploadfield .fileOverview .uploadStatus .details { opacity: 0.9; float: right; }
+.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all { clear: both; position: relative; z-index: 9; }
+.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all .ss-uploadfield-item-edit-all { z-index: 8; position: absolute; top: -33px; padding: 0; background: none; border: 0; right: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #444444; }
+.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all .ss-uploadfield-item-edit-all:hover { color: #1e7cba; }
+.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; clear: both; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item .info { position: relative; padding: 7px; overflow: hidden; background-color: #FFBE66; border: 1px solid #FF9300; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview .no-preview { display: block; height: 100%; width: 100%; background: url("../images/icons/document.png") 2px 0px no-repeat; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; height: 30px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -ms-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item .info { position: relative; padding: 7px; overflow: hidden; background-color: #FFBE66; border: 1px solid #FF9300; }
-.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 130px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -ms-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; height: 30px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); }
+.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 130px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }
-.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -ms-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); }
+.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { position: relative; float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
@@ -48,7 +53,7 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button .ui-icon { display: none; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
diff --git a/css/UploadField.css b/css/UploadField.css
index 5600be558..41c2dfea0 100644
--- a/css/UploadField.css
+++ b/css/UploadField.css
@@ -7,7 +7,7 @@
.ss-uploadfield .clear { clear: both; }
.ss-insert-media .ss-uploadfield { margin-top: 20px; }
.ss-insert-media .ss-uploadfield h4 { float: left; }
-.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
+.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
.ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; }
@@ -27,7 +27,7 @@
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { height: 28px; margin: 6px 0 0; position: relative; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { position: absolute; left: 0; right: 42px; width: auto; margin: 11px 0 0; height: 15px; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: none; position: relative; }
diff --git a/javascript/UploadField.js b/javascript/UploadField.js
index 0c2892a2c..f28e04407 100644
--- a/javascript/UploadField.js
+++ b/javascript/UploadField.js
@@ -39,9 +39,11 @@
//Fixes case where someone uploads a single erroring file
if(data.files.length == 1 && data.files[0].error !== null){
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UploadField.UPLOADFAIL', 'Sorry your upload failed'));
+ $('.fileOverview .uploadStatus').addClass("bad").removeClass("good").removeClass("notice");
}else{
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress'));//.show();
- $('.fileOverview button').hide();
+ $('.ss-uploadfield-item-edit-all').hide();
+ $('.fileOverview .uploadStatus').addClass("notice").removeClass("good").removeClass("bad");
}
return result;
@@ -49,8 +51,9 @@
_onAlways: function (jqXHRorResult, textStatus, jqXHRorError, options) {
$.blueimpUI.fileupload.prototype._onAlways.call(this, jqXHRorResult, textStatus, jqXHRorError, options);
if (this._active === 0) {
- $('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.FILEUPLOADCOMPLETED', 'File Upload Completed!'));//.hide();
- $('.fileOverview button').show();
+ $('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.FILEUPLOADCOMPLETED', 'File upload completed!'));//.hide();
+ $('.ss-uploadfield-item-edit-all').show();
+ $('.fileOverview .uploadStatus').addClass("good").removeClass("notice").removeClass("bad");
}
}
});
@@ -265,7 +268,7 @@
}
});
- $('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').entwine({
+ $('div.ss-upload .ss-uploadfield-item-edit-all').entwine({
onclick: function(e) {
if($(this).hasClass('opened')){
@@ -340,7 +343,7 @@
iframe.height(h);
// set container to match the same height
- iframe.parent().height(h+parentPadding);
+ iframe.parent().animate({height: h+parentPadding}, 500);
iframe.contents().find('body form').css({'width':'98%'});
},
@@ -358,13 +361,13 @@
itemInfo.find('label .name').text(iframe.find('#Name input').val());
});
if($('div.ss-upload .ss-uploadfield-files .ss-uploadfield-item-actions .toggle-details-icon:not(.opened)').index() < 0){
- $('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').addClass('opened').find('.toggle-details-icon').addClass('opened');
+ $('div.ss-upload .ss-uploadfield-item-edit-all').addClass('opened').find('.toggle-details-icon').addClass('opened');
}
} else {
- this.height(0);
+ this.animate({height: 0}, 500);
itemInfo.find('.toggle-details-icon').removeClass('opened');
- $('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').removeClass('opened').find('.toggle-details-icon').removeClass('opened');
+ $('div.ss-upload .ss-uploadfield-item-edit-all').removeClass('opened').find('.toggle-details-icon').removeClass('opened');
if(!this.hasClass('edited')){
text = ss.i18n._t('UploadField.NOCHANGES', 'No Changes');
status.addClass('ui-state-success-text');
diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss
index dbf402057..4b2b602bb 100644
--- a/scss/AssetUploadField.scss
+++ b/scss/AssetUploadField.scss
@@ -6,6 +6,13 @@
@import "../admin/scss/_mixins";
@import "_elementMixins";
+// Temporary. To be hidden and replaced with javascript tooltip
+.ss-uploadfield-view-allowed-extensions{
+ padding-top:20px;
+ clear:both;
+ max-width:750px;
+ display:block;
+}
#AssetUploadField {
border-bottom: 0;
@@ -30,7 +37,6 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
}
}
-
.ss-assetuploadfield {
h3 {
border-bottom: 1px solid $color-shadow-light;
@@ -38,6 +44,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
margin: 0 0 8px;
padding: 0 0 7px;
clear: both;
+ position:relative;
}
.field {
border-bottom: 0;
@@ -46,14 +53,30 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
.fileOverview{
clear:both;
margin-top:10px;
- margin-bottom:5px;
- padding-bottom:5px;
- height:50px;
position:relative;
- .ss-ui-button {
+ .uploadStatus{
+ @include clearfix;
+ .state{
+ float:left;
+ font-size: 16px;
+ font-weight:bold;
+ line-height:1.1em;
+ }
+ .details{
+ opacity:0.9;
+ float:right;
+ }
+ }
+ }
+ .ss-uploadfield-item-actions.edit-all{
+ clear:both;
+ position:relative;
+ z-index:9;
+ .ss-uploadfield-item-edit-all {
+ z-index:8;
position:absolute;
- bottom:0;
+ top:-33px;
padding:0;
background: none;
border: 0;
@@ -64,21 +87,13 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
color: #1e7cba;
}
}
- .state{
- font-size: 16px;
- font-weight:bold;
- line-height:20px;
- margin-bottom:5px;
- }
- .details{
- color:lighten($color-text, 15%);
- }
}
.ss-uploadfield-files {
margin: 0;
padding: 0;
+ clear:both;
.ss-uploadfield-item {
border: 1px solid lighten($color-medium-separator, 20%);
@@ -325,7 +340,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
}
}
}
- }
+ }
}
}
diff --git a/scss/UploadField.scss b/scss/UploadField.scss
index 20590deb2..ab14a34cb 100644
--- a/scss/UploadField.scss
+++ b/scss/UploadField.scss
@@ -32,7 +32,7 @@
.ss-uploadfield-item {
margin: 0;
padding: 15px;
- overflow: auto;
+ overflow: auto;
.ss-uploadfield-item-preview {
height: 60px;
diff --git a/templates/AssetUploadField.ss b/templates/AssetUploadField.ss
index 70f270438..4a596696c 100644
--- a/templates/AssetUploadField.ss
+++ b/templates/AssetUploadField.ss
@@ -7,6 +7,8 @@
+
+
+
+
+
+ <% _t('AssetAdmin.ALLOWEDEXTS', 'Allowed extensions') %>
+ $Extensions
+
+
@@ -33,21 +42,23 @@
2
<% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %>
-
+
+
+
+
+
+
+
-
+
<% _t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress') %>
<% _t('AssetUploadField.TOTAL', 'Total') %>:
<% _t('AssetUploadField.FILES', 'Files') %>
-
-
-
-