265d53e81dc5b480fdcb530857b71c2489718844
[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;
205 .course-participation #showall {
206     text-align: center;
207     margin: 10px 0;
209 #user-policy .noticebox {
210     text-align: center;
211     margin-left: auto;
212     margin-right: auto;
213     margin-bottom: 10px;
214     width: 80%;
215     height: 250px;
217 #user-policy #policyframe {
218     width: 100%;
219     height: 100%;
221 .iplookup #map {
222     margin: auto;
224 .userselector select {
225     width: 100%;
227 .userselector div {
228     margin-top: 0.2em;
230 .userselector div label {
231     margin-right: 0.3em;
233 /* Next style does not work in all browsers but looks nicer when it does */
234 .userselector .userselector-infobelow {
235     font-size: 0.8em;
237 #userselector_options {
238     padding: 0.3em 0;
240 #userselector_options .collapsibleregioncaption {
241     font-weight: bold;
243 #userselector_options p {
244     margin: 0.2em 0;
245     text-align: left;
247 /** user full profile */
248 #page-user-profile .messagebox {
249     text-align: center;
250     margin-left: auto;
251     margin-right: auto;
253 /** user course profile */
254 #page-course-view-weeks .messagebox {
255     text-align: center;
256     margin-left: auto;
257     margin-right: auto;
260 .profileeditor {
261     > .singleselect {
262         margin: 0 0.5em 0 0;
263     }
264     > .singlebutton {
265         display: inline-block;
266         margin: 0 0 0 0.5em;
267         div,
268         input {
269             margin: 0;
270         }
271     }
274 /** Preferences page */
275 .preferences-group {
276     ul {
277         list-style: none;
278         margin-left: 0;
279         margin-right: 0;
280     }