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 | ... | ... |