PluginProbe
Authorizer / 3.8.3
Authorizer v3.8.3
3.15.3 3.15.2 3.15.1 3.15.0 3.14.3 3.14.4 3.14.2 3.14.1 2.8.1 2.8.2 2.8.3 2.8.4 2.8.5 2.8.6 2.8.7 2.8.8 2.9.0 2.9.1 2.9.10 2.9.11 2.9.12 2.9.13 2.9.2 2.9.3 2.9.6 All 126 releases
authorizer / css / authorizer.scss

authorizer.scss in Authorizer 3.8.3, at css/authorizer.scss

601 lines 13.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 // Authorizer Settings (wp-admin) styles.
2 // Compiles to: authorizer.css via `sass css/authorizer.scss css/authorizer.css`.
3
4 // Import WordPress 5.7 admin colors.
5 // See: https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7/
6 @import 'wp-admin-colors';
7
8 // Target just the Dashboard > Authorizer, and Network Dashboard > Authorizer.
9 .toplevel_page_authorizer,
10 .settings_page_authorizer {
11 // Banner image (bottom corner; fade if not scrolled to the bottom).
12 #wpwrap::before {
13 background: url('../images/authorizer-banner-400x300.png') no-repeat right bottom;
14 background-attachment: fixed;
15 content: "";
16 position: absolute;
17 top: 0;
18 left: 0;
19 width: 100%;
20 height: 100%;
21 opacity: 0;
22 z-index: -1;
23 transition: opacity 1s ease;
24 }
25 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
26 #wpwrap::before {
27 background: url('../images/authorizer-banner-800x600.png') no-repeat right bottom;
28 background-size: 400px 300px;
29 }
30 }
31 #wpwrap.not-faded::before {
32 opacity: 1;
33 }
34
35 // No bottom margins on user lists.
36 #list_auth_settings_access_users_pending,
37 #list_auth_settings_access_users_approved,
38 #list_auth_settings_access_users_blocked {
39 margin-bottom: 0;
40 }
41
42 // Demo CAS login button sizing.
43 .button.button-external {
44 padding: 3px 16px;
45 height: 40px;
46 }
47 .button-external .dashicons {
48 margin: 4px 4px 0 0;
49 font-size: 24px;
50 }
51 .button-external input[type=text]=text] {
52 width: 100px;
53 }
54 @media screen and (max-width: 782px) {
55 .button-external {
56 width: 280px;
57 height: 50px;
58 font-size: 16px;
59 }
60 .button-external .dashicons {
61 margin: 4px 16px 0 0;
62 font-size: 30px;
63 }
64 .button-external input[type=text]=text] {
65 width: 120px;
66 display: inline;
67 }
68 }
69
70 // LDAP connection test.
71 #ldap_test_user_spinner {
72 float: none;
73 }
74 #ldap_test_user_result {
75 font-family: monospace;
76 width: 100%;
77 opacity: 0.8;
78 color: black;
79 }
80
81 // Mobile screen sizing.
82 @media screen and (max-width: 782px) {
83 .animated_wrapper {
84 width: 100% !important;
85 }
86 th {
87 padding: 8px 0 0;
88 }
89 td {
90 padding: 8px 0px;
91 }
92 #auth_settings_google_clientid {
93 width: 100%;
94 }
95
96 // Make pager fit on one line.
97 .tablenav {
98 .tablenav-pages {
99 text-align: left;
100 }
101
102 .current-page {
103 width: auto;
104 display: inline;
105 }
106 }
107
108 // Make "Limit invalid login attempts" inputs inline so they read like a
109 // sentence.
110 #auth_settings_advanced_lockouts_attempts_1,
111 #auth_settings_advanced_lockouts_duration_1,
112 #auth_settings_advanced_lockouts_attempts_2,
113 #auth_settings_advanced_lockouts_duration_2,
114 #auth_settings_advanced_lockouts_reset_duration {
115 display: inline;
116 }
117
118 // Textarea heights should match text/select heights on mobile.
119 textarea {
120 padding: 3px 10px;
121 line-height: 2;
122 min-height: 40px;
123 }
124
125 // Make Bootstrap button group label vertically centered.
126 @media screen and (max-width: 782px) {
127 .button-add-user {
128 line-height: 37px;
129 }
130 }
131 }
132
133 // Expand/collapse option sections.
134 .form-table {
135 th,
136 td {
137 &.hide-animate {
138 padding: 0;
139 transition: padding 0.25s ease;
140 }
141
142 &.hide-no-animate {
143 padding: 0;
144 }
145 }
146 }
147
148 // Remove 14px padding above pending user list (alignment with left label).
149 #list_auth_settings_access_users_pending {
150 margin: 6px 0;
151 }
152
153 // Remove 14px padding above blocked user list (alignment with left label).
154 #list_auth_settings_access_users_blocked {
155 margin: 0;
156 }
157
158 // Fix background and sizing of public pages (toggle lists).
159 .ms-container {
160 .ms-selectable,
161 .ms-selection {
162 background: none;
163 }
164 .ms-list {
165 background: white;
166
167 }
168 }
169
170
171 // Flex layout for user lists (pending, approved, blocked).
172 #list_auth_settings_access_users_pending li,
173 #list_auth_settings_access_users_approved li,
174 #new_auth_settings_access_users_approved,
175 #list_auth_settings_access_users_blocked li,
176 #new_auth_settings_access_users_blocked {
177 display: flex;
178 justify-content: flex-start;
179
180 // Spacing between elements.
181 & > :not(:last-child) { margin-right: 4px; }
182
183 // Let email and role grow the most.
184 & > :nth-child(1) { flex-grow: 4; }
185 & > :nth-child(2) { flex-grow: 2; }
186 }
187
188 // Section breaks for pages with many options.
189 table.form-table {
190 tr {
191 &.border-top {
192 border-top: 3px solid $color-gray-5;
193 }
194
195 &.border-top-small {
196 border-top: 1px solid $color-gray-5;
197 }
198 }
199 }
200 }
201
202
203 // Target just the Dashboard widget.
204 #auth_dashboard_widget {
205 // Style the settings icon in the meta box header.
206 .js-toggle-auth_settings_dashboard_widget_control {
207 display: inline-block;
208 .toggle-indicator:before {
209 content: "\f111";
210 display: inline-block;
211 font: normal 20px/1 dashicons;
212 }
213 }
214
215 // Disable fixed height in table nav (widget usually too narrow so search
216 // wraps to second line).
217 .tablenav {
218 height: auto;
219
220 // Fix offset current page input relative to pager buttons.
221 .current-page {
222 margin-top: -4px;
223 }
224 }
225
226 // Tighter flex layout for user lists (pending, approved, blocked).
227 #list_auth_settings_access_users_pending li,
228 #list_auth_settings_access_users_approved li,
229 #new_auth_settings_access_users_approved,
230 #list_auth_settings_access_users_blocked li,
231 #new_auth_settings_access_users_blocked {
232 display: flex;
233 justify-content: flex-start;
234 flex-wrap: wrap;
235 margin-bottom: 12px;
236
237 // Spacing between elements.
238 & > :not(:last-child) {
239 margin-right: 2px;
240 }
241
242 // Let email and role grow the most.
243 & > :nth-child(1) { flex-grow: 1; }
244
245 // Shrink role dropdown.
246 .auth-role { max-width: 140px; }
247
248 // Specifically shrink fields when near media breakpoints to prevent
249 // wrapping to a second line when it's "really close."
250 // Breakpoints:
251 // 1 column: < 800px
252 @media only screen and (max-width: 550px) and (min-width:0px) {
253 .auth-email { max-width: 140px; }
254 }
255 // 2 column: 800px - 1499px
256 @media only screen and (max-width: 900px) and (min-width:800px) {
257 .auth-email { max-width: 200px; }
258 .auth-role { max-width: 140px; }
259 }
260 // 3 column: 1500px - 1800px
261 @media only screen and (max-width: 1550px) and (min-width:1500px) {
262 .auth-email { max-width: 200px; }
263 .auth-role { max-width: 140px; }
264 }
265 // 4 column: > 1800px
266 @media only screen and (max-width: 1800px) and (min-width:1500px) {
267 }
268 }
269
270 // Use flexbox to keep everything on one line in approved list.
271 #list_auth_settings_access_users_pending li,
272 #list_auth_settings_access_users_approved li,
273 #new_auth_settings_access_users_approved {
274 flex-wrap: nowrap;
275 & > * { flex: 0 0 auto; }
276 & > :nth-child(1) { flex-shrink: 1; }
277 & > :nth-child(2) { flex-shrink: 2; }
278 & > :nth-child(3) { flex-shrink: 2; }
279 & > :nth-child(4) { flex-shrink: 2; }
280 & > :nth-child(5) { flex-shrink: 1; }
281 input, select { min-width: 0; }
282 }
283 }
284
285
286 // Target Dashboard > Authorizer, Network Dashboard > Authorizer, and Dashboard
287 // widget.
288 .toplevel_page_authorizer,
289 .settings_page_authorizer,
290 #auth_dashboard_widget {
291 // Dashicons in buttons.
292 .button.dashicons-before:before {
293 vertical-align: middle;
294 padding-right: 2px;
295 font-size: 16px;
296 }
297
298 // Room at the bottom for logo.
299 #wpbody-content {
300 padding-bottom: 240px;
301 }
302
303 // Hide Role dropdown on Blocked user list.
304 #list_auth_settings_access_users_blocked .auth-role,
305 #new_auth_settings_access_users_blocked .auth-role {
306 display: none;
307 }
308
309 // Colors for user lists.
310 #list_auth_settings_access_users_pending {
311 .auth-email {
312 background-color: $color-yellow-5;
313 border-color: $color-yellow-20;
314 }
315 }
316 #list_auth_settings_access_users_approved {
317 .auth-email {
318 background-color: $color-green-5;
319 border-color: $color-green-20;
320 }
321 }
322 #list_auth_settings_access_users_blocked {
323 .auth-email {
324 background-color: $color-red-5;
325 border-color: $color-red-20;
326 }
327 }
328
329 // Fade multisite users (not editable); don't do this on network admin page.
330 &:not(.network-admin) {
331 .auth-multisite-username,
332 .auth-multisite-email,
333 .auth-multisite-role,
334 .auth-multisite-usermeta,
335 .auth-multisite-date-added {
336 opacity: 0.5;
337 }
338 }
339
340 // Cap max size of date and meta (no need for them to grow large).
341 .auth-date-added,
342 .auth-usermeta {
343 max-width: 80px;
344 }
345
346 // Hidden element (maintains space).
347 .invisible {
348 visibility: hidden;
349 }
350
351 // Multisite overlays.
352 form table.form-table td {
353 position: relative;
354 }
355 .auth_multisite_override_overlay {
356 .overlay-note {
357 background: $color-white;
358 border: 1px solid $color-gray-30;
359 cursor: default;
360 margin: 11px 15em;
361 opacity: 0;
362 padding: 8px;
363 position: absolute;
364 top: 0;
365 left: 0;
366 -webkit-transition: opacity 0.1s ease-in-out;
367 -moz-transition: opacity 0.1s ease-in-out;
368 transition: opacity 0.1s ease-in-out;
369
370 a {
371 cursor: pointer;
372 }
373 }
374 &:hover .overlay-note { opacity: 1; }
375 }
376
377 // Bootstrap customizations (typically because of conflicts with WordPress styles)
378 .dropdown-menu > li {
379 margin-bottom: 0 !important;
380 }
381 .dropdown-menu > li > a {
382 text-decoration: none !important;
383 white-space: normal !important; // Allow text to wrap to multiple lines.
384 }
385 .dropdown-toggle {
386 border-bottom: 0;
387 }
388 .dropdown-toggle-split {
389 padding-right: .5625rem;
390 padding-left: .5625rem;
391
392 &::after {
393 margin-left: 0;
394 }
395 }
396
397 // Portions below from Bootstrap.
398 // http://getbootstrap.com/getting-started/#download
399 .sr-only {
400 border: 0;
401 clip: rect(0, 0, 0, 0);
402 height: 1px;
403 margin: -1px;
404 overflow: hidden;
405 padding: 0;
406 position: absolute;
407 width: 1px;
408 }
409
410 .caret {
411 border-left: 4px solid transparent;
412 border-right: 4px solid transparent;
413 border-top: 4px solid;
414 display: inline-block;
415 height: 0;
416 margin-left: 2px;
417 vertical-align: middle;
418 width: 0;
419 }
420 .dropdown {
421 position: relative;
422 }
423 .dropdown-toggle:focus {
424 outline: 0;
425 }
426 .dropdown-menu {
427 background-clip: padding-box;
428 background-color: #fff;
429 border: 1px solid #ccc;
430 border: 1px solid rgba(0, 0, 0, .15);
431 border-radius: 4px;
432 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
433 box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
434 display: none;
435 float: left;
436 font-size: 14px;
437 right: 0;
438 list-style: none;
439 margin: 2px 0 0;
440 min-width: 160px;
441 padding: 5px 0;
442 position: absolute;
443 top: 100%;
444 z-index: 1000;
445 }
446 .dropdown-menu.pull-right {
447 left: auto;
448 right: 0;
449 }
450 .dropdown-menu .divider {
451 background-color: #e5e5e5;
452 height: 1px;
453 margin: 9px 0;
454 overflow: hidden;
455 }
456 .dropdown-menu > li > a {
457 clear: both;
458 color: #333;
459 display: block;
460 font-weight: normal;
461 line-height: 1.42857143;
462 padding: 3px 20px;
463 white-space: nowrap;
464 }
465 .dropdown-menu > li > a:hover,
466 .dropdown-menu > li > a:focus {
467 background-color: #f5f5f5;
468 color: #262626;
469 text-decoration: none;
470 }
471 .dropdown-menu > .active > a,
472 .dropdown-menu > .active > a:hover,
473 .dropdown-menu > .active > a:focus {
474 background-color: #428bca;
475 color: #fff;
476 outline: 0;
477 text-decoration: none;
478 }
479 .dropdown-menu > .disabled > a,
480 .dropdown-menu > .disabled > a:hover,
481 .dropdown-menu > .disabled > a:focus {
482 color: #999;
483 }
484 .dropdown-menu > .disabled > a:hover,
485 .dropdown-menu > .disabled > a:focus {
486 background-color: transparent;
487 background-image: none;
488 cursor: not-allowed;
489 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
490 text-decoration: none;
491 }
492 .open > .dropdown-menu {
493 display: block;
494 }
495 .open > a {
496 outline: 0;
497 }
498
499 .btn-group,
500 .btn-group-vertical {
501 display: inline-flex;
502 position: relative;
503 vertical-align: middle;
504 }
505 .btn-group > .btn,
506 .btn-group-vertical > .btn {
507 flex: 0 1 auto;
508 position: relative;
509 }
510 .btn-group > .btn:hover,
511 .btn-group-vertical > .btn:hover,
512 .btn-group > .btn:focus,
513 .btn-group-vertical > .btn:focus,
514 .btn-group > .btn:active,
515 .btn-group-vertical > .btn:active,
516 .btn-group > .btn.active,
517 .btn-group-vertical > .btn.active {
518 z-index: 2;
519 }
520 .btn-group > .btn:focus,
521 .btn-group-vertical > .btn:focus {
522 outline: none;
523 }
524 .btn-group .btn + .btn,
525 .btn-group .btn + .btn-group,
526 .btn-group .btn-group + .btn,
527 .btn-group .btn-group + .btn-group {
528 margin-left: -1px;
529 }
530 .btn-toolbar {
531 margin-left: -5px;
532 }
533 .btn-toolbar .btn-group,
534 .btn-toolbar .input-group {
535 float: left;
536 }
537 .btn-toolbar > .btn,
538 .btn-toolbar > .btn-group,
539 .btn-toolbar > .input-group {
540 margin-left: 5px;
541 }
542 .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
543 border-radius: 0;
544 }
545 .btn-group > .btn:first-child {
546 margin-left: 0;
547 }
548 .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
549 border-bottom-right-radius: 0;
550 border-top-right-radius: 0;
551 }
552 .btn-group > .btn:last-child:not(:first-child),
553 .btn-group > .dropdown-toggle:not(:first-child) {
554 border-bottom-left-radius: 0;
555 border-top-left-radius: 0;
556 }
557 .btn-group > .btn-group {
558 float: left;
559 }
560 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
561 border-radius: 0;
562 }
563 .btn-group > .btn-group:first-child > .btn:last-child,
564 .btn-group > .btn-group:first-child > .dropdown-toggle {
565 border-bottom-right-radius: 0;
566 border-top-right-radius: 0;
567 }
568 .btn-group > .btn-group:last-child > .btn:first-child {
569 border-bottom-left-radius: 0;
570 border-top-left-radius: 0;
571 }
572 .btn-group .dropdown-toggle:active,
573 .btn-group.open .dropdown-toggle {
574 outline: 0;
575 }
576 .btn-group > .btn + .dropdown-toggle {
577 padding-left: 8px;
578 padding-right: 8px;
579 }
580 .btn-group > .btn-lg + .dropdown-toggle {
581 padding-left: 12px;
582 padding-right: 12px;
583 }
584 .btn-group.open .dropdown-toggle {
585 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
586 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
587 }
588 .btn-group.open .dropdown-toggle.btn-link {
589 -webkit-box-shadow: none;
590 box-shadow: none;
591 }
592 .btn .caret {
593 margin-left: 0;
594 }
595 }
596
597 // Busy cursor for ajax calls.
598 html.busy, html.busy * {
599 cursor: wait !important;
600 }
601