From f57a3018a3730d36bea6053cdc94abadcc8ab644 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Wed, 14 Dec 2011 16:54:52 +0100 Subject: [PATCH] MINOR Improved perceived UI feedback by hiding various elements until they're styled properly (TinyMCE, tree) --- admin/css/screen.css | 40 +++++++++++++++------------- admin/javascript/LeftAndMain.Tree.js | 1 + admin/scss/_forms.scss | 5 ++++ admin/scss/_style.scss | 3 +++ admin/scss/_tree.scss | 4 +++ 5 files changed, 35 insertions(+), 18 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index be32a3582..1edff0d2b 100755 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -118,24 +118,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?1322162198') 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?1322162198') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* 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?1322162198') 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?1322162198') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1323768771') 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?1323768771') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* 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?1323768771') 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?1323768771') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1322162198') 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?1322162198') 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?1322162198') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1322162198') no-repeat 6px -124px, 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?1323768771') 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?1323768771') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1323768771') 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?1323768771') 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?1323768771') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1323768771') 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; } @@ -156,6 +156,7 @@ form.nostyle .middleColumn { margin-left: 0; } .optionset li label { display: block; cursor: pointer; padding: 0 0 0 16px; } /** ---------------------------------------------------- HTML Text ---------------------------------------------------- */ +.htmleditor textarea { visibility: hidden; } .htmleditor label { display: block; float: none; padding-bottom: 10px; } .htmleditor .middleColumn { margin-left: 0px; clear: left; } @@ -232,6 +233,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .ModelAdmin .west #SearchForm_holder div.ui-tabs-panel form .Actions button.ss-ui-action-minor { display: none; } /** -------------------------------------------- "Add page" dialog -------------------------------------------- */ +.cms-page-add-form-dialog { display: none; } .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; } @@ -461,6 +463,8 @@ li.class-VirtualPage > a .jstree-pageicon { background-position: 0 -32px; } li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } +.cms-tree { visibility: hidden; } + /** Styles for the left hand side menu and header for the admin panels. Take into consideration CSS selector performance. @package sapphire @subpackage admin */ .cms-logo-header { background-color: #00111d; position: relative; padding: 16px 8px 0 4px; line-height: 24px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00111d), color-stop(50%, #003050), color-stop(100%, #00111d)); background-image: -webkit-linear-gradient(#00111d, #003050, #00111d); background-image: -moz-linear-gradient(#00111d, #003050, #00111d); background-image: -o-linear-gradient(#00111d, #003050, #00111d); background-image: -ms-linear-gradient(#00111d, #003050, #00111d); background-image: linear-gradient(#00111d, #003050, #00111d); } .cms-logo-header span { color: white; white-space: nowrap; text-overflow: ellipsis; display: block; } @@ -468,7 +472,7 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } .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?1322162198') 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?1323768771') 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; } diff --git a/admin/javascript/LeftAndMain.Tree.js b/admin/javascript/LeftAndMain.Tree.js index 62f0b244b..ef05c4463 100644 --- a/admin/javascript/LeftAndMain.Tree.js +++ b/admin/javascript/LeftAndMain.Tree.js @@ -95,6 +95,7 @@ ] }) .bind('loaded.jstree', function(e, data) { + self.css('visibility', 'visible'); // Add ajax settings after init period to avoid unnecessary initial ajax load // of existing tree in DOM - see load_node_html() data.inst._set_settings({'html_data': {'ajax': { diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index f0df1f76b..767d60132 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -456,6 +456,11 @@ form.nostyle { * ---------------------------------------------------- */ .htmleditor { + + textarea { + visibility: hidden; // enabled by JS + } + label { display: block; float: none; diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 81ea96212..12eb7386c 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -322,6 +322,9 @@ html,body { * -------------------------------------------- */ .cms-page-add-form-dialog { + + display: none; + #PageType li { padding: 9px 0 9px 15px; overflow: hidden; diff --git a/admin/scss/_tree.scss b/admin/scss/_tree.scss index 61f4c1099..787aaac9f 100644 --- a/admin/scss/_tree.scss +++ b/admin/scss/_tree.scss @@ -535,4 +535,8 @@ li.class-VirtualPage > a .jstree-pageicon { li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; +} + +.cms-tree { + visibility: hidden; // enabled by JS to avoid layout glitches } \ No newline at end of file