Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

  • Loading branch information...
commit 330dd3008c8648fd1fd6ebe0a045e0278ab7eb7f 1 parent 65fc81f
Jeremy Bridson authored
29 admin/css/screen.css
View
@@ -262,7 +262,9 @@ body.cms { overflow: hidden; }
.cms-content-header .backlink span.btn-icon-back { height: 16px; }
.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%; }
.cms-content-header h2 .breadcrumbs-wrapper { display: table-row; }
-.cms-content-header h2 .breadcrumbs-wrapper .crumb { display: table-cell; line-height: 26px; }
+.cms-content-header h2 .breadcrumbs-wrapper .crumb { display: table-cell; line-height: 26px; padding: 0 5px; }
+.cms-content-header h2 .breadcrumbs-wrapper .crumb:first-child { padding-left: 0px; }
+.cms-content-header h2 .breadcrumbs-wrapper .crumb:last-child { padding-right: 0px; }
.cms-content-header > div { display: table; }
.cms-content-header > div .cms_backlink { display: table-cell; vertical-align: middle; width: auto; }
.cms-content-header .cms-content-header-tabs { display: table-cell; white-space: nowrap; width: 100%; }
@@ -274,7 +276,6 @@ body.cms { overflow: hidden; }
.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; }
.cms-edit-form .cms-content-header-tabs .ui-tabs-nav li a { text-indent: 0; }
-.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; }
/** -------------------------------------------- Tabs -------------------------------------------- */
.cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav li { margin: 0; }
@@ -305,7 +306,7 @@ body.cms { overflow: hidden; }
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
/** -------------------------------------------- Actions -------------------------------------------- */
-.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; }
+.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; }
/** -------------------------------------------- Messages -------------------------------------------- */
.message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
@@ -353,7 +354,7 @@ body.cms { overflow: hidden; }
.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; }
/* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */
-.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; }
+.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; }
.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); }
.cms-content-tools .cms-panel-content { width: 176px; padding: 0 8px; overflow: auto; height: 100%; }
.cms-content-tools .cms-panel-content .dropdown select { width: 160px; }
@@ -559,6 +560,24 @@ form.import-form label.left { width: 250px; }
/** -------------------------------------------- Page Edit Controller -------------------------------------------- */
.cms-container .CMSMain.CMSPageEditController { margin-left: -1px; }
+.cms-container .CMSMain.CMSPageEditController .cms-edit-form { background: #e6eaed; }
+.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 24px -1px 0; }
+.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
+.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; }
+.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; }
+.cms-container .CMSMain.CMSPageEditController .ss-tabset .ui-tabs-panel { background: #e6eaed; clear: both; border-top: 1px solid #c0c0c2; }
+.cms-container .CMSPageSettingsController .cms-edit-form { background: #e6eaed; }
+.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 40px -1px 0; }
+.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
+.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; }
+.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; }
+.cms-container .CMSPageSettingsController .ss-tabset .ui-tabs-panel { background: #e6eaed; clear: both; border-top: 1px solid #c0c0c2; }
+.cms-container .CMSPageHistoryController .cms-edit-form { background: #e6eaed; }
+.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 24px -1px 0; }
+.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
+.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; }
+.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; }
+.cms-container .CMSPageHistoryController .ss-tabset .ui-tabs-panel { background: #e6eaed; clear: both; border-top: 1px solid #c0c0c2; }
/** 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, .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; }
.cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; }
.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; }
-.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; }
+.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; }
.cms-menu a { text-decoration: none; }
.cms-menu .cms-panel-content { width: 191px; /* 8x24 - 1 */ overflow-x: hidden; overflow-y: auto; }
.cms-menu.collapsed { width: 40px; cursor: auto; z-index: 1000; }
2  admin/scss/_menu.scss
View
@@ -83,7 +83,7 @@
.cms-menu {
z-index: 80;
- background: $color-menu-background;
+ background: $color-base;
border-right: 1px solid $color-menu-border;
width: ($grid-x * 24) - 1; /* 8x24 - 1 */
130 admin/scss/_style.scss
View
@@ -122,6 +122,13 @@ body.cms {
.crumb {
display:table-cell;
line-height:26px;
+ padding:0 5px;
+ }
+ .crumb:first-child {
+ padding-left:0px;
+ }
+ .crumb:last-child {
+ padding-right:0px;
}
}
}
@@ -185,13 +192,6 @@ body.cms {
text-indent:0;
}
}
- .ui-state-default,
- .ui-widget-content .ui-state-default,
- .ui-widget-header .ui-state-default {
- a {
- color:$color-text-dark;
- }
- }
}
}
}
@@ -373,8 +373,8 @@ body.cms {
margin: $grid-y $grid-x*2 $grid-y*2 $grid-x*2;
height: $grid-y*4;
z-index: 70;
-
- @include box-shadow($tab-panel-texture-color 0 $grid-y*-2 $grid-y*2);
+ background-color:darken($color-widget-bg, 2%);
+ @include box-shadow(darken($color-widget-bg, 2%) 0 $grid-y*-2 $grid-y*2);
}
/** --------------------------------------------
@@ -597,7 +597,7 @@ body.cms {
* panel
*/
.cms-content-tools {
- background-color: darken($color-widget-bg, 5%);
+ background-color: $color-panel-background;
width: $grid-x * 24;
border-right: 1px solid darken($color-widget-bg, 15%);
overflow-y: auto;
@@ -1590,7 +1590,111 @@ form.import-form {
* Page Edit Controller
* -------------------------------------------- */
-.cms-container .CMSMain.CMSPageEditController {
- // Fix pixel gap between nav tree and main page header
- margin-left:-1px;
+.cms-container {
+ .CMSMain.CMSPageEditController {
+ // Fix pixel gap between nav tree and main page header
+ margin-left:-1px;
+ //Styling of tabs on page edit
+ .cms-edit-form {
+ background:darken($color-widget-bg, 2%);
+ .ui-tabs-nav {
+ float:right;
+ margin:$grid-x $grid-x*3 -1px 0;
+ li {
+ a {
+ font-weight: bold;
+ line-height: $grid-y * 2;
+ padding: $grid-y $grid-x*2.5 $grid-y;
+ }
+ }
+ .ui-state-default,
+ .ui-widget-content .ui-state-default,
+ .ui-widget-header .ui-state-default {
+ border:1px solid $color-button-generic-border;
+ }
+ .ui-state-active,
+ .ui-widget-content .ui-state-active,
+ .ui-widget-header .ui-state-active {
+ padding-bottom:1px;
+ background:darken($color-widget-bg, 2%);
+ border:1px solid $color-button-generic-border;
+ }
+ }
+ }
+ .ss-tabset .ui-tabs-panel {
+ background:darken($color-widget-bg, 2%);
+ clear:both;
+ border-top:1px solid $color-button-generic-border;
+ }
+ }
+ //Styling of tabs on page settings
+ .CMSPageSettingsController {
+ .cms-edit-form {
+ background:darken($color-widget-bg, 2%);
+ .ui-tabs-nav {
+ float:right;
+ margin:$grid-x $grid-x*5 -1px 0;
+ li {
+ a {
+ font-weight: bold;
+ line-height: $grid-y * 2;
+ padding: $grid-y $grid-x*2.5 $grid-y;
+ }
+ }
+ .ui-state-default,
+ .ui-widget-content .ui-state-default,
+ .ui-widget-header .ui-state-default {
+ border:1px solid $color-button-generic-border;
+ }
+ .ui-state-active,
+ .ui-widget-content .ui-state-active,
+ .ui-widget-header .ui-state-active {
+ padding-bottom:1px;
+ background:darken($color-widget-bg, 2%);
+ border:1px solid $color-button-generic-border;
+ }
+ }
+ }
+ .ss-tabset .ui-tabs-panel {
+ background:darken($color-widget-bg, 2%);
+ clear:both;
+ border-top:1px solid $color-button-generic-border;
+ }
+ }
+ //Styling of tabs on page History
+ .CMSPageHistoryController {
+ .cms-edit-form {
+ background:darken($color-widget-bg, 2%);
+ .ui-tabs-nav {
+ float:right;
+ margin:$grid-x $grid-x*3 -1px 0;
+ li {
+ a {
+ font-weight: bold;
+ line-height: $grid-y * 2;
+ padding: $grid-y $grid-x*2.5 $grid-y;
+ }
+ }
+ .ui-state-default,
+ .ui-widget-content .ui-state-default,
+ .ui-widget-header .ui-state-default {
+ border:1px solid $color-button-generic-border;
+ }
+ .ui-state-active,
+ .ui-widget-content .ui-state-active,
+ .ui-widget-header .ui-state-active {
+ padding-bottom:1px;
+ background:darken($color-widget-bg, 2%);
+ border:1px solid $color-button-generic-border;
+ }
+ }
+ }
+ .ss-tabset .ui-tabs-panel {
+ background:darken($color-widget-bg, 2%);
+ clear:both;
+ border-top:1px solid $color-button-generic-border;
+ }
+ }
}
+
+
1  admin/scss/themes/_default.scss
View
@@ -27,6 +27,7 @@ $color-highlight-opacity: rgba(255, 255, 102, 0.3) !default;
$color-menu-button: #338DC1 !default;
$color-menu-background: #c6d7df !default;
$color-menu-border: #8c99a1 !default;
+$color-panel-background: #c6d7df !default;
$color-text: #444 !default;
$color-text-light: white !default;
Please sign in to comment.
Something went wrong with that request. Please try again.