[Summary view] [Print] [Text view]

   1  /* Include margin and padding in the width calculation of input and textarea. */
   2  input,
   3  select,
   4  textarea,
   5  button {
   6      box-sizing: border-box;
   7      font-family: inherit;
   8      font-size: inherit;
   9      font-weight: inherit;
  10  }
  11  
  12  textarea,
  13  input {
  14      font-size: 14px;
  15  }
  16  
  17  textarea {
  18      overflow: auto;
  19      padding: 2px 6px;
  20      /* inherits font size 14px */
  21      line-height: 1.42857143; /* 20px */
  22      resize: vertical;
  23  }
  24  
  25  input,
  26  select {
  27      margin: 0 1px;
  28  }
  29  
  30  textarea.code {
  31      padding: 4px 6px 1px;
  32  }
  33  
  34  input[type="text"],
  35  input[type="password"],
  36  input[type="color"],
  37  input[type="date"],
  38  input[type="datetime"],
  39  input[type="datetime-local"],
  40  input[type="email"],
  41  input[type="month"],
  42  input[type="number"],
  43  input[type="search"],
  44  input[type="tel"],
  45  input[type="time"],
  46  input[type="url"],
  47  input[type="week"],
  48  select,
  49  textarea {
  50      box-shadow: 0 0 0 transparent;
  51      border-radius: 4px;
  52      border: 1px solid #8c8f94;
  53      background-color: #fff;
  54      color: #2c3338;
  55  }
  56  
  57  input[type="text"],
  58  input[type="password"],
  59  input[type="date"],
  60  input[type="datetime"],
  61  input[type="datetime-local"],
  62  input[type="email"],
  63  input[type="month"],
  64  input[type="number"],
  65  input[type="search"],
  66  input[type="tel"],
  67  input[type="time"],
  68  input[type="url"],
  69  input[type="week"] {
  70      padding: 0 8px;
  71      /* inherits font size 14px */
  72      line-height: 2; /* 28px */
  73      /* Only necessary for IE11 */
  74      min-height: 30px;
  75  }
  76  
  77  ::-webkit-datetime-edit {
  78      /* inherits font size 14px */
  79      line-height: 1.85714286; /* 26px */
  80  }
  81  
  82  input[type="text"]:focus,
  83  input[type="password"]:focus,
  84  input[type="color"]:focus,
  85  input[type="date"]:focus,
  86  input[type="datetime"]:focus,
  87  input[type="datetime-local"]:focus,
  88  input[type="email"]:focus,
  89  input[type="month"]:focus,
  90  input[type="number"]:focus,
  91  input[type="search"]:focus,
  92  input[type="tel"]:focus,
  93  input[type="time"]:focus,
  94  input[type="url"]:focus,
  95  input[type="week"]:focus,
  96  input[type="checkbox"]:focus,
  97  input[type="radio"]:focus,
  98  select:focus,
  99  textarea:focus {
 100      border-color: #2271b1;
 101      box-shadow: 0 0 0 1px #2271b1;
 102      /* Only visible in Windows High Contrast mode */
 103      outline: 2px solid transparent;
 104  }
 105  
 106  /* rtl:ignore */
 107  input[type="email"],
 108  input[type="url"] {
 109      direction: ltr;
 110  }
 111  
 112  input[type="checkbox"],
 113  input[type="radio"] {
 114      border: 1px solid #8c8f94;
 115      border-radius: 4px;
 116      background: #fff;
 117      color: #50575e;
 118      clear: none;
 119      cursor: pointer;
 120      display: inline-block;
 121      line-height: 0;
 122      height: 1rem;
 123      margin: -0.25rem 0.25rem 0 0;
 124      outline: 0;
 125      padding: 0 !important;
 126      text-align: center;
 127      vertical-align: middle;
 128      width: 1rem;
 129      min-width: 1rem;
 130      -webkit-appearance: none;
 131      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 132      transition: .05s border-color ease-in-out;
 133  }
 134  
 135  input[type="radio"]:checked + label:before {
 136      color: #8c8f94;
 137  }
 138  
 139  .wp-core-ui input[type="reset"]:hover,
 140  .wp-core-ui input[type="reset"]:active {
 141      color: #135e96;
 142  }
 143  
 144  td > input[type="checkbox"],
 145  .wp-admin p input[type="checkbox"],
 146  .wp-admin p input[type="radio"] {
 147      margin-top: 0;
 148  }
 149  
 150  .wp-admin p label input[type="checkbox"] {
 151      margin-top: -4px;
 152  }
 153  
 154  .wp-admin p label input[type="radio"] {
 155      margin-top: -2px;
 156  }
 157  
 158  input[type="radio"] {
 159      border-radius: 50%;
 160      margin-right: 0.25rem;
 161      /* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */
 162      line-height: 0.71428571;
 163  }
 164  
 165  input[type="checkbox"]:checked::before,
 166  input[type="radio"]:checked::before {
 167      float: left;
 168      display: inline-block;
 169      vertical-align: middle;
 170      width: 1rem;
 171      speak: never;
 172      -webkit-font-smoothing: antialiased;
 173      -moz-osx-font-smoothing: grayscale;
 174  }
 175  
 176  input[type="checkbox"]:checked::before {
 177      /* Use the "Yes" SVG Dashicon */
 178      content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E");
 179      margin: -0.1875rem 0 0 -0.25rem;
 180      height: 1.3125rem;
 181      width: 1.3125rem;
 182  }
 183  
 184  input[type="radio"]:checked::before {
 185      content: "";
 186      border-radius: 50%;
 187      width: 0.5rem; /* 8px */
 188      height: 0.5rem; /* 8px */
 189      margin: 0.1875rem; /* 3px */
 190      background-color: #3582c4;
 191      /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */
 192      line-height: 1.14285714;
 193  }
 194  
 195  @-moz-document url-prefix() {
 196      input[type="checkbox"],
 197      input[type="radio"],
 198      .form-table input.tog {
 199          margin-bottom: -1px;
 200      }
 201  }
 202  
 203  /* Search */
 204  input[type="search"] {
 205      -webkit-appearance: textfield;
 206  }
 207  
 208  input[type="search"]::-webkit-search-decoration {
 209      display: none;
 210  }
 211  
 212  .wp-admin input[type="file"] {
 213      padding: 3px 0;
 214      cursor: pointer;
 215  }
 216  
 217  input.readonly,
 218  input[readonly],
 219  textarea.readonly,
 220  textarea[readonly] {
 221      background-color: #f0f0f1;
 222  }
 223  
 224  ::-webkit-input-placeholder {
 225      color: #646970;
 226  }
 227  
 228  ::-moz-placeholder {
 229      color: #646970;
 230      opacity: 1;
 231  }
 232  
 233  :-ms-input-placeholder {
 234      color: #646970;
 235  }
 236  
 237  .form-invalid .form-required,
 238  .form-invalid .form-required:focus,
 239  .form-invalid.form-required input,
 240  .form-invalid.form-required input:focus,
 241  .form-invalid.form-required select,
 242  .form-invalid.form-required select:focus {
 243      border-color: #d63638 !important;
 244      box-shadow: 0 0 2px rgba(214, 54, 56, 0.8);
 245  }
 246  
 247  .form-table .form-required.form-invalid td:after {
 248      content: "\f534";
 249      font: normal 20px/1 dashicons;
 250      color: #d63638;
 251      margin-left: -25px;
 252      vertical-align: middle;
 253  }
 254  
 255  /* Adjust error indicator for password layout */
 256  .form-table .form-required.user-pass1-wrap.form-invalid td:after {
 257      content: "";
 258  }
 259  
 260  .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
 261      content: "\f534";
 262      font: normal 20px/1 dashicons;
 263      color: #d63638;
 264      margin: 0 6px 0 -29px;
 265      vertical-align: middle;
 266  }
 267  
 268  .form-input-tip {
 269      color: #646970;
 270  }
 271  
 272  input:disabled,
 273  input.disabled,
 274  select:disabled,
 275  select.disabled,
 276  textarea:disabled,
 277  textarea.disabled {
 278      background: rgba(255, 255, 255, 0.5);
 279      border-color: rgba(220, 220, 222, 0.75);
 280      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
 281      color: rgba(44, 51, 56, 0.5);
 282  }
 283  
 284  input[type="file"]:disabled,
 285  input[type="file"].disabled,
 286  input[type="file"][aria-disabled="true"],
 287  input[type="range"]:disabled,
 288  input[type="range"].disabled,
 289  input[type="range"][aria-disabled="true"] {
 290      background: none;
 291      box-shadow: none;
 292      cursor: default;
 293  }
 294  
 295  input[type="checkbox"]:disabled,
 296  input[type="checkbox"].disabled,
 297  input[type="checkbox"][aria-disabled="true"],
 298  input[type="radio"]:disabled,
 299  input[type="radio"].disabled,
 300  input[type="radio"][aria-disabled="true"],
 301  input[type="checkbox"]:disabled:checked:before,
 302  input[type="checkbox"].disabled:checked:before,
 303  input[type="radio"]:disabled:checked:before,
 304  input[type="radio"].disabled:checked:before {
 305      opacity: 0.7;
 306      cursor: default;
 307  }
 308  
 309  /*------------------------------------------------------------------------------
 310    2.0 - Forms
 311  ------------------------------------------------------------------------------*/
 312  
 313  /* Select styles are based on the default button in buttons.css */
 314  .wp-core-ui select {
 315      font-size: 14px;
 316      line-height: 2; /* 28px */
 317      color: #2c3338;
 318      border-color: #8c8f94;
 319      box-shadow: none;
 320      border-radius: 3px;
 321      padding: 0 24px 0 8px;
 322      min-height: 30px;
 323      max-width: 25rem;
 324      -webkit-appearance: none;
 325      /* The SVG is arrow-down-alt2 from Dashicons. */
 326      background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
 327      background-size: 16px 16px;
 328      cursor: pointer;
 329      vertical-align: middle;
 330  }
 331  
 332  .wp-core-ui select:hover {
 333      color: #2271b1;
 334  }
 335  
 336  .wp-core-ui select:focus {
 337      border-color: #2271b1;
 338      color: #0a4b78;
 339      box-shadow: 0 0 0 1px #2271b1;
 340  }
 341  
 342  .wp-core-ui select:active {
 343      border-color: #8c8f94;
 344      box-shadow: none;
 345  }
 346  
 347  .wp-core-ui select.disabled,
 348  .wp-core-ui select:disabled {
 349      color: #a7aaad;
 350      border-color: #dcdcde;
 351      background-color: #f6f7f7;
 352      /* The SVG is arrow-down-alt2 from Dashicons. */
 353      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E');
 354      box-shadow: none;
 355      text-shadow: 0 1px 0 #fff;
 356      cursor: default;
 357      transform: none;
 358  }
 359  
 360  .wp-core-ui select[aria-disabled="true"] {
 361      cursor: default;
 362  }
 363  
 364  /* Reset Firefox inner outline that appears on :focus. */
 365  /* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
 366  .wp-core-ui select:-moz-focusring {
 367      color: transparent;
 368      text-shadow: 0 0 0 #0a4b78;
 369  }
 370  
 371  /* Remove background focus style from IE11 while keeping focus style available on option elements. */
 372  .wp-core-ui select::-ms-value {
 373      background: transparent;
 374      color: #50575e;
 375  }
 376  
 377  .wp-core-ui select:hover::-ms-value {
 378      color: #2271b1;
 379  }
 380  
 381  .wp-core-ui select:focus::-ms-value {
 382      color: #0a4b78;
 383  }
 384  
 385  .wp-core-ui select.disabled::-ms-value,
 386  .wp-core-ui select:disabled::-ms-value {
 387      color: #a7aaad;
 388  }
 389  
 390  /* Hide the native down arrow for select element on IE. */
 391  .wp-core-ui select::-ms-expand {
 392      display: none;
 393  }
 394  
 395  .wp-admin .button-cancel {
 396      display: inline-block;
 397      min-height: 28px;
 398      padding: 0 5px;
 399      line-height: 2;
 400  }
 401  
 402  .meta-box-sortables select {
 403      max-width: 100%;
 404  }
 405  
 406  .meta-box-sortables input {
 407      vertical-align: middle;
 408  }
 409  
 410  .misc-pub-post-status select {
 411      margin-top: 0;
 412  }
 413  
 414  .wp-core-ui select[multiple] {
 415      height: auto;
 416      padding-right: 8px;
 417      background: #fff;
 418  }
 419  
 420  .submit {
 421      padding: 1.5em 0;
 422      margin: 5px 0;
 423      border-bottom-left-radius: 3px;
 424      border-bottom-right-radius: 3px;
 425      border: none;
 426  }
 427  
 428  form p.submit a.cancel:hover {
 429      text-decoration: none;
 430  }
 431  
 432  p.submit {
 433      text-align: left;
 434      max-width: 100%;
 435      margin-top: 20px;
 436      padding-top: 10px;
 437  }
 438  
 439  .textright p.submit {
 440      border: none;
 441      text-align: right;
 442  }
 443  
 444  table.form-table + p.submit,
 445  table.form-table + input + p.submit,
 446  table.form-table + input + input + p.submit {
 447      border-top: none;
 448      padding-top: 0;
 449  }
 450  
 451  #minor-publishing-actions input,
 452  #major-publishing-actions input,
 453  #minor-publishing-actions .preview {
 454      text-align: center;
 455  }
 456  
 457  textarea.all-options,
 458  input.all-options {
 459      width: 250px;
 460  }
 461  
 462  input.large-text,
 463  textarea.large-text {
 464      width: 99%;
 465  }
 466  
 467  .regular-text {
 468      width: 25em;
 469  }
 470  
 471  input.small-text {
 472      width: 50px;
 473      padding: 0 6px;
 474  }
 475  
 476  label input.small-text {
 477      margin-top: -4px;
 478  }
 479  
 480  input[type="number"].small-text {
 481      width: 65px;
 482      padding-right: 0;
 483  }
 484  
 485  input.tiny-text {
 486      width: 35px;
 487  }
 488  
 489  input[type="number"].tiny-text {
 490      width: 45px;
 491      padding-right: 0;
 492  }
 493  
 494  #doaction,
 495  #doaction2,
 496  #post-query-submit {
 497      margin: 0 8px 0 0;
 498  }
 499  
 500  /* @since 5.7.0 secondary bulk action controls require JS. */
 501  .no-js label[for="bulk-action-selector-bottom"],
 502  .no-js select#bulk-action-selector-bottom,
 503  .no-js input#doaction2,
 504  .no-js label[for="new_role2"],
 505  .no-js select#new_role2,
 506  .no-js input#changeit2 {
 507      display: none;
 508  }
 509  
 510  .tablenav .actions select {
 511      float: left;
 512      margin-right: 6px;
 513      max-width: 12.5rem;
 514  }
 515  
 516  #timezone_string option {
 517      margin-left: 1em;
 518  }
 519  
 520  .wp-hide-pw > .dashicons,
 521  .wp-cancel-pw > .dashicons {
 522      position: relative;
 523      top: 3px;
 524      width: 1.25rem;
 525      height: 1.25rem;
 526      top: 0.25rem;
 527      font-size: 20px;
 528  }
 529  
 530  .wp-cancel-pw .dashicons-no {
 531      display: none;
 532  }
 533  
 534  label,
 535  #your-profile label + a {
 536      vertical-align: middle;
 537  }
 538  
 539  fieldset label,
 540  #your-profile label + a {
 541      vertical-align: middle;
 542  }
 543  
 544  .options-media-php [for*="_size_"] {
 545      min-width: 10em;
 546      vertical-align: baseline;
 547  }
 548  
 549  .options-media-php .small-text[name*="_size_"] {
 550      margin: 0 0 1em;
 551  }
 552  
 553  .wp-generate-pw {
 554      margin-top: 1em;
 555      position: relative;
 556  }
 557  
 558  .wp-pwd button {
 559      height: min-content;
 560  }
 561  
 562  .wp-pwd button.pwd-toggle .dashicons {
 563      position: relative;
 564      top: 0.25rem;
 565  }
 566  
 567  .wp-pwd {
 568      margin-top: 1em;
 569      position: relative;
 570  }
 571  
 572  .mailserver-pass-wrap .wp-pwd {
 573      display: inline-block;
 574      margin-top: 0;
 575  }
 576  
 577  /* rtl:ignore */
 578  #mailserver_pass {
 579      padding-right: 2.5rem;
 580  }
 581  
 582  /* rtl:ignore */
 583  .mailserver-pass-wrap .button.wp-hide-pw {
 584      background: transparent;
 585      border: 1px solid transparent;
 586      box-shadow: none;
 587      font-size: 14px;
 588      line-height: 2;
 589      width: 2.5rem;
 590      min-width: 40px;
 591      margin: 0;
 592      padding: 0 9px;
 593      position: absolute;
 594      right: 0;
 595      top: 0;
 596  }
 597  
 598  .mailserver-pass-wrap .button.wp-hide-pw:hover {
 599      background: transparent;
 600      border-color: transparent;
 601  }
 602  
 603  .mailserver-pass-wrap .button.wp-hide-pw:focus {
 604      background: transparent;
 605      border-color: #3582c4;
 606      border-radius: 4px;
 607      box-shadow: 0 0 0 1px #3582c4;
 608      /* Only visible in Windows High Contrast mode */
 609      outline: 2px solid transparent;
 610  }
 611  
 612  .mailserver-pass-wrap .button.wp-hide-pw:active {
 613      background: transparent;
 614      box-shadow: none;
 615      transform: none;
 616  }
 617  
 618  #misc-publishing-actions label {
 619      vertical-align: baseline;
 620  }
 621  
 622  #pass-strength-result {
 623      background-color: #f0f0f1;
 624      border: 1px solid #dcdcde;
 625      color: #1d2327;
 626      margin: -1px 1px 5px;
 627      padding: 3px 5px;
 628      text-align: center;
 629      width: 25em;
 630      box-sizing: border-box;
 631      opacity: 0;
 632  }
 633  
 634  #pass-strength-result.short {
 635      background-color: #ffabaf;
 636      border-color: #e65054;
 637      opacity: 1;
 638  }
 639  
 640  #pass-strength-result.bad {
 641      background-color: #facfd2;
 642      border-color: #f86368;
 643      opacity: 1;
 644  }
 645  
 646  #pass-strength-result.good {
 647      background-color: #f5e6ab;
 648      border-color: #f0c33c;
 649      opacity: 1;
 650  }
 651  
 652  #pass-strength-result.strong {
 653      background-color: #b8e6bf;
 654      border-color: #68de7c;
 655      opacity: 1;
 656  }
 657  
 658  .password-input-wrapper {
 659      display: inline-block;
 660  }
 661  
 662  .password-input-wrapper input {
 663      font-family: Consolas, Monaco, monospace;
 664  }
 665  
 666  #pass1.short, #pass1-text.short {
 667      border-color: #e65054;
 668  }
 669  
 670  #pass1.bad, #pass1-text.bad {
 671      border-color: #f86368;
 672  }
 673  
 674  #pass1.good, #pass1-text.good {
 675      border-color: #f0c33c;
 676  }
 677  
 678  #pass1.strong, #pass1-text.strong {
 679      border-color: #68de7c;
 680  }
 681  
 682  #pass1:focus,
 683  #pass1-text:focus {
 684      box-shadow: 0 0 0 2px #2271b1;
 685      /* Only visible in Windows High Contrast mode */
 686      outline: 2px solid transparent;
 687  }
 688  
 689  .pw-weak {
 690      display: none;
 691  }
 692  
 693  .indicator-hint {
 694      padding-top: 8px;
 695  }
 696  
 697  .wp-pwd [type="text"],
 698  .wp-pwd [type="password"] {
 699      margin-bottom: 0;
 700      /* Same height as the buttons */
 701      min-height: 30px;
 702  }
 703  
 704  /* Hide the Edge "reveal password" native button */
 705  .wp-pwd input::-ms-reveal {
 706      display: none;
 707  }
 708  
 709  #pass1-text,
 710  .show-password #pass1 {
 711      display: none;
 712  }
 713  
 714  #pass1-text::-ms-clear {
 715      display: none;
 716  }
 717  
 718  .show-password #pass1-text {
 719      display: inline-block;
 720  }
 721  
 722  p.search-box {
 723      display: flex;
 724      flex-wrap: wrap;
 725      align-items: center;
 726      column-gap: 0.5rem;
 727      position: relative;
 728      float: right;
 729      margin: 11px 0;
 730  }
 731  
 732  .network-admin.themes-php p.search-box {
 733      clear: left;
 734  }
 735  
 736  .search-box input[name="s"],
 737  .tablenav .search-plugins input[name="s"],
 738  .tagsdiv .newtag {
 739      float: left;
 740      margin: 0 4px 0 0;
 741  }
 742  
 743  .js.plugins-php .search-box .wp-filter-search {
 744      margin: 0;
 745      width: 280px;
 746  }
 747  
 748  input[type="text"].ui-autocomplete-loading,
 749  input[type="email"].ui-autocomplete-loading {
 750      background-image: url(../images/loading.gif);
 751      background-repeat: no-repeat;
 752      background-position: right 5px center;
 753      visibility: visible;
 754  }
 755  
 756  input.ui-autocomplete-input.open {
 757      border-bottom-color: transparent;
 758  }
 759  
 760  ul#add-to-blog-users {
 761      margin: 0 0 0 14px;
 762  }
 763  
 764  .ui-autocomplete {
 765      padding: 0;
 766      margin: 0;
 767      list-style: none;
 768      position: absolute;
 769      z-index: 10000;
 770      border: 1px solid #4f94d4;
 771      box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8);
 772      background-color: #fff;
 773  }
 774  
 775  .ui-autocomplete li {
 776      margin-bottom: 0;
 777      padding: 4px 10px;
 778      white-space: nowrap;
 779      text-align: left;
 780      cursor: pointer;
 781  }
 782  
 783  /* Colors for the wplink toolbar autocomplete. */
 784  .ui-autocomplete .ui-state-focus {
 785      background-color: #dcdcde;
 786  }
 787  
 788  /* Colors for the tags autocomplete. */
 789  .wp-tags-autocomplete .ui-state-focus,
 790  .wp-tags-autocomplete [aria-selected="true"] {
 791      background-color: #2271b1;
 792      color: #fff;
 793      /* Only visible in Windows High Contrast mode */
 794      outline: 2px solid transparent;
 795  }
 796  
 797  .button-add-site-icon {
 798      width: 100%;
 799      cursor: pointer;
 800      text-align: center;
 801      border: 1px dashed #c3c4c7;
 802      box-sizing: border-box;
 803      padding: 9px 0;
 804      line-height: 1.6;
 805      max-width: 270px;
 806  }
 807  
 808  .button-add-site-icon:focus,
 809  .button-add-site-icon:hover {
 810      background: #fff;
 811  }
 812  
 813  .site-icon-section .favicon-preview {
 814      float: left;
 815  }
 816  .site-icon-section .app-icon-preview {
 817      float: left;
 818      margin: 0 20px;
 819  }
 820  
 821  .site-icon-section .site-icon-preview img {
 822      max-width: 100%;
 823  }
 824  
 825  .button-add-site-icon:focus {
 826      background-color: #fff;
 827      border-color: #3582c4;
 828      border-style: solid;
 829      box-shadow: 0 0 0 1px #3582c4;
 830      outline: 2px solid transparent;
 831  }
 832  
 833  /*------------------------------------------------------------------------------
 834    15.0 - Comments Screen
 835  ------------------------------------------------------------------------------*/
 836  
 837  .form-table {
 838      border-collapse: collapse;
 839      margin-top: 0.5em;
 840      width: 100%;
 841      clear: both;
 842  }
 843  
 844  .form-table,
 845  .form-table td,
 846  .form-table th,
 847  .form-table td p {
 848      font-size: 14px;
 849  }
 850  
 851  .form-table td {
 852      margin-bottom: 9px;
 853      padding: 15px 10px;
 854      line-height: 1.3;
 855      vertical-align: middle;
 856  }
 857  
 858  .form-table th,
 859  .form-wrap label {
 860      color: #1d2327;
 861      font-weight: 400;
 862      text-shadow: none;
 863      vertical-align: baseline;
 864  }
 865  
 866  .form-table th {
 867      vertical-align: top;
 868      text-align: left;
 869      padding: 20px 10px 20px 0;
 870      width: 200px;
 871      line-height: 1.3;
 872      font-weight: 600;
 873  }
 874  
 875  .form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */
 876  .form-table .td-full {
 877      width: auto;
 878      padding: 20px 10px 20px 0;
 879      font-weight: 400;
 880  }
 881  
 882  .form-table td p {
 883      margin-top: 4px;
 884      margin-bottom: 0;
 885  }
 886  
 887  .form-table .date-time-doc {
 888      margin-top: 1em;
 889  }
 890  
 891  .form-table p.timezone-info {
 892      margin: 1em 0;
 893      display: flex;
 894      flex-direction: column;
 895  }
 896  
 897  #local-time {
 898      margin-top: 0.5em;
 899  }
 900  
 901  .form-table td fieldset label {
 902      margin: 0.35em 0 0.5em !important;
 903      display: inline-block;
 904  }
 905  
 906  .form-table td fieldset p label {
 907      margin-top: 0 !important;
 908  }
 909  
 910  .form-table td fieldset label,
 911  .form-table td fieldset p,
 912  .form-table td fieldset li {
 913      line-height: 1.4;
 914  }
 915  
 916  .form-table input.tog,
 917  .form-table input[type="radio"] {
 918      margin-top: -4px;
 919      margin-right: 4px;
 920      float: none;
 921  }
 922  
 923  .form-table .pre {
 924      padding: 8px;
 925      margin: 0;
 926  }
 927  
 928  table.form-table td .updated {
 929      font-size: 13px;
 930  }
 931  
 932  table.form-table td .updated p {
 933      font-size: 13px;
 934      margin: 0.3em 0;
 935  }
 936  
 937  /*------------------------------------------------------------------------------
 938    18.0 - Users
 939  ------------------------------------------------------------------------------*/
 940  
 941  #profile-page .form-table textarea {
 942      width: 500px;
 943      margin-bottom: 6px;
 944  }
 945  
 946  #profile-page .form-table #rich_editing {
 947      margin-right: 5px
 948  }
 949  
 950  #your-profile legend {
 951      font-size: 22px;
 952  }
 953  
 954  #display_name {
 955      width: 15em;
 956  }
 957  
 958  #adduser .form-field input,
 959  #createuser .form-field input {
 960      width: 25em;
 961  }
 962  
 963  .color-option {
 964      display: inline-block;
 965      width: 24%;
 966      padding: 5px 15px 15px;
 967      box-sizing: border-box;
 968      margin-bottom: 3px;
 969  }
 970  
 971  .color-option:hover,
 972  .color-option.selected {
 973      background: #dcdcde;
 974  }
 975  
 976  .color-palette {
 977      display: table;
 978      width: 100%;
 979      border-spacing: 0;
 980      border-collapse: collapse;
 981  }
 982  .color-palette .color-palette-shade,
 983  .color-palette td {
 984      display: table-cell;
 985      height: 20px;
 986      padding: 0;
 987      border: none;
 988  }
 989  
 990  .color-option {
 991      cursor: pointer;
 992  }
 993  
 994  .create-application-password .form-field {
 995      max-width: 25em;
 996  }
 997  
 998  .create-application-password label {
 999      font-weight: 600;
1000  }
1001  
1002  .create-application-password p.submit {
1003      margin-bottom: 0;
1004      padding-bottom: 0;
1005      display: block;
1006  }
1007  
1008  #application-passwords-section .notice {
1009      margin-top: 20px;
1010      margin-bottom: 0;
1011      word-wrap: break-word;
1012  }
1013  
1014  .application-password-display input.code {
1015      width: 19em;
1016  }
1017  
1018  .auth-app-card.card {
1019      max-width: 768px;
1020  }
1021  
1022  .authorize-application-php .form-wrap p {
1023      display: block;
1024  }
1025  
1026  /*------------------------------------------------------------------------------
1027    19.0 - Tools
1028  ------------------------------------------------------------------------------*/
1029  
1030  .tool-box .title {
1031      margin: 8px 0;
1032      font-size: 18px;
1033      font-weight: 400;
1034      line-height: 24px;
1035  }
1036  
1037  .label-responsive {
1038      vertical-align: middle;
1039  }
1040  
1041  #export-filters p {
1042      margin: 0 0 1em;
1043  }
1044  
1045  #export-filters p.submit {
1046      margin: 7px 0 5px;
1047  }
1048  
1049  /* Card styles */
1050  
1051  .card {
1052      position: relative;
1053      margin-top: 20px;
1054      padding: 0.7em 2em 1em;
1055      min-width: 255px;
1056      max-width: 520px;
1057      border: 1px solid #c3c4c7;
1058      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1059      background: #fff;
1060      box-sizing: border-box;
1061  }
1062  
1063  /* Press this styles */
1064  
1065  .pressthis h4 {
1066      margin: 2em 0 1em;
1067  }
1068  
1069  .pressthis textarea {
1070      width: 100%;
1071      font-size: 1em;
1072  }
1073  
1074  #pressthis-code-wrap {
1075      overflow: auto;
1076  }
1077  
1078  .pressthis-bookmarklet-wrapper {
1079      margin: 20px 0 8px;
1080      vertical-align: top;
1081      position: relative;
1082      z-index: 1;
1083  }
1084  
1085  .pressthis-bookmarklet,
1086  .pressthis-bookmarklet:hover,
1087  .pressthis-bookmarklet:focus,
1088  .pressthis-bookmarklet:active {
1089      display: inline-block;
1090      position: relative;
1091      cursor: move;
1092      color: #2c3338;
1093      background: #dcdcde;
1094      border-radius: 5px;
1095      border: 1px solid #c3c4c7;
1096      font-style: normal;
1097      line-height: 16px;
1098      font-size: 14px;
1099      text-decoration: none;
1100  }
1101  
1102  .pressthis-bookmarklet:active {
1103      outline: none;
1104  }
1105  
1106  .pressthis-bookmarklet:after {
1107      content: "";
1108      width: 70%;
1109      height: 55%;
1110      z-index: -1;
1111      position: absolute;
1112      right: 10px;
1113      bottom: 9px;
1114      background: transparent;
1115      transform: skew(20deg) rotate(6deg);
1116      box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
1117  }
1118  
1119  .pressthis-bookmarklet:hover:after {
1120      transform: skew(20deg) rotate(9deg);
1121      box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
1122  }
1123  
1124  .pressthis-bookmarklet span {
1125      display: inline-block;
1126      margin: 0;
1127      padding: 0 12px 8px 9px;
1128  }
1129  
1130  .pressthis-bookmarklet span:before {
1131      color: #787c82;
1132      font: normal 20px/1 dashicons;
1133      content: "\f157";
1134      position: relative;
1135      display: inline-block;
1136      top: 4px;
1137      margin-right: 4px;
1138  }
1139  
1140  .pressthis-js-toggle {
1141      margin-left: 10px;
1142      padding: 0;
1143      height: auto;
1144      vertical-align: top;
1145  }
1146  
1147  /* to override the button class being applied */
1148  .pressthis-js-toggle.button.button {
1149      margin-left: 10px;
1150      padding: 0;
1151      height: auto;
1152      vertical-align: top;
1153  }
1154  
1155  .pressthis-js-toggle .dashicons {
1156      margin: 5px 8px 6px 7px;
1157      color: #50575e;
1158  }
1159  
1160  /*------------------------------------------------------------------------------
1161    20.0 - Settings
1162  ------------------------------------------------------------------------------*/
1163  
1164  .timezone-info code {
1165      white-space: nowrap;
1166  }
1167  
1168  .defaultavatarpicker .avatar {
1169      margin: 2px 0;
1170      vertical-align: middle;
1171  }
1172  
1173  .options-general-php .date-time-text {
1174      display: inline-block;
1175      min-width: 10em;
1176  }
1177  
1178  .options-general-php input.small-text {
1179      width: 56px;
1180      margin: -2px 0;
1181  }
1182  
1183  .options-general-php .spinner {
1184      float: none;
1185      margin: -3px 3px 0;
1186  }
1187  
1188  .settings-php .language-install-spinner,
1189  .options-general-php .language-install-spinner,
1190  .user-edit-php .language-install-spinner,
1191  .profile-php .language-install-spinner {
1192      display: inline-block;
1193      float: none;
1194      margin: -3px 5px 0;
1195      vertical-align: middle;
1196  }
1197  
1198  .form-table.permalink-structure .available-structure-tags {
1199      margin-top: 8px;
1200  }
1201  
1202  .form-table.permalink-structure .available-structure-tags ul {
1203      display: flex;
1204      flex-wrap: wrap;
1205      margin: 8px 0 0;
1206  }
1207  
1208  .form-table.permalink-structure .available-structure-tags li {
1209      margin: 6px 5px 0 0;
1210  }
1211  
1212  .form-table.permalink-structure .available-structure-tags li:last-child {
1213      margin-right: 0;
1214  }
1215  
1216  .form-table.permalink-structure .structure-selection .row {
1217      margin-bottom: 16px;
1218  }
1219  
1220  .form-table.permalink-structure .structure-selection .row > div {
1221      max-width: calc(100% - 24px);
1222      display: inline-flex;
1223      flex-direction: column;
1224  }
1225  
1226  .form-table.permalink-structure .structure-selection .row label {
1227      font-weight: 600;
1228  }
1229  
1230  .form-table.permalink-structure .structure-selection .row p {
1231      margin-top: 0;
1232  }
1233  
1234  /*------------------------------------------------------------------------------
1235    21.0 - Network Admin
1236  ------------------------------------------------------------------------------*/
1237  
1238  .setup-php textarea {
1239      max-width: 100%;
1240  }
1241  
1242  .form-field #site-address {
1243      max-width: 25em;
1244  }
1245  
1246  .form-field #domain {
1247      max-width: 22em;
1248  }
1249  
1250  .form-field #site-title,
1251  .form-field #admin-email,
1252  .form-field #path,
1253  .form-field #blog_registered,
1254  .form-field #blog_last_updated {
1255      max-width: 25em;
1256  }
1257  
1258  .form-field #path {
1259      margin-bottom: 5px;
1260  }
1261  
1262  #search-users,
1263  #search-sites {
1264      max-width: 60%;
1265  }
1266  
1267  .configuration-rules-label {
1268      font-weight: 600;
1269      margin-bottom: 4px;
1270  }
1271  
1272  /*------------------------------------------------------------------------------
1273     Credentials check dialog for Install and Updates
1274  ------------------------------------------------------------------------------*/
1275  
1276  .request-filesystem-credentials-dialog {
1277      display: none;
1278      /* The customizer uses visibility: hidden on the body for full-overlays. */
1279      visibility: visible;
1280  }
1281  
1282  .request-filesystem-credentials-dialog .notification-dialog {
1283      top: 10%;
1284      max-height: 85%;
1285  }
1286  
1287  .request-filesystem-credentials-dialog-content {
1288      margin: 25px;
1289  }
1290  
1291  #request-filesystem-credentials-title {
1292      font-size: 1.3em;
1293      margin: 1em 0;
1294  }
1295  
1296  .request-filesystem-credentials-form legend {
1297      font-size: 1em;
1298      padding: 1.33em 0;
1299      font-weight: 600;
1300  }
1301  
1302  .request-filesystem-credentials-form input[type="text"],
1303  .request-filesystem-credentials-form input[type="password"] {
1304      display: block;
1305  }
1306  
1307  .request-filesystem-credentials-dialog input[type="text"],
1308  .request-filesystem-credentials-dialog input[type="password"] {
1309      width: 100%;
1310  }
1311  
1312  .request-filesystem-credentials-form .field-title {
1313      font-weight: 600;
1314  }
1315  
1316  .request-filesystem-credentials-dialog label[for="hostname"],
1317  .request-filesystem-credentials-dialog label[for="public_key"],
1318  .request-filesystem-credentials-dialog label[for="private_key"] {
1319      display: block;
1320      margin-bottom: 1em;
1321  }
1322  
1323  .request-filesystem-credentials-dialog .ftp-username,
1324  .request-filesystem-credentials-dialog .ftp-password {
1325      float: left;
1326      width: 48%;
1327  }
1328  
1329  .request-filesystem-credentials-dialog .ftp-password {
1330      margin-left: 4%;
1331  }
1332  
1333  .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1334      text-align: right;
1335  }
1336  
1337  .request-filesystem-credentials-dialog label[for="ftp"] {
1338      margin-right: 10px;
1339  }
1340  
1341  .request-filesystem-credentials-dialog #auth-keys-desc {
1342      margin-bottom: 0;
1343  }
1344  
1345  #request-filesystem-credentials-dialog .button:not(:last-child) {
1346      margin-right: 10px;
1347  }
1348  
1349  #request-filesystem-credentials-form .cancel-button {
1350      display: none;
1351  }
1352  
1353  #request-filesystem-credentials-dialog .cancel-button {
1354      display: inline;
1355  }
1356  
1357  .request-filesystem-credentials-dialog .ftp-username,
1358  .request-filesystem-credentials-dialog .ftp-password {
1359      float: none;
1360      width: auto;
1361  }
1362  
1363  .request-filesystem-credentials-dialog .ftp-username {
1364      margin-bottom: 1em;
1365  }
1366  
1367  .request-filesystem-credentials-dialog .ftp-password {
1368      margin: 0;
1369  }
1370  
1371  .request-filesystem-credentials-dialog .ftp-password em {
1372      color: #8c8f94;
1373  }
1374  
1375  .request-filesystem-credentials-dialog label {
1376      display: block;
1377      line-height: 1.5;
1378      margin-bottom: 1em;
1379  }
1380  
1381  .request-filesystem-credentials-form legend {
1382      padding-bottom: 0;
1383  }
1384  
1385  .request-filesystem-credentials-form #ssh-keys legend {
1386      font-size: 1.3em;
1387  }
1388  
1389  .request-filesystem-credentials-form .notice {
1390      margin: 0 0 20px;
1391      clear: both;
1392  }
1393  
1394  /*------------------------------------------------------------------------------
1395     Privacy Policy settings screen
1396  ------------------------------------------------------------------------------*/
1397  .tools-privacy-policy-page form {
1398      margin-bottom: 1.3em;
1399  }
1400  
1401  .tools-privacy-policy-page input.button {
1402      margin: 0 1px 0 6px;
1403  }
1404  
1405  .tools-privacy-policy-page select {
1406      margin: 0 1px 0.5em 6px;
1407  }
1408  
1409  .tools-privacy-edit {
1410      margin: 1.5em 0;
1411  }
1412  
1413  .tools-privacy-policy-page span {
1414      line-height: 2;
1415  }
1416  
1417  .privacy_requests .column-email {
1418      width: 40%;
1419  }
1420  
1421  .privacy_requests .column-type {
1422      text-align: center;
1423  }
1424  
1425  .privacy_requests thead td:first-child,
1426  .privacy_requests tfoot td:first-child {
1427      border-left: 4px solid #fff;
1428  }
1429  
1430  .privacy_requests tbody th {
1431      border-left: 4px solid #fff;
1432      background: #fff;
1433      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1434  }
1435  
1436  .privacy_requests .row-actions {
1437      color: #787c82;
1438  }
1439  
1440  .privacy_requests .row-actions.processing {
1441      position: static;
1442  }
1443  
1444  .privacy_requests tbody .has-request-results th {
1445      box-shadow: none;
1446  }
1447  
1448  .privacy_requests tbody .request-results th .notice {
1449      margin: 0 0 5px;
1450  }
1451  
1452  .privacy_requests tbody td {
1453      background: #fff;
1454      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1455  }
1456  
1457  .privacy_requests tbody .has-request-results td {
1458      box-shadow: none;
1459  }
1460  
1461  .privacy_requests .next_steps .button {
1462      word-wrap: break-word;
1463      white-space: normal;
1464  }
1465  
1466  .privacy_requests .status-request-confirmed th,
1467  .privacy_requests .status-request-confirmed td {
1468      background-color: #fff;
1469      border-left-color: #72aee6;
1470  }
1471  
1472  .privacy_requests .status-request-failed th,
1473  .privacy_requests .status-request-failed td {
1474      background-color: #f6f7f7;
1475      border-left-color: #d63638;
1476  }
1477  
1478  .privacy_requests .export_personal_data_failed a {
1479      vertical-align: baseline;
1480  }
1481  
1482  .status-label {
1483      font-weight: 600;
1484  }
1485  
1486  .status-label.status-request-pending {
1487      font-weight: 400;
1488      font-style: italic;
1489      color: #646970;
1490  }
1491  
1492  .status-label.status-request-failed {
1493      color: #d63638;
1494      font-weight: 600;
1495  }
1496  
1497  .wp-privacy-request-form {
1498      clear: both;
1499  }
1500  
1501  .wp-privacy-request-form-field {
1502      margin: 1.5em 0;
1503  }
1504  
1505  .wp-privacy-request-form input {
1506      margin: 0;
1507  }
1508  
1509  .email-personal-data::before {
1510      display: inline-block;
1511      font: normal 20px/1 dashicons;
1512      margin: 3px 5px 0 -2px;
1513      speak: never;
1514      -webkit-font-smoothing: antialiased;
1515      -moz-osx-font-smoothing: grayscale;
1516      vertical-align: top;
1517  }
1518  
1519  .email-personal-data--sending::before {
1520      color: #d63638;
1521      content: "\f463";
1522      animation: rotation 2s infinite linear;
1523  }
1524  
1525  .email-personal-data--sent::before {
1526      color: #68de7c;
1527      content: "\f147";
1528  }
1529  
1530  
1531  /* =Media Queries
1532  -------------------------------------------------------------- */
1533  
1534  @media screen and (max-width: 782px) {
1535      /* Input Elements */
1536      textarea {
1537          -webkit-appearance: none;
1538      }
1539  
1540      input[type="text"],
1541      input[type="password"],
1542      input[type="date"],
1543      input[type="datetime"],
1544      input[type="datetime-local"],
1545      input[type="email"],
1546      input[type="month"],
1547      input[type="number"],
1548      input[type="search"],
1549      input[type="tel"],
1550      input[type="time"],
1551      input[type="url"],
1552      input[type="week"] {
1553          -webkit-appearance: none;
1554          padding: 3px 10px;
1555          /* Only necessary for IE11 */
1556          min-height: 40px;
1557      }
1558  
1559      ::-webkit-datetime-edit {
1560          line-height: 1.875; /* 30px */
1561      }
1562  
1563      input[type="checkbox"],
1564      .widefat th input[type="checkbox"],
1565      .widefat thead td input[type="checkbox"],
1566      .widefat tfoot td input[type="checkbox"] {
1567          -webkit-appearance: none;
1568      }
1569  
1570      .widefat th input[type="checkbox"],
1571      .widefat thead td input[type="checkbox"],
1572      .widefat tfoot td input[type="checkbox"] {
1573          margin-bottom: 8px;
1574      }
1575  
1576      input[type="checkbox"]:checked:before,
1577      .widefat th input[type="checkbox"]:before,
1578      .widefat thead td input[type="checkbox"]:before,
1579      .widefat tfoot td input[type="checkbox"]:before {
1580          width: 1.875rem;
1581          height: 1.875rem;
1582          margin: -0.1875rem -0.3125rem;
1583      }
1584  
1585      input[type="radio"],
1586      input[type="checkbox"] {
1587          height: 1.5625rem;
1588          width: 1.5625rem;
1589      }
1590  
1591      .wp-admin p input[type="checkbox"],
1592      .wp-admin p input[type="radio"] {
1593          margin-top: -0.1875rem;
1594      }
1595  
1596      input[type="radio"]:checked:before {
1597          vertical-align: middle;
1598          width: 0.5625rem;
1599          height: 0.5625rem;
1600          margin: 0.4375rem;
1601          line-height: 0.76190476;
1602      }
1603  
1604      .wp-upload-form input[type="submit"] {
1605          margin-top: 10px;
1606      }
1607  
1608      .wp-core-ui select,
1609      .wp-admin .form-table select {
1610          min-height: 40px;
1611          font-size: 16px;
1612          line-height: 1.625; /* 26px */
1613          padding: 5px 24px 5px 8px;
1614      }
1615  
1616      .wp-admin .button-cancel {
1617          margin-bottom: 0;
1618          padding: 2px 0;
1619          font-size: 14px;
1620          vertical-align: middle;
1621      }
1622  
1623      #adduser .form-field input,
1624      #createuser .form-field input {
1625          width: 100%;
1626      }
1627  
1628      .form-table {
1629          box-sizing: border-box;
1630      }
1631  
1632      .form-table th,
1633      .form-table td,
1634      .label-responsive {
1635          display: block;
1636          width: auto;
1637          vertical-align: middle;
1638      }
1639  
1640      .label-responsive {
1641          margin: 0.5em 0;
1642      }
1643  
1644      .export-filters li {
1645          margin-bottom: 0;
1646      }
1647  
1648      .form-table .color-palette .color-palette-shade,
1649      .form-table .color-palette td {
1650          display: table-cell;
1651          width: 15px;
1652          height: 30px;
1653          padding: 0;
1654      }
1655  
1656      .form-table .color-palette {
1657          margin-right: 10px;
1658      }
1659  
1660      textarea,
1661      input {
1662          font-size: 16px;
1663      }
1664  
1665      .form-table td input[type="text"],
1666      .form-table td input[type="email"],
1667      .form-table td input[type="password"],
1668      .form-table td select,
1669      .form-table td textarea,
1670      .form-table span.description,
1671      #profile-page .form-table textarea {
1672          width: 100%;
1673          display: block;
1674          max-width: none;
1675          box-sizing: border-box;
1676      }
1677  
1678      .form-table .form-required.form-invalid td:after {
1679          float: right;
1680          margin: -30px 3px 0 0;
1681      }
1682  
1683      input[type="text"].small-text,
1684      input[type="search"].small-text,
1685      input[type="password"].small-text,
1686      input[type="number"].small-text,
1687      input[type="number"].small-text,
1688      .form-table input[type="text"].small-text {
1689          width: auto;
1690          max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */
1691          display: inline;
1692          padding: 3px 6px;
1693          margin: 0 3px;
1694      }
1695  
1696      .form-table .regular-text ~ input[type="text"].small-text {
1697          margin-top: 5px;
1698      }
1699  
1700      #pass-strength-result {
1701          width: 100%;
1702          box-sizing: border-box;
1703          padding: 8px;
1704      }
1705  
1706      .password-input-wrapper {
1707          display: block;
1708      }
1709  
1710      p.search-box {
1711          float: none;
1712          width: 100%;
1713          margin-bottom: 20px;
1714          display: flex;
1715      }
1716  
1717      p.search-box input[name="s"] {
1718          float: none;
1719          width: 100%;
1720          margin-bottom: 10px;
1721          vertical-align: middle;
1722      }
1723  
1724      p.search-box input[type="submit"] {
1725          margin-bottom: 10px;
1726      }
1727  
1728      .form-table span.description {
1729          display: inline;
1730          padding: 4px 0 0;
1731          line-height: 1.4;
1732          font-size: 14px;
1733      }
1734  
1735      .form-table th {
1736          padding: 10px 0 0;
1737          border-bottom: 0;
1738      }
1739  
1740      .form-table td {
1741          margin-bottom: 0;
1742          padding: 4px 0 6px;
1743      }
1744  
1745      .form-table.permalink-structure td code {
1746          display: inline-block;
1747      }
1748  
1749      .form-table.permalink-structure .structure-selection {
1750          margin-top: 8px;
1751      }
1752  
1753      .form-table.permalink-structure .structure-selection .row > div {
1754          max-width: calc(100% - 36px);
1755          width: 100%;
1756      }
1757  
1758      .form-table.permalink-structure td input[type="text"] {
1759          margin-top: 4px;
1760      }
1761  
1762      .form-table input.regular-text {
1763          width: 100%;
1764      }
1765  
1766      .form-table label {
1767          font-size: 14px;
1768      }
1769  
1770      .form-table td > label:first-child {
1771          display: inline-block;
1772          margin-top: 0.35em;
1773      }
1774  
1775      .background-position-control .button-group > label {
1776          font-size: 0;
1777      }
1778  
1779      .form-table fieldset label {
1780          display: block;
1781      }
1782  
1783      .form-field #domain {
1784          max-width: none;
1785      }
1786  
1787      /* New Password */
1788      .wp-pwd {
1789          position: relative;
1790      }
1791  
1792      /* Needs higher specificity than normal input type text and password. */
1793      #profile-page .form-table #pass1 {
1794          padding-right: 90px;
1795      }
1796  
1797      .wp-pwd button.button {
1798          background: transparent;
1799          border: 1px solid transparent;
1800          box-shadow: none;
1801          line-height: 2;
1802          margin: 0;
1803          padding: 5px 9px;
1804          position: absolute;
1805          right: 0;
1806          top: 0;
1807          width: 2.375rem;
1808          height: 2.375rem;
1809          min-width: 40px;
1810          min-height: 40px;
1811      }
1812  
1813      .wp-pwd button.wp-hide-pw {
1814          right: 2.5rem;
1815      }
1816  
1817      body.user-new-php .wp-pwd button.wp-hide-pw {
1818          right: 0;
1819      }
1820  
1821      .wp-pwd button.button:hover,
1822      .wp-pwd button.button:focus {
1823          background: transparent;
1824      }
1825  
1826      .wp-pwd button.button:active {
1827          background: transparent;
1828          box-shadow: none;
1829          transform: none;
1830      }
1831  
1832      .wp-pwd .button .text {
1833          display: none;
1834      }
1835  
1836      .wp-pwd [type="text"],
1837      .wp-pwd [type="password"] {
1838          line-height: 2;
1839          padding-right: 5rem;
1840      }
1841  
1842      body.user-new-php .wp-pwd [type="text"],
1843      body.user-new-php .wp-pwd [type="password"] {
1844          padding-right: 2.5rem;
1845      }
1846  
1847      .wp-cancel-pw .dashicons-no {
1848          display: inline-block;
1849      }
1850  
1851      .mailserver-pass-wrap .wp-pwd {
1852          display: block;
1853      }
1854  
1855      /* rtl:ignore */
1856      #mailserver_pass {
1857          padding-left: 10px;
1858      }
1859  
1860      .options-general-php input[type="text"].small-text {
1861          max-width: 6.25em;
1862          margin: 0;
1863      }
1864  
1865      /* Privacy Policy settings screen */
1866      .tools-privacy-policy-page form.wp-create-privacy-page {
1867          margin-bottom: 1em;
1868      }
1869  
1870      .tools-privacy-policy-page input#set-page,
1871      .tools-privacy-policy-page select {
1872          margin: 10px 0 0;
1873      }
1874  
1875      .tools-privacy-policy-page .wp-create-privacy-page span {
1876          display: block;
1877          margin-bottom: 1em;
1878      }
1879  
1880      .tools-privacy-policy-page .wp-create-privacy-page .button {
1881          margin-left: 0;
1882      }
1883  
1884      .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column) {
1885          display: table-cell;
1886      }
1887  
1888      .wp-list-table.privacy_requests.widefat th input,
1889      .wp-list-table.privacy_requests.widefat thead td input {
1890          margin-left: 5px;
1891      }
1892  
1893      .wp-privacy-request-form-field input[type="text"] {
1894          width: 100%;
1895          margin-bottom: 10px;
1896          vertical-align: middle;
1897      }
1898  
1899      .regular-text {
1900          max-width: 100%;
1901      }
1902  }
1903  
1904  @media only screen and (max-width: 768px) {
1905      .form-field input[type="text"],
1906      .form-field input[type="email"],
1907      .form-field input[type="password"],
1908      .form-field select,
1909      .form-field textarea {
1910          width: 99%;
1911      }
1912  
1913      .form-wrap .form-field {
1914          padding: 0;
1915      }
1916  }
1917  
1918  @media only screen and (max-height: 480px), screen and (max-width: 450px) {
1919      /* Request Credentials / File Editor Warning */
1920      .request-filesystem-credentials-dialog .notification-dialog,
1921      .file-editor-warning .notification-dialog {
1922          width: 100%;
1923          height: 100%;
1924          max-height: 100%;
1925          position: fixed;
1926          top: 0;
1927          margin: 0;
1928          left: 0;
1929      }
1930  }
1931  
1932  /* Smartphone */
1933  @media screen and (max-width: 600px) {
1934      /* Color Picker Options */
1935      .color-option {
1936          width: 49%;
1937      }
1938  }
1939  
1940  @media only screen and (max-width: 320px) {
1941      .options-general-php .date-time-text.date-time-custom-text {
1942          min-width: 0;
1943          margin-right: 0.5em;
1944      }
1945  }
1946  
1947  @keyframes rotation {
1948      0% {
1949          transform: rotate(0deg);
1950      }
1951      100% {
1952          transform: rotate(359deg);
1953      }
1954  }