PluginProbe
Authorizer / 3.8.5
Authorizer v3.8.5
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.5, at css/authorizer.scss

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