[Summary view] [Print] [Text view]

   1  /*------------------------------------------------------------------------------
   2    14.0 - Media Screen
   3  ------------------------------------------------------------------------------*/
   4  
   5  .media-item .describe {
   6      border-collapse: collapse;
   7      width: 100%;
   8      border-top: 1px solid #dcdcde;
   9      clear: both;
  10      cursor: default;
  11  }
  12  
  13  .media-item.media-blank .describe {
  14      border: 0;
  15  }
  16  
  17  .media-item .describe th {
  18      vertical-align: top;
  19      text-align: left;
  20      padding: 5px 10px 10px;
  21      width: 140px;
  22  }
  23  
  24  .media-item .describe .align th {
  25      padding-top: 0;
  26  }
  27  
  28  .media-item .media-item-info tr {
  29      background-color: transparent;
  30  }
  31  
  32  .media-item .describe td {
  33      padding: 0 8px 8px 0;
  34      vertical-align: top;
  35  }
  36  
  37  .media-item thead.media-item-info td {
  38      padding: 4px 10px 0;
  39  }
  40  
  41  .media-item .media-item-info .A1B1 {
  42      padding: 0 0 0 10px;
  43  }
  44  
  45  .media-item td.savesend {
  46      padding-bottom: 15px;
  47  }
  48  
  49  .media-item .thumbnail {
  50      max-height: 128px;
  51      max-width: 128px;
  52  }
  53  
  54  .media-list-subtitle {
  55      display: block;
  56  }
  57  
  58  .media-list-title {
  59      display: block;
  60  }
  61  
  62  #wpbody-content #async-upload-wrap a {
  63      display: none;
  64  }
  65  
  66  .media-upload-form {
  67      margin-top: 20px;
  68  }
  69  
  70  .media-upload-form td label {
  71      margin-right: 6px;
  72      margin-left: 2px;
  73  }
  74  
  75  .media-upload-form .align .field label {
  76      display: inline;
  77      padding: 0 0 0 23px;
  78      margin: 0 1em 0 3px;
  79      font-weight: 600;
  80  }
  81  
  82  .media-upload-form tr.image-size label {
  83      margin: 0 0 0 5px;
  84      font-weight: 600;
  85  }
  86  
  87  .media-upload-form th.label label {
  88      font-weight: 600;
  89      margin: 0.5em;
  90      font-size: 13px;
  91  }
  92  
  93  .media-upload-form th.label label span {
  94      padding: 0 5px;
  95  }
  96  
  97  .media-item .describe input[type="text"],
  98  .media-item .describe textarea {
  99      width: 460px;
 100  }
 101  
 102  .media-item .describe p.help {
 103      margin: 0;
 104      padding: 0 0 0 5px;
 105  }
 106  
 107  .describe-toggle-on,
 108  .describe-toggle-off {
 109      display: block;
 110      line-height: 2.76923076;
 111      float: right;
 112      margin-right: 10px;
 113  }
 114  
 115  .media-item .attachment-tools {
 116      display: flex;
 117      align-items: center;
 118  }
 119  
 120  .media-item .edit-attachment {
 121      padding: 14px 0;
 122      display: block;
 123      margin-right: 10px;
 124  }
 125  
 126  .media-item .edit-attachment.copy-to-clipboard-container {
 127      display: flex;
 128      margin-top: 0;
 129  }
 130  
 131  .media-item-copy-container .success {
 132      line-height: 0;
 133  }
 134  
 135  .media-item button .copy-attachment-url {
 136      margin-top: 14px;
 137  }
 138  
 139  .media-item .copy-to-clipboard-container {
 140      margin-top: 7px;
 141  }
 142  
 143  .media-item .describe-toggle-off,
 144  .media-item.open .describe-toggle-on {
 145      display: none;
 146  }
 147  
 148  .media-item.open .describe-toggle-off {
 149      display: block;
 150  }
 151  
 152  .media-upload-form .media-item {
 153      min-height: 70px;
 154      margin-bottom: 1px;
 155      position: relative;
 156      width: 100%;
 157      background: #fff;
 158  }
 159  
 160  .media-upload-form .media-item,
 161  .media-upload-form .media-item .error {
 162      box-shadow: 0 1px 0 #dcdcde;
 163  }
 164  
 165  #media-items:empty {
 166      border: 0 none;
 167  }
 168  
 169  .media-item .filename {
 170      padding: 14px 2px;
 171      overflow: hidden;
 172      margin-left: 4px;
 173  }
 174  
 175  .media-item .pinkynail {
 176      float: left;
 177      margin: 14px;
 178      max-height: 70px;
 179      max-width: 70px;
 180  }
 181  
 182  .media-item .startopen,
 183  .media-item .startclosed {
 184      display: none;
 185  }
 186  
 187  .media-item .progress {
 188      display: inline-block;
 189      height: 22px;
 190      margin: 0 6px 7px;
 191      width: 200px;
 192      line-height: 2em;
 193      padding: 0;
 194      overflow: hidden;
 195      border-radius: 22px;
 196      background: #dcdcde;
 197      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 198  }
 199  
 200  .media-item .bar {
 201      z-index: 9;
 202      width: 0;
 203      height: 100%;
 204      margin-top: -22px;
 205      border-radius: 22px;
 206      background-color: #2271b1;
 207      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
 208  }
 209  
 210  .media-item .progress .percent {
 211      z-index: 10;
 212      position: relative;
 213      width: 200px;
 214      padding: 0;
 215      color: #fff;
 216      text-align: center;
 217      line-height: 22px;
 218      font-weight: 400;
 219      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 220  }
 221  
 222  .upload-php .fixed .column-parent {
 223      width: 15%;
 224  }
 225  
 226  .js .html-uploader #plupload-upload-ui {
 227      display: none;
 228  }
 229  
 230  .js .html-uploader #html-upload-ui {
 231      display: block;
 232  }
 233  
 234  #html-upload-ui #async-upload {
 235      font-size: 1em;
 236  }
 237  
 238  .media-upload-form .media-item.error,
 239  .media-upload-form .media-item .error {
 240      width: auto;
 241      margin: 0 0 1px;
 242  }
 243  
 244  .media-upload-form .media-item .error {
 245      padding: 10px 0 10px 14px;
 246      min-height: 50px;
 247  }
 248  
 249  .media-item .error-div button.dismiss {
 250      float: right;
 251      margin: 0 10px 0 15px;
 252  }
 253  
 254  /*------------------------------------------------------------------------------
 255    14.1 - Media Library
 256  ------------------------------------------------------------------------------*/
 257  
 258  .find-box {
 259      background-color: #fff;
 260      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 261      width: 600px;
 262      overflow: hidden;
 263      margin-left: -300px;
 264      position: fixed;
 265      top: 30px;
 266      bottom: 30px;
 267      left: 50%;
 268      z-index: 100105;
 269  }
 270  
 271  .find-box-head {
 272      background: #fff;
 273      border-bottom: 1px solid #dcdcde;
 274      height: 36px;
 275      font-size: 18px;
 276      font-weight: 600;
 277      line-height: 2;
 278      padding: 0 36px 0 16px;
 279      position: absolute;
 280      top: 0;
 281      left: 0;
 282      right: 0;
 283  }
 284  
 285  .find-box-inside {
 286      overflow: auto;
 287      padding: 16px;
 288      background-color: #fff;
 289      position: absolute;
 290      top: 37px;
 291      bottom: 45px;
 292      overflow-y: scroll;
 293      width: 100%;
 294      box-sizing: border-box;
 295  }
 296  
 297  .find-box-search {
 298      padding-bottom: 16px;
 299  }
 300  
 301  .find-box-search .spinner {
 302      float: none;
 303      left: 105px;
 304      position: absolute;
 305  }
 306  
 307  .find-box-search,
 308  #find-posts-response {
 309      position: relative; /* RTL fix, #WP28010 */
 310  }
 311  
 312  #find-posts-input,
 313  #find-posts-search {
 314      float: left;
 315  }
 316  
 317  #find-posts-input {
 318      width: 140px;
 319      height: 28px;
 320      margin: 0 4px 0 0;
 321  }
 322  
 323  .widefat .found-radio {
 324      padding-right: 0;
 325      width: 16px;
 326  }
 327  
 328  #find-posts-close {
 329      width: 36px;
 330      height: 36px;
 331      border: none;
 332      padding: 0;
 333      position: absolute;
 334      top: 0;
 335      right: 0;
 336      cursor: pointer;
 337      text-align: center;
 338      background: none;
 339      color: #646970;
 340  }
 341  
 342  #find-posts-close:hover,
 343  #find-posts-close:focus {
 344      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 345  }
 346  
 347  #find-posts-close:focus {
 348      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 349      /* Only visible in Windows High Contrast mode */
 350      outline: 2px solid transparent;
 351      outline-offset: -2px;
 352  }
 353  
 354  #find-posts-close:before {
 355      font: normal 20px/36px dashicons;
 356      vertical-align: top;
 357      -webkit-font-smoothing: antialiased;
 358      -moz-osx-font-smoothing: grayscale;
 359      content: "\f158";
 360      content: "\f158" / '';
 361  }
 362  
 363  .find-box-buttons {
 364      padding: 8px 16px;
 365      background: #fff;
 366      border-top: 1px solid #dcdcde;
 367      position: absolute;
 368      bottom: 0;
 369      left: 0;
 370      right: 0;
 371  }
 372  
 373  @media screen and (max-width: 782px) {
 374      .find-box-inside {
 375          bottom: 57px;
 376      }
 377  
 378      #delete_all {
 379          margin-bottom: 0;
 380      }
 381  }
 382  
 383  @media screen and (max-width: 660px) {
 384  
 385      .find-box {
 386          top: 0;
 387          bottom: 0;
 388          left: 0;
 389          right: 0;
 390          margin: 0;
 391          width: 100%;
 392      }
 393  
 394  }
 395  
 396  .ui-find-overlay {
 397      position: fixed;
 398      top: 0;
 399      left: 0;
 400      right: 0;
 401      bottom: 0;
 402      background: #000;
 403      opacity: 0.7;
 404      filter: alpha(opacity=70);
 405      z-index: 100100;
 406  }
 407  
 408  .drag-drop #drag-drop-area {
 409      border: 4px dashed #c3c4c7;
 410      height: 200px;
 411  }
 412  
 413  .drag-drop .drag-drop-inside {
 414      margin: 60px auto 0;
 415      width: 250px;
 416  }
 417  
 418  .drag-drop-inside p {
 419      font-size: 14px;
 420      margin: 5px 0;
 421      display: none;
 422  }
 423  
 424  .drag-drop .drag-drop-inside p {
 425      text-align: center;
 426  }
 427  
 428  .drag-drop-inside p.drag-drop-info {
 429      font-size: 20px;
 430  }
 431  
 432  .drag-drop .drag-drop-inside p,
 433  .drag-drop-inside p.drag-drop-buttons {
 434      display: block;
 435  }
 436  
 437  /*
 438  #drag-drop-area:-moz-drag-over {
 439      border-color: #83b4d8;
 440  }
 441  border color while dragging a file over the uploader drop area */
 442  .drag-drop.drag-over #drag-drop-area {
 443      border-color: #9ec2e6;
 444  }
 445  
 446  #plupload-upload-ui {
 447      position: relative;
 448  }
 449  
 450  .post-type-attachment .wp-filter select {
 451      margin: 0 6px 0 0;
 452  }
 453  
 454  /* Match the spacing the grid view toolbar gets from
 455     `.attachments-browser .media-toolbar` in media-views.css, so the Media
 456     Library filter bar is consistent in both modes. The grid view toolbar is
 457     excluded so that rule stays the single source of its own padding: media.css
 458     is printed after media-views.css here, so an unscoped rule would override
 459     it. */
 460  .upload-php .wp-filter:not(.media-toolbar) {
 461      padding: 12px 16px;
 462  }
 463  
 464  /**
 465   * Media Library grid view
 466   */
 467  
 468  .media-frame.mode-grid,
 469  .media-frame.mode-grid .media-frame-content,
 470  .media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,
 471  .media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,
 472  .media-frame.mode-grid .uploader-inline-content {
 473      position: static;
 474  }
 475  
 476  /* Regions we don't use at all */
 477  .media-frame.mode-grid .media-frame-title,
 478  .media-frame.mode-grid .media-frame-router,
 479  .media-frame.mode-grid .media-frame-menu {
 480      display: none;
 481  }
 482  
 483  .media-frame.mode-grid .media-frame-content {
 484      background-color: transparent;
 485      border: none;
 486  }
 487  
 488  .upload-php .mode-grid .media-sidebar {
 489      position: relative;
 490      width: auto;
 491      margin-top: 12px;
 492      padding: 0 16px;
 493      border-left: 4px solid #d63638;
 494      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 495      background-color: #fff;
 496  }
 497  
 498  .upload-php .mode-grid .hide-sidebar .media-sidebar {
 499      display: none;
 500  }
 501  
 502  .upload-php .mode-grid .media-sidebar .media-uploader-status {
 503      border-bottom: none;
 504      padding-bottom: 0;
 505      max-width: 100%;
 506  }
 507  
 508  .upload-php .mode-grid .media-sidebar .upload-error {
 509      margin: 12px 0;
 510      padding: 4px 0 0;
 511      border: none;
 512      box-shadow: none;
 513      background: none;
 514  }
 515  
 516  .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 517      display: none;
 518  }
 519  
 520  .media-frame.mode-grid .uploader-inline {
 521      position: relative;
 522      top: auto;
 523      right: auto;
 524      left: auto;
 525      bottom: auto;
 526      padding-top: 0;
 527      margin-top: 20px;
 528      border: 4px dashed #c3c4c7;
 529  }
 530  
 531  .media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
 532  .media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper {
 533      position: relative;
 534      top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 535      padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 536  }
 537  
 538  .media-frame.mode-grid .attachment:focus,
 539  .media-frame.mode-grid .selected.attachment:focus,
 540  .media-frame.mode-grid .attachment.details:focus {
 541      /* Keep this box-shadow consistent between media.css and media-views.css. */
 542      box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 543      /* Only visible in Windows High Contrast mode */
 544      outline: 2px solid transparent;
 545      outline-offset: -6px;
 546  }
 547  
 548  .media-frame.mode-grid .selected.attachment {
 549      box-shadow:
 550          inset 0 0 0 5px #f0f0f1,
 551          inset 0 0 0 7px #c3c4c7;
 552  }
 553  
 554  .media-frame.mode-grid .attachment.details {
 555      box-shadow:
 556          inset 0 0 0 3px #f0f0f1,
 557          inset 0 0 0 7px var(--wp-admin-theme-color, #3858e9);
 558  }
 559  
 560  .media-frame.mode-grid.mode-select .attachment .thumbnail {
 561      opacity: 0.65;
 562  }
 563  
 564  .media-frame.mode-select .attachment.selected .thumbnail {
 565      opacity: 1;
 566  }
 567  
 568  .media-frame.mode-grid .media-toolbar {
 569      margin-bottom: 15px;
 570      height: auto;
 571      min-height: 80px;
 572  }
 573  
 574  .media-frame.mode-grid .media-toolbar label:not(.media-search-input-label) {
 575      border: 0;
 576      clip-path: inset(50%);
 577      height: 1px;
 578      margin: -1px;
 579      overflow: hidden;
 580      padding: 0;
 581      position: absolute;
 582      width: 1px;
 583      /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 584      word-wrap: normal !important;
 585      word-break: normal !important;
 586  }
 587  
 588  .media-frame.mode-grid .media-toolbar select {
 589      margin: 0 10px 0 0;
 590      min-height: 32px;
 591      line-height: 2.14285714; /* 30px for 32px height with 14px font */
 592      padding: 0 24px 0 8px;
 593  }
 594  
 595  .media-frame.mode-grid .media-toolbar input[type="search"] {
 596      min-height: 32px;
 597      padding: 0 8px;
 598  }
 599  
 600  .media-frame.mode-grid .media-toolbar-secondary {
 601      display: flex;
 602      flex-wrap: wrap;
 603      align-items: center;
 604      gap: 8px;
 605  }
 606  
 607  .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
 608      margin: 0 8px 0 0;
 609      height: 100%;
 610  }
 611  
 612  .media-frame.mode-grid .attachments-browser .bulk-select {
 613      display: inline-block;
 614      margin: 0 10px 0 0;
 615  }
 616  
 617  .media-frame.mode-grid .search {
 618      margin-top: 0;
 619  }
 620  
 621  .media-frame-content .media-search-input-label {
 622      vertical-align: baseline;
 623  }
 624  
 625  .attachments-browser .media-toolbar-secondary > .media-button {
 626      margin-right: 10px;
 627  }
 628  
 629  .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 630      position: fixed;
 631      top: 32px;
 632      left: auto;
 633      right: 20px;
 634      margin-top: 0;
 635  }
 636  
 637  .media-frame.mode-grid .attachments-browser {
 638      padding: 0;
 639  }
 640  
 641  .media-frame.mode-grid .attachments-browser .attachments {
 642      padding: 2px;
 643  }
 644  
 645  .media-frame.mode-grid .attachments-browser .no-media {
 646      color: #646970; /* same as no plugins and no themes */
 647      font-size: 18px;
 648      font-style: normal;
 649      margin: 0;
 650      padding: 100px 0 0;
 651      text-align: center;
 652  }
 653  
 654  /**
 655   * Attachment details modal
 656   */
 657  
 658  .edit-attachment-frame {
 659      display: block;
 660      height: 100%;
 661      width: 100%;
 662  }
 663  
 664  .edit-attachment-frame .edit-media-header {
 665      overflow: hidden;
 666  }
 667  
 668  .upload-php .media-modal-close .media-modal-icon:before {
 669      content: "\f335";
 670      content: "\f335" / '';
 671      font-size: 22px;
 672  }
 673  
 674  .upload-php .media-modal-close,
 675  .edit-attachment-frame .edit-media-header .left,
 676  .edit-attachment-frame .edit-media-header .right {
 677      cursor: pointer;
 678      color: #787c82;
 679      background-color: transparent;
 680      height: 50px;
 681      width: 50px;
 682      padding: 0;
 683      position: absolute;
 684      text-align: center;
 685      border: 0;
 686      border-left: 1px solid #dcdcde;
 687      transition: color .1s ease-in-out, background .1s ease-in-out;
 688  }
 689  
 690  .upload-php .media-modal-close {
 691      top: 0;
 692      right: 0;
 693  }
 694  
 695  .edit-attachment-frame .edit-media-header .left {
 696      right: 102px;
 697  }
 698  
 699  .edit-attachment-frame .edit-media-header .right {
 700      right: 51px;
 701  }
 702  
 703  .edit-attachment-frame .media-frame-title {
 704      left: 0;
 705      right: 150px; /* leave space for prev/next/close */
 706  }
 707  
 708  .edit-attachment-frame .edit-media-header .right:before,
 709  .edit-attachment-frame .edit-media-header .left:before {
 710      font: normal 20px/50px dashicons !important;
 711      display: inline;
 712      font-weight: 300;
 713  }
 714  
 715  .upload-php .media-modal-close:hover,
 716  .upload-php .media-modal-close:focus,
 717  .edit-attachment-frame .edit-media-header .left:hover,
 718  .edit-attachment-frame .edit-media-header .right:hover,
 719  .edit-attachment-frame .edit-media-header .left:focus,
 720  .edit-attachment-frame .edit-media-header .right:focus {
 721      background: #dcdcde;
 722      border-color: #c3c4c7;
 723      color: #000;
 724      outline: none;
 725      box-shadow: none;
 726  }
 727  
 728  .upload-php .media-modal-close:focus,
 729  .edit-attachment-frame .edit-media-header .left:focus,
 730  .edit-attachment-frame .edit-media-header .right:focus {
 731      /* Only visible in Windows High Contrast mode */
 732      outline: 2px solid transparent;
 733      outline-offset: -2px;
 734  }
 735  
 736  .upload-php .media-modal-close:focus .media-modal-icon:before,
 737  .upload-php .media-modal-close:hover .media-modal-icon:before {
 738      color: #000;
 739  }
 740  
 741  .edit-attachment-frame .edit-media-header .left:before {
 742      content: "\f341";
 743      content: "\f341" / '';
 744  }
 745  
 746  .edit-attachment-frame .edit-media-header .right:before {
 747      content: "\f345";
 748      content: "\f345" / '';
 749  }
 750  
 751  .edit-attachment-frame .edit-media-header [disabled],
 752  .edit-attachment-frame .edit-media-header [disabled]:hover {
 753      color: #c3c4c7;
 754      background: inherit;
 755      cursor: default;
 756  }
 757  
 758  .edit-attachment-frame .media-frame-content,
 759  .edit-attachment-frame .media-frame-router {
 760      left: 0;
 761  }
 762  
 763  .edit-attachment-frame .media-frame-content {
 764      border-bottom: none;
 765      bottom: 0;
 766      top: 50px;
 767  }
 768  
 769  .edit-attachment-frame .attachment-details {
 770      position: absolute;
 771      overflow: auto;
 772      top: 0;
 773      bottom: 0;
 774      right: 0;
 775      left: 0;
 776      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 777  }
 778  
 779  .edit-attachment-frame .attachment-media-view {
 780      float: left;
 781      width: 65%;
 782      height: 100%;
 783  }
 784  
 785  .edit-attachment-frame .attachment-media-view .thumbnail {
 786      box-sizing: border-box;
 787      padding: 16px;
 788      height: 100%;
 789  }
 790  
 791  .edit-attachment-frame .attachment-media-view .details-image {
 792      display: block;
 793      margin: 0 auto 16px;
 794      max-width: 100%;
 795      max-height: 90%;
 796      max-height: calc( 100% - 56px ); /* leave space for actions underneath */
 797      background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
 798      background-position: 0 0, 10px 10px;
 799      background-size: 20px 20px;
 800  }
 801  
 802  .edit-attachment-frame .attachment-media-view .details-image.icon {
 803      background: none;
 804  }
 805  
 806  .edit-attachment-frame .attachment-media-view .attachment-actions {
 807      text-align: center;
 808  }
 809  
 810  .edit-attachment-frame .wp-media-wrapper {
 811      margin-bottom: 12px;
 812  }
 813  
 814  .edit-attachment-frame input,
 815  .edit-attachment-frame textarea {
 816      padding: 4px 8px;
 817      line-height: 1.42857143;
 818  }
 819  
 820  .edit-attachment-frame .attachment-info {
 821      overflow: auto;
 822      box-sizing: border-box;
 823      margin-bottom: 0;
 824      padding: 12px 16px 0;
 825      width: 35%;
 826      height: 100%;
 827      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 828      border-bottom: 0;
 829      border-left: 1px solid #dcdcde;
 830      background: #f6f7f7;
 831  }
 832  
 833  .edit-attachment-frame .attachment-info .details,
 834  .edit-attachment-frame .attachment-info .settings {
 835      position: relative; /* RTL fix, #WP29352 */
 836      overflow: hidden;
 837      float: none;
 838      margin-bottom: 15px;
 839      padding-bottom: 15px;
 840      border-bottom: 1px solid #dcdcde;
 841  }
 842  
 843  .edit-attachment-frame .attachment-info .filename {
 844      font-weight: 400;
 845      color: #646970;
 846  }
 847  
 848  .edit-attachment-frame .attachment-info .thumbnail {
 849      margin-bottom: 12px;
 850  }
 851  
 852  .attachment-info .actions {
 853      margin-bottom: 16px;
 854  }
 855  
 856  .attachment-info .actions a {
 857      display: inline;
 858      text-decoration: none;
 859  }
 860  
 861  .copy-to-clipboard-container {
 862      display: flex;
 863      align-items: center;
 864      margin-top: 8px;
 865      clear: both;
 866  }
 867  
 868  .copy-to-clipboard-container .copy-attachment-url {
 869      white-space: normal;
 870  }
 871  
 872  .copy-to-clipboard-container .success {
 873      color: #007017;
 874      margin-left: 8px;
 875  }
 876  
 877  /*------------------------------------------------------------------------------
 878    14.2 - Image Editor
 879  ------------------------------------------------------------------------------*/
 880  .wp_attachment_details .attachment-alt-text {
 881      margin-bottom: 5px;
 882  }
 883  
 884  .wp_attachment_details #attachment_alt {
 885      max-width: 500px;
 886      height: 3.28571428em;
 887  }
 888  
 889  .wp_attachment_details .attachment-alt-text-description {
 890      margin-top: 5px;
 891  }
 892  
 893  .wp_attachment_details label[for="content"] {
 894      font-size: 13px;
 895      line-height: 1.5;
 896      margin: 1em 0;
 897  }
 898  
 899  .wp_attachment_details #attachment_caption {
 900      height: 4em;
 901  }
 902  
 903  .describe .image-editor {
 904      vertical-align: top;
 905  }
 906  
 907  .imgedit-wrap {
 908      position: relative;
 909      padding-top: 10px;
 910  }
 911  
 912  .image-editor p,
 913  .image-editor fieldset {
 914      margin: 8px 0;
 915  }
 916  
 917  .image-editor legend {
 918      margin-bottom: 5px;
 919  }
 920  
 921  .describe .imgedit-wrap .image-editor {
 922      padding: 0 5px;
 923  }
 924  
 925  .wp_attachment_holder div.updated {
 926      margin-top: 0;
 927  }
 928  
 929  .wp_attachment_holder .imgedit-wrap > div {
 930      height: auto;
 931  }
 932  
 933  .imgedit-panel-content {
 934      display: flex;
 935      flex-wrap: wrap;
 936      gap: 20px;
 937      margin-bottom: 20px;
 938  }
 939  
 940  .imgedit-settings {
 941      max-width: 240px; /* Prevent reflow when help info is expanded. */
 942  }
 943  
 944  .imgedit-group-controls > * {
 945      display: none;
 946  }
 947  
 948  .imgedit-panel-active .imgedit-group-controls > * {
 949      display: block;
 950  }
 951  
 952  .imgedit-panel-active .imgedit-group-controls > .imgedit-crop-apply {
 953      display: flex;
 954  }
 955  
 956  .imgedit-crop-apply {
 957      gap: 4px;
 958      flex-wrap: wrap;
 959  }
 960  
 961  .wp_attachment_holder .imgedit-wrap .image-editor {
 962      float: right;
 963      width: 250px;
 964  }
 965  
 966  .image-editor input {
 967      margin-top: 0;
 968      vertical-align: middle;
 969  }
 970  
 971  .imgedit-wait {
 972      position: absolute;
 973      top: 0;
 974      bottom: 0;
 975      width: 100%;
 976      background: #fff;
 977      opacity: 0.7;
 978      filter: alpha(opacity=70);
 979      display: none;
 980  }
 981  
 982  .imgedit-wait:before {
 983      content: "";
 984      display: block;
 985      width: 20px;
 986      height: 20px;
 987      position: absolute;
 988      left: 50%;
 989      top: 50%;
 990      margin: -10px 0 0 -10px;
 991      background: transparent url(../images/spinner.gif) no-repeat center;
 992      background-size: 20px 20px;
 993      transform: translateZ(0);
 994  }
 995  
 996  .no-float {
 997      float: none;
 998  }
 999  
1000  .media-disabled,
1001  .image-editor .disabled {
1002      /* WCAG 1.4.3 Text or images of text that are part of an inactive user
1003         interface component ... have no contrast requirement. */
1004      color: #a7aaad;
1005  }
1006  
1007  .A1B1 {
1008      overflow: hidden;
1009  }
1010  
1011  .wp_attachment_image .button,
1012  .A1B1 .button {
1013      float: left;
1014  }
1015  
1016  .no-js .wp_attachment_image .button {
1017      display: none;
1018  }
1019  
1020  .wp_attachment_image .spinner,
1021  .A1B1 .spinner {
1022      float: left;
1023  }
1024  
1025  .imgedit-menu .note-no-rotate {
1026      clear: both;
1027      margin: 0;
1028      padding: 1em 0 0;
1029  }
1030  
1031  .imgedit-menu .button:after,
1032  .imgedit-menu .button:before {
1033      font: normal 16px/1 dashicons;
1034      margin-right: 8px;
1035      vertical-align: middle;
1036      position: relative;
1037      top: -2px;
1038      -webkit-font-smoothing: antialiased;
1039      -moz-osx-font-smoothing: grayscale;
1040  }
1041  
1042  .imgedit-menu .imgedit-rotate.button:after {
1043      content: '\f140';
1044      margin-left: 2px;
1045      margin-right: 0;
1046  }
1047  
1048  .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
1049      content: '\f142';
1050  }
1051  
1052  .imgedit-menu .button.disabled {
1053      color: #a7aaad;
1054      border-color: #dcdcde;
1055      background: #f6f7f7;
1056      box-shadow: none;
1057      text-shadow: 0 1px 0 #fff;
1058      cursor: default;
1059      transform: none;
1060  }
1061  
1062  .imgedit-crop:before {
1063      content: "\f165";
1064      content: "\f165" / '';
1065  }
1066  
1067  .imgedit-scale:before {
1068      content: "\f211";
1069      content: "\f211" / '';
1070  }
1071  
1072  .imgedit-rotate:before {
1073      content: "\f167";
1074      content: "\f167" / '';
1075  }
1076  
1077  .imgedit-undo:before {
1078      content: "\f171";
1079      content: "\f171" / '';
1080  }
1081  
1082  .imgedit-redo:before {
1083      content: "\f172";
1084      content: "\f172" / '';
1085  }
1086  
1087  .imgedit-crop-wrap {
1088      position: relative;
1089  }
1090  
1091  .imgedit-crop-wrap img {
1092      background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1093      background-position: 0 0, 10px 10px;
1094      background-size: 20px 20px;
1095  }
1096  
1097  .imgedit-crop-wrap {
1098      padding: 20px;
1099      background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1100      background-position: 0 0, 10px 10px;
1101      background-size: 20px 20px;
1102  }
1103  
1104  
1105  .imgedit-crop {
1106      margin: 0 8px 0 0;
1107  }
1108  
1109  .imgedit-rotate {
1110      margin: 0 8px 0 3px;
1111  }
1112  
1113  .imgedit-undo {
1114      margin: 0 3px;
1115  }
1116  
1117  .imgedit-redo {
1118      margin: 0 8px 0 3px;
1119  }
1120  
1121  .imgedit-thumbnail-preview-group {
1122      display: flex;
1123      flex-wrap: wrap;
1124      column-gap: 10px;
1125  }
1126  
1127  .imgedit-thumbnail-preview {
1128      margin: 10px 8px 0 0;
1129  }
1130  
1131  .imgedit-thumbnail-preview-caption {
1132      display: block;
1133  }
1134  
1135  #poststuff .imgedit-group-top h2 {
1136      display: inline-block;
1137      margin: 0;
1138      padding: 0;
1139      font-size: 14px;
1140      line-height: 1.4;
1141  }
1142  
1143  #poststuff .imgedit-group-top .button-link {
1144      text-decoration: none;
1145      color: #1d2327;
1146  }
1147  
1148  .imgedit-applyto .imgedit-label {
1149      display: block;
1150      padding: .5em 0 0;
1151  }
1152  
1153  .imgedit-popup-menu,
1154  .imgedit-help {
1155      display: none;
1156      padding-bottom: 8px;
1157  }
1158  
1159  .imgedit-panel-tools > .imgedit-menu {
1160      display: flex;
1161      column-gap: 4px;
1162      align-items: flex-start;
1163      flex-wrap: wrap;
1164  }
1165  
1166  .imgedit-popup-menu {
1167      width: calc( 100% - 20px );
1168      position: absolute;
1169      background: #fff;
1170      padding: 10px;
1171      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
1172  }
1173  
1174  .image-editor .imgedit-menu .imgedit-popup-menu button {
1175      display: block;
1176      margin: 2px 0;
1177      width: 100%;
1178      white-space: break-spaces;
1179      line-height: 1.5;
1180      padding-top: 3px;
1181      padding-bottom: 2px;
1182  }
1183  
1184  .imgedit-rotate-menu-container {
1185      position: relative;
1186  }
1187  
1188  .imgedit-help.imgedit-restore {
1189      padding-bottom: 0;
1190  }
1191  
1192  /* higher specificity than buttons */
1193  .image-editor .imgedit-settings .imgedit-help-toggle,
1194  .image-editor .imgedit-settings .imgedit-help-toggle:hover,
1195  .image-editor .imgedit-settings .imgedit-help-toggle:active {
1196      border: 1px solid transparent;
1197      margin: -1px 0 0 -1px;
1198      padding: 0;
1199      background: transparent;
1200      color: var(--wp-admin-theme-color);
1201      font-size: 20px;
1202      line-height: 1;
1203      cursor: pointer;
1204      box-sizing: content-box;
1205      box-shadow: none;
1206  }
1207  
1208  .image-editor .imgedit-settings .imgedit-help-toggle:focus {
1209      color: var(--wp-admin-theme-color);
1210      border-color: var(--wp-admin-theme-color);
1211      box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
1212      /* Only visible in Windows High Contrast mode */
1213      outline: 2px solid transparent;
1214  }
1215  
1216  .form-table td.imgedit-response {
1217      padding: 0;
1218  }
1219  
1220  .imgedit-submit-btn {
1221      margin-left: 20px;
1222  }
1223  
1224  .imgedit-wrap .nowrap {
1225      white-space: nowrap;
1226      font-size: 12px;
1227      line-height: inherit;
1228  }
1229  
1230  span.imgedit-scale-warn {
1231      display: flex;
1232      align-items: center;
1233      margin: 4px;
1234      gap: 4px;
1235      color: #b32d2e;
1236      font-style: normal;
1237      visibility: hidden;
1238      vertical-align: middle;
1239  }
1240  
1241  .imgedit-save-target {
1242      margin: 8px 0;
1243  }
1244  
1245  .imgedit-save-target legend {
1246      font-weight: 600;
1247  }
1248  
1249  .imgedit-group {
1250      margin-bottom: 20px;
1251  }
1252  
1253  .image-editor .imgedit-original-dimensions {
1254      display: inline-block;
1255  }
1256  
1257  .image-editor .imgedit-scale-controls input[type="text"],
1258  .image-editor .imgedit-crop-ratio input[type="text"],
1259  .image-editor .imgedit-crop-sel input[type="text"],
1260  .image-editor .imgedit-scale-controls input[type="number"],
1261  .image-editor .imgedit-crop-ratio input[type="number"],
1262  .image-editor .imgedit-crop-sel input[type="number"] {
1263      width: 80px;
1264      font-size: 14px;
1265      padding: 0 8px;
1266  }
1267  
1268  .imgedit-separator {
1269      display: inline-block;
1270      width: 7px;
1271      text-align: center;
1272      font-size: 13px;
1273      color: #3c434a;
1274  }
1275  
1276  .image-editor .imgedit-scale-button-wrapper {
1277      margin-top: 0.3077em;
1278      display: block;
1279  }
1280  
1281  .image-editor .imgedit-scale-controls .button {
1282      margin-bottom: 0;
1283  }
1284  
1285  audio, video {
1286      display: inline-block;
1287      max-width: 100%;
1288  }
1289  
1290  .wp-core-ui .mejs-container {
1291      width: 100%;
1292      max-width: 100%;
1293  }
1294  
1295  .wp-core-ui .mejs-container * {
1296      box-sizing: border-box;
1297  }
1298  
1299  .wp-core-ui .mejs-time {
1300      box-sizing: content-box;
1301  }
1302  
1303  /* =Media Queries
1304  -------------------------------------------------------------- */
1305  
1306  /**
1307   * HiDPI Displays
1308   */
1309  @media print,
1310    (min-resolution: 120dpi) {
1311      .imgedit-wait:before {
1312          background-image: url(../images/spinner-2x.gif);
1313      }
1314  }
1315  
1316  @media screen and (max-width: 782px) {
1317      .edit-attachment-frame input,
1318      .edit-attachment-frame textarea {
1319          line-height: 1.5;
1320      }
1321  
1322      .wp_attachment_details label[for="content"] {
1323          font-size: 14px;
1324          line-height: 1.5;
1325      }
1326  
1327      .wp_attachment_details textarea {
1328          line-height: 1.5;
1329      }
1330  
1331      .wp_attachment_details #attachment_alt {
1332          height: 3.375em;
1333      }
1334  
1335      .media-upload-form .media-item.error,
1336      .media-upload-form .media-item .error {
1337          font-size: 13px;
1338          line-height: 1.5;
1339      }
1340  
1341      .media-upload-form .media-item.error {
1342          padding: 1px 10px;
1343      }
1344  
1345      .media-upload-form .media-item .error {
1346          padding: 10px 0 10px 12px;
1347      }
1348  
1349      .image-editor .imgedit-scale input[type="text"],
1350      .image-editor .imgedit-crop-ratio input[type="text"],
1351      .image-editor .imgedit-crop-sel input[type="text"] {
1352          font-size: 16px;
1353          padding: 6px 10px;
1354      }
1355  
1356      .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
1357      .wp_attachment_holder .imgedit-wrap .image-editor {
1358          float: none;
1359          width: auto;
1360          max-width: none;
1361          padding-bottom: 16px;
1362      }
1363  
1364      .copy-to-clipboard-container .success {
1365          font-size: 14px;
1366      }
1367  
1368      /* Restructure image editor on narrow viewports. */
1369      .imgedit-crop-wrap img{
1370          width: 100%;
1371      }
1372  
1373      .media-modal .imgedit-wrap .imgedit-panel-content,
1374      .media-modal .imgedit-wrap .image-editor {
1375          position: initial !important;
1376      }
1377  
1378      .media-modal .imgedit-wrap .image-editor {
1379          box-sizing: border-box;
1380          width: 100% !important;
1381      }
1382  
1383      .image-editor .imgedit-scale-button-wrapper {
1384          display: inline-block;
1385      }
1386  }
1387  
1388  @media only screen and (max-width: 600px) {
1389      .media-item-wrapper {
1390          grid-template-columns: 1fr;
1391      }
1392  }
1393  
1394  /**
1395   * Media queries for media grid.
1396   */
1397  @media only screen and (max-width: 1120px) {
1398      /* override for media-views.css */
1399      #wp-media-grid .wp-filter .attachment-filters {
1400          max-width: 100%;
1401      }
1402  }
1403  
1404  @media only screen and (max-width: 1000px) {
1405      /* override for forms.css */
1406      .wp-filter p.search-box {
1407          float: none;
1408          width: 100%;
1409          display: flex;
1410          flex-wrap: nowrap;
1411          column-gap: 0;
1412      }
1413  
1414      .wp-filter p.search-box #media-search-input {
1415          width: 100%;
1416      }
1417  
1418  }
1419  
1420  @media only screen and (max-width: 782px) {
1421      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1422          top: 46px;
1423          right: 10px;
1424      }
1425  
1426      .media-frame.mode-grid .media-toolbar select {
1427          min-height: 40px;
1428          padding: 0 24px 0 12px;
1429      }
1430  
1431      .media-frame.mode-grid .media-toolbar input[type="search"] {
1432          min-height: 40px;
1433          padding: 0 12px;
1434      }
1435  
1436      .wp-filter p.search-box {
1437          margin-bottom: 0;
1438      }
1439  }
1440  
1441  @media only screen and (max-width: 600px) {
1442      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1443          top: 0;
1444      }
1445  }
1446  
1447  @media only screen and (max-width: 480px) {
1448      .edit-attachment-frame .media-frame-title {
1449          right: 110px;
1450      }
1451  
1452      .upload-php .media-modal-close,
1453      .edit-attachment-frame .edit-media-header .left,
1454      .edit-attachment-frame .edit-media-header .right {
1455          width: 40px;
1456          height: 40px;
1457      }
1458  
1459      .edit-attachment-frame .edit-media-header .right:before,
1460      .edit-attachment-frame .edit-media-header .left:before {
1461          line-height: 40px !important;
1462      }
1463  
1464      .edit-attachment-frame .edit-media-header .left {
1465          right: 82px;
1466      }
1467  
1468      .edit-attachment-frame .edit-media-header .right {
1469          right: 41px;
1470      }
1471  
1472      .edit-attachment-frame .media-frame-content {
1473          top: 40px;
1474      }
1475  
1476      .edit-attachment-frame .attachment-media-view {
1477          float: none;
1478          height: auto;
1479          width: 100%;
1480      }
1481  
1482      .edit-attachment-frame .attachment-info {
1483          height: auto;
1484          width: 100%;
1485      }
1486  }
1487  
1488  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1489      .upload-php .mode-grid .media-sidebar{
1490          max-width: 100%;
1491      }
1492  }
1493  
1494  @media only screen and (max-width: 375px) {
1495      .media-item .attachment-tools {
1496          align-items: baseline;
1497      }
1498      .media-item .edit-attachment.copy-to-clipboard-container {
1499          flex-direction: column;
1500      }
1501  
1502      .copy-to-clipboard-container .success {
1503          line-height: normal;
1504          margin-top: 10px;
1505      }
1506  }