bfbbfe0fa395a2d738eb623302b58e4208b4bfef
[moodle.git] / theme / boost / scss / moodle / user.scss
1 /* user.less */
2 .userprofile .fullprofilelink {
3     text-align: center;
4     margin: 10px;
5 }
7 .userprofile .page-context-header {
8     margin-bottom: 10px;
9 }
11 .userprofile .description {
12     margin-top: 10px;
13     margin-bottom: 30px;
14 }
16 .userprofile .profile_tree {
17     column-count: 2;
18 }
20 // This rule overrides the automatic no-overflow on the participants table. It kills the auto-complete.
21 #participantsform .no-overflow {
22     overflow: visible;
23 }
25 .userprofile dl.list {
26     // Copied from dl.row.
27     > dd + dt {
28         clear: left;
29     }
30 }
32 .user-box {
33     margin: 8px;
34     width: 115px;
35     height: 160px;
36     text-align: center;
37     float: left;
38     clear: none;
39 }
41 #page-user-profile .node_category,
42 .path-user .node_category {
43     ul {
44         margin: 0;
45         list-style: none;
46         padding-left: 0;
47     }
49     li {
50         margin-top: 5px;
51     }
53     .editprofile,
54     .viewmore {
55         text-align: right;
56     }
57 }
59 .ajax-contact-button {
60     box-sizing: border-box;
61     position: relative;
63     &.loading {
64         .loading-icon {
65             display: block;
66         }
67     }
69     .loading-icon {
70         display: none;
71         position: absolute;
72         top: 0;
73         left: 0;
74         width: 100%;
75         height: 100%;
76         background-color: rgba(255, 255, 255, 0.7);
78         .icon {
79             position: absolute;
80             left: 50%;
81             top: 50%;
82             transform: translate(-50%, -50%);
83         }
84     }
85 }
87 @media (max-width: 480px) {
88     .userprofile .profile_tree {
89         /** Display the profile on one column on phones@mixin  */
90         column-count: 1;
91     }
92 }
94 .userlist #showall {
95     margin: 10px 0;
96 }
98 .userlist .buttons {
99     text-align: center;
102 .userlist .buttons label {
103     padding: 0 3px;
106 .userlist table#participants {
107     text-align: center;
110 .userlist table#participants td {
111     text-align: left;
112     padding: 4px;
113     vertical-align: middle;
116 .userlist table#participants th {
117     text-align: left;
118     padding: 4px;
121 .userlist {
122     table.controls {
123         width: 100%;
125         tr {
126             vertical-align: top;
127         }
129         .right {
130             text-align: right;
131         }
133         .groupselector {
134             margin-bottom: 0;
135             margin-top: 0;
137             label {
138                 display: block;
139             }
140         }
141     }
144 .userinfobox {
145     width: 100%;
146     border: 1px solid;
147     border-collapse: separate;
148     padding: 10px;
151 .userinfobox .left,
152 .userinfobox .side {
153     width: 100px;
154     vertical-align: top;
157 .userinfobox .userpicture {
158     width: 100px;
159     height: 100px;
162 .userinfobox .content {
163     vertical-align: top;
166 .userinfobox .links {
167     width: 100px;
168     padding: 5px;
169     vertical-align: bottom;
172 .userinfobox .links a {
173     display: block;
176 .userinfobox .list td {
177     padding: 3px;
180 .userinfobox .username {
181     padding-bottom: 20px;
182     font-weight: bold;
185 .userinfobox td.label {
186     text-align: right;
187     white-space: nowrap;
188     vertical-align: top;
189     font-weight: bold;
192 .group-edit {
193     position: absolute;
194     right: 0;
195     margin-right: 0.6em;
198 .group-image {
199     display: block;
200     float: left;
201     margin-right: 1em;
203     .grouppicture {
204         border-radius: 50%;
205     }
208 .groupinfobox .left {
209     padding: 10px;
210     width: 100px;
211     vertical-align: top;
214 .course-participation #showall {
215     text-align: center;
216     margin: 10px 0;
219 #user-policy .noticebox {
220     text-align: center;
221     margin-left: auto;
222     margin-right: auto;
223     margin-bottom: 10px;
224     width: 80%;
225     height: 250px;
228 #user-policy #policyframe {
229     width: 100%;
230     height: 100%;
233 .iplookup #map {
234     margin: auto;
237 .userselector select {
238     width: 100%;
241 .userselector div {
242     margin-top: 0.2em;
245 .userselector div label {
246     margin-right: 0.3em;
248 /* Next style does not work in all browsers but looks nicer when it does */
249 .userselector .userselector-infobelow {
250     font-size: 0.8em;
253 #userselector_options .collapsibleregioncaption {
254     font-weight: bold;
257 #userselector_options p {
258     margin: 0.2em 0;
259     text-align: left;
261 /** user full profile */
262 #page-user-profile .messagebox {
263     text-align: center;
264     margin-left: auto;
265     margin-right: auto;
267 /** user course profile */
268 #page-course-view-weeks .messagebox {
269     text-align: center;
270     margin-left: auto;
271     margin-right: auto;
274 .profileeditor {
275     > .singleselect {
276         margin: 0 0.5em 0 0;
277     }
279     > .singlebutton {
280         display: inline-block;
281         margin: 0 0 0 0.5em;
283         div,
284         input {
285             margin: 0;
286         }
287     }
290 // Remove the little cog from participants page because we are putting a cog menu there.
291 .userlist h3 .action-icon {
292     display: none;
295 #page-enrol-users .popover {
296     max-width: none;
299 .user-enroller-panel {
300     width: 600px;
303 [data-filterverbfor],
304 [data-filterregion="filter"]:last-child [data-filterregion="joinadverb"] {
305     display: none;
308 [data-filterverb="0"] [data-filterverbfor="0"],
309 [data-filterverb="1"] [data-filterverbfor="1"],
310 [data-filterverb="2"] [data-filterverbfor="2"] {
311     display: block;