Skip to content
This repository
Browse code

ENHANCEMENT:Trac#7166 - styled the new combined tree and edit view.

  • Loading branch information...
commit 330dd3008c8648fd1fd6ebe0a045e0278ab7eb7f 1 parent 65fc81f
authored April 18, 2012
29  admin/css/screen.css
@@ -262,7 +262,9 @@ body.cms { overflow: hidden; }
262 262
 .cms-content-header .backlink span.btn-icon-back { height: 16px; }
263 263
 .cms-content-header h2 { padding: 8px 8px 0 8px; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; margin: 0; display: table-cell; vertical-align: top; width: 100%; }
264 264
 .cms-content-header h2 .breadcrumbs-wrapper { display: table-row; }
265  
-.cms-content-header h2 .breadcrumbs-wrapper .crumb { display: table-cell; line-height: 26px; }
  265
+.cms-content-header h2 .breadcrumbs-wrapper .crumb { display: table-cell; line-height: 26px; padding: 0 5px; }
  266
+.cms-content-header h2 .breadcrumbs-wrapper .crumb:first-child { padding-left: 0px; }
  267
+.cms-content-header h2 .breadcrumbs-wrapper .crumb:last-child { padding-right: 0px; }
266 268
 .cms-content-header > div { display: table; }
267 269
 .cms-content-header > div .cms_backlink { display: table-cell; vertical-align: middle; width: auto; }
268 270
 .cms-content-header .cms-content-header-tabs { display: table-cell; white-space: nowrap; width: 100%; }
@@ -274,7 +276,6 @@ body.cms { overflow: hidden; }
274 276
 .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-left, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; }
275 277
 
276 278
 .cms-edit-form .cms-content-header-tabs .ui-tabs-nav li a { text-indent: 0; }
277  
-.cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-state-default a, .cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-default a, .cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-default a { color: #1f1f1f; }
278 279
 
279 280
 /** -------------------------------------------- Tabs -------------------------------------------- */
280 281
 .cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav li { margin: 0; }
@@ -305,7 +306,7 @@ body.cms { overflow: hidden; }
305 306
 .ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
306 307
 
307 308
 /** -------------------------------------------- Actions -------------------------------------------- */
308  
-.cms-content-actions { margin: 8px 16px 16px 16px; height: 32px; z-index: 70; -moz-box-shadow: #f0f3f4 0 -16px 16px; -webkit-box-shadow: #f0f3f4 0 -16px 16px; -o-box-shadow: #f0f3f4 0 -16px 16px; box-shadow: #f0f3f4 0 -16px 16px; }
  309
+.cms-content-actions { margin: 8px 16px 16px 16px; height: 32px; z-index: 70; background-color: #e6eaed; -moz-box-shadow: #e6eaed 0 -16px 16px; -webkit-box-shadow: #e6eaed 0 -16px 16px; -o-box-shadow: #e6eaed 0 -16px 16px; box-shadow: #e6eaed 0 -16px 16px; }
309 310
 
310 311
 /** -------------------------------------------- Messages -------------------------------------------- */
311 312
 .message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
@@ -353,7 +354,7 @@ body.cms { overflow: hidden; }
353 354
 .cms-content-toolbar .chzn-container-single .chzn-single div b { background: url(../images/sprites-32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px; float: right; width: 24px; }
354 355
 
355 356
 /* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */
356  
-.cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; }
  357
+.cms-content-tools { background-color: #c6d7df; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; }
357 358
 .cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); }
358 359
 .cms-content-tools .cms-panel-content { width: 176px; padding: 0 8px; overflow: auto; height: 100%; }
359 360
 .cms-content-tools .cms-panel-content .dropdown select { width: 160px; }
@@ -559,6 +560,24 @@ form.import-form label.left { width: 250px; }
559 560
 
560 561
 /** -------------------------------------------- Page Edit Controller -------------------------------------------- */
561 562
 .cms-container .CMSMain.CMSPageEditController { margin-left: -1px; }
  563
+.cms-container .CMSMain.CMSPageEditController .cms-edit-form { background: #e6eaed; }
  564
+.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 24px -1px 0; }
  565
+.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
  566
+.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; }
  567
+.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; }
  568
+.cms-container .CMSMain.CMSPageEditController .ss-tabset .ui-tabs-panel { background: #e6eaed; clear: both; border-top: 1px solid #c0c0c2; }
  569
+.cms-container .CMSPageSettingsController .cms-edit-form { background: #e6eaed; }
  570
+.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 40px -1px 0; }
  571
+.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
  572
+.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; }
  573
+.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; }
  574
+.cms-container .CMSPageSettingsController .ss-tabset .ui-tabs-panel { background: #e6eaed; clear: both; border-top: 1px solid #c0c0c2; }
  575
+.cms-container .CMSPageHistoryController .cms-edit-form { background: #e6eaed; }
  576
+.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 24px -1px 0; }
  577
+.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
  578
+.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; }
  579
+.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; }
  580
+.cms-container .CMSPageHistoryController .ss-tabset .ui-tabs-panel { background: #e6eaed; clear: both; border-top: 1px solid #c0c0c2; }
562 581
 
563 582
 /** 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. */
564 583
 .cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
@@ -682,7 +701,7 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
682 701
 .cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; }
683 702
 .cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -669px no-repeat; text-indent: -9999em; }
684 703
 
685  
-.cms-menu { z-index: 80; background: #c6d7df; border-right: 1px solid #8c99a1; width: 191px; /* 8x24 - 1 */ -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; }
  704
+.cms-menu { z-index: 80; background: #b0bec7; border-right: 1px solid #8c99a1; width: 191px; /* 8x24 - 1 */ -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; }
686 705
 .cms-menu a { text-decoration: none; }
687 706
 .cms-menu .cms-panel-content { width: 191px; /* 8x24 - 1 */ overflow-x: hidden; overflow-y: auto; }
688 707
 .cms-menu.collapsed { width: 40px; cursor: auto; z-index: 1000; }
2  admin/scss/_menu.scss
@@ -83,7 +83,7 @@
83 83
 
84 84
 .cms-menu {
85 85
 	z-index: 80;
86  
-	background: $color-menu-background;
  86
+	background: $color-base;
87 87
 	border-right: 1px solid $color-menu-border;
88 88
 	width: ($grid-x * 24) - 1; /* 8x24 - 1 */
89 89
 	
130  admin/scss/_style.scss
@@ -122,6 +122,13 @@ body.cms {
122 122
 			.crumb {
123 123
 				display:table-cell;
124 124
 				line-height:26px;
  125
+				padding:0 5px;
  126
+			}
  127
+			.crumb:first-child {
  128
+				padding-left:0px;
  129
+			}
  130
+			.crumb:last-child {
  131
+				padding-right:0px;
125 132
 			}
126 133
 		}
127 134
 	}
@@ -185,13 +192,6 @@ body.cms {
185 192
 					text-indent:0;
186 193
 				}
187 194
 			}
188  
-			.ui-state-default, 
189  
-			.ui-widget-content .ui-state-default, 
190  
-			.ui-widget-header .ui-state-default {
191  
-				a {
192  
-					color:$color-text-dark;
193  
-				}
194  
-			}
195 195
 		}
196 196
 	}		
197 197
 }
@@ -373,8 +373,8 @@ body.cms {
373 373
 	margin: $grid-y $grid-x*2 $grid-y*2 $grid-x*2;
374 374
 	height: $grid-y*4;
375 375
 	z-index: 70;
376  
-	
377  
-	@include box-shadow($tab-panel-texture-color 0 $grid-y*-2 $grid-y*2);
  376
+	background-color:darken($color-widget-bg, 2%);
  377
+	@include box-shadow(darken($color-widget-bg, 2%) 0 $grid-y*-2 $grid-y*2);
378 378
 }
379 379
 
380 380
 /** --------------------------------------------
@@ -597,7 +597,7 @@ body.cms {
597 597
  * panel
598 598
  */
599 599
 .cms-content-tools {
600  
-	background-color: darken($color-widget-bg, 5%);
  600
+	background-color: $color-panel-background;
601 601
 	width: $grid-x * 24;
602 602
 	border-right: 1px solid darken($color-widget-bg, 15%);
603 603
 	overflow-y: auto;	
@@ -1590,7 +1590,111 @@ form.import-form {
1590 1590
  * Page Edit Controller
1591 1591
  * -------------------------------------------- */
1592 1592
 
1593  
-.cms-container .CMSMain.CMSPageEditController {
1594  
-	// Fix pixel gap between nav tree and main page header
1595  
- 	margin-left:-1px;
  1593
+.cms-container {
  1594
+	.CMSMain.CMSPageEditController {
  1595
+		// Fix pixel gap between nav tree and main page header
  1596
+	 	margin-left:-1px;
  1597
+	 	//Styling of tabs on page edit
  1598
+	 	.cms-edit-form {
  1599
+	 		background:darken($color-widget-bg, 2%);
  1600
+	 		.ui-tabs-nav {
  1601
+				float:right;
  1602
+				margin:$grid-x $grid-x*3 -1px 0;
  1603
+				li {
  1604
+					a {
  1605
+						font-weight: bold;
  1606
+						line-height: $grid-y * 2;
  1607
+						padding: $grid-y $grid-x*2.5 $grid-y;
  1608
+					}
  1609
+				}
  1610
+				.ui-state-default,
  1611
+				.ui-widget-content .ui-state-default,
  1612
+				.ui-widget-header .ui-state-default {
  1613
+					border:1px solid $color-button-generic-border;
  1614
+				}
  1615
+				.ui-state-active,
  1616
+				.ui-widget-content .ui-state-active,
  1617
+				.ui-widget-header .ui-state-active {
  1618
+					padding-bottom:1px;
  1619
+					background:darken($color-widget-bg, 2%);
  1620
+					border:1px solid $color-button-generic-border;
  1621
+				}
  1622
+			}
  1623
+		}
  1624
+	 	.ss-tabset .ui-tabs-panel {
  1625
+	 		background:darken($color-widget-bg, 2%);
  1626
+	 		clear:both;
  1627
+	 		border-top:1px solid $color-button-generic-border;
  1628
+	 	}
  1629
+	}
  1630
+	//Styling of tabs on page settings
  1631
+	.CMSPageSettingsController {
  1632
+	 	.cms-edit-form {
  1633
+	 		background:darken($color-widget-bg, 2%);
  1634
+	 		.ui-tabs-nav {
  1635
+				float:right;
  1636
+				margin:$grid-x $grid-x*5 -1px 0;
  1637
+				li {
  1638
+					a {
  1639
+						font-weight: bold;
  1640
+						line-height: $grid-y * 2;
  1641
+						padding: $grid-y $grid-x*2.5 $grid-y;
  1642
+					}
  1643
+				}
  1644
+				.ui-state-default,
  1645
+				.ui-widget-content .ui-state-default,
  1646
+				.ui-widget-header .ui-state-default {
  1647
+					border:1px solid $color-button-generic-border;
  1648
+				}
  1649
+				.ui-state-active,
  1650
+				.ui-widget-content .ui-state-active,
  1651
+				.ui-widget-header .ui-state-active {
  1652
+					padding-bottom:1px;
  1653
+					background:darken($color-widget-bg, 2%);
  1654
+					border:1px solid $color-button-generic-border;
  1655
+				}
  1656
+			}
  1657
+		}
  1658
+	 	.ss-tabset .ui-tabs-panel {
  1659
+	 		background:darken($color-widget-bg, 2%);
  1660
+	 		clear:both;
  1661
+	 		border-top:1px solid $color-button-generic-border;
  1662
+	 	}
  1663
+	}
  1664
+	//Styling of tabs on page History
  1665
+	.CMSPageHistoryController {
  1666
+		.cms-edit-form {
  1667
+	 		background:darken($color-widget-bg, 2%);
  1668
+	 		.ui-tabs-nav {
  1669
+				float:right;
  1670
+				margin:$grid-x $grid-x*3 -1px 0;
  1671
+				li {
  1672
+					a {
  1673
+						font-weight: bold;
  1674
+						line-height: $grid-y * 2;
  1675
+						padding: $grid-y $grid-x*2.5 $grid-y;
  1676
+					}
  1677
+				}
  1678
+				.ui-state-default,
  1679
+				.ui-widget-content .ui-state-default,
  1680
+				.ui-widget-header .ui-state-default {
  1681
+					border:1px solid $color-button-generic-border;
  1682
+				}
  1683
+				.ui-state-active,
  1684
+				.ui-widget-content .ui-state-active,
  1685
+				.ui-widget-header .ui-state-active {
  1686
+					padding-bottom:1px;
  1687
+					background:darken($color-widget-bg, 2%);
  1688
+					border:1px solid $color-button-generic-border;
  1689
+				}
  1690
+			}
  1691
+		}
  1692
+	 	.ss-tabset .ui-tabs-panel {
  1693
+	 		background:darken($color-widget-bg, 2%);
  1694
+	 		clear:both;
  1695
+	 		border-top:1px solid $color-button-generic-border;
  1696
+	 	}
  1697
+	}
1596 1698
 }
  1699
+
  1700
+
1  admin/scss/themes/_default.scss
@@ -27,6 +27,7 @@ $color-highlight-opacity: rgba(255, 255, 102, 0.3) !default;
27 27
 $color-menu-button: #338DC1 !default;
28 28
 $color-menu-background: #c6d7df !default;
29 29
 $color-menu-border: #8c99a1 !default;
  30
+$color-panel-background: #c6d7df !default;
30 31
 
31 32
 $color-text: #444 !default;
32 33
 $color-text-light: white !default;

0 notes on commit 330dd30

Please sign in to comment.
Something went wrong with that request. Please try again.