Commit 85954621a33a5be40baaa07d9cfc1b8a0fc7ebea
1 parent
421451cf
Exists in
master
and in
4 other branches
new UI theme - mars
Showing
2 changed files
with
321 additions
and
0 deletions
Show diff stats
app/assets/stylesheets/main.scss
... | ... | @@ -71,6 +71,11 @@ $hover: #FDF5D9; |
71 | 71 | @import "ui_basic.scss"; |
72 | 72 | |
73 | 73 | /** |
74 | + * UI mars theme | |
75 | + */ | |
76 | +@import "ui_mars.scss"; | |
77 | + | |
78 | +/** | |
74 | 79 | * Most of application styles placed here. |
75 | 80 | * This file represent common UI that should not be changed between themes |
76 | 81 | * or project restyling like form width or user avatar class or commit title | ... | ... |
... | ... | @@ -0,0 +1,316 @@ |
1 | +/** | |
2 | + * This file represent some UI that can be changed | |
3 | + * during web app restyle or theme select. | |
4 | + * | |
5 | + * Next items should be placed there | |
6 | + * - link colors | |
7 | + * - header styles | |
8 | + * - main menu styles | |
9 | + * | |
10 | + */ | |
11 | +.ui_mars { | |
12 | + | |
13 | + /* | |
14 | + * Common styles | |
15 | + * | |
16 | + */ | |
17 | + a { | |
18 | + color: $link_color; | |
19 | + &:hover { | |
20 | + text-decoration:none; | |
21 | + color: $style_color; | |
22 | + } | |
23 | + } | |
24 | + | |
25 | + | |
26 | + /* | |
27 | + * Application Header | |
28 | + * | |
29 | + */ | |
30 | + header { | |
31 | + width:100%; | |
32 | + padding:0; | |
33 | + margin:0; | |
34 | + top:1px; | |
35 | + left:0; | |
36 | + | |
37 | + | |
38 | + background: #474D57 url('bg-header.png') repeat-x bottom; | |
39 | + | |
40 | + z-index:10; | |
41 | + height:60px; | |
42 | + | |
43 | + .search-input { | |
44 | + background:#474D57; | |
45 | + border-color:#888; | |
46 | + } | |
47 | + .app_logo { | |
48 | + width:230px; | |
49 | + float:left; | |
50 | + position:relative; | |
51 | + top:-4px; | |
52 | + | |
53 | + a { | |
54 | + float:left; | |
55 | + | |
56 | + h1 { | |
57 | + | |
58 | + background: url('images.png') no-repeat -3px -7px; | |
59 | + width: 65px; | |
60 | + height: 26px; | |
61 | + margin: 5px 0; | |
62 | + padding: 0; | |
63 | + display: block; | |
64 | + float: left; | |
65 | + text-indent: -1000em; | |
66 | + | |
67 | + } | |
68 | + | |
69 | + &.home { | |
70 | + img { | |
71 | + display:none | |
72 | + | |
73 | + } | |
74 | + } | |
75 | + &.admin_link { | |
76 | + width:16px; | |
77 | + height:16px; | |
78 | + padding: 5px; | |
79 | + border: 1px solid #888; | |
80 | + border-radius: 4px; | |
81 | + margin: 0px; | |
82 | + background:#474D57 ; | |
83 | + margin-left:20px; | |
84 | + margin-top:4px; | |
85 | + &:hover { | |
86 | + background:#f7f7f7; | |
87 | + } | |
88 | + img { | |
89 | + width:16px; | |
90 | + } | |
91 | + } | |
92 | + } | |
93 | + } | |
94 | + .wrapper { | |
95 | + margin:auto; | |
96 | + min-width:$min_app_width; | |
97 | + max-width:$max_app_width; | |
98 | + position:relative; | |
99 | + padding:15px 0; | |
100 | + | |
101 | + .top_panel_content { | |
102 | + margin:0 $app_padding; | |
103 | + } | |
104 | + } | |
105 | + | |
106 | + .project_name { | |
107 | + float:left; | |
108 | + width:400px; | |
109 | + margin:0; | |
110 | + margin-right:30px; | |
111 | + font-size:20px; | |
112 | + line-height:34px; | |
113 | + font-weight:bold; | |
114 | + color:#fff; | |
115 | + text-shadow: 0 1px 1px #111; | |
116 | + } | |
117 | + | |
118 | + .git_url_wrapper { | |
119 | + padding:0px; | |
120 | + margin:0px; | |
121 | + float:left; | |
122 | + | |
123 | + .git-url { | |
124 | + padding:0px; | |
125 | + margin:0px; | |
126 | + font-size: 12px; | |
127 | + margin-right:10px; | |
128 | + border-radius: 4px; | |
129 | + -moz-border-radius: 4px; | |
130 | + color: #666; | |
131 | + border: 1px solid #AAA; | |
132 | + padding: 0 10px 0 30px; | |
133 | + background: transparent url('images.png') no-repeat 8px -42px; | |
134 | + width: 260px; | |
135 | + height:26px; | |
136 | + } | |
137 | + } | |
138 | + | |
139 | + /* Account box */ | |
140 | + .account-box { | |
141 | + position: absolute; | |
142 | + right: 0; | |
143 | + top: 13px; | |
144 | + z-index: 10000; | |
145 | + width: 128px; | |
146 | + font-size: 11px; | |
147 | + float: right; | |
148 | + display: block; | |
149 | + cursor: pointer; | |
150 | + img { | |
151 | + border-radius: 4px; | |
152 | + right: 20px; | |
153 | + position: absolute; | |
154 | + width: 33px; | |
155 | + height: 33px; | |
156 | + display: block; | |
157 | + top: 0; | |
158 | + &:after { | |
159 | + content: " "; | |
160 | + display: block; | |
161 | + position: absolute; | |
162 | + top: 0; | |
163 | + right: 0; | |
164 | + left: 0; | |
165 | + bottom: 0; | |
166 | + float: right; | |
167 | + border-radius: 5px; | |
168 | + border: 1px solid rgba(255, 255, 255, 0.1); | |
169 | + border-bottom: 0; | |
170 | + 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))); | |
171 | + 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)); | |
172 | + 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)); | |
173 | + -webkit-background-origin: border-box; | |
174 | + -moz-background-origin: border; | |
175 | + background-origin: border-box; } } } | |
176 | + | |
177 | + .account-box { | |
178 | + &.hover { | |
179 | + height: 138px; } | |
180 | + &:hover > .account-links { | |
181 | + display: block; } } | |
182 | + | |
183 | + .account-links { | |
184 | + background: #79C3E0; | |
185 | + display: none; | |
186 | + border-radius: 5px; | |
187 | + width: 100px; | |
188 | + margin-top: 0; | |
189 | + float: right; | |
190 | + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | |
191 | + position: relative; | |
192 | + &:before { | |
193 | + content: "."; | |
194 | + width: 0; | |
195 | + height: 0; | |
196 | + position: absolute; | |
197 | + border: 5px solid transparent; | |
198 | + border-color: rgba(255, 255, 255, 0); | |
199 | + border-bottom-color: #333; | |
200 | + text-indent: -9999px; | |
201 | + top: -10px; | |
202 | + line-height: 0; | |
203 | + right: 10px; | |
204 | + z-index: 10; } | |
205 | + background: #333; | |
206 | + display: none; | |
207 | + z-index: 100000; | |
208 | + border-radius: 5px; | |
209 | + width: 100px; | |
210 | + position: absolute; | |
211 | + right: 20px; | |
212 | + top: 46px; | |
213 | + margin-top: 0; | |
214 | + float: right; | |
215 | + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | |
216 | + a { | |
217 | + color: #EEE; | |
218 | + padding: 6px 10px; | |
219 | + display: block; | |
220 | + text-shadow: none; | |
221 | + border-bottom: 1px solid #555; | |
222 | + &:hover { | |
223 | + background: #444; } } } | |
224 | + | |
225 | + .account-box.hover .arrow-up { | |
226 | + top: 41px; | |
227 | + right: 6px; | |
228 | + position: absolute; } | |
229 | + | |
230 | + .account-links a { | |
231 | + &:first-child { | |
232 | + -webkit-border-top-left-radius: 5px; | |
233 | + -webkit-border-top-right-radius: 5px; | |
234 | + -moz-border-radius-topleft: 5px; | |
235 | + -moz-border-radius-topright: 5px; | |
236 | + border-top-left-radius: 5px; | |
237 | + border-top-right-radius: 5px; } | |
238 | + &:last-child { | |
239 | + -webkit-border-bottom-right-radius: 5px; | |
240 | + -webkit-border-bottom-left-radius: 5px; | |
241 | + -moz-border-radius-bottomright: 5px; | |
242 | + -moz-border-radius-bottomleft: 5px; | |
243 | + border-bottom-right-radius: 5px; | |
244 | + border-bottom-left-radius: 5px; | |
245 | + border-bottom: 0; } } | |
246 | + | |
247 | + } | |
248 | + /* | |
249 | + * End of Application Header | |
250 | + * | |
251 | + */ | |
252 | + | |
253 | + /* | |
254 | + * Main Menu of Application | |
255 | + * | |
256 | + */ | |
257 | + nav.main_menu { | |
258 | + overflow:hidden; | |
259 | + border-radius: 4px; | |
260 | + margin: auto; | |
261 | + margin:30px $app_padding; | |
262 | + background:#eee; | |
263 | + border:1px solid #ccc; | |
264 | + height:38px; | |
265 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | |
266 | + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | |
267 | + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | |
268 | + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | |
269 | + @include shade; | |
270 | + .count { | |
271 | + color:#aaa; | |
272 | + margin-left:3px; | |
273 | + } | |
274 | + .label { | |
275 | + background:$hover; | |
276 | + text-shadow:none; | |
277 | + color:$style_color; | |
278 | + } | |
279 | + a { | |
280 | + font-weight:bold; | |
281 | + &:first-child{ | |
282 | + -webkit-border-top-left-radius: 4px; | |
283 | + -webkit-border-bottom-left-radius: 4px; | |
284 | + -moz-border-radius-topleft: 4px; | |
285 | + -moz-border-radius-bottomleft: 4px; | |
286 | + border-top-left-radius: 4px; | |
287 | + border-bottom-left-radius: 4px; | |
288 | + } | |
289 | + padding: 10px 25px; | |
290 | + display: inline-block; | |
291 | + color: $style_color; | |
292 | + border-right: 1px solid #d5d5d5; | |
293 | + position: relative; | |
294 | + box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); | |
295 | + margin: 0; | |
296 | + float:left; | |
297 | + text-shadow:0 1px 1px white; | |
298 | + &.home { | |
299 | + background: url(home_icon.PNG) no-repeat center center; | |
300 | + text-indent:-9999px; | |
301 | + min-width:40px; | |
302 | + img { | |
303 | + position:relative; | |
304 | + top:4px; | |
305 | + } | |
306 | + } | |
307 | + &.current { | |
308 | + background-color:#DDD; | |
309 | + } | |
310 | + } | |
311 | + } | |
312 | + /* | |
313 | + * End of Main Menu | |
314 | + * | |
315 | + */ | |
316 | +} | ... | ... |