diff options
Diffstat (limited to 'app/assets/stylesheets/generic')
| -rw-r--r-- | app/assets/stylesheets/generic/common.scss | 7 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/header.scss | 256 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/lists.scss | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/mobile.scss | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/sidebar.scss | 34 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/typography.scss | 7 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/zen.scss | 10 |
7 files changed, 161 insertions, 156 deletions
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss index 1e569978cc8..1419a9cded9 100644 --- a/app/assets/stylesheets/generic/common.scss +++ b/app/assets/stylesheets/generic/common.scss @@ -307,7 +307,7 @@ table { } .btn-sign-in { - margin-top: 5px; + margin-top: 7px; text-shadow: none; } @@ -342,9 +342,8 @@ table { } #nprogress .spinner { - top: auto !important; - bottom: 20px !important; - left: 20px !important; + top: 15px !important; + right: 10px !important; } .header-with-avatar { diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 362b217a444..71afccba001 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -2,7 +2,14 @@ * Application Header * */ +$header-height: 46px; + header { + &.navbar-empty { + background: #FFF; + border-bottom: 1px solid #EEE; + } + &.navbar-gitlab { z-index: 100; margin-bottom: 0; @@ -11,161 +18,104 @@ header { width: 100%; .container { + background: #FFF; width: 100% !important; padding: 0; - - background: #FFF; - border-bottom: 1px solid #EEE; filter: none; - .title { - position: relative; - float: left; - margin: 0; - margin-left: 25px; - font-size: 18px; - line-height: 44px; - font-weight: bold; - color: #444; - - @include str-truncated(37%); - - a { - color: #444; - &:hover { - text-decoration: underline; - } - } - } - - .app_logo { - border-bottom: 1px solid transparent; - margin-bottom: -1px; - - a { - padding: 5px 8px; - - img { - float: left; - } - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 20px; - font-size: 18px; - line-height: 34px; - font-weight: normal; - } - } - } - .nav > li > a { - color: #666; + color: #888; font-size: 14px; - line-height: 32px; - padding: 6px 10px; + line-height: 19px; + padding: 0; + background-color: #f5f5f5; + margin: 9px 0; + margin-left: 10px; + border-radius: 40px; + height: 26px; + width: 26px; + line-height: 26px; + text-align: center; &:hover, &:focus, &:active { - background: none; + background-color: #EEE; } } - /** NAV block with links and profile **/ - .nav { - float: right; - margin-right: 0; - } - .navbar-toggle { color: #666; margin: 0; border-radius: 0; + position: absolute; + right: 2px; &:hover { background-color: #EEE; } } } - - .turbolink-spinner { - font-size: 20px; - margin-right: 10px; - } - - @media (max-width: $screen-xs-max) { - border-width: 0; - font-size: 18px; - - .title { - @include str-truncated(70%); - } - - .navbar-collapse { - margin-top: 47px; - } - - .navbar-nav { - margin: 5px 0; - - .visible-xs, .visable-sm { - display: table-cell !important; - } - } - - li { - display: table-cell; - width: 1%; - - a { - text-align: center; - font-size: 18px !important; - } - } - } } - /** - * - * Logo holder - * - */ - .app_logo { + .header-logo { + border-bottom: 1px solid transparent; float: left; - margin-right: 9px; + height: $header-height; + width: $sidebar_width; a { float: left; - height: 46px; + height: $header-height; width: 100%; + padding: 5px 8px; + + h3 { + width: 158px; + float: left; + margin: 0; + margin-left: 20px; + font-size: 18px; + line-height: 34px; + font-weight: normal; + } img { width: 36px; height: 36px; + float: left; } } + &:hover { background-color: #EEE; } } - .profile-pic { - padding: 0px !important; - width: 46px; - height: 46px; - margin-left: 5px; - img { - width: 46px; - height: 46px; + .header-content { + border-bottom: 1px solid #EEE; + padding-right: 35px; + height: $header-height; + + .title { + position: relative; + float: left; + margin: 0; + margin-left: 35px; + font-size: 18px; + line-height: 44px; + font-weight: bold; + color: #444; + + @include str-truncated(37%); + + a { + color: #444; + &:hover { + text-decoration: underline; + } + } } } - /** - * - * Search box - * - */ .search { margin-right: 10px; margin-left: 10px; @@ -177,6 +127,7 @@ header { } .search-input { + width: 220px; background-image: image-url("icon-search.png"); background-repeat: no-repeat; background-position: 10px; @@ -184,57 +135,74 @@ header { padding: 4px 6px; padding-left: 25px; font-size: 13px; - @include border-radius(3px); - border: 1px solid #DDD; - box-shadow: none; - @include transition(all 0.15s ease-in 0s); - background-color: #f9f9f9; + background-color: #f5f5f5; + border-color: #f5f5f5; + + &:focus { + @include box-shadow(none); + outline: none; + border-color: #DDD; + background-color: #FFF; + } } } } -.search .search-input { - width: 300px; - &:focus { - width: 330px; - background-color: #FFF; - } -} +@mixin collapsed-header { + .header-logo { + width: $sidebar_collapsed_width; -@media (max-width: 1200px) { - .search .search-input { - width: 200px; - &:focus { - width: 230px; + h3 { + display: none; } } -} -@media (max-width: $screen-xs-max) { - #nprogress .spinner { - right: 35px !important; + .header-content { + .title { + margin-left: 30px; + } } } @media (max-width: $screen-md-max) { - .header-collapsed, .header-expanded { - width: 52px; + header .container .title { + max-width: 43%; + } - h3 { - display: none; - } + .header-collapsed, .header-expanded { + @include collapsed-header; } } @media(min-width: $screen-md-max) { .header-collapsed { - width: 52px; - - h3 { - display: none; - } + @include collapsed-header; } .header-expanded { } } + +@media (max-width: $screen-xs-max) { + header .container { + font-size: 18px; + + .title { + max-width: 70%; + } + + .navbar-nav { + margin: 0px; + float: none !important; + + .visible-xs, .visable-sm { + display: table-cell !important; + } + } + + li { + display: table-cell; + width: 1%; + } + } +} diff --git a/app/assets/stylesheets/generic/lists.scss b/app/assets/stylesheets/generic/lists.scss index 08bf6e943d2..c502d953c75 100644 --- a/app/assets/stylesheets/generic/lists.scss +++ b/app/assets/stylesheets/generic/lists.scss @@ -39,7 +39,6 @@ &:hover { background: $hover; - border-bottom: 1px solid darken($hover, 10%); } &:last-child { diff --git a/app/assets/stylesheets/generic/mobile.scss b/app/assets/stylesheets/generic/mobile.scss index b7f6fac5223..74108c1f086 100644 --- a/app/assets/stylesheets/generic/mobile.scss +++ b/app/assets/stylesheets/generic/mobile.scss @@ -57,7 +57,7 @@ } .container .title { - margin-left: 6px !important; + margin-left: 15px !important; max-width: 70% !important; } } diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 754c5b53020..69bddc6f59e 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -1,6 +1,4 @@ .page-with-sidebar { - background: $background-color; - .sidebar-wrapper { position: fixed; top: 0; @@ -102,13 +100,13 @@ padding-left: 50px; .sidebar-wrapper { - width: 52px; + width: $sidebar_collapsed_width; .nav-sidebar { margin-top: 29px; position: fixed; top: 45px; - width: 52px; + width: $sidebar_collapsed_width; li a { padding-left: 18px; @@ -125,7 +123,21 @@ .collapse-nav a { left: 0px; - width: 52px; + width: $sidebar_collapsed_width; + } + + .sidebar-user { + .username { + display: none; + } + + .avatar { + margin-bottom: 10px; + } + + .logout-holder { + text-align: center; + } } } } @@ -170,3 +182,15 @@ @include expanded-sidebar; } } + +.sidebar-user { + position: absolute; + bottom: 0; + width: 100%; + padding: 10px; + color: #fff; + + .avatar { + margin-top: 5px; + } +} diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss index e5590897947..66767cb13cb 100644 --- a/app/assets/stylesheets/generic/typography.scss +++ b/app/assets/stylesheets/generic/typography.scss @@ -23,6 +23,13 @@ pre { font-family: $monospace_font; } +code { + &.key-fingerprint { + background: $body-bg; + color: $text-color; + } +} + /** * Wiki typography * diff --git a/app/assets/stylesheets/generic/zen.scss b/app/assets/stylesheets/generic/zen.scss index 26afc21a6ab..bcb8bbe3134 100644 --- a/app/assets/stylesheets/generic/zen.scss +++ b/app/assets/stylesheets/generic/zen.scss @@ -1,7 +1,7 @@ .zennable { position: relative; - input { + .zen-toggle-comment { display: none; } @@ -26,10 +26,12 @@ } } + // Hide the Enter link when we're in Zen mode input:checked ~ .zen-backdrop .zen-enter-link { display: none; } + // Show the Leave link when we're in Zen mode input:checked ~ .zen-backdrop .zen-leave-link { display: block; position: absolute; @@ -62,6 +64,9 @@ } } + // Make the placeholder text in the standard textarea the same color as the + // background, effectively hiding it + .zen-backdrop textarea::-webkit-input-placeholder { color: white; } @@ -78,6 +83,9 @@ color: white; } + // Make the color of the placeholder text in the Zenned-out textarea darker, + // so it becomes visible + input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder { color: #999; } |