diff options
Diffstat (limited to 'app/assets')
62 files changed, 839 insertions, 526 deletions
diff --git a/app/assets/fonts/OFL.txt b/app/assets/fonts/OFL.txt new file mode 100755 index 00000000000..a9b845ed1d4 --- /dev/null +++ b/app/assets/fonts/OFL.txt @@ -0,0 +1,92 @@ +Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/app/assets/fonts/SourceSansPro-Black.ttf b/app/assets/fonts/SourceSansPro-Black.ttf Binary files differnew file mode 100755 index 00000000000..cb89a2d171e --- /dev/null +++ b/app/assets/fonts/SourceSansPro-Black.ttf diff --git a/app/assets/fonts/SourceSansPro-BlackItalic.ttf b/app/assets/fonts/SourceSansPro-BlackItalic.ttf Binary files differnew file mode 100755 index 00000000000..c719243c0d6 --- /dev/null +++ b/app/assets/fonts/SourceSansPro-BlackItalic.ttf diff --git a/app/assets/fonts/SourceSansPro-Bold.ttf b/app/assets/fonts/SourceSansPro-Bold.ttf Binary files differnew file mode 100755 index 00000000000..50d81bdad58 --- /dev/null +++ b/app/assets/fonts/SourceSansPro-Bold.ttf diff --git a/app/assets/fonts/SourceSansPro-BoldItalic.ttf b/app/assets/fonts/SourceSansPro-BoldItalic.ttf Binary files differnew file mode 100755 index 00000000000..d20dd0c5eca --- /dev/null +++ b/app/assets/fonts/SourceSansPro-BoldItalic.ttf diff --git a/app/assets/fonts/SourceSansPro-ExtraLight.ttf b/app/assets/fonts/SourceSansPro-ExtraLight.ttf Binary files differnew file mode 100755 index 00000000000..bb4176c6fff --- /dev/null +++ b/app/assets/fonts/SourceSansPro-ExtraLight.ttf diff --git a/app/assets/fonts/SourceSansPro-ExtraLightItalic.ttf b/app/assets/fonts/SourceSansPro-ExtraLightItalic.ttf Binary files differnew file mode 100755 index 00000000000..2c34f3b8dc4 --- /dev/null +++ b/app/assets/fonts/SourceSansPro-ExtraLightItalic.ttf diff --git a/app/assets/fonts/SourceSansPro-Italic.ttf b/app/assets/fonts/SourceSansPro-Italic.ttf Binary files differnew file mode 100755 index 00000000000..e5a1a86e631 --- /dev/null +++ b/app/assets/fonts/SourceSansPro-Italic.ttf diff --git a/app/assets/fonts/SourceSansPro-Light.ttf b/app/assets/fonts/SourceSansPro-Light.ttf Binary files differnew file mode 100755 index 00000000000..5f64679f6b9 --- /dev/null +++ b/app/assets/fonts/SourceSansPro-Light.ttf diff --git a/app/assets/fonts/SourceSansPro-LightItalic.ttf b/app/assets/fonts/SourceSansPro-LightItalic.ttf Binary files differnew file mode 100755 index 00000000000..88a6778d24f --- /dev/null +++ b/app/assets/fonts/SourceSansPro-LightItalic.ttf diff --git a/app/assets/fonts/SourceSansPro-Regular.ttf b/app/assets/fonts/SourceSansPro-Regular.ttf Binary files differnew file mode 100755 index 00000000000..91e9ea5757f --- /dev/null +++ b/app/assets/fonts/SourceSansPro-Regular.ttf diff --git a/app/assets/fonts/SourceSansPro-Semibold.ttf b/app/assets/fonts/SourceSansPro-Semibold.ttf Binary files differnew file mode 100755 index 00000000000..5020594826b --- /dev/null +++ b/app/assets/fonts/SourceSansPro-Semibold.ttf diff --git a/app/assets/fonts/SourceSansPro-SemiboldItalic.ttf b/app/assets/fonts/SourceSansPro-SemiboldItalic.ttf Binary files differnew file mode 100755 index 00000000000..2c5ad3008c3 --- /dev/null +++ b/app/assets/fonts/SourceSansPro-SemiboldItalic.ttf diff --git a/app/assets/javascripts/activities.js.coffee b/app/assets/javascripts/activities.js.coffee index 777c62dc1b7..63803747413 100644 --- a/app/assets/javascripts/activities.js.coffee +++ b/app/assets/javascripts/activities.js.coffee @@ -1,7 +1,7 @@ class @Activities constructor: -> Pager.init 20, true - $(".event_filter_link").bind "click", (event) => + $(".event-filter .btn").bind "click", (event) => event.preventDefault() @toggleFilter($(event.currentTarget)) @reloadActivities() @@ -12,7 +12,7 @@ class @Activities toggleFilter: (sender) -> - sender.parent().toggleClass "active" + sender.toggleClass "active" event_filters = $.cookie("event_filter") filter = sender.attr("id").split("_")[0] if event_filters diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index c263912b7ea..8e987ac4e83 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -94,16 +94,18 @@ window.unbindEvents = -> $(document).off('scroll') window.shiftWindow = -> - scrollBy 0, -50 + scrollBy 0, -100 document.addEventListener("page:fetch", unbindEvents) -# Scroll the window to avoid the topnav bar -# https://github.com/twitter/bootstrap/issues/1768 -if location.hash - setTimeout shiftWindow, 1 window.addEventListener "hashchange", shiftWindow +window.onload = -> + # Scroll the window to avoid the topnav bar + # https://github.com/twitter/bootstrap/issues/1768 + if location.hash + setTimeout shiftWindow, 100 + $ -> $(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF") diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee index 539041c2862..5bf0b302179 100644 --- a/app/assets/javascripts/dispatcher.js.coffee +++ b/app/assets/javascripts/dispatcher.js.coffee @@ -55,7 +55,6 @@ class Dispatcher new Activities() when 'dashboard:projects:starred' new Activities() - new ProjectsList() when 'projects:commit:show' new Commit() new Diff() @@ -70,7 +69,6 @@ class Dispatcher when 'groups:show' new Activities() shortcut_handler = new ShortcutsNavigation() - new ProjectsList() when 'groups:group_members:index' new GroupMembers() new UsersSelect() @@ -96,8 +94,6 @@ class Dispatcher when 'users:show' new User() new Activities() - when 'admin:users:show' - new ProjectsList() switch path.first() when 'admin' diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index 0021d17d85e..b7f2c63c5a7 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -123,6 +123,7 @@ class @Notes if @isNewNote(note) @note_ids.push(note.id) $('ul.main-notes-list').append(note.html) + $('.js-syntax-highlight').syntaxHighlight() @initTaskList() ### diff --git a/app/assets/javascripts/syntax_highlight.coffee b/app/assets/javascripts/syntax_highlight.coffee new file mode 100644 index 00000000000..71295cd4b08 --- /dev/null +++ b/app/assets/javascripts/syntax_highlight.coffee @@ -0,0 +1,12 @@ +# Applies a syntax highlighting color scheme CSS class to any element with the +# `js-syntax-highlight` class +# +# ### Example Markup +# +# <div class="js-syntax-highlight"></div> +# +$.fn.syntaxHighlight = -> + $(this).addClass(gon.user_color_scheme) + +$(document).on 'ready page:load', -> + $('.js-syntax-highlight').syntaxHighlight() diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee index 8a0564a9098..a1462cf3cae 100644 --- a/app/assets/javascripts/zen_mode.js.coffee +++ b/app/assets/javascripts/zen_mode.js.coffee @@ -38,6 +38,8 @@ class @ZenMode @active_checkbox = $(checkbox) @active_checkbox.prop('checked', true) @active_zen_area = @active_checkbox.parent().find('textarea') + # Prevent a user-resized textarea from persisting to fullscreen + @active_zen_area.removeAttr('style') @active_zen_area.focus() exitZenMode: => diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 1a5f11df7d1..46f7feddf8d 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -12,6 +12,7 @@ */ +@import "base/fonts"; @import "base/variables"; @import "base/mixins"; @import "base/layout"; diff --git a/app/assets/stylesheets/base/fonts.scss b/app/assets/stylesheets/base/fonts.scss new file mode 100644 index 00000000000..e214567eca1 --- /dev/null +++ b/app/assets/stylesheets/base/fonts.scss @@ -0,0 +1,25 @@ +/* latin-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 300; + src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), font-url('SourceSansPro-Light.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: local('Source Sans Pro'), local('SourceSansPro-Regular'), font-url('SourceSansPro-Regular.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 600; + src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), font-url('SourceSansPro-Semibold.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 700; + src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), font-url('SourceSansPro-Bold.ttf'); +} diff --git a/app/assets/stylesheets/base/gl_bootstrap.scss b/app/assets/stylesheets/base/gl_bootstrap.scss index 21acbfa5e5a..ae72c5b8d97 100644 --- a/app/assets/stylesheets/base/gl_bootstrap.scss +++ b/app/assets/stylesheets/base/gl_bootstrap.scss @@ -85,14 +85,14 @@ // Labels .label { padding: 2px 4px; - font-size: 12px; + font-size: 13px; font-style: normal; font-weight: normal; display: inline-block; &.label-gray { - background-color: #eee; - color: #999; + background-color: #f8fafc; + color: $gl-gray; text-shadow: none; } diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss index 56f4c794e1b..d18b48eaca9 100644 --- a/app/assets/stylesheets/base/gl_variables.scss +++ b/app/assets/stylesheets/base/gl_variables.scss @@ -22,6 +22,10 @@ $brand-info: $gl-info; $brand-warning: $gl-warning; $brand-danger: $gl-danger; +$border-radius-base: 3px !default; +$border-radius-large: 5px !default; +$border-radius-small: 2px !default; + //== Scaffolding // @@ -42,17 +46,18 @@ $font-size-base: $gl-font-size; // //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). -$padding-base-vertical: 6px; -$padding-base-horizontal: 14px; - +$padding-base-vertical: 9px; +$padding-base-horizontal: $gl-padding; +$component-active-color: #fff; +$component-active-bg: $brand-info; //== Forms // //## $input-color: $text-color; -$input-border: #DDD; -$input-border-focus: $brand-info; +$input-border: #e7e9ed; +$input-border-focus: #7F8FA4; $legend-color: $text-color; @@ -111,8 +116,8 @@ $alert-border-radius: 0; $panel-border-radius: 0; $panel-default-text: $text-color; -$panel-default-border: $border-color; -$panel-default-heading-bg: $background-color; +$panel-default-border: #E7E9ED; +$panel-default-heading-bg: #F8FAFC; //== Wells @@ -131,3 +136,22 @@ $code-bg: #f9f2f4; $kbd-color: #fff; $kbd-bg: #333; + +//== Buttons +// +//## +$btn-default-color: $gl-text-color; +$btn-default-bg: #fff; +$btn-default-border: #e7e9ed; + +//== Nav +// +//## +$nav-link-padding: 13px $gl-padding; + +//== Code +// +//## +$pre-bg: #f8fafc !default; +$pre-color: $gl-gray !default; +$pre-border-color: #e7e9ed; diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss index 734b95e26c0..b91c15d8910 100644 --- a/app/assets/stylesheets/base/layout.scss +++ b/app/assets/stylesheets/base/layout.scss @@ -21,7 +21,6 @@ html { margin-top: 30px; } - .container-limited { max-width: $fixed-layout-width; } diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss index 7beef1845ef..0f661d6b1b6 100644 --- a/app/assets/stylesheets/base/mixins.scss +++ b/app/assets/stylesheets/base/mixins.scss @@ -55,8 +55,11 @@ } @mixin md-typography { - font-size: 15px; - line-height: 1.5; + color: #444; + + a { + color: #3084bb; + } img { max-width: 100%; @@ -157,3 +160,94 @@ white-space: nowrap; max-width: $max_width; } + +/* + * Base mixin for lists in GitLab + */ +@mixin basic-list { + margin: 5px 0px; + padding: 0px; + list-style: none; + + > li { + padding: 10px 0; + border-bottom: 1px solid #EEE; + overflow: hidden; + display: block; + margin: 0px; + + &:last-child { + border-bottom: none; + } + + &.active { + background: #f9f9f9; + a { + font-weight: bold; + } + } + + &.hide { + display: none; + } + + &.light { + a { + color: $gl-gray; + } + } + } +} + +@mixin input-big { + height: 36px; + padding: 5px 10px; + font-size: 16px; + line-height: 24px; + color: #7f8fa4; + background-color: #fff; + border-color: #e7e9ed; +} + +@mixin btn-big { + height: 36px; + padding: 5px 10px; + font-size: 16px; + line-height: 24px; +} + +@mixin nav-menu { + padding: 0; + margin: 0; + list-style: none; + margin-top: 5px; + height: 56px; + + li { + display: inline-block; + + a { + padding: 14px; + font-size: 17px; + line-height: 28px; + color: #7f8fa4; + border-bottom: 2px solid transparent; + + &:hover, &:active, &:focus { + text-decoration: none; + } + } + + &.active a { + color: #4c4e54; + border-bottom: 2px solid #1cacfc; + } + + .badge { + font-weight: normal; + background-color: #fff; + background-color: #eee; + color: #78a; + } + } +} diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index 26d0a1e5363..21462b31127 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -1,27 +1,30 @@ -$style_color: #474D57; $hover: #FFFAF1; -$gl-text-color: #222222; -$gl-link-color: #446e9b; +$gl-text-color: #54565b; +$gl-header-color: #4c4e54; +$gl-link-color: #333c48; $nprogress-color: #c0392b; -$gl-font-size: 14px; +$gl-font-size: 15px; $list-font-size: 15px; -$sidebar_collapsed_width: 52px; +$sidebar_collapsed_width: 62px; $sidebar_width: 230px; $avatar_radius: 50%; $code_font_size: 13px; $code_line_height: 1.5; -$border-color: #E5E5E5; -$background-color: #f5f5f5; -$header-height: 50px; +$border-color: #E7E9ED; +$background-color: #F8FAFC; +$header-height: 58px; $fixed-layout-width: 1200px; +$gl-gray: #7f8fa4; +$gl-padding: 16px; +$gl-avatar-size: 46px; /* * State colors: */ $gl-primary: #446e9b; -$gl-success: #019875; -$gl-info: #029ACF; +$gl-success: #44c679; +$gl-info: #00aaff; $gl-warning: #EB9532; $gl-danger: #d9534f; @@ -35,4 +38,4 @@ $deleted: #f77; * Fonts */ $monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; -$regular_font: "Helvetica Neue", Helvetica, Arial, sans-serif; +$regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/app/assets/stylesheets/generic/avatar.scss b/app/assets/stylesheets/generic/avatar.scss index 8595887c3b9..221cb6a04a5 100644 --- a/app/assets/stylesheets/generic/avatar.scss +++ b/app/assets/stylesheets/generic/avatar.scss @@ -23,8 +23,12 @@ &.s24 { width: 24px; height: 24px; margin-right: 8px; } &.s26 { width: 26px; height: 26px; margin-right: 8px; } &.s32 { width: 32px; height: 32px; margin-right: 10px; } + &.s36 { width: 36px; height: 36px; margin-right: 10px; } + &.s46 { width: 46px; height: 46px; margin-right: 15px; } + &.s48 { width: 48px; height: 48px; margin-right: 10px; } &.s60 { width: 60px; height: 60px; margin-right: 12px; } &.s90 { width: 90px; height: 90px; margin-right: 15px; } + &.s140 { width: 140px; height: 140px; margin-right: 20px; } &.s160 { width: 160px; height: 160px; margin-right: 20px; } } @@ -38,5 +42,6 @@ &.s32 { font-size: 22px; line-height: 32px; } &.s60 { font-size: 32px; line-height: 60px; } &.s90 { font-size: 36px; line-height: 90px; } - &.s160 { font-size: 96px; line-height: 1.33; } + &.s140 { font-size: 72px; line-height: 140px; } + &.s160 { font-size: 96px; line-height: 160px; } } diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss index 3536a68f416..27a4c4db8c8 100644 --- a/app/assets/stylesheets/generic/blocks.scss +++ b/app/assets/stylesheets/generic/blocks.scss @@ -1,19 +1,52 @@ .light-well { - background: #f9f9f9; + background-color: #f8fafc; padding: 15px; } .centered-light-block { text-align: center; - color: #888; + color: $gl-gray; margin: 20px; } .nothing-here-block { text-align: center; padding: 20px; - color: #666; + color: $gl-gray; font-weight: normal; font-size: 16px; line-height: 36px; } + +.gray-content-block { + margin: -$gl-padding; + background-color: #f8fafc; + padding: $gl-padding; + margin-bottom: 0px; + border-top: 1px solid #e7e9ed; + border-bottom: 1px solid #e7e9ed; + color: $gl-gray; + + &.middle-block { + margin-top: 0; + margin-bottom: 0; + } + + &.second-block { + margin-top: -1px; + margin-bottom: 0; + } + + &.footer-block { + margin-top: 0; + margin-bottom: -$gl-padding; + } + + .title { + color: $gl-text-color; + } + + .oneline { + line-height: 44px; + } +} diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss index cd6bf64c0ae..e8237509092 100644 --- a/app/assets/stylesheets/generic/buttons.scss +++ b/app/assets/stylesheets/generic/buttons.scss @@ -72,3 +72,19 @@ } } } + +.btn-group-next { + .btn { + padding: 9px 0px; + font-size: 15px; + color: #7f8fa4; + border-color: #e7e9ed; + width: 140px; + + &.active { + border-color: $gl-info; + background: $gl-info; + color: #fff; + } + } +} diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss index bf5c7a8d75e..5e191d5dd4a 100644 --- a/app/assets/stylesheets/generic/common.scss +++ b/app/assets/stylesheets/generic/common.scss @@ -1,5 +1,5 @@ /** COLORS **/ -.cgray { color: gray } +.cgray { color: $gl-gray; } .clgray { color: #BBB } .cred { color: #D12F19 } .cgreen { color: #4a2 } @@ -7,6 +7,7 @@ /** COMMON CLASSES **/ .prepend-top-10 { margin-top:10px } +.prepend-top-default { margin-top: $gl-padding; } .prepend-top-20 { margin-top:20px } .prepend-left-10 { margin-left:10px } .prepend-left-20 { margin-left:20px } @@ -20,10 +21,10 @@ .underlined-link { text-decoration: underline; } .hint { font-style: italic; color: #999; } -.light { color: #888 } +.light { color: $gl-gray; } .slead { - color: #666; + color: $gl-gray; font-size: 15px; margin-bottom: 12px; font-weight: normal; @@ -74,8 +75,6 @@ pre { color: $gl-link-color; } -.help li { color:$style_color; } - .back-link { font-size: 14px; } @@ -132,10 +131,6 @@ p.time { text-shadow: none; } -.highlight_word { - background: #fafe3d; -} - .thin_area{ height: 150px; } @@ -307,7 +302,7 @@ table { } .btn-sign-in { - margin-top: 7px; + margin-top: 15px; text-shadow: none; } @@ -359,14 +354,14 @@ table { } .description { - font-size: 16px; + font-size: $gl-font-size; color: #666; margin-top: 8px; } } .profiler-results { - top: 50px !important; + top: 73px !important; .profiler-button, .profiler-controls { @@ -375,21 +370,11 @@ table { } .center-top-menu { - border-bottom: 1px solid #EEE; - list-style: none; + @include nav-menu; text-align: center; - padding-bottom: 15px; - margin-bottom: 15px; - - li { - display: inline-block; - - a { - padding: 10px; - } - - &.active a { - color: #666; - } - } + margin-top: 5px; + margin-bottom: $gl-padding; + height: 56px; + margin-top: -$gl-padding; + padding-top: $gl-padding; } diff --git a/app/assets/stylesheets/generic/filters.scss b/app/assets/stylesheets/generic/filters.scss index bd93a79722d..8e6922c9231 100644 --- a/app/assets/stylesheets/generic/filters.scss +++ b/app/assets/stylesheets/generic/filters.scss @@ -2,31 +2,6 @@ margin-right: 15px; } -.issues-state-filters { - li.active a { - border-color: #DDD !important; - - &, &:hover, &:active, &.active { - background: #f5f5f5 !important; - border-bottom: 1px solid #f5f5f5 !important; - } - } -} - -.issues-details-filters { - font-size: 13px; - background: #f5f5f5; - margin: -10px 0; - padding: 10px 15px; - margin-top: -15px; - border-left: 1px solid #DDD; - border-right: 1px solid #DDD; - - .btn { - font-size: 13px; - } -} - @media (min-width: 800px) { .issues-filters, .issues_bulk_update { diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 6a29b32e196..b758a526fbb 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -24,29 +24,28 @@ header { z-index: 100; margin-bottom: 0; min-height: $header-height; + background-color: #fff; border: none; border-bottom: 1px solid #EEE; .container-fluid { - background: #FFF; width: 100% !important; filter: none; + padding: 0; .nav > li > a { - color: #888; - font-size: 14px; + color: #7f8fa4; + font-size: 18px; padding: 0; - background-color: #f5f5f5; margin: ($header-height - 28) / 2 0; margin-left: 10px; - border-radius: 40px; height: 28px; width: 28px; line-height: 28px; text-align: center; &:hover, &:focus, &:active { - background-color: #EEE; + background-color: #FFF; } } @@ -56,6 +55,7 @@ header { border-radius: 0; position: absolute; right: 2px; + top: 15px; &:hover { background-color: #EEE; @@ -70,16 +70,16 @@ header { .title { margin: 0; overflow: hidden; - font-size: 18px; + font-size: 19px; line-height: $header-height; - font-weight: bold; - color: #444; + font-weight: normal; + color: #4c4e54; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; a { - color: #444; + color: #4c4e54; &:hover { text-decoration: underline; } @@ -94,7 +94,7 @@ header { .search { margin-right: 10px; margin-left: 10px; - margin-top: ($header-height - 28) / 2; + margin-top: ($header-height - 36) / 2; form { margin: 0; @@ -105,13 +105,8 @@ header { width: 220px; background-image: image-url("icon-search.png"); background-repeat: no-repeat; - background-position: 10px; - height: inherit; - padding: 4px 6px; - padding-left: 25px; - font-size: 13px; - background-color: #f5f5f5; - border-color: #f5f5f5; + background-position: 195px; + @include input-big; &:focus { @include box-shadow(none); diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss index 869e586839b..b1fb87a6830 100644 --- a/app/assets/stylesheets/generic/issue_box.scss +++ b/app/assets/stylesheets/generic/issue_box.scss @@ -5,10 +5,13 @@ */ .issue-box { + @include border-radius(3px); + display: inline-block; - padding: 4px 13px; + padding: 10px $gl-padding; font-weight: normal; - margin-right: 5px; + margin-right: 10px; + font-size: $gl-font-size; &.issue-box-closed { background-color: $gl-danger; @@ -21,7 +24,7 @@ } &.issue-box-open { - background-color: $gl-success; + background-color: #019875; color: #FFF; } diff --git a/app/assets/stylesheets/generic/lists.scss b/app/assets/stylesheets/generic/lists.scss index c502d953c75..3bfed8de772 100644 --- a/app/assets/stylesheets/generic/lists.scss +++ b/app/assets/stylesheets/generic/lists.scss @@ -49,8 +49,6 @@ } } - .author { color: #999; } - .list-item-name { float: left; position: relative; @@ -71,15 +69,6 @@ font-size: $list-font-size; line-height: 18px; } - - .row_title { - color: $gray-dark; - - &:hover { - color: $text-color; - text-decoration: underline; - } - } } } @@ -93,28 +82,12 @@ ol, ul { /** light list with border-bottom between li **/ ul.bordered-list { - margin: 5px 0px; - padding: 0px; - li { - padding: 5px 0; - border-bottom: 1px solid #EEE; - overflow: hidden; - display: block; - margin: 0px; - &:last-child { border:none } - &.active { - background: #f9f9f9; - a { font-weight: bold; } - } - - &.light { - a { color: #777; } - } - } + @include basic-list; &.top-list { li:first-child { padding-top: 0; + h4, h5 { margin-top: 0; } @@ -125,3 +98,28 @@ ul.bordered-list { li.task-list-item { list-style-type: none; } + +ul.content-list { + @include basic-list; + + margin: 0; + padding: 0; + + > li { + padding: $gl-padding; + border-color: #f1f2f4; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + color: $gl-gray; + + .avatar { + margin-right: 15px; + } + + .controls { + padding-top: 10px; + float: right; + } + } +} + diff --git a/app/assets/stylesheets/generic/markdown_area.scss b/app/assets/stylesheets/generic/markdown_area.scss index a4fc82e90bf..ed0333d2336 100644 --- a/app/assets/stylesheets/generic/markdown_area.scss +++ b/app/assets/stylesheets/generic/markdown_area.scss @@ -65,8 +65,11 @@ position: relative; } -.md-header ul { - float: left; +.md-header { + ul { + float: left; + margin-bottom: 1px; + } } .referenced-users { @@ -80,7 +83,7 @@ .md-preview-holder { background: #FFF; border: 1px solid #ddd; - min-height: 100px; + min-height: 169px; padding: 5px; box-shadow: none; } @@ -105,7 +108,7 @@ .markdown-area { background: #FFF; border: 1px solid #ddd; - min-height: 100px; + min-height: 140px; padding: 5px; box-shadow: none; width: 100%; diff --git a/app/assets/stylesheets/generic/mobile.scss b/app/assets/stylesheets/generic/mobile.scss index bb7b9356c70..36ae126f865 100644 --- a/app/assets/stylesheets/generic/mobile.scss +++ b/app/assets/stylesheets/generic/mobile.scss @@ -80,6 +80,23 @@ %ul.notes .note-role, .note-actions { display: none; } + + .center-top-menu { + height: 45px; + + li a { + font-size: 14px; + padding: 19px 10px; + } + } + + .projects-search-form { + margin: 0 -5px !important; + + .btn { + display: none; + } + } } @media (max-width: $screen-sm-max) { diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss index d8e0dc028d1..f0860de1c49 100644 --- a/app/assets/stylesheets/generic/selects.scss +++ b/app/assets/stylesheets/generic/selects.scss @@ -3,9 +3,9 @@ .select2-choice { background: #FFF; border-color: #DDD; - height: 34px; - padding: 6px 14px; - font-size: 14px; + height: 42px; + padding: 8px $gl-padding; + font-size: $gl-font-size; line-height: 1.42857143; @include border-radius(4px); @@ -13,7 +13,7 @@ .select2-arrow { background: #FFF; border-left: none; - padding-top: 3px; + padding-top: 5px; } } } diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 320bdb1c765..22720c2e1d5 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -18,13 +18,21 @@ } .content-wrapper { + min-height: 100vh; width: 100%; padding: 20px; - background: #FFF; + background: #f1f4f8; + + .container-fluid { + background: #FFF; + padding: $gl-padding; + border: 1px solid #e7e9ed; + min-height: 90vh; + } } .nav-sidebar { - margin-top: 29 + $header-height; + margin-top: 14 + $header-height; margin-bottom: 50px; transition-duration: .3s; list-style: none; @@ -43,13 +51,14 @@ } a { - padding: 8px 15px; - font-size: 13px; - line-height: 18px; + padding: 7px 15px; + font-size: $gl-font-size; + line-height: 24px; color: $gray; display: block; text-decoration: none; - padding-left: 16px; + padding-left: 22px; + font-weight: normal; &:hover { text-decoration: none; @@ -60,9 +69,9 @@ } i { - width: 20px; + width: 16px; color: $gray-light; - margin-right: 23px; + margin-right: 13px; } .count { @@ -108,17 +117,31 @@ } @mixin folded-sidebar { - padding-left: 50px; + padding-left: 60px; transition-duration: .3s; .sidebar-wrapper { width: $sidebar_collapsed_width; + .header-logo { + width: $sidebar_collapsed_width; + + a { + padding-left: 12px; + + .gitlab-text-container { + display: none; + } + } + } + .nav-sidebar { width: $sidebar_collapsed_width; li a { - padding-left: 16px; + span { + display: none; + } } } @@ -128,21 +151,25 @@ } .sidebar-user { + padding-left: 12px; width: $sidebar_collapsed_width; + + .username { + display: none; + } } } } .collapse-nav a { + width: $sidebar_width; position: fixed; - top: $header-height; - left: 198px; + bottom: 0; font-size: 13px; background: transparent; - width: 32px; - height: 28px; + height: 40px; text-align: center; - line-height: 28px; + line-height: 40px; transition-duration: .3s; } @@ -176,16 +203,18 @@ } .sidebar-user { + padding: 9px 22px; position: fixed; - bottom: 0; + bottom: 40px; width: $sidebar_width; - padding: 10px; overflow: hidden; transition-duration: .3s; .username { - margin-top: 5px; + margin-left: 10px; width: $sidebar_width - 2 * 10px; + font-size: 16px; + line-height: 34px; } } @@ -202,7 +231,7 @@ float: left; height: $header-height; width: 100%; - padding: ($header-height - 36 ) / 2 8px; + padding: 10px 22px; overflow: hidden; img { @@ -219,8 +248,8 @@ float: left; margin: 0; margin-left: 14px; - font-size: 18px; - line-height: $header-height - 14; + font-size: 19px; + line-height: 41px; font-weight: normal; } } diff --git a/app/assets/stylesheets/generic/timeline.scss b/app/assets/stylesheets/generic/timeline.scss index 97831eb7c27..74bbaabad39 100644 --- a/app/assets/stylesheets/generic/timeline.scss +++ b/app/assets/stylesheets/generic/timeline.scss @@ -1,119 +1,50 @@ .timeline { - list-style: none; - padding: 20px 0 20px; - position: relative; + @include basic-list; - &:before { - top: 0; - bottom: 0; - position: absolute; - content: " "; - width: 3px; - background-color: #eeeeee; - margin-left: 29px; - } + margin: 0; + padding: 0; .timeline-entry { - position: relative; - margin-top: 5px; - margin-left: 30px; - margin-bottom: 10px; - clear: both; - - - &:target { - .timeline-entry-inner .timeline-content { - -webkit-animation:target-note 2s linear; - background: $hover; - } + padding: $gl-padding; + border-color: #f1f2f4; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + color: $gl-gray; + border-bottom: 1px solid #f1f2f4; + border-right: 1px solid #f1f2f4; + + &:last-child { + border-bottom: none; } - .timeline-entry-inner { - position: relative; - margin-left: -20px; - - &:before, &:after { - content: " "; - display: table; - } - - .timeline-icon { - margin-top: 2px; - background: #fff; - color: #737881; - float: left; - @include border-radius($avatar_radius); - @include box-shadow(0 0 0 3px #EEE); - overflow: hidden; - - .avatar { - margin: 0; - padding: 0; - } - } - - .timeline-content { - position: relative; - background: $background-color; - padding: 10px 15px; - margin-left: 60px; - - img { - max-width: 100%; - } + .avatar { + margin-right: 15px; + } - &:after { - content: ''; - display: block; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 9px 9px 9px 0; - border-color: transparent $background-color transparent transparent; - left: 0; - top: 10px; - margin-left: -9px; - } - } + .controls { + padding-top: 10px; + float: right; } } - .system-note .timeline-entry-inner { - .timeline-icon { - background: none; - margin-left: 12px; - margin-top: 0; - @include box-shadow(none); - - span { - margin: 0 2px; - font-size: 16px; - color: #eeeeee; - } + .note-text { + p:last-child { + margin-bottom: 0; } + } - .timeline-content { - background: none; - margin-left: 45px; - padding: 0px 15px; - - &:after { border: 0; } - - .note-header { - span { font-size: 12px; } - - .avatar { - margin-right: 5px; - } - } - - .note-text { - font-size: 12px; - margin-left: 20px; - } + .system-note { + .note-text { + color: $gl-gray !important; } } + + .diff-file { + border: 1px solid $border-color; + border-bottom: none; + margin-left: 0; + margin-right: 0; + } } @media (max-width: $screen-xs-max) { @@ -132,3 +63,8 @@ } } } + +.discussion .timeline-entry { + margin: 0; + border-right: none; +} diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss index 34b4ee3e17e..73034c84f9a 100644 --- a/app/assets/stylesheets/generic/typography.scss +++ b/app/assets/stylesheets/generic/typography.scss @@ -9,6 +9,11 @@ margin-bottom: 5px; } +h1, h2, h3, h4, h5, h6 { + color: $gl-header-color; + font-weight: 500; +} + /** CODE **/ pre { font-family: $monospace_font; diff --git a/app/assets/stylesheets/generic/zen.scss b/app/assets/stylesheets/generic/zen.scss index 7e86a0fe4b9..32e2c020e06 100644 --- a/app/assets/stylesheets/generic/zen.scss +++ b/app/assets/stylesheets/generic/zen.scss @@ -4,7 +4,7 @@ } .zen-enter-link { - color: #888; + color: $gl-gray; position: absolute; top: 0px; right: 4px; @@ -13,7 +13,7 @@ .zen-leave-link { display: none; - color: #888; + color: $gl-text-color; position: absolute; top: 10px; right: 10px; diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss index c8cb18ec35f..8323a8598ec 100644 --- a/app/assets/stylesheets/highlight/dark.scss +++ b/app/assets/stylesheets/highlight/dark.scss @@ -21,6 +21,12 @@ pre.code.highlight.dark, background-color: #557 !important; } + // Search result highlight + span.highlight_word { + background: #ffe792; + color: #000000; + } + .hll { background-color: #373b41 } .c { color: #969896 } /* Comment */ .err { color: #cc6666 } /* Error */ diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss index 001e8b31020..e8381674336 100644 --- a/app/assets/stylesheets/highlight/monokai.scss +++ b/app/assets/stylesheets/highlight/monokai.scss @@ -21,6 +21,12 @@ pre.code.monokai, background-color: #49483e !important; } + // Search result highlight + span.highlight_word { + background: #ffe792; + color: #000000; + } + .hll { background-color: #49483e } .c { color: #75715e } /* Comment */ .err { color: #960050; background-color: #1e0010 } /* Error */ diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss index f5b827e7c02..bd41480aefb 100644 --- a/app/assets/stylesheets/highlight/solarized_dark.scss +++ b/app/assets/stylesheets/highlight/solarized_dark.scss @@ -21,6 +21,11 @@ pre.code.highlight.solarized-dark, background-color: #174652 !important; } + // Search result highlight + span.highlight_word { + background: #094554; + } + /* Solarized Dark For use with Jekyll and Pygments diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss index 6b44c00c305..4cc62863870 100644 --- a/app/assets/stylesheets/highlight/solarized_light.scss +++ b/app/assets/stylesheets/highlight/solarized_light.scss @@ -21,6 +21,11 @@ pre.code.highlight.solarized-light, background-color: #ddd8c5 !important; } + // Search result highlight + span.highlight_word { + background: #eee8d5; + } + /* Solarized Light For use with Jekyll and Pygments diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss index a52ffc971d1..e0edfb80b42 100644 --- a/app/assets/stylesheets/highlight/white.scss +++ b/app/assets/stylesheets/highlight/white.scss @@ -21,6 +21,11 @@ pre.code.highlight.white, background-color: #f8eec7 !important; } + // Search result highlight + span.highlight_word { + background: #fafe3d; + } + .hll { background-color: #f8f8f8 } .c { color: #999988; font-style: italic; } .err { color: #a61717; background-color: #e3d2d2; } diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index e7125c03993..051ca3792c3 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -26,14 +26,6 @@ margin-top: 10px; } -.commit-stat-summary { - color: #666; - font-size: 14px; - font-weight: normal; - padding: 3px 0; - margin-bottom: 10px; -} - .commit-info-row { margin-bottom: 10px; .avatar { @@ -47,11 +39,6 @@ } .commit-box { - margin: 10px 0; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; - padding: 20px 0; - .commit-title { margin: 0; } @@ -61,10 +48,6 @@ } } -.file-stats a { - color: $style_color; -} - .file-stats { .new-file { a { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 359f4073e87..de2ae93df37 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -52,7 +52,7 @@ li.commit { } .commit-row-message { - color: #444; + color: $gl-link-color; &:hover { text-decoration: underline; @@ -88,12 +88,12 @@ li.commit { } .commit-row-info { - color: #777; + color: $gl-gray; line-height: 24px; font-size: 13px; a { - color: #777; + color: $gl-gray; } .committed_ago { diff --git a/app/assets/stylesheets/pages/dashboard.scss b/app/assets/stylesheets/pages/dashboard.scss index c1103a1c2e6..25a86cd0f94 100644 --- a/app/assets/stylesheets/pages/dashboard.scss +++ b/app/assets/stylesheets/pages/dashboard.scss @@ -2,7 +2,7 @@ .side { .panel { .panel-heading { - background: #EEE; + background: $background-color; border-top-left-radius: 0; } border-top-left-radius: 0; @@ -38,11 +38,11 @@ float: left; .avatar { - @include border-radius(0px); + @include border-radius(50%); } .identicon { - line-height: 40px; + line-height: 46px; } } diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 1557c243db5..487b600e31d 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -1,6 +1,8 @@ .diff-file { - border: 1px solid $border-color; - margin-bottom: 1em; + margin-left: -16px; + margin-right: -16px; + border: none; + border-bottom: 1px solid #E7E9EE; .diff-header { position: relative; @@ -45,7 +47,7 @@ overflow-y: hidden; background: #FFF; color: #333; - font-size: $code_font_size; + .old { span.idiff { background-color: #f8cbcb; @@ -82,7 +84,7 @@ border: none; margin: 0px; padding: 0px; - td { + .line_holder td { line-height: $code_line_height; font-size: $code_font_size; } @@ -367,3 +369,7 @@ white-space: pre-wrap; } +.inline-parallel-buttons { + float: right; + margin-top: -5px; +} diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index d4af7506d5b..ca2ee455423 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -1,70 +1,58 @@ /** - * Events labels - * - */ -.event_label { - &.pushed { - padding: 0 2px; - } - - &.opened { - padding: 0 2px; - } - - &.closed { - padding: 0 2px; - } - - &.merged { - padding: 0 2px; - } - - &.left, - &.joined { - padding: 0 2px; - float: none; - } -} - -/** * Dashboard events feed * */ .event-item { - &:first-child { - padding-top: 0; - } + font-size: $gl-font-size; + padding: $gl-padding; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + border-bottom: 1px solid #f1f2f4; + color: #7f8fa4; &.event-inline { .avatar { position: relative; top: -2px; } + + .event-title { + line-height: 44px; + } + + .event-item-timestamp { + line-height: 44px; + } + } + + a { + color: #4c4e54; + } + + .avatar { + margin-right: 15px; } - padding: 12px 0px; - border-bottom: 1px solid #eee; .event-title { - max-width: 70%; @include str-truncated(calc(100% - 174px)); - font-weight: 500; - font-size: 14px; + font-weight: 600; + .author_name { color: #333; } } + .event-body { - font-size: 13px; - margin-left: 35px; + margin-left: 63px; margin-right: 80px; - color: #777; .event-note { margin-top: 5px; word-wrap: break-word; .md { - font-size: 13px; + color: #7f8fa4; + font-size: $gl-font-size; iframe.twitter-share-button { vertical-align: bottom; @@ -94,7 +82,7 @@ .event-note-icon { color: #777; float: left; - font-size: 16px; + font-size: $gl-font-size; line-height: 16px; margin-right: 5px; } @@ -116,7 +104,7 @@ &:last-child { border:none } .event_commits { - margin-top: 5px; + margin-top: 9px; li { &.commit { @@ -125,10 +113,12 @@ padding-left: 0; border: none; .commit-row-title { - font-size: 12px; + font-size: $gl-font-size; } } + &.commits-stat { + margin-top: 3px; display: block; padding: 3px; padding-left: 0; @@ -142,7 +132,6 @@ .event-item-timestamp { float: right; - color: #999; line-height: 22px; } } @@ -186,12 +175,3 @@ } } } - -.event_filter { - li a { - font-size: 13px; - padding: 5px 10px; - background: $background-color; - margin-left: 4px; - } -} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 586e7b5f8da..b5c61f7f91d 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -25,8 +25,6 @@ } .issuable-context-title { - font-size: 14px; - line-height: 1.4; margin-bottom: 5px; .avatar { @@ -34,14 +32,50 @@ } label { - color: #666; + color: $gl-gray; font-weight: normal; margin-right: 4px; } } -.issuable-affix .context { - font-size: 13px; +.project-issuable-filter { + .controls { + float: right; + margin-top: 7px; + } + + .center-top-menu { + text-align: left; + } +} - .btn { font-size: 13px; } +.issuable-details { + .page-title { + margin-top: -15px; + padding: 10px 0; + margin-bottom: 0; + color: $gl-gray; + font-size: 16px; + + .author { + color: $gl-gray; + } + + .issue-id { + font-size: 19px; + color: $gl-text-color; + } + } + + .issue-title { + margin: 0; + } + + .description { + margin-top: 6px; + + p:last-child { + margin-bottom: 0; + } + } } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 3572f33e91f..4bf58cb4a59 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -1,6 +1,6 @@ .issues-list { .issue { - padding: 10px 15px; + padding: 10px $gl-padding; position: relative; .issue-title { @@ -10,8 +10,7 @@ } .issue-info { - color: #999; - font-size: 13px; + color: $gl-gray; } .issue-check { @@ -47,10 +46,6 @@ } } -.participants { - margin-bottom: 20px; -} - .issue-search-form { margin: 0; height: 24px; @@ -137,11 +132,6 @@ form.edit-issue { } } -h2.issue-title { - margin-top: 0; - font-weight: bold; -} - .issue-form .select2-container { width: 250px !important; } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 10fce5b3daa..d8c8e5ad0a4 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -3,10 +3,10 @@ * */ .mr-state-widget { - background: #FAFAFA; + background: #f8fafc; margin-bottom: 20px; - color: #666; - border: 1px solid #e5e5e5; + color: $gl-gray; + border: 1px solid #eef0f2; @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); @include border-radius(3px); @@ -29,6 +29,14 @@ padding: 5px; line-height: 20px; + &.right { + float: right; + padding-top: 12px; + a { + color: $gl-gray; + } + } + .remove_source_checkbox { margin: 0; } @@ -36,7 +44,7 @@ } .ci_widget { - border-bottom: 1px solid #EEE; + border-bottom: 1px solid #eef0f2; i { margin-right: 4px; @@ -89,20 +97,14 @@ } } -@media(min-width: $screen-sm-max) { - .merge-request .merge-request-tabs{ - li { - a { - padding: 15px 40px; - font-size: 14px; - } - } - } -} - .merge-request .merge-request-tabs{ - margin-top: 30px; - margin-bottom: 20px; + @include nav-menu; + margin: -$gl-padding; + padding: $gl-padding; + text-align: center; + border-top: 1px solid #e7e9ed; + margin-top: 18px; + margin-bottom: 3px; } .mr_source_commit, @@ -136,8 +138,7 @@ } .merge-request-info { - color: #999; - font-size: 13px; + color: $gl-gray; } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 15e3948e402..e80dc9e84a1 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -6,4 +6,8 @@ li.milestone { h4 { font-weight: bold; } + + .progress { + height: 6px; + } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 203f9374cee..b311d26d675 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -72,9 +72,13 @@ .common-note-form { margin: 0; - background: #F9F9F9; - padding: 5px; - border: 1px solid #DDD; + background: #f8fafc; + padding: $gl-padding; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + border-right: 1px solid #f1f2f4; + border-top: 1px solid #f1f2f4; + margin-bottom: -$gl-padding; } .note-form-actions { @@ -142,9 +146,9 @@ } .discussion-reply-holder { - background: #f9f9f9; + background: $background-color; padding: 10px 15px; - border-top: 1px solid #DDD; + border-top: 1px solid $border-color; } } @@ -166,6 +170,6 @@ background: #FFF; padding: 5px; margin-top: -11px; - border: 1px solid #DDD; + border: 1px solid $border-color; font-size: 13px; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 85c828ec1ad..2544356a5f6 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -14,6 +14,19 @@ ul.notes { margin: 0px; padding: 0px; + .system-note { + font-size: 14px; + padding-top: 10px; + padding-bottom: 10px; + background: #f8fafc; + + .timeline-icon { + .avatar { + visibility: hidden; + } + } + } + .discussion-header, .note-header { @extend .cgray; @@ -34,10 +47,8 @@ ul.notes { content: "\00b7"; } - font-size: 13px; - a { - @extend .cgray; + color: $gl-gray; &:hover { text-decoration: underline; @@ -45,8 +56,9 @@ ul.notes { } } .author { - color: #333; - font-weight: bold; + color: #4c4e54; + margin-right: 3px; + &:hover { color: $gl-link-color; } @@ -59,7 +71,7 @@ ul.notes { margin-top: 1px; border: 1px solid #bbb; background-color: transparent; - color: #999; + color: $gl-gray; } } @@ -133,8 +145,6 @@ ul.notes { } .diff-file .notes_holder { - font-size: 13px; - line-height: 18px; font-family: $regular_font; td { @@ -176,8 +186,7 @@ ul.notes { a { margin-left: 5px; - - color: #999; + color: $gl-gray; i.fa { font-size: 16px; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 4d065c3bdf6..361fd63bc79 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -16,6 +16,10 @@ .project-home-panel { text-align: center; + background: #f7f8fa; + margin: -$gl-padding; + padding: $gl-padding; + padding-top: 40px; .project-identicon-holder { margin-bottom: 15px; @@ -38,13 +42,12 @@ h1 { margin: 0; margin-bottom: 10px; - font-size: 26px; - font-weight: bold; + font-size: 23px; + font-weight: normal; } p { - font-size: 18px; - color: #666; + color: #7f8fa4; display: inline; } } @@ -52,6 +55,10 @@ .git-clone-holder { max-width: 600px; margin: 20px auto; + + .form-control { + background: #FFF; + } } .visibility-level-label { @@ -62,17 +69,18 @@ } .project-repo-buttons { - margin-top: 25px; + margin-top: $gl-padding; margin-bottom: 25px; .btn { @extend .btn-info; + text-transform: uppercase; + font-size: 15px; + line-height: 20px; + padding: 8px 14px; + border-radius: 3px; margin-left: 10px; - font-weight: bold; - font-size: 14px; - line-height: 16px; - padding: 8px 12px; .count { padding-left: 7px; @@ -162,78 +170,6 @@ ul.nav.nav-projects-tabs { margin: 0px; } -.my-projects, -.public-projects { - li { - .project-info { - margin-bottom: 10px; - overflow: hidden; - } - - .access-icon { - color: #AAA; - margin-left: 10px; - i { - color: #AAA; - } - } - } -} - -.public-clone { - background: #EEE; - color: #777; - padding: 6px 10px; - margin: 1px; - font-weight: normal; -} - -.public-projects .repo-info { - color: #777; - - a { - color: #777; - } -} - -.project-side { - .project-fork-icon { - float: left; - font-size: 26px; - margin-right: 10px; - line-height: 1.5; - } - - .panel { - @include border-radius(3px); - - .panel-heading, .panel-footer { - font-weight: normal; - background-color: transparent; - color: #666; - border-color: #EEE; - } - - .actions { - margin-top: 10px; - } - - .nav-pills a { - padding: 10px; - font-weight: bold; - color: $gl-link-color; - } - - .nav { - margin-bottom: 15px; - } - } - - .ci-status-image { - max-height: 22px; - } -} - .transfer-project .select2-container { min-width: 200px; } @@ -256,10 +192,10 @@ ul.nav.nav-projects-tabs { .breadcrumb.repo-breadcrumb { padding: 0; - line-height: 34px; - background: white; + line-height: 42px; + background: transparent; border: none; - font-size: 16px; + margin: 0; > li + li:before { padding: 0 3px; @@ -305,10 +241,23 @@ table.table.protected-branches-list tr.no-border { .project-stats { text-align: center; + margin-top: 0; + margin-bottom: 0; + padding-top: 5px; + padding-bottom: 0; + + ul.nav-pills { + display:inline-block; + } + + li { + display:inline; + } - ul.nav-pills { display:inline-block; } - li { display:inline; } - a { float:left; } + a { + float:left; + font-size: 17px; + } li.missing a { color: #bbb; @@ -325,32 +274,67 @@ pre.light-well { } .projects-search-form { - max-width: 600px; - margin: 0 auto; - margin-bottom: 20px; - - input { - border-color: #BBB; - } + margin: -$gl-padding; + background-color: #f8fafc; + padding: $gl-padding; + margin-bottom: 0px; + border-top: 1px solid #e7e9ed; + border-bottom: 1px solid #e7e9ed; } -.project-row { - .project-full-name { - font-weight: bold; - font-size: 15px; - } +/* + * Projects list rendered on dashboard and user page + */ +.projects-list { + @include basic-list; + + .project-row { + padding: $gl-padding; + border-color: #f1f2f4; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + + &.no-description { + .project { + line-height: 44px; + } + } - .project-description { - color: #888; - font-size: 13px; + .project-full-name { + @include str-truncated; + font-weight: 600; + color: #4c4e54; + } - p { - margin-bottom: 0; - color: #888; + .pull-right.light { + line-height: 45px; + color: #7f8fa4; + } + + .project-description { + color: #7f8fa4; + + p { + @include str-truncated; + margin-bottom: 0; + color: #7f8fa4; + } } } + + .bottom { + padding-top: $gl-padding; + padding-bottom: 0; + } +} + +.panel .projects-list li { + padding: 10px 15px; + margin: 0; } -.my-projects .project-row { - padding: 10px 0; +.project-show-activity { + .activity-filter-block { + margin-top: -1px; + } } diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index bdaa17ac339..3aaa96da609 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -1,7 +1,19 @@ .search-results { .search-result-row { - border-bottom: 1px solid #EEE; - padding-bottom: 10px; - margin-bottom: 10px; + border-bottom: 1px solid #DDD; + padding-bottom: 15px; + margin-bottom: 15px; } } + +.search-holder { + max-width: 600px; + margin: 0 auto; + margin-bottom: 20px; + + input { + border-color: #BBB; + font-weight: bold; + } +} + diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss index d79591d9915..a3d7aba054d 100644 --- a/app/assets/stylesheets/pages/snippets.scss +++ b/app/assets/stylesheets/pages/snippets.scss @@ -6,3 +6,27 @@ .snippet-form-holder .file-holder .file-title { padding: 2px; } + + +.snippet-row { + .snippet-title { + font-size: 15px; + font-weight: bold; + line-height: 20px; + margin-bottom: 2px; + + .monospace { + font-weight: normal; + } + } + + .snippet-info { + color: #888; + font-size: 13px; + line-height: 24px; + + a { + color: #888; + } + } +} diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 81e2aa7bb9c..587d09a04a5 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -63,15 +63,15 @@ padding-right: 8px; .commit-author-name { - color: gray; + color: $gl-gray; } } .tree_commit { - color: gray; + color: $gl-gray; .tree-commit-link { - color: gray; + color: $gl-gray; &:hover { text-decoration: underline; diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss index 77b62c3153f..8d9a0aae568 100644 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ b/app/assets/stylesheets/themes/gitlab-theme.scss @@ -9,15 +9,19 @@ @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { .page-with-sidebar { .header-logo { - background-color: $color-darker; - border-color: $color-darker; + background-color: $color; + border-color: $color; a { color: $color-light; + + h3 { + color: $color-light; + } } &:hover { - background-color: $color-dark; + background-color: $color-darker; a { color: #FFF; } @@ -83,7 +87,7 @@ } $theme-blue: #2980B9; -$theme-charcoal: #474D57; +$theme-charcoal: #333c47; $theme-graphite: #888888; $theme-gray: #373737; $theme-green: #019875; @@ -95,7 +99,7 @@ body { } &.ui_charcoal { - @include gitlab-theme(#979DA7, $theme-charcoal, #373D47, #24272D); + @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272D); } &.ui_graphite { |