silverstripe-cms/css/layout.css
Ingo Schommer 9f4d0da80a ENHANCEMENT Integrating right panels ('insert image', etc.) in CMS with new layout manager, adjusting title bar to jQuery UI styling, making panel content scrollable
MINOR Updated cmsmain/leftandmain javascript to concrete API changes

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92609 467b73ca-7a2a-4603-9d3b-597d59a354a9
2009-11-21 02:36:26 +00:00

648 lines
13 KiB
CSS

* {
margin: 0;
padding: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: #ccdef3;
}
/*
* Default Layout Theme
*
* Created for jquery.layout
*
* Copyright (c) 2008
* Fabrizio Balliano (http://www.fabrizioballiano.net)
* Kevin Dalman (http://allpro.net)
*
* Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
* and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
*
* Last Updated: 2009-03-04
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
*/
/*
* PANES
*/
.ui-layout-pane { /* all 'panes' */
background: #FFF;
/*border: 1px solid #BBB;*/
overflow: auto;
}
/* Overflow is handled by tabsets inside the panel */
.ui-layout-center,
.ui-layout-east {
overflow: hidden !important;
}
/*
* RESIZER-BARS
*/
.ui-layout-resizer { /* all 'resizer-bars' */
background: #DDD;
border: 1px solid #BBB;
border-width: 0;
opacity: 1; /* on-hover, show the resizer-bar normally */
filter: alpha(opacity=100);
}
.ui-layout-resizer-open:hover , /* hover-color to 'resize' */
.ui-layout-resizer-dragging { /* resizer beging 'dragging' */
background: #EEE;
}
.ui-layout-resizer-dragging { /* CLONED resizer being dragged */
border-left: 1px solid #BBB;
border-right: 1px solid #BBB;
}
.ui-layout-resizer-drag { /* REAL resizer while resize in progress */
}
.ui-layout-resizer-closed:hover { /* hover-color to 'slide open' */
background: #EEE;
}
.ui-layout-resizer-sliding { /* resizer when pane was 'slid open' */
opacity: 0.1; /* show only a slight shadow */
filter: alpha(opacity=10);
}
.ui-layout-resizer-sliding:hover { /* sliding resizer - hover */
opacity: 1; /* on-hover, show the resizer-bar normally */
filter: alpha(opacity=100);
}
/* sliding resizer - add 'outside-border' to resizer on-hover */
.ui-layout-resizer-north-sliding:hover { border-bottom-width: 1px; }
.ui-layout-resizer-south-sliding:hover { border-top-width: 1px; }
.ui-layout-resizer-west-sliding:hover { border-right-width: 1px; }
.ui-layout-resizer-east-sliding:hover { border-left-width: 1px; }
/*
* TOGGLER-BUTTONS
*/
.ui-layout-toggler {
color: #666;
/*border: 1px solid #BBB;*/ /* match pane-border */
background-color: #999;
}
.ui-layout-toggler:hover {
background-color: #FC6;
}
.ui-layout-toggler-north ,
.ui-layout-toggler-south {
border-width: 0 1px;
}
.ui-layout-toggler-west ,
.ui-layout-toggler-east {
border-width: 1px 0;
}
/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding ui-layout-toggler {
display: none;
}
/*
* style the text we put INSIDE the east/west togglers
*/
.ui-layout-toggler .content {
font: 30px bold Verdana, Arial, Helvetica, sans-serif;
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
}
/**
* Actions/Buttons
*/
#TreeActions button.disabled {
color: #aaa;
}
.ajaxActions input.disabled,
input.disabled {
color: #666;
}
input.action.loading, input.action.loading:hover {
padding-left: 22px;
background: url(../images/network-save.gif) 3px 2px no-repeat;
}
input.delete:hover,
button.delete:hover,
.actionparams input.delete:hover {
background: #ce0000;
color: #fff;
}
input.loading {
padding-left: 16px;
background: #fff url(../images/network-save.gif) no-repeat center left;
}
input.hidden {
display: none;
}
/* Overrides - TODO Find a better place to put them */
form#Form_EditForm fieldset, form#Form_AddForm fieldset {
height: 100%;
border: none;
}
body.stillLoading select {
display: none;
}
/** 3-PANEL LAYOUT **/
.ss-cms-top-menu {
font-size: 14px;
height: 33px;
background: #474855 url(../images/mainmenu/top-bg.gif) top left repeat-x;
color: #fff;
}
/**
* Hidden left-hand panel
*/
#left.hidden form, #left.hidden .title {
display: none;
}
#left.hidden {
width: 18px;
display: block;
}
#left div.title, #right div.title {
border-top: 1px solid #77BBEE;
height: 22px !important;
background: #0075C9 url(../images/textures/obar.gif) repeat-x 0 0;
}
#left div.title div, #right div.title div {
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 2px 0 0 4px;
background-position: 2px 2px;
background-repeat: no-repeat;
padding-left: 20px;
border-top: 1px solid #77BBEE;
}
#left h2,
#contentPanel h2 {
background-image:url(../images/textures/obar-18.gif);
height: 18px;
line-height: 18px;
color: #fff;
font-size: 12px;
padding-left: 3px;
}
/** TOP PANEL **/
.ss-cms-top-menu #MainMenu {
margin: 0 0 0 6px;
}
.ss-cms-top-menu #MainMenu li {
margin: 0 4px;
float: left;
height: 33px;
cursor: pointer;
}
.ss-cms-top-menu #MainMenu a {
display: block;
height: 33px;
float: left;
padding: 0 6px;
font-size: 14px;
letter-spacing: -0.1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 32px;
color: #fff;
text-decoration: none;
}
.ss-cms-top-menu #MainMenu a:hover {
text-decoration: none;
background: #6a7580 url(../images/mainmenu/hover.gif) repeat-x left top;
}
.ss-cms-top-menu #MainMenu .current {
background: #ccdef3 url(../images/mainmenu/current.gif) repeat-x left top;
border-bottom : none;
}
.ss-cms-top-menu #MainMenu .current a:hover {
background: #cddef3 url(../images/mainmenu/currentHover.gif) repeat-x left top;
}
.ss-cms-top-menu #MainMenu .current a:link,
.ss-cms-top-menu #MainMenu .current a:visited {
color : #2f383f;
}
.ss-cms-top-menu #Logo {
float: right;
}
.ss-cms-top-menu #Logo a {
margin: 0;
display: block;
font-size: 14px;
text-decoration: none;
height: 26px;
line-height: 22px;
position: absolute;
top: 5px;
right: 8px;
padding-right: 34px;
background: url(../images/mainmenu/logo.gif) right top no-repeat;
color: #fff;
}
html > body .ss-cms-top-menu #Logo {
padding-bottom: 0;
}
.ss-cms-bottom-bar {
width: 100%;
background: #4d4e5a url(../images/textures/footerBg.gif) repeat-x left top;
}
.ss-cms-bottom-bar .holder {
text-align: center;
font-size: 10px;
color: #fff;
}
.ss-cms-bottom-bar #logInStatus {
float: right;
}
.ss-cms-bottom-bar a {
color: #fff;
background: none;
}
.ss-cms-bottom-bar a:hover {
text-decoration: none;
color: #ccc;
}
.ss-cms-bottom-bar #logInStatus #LogoutLink {
background: url(../images/logout.gif) no-repeat right top;
padding-right: 20px;
}
.ss-cms-bottom-bar #switchView {
float: left;
}
.ss-cms-bottom-bar #switchView a, .ss-cms-bottom-bar #switchView span {
background: none;
padding-left: 8px;
padding-right: 8px;
display: inline-block;
border-left: 1px solid #AAA;
}
.ss-cms-bottom-bar #switchView span {
border-left: none;
}
.ss-cms-bottom-bar .bottomTabs a {
color: #fff;
}
.ss-cms-bottom-bar .bottomTabs div.blank {
display: block;
float: left;
cursor: pointer;
background-color: transparent;
padding-right: 4px;
font-weight: bold;
line-height: 13px;
font-size: 11px;
padding-left: 2px;
color: #fff;
}
.ss-cms-bottom-bar .bottomTabs .current {
color: #ccc;
}
.ss-cms-bottom-bar .bottomTabs a:hover {
color: #ccc;
text-decoration: none;
}
/** LEFT PANEL **/
#sitetree_and_tools {
overflow: auto;
}
#sitetree_holder #TreeTools {
background: #EEE;
}
#SearchControls {
margin-top:2px;
}
#SearchControls label {
display: none;
}
#SearchControls select#SiteTreeFilterAddCriteria {
padding:1px 0; margin:0;
}
#searchIndicator {
display: none;
width: 16px;
height: 16px;
background: #EFEFEF url(../images/network-save.gif) no-repeat;
}
#searchIndicator.loading {
display: block;
}
.SearchCriteriaContainer {
float: left;
width: 100%;
padding-left: 5px;
margin-bottom: 4px;
}
#sitetree_ul, ul#sitetree {
padding: 3px 0 0 3px;
clear: left;
}
#sitetree_ul ul#sitetree {
padding: 0;
}
html>body #sitetree {
width: auto;
}
#left #TreeActions,
#left .checkboxAboveTree {
background: #EEE;
padding: 5px;
float: left;
width: 95%;
}
#left .checkboxAboveTree {
border-bottom: 1px solid #CCC;
}
#TreeTools label {
display: block;
padding-top: 2px;
_padding-top: 4px;
}
#TreeTools #batchactionsforms {
padding: 0 5px 7px 5px;
}
#TreeTools select {
margin-left: 2px;
}
#TreeTools div p, #ShowChanged {
margin: 0 0 5px 0;
float: left;
width: 100%;
}
#TreeTools div.middleColumn {
margin: 0;
}
#TreeTools #action_publish_selected,
#TreeTools #action_publish_selected {
padding: 2px 1px;
float: left;
}
#checkboxActionIndicator {
float: right;
width: auto;
margin-top: 7px;
display: none;
}
div.spacer,
li.spacer {
float: none;
clear: both;
background-color: transparent;
border-style: none;
margin: -1px 0 0 0;
height: 1px;
font-size: 1px;
width: auto;
}
/** RIGHT PANEL **/
.mceToolbarExternal {
background-color: #eee;
display: block;
}
.mceToolbarExternal a {
text-decoration: none;
border: 0 !important;
}
.mceToolbarExternal a img {
border: none;
}
#right form#Form_EditorToolbarLinkForm,
#right form#Form_EditorToolbarImageForm,
#right form#Form_EditorToolbarFlashForm {
background: #eee;
border-bottom: 1px solid #ccc;
display: none;
margin: 1px 0 0 0;
padding: 5px;
/*
* HACK IE (all versions): container needs to be higher stacking order
* than any DOM-elemnt under it.
* @see http://www.aplus.co.yu/lab/z-pos/
*/
/*overflow: hidden;*/
z-index: 1001;
}
#right form#Form_EditorToolbarLinkForm ul.optionset {
height: 1em;
}
#right form#Form_EditorToolbarLinkForm ul.optionset li {
float: left;
}
.thumbnailstrip {
overflow: auto;
white-space: nowrap;
float: left;
border: 1px solid #aaa;
}
.thumbnailstrip li {
float: left;
margin-right: 4px;
}
/* CMS specific icons for the tree */
ul.tree li.Root span.Root span.c a {
background: url(../../cms/images/treeicons/root.png) no-repeat !important;
}
/* Misc Styling */
iframe {
border: none;
}
/* Content Panel Design
* This is our new right hand pane for inserting images and links etc
*/
#contentPanel {
font-size: 12px;
}
#contentPanel .content {
overflow: auto;
}
#contentPanel div,
#contentPanel p#TargetBlank {
margin-left: 0;
}
#contentPanel div.TreeDropdownField {
width: 180px;
}
#contentPanel div.TreeDropdownField span.items {
width: 155px;
background: #fff;
font-size: 12px;
border:1px solid #A7A7A7;
border-right: none;
overflow: hidden;
}
#contentPanel div.TreeDropdownField a {
overflow: visible;
}
#contentPanel .thumbnailstrip {
border: none;
width: 190px;
height: 120px;
overflow-y: auto;
margin-right: 0 !important;
}
#contentPanel .ui-dialog {
width: auto;
}
#contentPanel .thumbnailstrip h2 {
font-size: 1.1em;
margin: 0;
background: none;
color: #555;
height: auto;
}
#contentPanel select {
width: 186px;
padding: 1px 0;
font-size: 12px;
}
#contentPanel option {
font-size: 12px;
}
#contentPanel .middleColumn {
background:#E9E9E9 none repeat scroll 0%;
display:block;
padding:3px;
}
#contentPanel input.text {
border:1px solid #A7A7A7;
padding:3px;
width: 179px;
}
#contentPanel #Dimensions div.middleColumn {
background: none;
}
#contentPanel form {
display: none;
}
/* Image height and width inputs. We need to position them in the right places */
#contentPanel input#Form_EditorToolbarImageForm_Width,
#contentPanel input#Form_EditorToolbarFlashForm_Width {
width: 30px;
}
#contentPanel input#Form_EditorToolbarImageForm_Height,
#contentPanel input#Form_EditorToolbarFlashForm_Height {
width: 30px;
}
#Form_EditorToolbarImageForm #FolderImages,
#Form_EditorToolbarFlashForm #Flash {
margin: 5px;
}
#Form_EditorToolbarImageForm fieldset label.left,
#Form_EditorToolbarFlashForm fieldset label.left,
#Form_EditorToolbarLinkForm fieldset label.left {
float:left;
margin-left:0px;
color: #666;
line-height: 1.2;
font-size: 11px;
width: 190px;
}
#Form_EditorToolbarImageForm fieldset div.middleColumn,
#Form_EditorToolbarFlashForm fieldset div.middleColumn,
#Form_EditorToolbarLinkForm fieldset div.middleColumn {
float: left;
}
#Form_EditorToolbarLinkForm fieldset li div.middleColumn,
#Form_EditorToolbarFlashForm fieldset li div.middleColumn,
#Form_EditorToolbarImageForm fieldset li div.middleColumn {
float: none;
}
#Form_EditorToolbarImageForm fieldset div.fieldgroupField,
#Form_EditorToolbarFlashForm fieldset div.fieldgroupField,
#Form_EditorToolbarLinkForm fieldset div.fieldgroupField {
display: inline;
}
#Form_EditorToolbarImageForm_Width,
#Form_EditorToolbarImageForm_Height,
#Form_EditorToolbarFlashForm_Width,
#Form_EditorToolbarFlashForm_Height {
outline: 3px solid #E9E9E9;
}
#Form_EditorToolbarImageForm #FolderImages img,
#Form_EditorToolbarFlashForm #Flash img {
border: 2px solid #e4e3e3;
}
#contentPanel div.Actions {
margin: 5px;
text-align: right;
}
#contentPanel #FolderImages a.selectedImage img,
#contentPanel #Flash a.selectedFlash img {
border: 2px solid #222;
}
/* going to use this */
#BlankImage {
text-indent: -9000px;
}
/**
* Messages (see sapphire/css/Form.css)
*/
.message {
margin: 1em 0;
padding: 0.5em;
font-weight: bold;
border: 1px black solid;
background-color: #B9FFB9;
border-color: #00FF00;
}
.message.notice {
background-color: #FCFFDF;
border-color: #FF9300;
}
.message.warning {
background-color: #FFD2A6;
border-color: #FF9300;
}
.message.bad {
background-color: #FF8080;
border-color: #FF0000;
}