From c985ee588d5730405c1ccac3abd4f47ec8fbeebf Mon Sep 17 00:00:00 2001 From: Constantin Jucovschi Date: Thu, 28 Mar 2013 15:50:18 +0100 Subject: [PATCH 1/4] remove dependency on #ribbon. Replaced it with .ribbon. --- index.htm | 2 +- ribbon/ribbon.css | 82 +++++++++++++++++++++++------------------------ ribbon/ribbon.js | 30 ++++++----------- 3 files changed, 51 insertions(+), 63 deletions(-) diff --git a/index.htm b/index.htm index ffde6ee..b74e851 100644 --- a/index.htm +++ b/index.htm @@ -40,7 +40,7 @@ -
+
Ribbon App Test
File diff --git a/ribbon/ribbon.css b/ribbon/ribbon.css index 7fb9dff..827249c 100644 --- a/ribbon/ribbon.css +++ b/ribbon/ribbon.css @@ -15,7 +15,7 @@ body behavior: url(/PIE.htc); } -#ribbon +.ribbon { font-family: "Segoe UI" , Verdana, Tahoma, Helvetica, sans-serif; @@ -37,12 +37,12 @@ body height: 135px; } -#ribbon.backstage +.ribbon.backstage { height: auto; bottom: 0; } -#ribbon .ribbon-window-title +.ribbon .ribbon-window-title { text-align: center; color: #000; @@ -51,13 +51,13 @@ body display: block; } -#ribbon #ribbon-tab-header-strip +.ribbon .ribbon-tab-header-strip { margin: 5px 0 0 10px; white-space: nowrap; } -#ribbon .ribbon-tab-header +.ribbon .ribbon-tab-header { display: inline; margin: 0 5px; @@ -72,12 +72,12 @@ body z-index: 40; } -#ribbon.backstage .ribbon-tab-header +.ribbon.backstage .ribbon-tab-header { border-bottom: 1px solid #1f48a1; } -#ribbon .ribbon-tab-header:hover +.ribbon .ribbon-tab-header:hover { background: #f1f3f4; border: 1px solid #b6babf; @@ -85,12 +85,12 @@ body cursor: pointer; } -#ribbon.backstage .ribbon-tab-header +.ribbon.backstage .ribbon-tab-header { border-bottom: 1px solid #1f48a1; } -#ribbon .ribbon-tab-header.sel, #ribbon .ribbon-tab-header.sel:hover +.ribbon .ribbon-tab-header.sel, .ribbon .ribbon-tab-header.sel:hover { background: #fff; margin: -1px 4px; @@ -100,7 +100,7 @@ body z-index: 45; } -#ribbon .ribbon-tab-header.file +.ribbon .ribbon-tab-header.file { padding: 5px 20px; background: #2860b3; @@ -115,7 +115,7 @@ body } -#ribbon .ribbon-tab-header.file:hover +.ribbon .ribbon-tab-header.file:hover { background: #3870c3; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#5498f5), to(#3870c3)); @@ -127,7 +127,7 @@ body z-index: 55; position: relative; } -#ribbon .ribbon-tab-header.file.sel +.ribbon .ribbon-tab-header.file.sel { background: #4488e5; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2860b3), to(#4488e5)); @@ -140,7 +140,7 @@ body position: relative; } -#ribbon .ribbon-tab +.ribbon .ribbon-tab { height: 80px; padding: 5px; @@ -156,7 +156,7 @@ body -pie-watch-ancestors: 2; } -#ribbon .ribbon-tab.file +.ribbon .ribbon-tab.file { padding: 0; margin-top: 5px; @@ -177,13 +177,13 @@ body z-index: 30; } -#ribbon .ribbon-backstage +.ribbon .ribbon-backstage { display: none; } -#ribbon.backstage .ribbon-backstage +.ribbon.backstage .ribbon-backstage { display: block; position: absolute; @@ -195,7 +195,7 @@ body background-color: #FFF; } -#ribbon .section-title +.ribbon .section-title { color: #5B626C; text-align: center; @@ -208,14 +208,14 @@ body } -#ribbon .ribbon-section +.ribbon .ribbon-section { float: left; position: relative; height: 82px; } -#ribbon .ribbon-section-sep +.ribbon .ribbon-section-sep { border-left: 1px solid #E0E0E0; border-right: 1px solid #fff; @@ -226,7 +226,7 @@ body float: left; } -#ribbon .ribbon-button +.ribbon .ribbon-button { padding: 4px 6px; border: 1px solid transparent; @@ -236,7 +236,7 @@ body } -#ribbon .ribbon-button-large +.ribbon .ribbon-button-large { text-align: center; height: 58px; @@ -244,7 +244,7 @@ body float: left; } -#ribbon .ribbon-button-small +.ribbon .ribbon-button-small { height: 14px; padding: 3px 4px; @@ -252,28 +252,28 @@ body } -#ribbon .ribbon-button .button-help +.ribbon .ribbon-button .button-help { display: none; } -#ribbon .ribbon-button .button-title +.ribbon .ribbon-button .button-title { color: #444; } -#ribbon .ribbon-button-large .button-title +.ribbon .ribbon-button-large .button-title { clear: left; display: block; } -#ribbon .ribbon-button-large .ribbon-icon +.ribbon .ribbon-button-large .ribbon-icon { margin: auto; } -#ribbon .ribbon-button-small .ribbon-icon +.ribbon .ribbon-button-small .ribbon-icon { width: 16px; height: 16px; @@ -281,78 +281,78 @@ body clear: left; margin: -1px 5px 0px 1px; } -#ribbon .ribbon-button .ribbon-icon.ribbon-hot, #ribbon .ribbon-button .ribbon-icon.ribbon-disabled +.ribbon .ribbon-button .ribbon-icon.ribbon-hot, .ribbon .ribbon-button .ribbon-icon.ribbon-disabled { display: none; } -#ribbon .ribbon-button-large .ribbon-icon.ribbon-normal +.ribbon .ribbon-button-large .ribbon-icon.ribbon-normal { display: block; } -#ribbon .ribbon-button:hover .ribbon-icon.ribbon-normal +.ribbon .ribbon-button:hover .ribbon-icon.ribbon-normal { display: none; } -#ribbon .ribbon-button-large:hover .ribbon-icon.ribbon-hot +.ribbon .ribbon-button-large:hover .ribbon-icon.ribbon-hot { display: block; } -#ribbon .ribbon-button-small .ribbon-icon.ribbon-normal +.ribbon .ribbon-button-small .ribbon-icon.ribbon-normal { display: inline; } -#ribbon .ribbon-button-small:hover .ribbon-icon.ribbon-hot +.ribbon .ribbon-button-small:hover .ribbon-icon.ribbon-hot { display: inline; } -#ribbon .ribbon-button:hover, #ribbon .ribbon-button.sel +.ribbon .ribbon-button:hover, .ribbon .ribbon-button.sel { border: 1px solid #F1C43F; background: #fdeeb3; cursor: pointer; } -#ribbon .ribbon-button:active +.ribbon .ribbon-button:active { border: 1px solid #F1C43F; background: #F1C43F; cursor: pointer; } -#ribbon .ribbon-button.disabled .ribbon-icon, #ribbon .ribbon-button.disabled:hover .ribbon-icon +.ribbon .ribbon-button.disabled .ribbon-icon, .ribbon .ribbon-button.disabled:hover .ribbon-icon { display: none; } -#ribbon .ribbon-button.disabled .ribbon-icon.ribbon-disabled +.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-disabled { display: block; opacity: 0.8; } -#ribbon .ribbon-button.disabled .ribbon-icon.ribbon-implicit-disabled +.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-implicit-disabled { opacity: 0.4; } -#ribbon .ribbon-button.disabled:hover +.ribbon .ribbon-button.disabled:hover { border: 1px solid transparent; background: transparent; cursor: default; } -#ribbon .ribbon-button.disabled:active +.ribbon .ribbon-button.disabled:active { border: 1px solid transparent; background: transparent; cursor: default; } -#ribbon .ribbon-button.disabled .button-title +.ribbon .ribbon-button.disabled .button-title { color: #888; } diff --git a/ribbon/ribbon.js b/ribbon/ribbon.js index ef4a703..7728ae5 100644 --- a/ribbon/ribbon.js +++ b/ribbon/ribbon.js @@ -1,17 +1,11 @@ (function( $ ){ - $.fn.ribbon = function(id) { - if (!id) { - if (this.attr('id')) { - id = this.attr('id'); - } - } - + $.fn.ribbon = function() { + ribObj = this; + var that = function() { return thatRet; }; - - var thatRet = that; that.selectedTabIndex = -1; @@ -25,14 +19,8 @@ that.returnFromBackstage = function() { ribObj.removeClass('backstage'); } - var ribObj = null; - - that.init = function(id) { - if (!id) { - id = 'ribbon'; - } - - ribObj = $('#'+id); + + that.init = function() { ribObj.find('.ribbon-window-title').after('
'); var header = ribObj.find('#ribbon-tab-header-strip'); @@ -139,12 +127,12 @@ } that.switchToTabByIndex = function(index) { - var headerStrip = $('#ribbon #ribbon-tab-header-strip'); + var headerStrip = ribObj.find('#ribbon-tab-header-strip'); headerStrip.find('.ribbon-tab-header').removeClass('sel'); headerStrip.find('#ribbon-tab-header-'+index).addClass('sel'); - $('#ribbon .ribbon-tab').hide(); - $('#ribbon #'+tabNames[index]).show(); + ribObj.find(".ribbon-tab").hide(); + ribObj.find('#'+tabNames[index]).show(); } $.fn.enable = function() { @@ -185,7 +173,7 @@ } - that.init(id); + that.init(); $.fn.ribbon = that; }; From e0308c54a94dd777390f3a86d4aa52b9e62d6f39 Mon Sep 17 00:00:00 2001 From: Constantin Jucovschi Date: Thu, 16 May 2013 14:05:20 +0200 Subject: [PATCH 2/4] fixing styling problems --- ribbon/ribbon.css | 5 ++--- ribbon/ribbon.js | 32 ++++++-------------------------- 2 files changed, 8 insertions(+), 29 deletions(-) diff --git a/ribbon/ribbon.css b/ribbon/ribbon.css index 827249c..acec04d 100644 --- a/ribbon/ribbon.css +++ b/ribbon/ribbon.css @@ -30,7 +30,6 @@ body overflow: hidden; behavior: url(/PIE.htc); z-index: 25; - position: fixed; top: 0; left: 0; right: 0; @@ -142,7 +141,7 @@ body .ribbon .ribbon-tab { - height: 80px; + height: 88px; padding: 5px; margin-top: 5px; border-top: 1px solid #b6babf; @@ -212,7 +211,7 @@ body { float: left; position: relative; - height: 82px; + height: 95px; } .ribbon .ribbon-section-sep diff --git a/ribbon/ribbon.js b/ribbon/ribbon.js index 7728ae5..b2ccaf8 100644 --- a/ribbon/ribbon.js +++ b/ribbon/ribbon.js @@ -87,32 +87,12 @@ $(this).find('.ribbon-normal').addClass('ribbon-implicit-disabled'); } - $(this).tooltip({ - bodyHandler: function () { - if (!$(this).isEnabled()) { - $('#tooltip').css('visibility', 'hidden'); - return ''; - } - - var tor = ''; - if (jQuery(this).children('.button-help').size() > 0) - tor = (jQuery(this).children('.button-help').html()); - else - tor = ''; - - if (tor == '') { - $('#tooltip').css('visibility', 'hidden'); - return ''; - } - - $('#tooltip').css('visibility', 'visible'); - - return tor; - }, - left: 0, - extraClass: 'ribbon-tooltip' - }); + var tor = ''; + if ($(this).children('.button-help').size() > 0) { + tor = (jQuery(this).children('.button-help').html()); + //$(this).tooltip({"content": tor}); + } }); ribObj.find('.ribbon-section').each(function(index) { @@ -178,4 +158,4 @@ $.fn.ribbon = that; }; -})( jQuery ); \ No newline at end of file +})( jQuery ); From 2aa6c205ee3ff48cbde8fe7973bf04c41339e7eb Mon Sep 17 00:00:00 2001 From: Constantin Jucovschi Date: Thu, 16 May 2013 14:51:17 +0200 Subject: [PATCH 3/4] removing yet another id from ribbon generation and added compact ribbon style --- ribbon/ribbon-compact.css | 377 ++++++++++++++++++++++++++++++++++++++ ribbon/ribbon.js | 6 +- 2 files changed, 380 insertions(+), 3 deletions(-) create mode 100644 ribbon/ribbon-compact.css diff --git a/ribbon/ribbon-compact.css b/ribbon/ribbon-compact.css new file mode 100644 index 0000000..b95579c --- /dev/null +++ b/ribbon/ribbon-compact.css @@ -0,0 +1,377 @@ +body +{ + padding-top: 151px; +} + +.page +{ + border: 1px solid #a5acb5; + margin: 20px; + padding: 15px; + -webkit-box-shadow: #000000 0px 0px 10px; + -moz-box-shadow: #000000 0px 0px 10px; + box-shadow: #000000 0px 0px 10px; + background: #FFF; + behavior: url(/PIE.htc); +} + +.ribbon +{ + font-family: "Segoe UI" , Verdana, Tahoma, Helvetica, sans-serif; + + cursor: default; + font-size: 8pt; + background-color: #eaedf1; + border-bottom: 1px solid #8b9097; + -webkit-box-shadow: #8b9097 0px 1px 3px; + -moz-box-shadow: #8b9097 0px 1px 3px; + box-shadow: #8b9097 0px 1px 3px; + overflow: hidden; + behavior: url(/PIE.htc); + z-index: 25; + top: 0; + left: 0; + right: 0; + +} + +.ribbon.backstage +{ + height: auto; + bottom: 0; +} +.ribbon .ribbon-window-title +{ + text-align: center; + color: #000; + font-size: 10pt; + display: block; +} + +.ribbon .ribbon-tab-header-strip +{ + display: none; + margin: 5px 0 0 10px; + white-space: nowrap; +} + +.ribbon .ribbon-tab-header +{ + display: inline; + margin: 0 5px; + padding: 5px 10px; + font-size: 8pt; + color: #444; /*border: 1px solid #eaedf1;*/ + border-bottom: 1px solid #b6babf; + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; + position: relative; + z-index: 40; +} + +.ribbon.backstage .ribbon-tab-header +{ + border-bottom: 1px solid #1f48a1; +} + +.ribbon .ribbon-tab-header:hover +{ + background: #f1f3f4; + border: 1px solid #b6babf; + margin: -1px 4px; + cursor: pointer; +} + +.ribbon.backstage .ribbon-tab-header +{ + border-bottom: 1px solid #1f48a1; +} + +.ribbon .ribbon-tab-header.sel, .ribbon .ribbon-tab-header.sel:hover +{ + background: #fff; + margin: -1px 4px; + border: 1px solid #b6babf; + border-bottom: 1px solid #fff; + cursor: default; + z-index: 45; +} + +.ribbon .ribbon-tab-header.file +{ + padding: 5px 20px; + background: #2860b3; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4488e5), to(#2860b3)); + background: -moz-linear-gradient(#4488e5, #2860b3); + -pie-background: linear-gradient(#4488e5, #2860b3); + border: 1px solid #1f48a1; + margin: -1px 4px; + border-bottom: 1px solid #4488e5; + cursor: default; + color: #fff; +} + + +.ribbon .ribbon-tab-header.file:hover +{ + background: #3870c3; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#5498f5), to(#3870c3)); + background: -moz-linear-gradient(#5498f5, #3870c3); + -pie-background: linear-gradient(#5498f5, #3870c3); + border: 1px solid #1f48a1; + cursor: pointer; + border-bottom: 1px solid #4488e5; + z-index: 55; + position: relative; +} +.ribbon .ribbon-tab-header.file.sel +{ + background: #4488e5; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2860b3), to(#4488e5)); + background: -moz-linear-gradient(#2860b3, #4488e5); + -pie-background: linear-gradient(#2860b3, #4488e5); + border: 1px solid #1f48a1; + cursor: pointer; + border-bottom: 1px solid #4488e5; + z-index: 55; + position: relative; +} + +.ribbon .ribbon-tab +{ + height: 45px; + padding: 5px; + border-top: 1px solid #b6babf; + background: #FFF url('rib-back.png') repeat-x bottom; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eaedf1)); + background: -moz-linear-gradient(#ffffff, #eaedf1); /*-pie-background: linear-gradient(#ffffff, #eaedf1);*/ + overflow: hidden; + min-width: 500px; + behavior: url(/PIE.htc); + z-index: 30; + -pie-watch-ancestors: 2; +} + +.ribbon .ribbon-tab.file +{ + padding: 0; + margin-top: 5px; + border-top: 1px solid #1f48a1; + + background-color:#4488e5; + filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#4488e5, endColorstr=#ffffff); + background-image:-moz-linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:-webkit-linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:-ms-linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:-o-linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(15%,#4488e5), color-stop(100%,#ffffff)); + + + overflow: hidden; + min-width: 500px; + z-index: 30; +} + +.ribbon .ribbon-backstage +{ + display: none; +} + + +.ribbon.backstage .ribbon-backstage +{ + display: block; + position: absolute; + top: 60px; + left: 0; + right: 0; + bottom: 0; + padding: 10px; + background-color: #FFF; +} + +.ribbon .section-title +{ + color: #5B626C; + text-align: center; + clear: left; + display: block; + position: absolute; + bottom: 0; + left: 0; + right: 0; + +} + +.ribbon .ribbon-section +{ + float: left; + position: relative; + height: 50px; +} + +.ribbon .ribbon-section-sep +{ + border-left: 1px solid #E0E0E0; + border-right: 1px solid #fff; + margin: 0 5px; + height: 75px; + position: relative; + width: 0; + float: left; +} + +.ribbon .ribbon-button +{ + padding: 4px 6px; + border: 1px solid transparent; + -webkit-border-radius: 3px 3px 3px 3px; + -moz-border-radius: 3px 3px 3px 3px; + border-radius: 3px 3px 3px 3px; + +} + +.ribbon .ribbon-button-large +{ + text-align: center; + height: 58px; + min-width: 44px; + float: left; +} + +.ribbon .ribbon-button-small +{ + height: 14px; + padding: 3px 4px; + text-align: left; + +} + +.ribbon .ribbon-button .button-help +{ + display: none; +} + +.ribbon .ribbon-button .button-title +{ + color: #444; +} + +.ribbon .ribbon-button-large .button-title +{ + clear: left; + display: block; +} + +.ribbon .ribbon-button-large .ribbon-icon +{ + margin: auto; +} + +.ribbon .ribbon-button-small .ribbon-icon +{ + width: 16px; + height: 16px; + float: left; + clear: left; + margin: -1px 5px 0px 1px; +} +.ribbon .ribbon-button .ribbon-icon.ribbon-hot, .ribbon .ribbon-button .ribbon-icon.ribbon-disabled +{ + display: none; +} + +.ribbon .ribbon-button-large .ribbon-icon.ribbon-normal +{ + display: block; +} + +.ribbon .ribbon-button:hover .ribbon-icon.ribbon-normal +{ + display: none; +} + +.ribbon .ribbon-button-large:hover .ribbon-icon.ribbon-hot +{ + display: block; +} +.ribbon .ribbon-button-small .ribbon-icon.ribbon-normal +{ + display: inline; +} + +.ribbon .ribbon-button-small:hover .ribbon-icon.ribbon-hot +{ + display: inline; +} + +.ribbon .ribbon-button:hover, .ribbon .ribbon-button.sel +{ + border: 1px solid #F1C43F; + background: #fdeeb3; + cursor: pointer; + +} +.ribbon .ribbon-button:active +{ + border: 1px solid #F1C43F; + background: #F1C43F; + cursor: pointer; +} + +.ribbon .ribbon-button.disabled .ribbon-icon, .ribbon .ribbon-button.disabled:hover .ribbon-icon +{ + display: none; +} +.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-disabled +{ + display: block; + opacity: 0.8; + +} +.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-implicit-disabled +{ + opacity: 0.4; +} + +.ribbon .ribbon-button.disabled:hover +{ + border: 1px solid transparent; + background: transparent; + cursor: default; +} +.ribbon .ribbon-button.disabled:active +{ + border: 1px solid transparent; + background: transparent; + cursor: default; +} + +.ribbon .ribbon-button.disabled .button-title +{ + color: #888; +} + +.ribbon-tooltip +{ + font-family: "Segoe UI" , Verdana, Tahoma, Helvetica, sans-serif; + font-size: 10pt; + position: fixed; + z-index: 5000; + border: 1px solid #8b9097; + background-color: #e5e5f0; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#e5e5f0)); + background: -moz-linear-gradient(#ffffff, #e5e5f0); + -pie-background: linear-gradient(#ffffff, #e5e5f0); + padding: 5px; + -webkit-box-shadow: #c6c9cd 1px 1px 3px; + -moz-box-shadow: #c6c9cd 1px 1px 3px; + box-shadow: #c6c9cd 1px 1px 3px; + -webkit-border-radius: 2px 2px 2px 2px; + -moz-border-radius: 2px 2px 2px 2px; + border-radius: 2px 2px 2px 2px; + width: 200px; + top: 150px !important; +} diff --git a/ribbon/ribbon.js b/ribbon/ribbon.js index b2ccaf8..12dd207 100644 --- a/ribbon/ribbon.js +++ b/ribbon/ribbon.js @@ -21,8 +21,8 @@ } that.init = function() { - ribObj.find('.ribbon-window-title').after('
'); - var header = ribObj.find('#ribbon-tab-header-strip'); + ribObj.find('.ribbon-window-title').after('
'); + var header = ribObj.find('.ribbon-tab-header-strip'); ribObj.find('.ribbon-tab').each(function(index) { var id = $(this).attr('id'); @@ -107,7 +107,7 @@ } that.switchToTabByIndex = function(index) { - var headerStrip = ribObj.find('#ribbon-tab-header-strip'); + var headerStrip = ribObj.find('.ribbon-tab-header-strip'); headerStrip.find('.ribbon-tab-header').removeClass('sel'); headerStrip.find('#ribbon-tab-header-'+index).addClass('sel'); From 4bfb12218ba67681eefe30c26ce372a30fe5df41 Mon Sep 17 00:00:00 2001 From: Constantin Jucovschi Date: Thu, 16 May 2013 15:17:38 +0200 Subject: [PATCH 4/4] making compact layout the default one --- ribbon/{ribbon-compact.css => ribbon-tworows.css} | 10 ++++++---- ribbon/ribbon.css | 10 ++++------ 2 files changed, 10 insertions(+), 10 deletions(-) rename ribbon/{ribbon-compact.css => ribbon-tworows.css} (98%) diff --git a/ribbon/ribbon-compact.css b/ribbon/ribbon-tworows.css similarity index 98% rename from ribbon/ribbon-compact.css rename to ribbon/ribbon-tworows.css index b95579c..acec04d 100644 --- a/ribbon/ribbon-compact.css +++ b/ribbon/ribbon-tworows.css @@ -21,6 +21,7 @@ body cursor: default; font-size: 8pt; + padding-top: 10px; background-color: #eaedf1; border-bottom: 1px solid #8b9097; -webkit-box-shadow: #8b9097 0px 1px 3px; @@ -32,7 +33,7 @@ body top: 0; left: 0; right: 0; - + height: 135px; } .ribbon.backstage @@ -44,13 +45,13 @@ body { text-align: center; color: #000; + padding: 2px; font-size: 10pt; display: block; } .ribbon .ribbon-tab-header-strip { - display: none; margin: 5px 0 0 10px; white-space: nowrap; } @@ -140,8 +141,9 @@ body .ribbon .ribbon-tab { - height: 45px; + height: 88px; padding: 5px; + margin-top: 5px; border-top: 1px solid #b6babf; background: #FFF url('rib-back.png') repeat-x bottom; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eaedf1)); @@ -209,7 +211,7 @@ body { float: left; position: relative; - height: 50px; + height: 95px; } .ribbon .ribbon-section-sep diff --git a/ribbon/ribbon.css b/ribbon/ribbon.css index acec04d..b95579c 100644 --- a/ribbon/ribbon.css +++ b/ribbon/ribbon.css @@ -21,7 +21,6 @@ body cursor: default; font-size: 8pt; - padding-top: 10px; background-color: #eaedf1; border-bottom: 1px solid #8b9097; -webkit-box-shadow: #8b9097 0px 1px 3px; @@ -33,7 +32,7 @@ body top: 0; left: 0; right: 0; - height: 135px; + } .ribbon.backstage @@ -45,13 +44,13 @@ body { text-align: center; color: #000; - padding: 2px; font-size: 10pt; display: block; } .ribbon .ribbon-tab-header-strip { + display: none; margin: 5px 0 0 10px; white-space: nowrap; } @@ -141,9 +140,8 @@ body .ribbon .ribbon-tab { - height: 88px; + height: 45px; padding: 5px; - margin-top: 5px; border-top: 1px solid #b6babf; background: #FFF url('rib-back.png') repeat-x bottom; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eaedf1)); @@ -211,7 +209,7 @@ body { float: left; position: relative; - height: 95px; + height: 50px; } .ribbon .ribbon-section-sep