From 84bf5e2029495120a746508fc5262947a39f6339 Mon Sep 17 00:00:00 2001 From: Paul Clarke Date: Mon, 21 May 2012 12:48:53 +1200 Subject: [PATCH] ENHANCEMENT tabs text-shadow direction change, improve visibility for IE --- admin/css/screen.css | 12 ++++++------ admin/scss/_style.scss | 16 ++++++---------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 4125d6449..8ed16330a 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -274,7 +274,7 @@ body.cms { overflow: hidden; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav { float: right; /* margin-right:$grid-x*4; */ } .cms-content-header .cms-content-header-tabs .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 12px; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-default, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-default { border-top: none; } -.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-active, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active { border-top: none; padding-bottom: 0px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 2px; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 2px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 2px; border-color: #EEE; } +.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-active, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active { border-top: none; padding-bottom: 0px; -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; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-right, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-tr { border-radius: 0; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-left, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; } @@ -283,10 +283,10 @@ body.cms { overflow: hidden; } /** -------------------------------------------- Tabs -------------------------------------------- */ .cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav li { margin: 0; } .cms-content-header .ui-tabs-nav li a, .cms-dialog .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; } -.cms-content-header .ui-tabs-nav .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-dialog .ui-tabs-nav .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; text-shadow: #e6e6e6 0 1px 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; 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-right-color: #8399a7; border-left-color: #ced7dc; border-bottom: none; } -.cms-content-header .ui-tabs-nav .ui-state-default a, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-default a, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-default a, .cms-dialog .ui-tabs-nav .ui-state-default a, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default a, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default a { color: #FFF; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } -.cms-content-header .ui-tabs-nav .ui-state-active, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-dialog .ui-tabs-nav .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active { background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; border-right-color: #a6a6a6; border-left-color: #a6a6a6; margin-right: -1px; margin-left: -1px; z-index: 2; } -.cms-content-header .ui-tabs-nav .ui-state-active a, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a { border-bottom: none; color: #444444; text-shadow: none; } +.cms-content-header .ui-tabs-nav .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-dialog .ui-tabs-nav .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; text-shadow: #e6e6e6 0 1px 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; 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-right-color: #8399a7; border-left-color: #ced7dc; } +.cms-content-header .ui-tabs-nav .ui-state-default a, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-default a, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-default a, .cms-dialog .ui-tabs-nav .ui-state-default a, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default a, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default a { color: #FFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); } +.cms-content-header .ui-tabs-nav .ui-state-active, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-dialog .ui-tabs-nav .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active { background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; border-right-color: #b3b3b3; border-left-color: #b3b3b3; margin-right: -1px; margin-left: -1px; z-index: 2; } +.cms-content-header .ui-tabs-nav .ui-state-active a, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a { border-bottom: none; color: #444444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } .CMSPagesController .cms-content-header-tabs .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; text-indent: -9999em; background: url(../images/content-header-tabs-sprite.png) no-repeat; } .CMSPagesController .cms-content-header-tabs .ui-tabs-nav li.content-treeview a { background-position: 2px 0px; } @@ -510,7 +510,7 @@ form.member-profile-form .ui-tabs-nav .ui-corner-all, form.member-profile-form . .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: -1px; padding-bottom: 11px; } .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav li:first-child { margin-left: 15px; } .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-state-focus a { outline: none; } -.ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-state-default, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; 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-right-color: #a6a6a6; border-left-color: #d9d9d9; border-left-color: red; border-bottom: none; border-top: none; text-shadow: white 0 1px 0; } +.ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-state-default, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; 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-right-color: #a6a6a6; border-left-color: #d9d9d9; border-bottom: none; border-top: none; text-shadow: white 0 1px 0; } .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-state-active, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-widget-header .ui-state-active { background: #eceff1; border-right-color: #a6a6a6; border-left-color: #a6a6a6; margin-right: -1px; margin-left: -3px; z-index: 2; } .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-state-active a, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-widget-header .ui-state-active a { border-bottom: none; border-top: none; } .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-corner-all, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-corner-top, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-corner-right, .ui-dialog .cms-dialog-content .cms-tabset.ui-tabs .ui-tabs-nav .ui-corner-tr { border-radius: 0; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 0ec54fec9..a11b5d953 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -181,8 +181,7 @@ body.cms { top:none; } padding-bottom:0px; - @include box-shadow($color-shadow-dark 0 0 2px); - border-color: #EEE; + @include box-shadow($color-shadow-light 0 0 2px); } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-radius:0; @@ -232,12 +231,11 @@ body.cms { border: { right-color: darken($color-base, 15%); left-color: lighten($color-base, 10%); - bottom:none; } a { color: #FFF; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); } } @@ -246,8 +244,8 @@ body.cms { .ui-widget-header .ui-state-active { background: $tab-panel-texture-background; border: { - right-color: darken($color-tab, 20%); - left-color: darken($color-tab, 20%); + right-color: darken($color-tab, 15%); // same color as divider between header and body, needed for IE + left-color: darken($color-tab, 15%); } margin-right:-1px; margin-left:-1px; @@ -256,7 +254,7 @@ body.cms { a { border-bottom: none; color: $color-text; - text-shadow: none; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } } } @@ -1370,11 +1368,9 @@ form.member-profile-form { border: { right-color: darken($color-tab, 20%); left-color: $color-tab; - left-color: red; bottom:none; top:none; } - text-shadow: lighten($color-tab, 60%) 0 1px 0; } @@ -1399,7 +1395,7 @@ form.member-profile-form { } } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { - border-radius:0; + border-radius:0; } .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {