source: pro-violet-viettel/www/deploy/20150304/assets/css/less/page.profile.less @ 780

Last change on this file since 780 was 780, checked in by dungnv, 10 years ago
File size: 5.8 KB
RevLine 
[780]1.profile-user-info {
2        margin:0 12px;
3}
4.profile-info-row {
5        position:relative;
6}
7.profile-info-name {
8        position:absolute;
9        width:110px;
10        text-align:right;
11        padding:6px 10px 6px 0;
12
13        left:0;
14        top:0; bottom:0;
15
16        font-weight:normal;
17        color:#667E99;
18        background-color:transparent;
19
20        border-top:1px dotted #D5E4F1;
21}
22.profile-info-value {
23        padding:6px 4px 6px 6px;
24        margin-left:120px;
25        border-top:1px dotted #D5E4F1;
26       
27        > span  + span:before{/* for a list of values (such as location city & country) put a comma between them */
28                display:inline;
29                content:",";
30                margin-left:1px;
31                margin-right:3px;
32                color:#666;
33                border-bottom:1px solid #FFF;
34        }
35        > span  + span.editable-container:before {
36                display:none;
37        }
38}
39
40.profile-info-row {
41        &:first-child .profile-info-name {
42                border-top:none;
43        }
44        &:first-child .profile-info-value {
45                border-top:none;
46        }
47}
48
49
50.profile-user-info-striped {
51        border:1px solid #DCEBF7;
52
53        .profile-info-name {
54                color:#336199;
55                background-color:#EDF3F4;
56                border-top:1px solid #F7FBFF;
57        }
58        .profile-info-value {
59                border-top:1px dotted #DCEBF7;
60                padding-left:12px;
61        }
62}
63
64
65
66
67.profile-picture {
68        border:1px solid #CCC;
69        background-color:#FFF;
70        padding:4px;
71        display:inline-block;
72        max-width:100%;
73        -moz-box-sizing:border-box;
74        box-shadow:1px 1px 1px rgba(0,0,0,0.15);
75}
76
77
78.profile-activity {
79        padding:10px 4px;
80        border-bottom:1px dotted #D0D8E0;
81        position:relative;
82        border-left:1px dotted #FFF;
83        border-right:1px dotted #FFF;
84        &:first-child {
85                border-top:1px dotted transparent;
86                &:hover {
87                        border-top-color:#D0D8E0;
88                }
89        }
90       
91        &:hover {
92                background-color:#F4F9FD;
93                border-left:1px dotted #D0D8E0;
94                border-right:1px dotted #D0D8E0;
95        }
96       
97       
98        img {
99                border:2px solid #C9D6E5;
100                border-radius:100%;
101                max-width:40px;
102                margin-right:10px;
103                margin-left:0px;
104                box-shadow:none;
105        }
106        .thumbicon {
107                background-color:#74ABD7;
108                display:inline-block;
109                border-radius:100%;
110               
111                width:38px;
112                height:38px;
113
114                color:#FFF; font-size:18px;
115                text-align:center;
116                line-height:38px;
117                 
118                margin-right:10px; margin-left:0px;
119                text-shadow:none !important;
120        }
121
122        .time {
123                display:block;
124                margin-top:4px;
125                color:#777;
126        }
127
128        a.user {
129                font-weight:bold;
130                color:#9585BF;
131        }
132
133        .tools {
134                position:absolute;
135                right: 12px;
136                bottom:8px;
137                display:none;
138        }
139        &:hover .tools {
140                display:block;
141        }
142}
143
144
145
146
147
148
149.user-profile .ace-thumbnails li {
150 border:1px solid #CCC;
151 padding:3px;
152 margin:6px;
153
154 .tools {
155        left:3px; right:3px;
156  }
157  &:hover .tools {
158        bottom:3px;
159  }
160}
161
162
163
164.user-profile .user-title-label {
165        &:hover {
166                text-decoration:none;
167        }
168        + .dropdown-menu {
169                margin-left:-12px;
170        }
171}
172
173
174.profile-contact-links {
175        padding: 4px 2px 5px;
176        border: 1px solid #E0E2E5;
177        background-color: #F8FAFC;
178}
179.profile-contact-info .btn-link{
180        &:hover > [class*="icon-"] , &:focus > [class*="icon-"]{
181                text-decoration:none;
182        }
183}
184.profile-social-links  > a {
185        text-decoration:none;
186        margin:0 1px;
187        &:hover > [class*="icon-"] {
188                text-decoration:none;
189        }
190}
191
192
193
194.profile-skills .progress {
195        height: 26px;
196        margin-bottom: 2px;
197        background-color:transparent;
198        .progress-bar {
199                line-height:26px;
200                font-size:13px; font-weight:bold;
201                font-family:"Open Sans";
202                padding:0 8px;
203        }
204}
205
206
207
208.profile-users {
209        .user {
210                display:block;
211                position:static;
212                text-align:center;
213                width:auto;
214               
215                img {
216                        padding:2px;
217                        .border-radius(100%);
218                        border:1px solid #AAA;
219
220                        max-width:none;
221                        width:64px;
222                       
223                        .transition(~"all 0.1s");
224                       
225                        &:hover {
226                                .box-shadow(~"0 0 1px 1px rgba(0,0,0,0.33)");
227                        }
228                }
229        }
230
231        .memberdiv {
232                background-color:#FFF;
233                width:100px;
234
235                .box-sizing(border-box);
236                border:none;
237                text-align:center;
238
239                margin:0 8px 24px;
240               
241                .name a:hover [class*="icon-"] {
242                        text-decoration:none;
243                }
244               
245                .body {
246                        display:inline-block;
247                        margin:8px 0 0 0;
248                }
249
250                .popover {
251                        visibility:hidden;
252                        min-width: 150px;
253                 
254                        margin-left:0;
255                        margin-right:0;
256
257                        top:-5%;
258                        left:auto; right:auto;
259                        z-index:-1;
260                        opacity:0;
261                        display:none;
262
263                        .transition(~"visibility 0s linear 0.2s, z-index 0s linear 0.2s, opacity 0.2s linear 0s");
264                       
265                        &.right {
266                                left:100%;
267                                right:auto;
268                                display:block;
269                        }
270                        &.left {
271                                left:auto;
272                                right:100%;
273                                display:block;
274                        }
275                }
276                > :first-child:hover .popover {
277                        visibility:visible;
278                        opacity:1;
279                        z-index:@zindex-popover;
280                       
281                        -webkit-transition-delay:0s;
282                        -moz-transition-delay:0s;
283                        -o-transition-delay:0s;
284                        transition-delay:0s;
285                }
286
287                .tools {
288                        position:static;
289                        display:block;
290                        width:100%;
291                        margin-top:2px;
292                        > a {
293                                margin:0 2px;
294                                &:hover {
295                                        text-decoration:none;
296                                }
297                        }
298                }
299
300        }
301       
302}
303
304
305
306
307.user-status {
308        display:inline-block;
309        width:11px; height:11px;
310        background-color:#FFF;
311        border:3px solid #AAA;
312        .border-radius(100%);
313        vertical-align:middle;
314        margin-right:1px;
315       
316        &.status-online{
317                border-color:#8AC16C;
318        }
319        &.status-busy{
320                border-color:#E07F69;
321        }
322        &.status-idle{
323                border-color:#FFB752;
324        }
325}
326
327
328
329
330.tab-content.profile-edit-tab-content {
331        border:1px solid #DDD;
332        padding:8px 32px 32px;
333        .box-shadow(~"1px 1px 0 0 rgba(0, 0, 0, 0.2)");
334       
335        background-color: #FFF;
336}
337
338
339
340
341
342
343
344/** profile **/
345@media only screen and (max-width: @screen-xs) {
346 .profile-info-name {
347        width:80px;
348 }
349 .profile-info-value {
350        margin-left:90px;
351 }
352
353 .profile-user-info-striped .profile-info-name {
354        position:static;
355        width:auto;
356        text-align:left;
357        padding:6px 0 6px 10px;
358 }
359 .profile-user-info-striped .profile-info-value {
360        margin-left:10px;
361 }
362}
363
364@media only screen and (max-width: @screen-xs) {
365 .user-profile .memberdiv {
366        width:50%;
367        margin-left:0;
368        margin-right:0;
369 }
370}
371
Note: See TracBrowser for help on using the repository browser.