Commit 4c1267e09f8718cd24b7a4701818336cdb45a0bf

Authored by randx
1 parent e1344a08

CSS refactoring. Notes better styled

app/assets/stylesheets/gitlab_bootstrap.scss
@@ -335,6 +335,9 @@ img.avatar { @@ -335,6 +335,9 @@ img.avatar {
335 &.s24 { 335 &.s24 {
336 width:24px; 336 width:24px;
337 } 337 }
  338 + &.s32 {
  339 + width:32px;
  340 + }
338 } 341 }
339 342
340 img.lil_av { 343 img.lil_av {
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 -}  
app/assets/stylesheets/sections/header.scss 0 → 100644
@@ -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 +
app/assets/stylesheets/sections/login.scss 0 → 100644
@@ -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}
app/assets/stylesheets/sections/nav.scss 0 → 100644
@@ -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 +
app/assets/stylesheets/sections/notes.scss 0 → 100644
@@ -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