PluginProbe
Authorizer / 3.15.1
Authorizer v3.15.1
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.15.1, at css/authorizer.scss

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