| @@ -1,7 +1,10 @@ | ||
| 1 | 1 | // Authorizer Settings (wp-admin) styles. |
| 2 | -// Compiles to: authorizer.css via `lessc authorizer.scss authorizer.css`. | |
| 2 | +// Compiles to: authorizer.css via `sass css/authorizer.scss css/authorizer.css`. | |
| 3 | 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'; | |
| 4 | 7 | |
| 5 | 8 | // Target just the Dashboard > Authorizer, and Network Dashboard > Authorizer. |
| 6 | 9 | .toplevel_page_authorizer, |
| 7 | 10 | .settings_page_authorizer { |
| @@ -14,9 +17,9 @@ | ||
| 14 | 17 | top: 0; |
| 15 | 18 | left: 0; |
| 16 | 19 | width: 100%; |
| 17 | 20 | height: 100%; |
| 18 | - opacity: 0.2; | |
| 21 | + opacity: 0; | |
| 19 | 22 | z-index: -1; |
| 20 | 23 | transition: opacity 1s ease; |
| 21 | 24 | } |
| 22 | 25 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
| @@ -35,19 +38,10 @@ | ||
| 35 | 38 | #list_auth_settings_access_users_blocked { |
| 36 | 39 | margin-bottom: 0; |
| 37 | 40 | } |
| 38 | 41 | |
| 39 | - // Fade multisite users (not editable). | |
| 40 | - .auth-multisite-username, | |
| 41 | - .auth-multisite-email, | |
| 42 | - .auth-multisite-role, | |
| 43 | - .auth-multisite-usermeta, | |
| 44 | - .auth-multisite-date-added { | |
| 45 | - opacity: 0.5; | |
| 46 | - } | |
| 47 | - | |
| 48 | 42 | // Demo CAS login button sizing. |
| 49 | - .button-external { | |
| 43 | + .button.button-external { | |
| 50 | 44 | padding: 3px 16px; |
| 51 | 45 | height: 40px; |
| 52 | 46 | } |
| 53 | 47 | .button-external .dashicons { |
| @@ -72,8 +66,19 @@ | ||
| 72 | 66 | display: inline; |
| 73 | 67 | } |
| 74 | 68 | } |
| 75 | 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 | + | |
| 76 | 81 | // Mobile screen sizing. |
| 77 | 82 | @media screen and (max-width: 782px) { |
| 78 | 83 | .animated_wrapper { |
| 79 | 84 | width: 100% !important; |
| @@ -164,13 +169,15 @@ | ||
| 164 | 169 | |
| 165 | 170 | |
| 166 | 171 | // Flex layout for user lists (pending, approved, blocked). |
| 167 | 172 | #list_auth_settings_access_users_pending li, |
| 168 | - #new_auth_settings_access_users_pending, | |
| 169 | 173 | #list_auth_settings_access_users_approved li, |
| 170 | 174 | #new_auth_settings_access_users_approved, |
| 171 | 175 | #list_auth_settings_access_users_blocked li, |
| 172 | 176 | #new_auth_settings_access_users_blocked { |
| 177 | + display: flex; | |
| 178 | + justify-content: flex-start; | |
| 179 | + | |
| 173 | 180 | // Spacing between elements. |
| 174 | 181 | & > :not(:last-child) { margin-right: 4px; } |
| 175 | 182 | |
| 176 | 183 | // Let email and role grow the most. |
| @@ -181,29 +188,37 @@ | ||
| 181 | 188 | |
| 182 | 189 | |
| 183 | 190 | // Target just the Dashboard widget. |
| 184 | 191 | #auth_dashboard_widget { |
| 192 | + // Style the settings icon in the meta box header. | |
| 193 | + .js-toggle-auth_settings_dashboard_widget_control { | |
| 194 | + display: inline-block; | |
| 195 | + .toggle-indicator:before { | |
| 196 | + content: "\f111"; | |
| 197 | + display: inline-block; | |
| 198 | + font: normal 20px/1 dashicons; | |
| 199 | + } | |
| 200 | + } | |
| 201 | + | |
| 185 | 202 | // Disable fixed height in table nav (widget usually too narrow so search |
| 186 | 203 | // wraps to second line). |
| 187 | 204 | .tablenav { |
| 188 | 205 | height: auto; |
| 189 | 206 | |
| 190 | - .tablenav-pages { | |
| 191 | - float: none; | |
| 207 | + // Fix offset current page input relative to pager buttons. | |
| 208 | + .current-page { | |
| 209 | + margin-top: -4px; | |
| 192 | 210 | } |
| 193 | - | |
| 194 | - #user-search-input { | |
| 195 | - max-width: 80px; | |
| 196 | - } | |
| 197 | 211 | } |
| 198 | 212 | |
| 199 | 213 | // Tighter flex layout for user lists (pending, approved, blocked). |
| 200 | 214 | #list_auth_settings_access_users_pending li, |
| 201 | - #new_auth_settings_access_users_pending, | |
| 202 | 215 | #list_auth_settings_access_users_approved li, |
| 203 | 216 | #new_auth_settings_access_users_approved, |
| 204 | 217 | #list_auth_settings_access_users_blocked li, |
| 205 | 218 | #new_auth_settings_access_users_blocked { |
| 219 | + display: flex; | |
| 220 | + justify-content: flex-start; | |
| 206 | 221 | flex-wrap: wrap; |
| 207 | 222 | margin-bottom: 12px; |
| 208 | 223 | |
| 209 | 224 | // Spacing between elements. |
| @@ -214,9 +229,9 @@ | ||
| 214 | 229 | // Let email and role grow the most. |
| 215 | 230 | & > :nth-child(1) { flex-grow: 1; } |
| 216 | 231 | |
| 217 | 232 | // Shrink role dropdown. |
| 218 | - .auth-role { max-width: 80px; } | |
| 233 | + .auth-role { max-width: 140px; } | |
| 219 | 234 | |
| 220 | 235 | // Specifically shrink fields when near media breakpoints to prevent |
| 221 | 236 | // wrapping to a second line when it's "really close." |
| 222 | 237 | // Breakpoints: |
| @@ -237,8 +252,22 @@ | ||
| 237 | 252 | // 4 column: > 1800px |
| 238 | 253 | @media only screen and (max-width: 1800px) and (min-width:1500px) { |
| 239 | 254 | } |
| 240 | 255 | } |
| 256 | + | |
| 257 | + // Use flexbox to keep everything on one line in approved list. | |
| 258 | + #list_auth_settings_access_users_pending li, | |
| 259 | + #list_auth_settings_access_users_approved li, | |
| 260 | + #new_auth_settings_access_users_approved { | |
| 261 | + flex-wrap: nowrap; | |
| 262 | + & > * { flex: 0 0 auto; } | |
| 263 | + & > :nth-child(1) { flex-shrink: 1; } | |
| 264 | + & > :nth-child(2) { flex-shrink: 2; } | |
| 265 | + & > :nth-child(3) { flex-shrink: 2; } | |
| 266 | + & > :nth-child(4) { flex-shrink: 2; } | |
| 267 | + & > :nth-child(5) { flex-shrink: 1; } | |
| 268 | + input, select { min-width: 0; } | |
| 269 | + } | |
| 241 | 270 | } |
| 242 | 271 | |
| 243 | 272 | |
| 244 | 273 | // Target Dashboard > Authorizer, Network Dashboard > Authorizer, and Dashboard |
| @@ -245,24 +274,20 @@ | ||
| 245 | 274 | // widget. |
| 246 | 275 | .toplevel_page_authorizer, |
| 247 | 276 | .settings_page_authorizer, |
| 248 | 277 | #auth_dashboard_widget { |
| 278 | + // Dashicons in buttons. | |
| 279 | + .button.dashicons-before:before { | |
| 280 | + vertical-align: middle; | |
| 281 | + padding-right: 2px; | |
| 282 | + font-size: 16px; | |
| 283 | + } | |
| 284 | + | |
| 249 | 285 | // Room at the bottom for logo. |
| 250 | 286 | #wpbody-content { |
| 251 | 287 | padding-bottom: 240px; |
| 252 | 288 | } |
| 253 | 289 | |
| 254 | - // Flex layout for user lists (pending, approved, blocked). | |
| 255 | - #list_auth_settings_access_users_pending li, | |
| 256 | - #new_auth_settings_access_users_pending, | |
| 257 | - #list_auth_settings_access_users_approved li, | |
| 258 | - #new_auth_settings_access_users_approved, | |
| 259 | - #list_auth_settings_access_users_blocked li, | |
| 260 | - #new_auth_settings_access_users_blocked { | |
| 261 | - display: flex; | |
| 262 | - justify-content: flex-start; | |
| 263 | - } | |
| 264 | - | |
| 265 | 290 | // Hide Role dropdown on Blocked user list. |
| 266 | 291 | #list_auth_settings_access_users_blocked .auth-role, |
| 267 | 292 | #new_auth_settings_access_users_blocked .auth-role { |
| 268 | 293 | display: none; |
| @@ -270,25 +295,34 @@ | ||
| 270 | 295 | |
| 271 | 296 | // Colors for user lists. |
| 272 | 297 | #list_auth_settings_access_users_pending { |
| 273 | 298 | .auth-email { |
| 274 | - border-color: #ecf195; | |
| 275 | - background-color: #f5f8c4; | |
| 299 | + background-color: $color-yellow-5; | |
| 300 | + border-color: $color-yellow-20; | |
| 276 | 301 | } |
| 277 | 302 | } |
| 278 | 303 | #list_auth_settings_access_users_approved { |
| 279 | 304 | .auth-email { |
| 280 | - background-color: #dcf0be; | |
| 281 | - border-color: #8dc33c; | |
| 305 | + background-color: $color-green-5; | |
| 306 | + border-color: $color-green-20; | |
| 282 | 307 | } |
| 283 | 308 | } |
| 284 | 309 | #list_auth_settings_access_users_blocked { |
| 285 | 310 | .auth-email { |
| 286 | - background-color: #facbc5; | |
| 287 | - border-color: #ea7e70; | |
| 311 | + background-color: $color-red-5; | |
| 312 | + border-color: $color-red-20; | |
| 288 | 313 | } |
| 289 | 314 | } |
| 290 | 315 | |
| 316 | + // Fade multisite users (not editable). | |
| 317 | + .auth-multisite-username, | |
| 318 | + .auth-multisite-email, | |
| 319 | + .auth-multisite-role, | |
| 320 | + .auth-multisite-usermeta, | |
| 321 | + .auth-multisite-date-added { | |
| 322 | + opacity: 0.5; | |
| 323 | + } | |
| 324 | + | |
| 291 | 325 | // Cap max size of date and meta (no need for them to grow large). |
| 292 | 326 | .auth-date-added, |
| 293 | 327 | .auth-usermeta { |
| 294 | 328 | max-width: 80px; |
| @@ -299,17 +333,22 @@ | ||
| 299 | 333 | visibility: hidden; |
| 300 | 334 | } |
| 301 | 335 | |
| 302 | 336 | // Multisite overlays. |
| 337 | + form table.form-table td { | |
| 338 | + position: relative; | |
| 339 | + } | |
| 303 | 340 | .auth_multisite_override_overlay { |
| 304 | 341 | .overlay-note { |
| 305 | - background: white; | |
| 306 | - border: 1px solid #aaa; | |
| 342 | + background: $color-white; | |
| 343 | + border: 1px solid $color-gray-30; | |
| 307 | 344 | cursor: default; |
| 308 | 345 | margin: 11px 15em; |
| 309 | 346 | opacity: 0; |
| 310 | 347 | padding: 8px; |
| 311 | 348 | position: absolute; |
| 349 | + top: 0; | |
| 350 | + left: 0; | |
| 312 | 351 | -webkit-transition: opacity 0.1s ease-in-out; |
| 313 | 352 | -moz-transition: opacity 0.1s ease-in-out; |
| 314 | 353 | transition: opacity 0.1s ease-in-out; |
| 315 | 354 | |
| @@ -537,47 +576,8 @@ | ||
| 537 | 576 | } |
| 538 | 577 | .btn .caret { |
| 539 | 578 | margin-left: 0; |
| 540 | 579 | } |
| 541 | -} | |
| 542 | - | |
| 543 | -// Bootstrap icons. | |
| 544 | -@font-face { | |
| 545 | - font-family: 'Glyphicons Halflings'; | |
| 546 | - src: url('../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot'); | |
| 547 | - src: url('../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../vendor/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../vendor/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); | |
| 548 | -} | |
| 549 | -.glyphicon { | |
| 550 | - display: inline-block; | |
| 551 | - font-family: 'Glyphicons Halflings'; | |
| 552 | - -webkit-font-smoothing: antialiased; | |
| 553 | - font-style: normal; | |
| 554 | - font-weight: normal; | |
| 555 | - line-height: 2; | |
| 556 | - -moz-osx-font-smoothing: grayscale; | |
| 557 | - position: relative; | |
| 558 | - top: 2px; | |
| 559 | -} | |
| 560 | -.glyphicon-user:before { | |
| 561 | - content: "\e008"; | |
| 562 | -} | |
| 563 | -.glyphicon-globe:before { | |
| 564 | - content: "\e135"; | |
| 565 | -} | |
| 566 | -.glyphicon-ok:before { | |
| 567 | - content: "\e013"; | |
| 568 | -} | |
| 569 | -.glyphicon-ban-circle:before { | |
| 570 | - content: "\e090"; | |
| 571 | -} | |
| 572 | -.glyphicon-remove-circle:before { | |
| 573 | - content: "\e088"; | |
| 574 | -} | |
| 575 | -.glyphicon-remove:before { | |
| 576 | - content: "\e014"; | |
| 577 | -} | |
| 578 | -.glyphicon-floppy-saved:before { | |
| 579 | - content: "\e173"; | |
| 580 | 580 | } |
| 581 | 581 | |
| 582 | 582 | // Busy cursor for ajax calls. |
| 583 | 583 | html.busy, html.busy * { |
