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

…sted, actions panel top gradient replaced

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 {

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?
 	 	}
 	}
 }

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 {
 
-	}	
+	}
 }

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;