| @@ -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,13 +66,21 @@ | ||
| 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 | - .animated_wrapper { | |
| 79 | - width: 100% !important; | |
| 80 | - } | |
| 81 | 83 | th { |
| 82 | 84 | padding: 8px 0 0; |
| 83 | 85 | } |
| 84 | 86 | td { |
| @@ -128,11 +130,12 @@ | ||
| 128 | 130 | // Expand/collapse option sections. |
| 129 | 131 | .form-table { |
| 130 | 132 | th, |
| 131 | 133 | td { |
| 134 | + transition: padding 0.25s ease; | |
| 135 | + | |
| 132 | 136 | &.hide-animate { |
| 133 | 137 | padding: 0; |
| 134 | - transition: padding 0.25s ease; | |
| 135 | 138 | } |
| 136 | 139 | |
| 137 | 140 | &.hide-no-animate { |
| 138 | 141 | padding: 0; |
| @@ -164,13 +167,15 @@ | ||
| 164 | 167 | |
| 165 | 168 | |
| 166 | 169 | // Flex layout for user lists (pending, approved, blocked). |
| 167 | 170 | #list_auth_settings_access_users_pending li, |
| 168 | - #new_auth_settings_access_users_pending, | |
| 169 | 171 | #list_auth_settings_access_users_approved li, |
| 170 | 172 | #new_auth_settings_access_users_approved, |
| 171 | 173 | #list_auth_settings_access_users_blocked li, |
| 172 | 174 | #new_auth_settings_access_users_blocked { |
| 175 | + display: flex; | |
| 176 | + justify-content: flex-start; | |
| 177 | + | |
| 173 | 178 | // Spacing between elements. |
| 174 | 179 | & > :not(:last-child) { margin-right: 4px; } |
| 175 | 180 | |
| 176 | 181 | // Let email and role grow the most. |
| @@ -176,34 +181,55 @@ | ||
| 176 | 181 | // Let email and role grow the most. |
| 177 | 182 | & > :nth-child(1) { flex-grow: 4; } |
| 178 | 183 | & > :nth-child(2) { flex-grow: 2; } |
| 179 | 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 | + } | |
| 180 | 198 | } |
| 181 | 199 | |
| 182 | 200 | |
| 183 | 201 | // Target just the Dashboard widget. |
| 184 | 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 | + | |
| 185 | 213 | // Disable fixed height in table nav (widget usually too narrow so search |
| 186 | 214 | // wraps to second line). |
| 187 | 215 | .tablenav { |
| 188 | 216 | height: auto; |
| 189 | 217 | |
| 190 | - .tablenav-pages { | |
| 191 | - float: none; | |
| 218 | + // Fix offset current page input relative to pager buttons. | |
| 219 | + .current-page { | |
| 220 | + margin-top: -4px; | |
| 192 | 221 | } |
| 193 | - | |
| 194 | - #user-search-input { | |
| 195 | - max-width: 80px; | |
| 196 | - } | |
| 197 | 222 | } |
| 198 | 223 | |
| 199 | 224 | // Tighter flex layout for user lists (pending, approved, blocked). |
| 200 | 225 | #list_auth_settings_access_users_pending li, |
| 201 | - #new_auth_settings_access_users_pending, | |
| 202 | 226 | #list_auth_settings_access_users_approved li, |
| 203 | 227 | #new_auth_settings_access_users_approved, |
| 204 | 228 | #list_auth_settings_access_users_blocked li, |
| 205 | 229 | #new_auth_settings_access_users_blocked { |
| 230 | + display: flex; | |
| 231 | + justify-content: flex-start; | |
| 206 | 232 | flex-wrap: wrap; |
| 207 | 233 | margin-bottom: 12px; |
| 208 | 234 | |
| 209 | 235 | // Spacing between elements. |
| @@ -214,9 +240,9 @@ | ||
| 214 | 240 | // Let email and role grow the most. |
| 215 | 241 | & > :nth-child(1) { flex-grow: 1; } |
| 216 | 242 | |
| 217 | 243 | // Shrink role dropdown. |
| 218 | - .auth-role { max-width: 80px; } | |
| 244 | + .auth-role { max-width: 140px; } | |
| 219 | 245 | |
| 220 | 246 | // Specifically shrink fields when near media breakpoints to prevent |
| 221 | 247 | // wrapping to a second line when it's "really close." |
| 222 | 248 | // Breakpoints: |
| @@ -237,8 +263,22 @@ | ||
| 237 | 263 | // 4 column: > 1800px |
| 238 | 264 | @media only screen and (max-width: 1800px) and (min-width:1500px) { |
| 239 | 265 | } |
| 240 | 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 | + } | |
| 241 | 281 | } |
| 242 | 282 | |
| 243 | 283 | |
| 244 | 284 | // Target Dashboard > Authorizer, Network Dashboard > Authorizer, and Dashboard |
| @@ -245,24 +285,20 @@ | ||
| 245 | 285 | // widget. |
| 246 | 286 | .toplevel_page_authorizer, |
| 247 | 287 | .settings_page_authorizer, |
| 248 | 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 | + | |
| 249 | 296 | // Room at the bottom for logo. |
| 250 | 297 | #wpbody-content { |
| 251 | 298 | padding-bottom: 240px; |
| 252 | 299 | } |
| 253 | 300 | |
| 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 | 301 | // Hide Role dropdown on Blocked user list. |
| 266 | 302 | #list_auth_settings_access_users_blocked .auth-role, |
| 267 | 303 | #new_auth_settings_access_users_blocked .auth-role { |
| 268 | 304 | display: none; |
| @@ -270,26 +306,37 @@ | ||
| 270 | 306 | |
| 271 | 307 | // Colors for user lists. |
| 272 | 308 | #list_auth_settings_access_users_pending { |
| 273 | 309 | .auth-email { |
| 274 | - border-color: #ecf195; | |
| 275 | - background-color: #f5f8c4; | |
| 310 | + background-color: $color-yellow-5; | |
| 311 | + border-color: $color-yellow-20; | |
| 276 | 312 | } |
| 277 | 313 | } |
| 278 | 314 | #list_auth_settings_access_users_approved { |
| 279 | 315 | .auth-email { |
| 280 | - background-color: #dcf0be; | |
| 281 | - border-color: #8dc33c; | |
| 316 | + background-color: $color-green-5; | |
| 317 | + border-color: $color-green-20; | |
| 282 | 318 | } |
| 283 | 319 | } |
| 284 | 320 | #list_auth_settings_access_users_blocked { |
| 285 | 321 | .auth-email { |
| 286 | - background-color: #facbc5; | |
| 287 | - border-color: #ea7e70; | |
| 322 | + background-color: $color-red-5; | |
| 323 | + border-color: $color-red-20; | |
| 288 | 324 | } |
| 289 | 325 | } |
| 290 | 326 | |
| 291 | - // Cap max size of date and meta (no need for them to grow large). | |
| 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). | |
| 292 | 339 | .auth-date-added, |
| 293 | 340 | .auth-usermeta { |
| 294 | 341 | max-width: 80px; |
| 295 | 342 | } |
| @@ -299,17 +346,22 @@ | ||
| 299 | 346 | visibility: hidden; |
| 300 | 347 | } |
| 301 | 348 | |
| 302 | 349 | // Multisite overlays. |
| 350 | + form table.form-table td { | |
| 351 | + position: relative; | |
| 352 | + } | |
| 303 | 353 | .auth_multisite_override_overlay { |
| 304 | 354 | .overlay-note { |
| 305 | - background: white; | |
| 306 | - border: 1px solid #aaa; | |
| 355 | + background: $color-white; | |
| 356 | + border: 1px solid $color-gray-30; | |
| 307 | 357 | cursor: default; |
| 308 | 358 | margin: 11px 15em; |
| 309 | 359 | opacity: 0; |
| 310 | 360 | padding: 8px; |
| 311 | 361 | position: absolute; |
| 362 | + top: 0; | |
| 363 | + left: 0; | |
| 312 | 364 | -webkit-transition: opacity 0.1s ease-in-out; |
| 313 | 365 | -moz-transition: opacity 0.1s ease-in-out; |
| 314 | 366 | transition: opacity 0.1s ease-in-out; |
| 315 | 367 | |
| @@ -537,47 +589,8 @@ | ||
| 537 | 589 | } |
| 538 | 590 | .btn .caret { |
| 539 | 591 | margin-left: 0; |
| 540 | 592 | } |
| 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 | 593 | } |
| 581 | 594 | |
| 582 | 595 | // Busy cursor for ajax calls. |
| 583 | 596 | html.busy, html.busy * { |
