PluginProbe
Authorizer / 3.10.1
Authorizer v3.10.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.10.1, at css/authorizer.scss

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