diff --git a/.gitignore b/.gitignore index 5df1b9b43..5cd3d2901 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .sass-cache +.DS_Store \ No newline at end of file diff --git a/admin/code/LeftAndMain.php b/admin/code/LeftAndMain.php index bd724cf1a..3f927eb92 100644 --- a/admin/code/LeftAndMain.php +++ b/admin/code/LeftAndMain.php @@ -263,6 +263,9 @@ class LeftAndMain extends Controller { Requirements::javascript(THIRDPARTY_DIR . '/jstree/jquery.jstree.js'); Requirements::css(THIRDPARTY_DIR . '/jstree/themes/apple/style.css'); + + //Plug-in to delay or prevent the accidental firing of the flyout menu in the CMS + Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js'); Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.js'); Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js'); @@ -328,6 +331,7 @@ class LeftAndMain extends Controller { Requirements::combine_files( 'leftandmain.js', array( + SAPPHIRE_ADMIN_DIR . '/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js', SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.js', SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js', SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js', diff --git a/admin/css/screen.css b/admin/css/screen.css index d5d131af7..69c008d9c 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -147,13 +147,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, a .jstree-pageicon { display: block; float: left; width: 16px; height: 16px; margin-right: 4px; background-color: transparent; background-image: url(../images/sitetree_ss_pageclass_icons_default.png); background-repeat: no-repeat; } -li.class-HomePage a .jstree-pageicon { background-position: 0 -48px; } +li.class-HomePage > a .jstree-pageicon { background-position: 0 -48px; } -li.class-RedirectorPage a .jstree-pageicon { background-position: 0 -16px; } +li.class-RedirectorPage > a .jstree-pageicon { background-position: 0 -16px; } -li.class-VirtualPage a .jstree-pageicon { background-position: 0 -32px; } +li.class-VirtualPage > a .jstree-pageicon { background-position: 0 -32px; } -li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } +li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } /** Styles for the left hand side menu @package sapphire @subpackage admin */ /** ------------------------------------------------------- CMS Menu Bar -------------------------------------------------------- */ @@ -165,9 +165,10 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } .cms-menu.collapsed .cms-header span { display: none; } .cms-menu.collapsed .cms-menu-list { overflow-x: hidden; overflow-y: auto; } .cms-menu.collapsed .cms-menu-list li span.text { display: none; } -.cms-menu.collapsed .cms-menu-list li ul { display: none !important; } +.cms-menu.collapsed .cms-menu-list li ul { display: none; } .cms-menu.collapsed.cms-panel .cms-panel-content { display: block; } +.cms-menu-list li { /* Style applied to the menu flyout only when the collapsed setting */ } .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; cursor: pointer; 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, .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); } @@ -175,13 +176,18 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } .cms-menu-list li a .text { display: block; } .cms-menu-list li ul { display: none; } .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); } -.cms-menu-list li.current ul { border-top: 1px solid #1e5270; display: block; } +.cms-menu-list li.current ul { border-top: none; display: block; } .cms-menu-list li.current li { background-color: #287099; } .cms-menu-list li.current li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; } .cms-menu-list li.current li a.current, .cms-menu-list li.current li a:hover { background: #2e7ead; border-top: 1px solid #2e7ead; color: white; } .cms-menu-list li.current li a:focus { background: #236184; border-top: 1px solid #1e5270; color: white; } .cms-menu-list li.current li.current a { font-weight: bold; color: white; } .cms-menu-list li.current li.first a { border-top: none; } +.cms-menu-list li ul.collapsed-flyout { display: block; } +.cms-menu-list li ul.collapsed-flyout li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; } +.cms-menu-list li ul.collapsed-flyout li a.current, .cms-menu-list li ul.collapsed-flyout li a:hover { font-weight: bold; } +.cms-menu-list li ul.collapsed-flyout li.current a { font-weight: bold; } +.cms-menu-list li ul.collapsed-flyout li.first a { border-top: 1px solid #92a5b2; } .cms-menu-list.collapsed li .text { display: none; } .cms-menu-list.collapsed li > li { display: none; } @@ -191,7 +197,7 @@ form.nostyle .field { padding: 0; border: 0; } form.nostyle label { float: none; width: auto; } form.nostyle .middleColumn { margin-left: 0; } -.field { display: block; padding: 0 8px 7px 8px; margin: 0 -8px 8px -8px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); *zoom: 1; /* TreeDropdowns */ /* dropdowns */ /* chzn override */ /* Date Fields */ } +.field { display: block; padding: 10px 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; padding: 0 8px 7px 8px; margin: 0 -8px 8px -8px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); *zoom: 1; /* TreeDropdowns */ /* dropdowns */ /* chzn override */ /* Date Fields */ } .field:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .field.noLabel .middleColumn { margin-left: 0; } .field label.left { float: left; display: block; width: 168px; padding: 8px 8px 8px 0; line-height: 16px; } @@ -222,14 +228,24 @@ form.nostyle .middleColumn { margin-left: 0; } .cms-preview-toggle-link { display: block; float: right; font-size: 11px; } .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: 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 .ss-ui-button { /* all buttons */ padding: 7px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; 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?1316376123') 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?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } -.cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -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?1316376123') 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?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ss-ui-button:focus, .cms .ss-ui-button:active { 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?1316376123') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } -.cms .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?1316376123') 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?1316376123') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') 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 .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1316376123') 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?1316376123') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } +.cms .ss-ui-button { /* all buttons */ padding: 7px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; 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?1314743735') 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?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* CMS action button sprite mix-in (used for all the buttons in the bottom row */ /* constructive */ /* destructive */ /* generic action buttons */ } +.cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -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?1314743735') 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?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button:focus, .cms .ss-ui-button:active { 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?1314743735') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } +.cms .ss-ui-button.ss-ui-action-constructive { background-image: none; padding-left: 24px; padding-right: 6px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1314743735') 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?1314743735') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') 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 .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1314743735') 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?1314743735') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } .cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } -.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1316376123') 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?1316376123') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1316376123') 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?1316376123') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.unpublish { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.save-draft { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.save-draft.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.save-draft.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.cms-preview-toggle-link { padding-left: 24px !important; margin-left: 4px !important; padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.cms-preview-toggle-link.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.cms-preview-toggle-link.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; } .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } .cms .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } @@ -264,7 +280,12 @@ form.nostyle .middleColumn { margin-left: 0; } .cms .ui-tabs .ui-tabs-nav.ui-state-active { border-color: gray; } .cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 16px 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 .ui-widget-header { background-color: #b0bec7; padding: 8px 8px 6px 8px; border-bottom: 2px solid #8399a7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dde3e7), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(top, #dde3e7, #92a5b2); background-image: -moz-linear-gradient(top, #dde3e7, #92a5b2); background-image: -o-linear-gradient(top, #dde3e7, #92a5b2); background-image: -ms-linear-gradient(top, #dde3e7, #92a5b2); background-image: linear-gradient(top, #dde3e7, #92a5b2); border-bottom: 3px solid #5c7382; padding: 8px; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } +.cms .ui-widget-header .ui-dialog-title { padding: 6px 0; text-shadow: #ced7dc 1px 1px 0; } +.cms .ui-widget-header a.ui-dialog-titlebar-close { position: absolute; top: -8px; right: -15px; width: 30px; height: 30px; z-index: 100000; } +.cms .ui-widget-header a.ui-state-hover { border-color: transparent; background: transparent; } +.cms .ui-widget-header a.ui-state-hover .ui-icon-closethick { background-position: 0 -30px; } +.cms .ui-widget-header .ui-icon-closethick { background-image: url(../images/dialog_close.png); background-position: 0 0; width: 30px; height: 30px; } .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; } @@ -315,7 +336,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?1316445742') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } +.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1317095003') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } .cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; } @@ -344,11 +365,15 @@ html article, html aside, html details, html figcaption, html figure, html foote .ModelAdmin .ResultAssemblyBlock { display: none; } /** -------------------------------------------- "Add page" dialog -------------------------------------------- */ -.cms-page-add-form-dialog #PageType li { clear: left; height: 40px; border-bottom: 1px solid rgba(107, 120, 123, 0.5); } -.cms-page-add-form-dialog #PageType li:hover, .cms-page-add-form-dialog #PageType li.selected { background-color: #ffff99; } -.cms-page-add-form-dialog #PageType li input, .cms-page-add-form-dialog #PageType li label, .cms-page-add-form-dialog #PageType li .icon, .cms-page-add-form-dialog #PageType li .title { float: left; } -.cms-page-add-form-dialog #PageType li .icon { width: 20px; } -.cms-page-add-form-dialog #PageType li .title { width: 100px; font-weight: bold; } +.cms-page-add-form-dialog #PageType li { padding: 9px 0 9px 15px; overflow: hidden; 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-page-add-form-dialog #PageType li:hover, .cms-page-add-form-dialog #PageType li.selected { background-color: rgba(255, 255, 102, 0.3); } +.cms-page-add-form-dialog #PageType li input, .cms-page-add-form-dialog #PageType li label, .cms-page-add-form-dialog #PageType li .icon, .cms-page-add-form-dialog #PageType li .title { float: left; line-height: 1.3em; } +.cms-page-add-form-dialog #PageType li .icon { width: 20px; display: block; width: 16px; height: 16px; margin: 0 4px; background-color: transparent; background-image: url(../images/sitetree_ss_pageclass_icons_default.png); background-repeat: no-repeat; } +.cms-page-add-form-dialog #PageType li .class-HomePage { background-position: 0 -48px; } +.cms-page-add-form-dialog #PageType li .class-RedirectorPage { background-position: 0 -16px; } +.cms-page-add-form-dialog #PageType li .class-VirtualPage { background-position: 0 -32px; } +.cms-page-add-form-dialog #PageType li .class-ErrorPage { background-position: 0 -112px; } +.cms-page-add-form-dialog #PageType li .title { width: 120px; font-weight: bold; padding-right: 10px; } .cms-page-add-form-dialog #PageType li .description { font-style: italic; } /** -------------------------------------------- Content toolbar -------------------------------------------- */ @@ -428,6 +453,9 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; .cms-panel .toggle-expand { width: 40px; } .cms-panel.collapsed .cms-panel-content { display: none; } .cms-panel.collapsed .cms-panel-header { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 80px; border: none; padding: 0; } +.cms-panel .child-flyout-indicator { width: 0; height: 0; border-right: 3px dashed #1f1f1f; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 3px dashed #1f1f1f; position: absolute; right: 1px; margin-top: -8px; display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ } +.cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; } +.cms-panel .collapsed-flyout li a span { display: block !important; } .cms-content .cms-panel.collapsed { cursor: pointer; } @@ -437,3 +465,29 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; .cms-preview.is-collapsed .cms-preview-toggle a { left: -15px; } .cms-switch-view a { padding-right: 1em; } + +/** ------------------------------------------------------------------ +* Modal - JQuery UI Dialog pop-up +* ----------------------------------------------------------------- */ +/* overlay for switching between CMS panes */ +.cms .ui-widget-overlay-light { background: #aaaaaa url(../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: 0.3; } + +/* Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) */ +.cms .ui-widget-overlay { background-color: #000; background-image: none; } + +.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Labels for all the Dialogs of the pop-up form */ /* Numeric labels in the sitetree */ /* Exception for a label that is inline with the selector dropdown box */ } +.ui-dialog #PageType .middleColumn { margin: 0; padding: 0; } +.ui-dialog #PageType .middleColumn .optionset li { width: 100%; } +.ui-dialog #PageType li.selected { background-color: rgba(255, 255, 153, 0.5); /*background-color: #FFFF99;*/ } +.ui-dialog #PageType li:hover { background-color: #FFFF99 !important; /* lighter highlight on hover */ } +.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; margin-top: -4px; margin-left: 38px; } +.ui-dialog label.numeric-label { font-size: 14px; font-weight: bold; float: left; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #7b8c91; padding: 4px 8px 4px 3px; text-align: right; color: #fff; position: absolute; width: 15px; /* Numeric label icon (supports up to two-digit numbers) */ } +.ui-dialog label.numeric-label .label-flyout-indicator { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; } +.ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: left !important; width: 125px; } +.ui-dialog #ParentID .middleColumn { width: 320px; } +.ui-dialog .Actions { float: right; margin: 0; } + +/** ------------------------------------------------------------------ +* Titlebar for pop-up dialog. +* ----------------------------------------------------------------- */ +.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #92a5b2; padding: 4px 4px 4px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; /* /2 need to eliminate visual artifact */ -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; -ms-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; 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); margin-bottom: 12px; } diff --git a/admin/images/btn_icons_sprite_disabled.png b/admin/images/btn_icons_sprite_disabled.png new file mode 100644 index 000000000..e702a8962 Binary files /dev/null and b/admin/images/btn_icons_sprite_disabled.png differ diff --git a/admin/images/dialog_close.png b/admin/images/dialog_close.png new file mode 100644 index 000000000..439adaf9b Binary files /dev/null and b/admin/images/dialog_close.png differ diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js index f531559f5..35cef2ce8 100644 --- a/admin/javascript/LeftAndMain.Content.js +++ b/admin/javascript/LeftAndMain.Content.js @@ -266,7 +266,7 @@ $('.cms-content.loading').entwine({ onmatch: function() { - this.append('
'); + this.append('
'); }, onunmatch: function() { this.find('.cms-content-loading-overlay').remove(); diff --git a/admin/javascript/LeftAndMain.Panel.js b/admin/javascript/LeftAndMain.Panel.js index 382917031..06365c9c1 100644 --- a/admin/javascript/LeftAndMain.Panel.js +++ b/admin/javascript/LeftAndMain.Panel.js @@ -54,10 +54,53 @@ this.expandPanel(); } }, + + toggleFlyoutState: function(bool) { + if (bool) { //expand + //show the flyout + $('.collapsed').find('li').show(); + + //hide all the flyout-indicator + $('.cms-menu-list').find('.child-flyout-indicator').hide(); + } else { //collapse + //hide the flyout only if it is not the current section + $('.collapsed-flyout').find('li').each(function() { + //if (!$(this).hasClass('current')) + $(this).hide(); + }); + + //show all the flyout-indicators + var par = $('.cms-menu-list ul.collapsed-flyout').parent(); + if (par.children('.child-flyout-indicator').length == 0) par.append('').fadeIn(); + par.children('.child-flyout-indicator').fadeIn(); + } + }, togglePanel: function(bool) { // if((!bool && this.hasClass('collapsed')) || (bool && !this.hasClass('collapsed'))) return; - + + //apply or unapply the flyout formatting + $('.cms-menu-list').children('li').each(function(){ + if (bool) { //expand + $(this).children('ul').each(function() { + $(this).removeClass('collapsed-flyout'); + if ($(this).data('collapse')) { + $(this).removeData('collapse'); + $(this).addClass('collapse'); + } + }); + } else { //collapse + $(this).children('ul').each(function() { + $(this).addClass('collapsed-flyout'); + $(this).hasClass('collapse'); + $(this).removeClass('collapse'); + $(this).data('collapse', true); + }); + } + }); + + this.toggleFlyoutState(bool); + this.toggleClass('collapsed', !bool); var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed(); @@ -84,6 +127,23 @@ this.togglePanel(false); } }); + + /** Toggle the flyout panel to appear/disappear when mouse over */ + $('.cms-menu-list li').entwine({ + toggleFlyout: function(bool) { + fly = $(this); + if (fly.children('ul').first().hasClass('collapsed-flyout')) { + if (bool) { //expand + fly.children('ul').find('li').fadeIn('fast'); + } else { //collapse + fly.children('ul').find('li').hide(); + } + } + } + }); + //slight delay to prevent flyout closing from "sloppy mouse movement" + $('.cms-menu-list li').hoverIntent(function(){$(this).toggleFlyout(true);},function(){$(this).toggleFlyout(false);}); + $('.cms-panel *').entwine({ getPanel: function() { diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js index f9cf8fad3..e3b846168 100644 --- a/admin/javascript/LeftAndMain.Preview.js +++ b/admin/javascript/LeftAndMain.Preview.js @@ -71,8 +71,8 @@ else this.collapse(); // Preview might not be available in all admin interfaces - block/disable when necessary - this.append('
'); - this.find('.cms-preview-overlay').hide(); + this.append('
'); + this.find('.cms-preview-overlay-light').hide(); this._super(); }, diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 35297c70a..6ab29090f 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -16,6 +16,15 @@ form.nostyle { .field { display: block; + padding: 10px 0; + border-bottom-width: 2px; + border-bottom: 2px groove lighten($color-shadow-light, 95%); + -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; + //TODO: use single border line with shadow instead:: http://daverupert.com/2011/06/two-tone-borders-with-css3/ + //@include border-image(url(../images/textures/bg_fieldset_elements_border.png), 2, stretch); //not yet supported + //overflow: hidden; + // bottom padding accounts for the border and we have a negative // margin with a postive padding to ensure the bottom border extends @@ -247,9 +256,41 @@ form.nostyle { )) ); } + + /* CMS action button sprite mix-in (used for all the buttons in the bottom row */ + @mixin actionButtonSprite($horizontalOffset, $verticalOffset) { + padding-left: 24px; + padding-right: 6px; + @include background(image-url("../images/btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset, + 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 $horizontalOffset $verticalOffset, + linear-gradient(color-stops( + lighten($color-button-generic, 20%), + $color-button-generic + )) + ); + } + &.ui-state-disabled { + background-image: none; + @include background(image-url("../images/btn_icons_sprite_disabled.png") no-repeat $horizontalOffset $verticalOffset, + linear-gradient(color-stops( + lighten($color-button-generic, 20%), + $color-button-generic + )) + ); + } + } + /* constructive */ &.ss-ui-action-constructive { + background-image: none; padding-left: 24px; + padding-right: 6px; font-weight: bold; margin-left: $grid-horizontal; color: $color-text-light; @@ -285,22 +326,23 @@ form.nostyle { 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 - )) - ); - } + @include actionButtonSprite(6px, -26px); } + + &.unpublish { + @include actionButtonSprite(6px, -58px); + } + } + + /* generic action buttons */ + &.save-draft { + @include actionButtonSprite(6px, -90px); + } + + &.cms-preview-toggle-link { + padding-left: 24px !important; + margin-left: 4px !important; + @include actionButtonSprite(6px, -124px); } &.ss-ui-button-small { diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index ec65a6408..4f231cc05 100644 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -47,10 +47,10 @@ display: none; } li ul { - display: none !important; + display: none; } } - + &.cms-panel .cms-panel-content { display: block; // override panel defaults } @@ -122,7 +122,7 @@ display: none; } - &.current { + &.current { //need to apply current stlye to flyout also (at least line height) a { color: $color-text-light; text-shadow: darken($color-menu-button, 20%) 0 -1px 0; @@ -136,7 +136,7 @@ } ul { - border-top: 1px solid darken($color-menu-button, 20%); + border-top: none; display: block; } @@ -178,6 +178,33 @@ } } } + + /* Style applied to the menu flyout only when the collapsed setting */ + ul.collapsed-flyout { + display: block; + + li { + a { + font-size: $font-base-size - 1; + padding: 0 10px 0 40px; + height: 32px; + line-height: 32px; + + &.current, + &:hover { + font-weight: bold; + } + } + + &.current a { + font-weight: bold; + } + + &.first a { + border-top: 1px solid darken($color-base, 10%); + } + } + } } &.collapsed { diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 7485cbd15..9f387d2dc 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -10,6 +10,9 @@ * create new SCSS files for larger components like the CMS menu or tree * (see _tree.scss and _menu.scss). */ +@import "compass"; +@import "compass/css3"; +@import "compass/utilities"; /** ---------------------------------------------------- * Core Styles. @@ -350,30 +353,59 @@ html,body { .cms-page-add-form-dialog { #PageType li { - clear: left; - height: 40px; - border-bottom: 1px solid $color-shadow-dark; - + padding: 9px 0 9px 15px; + overflow: hidden; + border-bottom-width: 2px; + border-bottom: 2px groove lighten($color-shadow-light, 95%); + -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; + &:hover, &.selected { - background-color: lighten($color-highlight, 10%); + background-color: $color-highlight-opacity; } input, label, .icon, .title { float: left; + line-height: 1.3em; } .icon { width: 20px; + display: block; + width: 16px; + height: 16px; + margin: 0 4px; + background-color: transparent; + background-image: url(../images/sitetree_ss_pageclass_icons_default.png); + background-repeat: no-repeat; + } + + .class-HomePage { + background-position: 0 -48px; } + .class-RedirectorPage { + background-position: 0 -16px; + } + + .class-VirtualPage { + background-position: 0 -32px; + } + + .class-ErrorPage { + background-position: 0 -112px; + } + .title { - width: 100px; + width: 120px; font-weight: bold; + padding-right: 10px; } .description { font-style: italic; } + } } @@ -759,7 +791,32 @@ form.member-profile-form { padding: 0; } } - + + .child-flyout-indicator { + width:0; + height:0; + border-right:3px dashed $color-text-dark; + border-top:3px solid transparent; + border-left:3px solid transparent; + border-bottom:3px dashed $color-text-dark; + position: absolute; + right: 1px; + margin-top: -8px; + display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ + } + + .collapsed-flyout { + display: block !important; + left: 41px; + margin-top: -40px; + position: fixed; + width: 191px; + + li a span { + display: block !important; + } + } + } .cms-content .cms-panel.collapsed { @@ -807,4 +864,129 @@ form.member-profile-form { a { padding-right: 1em; } -} \ No newline at end of file +} + + +/** ------------------------------------------------------------------ +* Modal - JQuery UI Dialog pop-up +* ----------------------------------------------------------------- */ + +/* overlay for switching between CMS panes */ +.cms .ui-widget-overlay-light { + background: #aaaaaa url(../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; + opacity: 0.3; +} + +/* Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) */ +.cms .ui-widget-overlay { + background-color: #000; + background-image: none; +} + + +$DialogHeaderColor: #5F6160; +$DialogHeaderFontSize: 14px; +$DialogBorderRadius: 8px; +$DialogLabelColor: #7B8C91; +.ui-dialog { + background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4; + border: 3px solid #000 !important; + border-radius: $DialogBorderRadius; + overflow: visible; + padding: 0; + + #PageType { + .middleColumn { + margin: 0; + padding: 0; + + .optionset li { + width: 100%; + } + } + + li { + &.selected { + background-color: rgba(255,255,153, 0.5); /*background-color: #FFFF99;*/ + } + + &:hover { + background-color: #FFFF99 !important; /* lighter highlight on hover */ + } + } + } + + /* Labels for all the Dialogs of the pop-up form */ + .field label.left { + font-size: $DialogHeaderFontSize; + font-weight: bold; + width: 100%; + float: none; + color: $DialogHeaderColor; + margin-top: -4px; + margin-left: 38px; + } + + /* Numeric labels in the sitetree */ + label.numeric-label { + font-size: $DialogHeaderFontSize; + font-weight: bold; + float: left; + @include border-top-left-radius(3px); + @include border-bottom-left-radius(3px); + background-color: $DialogLabelColor; + padding: 4px 8px 4px 3px; + text-align: right; + color: #fff; + position: absolute; + width: 15px; + + /* Numeric label icon (supports up to two-digit numbers) */ + .label-flyout-indicator { + position: absolute; + left: 26px; + margin-top: -18px; + overflow: visible; + display: block; + width: 0; + height: 0; + border-top: 11px solid transparent; + border-left: 7px dashed $DialogLabelColor; + border-bottom: 11px solid transparent; + } + + } + + /* Exception for a label that is inline with the selector dropdown box */ + #ParentID { + label.left { + padding: $grid-vertical 0 $grid-vertical 0; + float: left !important; + width: 125px; + } + + .middleColumn { + width: 320px; + } + } + + .Actions { + float: right; + margin: 0; + } +} + +/** ------------------------------------------------------------------ +* Titlebar for pop-up dialog. +* ----------------------------------------------------------------- */ +.ui-dialog-titlebar.ui-widget-header { + font-size: $DialogHeaderFontSize; + background-color: #92a5b2; + padding: $grid-vertical/2 $grid-horizontal/2 $grid-vertical/2 $grid-horizontal*2; + + border-bottom: 2px solid #8399a7; + @include border-top-left-radius($DialogBorderRadius/2); /* /2 need to eliminate visual artifact */ + @include border-top-right-radius($DialogBorderRadius); + @include background-image(linear-gradient(#ced7dc, #92a5b2)); + margin-bottom: $grid-vertical*1.5; +} diff --git a/admin/scss/_tree.scss b/admin/scss/_tree.scss index a600b3960..0973ce85f 100644 --- a/admin/scss/_tree.scss +++ b/admin/scss/_tree.scss @@ -521,18 +521,18 @@ a .jstree-pageicon { background-repeat: no-repeat; } -li.class-HomePage a .jstree-pageicon { +li.class-HomePage > a .jstree-pageicon { background-position: 0 -48px; } -li.class-RedirectorPage a .jstree-pageicon { +li.class-RedirectorPage > a .jstree-pageicon { background-position: 0 -16px; } -li.class-VirtualPage a .jstree-pageicon { +li.class-VirtualPage > a .jstree-pageicon { background-position: 0 -32px; } -li.class-ErrorPage a .jstree-pageicon { +li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } \ No newline at end of file diff --git a/admin/scss/_uitheme.scss b/admin/scss/_uitheme.scss index 39e5ccfea..4b1eba949 100644 --- a/admin/scss/_uitheme.scss +++ b/admin/scss/_uitheme.scss @@ -50,11 +50,50 @@ font-family: $font-family; border: 0; } - - .ui-widget-header { - background: $color-widget-bg; - border: 0; - padding: 0; + + .ui-widget-header { + background-color: darken($color-widget-bg, 20%); + padding: 8px 8px 6px 8px; + border-bottom: 2px solid darken($color-widget-bg, 35%); + @include linear-gradient(color-stops( + darken($color-widget-bg, 5%), + darken($color-widget-bg, 30%) + )); + border-bottom: 3px solid darken($color-widget-bg, 50%); + padding: 8px; + @include border-radius(0); + + & .ui-dialog-title { + padding: 6px 0; + text-shadow: lighten($color-base, 10%) 1px 1px 0; + } + + + + & a.ui-dialog-titlebar-close { + position: absolute; + top: -8px; + right: -15px; + width: 30px; + height: 30px; + z-index: 100000; + } + + & a.ui-state-hover { + border-color: transparent; + background: transparent; + + & .ui-icon-closethick { + background-position: 0 -30px; + } + } + + & .ui-icon-closethick { + background-image: url(../images/dialog_close.png); + background-position: 0 0; + width: 30px; + height: 30px; + } } .ui-state-hover { diff --git a/admin/scss/themes/_default.scss b/admin/scss/themes/_default.scss index 1cb123891..b9bd7ba0e 100644 --- a/admin/scss/themes/_default.scss +++ b/admin/scss/themes/_default.scss @@ -21,6 +21,7 @@ $color-shadow-light: rgba(201, 205, 206, 0.8); $color-shadow-dark: rgba(107, 120, 123, 0.5); $color-highlight: #FFFF66; +$color-highlight-opacity: rgba(255, 255, 102, 0.3); $color-menu-button: #338DC1; $color-menu-background: #c6d7df; @@ -78,4 +79,4 @@ $grid-horizontal: 8px; /** ----------------------------------------------- * Application Logo (CMS Logo) Must be 24px x 24px * ------------------------------------------------ */ -$application-logo-small: image-url("logo_small.png"); \ No newline at end of file +$application-logo-small: image-url("logo_small.png"); diff --git a/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.js b/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.js new file mode 100644 index 000000000..7bb0e1eff --- /dev/null +++ b/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.js @@ -0,0 +1,106 @@ +/** +* hoverIntent is similar to jQuery's built-in "hover" function except that +* instead of firing the onMouseOver event immediately, hoverIntent checks +* to see if the user's mouse has slowed down (beneath the sensitivity +* threshold) before firing the onMouseOver event. +* +* hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+ +* +* +* hoverIntent is currently available for use in all personal or commercial +* projects under both MIT and GPL licenses. This means that you can choose +* the license that best suits your project, and use it accordingly. +* +* // basic usage (just like .hover) receives onMouseOver and onMouseOut functions +* $("ul li").hoverIntent( showNav , hideNav ); +* +* // advanced usage receives configuration object only +* $("ul li").hoverIntent({ +* sensitivity: 7, // number = sensitivity threshold (must be 1 or higher) +* interval: 100, // number = milliseconds of polling interval +* over: showNav, // function = onMouseOver callback (required) +* timeout: 350, // number = milliseconds delay before onMouseOut function call +* out: hideNav // function = onMouseOut callback (required) +* }); +* +* @param f onMouseOver function || An object with configuration options +* @param g onMouseOut function || Nothing (use configuration options object) +* @author Brian Cherne brian(at)cherne(dot)net +*/ +(function($) { + $.fn.hoverIntent = function(f,g) { + // default configuration options + var cfg = { + sensitivity: 7, + interval: 100, + timeout: 350 + }; + // override configuration options with user supplied object + cfg = $.extend(cfg, g ? { over: f, out: g } : f ); + + // instantiate variables + // cX, cY = current X and Y position of mouse, updated by mousemove event + // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval + var cX, cY, pX, pY; + + // A private function for getting mouse position + var track = function(ev) { + cX = ev.pageX; + cY = ev.pageY; + }; + + // A private function for comparing current and previous mouse position + var compare = function(ev,ob) { + ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); + // compare mouse positions to see if they've crossed the threshold + if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { + $(ob).unbind("mousemove",track); + // set hoverIntent state to true (so mouseOut can be called) + ob.hoverIntent_s = 1; + return cfg.over.apply(ob,[ev]); + } else { + // set previous coordinates for next time + pX = cX; pY = cY; + // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs) + ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval ); + } + }; + + // A private function for delaying the mouseOut function + var delay = function(ev,ob) { + ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); + ob.hoverIntent_s = 0; + return cfg.out.apply(ob,[ev]); + }; + + // A private function for handling mouse 'hovering' + var handleHover = function(e) { + // copy objects to be passed into t (required for event object to be passed in IE) + var ev = jQuery.extend({},e); + var ob = this; + + // cancel hoverIntent timer if it exists + if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } + + // if e.type == "mouseenter" + if (e.type == "mouseenter") { + // set "previous" X and Y position based on initial entry point + pX = ev.pageX; pY = ev.pageY; + // update "current" X and Y position based on mousemove + $(ob).bind("mousemove",track); + // start polling interval (self-calling timeout) to compare mouse coordinates over time + if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} + + // else e.type == "mouseleave" + } else { + // unbind expensive mousemove event + $(ob).unbind("mousemove",track); + // if hoverIntent state is true, then call the mouseOut function after the specified delay + if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} + } + }; + + // bind the function to the two event listeners + return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover); + }; +})(jQuery); \ No newline at end of file diff --git a/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js b/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js new file mode 100644 index 000000000..f25471dea --- /dev/null +++ b/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js @@ -0,0 +1,9 @@ +/** +* hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+ +* +* +* @param f onMouseOver function || An object with configuration options +* @param g onMouseOut function || Nothing (use configuration options object) +* @author Brian Cherne brian(at)cherne(dot)net +*/ +(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:350};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))