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,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,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,13 +76,13 @@ $hover: #FDF5D9; | ||
76 | * Header of application. | 76 | * Header of application. |
77 | * Contain application logo, search panel, profile icon | 77 | * Contain application logo, search panel, profile icon |
78 | */ | 78 | */ |
79 | -@import "header.scss"; | 79 | +@import "sections/header.scss"; |
80 | 80 | ||
81 | /** | 81 | /** |
82 | * Navigation menu of application. | 82 | * Navigation menu of application. |
83 | * Panel with links to pages depends on project, profile or admin area | 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 | * This file represent some UI that can be changed | 88 | * This file represent some UI that can be changed |
@@ -147,12 +147,12 @@ $hover: #FDF5D9; | @@ -147,12 +147,12 @@ $hover: #FDF5D9; | ||
147 | /** | 147 | /** |
148 | * This file represent notes(comments) styles | 148 | * This file represent notes(comments) styles |
149 | */ | 149 | */ |
150 | -@import "notes.scss"; | 150 | +@import "sections/notes.scss"; |
151 | 151 | ||
152 | /** | 152 | /** |
153 | * Devise styles | 153 | * Devise styles |
154 | */ | 154 | */ |
155 | -@import "login.scss"; | 155 | +@import "sections/login.scss"; |
156 | 156 | ||
157 | /** | 157 | /** |
158 | * CODE HIGHTLIGHT BASE | 158 | * CODE HIGHTLIGHT BASE |
app/assets/stylesheets/nav.scss
@@ -1,98 +0,0 @@ | @@ -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,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 @@ | @@ -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 @@ | @@ -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 @@ | @@ -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 @@ | @@ -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 | %li{:id => dom_id(note), :class => "note"} | 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 | %div.note-author | 3 | %div.note-author |
4 | %strong= note.author_name | 4 | %strong= note.author_name |
5 | = link_to "##{dom_id(note)}", name: dom_id(note) do | 5 | = link_to "##{dom_id(note)}", name: dom_id(note) do |
@@ -7,7 +7,9 @@ | @@ -7,7 +7,9 @@ | ||
7 | = time_ago_in_words(note.updated_at) | 7 | = time_ago_in_words(note.updated_at) |
8 | ago | 8 | ago |
9 | - if(note.author_id == current_user.id) || can?(current_user, :admin_note, @project) | 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 | %div.note-title | 14 | %div.note-title |
13 | = preserve do | 15 | = preserve do |