MDL-60515 groups: Display group information on the participants page.
[moodle.git] / theme / bootstrapbase / less / moodle / user.less
1 /* user.less */
2 .userprofile .fullprofilelink {
3     text-align: center;
4     margin: 10px;
5 }
6 .userprofile .page-context-header {
7     margin-bottom: 10px;
8 }
9 .userprofile .description {
10     margin-top: 10px;
11     margin-bottom: 30px;
12 }
13 .userprofile .profile_tree {
14     .content-columns(2);
15 }
16 .userprofile .profile_tree section {
17     display: inline-block;
18     width: 100%;
19     border: 1px solid #ddd;
20     border-radius: @baseBorderRadius;
21     padding: 0 15px;
22     margin-bottom: 20px;
23     .box-sizing(border-box);
24 }
25 .userprofile .profile_tree section h3 {
26     font-size: round(@baseFontSize * 1.30);
27     line-height: @baseLineHeight;
28 }
29 .userprofile dl.list {
30     .dl-horizontal;
31 }
32 .user-box {
33     margin: 8px;
34     width: 115px;
35     height: 160px;
36     text-align: center;
37     float: left;
38     clear: none;
39 }
40 #page-user-profile .node_category,
41 .path-user .node_category {
42     ul {
43         margin-left: 0;
44         margin-right: 0;
45         list-style: none;
46     }
47     li {
48         margin-top: 5px;
49     }
50     .editprofile,
51     .viewmore {
52         text-align: right;
53     }
54 }
55 // This rule overrides the automatic no-overflow on the participants table. It kills the auto-complete.
56 #participantsform .no-overflow {
57     overflow: visible;
58 }
60 /**
61  * This rule has been added to duplicate the style of icons with the
62  * .iconsmall class for consistent rendering.
63  *
64  * Loading a pix icon using the template helper returns icons with
65  * the class 'smallicon' instead of 'iconsmall'.
66  */
67 #page-user-profile {
68     .ajax-contact-button {
69         img {
70             &.smallicon {
71                 margin: 0;
72                 padding: 0.3em;
73                 height: 12px;
74                 width: 12px;
75                 vertical-align: middle;
76             }
77         }
78     }
79 }
81 .ajax-contact-button {
82     box-sizing: border-box;
83     position: relative;
85     &.loading {
86         .loading-icon {
87             display: block;
88         }
89     }
91     .loading-icon {
92         display: none;
93         position: absolute;
94         top: 0;
95         left: 0;
96         width: 100%;
97         height: 100%;
98         background-color: rgba(255, 255, 255, 0.7);
100         .smallicon {
101             position: absolute;
102             left: 50%;
103             top: 50%;
104             transform: translate(-50%, -50%);
105         }
106     }
109 @media (max-width: 480px) {
110     .userprofile .profile_tree {
111         /** Display the profile on one column on phones. */
112         .content-columns(1);
113     }
116 .userlist .action-icon img {
117     vertical-align: middle;
119 .userlist #showall {
120     margin: 10px 0;
122 .userlist .buttons {
123     text-align: center;
125 .userlist .buttons label {
126     padding: 0 3px;
128 .userlist table#participants {
129     text-align: center;
131 .userlist table#participants td {
132     text-align: left;
133     padding: 4px;
134     vertical-align: middle;
136 .userlist table#participants th {
137     text-align: left;
138     padding: 4px;
140 .userlist {
141     table.controls {
142         width: 100%;
143         tr {
144             vertical-align: top;
145         }
146         .right {
147             text-align: right;
148         }
149         .groupselector {
150             margin-bottom: 0;
151             margin-top: 0;
152             label {
153                 display: block;
154             }
155         }
156     }
158 .userinfobox {
159     width: 100%;
160     border: 1px solid;
161     border-collapse: separate;
162     padding: 10px;
164 .userinfobox .left,
165 .userinfobox .side {
166     width: 100px;
167     vertical-align: top;
169 .userinfobox .userpicture {
170     width: 100px;
171     height: 100px;
173 .userinfobox .content {
174     vertical-align: top;
176 .userinfobox .links {
177     width: 100px;
178     padding: 5px;
179     vertical-align: bottom;
181 .userinfobox .links a {
182     display: block;
184 .userinfobox .list td {
185     padding: 3px;
187 .userinfobox .username {
188     padding-bottom: 20px;
189     font-weight: bold;
191 .userinfobox td.label {
192     text-align: right;
193     white-space: nowrap;
194     vertical-align: top;
195     font-weight: bold;
197 .groupinfobox {
198     .well
200 .groupinfobox .left {
201     padding: 10px;
202     width: 100px;
203     vertical-align: top;
206 .group-image {
207     min-width: 60px;
210 .course-participation #showall {
211     text-align: center;
212     margin: 10px 0;
214 #user-policy .noticebox {
215     text-align: center;
216     margin-left: auto;
217     margin-right: auto;
218     margin-bottom: 10px;
219     width: 80%;
220     height: 250px;
222 #user-policy #policyframe {
223     width: 100%;
224     height: 100%;
226 .iplookup #map {
227     margin: auto;
229 .userselector select {
230     width: 100%;
232 .userselector div {
233     margin-top: 0.2em;
235 .userselector div label {
236     margin-right: 0.3em;
238 /* Next style does not work in all browsers but looks nicer when it does */
239 .userselector .userselector-infobelow {
240     font-size: 0.8em;
242 #userselector_options {
243     padding: 0.3em 0;
245 #userselector_options .collapsibleregioncaption {
246     font-weight: bold;
248 #userselector_options p {
249     margin: 0.2em 0;
250     text-align: left;
252 /** user full profile */
253 #page-user-profile .messagebox {
254     text-align: center;
255     margin-left: auto;
256     margin-right: auto;
258 /** user course profile */
259 #page-course-view-weeks .messagebox {
260     text-align: center;
261     margin-left: auto;
262     margin-right: auto;
265 .profileeditor {
266     > .singleselect {
267         margin: 0 0.5em 0 0;
268     }
269     > .singlebutton {
270         display: inline-block;
271         margin: 0 0 0 0.5em;
272         div,
273         input {
274             margin: 0;
275         }
276     }
279 /** Preferences page */
280 .preferences-group {
281     ul {
282         list-style: none;
283         margin-left: 0;
284         margin-right: 0;
285     }