| @@ -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 { |
| @@ -117,22 +119,35 @@ | ||
| 117 | 119 | min-height: 40px; |
| 118 | 120 | } |
| 119 | 121 | |
| 120 | 122 | // Make Bootstrap button group label vertically centered. |
| 121 | - @media screen and (max-width: 782px) { | |
| 122 | - .button-add-user { | |
| 123 | - line-height: 37px; | |
| 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; | |
| 124 | 133 | } |
| 125 | 134 | } |
| 126 | 135 | } |
| 127 | 136 | |
| 137 | + // select2 dropdown tweaks. | |
| 138 | + .select2-selection__choice__remove { | |
| 139 | + padding: 5px; | |
| 140 | + } | |
| 141 | + | |
| 128 | 142 | // Expand/collapse option sections. |
| 129 | 143 | .form-table { |
| 130 | 144 | th, |
| 131 | 145 | td { |
| 146 | + transition: padding 0.25s ease; | |
| 147 | + | |
| 132 | 148 | &.hide-animate { |
| 133 | 149 | padding: 0; |
| 134 | - transition: padding 0.25s ease; | |
| 135 | 150 | } |
| 136 | 151 | |
| 137 | 152 | &.hide-no-animate { |
| 138 | 153 | padding: 0; |
| @@ -161,16 +176,22 @@ | ||
| 161 | 176 | |
| 162 | 177 | } |
| 163 | 178 | } |
| 164 | 179 | |
| 180 | + // Allow 100% width text fields with .wide class. | |
| 181 | + input[type="text"].wide { | |
| 182 | + width: 100%; | |
| 183 | + } | |
| 165 | 184 | |
| 166 | 185 | // Flex layout for user lists (pending, approved, blocked). |
| 167 | 186 | #list_auth_settings_access_users_pending li, |
| 168 | - #new_auth_settings_access_users_pending, | |
| 169 | 187 | #list_auth_settings_access_users_approved li, |
| 170 | 188 | #new_auth_settings_access_users_approved, |
| 171 | 189 | #list_auth_settings_access_users_blocked li, |
| 172 | 190 | #new_auth_settings_access_users_blocked { |
| 191 | + display: flex; | |
| 192 | + justify-content: flex-start; | |
| 193 | + | |
| 173 | 194 | // Spacing between elements. |
| 174 | 195 | & > :not(:last-child) { margin-right: 4px; } |
| 175 | 196 | |
| 176 | 197 | // Let email and role grow the most. |
| @@ -176,34 +197,64 @@ | ||
| 176 | 197 | // Let email and role grow the most. |
| 177 | 198 | & > :nth-child(1) { flex-grow: 4; } |
| 178 | 199 | & > :nth-child(2) { flex-grow: 2; } |
| 179 | 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 | + } | |
| 180 | 223 | } |
| 181 | 224 | |
| 182 | 225 | |
| 183 | 226 | // Target just the Dashboard widget. |
| 184 | 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 | + | |
| 185 | 238 | // Disable fixed height in table nav (widget usually too narrow so search |
| 186 | 239 | // wraps to second line). |
| 187 | 240 | .tablenav { |
| 188 | 241 | height: auto; |
| 189 | 242 | |
| 190 | - .tablenav-pages { | |
| 191 | - float: none; | |
| 243 | + // Fix offset current page input relative to pager buttons. | |
| 244 | + .current-page { | |
| 245 | + margin-top: -4px; | |
| 192 | 246 | } |
| 193 | - | |
| 194 | - #user-search-input { | |
| 195 | - max-width: 80px; | |
| 196 | - } | |
| 197 | 247 | } |
| 198 | 248 | |
| 199 | 249 | // Tighter flex layout for user lists (pending, approved, blocked). |
| 200 | 250 | #list_auth_settings_access_users_pending li, |
| 201 | - #new_auth_settings_access_users_pending, | |
| 202 | 251 | #list_auth_settings_access_users_approved li, |
| 203 | 252 | #new_auth_settings_access_users_approved, |
| 204 | 253 | #list_auth_settings_access_users_blocked li, |
| 205 | 254 | #new_auth_settings_access_users_blocked { |
| 255 | + display: flex; | |
| 256 | + justify-content: flex-start; | |
| 206 | 257 | flex-wrap: wrap; |
| 207 | 258 | margin-bottom: 12px; |
| 208 | 259 | |
| 209 | 260 | // Spacing between elements. |
| @@ -214,9 +265,9 @@ | ||
| 214 | 265 | // Let email and role grow the most. |
| 215 | 266 | & > :nth-child(1) { flex-grow: 1; } |
| 216 | 267 | |
| 217 | 268 | // Shrink role dropdown. |
| 218 | - .auth-role { max-width: 80px; } | |
| 269 | + .auth-role { max-width: 140px; } | |
| 219 | 270 | |
| 220 | 271 | // Specifically shrink fields when near media breakpoints to prevent |
| 221 | 272 | // wrapping to a second line when it's "really close." |
| 222 | 273 | // Breakpoints: |
| @@ -237,8 +288,22 @@ | ||
| 237 | 288 | // 4 column: > 1800px |
| 238 | 289 | @media only screen and (max-width: 1800px) and (min-width:1500px) { |
| 239 | 290 | } |
| 240 | 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 | + } | |
| 241 | 306 | } |
| 242 | 307 | |
| 243 | 308 | |
| 244 | 309 | // Target Dashboard > Authorizer, Network Dashboard > Authorizer, and Dashboard |
| @@ -245,24 +310,20 @@ | ||
| 245 | 310 | // widget. |
| 246 | 311 | .toplevel_page_authorizer, |
| 247 | 312 | .settings_page_authorizer, |
| 248 | 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 | + | |
| 249 | 321 | // Room at the bottom for logo. |
| 250 | 322 | #wpbody-content { |
| 251 | 323 | padding-bottom: 240px; |
| 252 | 324 | } |
| 253 | 325 | |
| 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 | 326 | // Hide Role dropdown on Blocked user list. |
| 266 | 327 | #list_auth_settings_access_users_blocked .auth-role, |
| 267 | 328 | #new_auth_settings_access_users_blocked .auth-role { |
| 268 | 329 | display: none; |
| @@ -270,26 +331,37 @@ | ||
| 270 | 331 | |
| 271 | 332 | // Colors for user lists. |
| 272 | 333 | #list_auth_settings_access_users_pending { |
| 273 | 334 | .auth-email { |
| 274 | - border-color: #ecf195; | |
| 275 | - background-color: #f5f8c4; | |
| 335 | + background-color: $color-yellow-5; | |
| 336 | + border-color: $color-yellow-20; | |
| 276 | 337 | } |
| 277 | 338 | } |
| 278 | 339 | #list_auth_settings_access_users_approved { |
| 279 | 340 | .auth-email { |
| 280 | - background-color: #dcf0be; | |
| 281 | - border-color: #8dc33c; | |
| 341 | + background-color: $color-green-5; | |
| 342 | + border-color: $color-green-20; | |
| 282 | 343 | } |
| 283 | 344 | } |
| 284 | 345 | #list_auth_settings_access_users_blocked { |
| 285 | 346 | .auth-email { |
| 286 | - background-color: #facbc5; | |
| 287 | - border-color: #ea7e70; | |
| 347 | + background-color: $color-red-5; | |
| 348 | + border-color: $color-red-20; | |
| 288 | 349 | } |
| 289 | 350 | } |
| 290 | 351 | |
| 291 | - // Cap max size of date and meta (no need for them to grow large). | |
| 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). | |
| 292 | 364 | .auth-date-added, |
| 293 | 365 | .auth-usermeta { |
| 294 | 366 | max-width: 80px; |
| 295 | 367 | } |
| @@ -299,17 +371,22 @@ | ||
| 299 | 371 | visibility: hidden; |
| 300 | 372 | } |
| 301 | 373 | |
| 302 | 374 | // Multisite overlays. |
| 375 | + form table.form-table td { | |
| 376 | + position: relative; | |
| 377 | + } | |
| 303 | 378 | .auth_multisite_override_overlay { |
| 304 | 379 | .overlay-note { |
| 305 | - background: white; | |
| 306 | - border: 1px solid #aaa; | |
| 380 | + background: $color-white; | |
| 381 | + border: 1px solid $color-gray-30; | |
| 307 | 382 | cursor: default; |
| 308 | - margin: 11px 15em; | |
| 383 | + margin: 0 15em; | |
| 309 | 384 | opacity: 0; |
| 310 | 385 | padding: 8px; |
| 311 | 386 | position: absolute; |
| 387 | + top: 0; | |
| 388 | + left: 0; | |
| 312 | 389 | -webkit-transition: opacity 0.1s ease-in-out; |
| 313 | 390 | -moz-transition: opacity 0.1s ease-in-out; |
| 314 | 391 | transition: opacity 0.1s ease-in-out; |
| 315 | 392 | |
| @@ -537,47 +614,8 @@ | ||
| 537 | 614 | } |
| 538 | 615 | .btn .caret { |
| 539 | 616 | margin-left: 0; |
| 540 | 617 | } |
| 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 | 618 | } |
| 581 | 619 | |
| 582 | 620 | // Busy cursor for ajax calls. |
| 583 | 621 | html.busy, html.busy * { |
