mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
ENHANCEMENT:Trac#7166 - styled the new combined tree and edit view.
This commit is contained in:
Jeremy Bridson
parent
65fc81fd68
commit
330dd3008c
@ -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; }
|
||||
|
||||
@ -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 */
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user