Browse files

ENHANCEMENT visual enhancements, cms tabs, main menu drop shadow adju…

…sted, actions panel top gradient replaced
  • Loading branch information...
1 parent 0d4f7a0 commit 5edf447d2a6bf7cd35fcc40ef02ff716353fa643 @clarkepaul clarkepaul committed May 21, 2012
View
308 admin/css/screen.css
172 additions, 136 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
BIN admin/images/btn-icon-sd3ddece98a.png
Deleted file not rendered
View
BIN admin/images/btn-icon-sf47938c650.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/menu-icons/16x16-s170d9d69bb.png
Deleted file not rendered
View
BIN admin/images/menu-icons/16x16-sb173d358c2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/menu-icons/24x24-s546fcae8fd.png
Deleted file not rendered
View
BIN admin/images/menu-icons/24x24-sedfac01ed1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/sprites-32x32-sa4e142f7f0.png
Deleted file not rendered
View
BIN admin/images/sprites-32x32-sb47394f892.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/textures/cms_content_header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
43 admin/scss/_menu.scss
@@ -84,11 +84,8 @@
.cms-menu {
z-index: 80;
background: $color-base;
- border-right: 1px solid $color-menu-border;
- width: ($grid-x * 24) - 1; /* 8x24 - 1 */
-
- @include box-shadow($color-shadow-dark 0 0 $grid-x);
-
+ width: ($grid-x * 24); // Removed right border as it clashes with different blues
+ @include box-shadow($color-shadow-blacker 0 0 3px);
a {
text-decoration: none;
}
@@ -143,15 +140,15 @@
text-shadow: lighten($color-base, 5%) 1px 1px 0;
color: $color-text-dark;
padding: ($grid-y - 1) 5px ($grid-y - 1) 8px;
- background-color: darken($color-base, 12%);
+ background-color: $color-base;
cursor: pointer;
@include background-image(linear-gradient(
$color-base,
- darken($color-base, 12%)
+ darken($color-base, 10%)
));
- border-top: 1px solid lighten($color-base, 10%);
+ border-top: 1px solid lighten($color-base, 6%);
border-bottom: 1px solid darken($color-base, 20%);
&:hover {
@@ -212,6 +209,10 @@
}
}
}
+
+ }
+ ul li a {
+ border-top: 1px solid lighten($color-base, 2%);
}
&.current { //need to apply current stlye to flyout also (at least line height)
@@ -253,7 +254,7 @@
line-height: 32px;
color: lighten($color-menu-button, 45%);
background: none;
- border-top: 1px solid $color-menu-button;
+ border-top: 1px solid darken($color-menu-button,4%);
border-bottom: 1px solid darken($color-menu-button, 20%);
&.current,
@@ -274,7 +275,7 @@
&.current {
background: darken($color-menu-button, 5%);
border-top: 1px solid darken($color-menu-button, 5%);
-
+ border-top: none;
a {
font-weight: bold;
color: $color-text-light;
@@ -287,9 +288,19 @@
}
}
- ul {
+ ul.collapse {
display: none;
- #Menu-CMSPagesController {
+ li {
+ a {
+ background-image:none;
+ font-size: 11px;
+ padding: 0 10px 0 40px;
+ height: 32px;
+ line-height: 32px;
+ }
+ }
+ /* // To specific - was overriding collapsed-flyout styles
+#Menu-CMSPagesController {
a {
background-image:none;
font-size: 11px;
@@ -325,6 +336,7 @@
line-height: 32px;
}
}
+*/
}
/* Style applied to the menu flyout only when the collapsed setting */
@@ -334,14 +346,9 @@
li {
a {
font-size: $font-base-size - 1;
- padding: 0 10px 0 40px;
+ padding: 0 10px 0 16px;
height: 32px;
line-height: 32px;
-
- &.current,
- &:hover {
- font-weight: bold;
- }
}
&.current a {
View
74 admin/scss/_style.scss
@@ -87,16 +87,17 @@ body.cms {
}
.cms-content-header {
- padding: ($grid-y - 8) $grid-x $grid-y;
+ padding: ($grid-y - 8) 0 $grid-y $grid-x;
height: $grid-y * 4;
z-index: 60;
- @include box-shadow($color-shadow-dark 0 0 ($grid-x / 2) inset);
+ overflow:hidden;
+ @include box-shadow($color-shadow-light 0 0 ($grid-x / 2) inset);
background: {
image:url(../images/textures/cms_content_header.png);
repeat:repeat;
+ position: 0 1px;
}
- overflow:hidden;
-
+
a {
color: $color-text-blue-link;
}
@@ -108,11 +109,11 @@ body.cms {
}
h2 {
- padding: $grid-y $grid-x 0 $grid-x;
+ padding: $grid-y - 2 $grid-x 0 $grid-x;
font-size: $font-base-size + 2;
line-height: $grid-x * 3;
font-weight: bold;
- text-shadow: darken($color-widget-bg, 15%) 1px 1px 0;
+ /* text-shadow: darken($color-widget-bg, 15%) 1px 1px 0; */ // Gives wrong effect
margin: 0;
display:table-cell;
vertical-align:top;
@@ -156,7 +157,7 @@ body.cms {
width:40%;
.ui-tabs-nav {
float:right;
- margin-right:$grid-x*4;
+ /* margin-right:$grid-x*4; */ // Removed to make tabs align far right
li {
a {
font-weight: bold;
@@ -180,6 +181,8 @@ body.cms {
top:none;
}
padding-bottom:0px;
+ @include box-shadow($color-shadow-dark 0 0 2px);
+ border-color: #EEE;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-radius:0;
@@ -221,18 +224,17 @@ body.cms {
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background-color: $color-base;
+ text-shadow: lighten($color-tab, 5%) 0 1px 0;
@include background-image(
linear-gradient($color-base, darken($color-base, 12%))
);
border: {
- right-color: darken($color-tab, 20%);
- left-color: $color-tab;
+ right-color: darken($color-base, 15%);
+ left-color: lighten($color-base, 10%);
bottom:none;
}
- text-shadow: lighten($color-tab, 5%) 0 1px 0;
-
a {
color: #FFF;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
@@ -390,14 +392,13 @@ body.cms {
* -------------------------------------------- */
.cms-content-actions {
- margin: $grid-y $grid-x*2 $grid-y*2 0;
- padding-left:$grid-x*2;
+ margin: 0;
+ padding: $grid-y*1.5 $grid-y*2;
height: $grid-y*4;
z-index: 0;
- @include box-shadow(darken($color-widget-bg, 2%) 0 $grid-y*-2 $grid-y*2);
- .root-form &{
- @include box-shadow(rgba($tab-panel-texture-color, 0.8) 0 $grid-y*-2 $grid-y*2);
- }
+ border-top: 1px solid $color-light-separator;
+ border-top: 1px solid #FAFAFA;
+ @include box-shadow(#CCC 0 -1px 1px);
}
/** --------------------------------------------
@@ -625,13 +626,14 @@ body.cms {
* panel
*/
.cms-content-tools {
- background-color: $color-panel-background;
+ background-color: #F1F4F5;
+ background: $tab-panel-texture-background; // Pages bg panel look like same as pages view
width: $grid-x * 24;
border-right: 1px solid darken($color-widget-bg, 15%);
overflow-y: auto;
overflow-x: hidden;
z-index: 70;
- @include box-shadow($color-shadow-dark 0 0 ($grid-x / 2));
+ @include box-shadow($color-shadow-black 0 2px 3px);
float: left;
position: relative;
@@ -688,7 +690,6 @@ body.cms {
text-shadow: darken($color-widget-bg, 50%) -1px -1px 0;
width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
color: lighten($color-widget-bg, 60%);
-
@include hide-text-overflow();
}
}
@@ -1070,7 +1071,7 @@ form.member-profile-form {
.cms {
.cms-content {
- border-right: 1px solid $color-light-separator;
+ /* border-right: 1px solid $color-light-separator; */ // This holds the cms away from the right side by 1px so removed
@include box-shadow(3px 0 4px rgba(0,0,0,0.15));
@include border-radius(0);
@@ -1133,20 +1134,16 @@ form.member-profile-form {
overflow: hidden;
.cms-panel-toggle {
- @include box-shadow(0 0 5px rgba(107, 120, 123, 0.5));
-
+ @include box-shadow(0 0 1px rgba(107, 120, 123, 0.5));
+ &.south {
+ border-top: 1px solid $color-light-separator;
+ }
a {
display: block;
text-align: right;
padding: $grid-y/2 0;
width: 100%;
-
- @include background-image(
- linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 30%))
- );
-
text-decoration: none;
-
span {
display: inline-block;
margin: 0 5px;
@@ -1159,6 +1156,11 @@ form.member-profile-form {
}
}
}
+ &.cms-content-tools .cms-panel-toggle {
+ &.south {
+ border-top: 1px solid #FFF;
+ }
+ }
&.collapsed {
@@ -1368,6 +1370,7 @@ form.member-profile-form {
border: {
right-color: darken($color-tab, 20%);
left-color: $color-tab;
+ left-color: red;
bottom:none;
top:none;
}
@@ -1603,8 +1606,9 @@ form.small {
}
.cms-file-info-data {
- // Ensure it fits beside the image preview
- max-width: 350px;
+ // Ensure it fits beside the image preview, increased size for long url
+ max-width: 550px;
+
// Reduced label widths to fit everything in smaller space
.field {
@@ -1665,7 +1669,7 @@ form.import-form {
.cms-container {
.CMSMain.CMSPageEditController {
// Fix pixel gap between nav tree and main page header
- margin-left:-1px;
+ margin-left: -1px; // Removed to close gap far right of right tabs?
//Styling of tabs on page edit
.cms-edit-form {
background:darken($color-widget-bg, 2%);
@@ -1696,7 +1700,7 @@ form.import-form {
.ss-tabset .ui-tabs-panel {
background:darken($color-widget-bg, 2%);
clear:both;
- border-top:1px solid $color-button-generic-border;
+ /* border-top:1px solid $color-button-generic-border; */
.ss-tabset {
border-top:none;
.ui-tabs-nav {
@@ -1737,7 +1741,7 @@ form.import-form {
.ss-tabset .ui-tabs-panel {
background:darken($color-widget-bg, 2%);
clear:both;
- border-top:1px solid $color-button-generic-border;
+ /* border-top:1px solid $color-button-generic-border; */
}
}
//Styling of tabs on page History
@@ -1771,7 +1775,7 @@ form.import-form {
.ss-tabset .ui-tabs-panel {
background:darken($color-widget-bg, 2%);
clear:both;
- border-top:1px solid $color-button-generic-border;
+ /* border-top:1px solid $color-button-generic-border; */ // Double border?
}
}
}
View
6 admin/scss/_uitheme.scss
@@ -40,6 +40,9 @@
.ui-tabs-panel {
background: transparent; // default it's white
}
+ .cms-panel-padded .ui-tabs-panel {
+ padding: 0; // Removes double paddle around main pages page, does not effect other areas of the site from what I can tell
+ }
}
.ui-widget-content,
@@ -49,6 +52,7 @@
font-family: $font-family;
border: 0;
}
+
.ui-widget-header {
background-color: darken($color-widget-bg, 20%);
@@ -110,5 +114,5 @@
.ui-widget-content .ss-ui-button,
.ui-widget-header .ss-ui-button {
- }
+ }
}
View
2 admin/scss/themes/_default.scss
@@ -20,6 +20,8 @@ $color-dark-grey: #7B8C91 !default;
$color-shadow-light: rgba(201, 205, 206, 0.8) !default;
$color-shadow-dark: rgba(107, 120, 123, 0.5) !default;
+$color-shadow-black: rgba(0, 0, 0, 0.6) !default;
+$color-shadow-blacker: rgba(0, 0, 0, 0.9) !default;
$color-highlight: #FFFF66 !default;
$color-highlight-opacity: rgba(255, 255, 102, 0.3) !default;
View
26 css/AssetUploadField.css
@@ -11,18 +11,18 @@
as is used for files in the files up-load area. The arrows
themselves are added in the _style file
**/
-#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }
body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
.ss-uploadfield-edit-iframe { background: #E2E2E2; }
-.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-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; }
.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; background: none; border: 0; right: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; color: #444444; }
-.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
+.ss-assetuploadfield .fileOverview .ss-ui-button { position: absolute; bottom: 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.ss-uploadfield-item-edit, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; }
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; }
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
@@ -33,44 +33,44 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
.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 .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; -o-background-clip: padding-box; -ms-background-clip: padding-box; -khtml-background-clip: padding-box; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
+.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-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
.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 .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 110px; 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 .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 .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); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; 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 { 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; display: block; 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); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { max-width: 70%; position: absolute; right: 5px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button { background: none; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-delete { display: none; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon { margin-top: 1px; display: inline-block; width: 8px; height: 8px; vertical-align: middle; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened { margin-top: 0; }
.ss-assetuploadfield .ss-uploadfield-files .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 { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-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 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-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; position: relative; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel 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; position: relative; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button .ui-icon { display: block; position: absolute; top: 0; left: 0; margin: 0; }
.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%; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { width: 300px; height: 30px; font-size: 14px; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label.ui-state-focus { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label.ui-state-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; margin-top: 16px; display: none; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -moz-border-radius: 13px; -webkit-border-radius: 13px; -o-border-radius: 13px; -ms-border-radius: 13px; -khtml-border-radius: 13px; border-radius: 13px; -moz-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -o-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 408px; float: left; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; -o-border-radius: 13px; border-radius: 13px; -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -moz-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 408px; float: left; }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { color: #5e5e5e; text-shadow: 0px 1px 0px #fff; background: url("../images/upload.png") 0 25px no-repeat; width: 230px; z-index: 1; padding: 20px 0 0; line-height: 25px; font-size: 25px; font-weight: bold; text-align: center; display: block; margin: 0 auto; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 14px; z-index: -1; }
View
13 css/GridField.css
@@ -59,12 +59,15 @@
.cms table.ss-gridfield-table tbody td a.edit-link { background: url(../admin/images/btn-icon/document--pencil.png) no-repeat 0 1px; }
.cms table.ss-gridfield-table tfoot { color: #1e2527; }
.cms table.ss-gridfield-table tfoot tr td { background: #97a8ad; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
-.cms table.ss-gridfield-table tr.title th { position: relative; background: #899ca2; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 5px; min-height: 40px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYzBjNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg5OWNhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b3c0c4), color-stop(100%, #899ca2)); background-image: -webkit-linear-gradient(#b3c0c4, #899ca2); background-image: -moz-linear-gradient(#b3c0c4, #899ca2); background-image: -o-linear-gradient(#b3c0c4, #899ca2); background-image: -ms-linear-gradient(#b3c0c4, #899ca2); background-image: linear-gradient(#b3c0c4, #899ca2); text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
+.cms table.ss-gridfield-table tr.title th { position: relative; background: #899ca2; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 5px; min-height: 40px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYzBjNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg5OWNhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b3c0c4), color-stop(100%, #899ca2)); background-image: -webkit-linear-gradient(#b3c0c4, #899ca2); background-image: -moz-linear-gradient(#b3c0c4, #899ca2); background-image: -o-linear-gradient(#b3c0c4, #899ca2); background-image: -ms-linear-gradient(#b3c0c4, #899ca2); background-image: linear-gradient(#b3c0c4, #899ca2); /* // would prefer to use the default colors
+@include background-image(linear-gradient($color-base, #8CA1AE));
+*/ text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
.cms table.ss-gridfield-table tr.title th h2 { padding: 0px; font-size: 16.8px; color: #fff; margin: 3px 8px 0; display: inline-block; }
.cms table.ss-gridfield-table tr.title th .right > * { float: right; font-size: 14.4px; }
.cms table.ss-gridfield-table tr.title th .left > * { float: left; font-size: 14.4px; }
.cms table.ss-gridfield-table tr.sortable-header { background: #bfcdd2; }
-.cms table.ss-gridfield-table tr.sortable-header th { padding: 0px; }
+.cms table.ss-gridfield-table tr.sortable-header th { padding: 0px; font-weight: normal; }
+.cms table.ss-gridfield-table tr.sortable-header th .ss-ui-button { font-weight: normal; }
.cms table.ss-gridfield-table tr:hover { background: #FFFAD6 !important; }
.cms table.ss-gridfield-table tr:first-child { background: transparent; }
.cms table.ss-gridfield-table tr.ss-gridfield-even { background: #f2f5f6; }
@@ -87,8 +90,8 @@
.cms table.ss-gridfield-table tr th button#action_gridfield_relationadd:hover { color: #444 !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield-table tr th button:hover { color: #ccc !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { color: #fff !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows.png) no-repeat right 10px; border: none; width: 100%; text-align: left; padding: 4px 8px 4px 0; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; color: #fff; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { background-position: right -30px; }
+.cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows.png) no-repeat right 6px; border: none; width: 100%; text-align: left; padding: 2px 8px 2px 0; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; color: #fff; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
+.cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { background-position: right -34px; }
.cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-desc { background-position: right -72px; }
.cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-asc { background-position: right -116px; }
.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter { background-color: #55a4d2; border: none; display: block; text-indent: -9999em; width: 30px; height: 25px; background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzOGRjMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4NzA5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -moz-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -o-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -ms-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, linear-gradient(#338dc1, #287099); border-top: 1px solid #4199cd; }
@@ -109,7 +112,7 @@
.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:-ms-input-placeholder { font-style: italic; color: #ced5d7; }
.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:placeholder { font-style: italic; color: #ced5d7; }
.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
-.cms table.ss-gridfield-table tr th span.non-sortable { padding: 1em 1em; display: block; }
+.cms table.ss-gridfield-table tr th span.non-sortable { padding: 0 1em; display: block; }
.cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 6.4px 12px; color: #666666; }
.cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYzBjNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg5OWNhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b3c0c4), color-stop(100%, #899ca2)); background-image: -webkit-linear-gradient(#b3c0c4, #899ca2); background-image: -moz-linear-gradient(#b3c0c4, #899ca2); background-image: -o-linear-gradient(#b3c0c4, #899ca2); background-image: -ms-linear-gradient(#b3c0c4, #899ca2); background-image: linear-gradient(#b3c0c4, #899ca2); }
.cms table.ss-gridfield-table tr td.bottom-all .datagrid-footer-message { text-align: center; padding-top: 6px; color: white; }
View
8 css/UploadField.css
@@ -5,10 +5,10 @@
/** ----------------------------------------------- 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 .clear { clear: both; }
-.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-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: -ms-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-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
-.ss-uploadfield .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-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; }
+.ss-uploadfield .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; }
.ss-uploadfield .ss-uploadfield-item-info { margin: 0 0 0 100px; }
.ss-uploadfield .ss-uploadfield-item-name { display: block; line-height: 13px; height: 26px; margin: 0; text-align: left; }
.ss-uploadfield .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; }
@@ -22,11 +22,11 @@
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item:last-child, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error:last-child { border-bottom: 0; }
.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 { -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
+.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-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; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: none; position: relative; }
+.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; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span { position: absolute; left: 0; top: 0; margin: 0; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span.ui-button-text, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span.ui-button-text { display: none; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
View
21 scss/GridField.scss
@@ -21,8 +21,8 @@
//multiple images.
$experimental-support-for-svg: true;
-$gf_colour_base: desaturate(darken(adjust-hue($color-base, -10%), 10%),5%);
-$gf_colour_gradient_light: lighten($gf_colour_base, 10%);
+$gf_colour_base: desaturate(darken(adjust-hue($color-base, -10%), 10%),5%); // This changes the color significantly, presume gf is gradient friendly? looks very different than #B0BEC7
+$gf_colour_gradient_light: lighten($gf_colour_base, 10%);
$gf_colour_gradient_dark: darken($gf_colour_base, 5%);
$gf_colour_header_border: $gf_colour_gradient_dark;
$gf_colour_subheader: saturate(lighten($gf_colour_base, 15%),5%);
@@ -259,6 +259,9 @@ $gf_grid_x: 16px;
padding: 5px;
min-height: 40px; //this is to accomodate the add new button.
@include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark));
+ /* // would prefer to use the default colors
+ @include background-image(linear-gradient($color-base, #8CA1AE));
+ */
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
h2{
padding: 0px;
@@ -281,7 +284,11 @@ $gf_grid_x: 16px;
background: $gf_colour_subheader;
th{
padding: 0px;
- }
+ font-weight: normal;
+ .ss-ui-button {
+ font-weight: normal;
+ }
+ }
}
&:hover {
background: #FFFAD6 !important;
@@ -381,16 +388,16 @@ $gf_grid_x: 16px;
@include box-shadow-none;
}
&.ss-gridfield-sort {
- background: transparent url(../images/arrows.png) no-repeat right 10px;
+ background: transparent url(../images/arrows.png) no-repeat right 6px;
border:none;
width:100%;
text-align: left;
- padding: 4px 8px 4px 0;
+ padding: 2px 8px 2px 0; // Doesn't need to be so big now that filter has moved
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
color: #fff;
@include border-radius(0);
&:hover {
- background-position: right -30px;
+ background-position: right -34px;
}
&.ss-gridfield-sorted-desc {
background-position: right -72px;
@@ -511,7 +518,7 @@ $gf_grid_x: 16px;
}
span.non-sortable {
- padding:1em 1em;
+ padding: 0 1em;
display:block;
}
}

0 comments on commit 5edf447

Please sign in to comment.