MDL-60515 groups: Display group information on the participants page.
[moodle.git] / theme / bootstrapbase / less / moodle / user.less
CommitLineData
8903b17b
BB
1/* user.less */
2.userprofile .fullprofilelink {
3 text-align: center;
4 margin: 10px;
5}
1da2e3a6
BR
6.userprofile .page-context-header {
7 margin-bottom: 10px;
8}
8903b17b 9.userprofile .description {
1da2e3a6
BR
10 margin-top: 10px;
11 margin-bottom: 30px;
8903b17b 12}
b19cc4ef
AA
13.userprofile .profile_tree {
14 .content-columns(2);
15}
16.userprofile .profile_tree section {
17 display: inline-block;
18 width: 100%;
1da2e3a6
BR
19 border: 1px solid #ddd;
20 border-radius: @baseBorderRadius;
21 padding: 0 15px;
22 margin-bottom: 20px;
39f360ae 23 .box-sizing(border-box);
1da2e3a6
BR
24}
25.userprofile .profile_tree section h3 {
26 font-size: round(@baseFontSize * 1.30);
27 line-height: @baseLineHeight;
b19cc4ef 28}
8903b17b
BB
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}
1da2e3a6
BR
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 }
b19cc4ef 47 li {
1da2e3a6
BR
48 margin-top: 5px;
49 }
50 .editprofile,
51 .viewmore {
52 text-align: right;
b19cc4ef 53 }
b19cc4ef 54}
76c493b3
DW
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}
fd8eab57
RW
59
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}
80
12d8c7b2 81.ajax-contact-button {
12d8c7b2 82 box-sizing: border-box;
fd8eab57 83 position: relative;
12d8c7b2
RW
84
85 &.loading {
12d8c7b2
RW
86 .loading-icon {
87 display: block;
88 }
89 }
fd8eab57 90
12d8c7b2
RW
91 .loading-icon {
92 display: none;
fd8eab57
RW
93 position: absolute;
94 top: 0;
95 left: 0;
96 width: 100%;
97 height: 100%;
98 background-color: rgba(255, 255, 255, 0.7);
99
100 .smallicon {
101 position: absolute;
102 left: 50%;
103 top: 50%;
104 transform: translate(-50%, -50%);
105 }
12d8c7b2
RW
106 }
107}
b19cc4ef 108
15699bad
FM
109@media (max-width: 480px) {
110 .userprofile .profile_tree {
111 /** Display the profile on one column on phones. */
112 .content-columns(1);
113 }
114}
115
3b42864d 116.userlist .action-icon img {
8903b17b
BB
117 vertical-align: middle;
118}
119.userlist #showall {
120 margin: 10px 0;
121}
122.userlist .buttons {
123 text-align: center;
124}
125.userlist .buttons label {
126 padding: 0 3px;
127}
128.userlist table#participants {
129 text-align: center;
130}
bb3216f8
LB
131.userlist table#participants td {
132 text-align: left;
133 padding: 4px;
8903b17b 134 vertical-align: middle;
bb3216f8
LB
135}
136.userlist table#participants th {
8903b17b
BB
137 text-align: left;
138 padding: 4px;
139}
f82bc6be
FM
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 }
a71b1f13 157}
8903b17b
BB
158.userinfobox {
159 width: 100%;
160 border: 1px solid;
161 border-collapse: separate;
162 padding: 10px;
163}
164.userinfobox .left,
165.userinfobox .side {
166 width: 100px;
167 vertical-align: top;
168}
169.userinfobox .userpicture {
170 width: 100px;
171 height: 100px;
172}
173.userinfobox .content {
174 vertical-align: top;
175}
176.userinfobox .links {
177 width: 100px;
178 padding: 5px;
179 vertical-align: bottom;
180}
181.userinfobox .links a {
182 display: block;
183}
184.userinfobox .list td {
185 padding: 3px;
186}
187.userinfobox .username {
188 padding-bottom: 20px;
189 font-weight: bold;
190}
191.userinfobox td.label {
192 text-align: right;
193 white-space: nowrap;
194 vertical-align: top;
195 font-weight: bold;
196}
197.groupinfobox {
cef25b2a 198 .well
8903b17b
BB
199}
200.groupinfobox .left {
201 padding: 10px;
202 width: 100px;
203 vertical-align: top;
204}
349b705d
AG
205
206.group-image {
207 min-width: 60px;
208}
209
8903b17b
BB
210.course-participation #showall {
211 text-align: center;
212 margin: 10px 0;
213}
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;
221}
222#user-policy #policyframe {
223 width: 100%;
224 height: 100%;
225}
226.iplookup #map {
227 margin: auto;
228}
229.userselector select {
230 width: 100%;
231}
232.userselector div {
233 margin-top: 0.2em;
234}
235.userselector div label {
236 margin-right: 0.3em;
237}
238/* Next style does not work in all browsers but looks nicer when it does */
239.userselector .userselector-infobelow {
240 font-size: 0.8em;
241}
242#userselector_options {
243 padding: 0.3em 0;
244}
245#userselector_options .collapsibleregioncaption {
246 font-weight: bold;
247}
248#userselector_options p {
249 margin: 0.2em 0;
250 text-align: left;
251}
8903b17b
BB
252/** user full profile */
253#page-user-profile .messagebox {
254 text-align: center;
255 margin-left: auto;
256 margin-right: auto;
257}
258/** user course profile */
259#page-course-view-weeks .messagebox {
260 text-align: center;
261 margin-left: auto;
262 margin-right: auto;
263}
3fa787ae
SH
264
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;
0e878352
DP
272 div,
273 input {
3fa787ae
SH
274 margin: 0;
275 }
276 }
277}
0a33c8ca 278
0e8418a8
FM
279/** Preferences page */
280.preferences-group {
281 ul {
282 list-style: none;
283 margin-left: 0;
284 margin-right: 0;
285 }
286}