diff --git a/app/themes/bento/assets/stylesheets/bento/bootstrap_overrides.less b/app/themes/bento/assets/stylesheets/bento/bootstrap_overrides.less index 88014302..7e4a3cd4 100644 --- a/app/themes/bento/assets/stylesheets/bento/bootstrap_overrides.less +++ b/app/themes/bento/assets/stylesheets/bento/bootstrap_overrides.less @@ -1,34 +1,38 @@ // Headings // -------------------------- -h1 { font-size: @baseFontSize * 2; } -h2 { font-size: @baseFontSize * 1.75; } -h3 { font-size: @baseFontSize * 1.50; } -h4 { font-size: @baseFontSize * 1.25; } +h1 { font-size: @font-size-base * 2; } +h2 { font-size: @font-size-base * 1.75; } +h3 { font-size: @font-size-base * 1.50; } +h4 { font-size: @font-size-base * 1.25; } -h1 small { font-size: @baseFontSize * 1.50; } -h2 small { font-size: @baseFontSize * 1.20; } +h1 small { font-size: @font-size-base * 1.50; } +h2 small { font-size: @font-size-base * 1.20; } // Page header // ------------------------- .page-header { - padding-bottom: (@baseLineHeight / 2) - 1; - margin: @baseLineHeight 0 (@baseLineHeight * 1.5); - border-bottom: 1px solid @grayLighter; + padding-bottom: (@line-height-base / 2) - 1; + margin: @line-height-base 0 (@line-height-base * 1.5); + border-bottom: 1px solid @gray-lighter; } +.navbar.navbar-fluid-top{ + min-height: 32px; + max-height: 100%; +} // openSUSE top bar // ------------------------- .navbar-fixed-top, .navbar-static-top, .navbar-fluid-top { margin-bottom: 10px; - .navbar-inner { + .container-fluid { min-height: 30px; - background-color: @grayDark; - #gradient > .vertical(@grayDark, @grayDarkest); - .border-radius(0); + background-color: @gray-dark; + #gradient > .vertical(@gray-dark, @gray-darkest); + border-radius:0; box-shadow: none; li { @@ -45,7 +49,7 @@ h2 small { font-size: @baseFontSize * 1.20; } } } - .brand { + .navbar-brand { padding-top: 1px; padding-bottom: 0px; } @@ -55,11 +59,11 @@ h2 small { font-size: @baseFontSize * 1.20; } // Boxes // -------------------------- #main, .well { - background-color: @wellBackground; + background-color: @well-bg; padding: @bentoWellPadding; padding-top: 0px; border: 1px solid @bentoWellBorderColor; - .border-radius(@baseBorderRadius); + border-radius:@border-radius-base; box-shadow: 0px 1px 3px @bentoShadowColor; a { @@ -70,7 +74,7 @@ h2 small { font-size: @baseFontSize * 1.20; } } // Avoid overwriting good bootstrap defaults - &.btn { color: @grayDark; } + &.btn { color: @gray-dark; } &.btn-primary, &.btn-warning, &.btn-danger, &.btn-success, &.btn-info, &.btn-inverse { color: @white @@ -83,10 +87,10 @@ h2 small { font-size: @baseFontSize * 1.20; } .nav-header { background:@white image-url('bento/gradient-light.png') repeat-x scroll 0 -25px; - color: @grayDarker; + color: @gray-darker; margin-bottom: 5px; text-transform: none; - font-size: @baseFontSize; + font-size: @font-size-base; font-weight: bold; margin: 1px -14px 5px; border-bottom: 1px solid @bentoWellBorderColor; @@ -94,6 +98,12 @@ h2 small { font-size: @baseFontSize * 1.20; } } } +@media (min-width: @screen-md-min) { + #main { + width: 74%; + } +} + // Forms // -------------------------------------- select, @@ -113,7 +123,7 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - color: @grayDarker; + color: @gray-darker; } // Breadcrumbs @@ -124,16 +134,16 @@ input[type="color"], padding: 0px 0px 0px 20px; li { - color: @grayDarker; + color: @gray-darker; text-shadow: none; &.active { - color: @grayDarker; + color: @gray-darker; } a { - color: @grayDark; + color: @gray-dark; } } } diff --git a/app/themes/bento/assets/stylesheets/bento/bootstrap_variables.less b/app/themes/bento/assets/stylesheets/bento/bootstrap_variables.less index c2ef2614..d68c055a 100644 --- a/app/themes/bento/assets/stylesheets/bento/bootstrap_variables.less +++ b/app/themes/bento/assets/stylesheets/bento/bootstrap_variables.less @@ -11,13 +11,13 @@ // There were 18 tones of grey (20 including pure black and white) in the original bento theme // Let's group them this way: @black: #000; -@grayDarkest: #222; // Also #111 in original bento -@grayDarker: #333; // Also #2e2e2e and #444 in original bento -@grayDark: #555; // Also #4e4e4e and #666 in original bento +@gray-darkest: #222; // Also #111 in original bento +@gray-darker: #333; // Also #2e2e2e and #444 in original bento +@gray-dark: #555; // Also #4e4e4e and #666 in original bento @gray: #999; // Also #888 and #aaa in original bento -@grayLight: #bbb; // Also #ccc in original bento -@grayLighter: #e6e6e6; // Also #ddd and #eee in original bento -@grayLightest: #f6f6f6; // Also #fefefe in original bento +@gray-light: #bbb; // Also #ccc in original bento +@gray-lighter: #e6e6e6; // Also #ddd and #eee in original bento +@gray-lightest: #f6f6f6; // Also #fefefe in original bento @white: #fff; // Other colors @@ -30,55 +30,57 @@ // Typography // ------------------------- -@sansFontFamily: "Lucida Grande", Arial, "DejaVu Sans", Verdana, sans-serif; +@font-family-sans-serif: "Lucida Grande", Arial, "DejaVu Sans", Verdana, sans-serif; // @serifFontFamily: ; // @monoFontFamily: ; -@baseFontSize: 13px; -@baseFontFamily: @sansFontFamily; -@baseLineHeight: 16px; -@altFontFamily: @sansFontFamily; +@font-size-base: 13px; +@font-family-base: @font-family-sans-serif; -@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: bold; // instead of browser default, bold -@headingsColor: @bentoGreen; // empty to use BS default, @textColor +@headings-font-family: inherit; // empty to use BS default, @baseFontFamily +@headings-font-weight: bold; // instead of browser default, bold +@headings-color: @bentoGreen; // empty to use BS default, @textColor // Scaffolding // ------------------------- -@bodyBackground: @grayLightest; -@textColor: @grayDarker; +@body-bg: @gray-lightest; +@text-color: @gray-darker; // Links // ------------------------- -@linkColor: @bentoGreen; -@linkColorHover: @blue; +@link-color: @bentoGreen; +@link-hover-color: @blue; +//Buttons +// ------------------------- +@btn-primary-bg: @green; // Wells // ------------------------- -@wellBackground: @white; +@well-bg: @white; @bentoWellPadding: 10px; -@bentoWellBorderColor: darken(@grayLighter, 10%); +@bentoWellBorderColor: darken(@gray-lighter, 10%); // Component sizing // ------------------------- -@baseBorderRadius: 5px; -@borderRadiusLarge: 7px; +@border-radius-base: 5px; +@border-radius-large: 7px; // Navbar // ------------------------- @navbarCollapseWidth: 600px; +@navbar-height: 32px; // Dropdowns // ------------------------- -@dropdownLinkBackgroundActive: @grayLighter; +@dropdown-link-active-bg: @gray-lighter; // Misc // ------------------------- -@bentoShadowColor: @grayLight; +@bentoShadowColor: @gray-light; diff --git a/app/themes/bento/assets/stylesheets/bento/footer.less b/app/themes/bento/assets/stylesheets/bento/footer.less index b889fdcc..ba317b9e 100644 --- a/app/themes/bento/assets/stylesheets/bento/footer.less +++ b/app/themes/bento/assets/stylesheets/bento/footer.less @@ -7,6 +7,6 @@ border-top: 1px dotted @gray; text-align: center; color: @gray; - font-size: @fontSizeMini; + font-size: @font-size-small; } } diff --git a/app/themes/bento/assets/stylesheets/bento/login-form.less b/app/themes/bento/assets/stylesheets/bento/login-form.less index 35cb0fd5..072561cf 100644 --- a/app/themes/bento/assets/stylesheets/bento/login-form.less +++ b/app/themes/bento/assets/stylesheets/bento/login-form.less @@ -6,12 +6,12 @@ top:31px; right:0; padding-bottom:10px; - color:@grayLightest; - background:@grayDarker image-url('bento/gradient-darker.png') repeat-x scroll bottom left; - .border-radius(@baseBorderRadius); + color:@gray-lightest; + background:@gray-darker image-url('bento/gradient-darker.png') repeat-x scroll bottom left; + border-radius:@border-radius-base; border-width:1px; border-style:solid; - border-color:transparent @grayDarker @grayDarkest; + border-color:transparent @gray-darker @gray-darkest; opacity:0.95; -moz-opacity:0.95; -webkit-box-shadow:0 1px 3px @gray; @@ -21,7 +21,7 @@ input { width:208px; font-size:1.5em; - border:3px solid @grayDarkest; + border:3px solid @gray-darkest; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; @@ -30,21 +30,21 @@ &:focus { color: @blue; border-color: @blue; - -webkit-box-shadow:0 1px 3px @grayDarkest; - -moz-box-shadow:0 1px 3px @grayDarkest; - box-shadow:0 1px 3px @grayDarkest; + -webkit-box-shadow:0 1px 3px @gray-darkest; + -moz-box-shadow:0 1px 3px @gray-darkest; + box-shadow:0 1px 3px @gray-darkest; } &[type="submit"] { - border-color:@grayLightest; + border-color:@gray-lightest; -webkit-box-shadow:0 0px 2px #000; - -moz-box-shadow:0 1px 1px @grayDarkest; - box-shadow:0 1px 1px @grayDarkest; - color:@grayLighter; + -moz-box-shadow:0 1px 1px @gray-darkest; + box-shadow:0 1px 1px @gray-darkest; + color:@gray-lighter; cursor:pointer; background: @bentoGreenLight image-url('bento/gradient-dark-nav.png') repeat-x scroll 0 -15px; font-weight:bold; - text-shadow:0 0px 3px @grayDarker; + text-shadow:0 0px 3px @gray-darker; width:220px; &:hover { border-color: @blue; } @@ -73,7 +73,7 @@ a { text-decoration:none; - color:@grayLighter; + color:@gray-lighter; font-weight:bold; &:hover { text-decoration:underline; } diff --git a/app/themes/bento/assets/stylesheets/bootstrap.css.less b/app/themes/bento/assets/stylesheets/bootstrap.css.less index 163b731c..426b0ad3 100644 --- a/app/themes/bento/assets/stylesheets/bootstrap.css.less +++ b/app/themes/bento/assets/stylesheets/bootstrap.css.less @@ -4,11 +4,11 @@ // Footer overrides for bento compatibility #full-page-wrap { - margin: 0 auto -(@baseFontSize*1.5+15px); + margin: 0 auto -(@font-size-base*1.5+15px); } #push-footer, #footer { - height: @baseFontSize*1.5+15px; + height: @font-size-base*1.5+15px; } #footer { - background-color: @bodyBackground; + background-color: @body-bg; } diff --git a/app/themes/bento/views/layouts/_navbar_top.html.haml b/app/themes/bento/views/layouts/_navbar_top.html.haml index ff278f77..01ff405d 100644 --- a/app/themes/bento/views/layouts/_navbar_top.html.haml +++ b/app/themes/bento/views/layouts/_navbar_top.html.haml @@ -5,8 +5,8 @@ %span.icon-bar %span.icon-bar =link_to image_tag("bento/header-logo.png"), root_path, :class => "brand navbar-brand" -.container.nav-collapse - %ul.nav#global-navigation +#bs-example-navbar-collapse-1.collapse.navbar-collapse + %ul.nav.navbar-nav#global-navigation %li#item-downloads= link_to t(:downloads, :scope => :bento), "http://en.opensuse.org/openSUSE:Browse#Downloads" %li#item-support= link_to t(:support, :scope => :bento), "http://en.opensuse.org/openSUSE:Browse#Support" %li#item-community= link_to t(:community, :scope => :bento), "http://en.opensuse.org/openSUSE:Browse#Community" diff --git a/app/themes/bento/views/layouts/_subheader.html.haml b/app/themes/bento/views/layouts/_subheader.html.haml index 237ddbac..1f6cdee6 100644 --- a/app/themes/bento/views/layouts/_subheader.html.haml +++ b/app/themes/bento/views/layouts/_subheader.html.haml @@ -1,7 +1,7 @@ -.row-fluid#subheader - .span6 +.row#subheader + .col-md-6 = breadcrumbs - .span6.text-right + .col-md-6.text-right - if user_signed_in? = link_to t(:signed_in_as, :nickname => current_user.nickname), profile_path | diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 4d9da651..b3ff9a93 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -13,7 +13,7 @@ %body #full-page-wrap - %nav.navbar.navbar-default.nav-main + %nav.navbar.navbar-default.nav-main.navbar-fluid-top .container-fluid = render "layouts/navbar_top"