Commit 4c1267e09f8718cd24b7a4701818336cdb45a0bf
1 parent
e1344a08
Exists in
master
and in
4 other branches
CSS refactoring. Notes better styled
Showing
11 changed files
with
571 additions
and
557 deletions
Show diff stats
app/assets/stylesheets/gitlab_bootstrap.scss
app/assets/stylesheets/header.scss
| ... | ... | @@ -1,228 +0,0 @@ |
| 1 | -/* | |
| 2 | - * Application Header | |
| 3 | - * | |
| 4 | - */ | |
| 5 | -header { | |
| 6 | - width:100%; | |
| 7 | - padding:0; | |
| 8 | - margin:0; | |
| 9 | - top:1px; | |
| 10 | - left:0; | |
| 11 | - background: #F1F1F1; /* for non-css3 browsers */ | |
| 12 | - border-bottom: 1px solid #ccc; | |
| 13 | - box-shadow: 0 -1px 0 white inset; | |
| 14 | - -moz-box-shadow: 0 -1px 0 white inset; | |
| 15 | - -webkit-box-shadow: 0 -1px 0 white inset; | |
| 16 | - z-index:10; | |
| 17 | - height:60px; | |
| 18 | - | |
| 19 | - /** | |
| 20 | - * | |
| 21 | - * Logo holder | |
| 22 | - * | |
| 23 | - */ | |
| 24 | - .app_logo { | |
| 25 | - width:230px; | |
| 26 | - float:left; | |
| 27 | - position:relative; | |
| 28 | - top:-5px; | |
| 29 | - | |
| 30 | - a { | |
| 31 | - float:left; | |
| 32 | - | |
| 33 | - h1 { | |
| 34 | - text-indent:-9999px; | |
| 35 | - width:102px; | |
| 36 | - background: url('logo_text.png') no-repeat 0px -3px; | |
| 37 | - float:left; | |
| 38 | - margin-left:5px; | |
| 39 | - font-size:20px; | |
| 40 | - line-height:36px; | |
| 41 | - font-weight:bold; | |
| 42 | - color:#aaa; | |
| 43 | - text-shadow: 0 1px 1px #FFF; | |
| 44 | - padding-left:50px; | |
| 45 | - } | |
| 46 | - } | |
| 47 | - .separator { | |
| 48 | - margin-left:20px; | |
| 49 | - float: left; | |
| 50 | - height: 60px; | |
| 51 | - width: 1px; | |
| 52 | - background: white; | |
| 53 | - border-left: 1px solid #DDD; | |
| 54 | - margin-top: -10px; | |
| 55 | - } | |
| 56 | - } | |
| 57 | - .container { | |
| 58 | - .top_panel_content { | |
| 59 | - margin:auto; | |
| 60 | - position:relative; | |
| 61 | - padding:15px 0; | |
| 62 | - } | |
| 63 | - } | |
| 64 | - | |
| 65 | - /** | |
| 66 | - * | |
| 67 | - * Project / Area name | |
| 68 | - * | |
| 69 | - */ | |
| 70 | - .project_name { | |
| 71 | - float:left; | |
| 72 | - margin:0; | |
| 73 | - margin-right:30px; | |
| 74 | - font-size:24px; | |
| 75 | - line-height:36px; | |
| 76 | - font-weight:500; | |
| 77 | - color:$style_color; | |
| 78 | - text-shadow: 0 1px 1px #FFF; | |
| 79 | - } | |
| 80 | - | |
| 81 | - .fbtn { | |
| 82 | - float: right; | |
| 83 | - margin-right:10px; | |
| 84 | - .btn { | |
| 85 | - margin-left:7px; | |
| 86 | - background: #F1F1F1; | |
| 87 | - border: 1px solid #CCC; | |
| 88 | - } | |
| 89 | - } | |
| 90 | - | |
| 91 | - | |
| 92 | - /** | |
| 93 | - * | |
| 94 | - * Search box | |
| 95 | - * | |
| 96 | - */ | |
| 97 | - .search { | |
| 98 | - float: right; | |
| 99 | - margin-right: 50px; | |
| 100 | - | |
| 101 | - .search-input { | |
| 102 | - @extend .span2; | |
| 103 | - background-image: url("icon-search.png"); | |
| 104 | - background-repeat: no-repeat; | |
| 105 | - background-position: 10px; | |
| 106 | - padding-left:25px; | |
| 107 | - @include border-radius(5px); | |
| 108 | - border:1px solid #ccc; | |
| 109 | - } | |
| 110 | - } | |
| 111 | - | |
| 112 | - /** | |
| 113 | - * | |
| 114 | - * Account box | |
| 115 | - * | |
| 116 | - */ | |
| 117 | - .account-box { | |
| 118 | - position: absolute; | |
| 119 | - right: 0; | |
| 120 | - top: 13px; | |
| 121 | - z-index: 10000; | |
| 122 | - width: 128px; | |
| 123 | - font-size: 11px; | |
| 124 | - float: right; | |
| 125 | - display: block; | |
| 126 | - cursor: pointer; | |
| 127 | - img { | |
| 128 | - border-radius: 4px; | |
| 129 | - right: 5px; | |
| 130 | - position: absolute; | |
| 131 | - width: 31px; | |
| 132 | - height: 31px; | |
| 133 | - display: block; | |
| 134 | - top: 0; | |
| 135 | - &:after { | |
| 136 | - content: " "; | |
| 137 | - display: block; | |
| 138 | - position: absolute; | |
| 139 | - top: 0; | |
| 140 | - right: 0; | |
| 141 | - left: 0; | |
| 142 | - bottom: 0; | |
| 143 | - float: right; | |
| 144 | - border-radius: 5px; | |
| 145 | - border: 1px solid rgba(255, 255, 255, 0.1); | |
| 146 | - border-bottom: 0; | |
| 147 | - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); | |
| 148 | - background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); | |
| 149 | - background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); | |
| 150 | - -webkit-background-origin: border-box; | |
| 151 | - -moz-background-origin: border; | |
| 152 | - background-origin: border-box; } } } | |
| 153 | - | |
| 154 | - .account-box { | |
| 155 | - &.hover { | |
| 156 | - height: 138px; } | |
| 157 | - &:hover > .account-links { | |
| 158 | - display: block; } } | |
| 159 | - | |
| 160 | - .account-links { | |
| 161 | - background: #79C3E0; | |
| 162 | - display: none; | |
| 163 | - border-radius: 5px; | |
| 164 | - width: 100px; | |
| 165 | - margin-top: 0; | |
| 166 | - float: right; | |
| 167 | - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | |
| 168 | - position: relative; | |
| 169 | - &:before { | |
| 170 | - content: "."; | |
| 171 | - width: 0; | |
| 172 | - height: 0; | |
| 173 | - position: absolute; | |
| 174 | - border: 5px solid transparent; | |
| 175 | - border-color: rgba(255, 255, 255, 0); | |
| 176 | - border-bottom-color: #333; | |
| 177 | - text-indent: -9999px; | |
| 178 | - top: -10px; | |
| 179 | - line-height: 0; | |
| 180 | - right: 10px; | |
| 181 | - z-index: 10; } | |
| 182 | - background: #333; | |
| 183 | - display: none; | |
| 184 | - z-index: 100000; | |
| 185 | - border-radius: 5px; | |
| 186 | - width: 100px; | |
| 187 | - position: absolute; | |
| 188 | - right: 10px; | |
| 189 | - top: 46px; | |
| 190 | - margin-top: 0; | |
| 191 | - float: right; | |
| 192 | - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | |
| 193 | - a { | |
| 194 | - color: #EEE; | |
| 195 | - padding: 6px 10px; | |
| 196 | - display: block; | |
| 197 | - text-shadow: none; | |
| 198 | - border-bottom: 1px solid #555; | |
| 199 | - &:hover { | |
| 200 | - color:#eee; | |
| 201 | - background: #444; | |
| 202 | - } | |
| 203 | - } | |
| 204 | - } | |
| 205 | - | |
| 206 | - .account-box.hover .arrow-up { | |
| 207 | - top: 41px; | |
| 208 | - right: 6px; | |
| 209 | - position: absolute; } | |
| 210 | - | |
| 211 | - .account-links a { | |
| 212 | - &:first-child { | |
| 213 | - -webkit-border-top-left-radius: 5px; | |
| 214 | - -webkit-border-top-right-radius: 5px; | |
| 215 | - -moz-border-radius-topleft: 5px; | |
| 216 | - -moz-border-radius-topright: 5px; | |
| 217 | - border-top-left-radius: 5px; | |
| 218 | - border-top-right-radius: 5px; } | |
| 219 | - &:last-child { | |
| 220 | - -webkit-border-bottom-right-radius: 5px; | |
| 221 | - -webkit-border-bottom-left-radius: 5px; | |
| 222 | - -moz-border-radius-bottomright: 5px; | |
| 223 | - -moz-border-radius-bottomleft: 5px; | |
| 224 | - border-bottom-right-radius: 5px; | |
| 225 | - border-bottom-left-radius: 5px; | |
| 226 | - border-bottom: 0; } } | |
| 227 | -} | |
| 228 | - |
app/assets/stylesheets/login.scss
| ... | ... | @@ -1,44 +0,0 @@ |
| 1 | -/* Login Page */ | |
| 2 | -body.login-page{ | |
| 3 | - padding-top: 10%; | |
| 4 | - background:#f1f1f1; | |
| 5 | -} | |
| 6 | - | |
| 7 | -.login-box{ | |
| 8 | - width: 304px; | |
| 9 | - position: relative; | |
| 10 | - border-radius: 5px; | |
| 11 | - margin: auto; | |
| 12 | - padding: 20px; | |
| 13 | - background: white; | |
| 14 | -} | |
| 15 | - | |
| 16 | -.login-box .login-logo{ | |
| 17 | - margin: 10px 0 30px 0; | |
| 18 | - display: block; | |
| 19 | -} | |
| 20 | - | |
| 21 | -.login-box input.text{background-color: #f1f1f1; font-size: 16px; border-radius: 0; padding: 14px 10px; width: 280px} | |
| 22 | - | |
| 23 | -.login-box input.text.top{ | |
| 24 | - -webkit-border-top-left-radius: 5px; | |
| 25 | - -webkit-border-top-right-radius: 5px; | |
| 26 | - -moz-border-radius-topleft: 5px; | |
| 27 | - -moz-border-radius-topright: 5px; | |
| 28 | - border-top-left-radius: 5px; | |
| 29 | - border-top-right-radius: 5px; | |
| 30 | -} | |
| 31 | - | |
| 32 | -.login-box input.text.bottom{ | |
| 33 | - -webkit-border-bottom-right-radius: 5px; | |
| 34 | - -webkit-border-bottom-left-radius: 5px; | |
| 35 | - -moz-border-radius-bottomright: 5px; | |
| 36 | - -moz-border-radius-bottomleft: 5px; | |
| 37 | - border-bottom-right-radius: 5px; | |
| 38 | - border-bottom-left-radius: 5px; | |
| 39 | - border-top: 0; | |
| 40 | - margin-bottom: 20px; | |
| 41 | -} | |
| 42 | - | |
| 43 | -.login-box a.forgot{float: right; padding-top: 6px} | |
| 44 | - |
app/assets/stylesheets/main.scss
| ... | ... | @@ -76,13 +76,13 @@ $hover: #FDF5D9; |
| 76 | 76 | * Header of application. |
| 77 | 77 | * Contain application logo, search panel, profile icon |
| 78 | 78 | */ |
| 79 | -@import "header.scss"; | |
| 79 | +@import "sections/header.scss"; | |
| 80 | 80 | |
| 81 | 81 | /** |
| 82 | 82 | * Navigation menu of application. |
| 83 | 83 | * Panel with links to pages depends on project, profile or admin area |
| 84 | 84 | */ |
| 85 | -@import "nav.scss"; | |
| 85 | +@import "sections/nav.scss"; | |
| 86 | 86 | |
| 87 | 87 | /** |
| 88 | 88 | * This file represent some UI that can be changed |
| ... | ... | @@ -147,12 +147,12 @@ $hover: #FDF5D9; |
| 147 | 147 | /** |
| 148 | 148 | * This file represent notes(comments) styles |
| 149 | 149 | */ |
| 150 | -@import "notes.scss"; | |
| 150 | +@import "sections/notes.scss"; | |
| 151 | 151 | |
| 152 | 152 | /** |
| 153 | 153 | * Devise styles |
| 154 | 154 | */ |
| 155 | -@import "login.scss"; | |
| 155 | +@import "sections/login.scss"; | |
| 156 | 156 | |
| 157 | 157 | /** |
| 158 | 158 | * CODE HIGHTLIGHT BASE | ... | ... |
app/assets/stylesheets/nav.scss
| ... | ... | @@ -1,98 +0,0 @@ |
| 1 | -/* | |
| 2 | - * Main Menu of Application | |
| 3 | - * | |
| 4 | - */ | |
| 5 | -ul.main_menu { | |
| 6 | - border-radius: 4px; | |
| 7 | - margin: auto; | |
| 8 | - margin:30px 0; | |
| 9 | - background:#eee; | |
| 10 | - border:1px solid #bbb; | |
| 11 | - height:37px; | |
| 12 | - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | |
| 13 | - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | |
| 14 | - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | |
| 15 | - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | |
| 16 | - position:relative; | |
| 17 | - @include shade; | |
| 18 | - .count { | |
| 19 | - position: relative; | |
| 20 | - top: -1px; | |
| 21 | - display: inline-block; | |
| 22 | - height: 15px; | |
| 23 | - margin: 0 0 0 5px; | |
| 24 | - padding: 0 8px 1px 8px; | |
| 25 | - height: auto; | |
| 26 | - font-size: 0.82em; | |
| 27 | - line-height: 14px; | |
| 28 | - text-align: center; | |
| 29 | - color: #777; | |
| 30 | - background: #f2f2f2; | |
| 31 | - border-top: 1px solid #CCC; | |
| 32 | - border-radius: 8px; | |
| 33 | - -moz-border-radius: 8px; | |
| 34 | - } | |
| 35 | - .label { | |
| 36 | - background:$hover; | |
| 37 | - text-shadow:none; | |
| 38 | - color:$style_color; | |
| 39 | - } | |
| 40 | - li { | |
| 41 | - list-style-type: none; | |
| 42 | - margin: 0; | |
| 43 | - display: table-cell; | |
| 44 | - width: 1%; | |
| 45 | - border-right: 1px solid #DDD; | |
| 46 | - border-left: 1px solid #EEE; | |
| 47 | - border-bottom:2px solid #CFCFCF; | |
| 48 | - | |
| 49 | - &:first-child{ | |
| 50 | - -webkit-border-top-left-radius: 4px; | |
| 51 | - -webkit-border-bottom-left-radius: 4px; | |
| 52 | - -moz-border-radius-topleft: 4px; | |
| 53 | - -moz-border-radius-bottomleft: 4px; | |
| 54 | - border-top-left-radius: 4px; | |
| 55 | - border-bottom-left-radius: 4px; | |
| 56 | - border-left: 0; | |
| 57 | - } | |
| 58 | - | |
| 59 | - &.current { | |
| 60 | - background-color:#D5D5D5; | |
| 61 | - border-bottom: 2px solid $style_color; | |
| 62 | - border-right: 1px solid #BBB; | |
| 63 | - border-left: 1px solid #BBB; | |
| 64 | - border-radius: 0 0 1px 1px; | |
| 65 | - &:first-child{ | |
| 66 | - border-bottom:none; | |
| 67 | - border-left:none; | |
| 68 | - } | |
| 69 | - } | |
| 70 | - | |
| 71 | - &.home { | |
| 72 | - a { | |
| 73 | - background: url(home_icon.PNG) no-repeat center center; | |
| 74 | - text-indent:-9999px; | |
| 75 | - min-width:20px; | |
| 76 | - img { | |
| 77 | - position:relative; | |
| 78 | - top:4px; | |
| 79 | - } | |
| 80 | - } | |
| 81 | - } | |
| 82 | - } | |
| 83 | - a { | |
| 84 | - display: block; | |
| 85 | - text-align: center; | |
| 86 | - font-weight:bold; | |
| 87 | - height:35px; | |
| 88 | - line-height:36px; | |
| 89 | - color: $style_color; | |
| 90 | - text-shadow:0 1px 1px white; | |
| 91 | - | |
| 92 | - } | |
| 93 | -} | |
| 94 | -/* | |
| 95 | - * End of Main Menu | |
| 96 | - * | |
| 97 | - */ | |
| 98 | - |
app/assets/stylesheets/notes.scss
| ... | ... | @@ -1,181 +0,0 @@ |
| 1 | -/** | |
| 2 | - * Notes | |
| 3 | - * | |
| 4 | - */ | |
| 5 | -#notes-list, | |
| 6 | -#new_notes_list { | |
| 7 | - display:block; | |
| 8 | - list-style:none; | |
| 9 | - margin:0px; | |
| 10 | - padding:0px; | |
| 11 | -} | |
| 12 | - | |
| 13 | -#new_notes_list li:last-child{ | |
| 14 | - border-bottom:1px solid #aaa; | |
| 15 | -} | |
| 16 | - | |
| 17 | -.issue_notes, | |
| 18 | -.wiki_notes { | |
| 19 | - .note_content { | |
| 20 | - float:left; | |
| 21 | - width:400px; | |
| 22 | - } | |
| 23 | -} | |
| 24 | - | |
| 25 | -/* Note textare */ | |
| 26 | -#note_note { | |
| 27 | - height:80px; | |
| 28 | - width:99%; | |
| 29 | - font-size:14px; | |
| 30 | -} | |
| 31 | - | |
| 32 | -#new_note { | |
| 33 | - #note_note { | |
| 34 | - height:25px; | |
| 35 | - } | |
| 36 | - .attach_holder { | |
| 37 | - display:none; | |
| 38 | - } | |
| 39 | -} | |
| 40 | - | |
| 41 | -.note .delete-note { | |
| 42 | - display:none; | |
| 43 | - float:right; | |
| 44 | -} | |
| 45 | -.note:hover .delete-note { display:block; } | |
| 46 | -.note {padding: 10px 0; border-bottom: 1px solid #eee; overflow: hidden; display: block;} | |
| 47 | -.note img{float: left; margin-right: 10px;} | |
| 48 | -.note span.note-title{display: block;} | |
| 49 | -.note span.note-title{margin-bottom: 10px} | |
| 50 | -.note span.note-author{color: #999; font-weight: normal; font-style: italic;} | |
| 51 | -.note span.note-author strong{font-weight: bold; font-style: normal;} | |
| 52 | -.note p { color:$style_color; } | |
| 53 | -.note .note-author { color: $style_color;} | |
| 54 | - | |
| 55 | -.note .note-title { margin-left:55px; } | |
| 56 | - | |
| 57 | -p.notify_controls input{ | |
| 58 | - margin: 5px; | |
| 59 | -} | |
| 60 | - | |
| 61 | -p.notify_controls span{ | |
| 62 | - font-weight: 700; | |
| 63 | -} | |
| 64 | - | |
| 65 | -tr.line_notes_row { | |
| 66 | - border-bottom:1px solid #DDD; | |
| 67 | - border-left: 7px solid #2A79A3; | |
| 68 | - | |
| 69 | - &.reply { | |
| 70 | - background:#eee; | |
| 71 | - border-left: 7px solid #2A79A3; | |
| 72 | - border-top:1px solid #ddd; | |
| 73 | - td { | |
| 74 | - padding:7px 10px; | |
| 75 | - } | |
| 76 | - a.line_note_reply_link { | |
| 77 | - @include round-borders-all(4px); | |
| 78 | - padding: 3px 10px; | |
| 79 | - margin-left:5px; | |
| 80 | - color: white; | |
| 81 | - background: #2A79A3; | |
| 82 | - border-color: #2A79A3; | |
| 83 | - } | |
| 84 | - } | |
| 85 | - ul { | |
| 86 | - margin:0; | |
| 87 | - li { | |
| 88 | - padding:0; | |
| 89 | - border:none; | |
| 90 | - } | |
| 91 | - } | |
| 92 | -} | |
| 93 | - | |
| 94 | -.line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } | |
| 95 | - | |
| 96 | -.per_line_form { | |
| 97 | - background:#f5f5f5; | |
| 98 | - border-top:1px solid #eee; | |
| 99 | - form { margin: 0; } | |
| 100 | - td { | |
| 101 | - border-bottom:1px solid #ddd; | |
| 102 | - } | |
| 103 | - .note_actions { | |
| 104 | - margin:0; | |
| 105 | - padding-top: 10px; | |
| 106 | - | |
| 107 | - .buttons { | |
| 108 | - float:left; | |
| 109 | - width:300px; | |
| 110 | - } | |
| 111 | - .options { | |
| 112 | - .labels { | |
| 113 | - float:left; | |
| 114 | - padding-left:10px; | |
| 115 | - label { | |
| 116 | - padding: 6px 0; | |
| 117 | - margin: 0; | |
| 118 | - width:120px; | |
| 119 | - } | |
| 120 | - } | |
| 121 | - } | |
| 122 | - } | |
| 123 | -} | |
| 124 | - | |
| 125 | -td .line_note_link { | |
| 126 | - position:absolute; | |
| 127 | - margin-left:-70px; | |
| 128 | - margin-top:-10px; | |
| 129 | - z-index:10; | |
| 130 | - background: url("comment_add.png") no-repeat left 0; | |
| 131 | - width:32px; | |
| 132 | - height:32px; | |
| 133 | - | |
| 134 | - opacity: 0.0; | |
| 135 | - filter: alpha(opacity=0); | |
| 136 | - | |
| 137 | - &:hover { | |
| 138 | - opacity: 1.0; | |
| 139 | - filter: alpha(opacity=100); | |
| 140 | - } | |
| 141 | -} | |
| 142 | - | |
| 143 | -.diff_file_content tr.line_holder:hover > td { background: $hover !important; } | |
| 144 | -.diff_file_content tr.line_holder:hover > td .line_note_link { | |
| 145 | - opacity: 1.0; | |
| 146 | - filter: alpha(opacity=100); | |
| 147 | -} | |
| 148 | - | |
| 149 | -.new_note { | |
| 150 | - .input-file { | |
| 151 | - font: 500px monospace; | |
| 152 | - opacity:0; | |
| 153 | - filter: alpha(opacity=0); | |
| 154 | - position: absolute; | |
| 155 | - z-index: 1; | |
| 156 | - top:0; | |
| 157 | - right:0; | |
| 158 | - padding:0; | |
| 159 | - margin: 0; | |
| 160 | - } | |
| 161 | - | |
| 162 | - .file_upload { | |
| 163 | - position: absolute; | |
| 164 | - right:14px; | |
| 165 | - top:7px; | |
| 166 | - } | |
| 167 | - | |
| 168 | - div.attachments { | |
| 169 | - position:relative; | |
| 170 | - width: 350px; | |
| 171 | - height: 36px; | |
| 172 | - overflow:hidden; | |
| 173 | - margin:0 0 5px !important; | |
| 174 | - } | |
| 175 | - .file_name { | |
| 176 | - line-height:30px; | |
| 177 | - width:240px; | |
| 178 | - height:28px; | |
| 179 | - overflow:hidden; | |
| 180 | - } | |
| 181 | -} |
| ... | ... | @@ -0,0 +1,228 @@ |
| 1 | +/* | |
| 2 | + * Application Header | |
| 3 | + * | |
| 4 | + */ | |
| 5 | +header { | |
| 6 | + width:100%; | |
| 7 | + padding:0; | |
| 8 | + margin:0; | |
| 9 | + top:1px; | |
| 10 | + left:0; | |
| 11 | + background: #F1F1F1; /* for non-css3 browsers */ | |
| 12 | + border-bottom: 1px solid #ccc; | |
| 13 | + box-shadow: 0 -1px 0 white inset; | |
| 14 | + -moz-box-shadow: 0 -1px 0 white inset; | |
| 15 | + -webkit-box-shadow: 0 -1px 0 white inset; | |
| 16 | + z-index:10; | |
| 17 | + height:60px; | |
| 18 | + | |
| 19 | + /** | |
| 20 | + * | |
| 21 | + * Logo holder | |
| 22 | + * | |
| 23 | + */ | |
| 24 | + .app_logo { | |
| 25 | + width:230px; | |
| 26 | + float:left; | |
| 27 | + position:relative; | |
| 28 | + top:-5px; | |
| 29 | + | |
| 30 | + a { | |
| 31 | + float:left; | |
| 32 | + | |
| 33 | + h1 { | |
| 34 | + text-indent:-9999px; | |
| 35 | + width:102px; | |
| 36 | + background: url('logo_text.png') no-repeat 0px -3px; | |
| 37 | + float:left; | |
| 38 | + margin-left:5px; | |
| 39 | + font-size:20px; | |
| 40 | + line-height:36px; | |
| 41 | + font-weight:bold; | |
| 42 | + color:#aaa; | |
| 43 | + text-shadow: 0 1px 1px #FFF; | |
| 44 | + padding-left:50px; | |
| 45 | + } | |
| 46 | + } | |
| 47 | + .separator { | |
| 48 | + margin-left:20px; | |
| 49 | + float: left; | |
| 50 | + height: 60px; | |
| 51 | + width: 1px; | |
| 52 | + background: white; | |
| 53 | + border-left: 1px solid #DDD; | |
| 54 | + margin-top: -10px; | |
| 55 | + } | |
| 56 | + } | |
| 57 | + .container { | |
| 58 | + .top_panel_content { | |
| 59 | + margin:auto; | |
| 60 | + position:relative; | |
| 61 | + padding:15px 0; | |
| 62 | + } | |
| 63 | + } | |
| 64 | + | |
| 65 | + /** | |
| 66 | + * | |
| 67 | + * Project / Area name | |
| 68 | + * | |
| 69 | + */ | |
| 70 | + .project_name { | |
| 71 | + float:left; | |
| 72 | + margin:0; | |
| 73 | + margin-right:30px; | |
| 74 | + font-size:24px; | |
| 75 | + line-height:36px; | |
| 76 | + font-weight:500; | |
| 77 | + color:$style_color; | |
| 78 | + text-shadow: 0 1px 1px #FFF; | |
| 79 | + } | |
| 80 | + | |
| 81 | + .fbtn { | |
| 82 | + float: right; | |
| 83 | + margin-right:10px; | |
| 84 | + .btn { | |
| 85 | + margin-left:7px; | |
| 86 | + background: #F1F1F1; | |
| 87 | + border: 1px solid #CCC; | |
| 88 | + } | |
| 89 | + } | |
| 90 | + | |
| 91 | + | |
| 92 | + /** | |
| 93 | + * | |
| 94 | + * Search box | |
| 95 | + * | |
| 96 | + */ | |
| 97 | + .search { | |
| 98 | + float: right; | |
| 99 | + margin-right: 50px; | |
| 100 | + | |
| 101 | + .search-input { | |
| 102 | + @extend .span2; | |
| 103 | + background-image: url("icon-search.png"); | |
| 104 | + background-repeat: no-repeat; | |
| 105 | + background-position: 10px; | |
| 106 | + padding-left:25px; | |
| 107 | + @include border-radius(5px); | |
| 108 | + border:1px solid #ccc; | |
| 109 | + } | |
| 110 | + } | |
| 111 | + | |
| 112 | + /** | |
| 113 | + * | |
| 114 | + * Account box | |
| 115 | + * | |
| 116 | + */ | |
| 117 | + .account-box { | |
| 118 | + position: absolute; | |
| 119 | + right: 0; | |
| 120 | + top: 13px; | |
| 121 | + z-index: 10000; | |
| 122 | + width: 128px; | |
| 123 | + font-size: 11px; | |
| 124 | + float: right; | |
| 125 | + display: block; | |
| 126 | + cursor: pointer; | |
| 127 | + img { | |
| 128 | + border-radius: 4px; | |
| 129 | + right: 5px; | |
| 130 | + position: absolute; | |
| 131 | + width: 31px; | |
| 132 | + height: 31px; | |
| 133 | + display: block; | |
| 134 | + top: 0; | |
| 135 | + &:after { | |
| 136 | + content: " "; | |
| 137 | + display: block; | |
| 138 | + position: absolute; | |
| 139 | + top: 0; | |
| 140 | + right: 0; | |
| 141 | + left: 0; | |
| 142 | + bottom: 0; | |
| 143 | + float: right; | |
| 144 | + border-radius: 5px; | |
| 145 | + border: 1px solid rgba(255, 255, 255, 0.1); | |
| 146 | + border-bottom: 0; | |
| 147 | + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); | |
| 148 | + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); | |
| 149 | + background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); | |
| 150 | + -webkit-background-origin: border-box; | |
| 151 | + -moz-background-origin: border; | |
| 152 | + background-origin: border-box; } } } | |
| 153 | + | |
| 154 | + .account-box { | |
| 155 | + &.hover { | |
| 156 | + height: 138px; } | |
| 157 | + &:hover > .account-links { | |
| 158 | + display: block; } } | |
| 159 | + | |
| 160 | + .account-links { | |
| 161 | + background: #79C3E0; | |
| 162 | + display: none; | |
| 163 | + border-radius: 5px; | |
| 164 | + width: 100px; | |
| 165 | + margin-top: 0; | |
| 166 | + float: right; | |
| 167 | + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | |
| 168 | + position: relative; | |
| 169 | + &:before { | |
| 170 | + content: "."; | |
| 171 | + width: 0; | |
| 172 | + height: 0; | |
| 173 | + position: absolute; | |
| 174 | + border: 5px solid transparent; | |
| 175 | + border-color: rgba(255, 255, 255, 0); | |
| 176 | + border-bottom-color: #333; | |
| 177 | + text-indent: -9999px; | |
| 178 | + top: -10px; | |
| 179 | + line-height: 0; | |
| 180 | + right: 10px; | |
| 181 | + z-index: 10; } | |
| 182 | + background: #333; | |
| 183 | + display: none; | |
| 184 | + z-index: 100000; | |
| 185 | + border-radius: 5px; | |
| 186 | + width: 100px; | |
| 187 | + position: absolute; | |
| 188 | + right: 10px; | |
| 189 | + top: 46px; | |
| 190 | + margin-top: 0; | |
| 191 | + float: right; | |
| 192 | + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | |
| 193 | + a { | |
| 194 | + color: #EEE; | |
| 195 | + padding: 6px 10px; | |
| 196 | + display: block; | |
| 197 | + text-shadow: none; | |
| 198 | + border-bottom: 1px solid #555; | |
| 199 | + &:hover { | |
| 200 | + color:#eee; | |
| 201 | + background: #444; | |
| 202 | + } | |
| 203 | + } | |
| 204 | + } | |
| 205 | + | |
| 206 | + .account-box.hover .arrow-up { | |
| 207 | + top: 41px; | |
| 208 | + right: 6px; | |
| 209 | + position: absolute; } | |
| 210 | + | |
| 211 | + .account-links a { | |
| 212 | + &:first-child { | |
| 213 | + -webkit-border-top-left-radius: 5px; | |
| 214 | + -webkit-border-top-right-radius: 5px; | |
| 215 | + -moz-border-radius-topleft: 5px; | |
| 216 | + -moz-border-radius-topright: 5px; | |
| 217 | + border-top-left-radius: 5px; | |
| 218 | + border-top-right-radius: 5px; } | |
| 219 | + &:last-child { | |
| 220 | + -webkit-border-bottom-right-radius: 5px; | |
| 221 | + -webkit-border-bottom-left-radius: 5px; | |
| 222 | + -moz-border-radius-bottomright: 5px; | |
| 223 | + -moz-border-radius-bottomleft: 5px; | |
| 224 | + border-bottom-right-radius: 5px; | |
| 225 | + border-bottom-left-radius: 5px; | |
| 226 | + border-bottom: 0; } } | |
| 227 | +} | |
| 228 | + | ... | ... |
| ... | ... | @@ -0,0 +1,43 @@ |
| 1 | +/* Login Page */ | |
| 2 | +body.login-page{ | |
| 3 | + padding-top: 10%; | |
| 4 | + background:#f1f1f1; | |
| 5 | +} | |
| 6 | + | |
| 7 | +.login-box{ | |
| 8 | + width: 304px; | |
| 9 | + position: relative; | |
| 10 | + border-radius: 5px; | |
| 11 | + margin: auto; | |
| 12 | + padding: 20px; | |
| 13 | + background: white; | |
| 14 | +} | |
| 15 | + | |
| 16 | +.login-box .login-logo{ | |
| 17 | + margin: 10px 0 30px 0; | |
| 18 | + display: block; | |
| 19 | +} | |
| 20 | + | |
| 21 | +.login-box input.text{background-color: #f1f1f1; font-size: 16px; border-radius: 0; padding: 14px 10px; width: 280px} | |
| 22 | + | |
| 23 | +.login-box input.text.top{ | |
| 24 | + -webkit-border-top-left-radius: 5px; | |
| 25 | + -webkit-border-top-right-radius: 5px; | |
| 26 | + -moz-border-radius-topleft: 5px; | |
| 27 | + -moz-border-radius-topright: 5px; | |
| 28 | + border-top-left-radius: 5px; | |
| 29 | + border-top-right-radius: 5px; | |
| 30 | +} | |
| 31 | + | |
| 32 | +.login-box input.text.bottom{ | |
| 33 | + -webkit-border-bottom-right-radius: 5px; | |
| 34 | + -webkit-border-bottom-left-radius: 5px; | |
| 35 | + -moz-border-radius-bottomright: 5px; | |
| 36 | + -moz-border-radius-bottomleft: 5px; | |
| 37 | + border-bottom-right-radius: 5px; | |
| 38 | + border-bottom-left-radius: 5px; | |
| 39 | + border-top: 0; | |
| 40 | + margin-bottom: 20px; | |
| 41 | +} | |
| 42 | + | |
| 43 | +.login-box a.forgot{float: right; padding-top: 6px} | ... | ... |
| ... | ... | @@ -0,0 +1,98 @@ |
| 1 | +/* | |
| 2 | + * Main Menu of Application | |
| 3 | + * | |
| 4 | + */ | |
| 5 | +ul.main_menu { | |
| 6 | + border-radius: 4px; | |
| 7 | + margin: auto; | |
| 8 | + margin:30px 0; | |
| 9 | + background:#eee; | |
| 10 | + border:1px solid #bbb; | |
| 11 | + height:37px; | |
| 12 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | |
| 13 | + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | |
| 14 | + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | |
| 15 | + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | |
| 16 | + position:relative; | |
| 17 | + @include shade; | |
| 18 | + .count { | |
| 19 | + position: relative; | |
| 20 | + top: -1px; | |
| 21 | + display: inline-block; | |
| 22 | + height: 15px; | |
| 23 | + margin: 0 0 0 5px; | |
| 24 | + padding: 0 8px 1px 8px; | |
| 25 | + height: auto; | |
| 26 | + font-size: 0.82em; | |
| 27 | + line-height: 14px; | |
| 28 | + text-align: center; | |
| 29 | + color: #777; | |
| 30 | + background: #f2f2f2; | |
| 31 | + border-top: 1px solid #CCC; | |
| 32 | + border-radius: 8px; | |
| 33 | + -moz-border-radius: 8px; | |
| 34 | + } | |
| 35 | + .label { | |
| 36 | + background:$hover; | |
| 37 | + text-shadow:none; | |
| 38 | + color:$style_color; | |
| 39 | + } | |
| 40 | + li { | |
| 41 | + list-style-type: none; | |
| 42 | + margin: 0; | |
| 43 | + display: table-cell; | |
| 44 | + width: 1%; | |
| 45 | + border-right: 1px solid #DDD; | |
| 46 | + border-left: 1px solid #EEE; | |
| 47 | + border-bottom:2px solid #CFCFCF; | |
| 48 | + | |
| 49 | + &:first-child{ | |
| 50 | + -webkit-border-top-left-radius: 4px; | |
| 51 | + -webkit-border-bottom-left-radius: 4px; | |
| 52 | + -moz-border-radius-topleft: 4px; | |
| 53 | + -moz-border-radius-bottomleft: 4px; | |
| 54 | + border-top-left-radius: 4px; | |
| 55 | + border-bottom-left-radius: 4px; | |
| 56 | + border-left: 0; | |
| 57 | + } | |
| 58 | + | |
| 59 | + &.current { | |
| 60 | + background-color:#D5D5D5; | |
| 61 | + border-bottom: 2px solid $style_color; | |
| 62 | + border-right: 1px solid #BBB; | |
| 63 | + border-left: 1px solid #BBB; | |
| 64 | + border-radius: 0 0 1px 1px; | |
| 65 | + &:first-child{ | |
| 66 | + border-bottom:none; | |
| 67 | + border-left:none; | |
| 68 | + } | |
| 69 | + } | |
| 70 | + | |
| 71 | + &.home { | |
| 72 | + a { | |
| 73 | + background: url(home_icon.PNG) no-repeat center center; | |
| 74 | + text-indent:-9999px; | |
| 75 | + min-width:20px; | |
| 76 | + img { | |
| 77 | + position:relative; | |
| 78 | + top:4px; | |
| 79 | + } | |
| 80 | + } | |
| 81 | + } | |
| 82 | + } | |
| 83 | + a { | |
| 84 | + display: block; | |
| 85 | + text-align: center; | |
| 86 | + font-weight:bold; | |
| 87 | + height:35px; | |
| 88 | + line-height:36px; | |
| 89 | + color: $style_color; | |
| 90 | + text-shadow:0 1px 1px white; | |
| 91 | + | |
| 92 | + } | |
| 93 | +} | |
| 94 | +/* | |
| 95 | + * End of Main Menu | |
| 96 | + * | |
| 97 | + */ | |
| 98 | + | ... | ... |
| ... | ... | @@ -0,0 +1,191 @@ |
| 1 | +/** | |
| 2 | + * Notes | |
| 3 | + * | |
| 4 | + */ | |
| 5 | +#notes-list, | |
| 6 | +#new_notes_list { | |
| 7 | + display:block; | |
| 8 | + list-style:none; | |
| 9 | + margin:0px; | |
| 10 | + padding:0px; | |
| 11 | +} | |
| 12 | + | |
| 13 | +#new_notes_list li:last-child{ | |
| 14 | + border-bottom:1px solid #aaa; | |
| 15 | +} | |
| 16 | + | |
| 17 | +.issue_notes, | |
| 18 | +.wiki_notes { | |
| 19 | + .note_content { | |
| 20 | + float:left; | |
| 21 | + width:400px; | |
| 22 | + } | |
| 23 | +} | |
| 24 | + | |
| 25 | +/* Note textare */ | |
| 26 | +#note_note { | |
| 27 | + height:80px; | |
| 28 | + width:99%; | |
| 29 | + font-size:14px; | |
| 30 | +} | |
| 31 | + | |
| 32 | +#new_note { | |
| 33 | + #note_note { | |
| 34 | + height:25px; | |
| 35 | + } | |
| 36 | + .attach_holder { | |
| 37 | + display:none; | |
| 38 | + } | |
| 39 | +} | |
| 40 | + | |
| 41 | +.note { | |
| 42 | + padding: 8px 0; | |
| 43 | + border-bottom: 1px solid #eee; | |
| 44 | + overflow: hidden; | |
| 45 | + display: block; | |
| 46 | + img {float: left; margin-right: 10px;} | |
| 47 | + .note-author cite{font-style: italic;} | |
| 48 | + p { color:$style_color; } | |
| 49 | + .note-author { color: $style_color;} | |
| 50 | + | |
| 51 | + .note-title { margin-left:50px; padding-top: 5px;} | |
| 52 | + .avatar { | |
| 53 | + margin-top:3px; | |
| 54 | + } | |
| 55 | + | |
| 56 | + .delete-note { | |
| 57 | + display:none; | |
| 58 | + float:right; | |
| 59 | + } | |
| 60 | + | |
| 61 | + &:hover { | |
| 62 | + .delete-note { display:block; } | |
| 63 | + } | |
| 64 | +} | |
| 65 | + | |
| 66 | + | |
| 67 | +p.notify_controls input{ | |
| 68 | + margin: 5px; | |
| 69 | +} | |
| 70 | + | |
| 71 | +p.notify_controls span{ | |
| 72 | + font-weight: 700; | |
| 73 | +} | |
| 74 | + | |
| 75 | +tr.line_notes_row { | |
| 76 | + border-bottom:1px solid #DDD; | |
| 77 | + border-left: 7px solid #2A79A3; | |
| 78 | + | |
| 79 | + &.reply { | |
| 80 | + background:#eee; | |
| 81 | + border-left: 7px solid #2A79A3; | |
| 82 | + border-top:1px solid #ddd; | |
| 83 | + td { | |
| 84 | + padding:7px 10px; | |
| 85 | + } | |
| 86 | + a.line_note_reply_link { | |
| 87 | + @include round-borders-all(4px); | |
| 88 | + padding: 3px 10px; | |
| 89 | + margin-left:5px; | |
| 90 | + color: white; | |
| 91 | + background: #2A79A3; | |
| 92 | + border-color: #2A79A3; | |
| 93 | + } | |
| 94 | + } | |
| 95 | + ul { | |
| 96 | + margin:0; | |
| 97 | + li { | |
| 98 | + padding:0; | |
| 99 | + border:none; | |
| 100 | + } | |
| 101 | + } | |
| 102 | +} | |
| 103 | + | |
| 104 | +.line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } | |
| 105 | + | |
| 106 | +.per_line_form { | |
| 107 | + background:#f5f5f5; | |
| 108 | + border-top:1px solid #eee; | |
| 109 | + form { margin: 0; } | |
| 110 | + td { | |
| 111 | + border-bottom:1px solid #ddd; | |
| 112 | + } | |
| 113 | + .note_actions { | |
| 114 | + margin:0; | |
| 115 | + padding-top: 10px; | |
| 116 | + | |
| 117 | + .buttons { | |
| 118 | + float:left; | |
| 119 | + width:300px; | |
| 120 | + } | |
| 121 | + .options { | |
| 122 | + .labels { | |
| 123 | + float:left; | |
| 124 | + padding-left:10px; | |
| 125 | + label { | |
| 126 | + padding: 6px 0; | |
| 127 | + margin: 0; | |
| 128 | + width:120px; | |
| 129 | + } | |
| 130 | + } | |
| 131 | + } | |
| 132 | + } | |
| 133 | +} | |
| 134 | + | |
| 135 | +td .line_note_link { | |
| 136 | + position:absolute; | |
| 137 | + margin-left:-70px; | |
| 138 | + margin-top:-10px; | |
| 139 | + z-index:10; | |
| 140 | + background: url("comment_add.png") no-repeat left 0; | |
| 141 | + width:32px; | |
| 142 | + height:32px; | |
| 143 | + | |
| 144 | + opacity: 0.0; | |
| 145 | + filter: alpha(opacity=0); | |
| 146 | + | |
| 147 | + &:hover { | |
| 148 | + opacity: 1.0; | |
| 149 | + filter: alpha(opacity=100); | |
| 150 | + } | |
| 151 | +} | |
| 152 | + | |
| 153 | +.diff_file_content tr.line_holder:hover > td { background: $hover !important; } | |
| 154 | +.diff_file_content tr.line_holder:hover > td .line_note_link { | |
| 155 | + opacity: 1.0; | |
| 156 | + filter: alpha(opacity=100); | |
| 157 | +} | |
| 158 | + | |
| 159 | +.new_note { | |
| 160 | + .input-file { | |
| 161 | + font: 500px monospace; | |
| 162 | + opacity:0; | |
| 163 | + filter: alpha(opacity=0); | |
| 164 | + position: absolute; | |
| 165 | + z-index: 1; | |
| 166 | + top:0; | |
| 167 | + right:0; | |
| 168 | + padding:0; | |
| 169 | + margin: 0; | |
| 170 | + } | |
| 171 | + | |
| 172 | + .file_upload { | |
| 173 | + position: absolute; | |
| 174 | + right:14px; | |
| 175 | + top:7px; | |
| 176 | + } | |
| 177 | + | |
| 178 | + div.attachments { | |
| 179 | + position:relative; | |
| 180 | + width: 350px; | |
| 181 | + height: 36px; | |
| 182 | + overflow:hidden; | |
| 183 | + margin:0 0 5px !important; | |
| 184 | + } | |
| 185 | + .file_name { | |
| 186 | + line-height:30px; | |
| 187 | + width:240px; | |
| 188 | + height:28px; | |
| 189 | + overflow:hidden; | |
| 190 | + } | |
| 191 | +} | ... | ... |
app/views/notes/_show.html.haml
| 1 | 1 | %li{:id => dom_id(note), :class => "note"} |
| 2 | - = image_tag gravatar_icon(note.author.email), :class => "left", :width => 40, :style => "padding-right:5px;" | |
| 2 | + = image_tag gravatar_icon(note.author.email), :class => "avatar" | |
| 3 | 3 | %div.note-author |
| 4 | 4 | %strong= note.author_name |
| 5 | 5 | = link_to "##{dom_id(note)}", name: dom_id(note) do |
| ... | ... | @@ -7,7 +7,9 @@ |
| 7 | 7 | = time_ago_in_words(note.updated_at) |
| 8 | 8 | ago |
| 9 | 9 | - if(note.author_id == current_user.id) || can?(current_user, :admin_note, @project) |
| 10 | - %strong= link_to "Remove", [@project, note], :confirm => 'Are you sure?', :method => :delete, :remote => true, :class => "cred delete-note btn small" | |
| 10 | + = link_to [@project, note], :confirm => 'Are you sure?', :method => :delete, :remote => true, :class => "cred delete-note btn very_small" do | |
| 11 | + %i.icon-trash | |
| 12 | + Remove | |
| 11 | 13 | |
| 12 | 14 | %div.note-title |
| 13 | 15 | = preserve do | ... | ... |