MINOR: #css added active highlighting to menu for webkit browsers. tidied up grid for content-tools. Crop text that expands over the title fields. polish tweaks to the cms content actions

This commit is contained in:
Will Rossiter 2011-08-04 12:02:39 +12:00
parent e484a230fe
commit 0db6558a1b
7 changed files with 219 additions and 138 deletions

View File

@ -20,6 +20,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
/** ----------------------------- Theme ------------------------------ */
/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
/** ----------------------------------------------- Colours ------------------------------------------------ */
/** ----------------------------------------------- Textures ----------------------------------------------- */
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both vertical and horizontal. All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
@ -27,6 +28,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */
/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */
/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
/** ----------------------------- CMS Components ------------------------------ */
/** 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. */
.jstree ul { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }
@ -184,7 +186,7 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; }
.cms-menu-list li a { display: block; height: 24px; line-height: 24px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #bfcad2 1px 1px 0; color: #1f1f1f; padding: 7px 5px 7px 8px; background-color: #b0bec7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; }
.cms-menu-list li a:hover { text-decoration: none; background-color: #b6c3cb; border-bottom: 1px solid #8399a7; color: #2c2c2c; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfcad2), color-stop(100%, #b0bec7)); background-image: -webkit-linear-gradient(#bfcad2, #b0bec7); background-image: -moz-linear-gradient(#bfcad2, #b0bec7); background-image: -o-linear-gradient(#bfcad2, #b0bec7); background-image: -ms-linear-gradient(#bfcad2, #b0bec7); background-image: linear-gradient(#bfcad2, #b0bec7); }
.cms-menu-list li a:focus { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -webkit-linear-gradient(#92a5b2, #a1b2bc); background-image: -moz-linear-gradient(#92a5b2, #a1b2bc); background-image: -o-linear-gradient(#92a5b2, #a1b2bc); background-image: -ms-linear-gradient(#92a5b2, #a1b2bc); background-image: linear-gradient(#92a5b2, #a1b2bc); }
.cms-menu-list li a:focus, .cms-menu-list li a:active { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -webkit-linear-gradient(#92a5b2, #a1b2bc); background-image: -moz-linear-gradient(#92a5b2, #a1b2bc); background-image: -o-linear-gradient(#92a5b2, #a1b2bc); background-image: -ms-linear-gradient(#92a5b2, #a1b2bc); background-image: linear-gradient(#92a5b2, #a1b2bc); }
.cms-menu-list li a .icon { display: block; float: left; margin-right: 8px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }
.cms-menu-list li a .text { display: block; }
.cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -webkit-linear-gradient(#338dc1, #287099); background-image: -moz-linear-gradient(#338dc1, #287099); background-image: -o-linear-gradient(#338dc1, #287099); background-image: -ms-linear-gradient(#338dc1, #287099); background-image: linear-gradient(#338dc1, #287099); }
@ -217,14 +219,16 @@ form.nostyle .middleColumn { margin-left: 0; }
.field select { margin-top: 8px; }
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */
.cms input.loading, .cms input.ui-state-default.loading, .cms .ui-widget-content input.ui-state-default.loading, .cms .ui-widget-header input.ui-state-default.loading { padding-left: 15px; background: #eceff1 url(../../images/network-save.gif) no-repeat center left; }
.cms .ss-ui-button.ss-ui-action-constructive, .cms .ui-widget-content .ss-ui-button.ss-ui-action-constructive, .cms .ui-widget-header .ss-ui-button.ss-ui-action-constructive { padding-left: 31px; color: white; border-color: #118021; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #84be3f), color-stop(100%, #128945)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -webkit-linear-gradient(#84be3f, #128945); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -moz-linear-gradient(#84be3f, #128945); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -o-linear-gradient(#84be3f, #128945); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -ms-linear-gradient(#84be3f, #128945); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, linear-gradient(#84be3f, #128945); background-color: #84be3f; text-shadow: #475964 1px 1px 0; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7fb63c), color-stop(100%, #107b3e)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -webkit-linear-gradient(#7fb63c, #107b3e); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -moz-linear-gradient(#7fb63c, #107b3e); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -o-linear-gradient(#7fb63c, #107b3e); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, -ms-linear-gradient(#7fb63c, #107b3e); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 6px, linear-gradient(#7fb63c, #107b3e); background-color: #128945; -moz-box-shadow: #92a5b2 1px 1px 1px; -webkit-box-shadow: #92a5b2 1px 1px 1px; -o-box-shadow: #92a5b2 1px 1px 1px; box-shadow: #92a5b2 1px 1px 1px; }
.cms .ss-ui-button.ss-ui-action-constructive.cms-page-add-button { background-position: 5px -155px; }
.cms .ss-ui-button.ss-ui-action-destructive, .cms .ui-widget-content .ss-ui-button.ss-ui-action-destructive, .cms .ui-widget-header .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #f5f5f5; }
.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 23px; color: red; border-color: #ababab; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5f5f5), color-stop(100%, #c3c3c3)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -webkit-linear-gradient(#f5f5f5, #c3c3c3); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -moz-linear-gradient(#f5f5f5, #c3c3c3); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -o-linear-gradient(#f5f5f5, #c3c3c3); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -ms-linear-gradient(#f5f5f5, #c3c3c3); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, linear-gradient(#f5f5f5, #c3c3c3); text-shadow: none; -moz-box-shadow: #aab9c3 1px 1px 2px; -webkit-box-shadow: #aab9c3 1px 1px 2px; -o-box-shadow: #aab9c3 1px 1px 2px; box-shadow: #aab9c3 1px 1px 2px; }
.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0f0f0), color-stop(100%, #bbbbbb)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -webkit-linear-gradient(#f0f0f0, #bbbbbb); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -moz-linear-gradient(#f0f0f0, #bbbbbb); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -o-linear-gradient(#f0f0f0, #bbbbbb); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, -ms-linear-gradient(#f0f0f0, #bbbbbb); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px -26px, linear-gradient(#f0f0f0, #bbbbbb); background-color: #c3c3c3; -moz-box-shadow: #92a5b2 1px 1px 1px; -webkit-box-shadow: #92a5b2 1px 1px 1px; -o-box-shadow: #92a5b2 1px 1px 1px; box-shadow: #92a5b2 1px 1px 1px; }
.cms .ss-ui-button.ss-ui-action-minor, .cms .ui-widget-content .ss-ui-button.ss-ui-action-minor .ui-widget-header .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #1f1f1f; text-decoration: underline; }
.cms .ui-widget { /* loading */ }
.cms .ui-widget input.loading, .cms .ui-widget input.ui-state-default.loading, .cms .ui-widget .ui-widget-content input.ui-state-default.loading, .cms .ui-widget .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.cms .ui-widget .ss-ui-button { /* all buttons */ padding: 5px 12px; text-decoration: none; line-height: 16px; color: #1f1f1f; background-color: #e6e6e6; border: 1px solid #c0c0c2; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ }
.cms .ui-widget .ss-ui-button.ui-state-hover { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #e6e6e6); }
.cms .ui-widget .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; }
.cms .ui-widget .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; }
.cms .ui-widget .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; }
.cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); }
.cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); }
.cms .ui-widget .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #1f1f1f; text-decoration: underline; }
/** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; }
@ -257,7 +261,7 @@ form.nostyle .middleColumn { margin-left: 0; }
.icon.icon-24.icon-help { background-image: url(../images/icons/24x24/information.png); }
/** This file defines CMS-specific customizations to the jQuery UI theme. Every rule in this file should be wrapped in the '.cms' selector (to make it more specific), and contain ONLY overwritten jQuery UI rules (with 'ui-' prefix). This file should be fairly short, as we're using our own custom jQuery UI theme already. TODO Add theme reference Use _style.scss to add more generic style information, and read the jQuery UI theming API: http://jqueryui.com/docs/Theming/API */
.cms .ui-tabs { padding: 0; background: transparent url(../images/textures/bg_cms_main_content.png) repeat top left; }
.cms .ui-tabs { padding: 0; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; }
.cms .ui-tabs .ui-widget-header { border: 0; background: none; }
.cms .ui-tabs .ui-tabs-nav { margin: 0; padding: 0; }
.cms .ui-tabs .ui-tabs-nav li { top: 0; }
@ -266,10 +270,8 @@ form.nostyle .middleColumn { margin-left: 0; }
.cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 24px 16px; }
.cms .ui-widget-content, .cms .ui-widget { color: #444444; font-size: 12px; font-family: Arial, sans-serif; border: 0; }
.cms .ui-widget-header { background: #eceff1; border: 0; padding: 0; }
.cms .ss-ui-button { padding: 5px; text-decoration: none; }
.cms .ui-state-hover { cursor: pointer; }
.cms .ui-widget input, .cms .ui-widget select, .cms .ui-widget textarea, .cms .ui-widget button { color: #444444; font-size: 12px; font-family: Arial, sans-serif; }
.cms .ss-ui-button, .cms .ui-widget-content .ss-ui-button, .cms .ui-widget-header .ss-ui-button { padding: 7px 8px; color: #1f1f1f; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5f5f5), color-stop(100%, #c3c3c3)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#f5f5f5, #c3c3c3); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#f5f5f5, #c3c3c3); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#f5f5f5, #c3c3c3); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#f5f5f5, #c3c3c3); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#f5f5f5, #c3c3c3); background-color: #f5f5f5; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; }
/** This file defines most styles of the CMS: Colors, fonts, backgrounds, alignments, dimensions. Use SCSS variable definitions in screen.css to avoid repeating styles like background colours or padding dimensions. See themes/_default.scss to get started. To avoid this file getting too large and complicated, it is encouraged to create new SCSS files for larger components like the CMS menu or tree (see _tree.scss and _menu.scss). */
/** ---------------------------------------------------- Core Styles. ---------------------------------------------------- */
@ -304,17 +306,17 @@ html article, html aside, html details, html figcaption, html figure, html foote
.cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form { *display: inline; }
.cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 8px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 16px 16px; -webkit-box-shadow: #eceff1 0 16px 16px; -o-box-shadow: #eceff1 0 16px 16px; box-shadow: #eceff1 0 16px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); }
.cms-content-header h2 { float: left; padding: 8px 0 0 8px; font-size: 12px; line-height: 24px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 184px; }
.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 12px; line-height: 24px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 176px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.cms-content-header > div { width: 9999em; overflow: hidden; }
.cms-content-header .cms-content-header-tabs { float: left; }
.ui-tabs .cms-content-header .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 10px 12px 10px; border-bottom: 2px solid #b3b3b3; }
.ui-tabs .cms-content-header .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 11px 12px 9px; border-bottom: 2px solid #b3b3b3; }
.ui-tabs .cms-content-header .ui-state-default, .ui-tabs .cms-content-header .ui-widget-content .ui-state-default, .ui-tabs .cms-content-header .ui-widget-header .ui-state-default { background-color: #d9d9d9; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9d9d9), color-stop(100%, #c0c0c0)); background-image: -webkit-linear-gradient(#d9d9d9, #c0c0c0); background-image: -moz-linear-gradient(#d9d9d9, #c0c0c0); background-image: -o-linear-gradient(#d9d9d9, #c0c0c0); background-image: -ms-linear-gradient(#d9d9d9, #c0c0c0); background-image: linear-gradient(#d9d9d9, #c0c0c0); border-color: #a6a6a6; text-shadow: white 0 1px 0; }
.ui-tabs .cms-content-header .ui-state-active, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active { background: #eceff1; }
.ui-tabs .cms-content-header .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a { border-bottom: 2px solid #eceff1; }
.cms-content-tools { background-color: #dde3e7; padding: 8px 8px; width: 192px; overflow: auto; }
.cms-content-tools .cms-panel-header, .cms-content-tools .cms-panel-content { padding: 8px 8px; }
/* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */
.cms-content-tools { background-color: #dde3e7; padding: 8px 8px; width: 176px; border-right: 1px solid #dde3e7; overflow: auto; z-index: 60; }
.cms-content.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; }
@ -326,6 +328,7 @@ html article, html aside, html details, html figcaption, html figure, html foote
.cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 0 0 4px; vertical-align: middle; font-size: 12px; }
.cms-logo .version { display: none; }
.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1311826037') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; }
.cms-logo span { font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.cms-login-status { border-top: 1px solid #19435c; height: 23px; padding: 8px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 10px; }
.cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url(../images/logout.png) no-repeat; text-indent: -9999em; }
@ -339,7 +342,7 @@ html article, html aside, html details, html figcaption, html figure, html foote
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
/** -------------------------------------------- Actions -------------------------------------------- */
.cms-content-actions { margin: 8px 8px; text-align: right; }
.cms-content-actions { margin: 8px 8px; text-align: right; height: 32px; -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; }
/** -------------------------------------------- Messages -------------------------------------------- */
.message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
@ -360,13 +363,18 @@ html article, html aside, html details, html figcaption, html figure, html foote
.cms-page-add-form-dialog #PageType li .description { font-style: italic; }
/** -------------------------------------------- Content toolbar -------------------------------------------- */
.cms-content-toolbar { overflow: hidden; *zoom: 1; display: block; padding: 10px 0; margin: 0 0 15px 0; border-bottom-width: 2px; border-bottom: 2px groove rgba(255, 255, 255, 0.8); -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; }
.cms-content-toolbar { overflow: hidden; *zoom: 1; display: block; margin: 0 0 15px 0; border-bottom-width: 2px; border-bottom: 2px groove rgba(255, 255, 255, 0.8); -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; }
.cms-content-toolbar > * { float: left; }
.cms-content-toolbar .cms-tree-view-modes * { display: inline-block; }
.cms-content-toolbar .cms-content-batchactions form > * { display: inline-block; }
.cms-content-tools h3, .cms-content-tools h4, .cms-content-tools h5 { font-weight: bold; line-height: 16px; }
.cms-content-tools h3 { font-size: 14px; margin-left: -2px; padding-left: 2px; 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 h4 { font-size: 13px; }
.cms-content-tools h5 { font-size: 12px; }
.cms-content-tools .field label { float: none; width: auto; }
.cms-content-tools .field .middleColumn { margin-left: 0; }
.cms-content-tools .fieldgroup .fieldgroup-field { width: auto; }
.cms-content-batchactions, .cms-content-constructive-actions { float: right; }
@ -393,7 +401,7 @@ form.member-profile-form .formattingHelpText { margin: 5px auto; color: #333; pa
form.member-profile-form .formattingHelpText ul { padding: 0; }
form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; margin-bottom: 2px; }
.cms-content-fields { overflow: auto; }
.cms .cms-content-fields { overflow: auto; background: none; }
/** -------------------------------------------- Panels -------------------------------------------- */
.cms-panel { overflow: hidden; }

View File

@ -21,7 +21,7 @@ form.nostyle {
// margin with a postive padding to ensure the bottom border extends
// over the edges
padding: 0 $grid-horizontal $grid-vertical - 1 $grid-horizontal;
margin: 0 $grid-horizontal * -1 $grid-vertical ($grid-horizontal * -1);
margin: 0 ($grid-horizontal * -1) $grid-vertical ($grid-horizontal * -1);
border-bottom: 1px solid $color-shadow-light;
overflow: hidden;
@ -101,87 +101,112 @@ form.nostyle {
* ---------------------------------------------------- */
.cms {
input.loading,
input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading,
.ui-widget-header input.ui-state-default.loading {
padding-left: ($grid-horizontal * 2) - 1;
background: $color-widget-bg url(../../images/network-save.gif) no-repeat center left;
}
.ss-ui-button.ss-ui-action-constructive,
.ui-widget-content .ss-ui-button.ss-ui-action-constructive,
.ui-widget-header .ss-ui-button.ss-ui-action-constructive {
padding-left: ($grid-horizontal * 4) - 1;
.ui-widget {
/* loading */
input.loading,
input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading,
.ui-widget-header input.ui-state-default.loading {
padding-left: 24px;
color: lighten($color-text-dark, 20%);
background: $color-button-disabled url(../../images/network-save.gif) no-repeat 4px center;
border-color: darken($color-button-disabled, 10%);
cursor: default;
@include text-shadow(none);
@include box-shadow(none);
}
.ss-ui-button {
/* all buttons */
padding: ($grid-vertical - 3) ($grid-horizontal * 2) - 4;
text-decoration: none;
line-height: $grid-vertical * 2;
color: $color-text-dark;
background-color: $color-button-generic;
border: 1px solid $color-button-generic-border;
color: $color-text-light;
border-color: $color-button-constructive-border;
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 6px,
linear-gradient(color-stops(
$color-button-constructive-light,
$color-button-constructive-dark
))
);
background-color: $color-button-constructive-light;
@include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px);
@include box-shadow(lighten($color-base, 10%) 0 1px 2px);
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px,
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
darken($color-button-generic, 5%)
))
);
&.ui-state-hover {
border: 1px solid darken($color-button-generic-border, 5%);
@include box-shadow($color-base 0 1px 2px);
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px,
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
$color-button-generic
))
);
}
/* constructive */
&.ss-ui-action-constructive {
padding-left: 24px;
font-weight: bold;
margin-left: $grid-horizontal;
color: $color-text-light;
border-color: $color-button-constructive-border;
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 5px,
linear-gradient(color-stops(
lighten($color-button-constructive, 10%),
darken($color-button-constructive, 5%)
))
);
background-color: $color-button-constructive;
@include text-shadow(darken($color-base, 40%) 1px 1px 0);
@include box-shadow(darken($color-base, 20%) 1px 1px 2px);
}
.ss-ui-button.ss-ui-action-constructive.ui-state-hover {
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 6px,
linear-gradient(color-stops(
darken($color-button-constructive-light, 2%),
darken($color-button-constructive-dark, 3%)
))
);
background-color: $color-button-constructive-dark;
@include box-shadow(darken($color-base, 10%) 1px 1px 1px);
}
.ss-ui-button.ss-ui-action-constructive.cms-page-add-button {
background-position: 5px -155px;
}
.ss-ui-button.ss-ui-action-destructive,
.ui-widget-content .ss-ui-button.ss-ui-action-destructive,
.ui-widget-header .ss-ui-button.ss-ui-action-destructive {
color: $color-button-destructive;
background-color: $color-button-generic-light;
}
.ss-ui-button.ss-ui-action-destructive.delete {
padding-left: 23px;
color: $color-button-destructive;
border-color: $color-button-generic-border;
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px -26px,
linear-gradient(color-stops(
$color-button-generic-light,
$color-button-generic-dark
))
);
@include text-shadow(none);
@include box-shadow(darken($color-base, 2%) 1px 1px 2px);
}
.ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover {
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px -26px,
linear-gradient(color-stops(
darken($color-button-generic-light, 2%),
darken($color-button-generic-dark, 3%)
))
);
background-color: $color-button-generic-dark;
@include box-shadow(darken($color-base, 10%) 1px 1px 1px);
}
.ss-ui-button.ss-ui-action-minor,
.ui-widget-content .ss-ui-button.ss-ui-action-minor
.ui-widget-header .ss-ui-button.ss-ui-action-minor {
background: none;
padding: 0;
border: 0;
color: $color-text-dark;
text-decoration: underline;
@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
@include box-shadow(darken($color-base, 20%) 1px 1px 2px);
&.ui-state-hover {
border-color: darken($color-button-constructive-border, 10%);
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 5px,
linear-gradient(color-stops(
lighten($color-button-constructive, 15%),
$color-button-constructive
))
);
background-color: darken($color-button-constructive, 10%);
}
}
/* destructive */
&.ss-ui-action-destructive {
color: $color-button-destructive;
background-color: $color-button-generic;
&.delete {
padding-left: 26px;
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 6px -27px,
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
darken($color-button-generic, 5%)
))
);
&.ui-state-hover {
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 6px -27px,
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
$color-button-generic
))
);
}
}
}
&.ss-ui-action-minor {
background: none;
padding: 0;
border: 0;
color: $color-text-dark;
text-decoration: underline;
}
}
}
}

View File

@ -91,7 +91,8 @@
$color-base
));
}
&:focus {
&:focus,
&:active {
border-top: 1px solid darken($color-base, 5%);
text-decoration: none;
background-color: darken($color-base, 5%);

View File

@ -43,3 +43,21 @@
margin-left: 0;
}
}
/** ----------------------------------------------------
* Double tone borders
*
* http://daverupert.com/2011/06/two-tone-borders-with-css3/
* ----------------------------------------------------- */
@mixin doubleborder($side, $innerColor, $outerColor) {
$shadow: "0 0 0";
border-#{$side}: 1px solid $innerColor;
@if ($side == "top") { $shadow: 0 -1px 0; }
@if ($side == "right") { $shadow: 1px 0 0; }
@if ($side == "bottom") { $shadow: 0 1px 0; }
@if ($side == "left") { $shadow: -1px 0 0; }
-webkit-box-shadow: $shadow $outerColor;
-moz-box-shadow: $shadow $outerColor;
-o-box-shadow: $shadow $outerColor;
box-shadow: $shadow $outerColor;
}

View File

@ -84,7 +84,7 @@ html,body {
* -------------------------------------------- */
.cms-container {
height: 100%;
background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left;
background: $tab-panel-texture-background;
}
.cms-preview,
@ -112,12 +112,14 @@ html,body {
h2 {
float: left;
padding: $grid-vertical 0 0 $grid-horizontal;
padding: $grid-vertical $grid-horizontal 0 0;
font-size: $font-base-size;
line-height: $grid-horizontal * 3;
font-weight: bold;
text-shadow: darken($color-widget-bg, 10%) 1px 1px 0;
width: $grid-horizontal * 23;
width: $grid-horizontal * 22 /* 24 - (padding on each side) */;
@include hide-text-overflow();
}
& > div {
@ -135,7 +137,7 @@ html,body {
a {
font-weight: bold;
line-height: $grid-vertical * 2;
padding: ($grid-vertical * 2 - 6) $grid-horizontal + 4 $grid-vertical + 2;
padding: ($grid-vertical * 2 - 5) $grid-horizontal + 4 $grid-vertical + 1;
border-bottom: 2px solid darken($color-tab, 15%);
}
}
@ -163,16 +165,17 @@ html,body {
}
}
/* --------------------------------------------------------
* Content Tools is the sidebar on the left of the main content
* panel
*/
.cms-content-tools {
background-color: darken($color-widget-bg, 5%);
padding: $grid-vertical $grid-horizontal;
width: $grid-horizontal * 24;
width: $grid-horizontal * 22 /* 24 - padding */;
border-right: 1px solid darken($color-widget-bg, 5%);
overflow: auto;
.cms-panel-header,
.cms-panel-content {
padding: $grid-vertical $grid-horizontal;
}
z-index: 60;
}
.cms-content {
@ -231,6 +234,11 @@ html,body {
padding-right: 7px;
border-right: 1px solid $color-dark-separator;
}
span {
font-weight: bold;
@include hide-text-overflow();
}
}
.cms-login-status {
@ -306,8 +314,10 @@ html,body {
* -------------------------------------------- */
.cms-content-actions {
margin: $grid_vertical $grid_horizontal;
margin: $grid-vertical $grid-horizontal;
text-align: right;
height: $grid-vertical*4;
@include box-shadow($tab-panel-texture-color 0 $grid-vertical*-2 $grid-vertical*2);
}
@ -393,7 +403,6 @@ html,body {
.cms-content-toolbar {
@include clearfix;
display: block;
padding: 10px 0;
margin: 0 0 15px 0;
border-bottom-width: 2px;
border-bottom: 2px groove lighten($color-shadow-light, 95%);
@ -415,6 +424,24 @@ html,body {
}
.cms-content-tools {
h3,h4,h5 {
font-weight: bold;
line-height: $grid-vertical * 2;
}
h3 {
font-size: $font-base-size + 2;
margin-left: -2px;
padding-left: 2px;
@include doubleborder(bottom, $color-light-separator, lighten($color-light-separator, 10%))
}
h4 {
font-size: $font-base-size + 1;
}
h5 {
font-size: $font-base-size;
}
.field {
label {
float: none;
@ -425,6 +452,12 @@ html,body {
margin-left: 0;
}
}
.fieldgroup {
.fieldgroup-field {
width: auto;
}
}
}
.cms-content-batchactions, .cms-content-constructive-actions {
@ -517,8 +550,11 @@ form.member-profile-form {
}
.cms-content-fields {
overflow: auto;
.cms {
.cms-content-fields {
overflow: auto;
background: none;
}
}
/** --------------------------------------------

View File

@ -13,7 +13,7 @@
.cms {
.ui-tabs {
padding: 0;
background: transparent url(../images/textures/bg_cms_main_content.png) repeat top left;
background: $tab-panel-texture-background;
.ui-widget-header {
border: 0;
@ -56,13 +56,7 @@
border: 0;
padding: 0;
}
.ss-ui-button {
padding: 5px;
text-decoration: none;
}
// Buttons
.ui-state-hover {
cursor: pointer;
}
@ -79,15 +73,6 @@
.ss-ui-button,
.ui-widget-content .ss-ui-button,
.ui-widget-header .ss-ui-button {
padding: $grid-vertical - 1 $grid-horizontal;
color: $color-text-dark;
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px,
linear-gradient(color-stops(
$color-button-generic-light,
$color-button-generic-dark
))
);
background-color: $color-button-generic-light;
@include box-shadow(darken($color-base, 20%) 1px 1px 2px);
}
}

View File

@ -13,6 +13,7 @@ $color-widget-bg: lighten($color-base, 20%);
$color-dark-bg: #003050;
$color-dark-separator: #19435c;
$color-medium-separator: #808080;
$color-light-separator: rgba(201, 205, 206, 0.8);
$color-tab: #d9d9d9;
@ -32,14 +33,16 @@ $color-text-dark: #1f1f1f;
$color-text-dark-link: #3EBAE0;
$color-text-blue-link:#1556B2;
$color-button-generic-dark: #c3c3c3;
$color-button-generic-light:#f5f5f5;
$color-button-generic-border: #ABABAB;
$color-button-constructive-dark: #128945;
$color-button-constructive-light:#84BE3F;
$color-button-constructive-border: #118021;
$color-button-generic: #e6e6e6;
$color-button-generic-border: #c0c0c2;
$color-button-constructive: #669933;
$color-button-constructive-border: #78a127;
$color-button-destructive: #f00;
$color-button-disabled: #eeeded;
$color-warning: #FF9300;
$color-error: #FF9300;
$color-notice: #FF9300;
@ -47,6 +50,11 @@ $color-notice: #FF9300;
$color-cms-batchactions-menu-background: #f5f5f5;
$color-cms-batchactions-menu-selected-background: #efe999;
/** -----------------------------------------------
* Textures
* ----------------------------------------------- */
$tab-panel-texture-color: #f0f3f4;
$tab-panel-texture-background: $tab-panel-texture-color url(../images/textures/bg_cms_main_content.png) repeat top left;
/** -----------------------------------------------
* Typography.