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

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