From 50336ffa6256be3da0551c758c2df2106d4b14b7 Mon Sep 17 00:00:00 2001 From: James Cocker Date: Tue, 12 Mar 2013 22:43:33 +0000 Subject: [PATCH] CMS CSS Minor Polishing Tweaks Fixed what I believe to be a few very minor CSS regressions, that appeared after the CSS restructure for the side-by-side preview. - Reverted background of the right panel (and tab active state) to the slightly darker shade (as per 3.0) to keep each of the 3 panels visually separate. - Slightly increased padding on ui-tabs-panel as felt a but too close for comfort. Had decreased since 3.0. - Decreased padding for logged in user name in menu, felt too excessive. (3.0 was neater) - Evened out padding above buttons in site tree sidebar Screenshots showing changes: 3.0: http://spdr.me/xauh 3.1 before commit: http://spdr.me/jkIe 3.1 after commit: http://spdr.me/IxtB --- admin/css/screen.css | 12 ++++++------ admin/scss/_menu.scss | 2 +- admin/scss/_style.scss | 11 +++++------ 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index d94b647bc..468bf2282 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -373,7 +373,7 @@ body.cms { overflow: hidden; } /** -------------------------------------------- Tabs -------------------------------------------- */ .ui-tabs { padding: 0; background: none; } .ui-tabs .ui-tabs { position: static; } -.ui-tabs .ui-tabs-panel { padding: 16px; background: transparent; border: 0; } +.ui-tabs .ui-tabs-panel { padding: 24px; background: transparent; border: 0; } .ui-tabs .ui-tabs-panel.cms-edit-form { padding: 0; } .ui-tabs .ui-widget-header { border: 0; background: none; } .ui-tabs .ui-tabs-nav { float: right; margin: 16px 0 -1px 0; padding: 0 12px 0 0; border-bottom: none; } @@ -409,7 +409,7 @@ body.cms { overflow: hidden; } .ui-tabs.cms-tabset-primary .ui-tabs-nav li a, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary li a, .ui-tabs .cms-content-header-tabs .ui-tabs-nav li a { margin: 0; line-height: 39px; } .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-all, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-top, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-right, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-tr, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-tl, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-all, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-top, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-right, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-tr, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-tl, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-right, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-tr, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; } .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-default, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-default, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-default { -webkit-box-shadow: rgba(201, 205, 206, 0.8) 0 0 2px; -moz-box-shadow: rgba(201, 205, 206, 0.8) 0 0 2px; box-shadow: rgba(201, 205, 206, 0.8) 0 0 2px; background-color: #b0bec7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q0ZGJlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d4dbe0), color-stop(100%, #b0bec7)); background-image: -webkit-linear-gradient(#d4dbe0, #b0bec7); background-image: -moz-linear-gradient(#d4dbe0, #b0bec7); background-image: -o-linear-gradient(#d4dbe0, #b0bec7); background-image: linear-gradient(#d4dbe0, #b0bec7); border-top: none; border-right-color: #8399a7; border-left-color: #ced7dc; } -.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: #e6eaed; background: #eceff1; border-top: none; border-right-color: #b3b3b3; border-left-color: #eceff1; z-index: 2; } +.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: #e6eaed; border-top: none; border-right-color: #b3b3b3; border-left-color: #eceff1; z-index: 2; } .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active a, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active a { border-bottom: none; } .cms-content-header-tabs { float: right; } @@ -488,7 +488,7 @@ body.cms { overflow: hidden; } .cms-content-tools { background: #eceff1; width: 200px; overflow-y: auto; overflow-x: hidden; z-index: 70; border-right: 1px solid #c0c0c2; -webkit-box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); -moz-box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); float: left; position: relative; } .cms-content-tools.filter { padding: 0 !important; } .cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid #d0d3d5; -webkit-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -moz-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -o-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); } -.cms-content-tools .cms-panel-content { width: 184px; padding: 16px 8px 0; overflow: auto; height: 100%; } +.cms-content-tools .cms-panel-content { width: 184px; padding: 8.8px 8px 0; overflow: auto; height: 100%; } .cms-content-tools .cms-panel-content .Actions .ss-ui-action-constructive { margin-right: 5px; } .cms-content-tools .cms-content-header { background-color: #748d9d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0OGQ5ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); } .cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; } @@ -556,7 +556,7 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto; .memberdatetimeoptionset .toggle { font-size: 11px; } .cms .cms-content { border-right: 1px solid #BBB; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eceff1; width: 800px; z-index: 40; } -.cms .cms-content-fields { overflow-y: auto; overflow-x: auto; background: none; width: 100%; } +.cms .cms-content-fields { overflow-y: auto; overflow-x: auto; background: #e6eaed; width: 100%; } .cms .cms-content-fields #Root_Main .confirmedpassword { border-bottom: none; box-shadow: none; } .cms .cms-content-fields #Root_Main .customFormat { max-width: 80px; } .cms .cms-content-fields #Root_Main .cms-help-toggle { text-indent: -9999em; display: inline-block; width: 20px; background: url(../images/question.png) no-repeat 0px 0px; } @@ -682,7 +682,7 @@ form.small .cms-file-info-data .field .middleColumn { margin-left: 120px; } .members_grid p button#action_export span.btn-icon-download-csv { height: 17px; } /** Import forms */ -body.SecurityAdmin { background-color: #eceff1; } +body.SecurityAdmin { background-color: #e6eaed; } form.import-form ul { list-style: disc; } form.import-form ul li { margin-left: 20px; } @@ -821,7 +821,7 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; } .cms-logo a { position: absolute; top: 8px; bottom: 8px; display: block; width: 24px; background: url("../images/logo_small.png") no-repeat left center; text-indent: -9999em; padding: 0 1px; left: 0; } .cms-logo span { font-weight: bold; font-size: 12px; line-height: 16px; padding: 2px 0; margin-left: 30px; } -.cms-login-status { border-top: 1px solid #19435c; padding: 12px 0 17px; line-height: 16px; font-size: 11px; } +.cms-login-status { border-top: 1px solid #19435c; padding: 8px 0 9.6px; line-height: 16px; font-size: 11px; } .cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 5px; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -292px no-repeat; text-indent: -9999em; } .cms-menu { z-index: 80; background: #b0bec7; width: 160px; -webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; -moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; } diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index e427589c9..b2ca68bf3 100644 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -67,7 +67,7 @@ .cms-login-status { border-top: 1px solid $color-dark-separator; - padding: $grid-y*1.5 0 17px; + padding: $grid-y*1 0 $grid-y*1.2; line-height: 16px; font-size: $font-base-size - 1; diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index a1e586696..e6d13bf9d 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -159,7 +159,7 @@ body.cms { } .ui-tabs-panel { - padding: $grid-x*2; + padding: $grid-x*3; background: transparent; // default it's white border: 0; // suppress default borders &.cms-edit-form { @@ -309,8 +309,7 @@ body.cms { .ui-state-active { @include box-shadow(none); - background: darken($color-widget-bg, 2%); - background: $tab-panel-texture-color; + background:darken($tab-panel-texture-color,2%); border-top: none; border: { right-color: darken($color-tab, 15%); // same color as divider between header and body, needed for IE @@ -692,7 +691,7 @@ body.cms { .cms-panel-content { width: ($grid-x * 23); - padding: $grid-x*2 $grid-x 0; // smaller left/right padding to use space efficiently + padding: $grid-x*1.1 $grid-x 0; // smaller left/right padding to use space efficiently overflow: auto; height:100%; @@ -1024,7 +1023,7 @@ form.member-profile-form { // can trigger longer pages and the extra scroll bar doesn't fire our sizing bar overflow-y: auto; overflow-x: auto; - background: none; + background:darken($tab-panel-texture-color,2%); width:100%; #Root_Main { .confirmedpassword { @@ -1596,7 +1595,7 @@ form.small { */ body.SecurityAdmin { - background-color: $tab-panel-texture-color; //adds background to import members/groups iframe + background-color: darken($tab-panel-texture-color,2%); //adds background to import members/groups iframe } form.import-form {