[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  /**
 455   * Media Library grid view
 456   */
 457  
 458  .media-frame.mode-grid,
 459  .media-frame.mode-grid .media-frame-content,
 460  .media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,
 461  .media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,
 462  .media-frame.mode-grid .uploader-inline-content {
 463      position: static;
 464  }
 465  
 466  /* Regions we don't use at all */
 467  .media-frame.mode-grid .media-frame-title,
 468  .media-frame.mode-grid .media-frame-router,
 469  .media-frame.mode-grid .media-frame-menu {
 470      display: none;
 471  }
 472  
 473  .media-frame.mode-grid .media-frame-content {
 474      background-color: transparent;
 475      border: none;
 476  }
 477  
 478  .upload-php .mode-grid .media-sidebar {
 479      position: relative;
 480      width: auto;
 481      margin-top: 12px;
 482      padding: 0 16px;
 483      border-left: 4px solid #d63638;
 484      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 485      background-color: #fff;
 486  }
 487  
 488  .upload-php .mode-grid .hide-sidebar .media-sidebar {
 489      display: none;
 490  }
 491  
 492  .upload-php .mode-grid .media-sidebar .media-uploader-status {
 493      border-bottom: none;
 494      padding-bottom: 0;
 495      max-width: 100%;
 496  }
 497  
 498  .upload-php .mode-grid .media-sidebar .upload-error {
 499      margin: 12px 0;
 500      padding: 4px 0 0;
 501      border: none;
 502      box-shadow: none;
 503      background: none;
 504  }
 505  
 506  .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 507      display: none;
 508  }
 509  
 510  .media-frame.mode-grid .uploader-inline {
 511      position: relative;
 512      top: auto;
 513      right: auto;
 514      left: auto;
 515      bottom: auto;
 516      padding-top: 0;
 517      margin-top: 20px;
 518      border: 4px dashed #c3c4c7;
 519  }
 520  
 521  .media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
 522  .media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper {
 523      position: relative;
 524      top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 525      padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 526  }
 527  
 528  .media-frame.mode-grid .attachment:focus,
 529  .media-frame.mode-grid .selected.attachment:focus,
 530  .media-frame.mode-grid .attachment.details:focus {
 531      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 532      /* Only visible in Windows High Contrast mode */
 533      outline: 2px solid transparent;
 534      outline-offset: -6px;
 535  }
 536  
 537  .media-frame.mode-grid .selected.attachment {
 538      box-shadow:
 539          inset 0 0 0 5px #f0f0f1,
 540          inset 0 0 0 7px #c3c4c7;
 541  }
 542  
 543  .media-frame.mode-grid .attachment.details {
 544      box-shadow:
 545          inset 0 0 0 3px #f0f0f1,
 546          inset 0 0 0 7px var(--wp-admin-theme-color, #3858e9);
 547  }
 548  
 549  .media-frame.mode-grid.mode-select .attachment .thumbnail {
 550      opacity: 0.65;
 551  }
 552  
 553  .media-frame.mode-select .attachment.selected .thumbnail {
 554      opacity: 1;
 555  }
 556  
 557  .media-frame.mode-grid .media-toolbar {
 558      margin-bottom: 15px;
 559      height: auto;
 560  }
 561  
 562  .media-frame.mode-grid .media-toolbar label:not(.media-search-input-label) {
 563      border: 0;
 564      clip-path: inset(50%);
 565      height: 1px;
 566      margin: -1px;
 567      overflow: hidden;
 568      padding: 0;
 569      position: absolute;
 570      width: 1px;
 571      /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 572      word-wrap: normal !important;
 573      word-break: normal !important;
 574  }
 575  
 576  .media-frame.mode-grid .media-toolbar select {
 577      margin: 0 10px 0 0;
 578      min-height: 32px;
 579      line-height: 2.14285714; /* 30px for 32px height with 14px font */
 580      padding: 0 24px 0 8px;
 581  }
 582  
 583  .media-frame.mode-grid .media-toolbar input[type="search"] {
 584      min-height: 32px;
 585      padding: 0 8px;
 586  }
 587  
 588  .media-frame.mode-grid .media-toolbar-secondary {
 589      display: flex;
 590      flex-wrap: wrap;
 591      align-items: center;
 592      gap: 8px;
 593  }
 594  
 595  .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
 596      margin: 0 8px 0 0;
 597      height: 100%;
 598  }
 599  
 600  .media-frame.mode-grid .attachments-browser .bulk-select {
 601      display: inline-block;
 602      margin: 0 10px 0 0;
 603  }
 604  
 605  .media-frame.mode-grid .search {
 606      margin-top: 0;
 607  }
 608  
 609  .media-frame-content .media-search-input-label {
 610      vertical-align: baseline;
 611  }
 612  
 613  .attachments-browser .media-toolbar-secondary > .media-button {
 614      margin-right: 10px;
 615  }
 616  
 617  .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 618      position: fixed;
 619      top: 32px;
 620      left: auto;
 621      right: 20px;
 622      margin-top: 0;
 623  }
 624  
 625  .media-frame.mode-grid .attachments-browser {
 626      padding: 0;
 627  }
 628  
 629  .media-frame.mode-grid .attachments-browser .attachments {
 630      padding: 2px;
 631  }
 632  
 633  .media-frame.mode-grid .attachments-browser .no-media {
 634      color: #646970; /* same as no plugins and no themes */
 635      font-size: 18px;
 636      font-style: normal;
 637      margin: 0;
 638      padding: 100px 0 0;
 639      text-align: center;
 640  }
 641  
 642  /**
 643   * Attachment details modal
 644   */
 645  
 646  .edit-attachment-frame {
 647      display: block;
 648      height: 100%;
 649      width: 100%;
 650  }
 651  
 652  .edit-attachment-frame .edit-media-header {
 653      overflow: hidden;
 654  }
 655  
 656  .upload-php .media-modal-close .media-modal-icon:before {
 657      content: "\f335";
 658      content: "\f335" / '';
 659      font-size: 22px;
 660  }
 661  
 662  .upload-php .media-modal-close,
 663  .edit-attachment-frame .edit-media-header .left,
 664  .edit-attachment-frame .edit-media-header .right {
 665      cursor: pointer;
 666      color: #787c82;
 667      background-color: transparent;
 668      height: 50px;
 669      width: 50px;
 670      padding: 0;
 671      position: absolute;
 672      text-align: center;
 673      border: 0;
 674      border-left: 1px solid #dcdcde;
 675      transition: color .1s ease-in-out, background .1s ease-in-out;
 676  }
 677  
 678  .upload-php .media-modal-close {
 679      top: 0;
 680      right: 0;
 681  }
 682  
 683  .edit-attachment-frame .edit-media-header .left {
 684      right: 102px;
 685  }
 686  
 687  .edit-attachment-frame .edit-media-header .right {
 688      right: 51px;
 689  }
 690  
 691  .edit-attachment-frame .media-frame-title {
 692      left: 0;
 693      right: 150px; /* leave space for prev/next/close */
 694  }
 695  
 696  .edit-attachment-frame .edit-media-header .right:before,
 697  .edit-attachment-frame .edit-media-header .left:before {
 698      font: normal 20px/50px dashicons !important;
 699      display: inline;
 700      font-weight: 300;
 701  }
 702  
 703  .upload-php .media-modal-close:hover,
 704  .upload-php .media-modal-close:focus,
 705  .edit-attachment-frame .edit-media-header .left:hover,
 706  .edit-attachment-frame .edit-media-header .right:hover,
 707  .edit-attachment-frame .edit-media-header .left:focus,
 708  .edit-attachment-frame .edit-media-header .right:focus {
 709      background: #dcdcde;
 710      border-color: #c3c4c7;
 711      color: #000;
 712      outline: none;
 713      box-shadow: none;
 714  }
 715  
 716  .upload-php .media-modal-close:focus,
 717  .edit-attachment-frame .edit-media-header .left:focus,
 718  .edit-attachment-frame .edit-media-header .right:focus {
 719      /* Only visible in Windows High Contrast mode */
 720      outline: 2px solid transparent;
 721      outline-offset: -2px;
 722  }
 723  
 724  .upload-php .media-modal-close:focus .media-modal-icon:before,
 725  .upload-php .media-modal-close:hover .media-modal-icon:before {
 726      color: #000;
 727  }
 728  
 729  .edit-attachment-frame .edit-media-header .left:before {
 730      content: "\f341";
 731      content: "\f341" / '';
 732  }
 733  
 734  .edit-attachment-frame .edit-media-header .right:before {
 735      content: "\f345";
 736      content: "\f345" / '';
 737  }
 738  
 739  .edit-attachment-frame .edit-media-header [disabled],
 740  .edit-attachment-frame .edit-media-header [disabled]:hover {
 741      color: #c3c4c7;
 742      background: inherit;
 743      cursor: default;
 744  }
 745  
 746  .edit-attachment-frame .media-frame-content,
 747  .edit-attachment-frame .media-frame-router {
 748      left: 0;
 749  }
 750  
 751  .edit-attachment-frame .media-frame-content {
 752      border-bottom: none;
 753      bottom: 0;
 754      top: 50px;
 755  }
 756  
 757  .edit-attachment-frame .attachment-details {
 758      position: absolute;
 759      overflow: auto;
 760      top: 0;
 761      bottom: 0;
 762      right: 0;
 763      left: 0;
 764      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 765  }
 766  
 767  .edit-attachment-frame .attachment-media-view {
 768      float: left;
 769      width: 65%;
 770      height: 100%;
 771  }
 772  
 773  .edit-attachment-frame .attachment-media-view .thumbnail {
 774      box-sizing: border-box;
 775      padding: 16px;
 776      height: 100%;
 777  }
 778  
 779  .edit-attachment-frame .attachment-media-view .details-image {
 780      display: block;
 781      margin: 0 auto 16px;
 782      max-width: 100%;
 783      max-height: 90%;
 784      max-height: calc( 100% - 56px ); /* leave space for actions underneath */
 785      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);
 786      background-position: 0 0, 10px 10px;
 787      background-size: 20px 20px;
 788  }
 789  
 790  .edit-attachment-frame .attachment-media-view .details-image.icon {
 791      background: none;
 792  }
 793  
 794  .edit-attachment-frame .attachment-media-view .attachment-actions {
 795      text-align: center;
 796  }
 797  
 798  .edit-attachment-frame .wp-media-wrapper {
 799      margin-bottom: 12px;
 800  }
 801  
 802  .edit-attachment-frame input,
 803  .edit-attachment-frame textarea {
 804      padding: 4px 8px;
 805      line-height: 1.42857143;
 806  }
 807  
 808  .edit-attachment-frame .attachment-info {
 809      overflow: auto;
 810      box-sizing: border-box;
 811      margin-bottom: 0;
 812      padding: 12px 16px 0;
 813      width: 35%;
 814      height: 100%;
 815      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 816      border-bottom: 0;
 817      border-left: 1px solid #dcdcde;
 818      background: #f6f7f7;
 819  }
 820  
 821  .edit-attachment-frame .attachment-info .details,
 822  .edit-attachment-frame .attachment-info .settings {
 823      position: relative; /* RTL fix, #WP29352 */
 824      overflow: hidden;
 825      float: none;
 826      margin-bottom: 15px;
 827      padding-bottom: 15px;
 828      border-bottom: 1px solid #dcdcde;
 829  }
 830  
 831  .edit-attachment-frame .attachment-info .filename {
 832      font-weight: 400;
 833      color: #646970;
 834  }
 835  
 836  .edit-attachment-frame .attachment-info .thumbnail {
 837      margin-bottom: 12px;
 838  }
 839  
 840  .attachment-info .actions {
 841      margin-bottom: 16px;
 842  }
 843  
 844  .attachment-info .actions a {
 845      display: inline;
 846      text-decoration: none;
 847  }
 848  
 849  .copy-to-clipboard-container {
 850      display: flex;
 851      align-items: center;
 852      margin-top: 8px;
 853      clear: both;
 854  }
 855  
 856  .copy-to-clipboard-container .copy-attachment-url {
 857      white-space: normal;
 858  }
 859  
 860  .copy-to-clipboard-container .success {
 861      color: #007017;
 862      margin-left: 8px;
 863  }
 864  
 865  /*------------------------------------------------------------------------------
 866    14.2 - Image Editor
 867  ------------------------------------------------------------------------------*/
 868  .wp_attachment_details .attachment-alt-text {
 869      margin-bottom: 5px;
 870  }
 871  
 872  .wp_attachment_details #attachment_alt {
 873      max-width: 500px;
 874      height: 3.28571428em;
 875  }
 876  
 877  .wp_attachment_details .attachment-alt-text-description {
 878      margin-top: 5px;
 879  }
 880  
 881  .wp_attachment_details label[for="content"] {
 882      font-size: 13px;
 883      line-height: 1.5;
 884      margin: 1em 0;
 885  }
 886  
 887  .wp_attachment_details #attachment_caption {
 888      height: 4em;
 889  }
 890  
 891  .describe .image-editor {
 892      vertical-align: top;
 893  }
 894  
 895  .imgedit-wrap {
 896      position: relative;
 897      padding-top: 10px;
 898  }
 899  
 900  .image-editor p,
 901  .image-editor fieldset {
 902      margin: 8px 0;
 903  }
 904  
 905  .image-editor legend {
 906      margin-bottom: 5px;
 907  }
 908  
 909  .describe .imgedit-wrap .image-editor {
 910      padding: 0 5px;
 911  }
 912  
 913  .wp_attachment_holder div.updated {
 914      margin-top: 0;
 915  }
 916  
 917  .wp_attachment_holder .imgedit-wrap > div {
 918      height: auto;
 919  }
 920  
 921  .imgedit-panel-content {
 922      display: flex;
 923      flex-wrap: wrap;
 924      gap: 20px;
 925      margin-bottom: 20px;
 926  }
 927  
 928  .imgedit-settings {
 929      max-width: 240px; /* Prevent reflow when help info is expanded. */
 930  }
 931  
 932  .imgedit-group-controls > * {
 933      display: none;
 934  }
 935  
 936  .imgedit-panel-active .imgedit-group-controls > * {
 937      display: block;
 938  }
 939  
 940  .imgedit-panel-active .imgedit-group-controls > .imgedit-crop-apply {
 941      display: flex;
 942  }
 943  
 944  .imgedit-crop-apply {
 945      gap: 4px;
 946      flex-wrap: wrap;
 947  }
 948  
 949  .wp_attachment_holder .imgedit-wrap .image-editor {
 950      float: right;
 951      width: 250px;
 952  }
 953  
 954  .image-editor input {
 955      margin-top: 0;
 956      vertical-align: middle;
 957  }
 958  
 959  .imgedit-wait {
 960      position: absolute;
 961      top: 0;
 962      bottom: 0;
 963      width: 100%;
 964      background: #fff;
 965      opacity: 0.7;
 966      filter: alpha(opacity=70);
 967      display: none;
 968  }
 969  
 970  .imgedit-wait:before {
 971      content: "";
 972      display: block;
 973      width: 20px;
 974      height: 20px;
 975      position: absolute;
 976      left: 50%;
 977      top: 50%;
 978      margin: -10px 0 0 -10px;
 979      background: transparent url(../images/spinner.gif) no-repeat center;
 980      background-size: 20px 20px;
 981      transform: translateZ(0);
 982  }
 983  
 984  .no-float {
 985      float: none;
 986  }
 987  
 988  .media-disabled,
 989  .image-editor .disabled {
 990      /* WCAG 1.4.3 Text or images of text that are part of an inactive user
 991         interface component ... have no contrast requirement. */
 992      color: #a7aaad;
 993  }
 994  
 995  .A1B1 {
 996      overflow: hidden;
 997  }
 998  
 999  .wp_attachment_image .button,
1000  .A1B1 .button {
1001      float: left;
1002  }
1003  
1004  .no-js .wp_attachment_image .button {
1005      display: none;
1006  }
1007  
1008  .wp_attachment_image .spinner,
1009  .A1B1 .spinner {
1010      float: left;
1011  }
1012  
1013  .imgedit-menu .note-no-rotate {
1014      clear: both;
1015      margin: 0;
1016      padding: 1em 0 0;
1017  }
1018  
1019  .imgedit-menu .button:after,
1020  .imgedit-menu .button:before {
1021      font: normal 16px/1 dashicons;
1022      margin-right: 8px;
1023      vertical-align: middle;
1024      position: relative;
1025      top: -2px;
1026      -webkit-font-smoothing: antialiased;
1027      -moz-osx-font-smoothing: grayscale;
1028  }
1029  
1030  .imgedit-menu .imgedit-rotate.button:after {
1031      content: '\f140';
1032      margin-left: 2px;
1033      margin-right: 0;
1034  }
1035  
1036  .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
1037      content: '\f142';
1038  }
1039  
1040  .imgedit-menu .button.disabled {
1041      color: #a7aaad;
1042      border-color: #dcdcde;
1043      background: #f6f7f7;
1044      box-shadow: none;
1045      text-shadow: 0 1px 0 #fff;
1046      cursor: default;
1047      transform: none;
1048  }
1049  
1050  .imgedit-crop:before {
1051      content: "\f165";
1052      content: "\f165" / '';
1053  }
1054  
1055  .imgedit-scale:before {
1056      content: "\f211";
1057      content: "\f211" / '';
1058  }
1059  
1060  .imgedit-rotate:before {
1061      content: "\f167";
1062      content: "\f167" / '';
1063  }
1064  
1065  .imgedit-undo:before {
1066      content: "\f171";
1067      content: "\f171" / '';
1068  }
1069  
1070  .imgedit-redo:before {
1071      content: "\f172";
1072      content: "\f172" / '';
1073  }
1074  
1075  .imgedit-crop-wrap {
1076      position: relative;
1077  }
1078  
1079  .imgedit-crop-wrap img {
1080      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);
1081      background-position: 0 0, 10px 10px;
1082      background-size: 20px 20px;
1083  }
1084  
1085  .imgedit-crop-wrap {
1086      padding: 20px;
1087      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);
1088      background-position: 0 0, 10px 10px;
1089      background-size: 20px 20px;
1090  }
1091  
1092  
1093  .imgedit-crop {
1094      margin: 0 8px 0 0;
1095  }
1096  
1097  .imgedit-rotate {
1098      margin: 0 8px 0 3px;
1099  }
1100  
1101  .imgedit-undo {
1102      margin: 0 3px;
1103  }
1104  
1105  .imgedit-redo {
1106      margin: 0 8px 0 3px;
1107  }
1108  
1109  .imgedit-thumbnail-preview-group {
1110      display: flex;
1111      flex-wrap: wrap;
1112      column-gap: 10px;
1113  }
1114  
1115  .imgedit-thumbnail-preview {
1116      margin: 10px 8px 0 0;
1117  }
1118  
1119  .imgedit-thumbnail-preview-caption {
1120      display: block;
1121  }
1122  
1123  #poststuff .imgedit-group-top h2 {
1124      display: inline-block;
1125      margin: 0;
1126      padding: 0;
1127      font-size: 14px;
1128      line-height: 1.4;
1129  }
1130  
1131  #poststuff .imgedit-group-top .button-link {
1132      text-decoration: none;
1133      color: #1d2327;
1134  }
1135  
1136  .imgedit-applyto .imgedit-label {
1137      display: block;
1138      padding: .5em 0 0;
1139  }
1140  
1141  .imgedit-popup-menu,
1142  .imgedit-help {
1143      display: none;
1144      padding-bottom: 8px;
1145  }
1146  
1147  .imgedit-panel-tools > .imgedit-menu {
1148      display: flex;
1149      column-gap: 4px;
1150      align-items: flex-start;
1151      flex-wrap: wrap;
1152  }
1153  
1154  .imgedit-popup-menu {
1155      width: calc( 100% - 20px );
1156      position: absolute;
1157      background: #fff;
1158      padding: 10px;
1159      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
1160  }
1161  
1162  .image-editor .imgedit-menu .imgedit-popup-menu button {
1163      display: block;
1164      margin: 2px 0;
1165      width: 100%;
1166      white-space: break-spaces;
1167      line-height: 1.5;
1168      padding-top: 3px;
1169      padding-bottom: 2px;
1170  }
1171  
1172  .imgedit-rotate-menu-container {
1173      position: relative;
1174  }
1175  
1176  .imgedit-help.imgedit-restore {
1177      padding-bottom: 0;
1178  }
1179  
1180  /* higher specificity than buttons */
1181  .image-editor .imgedit-settings .imgedit-help-toggle,
1182  .image-editor .imgedit-settings .imgedit-help-toggle:hover,
1183  .image-editor .imgedit-settings .imgedit-help-toggle:active {
1184      border: 1px solid transparent;
1185      margin: -1px 0 0 -1px;
1186      padding: 0;
1187      background: transparent;
1188      color: var(--wp-admin-theme-color);
1189      font-size: 20px;
1190      line-height: 1;
1191      cursor: pointer;
1192      box-sizing: content-box;
1193      box-shadow: none;
1194  }
1195  
1196  .image-editor .imgedit-settings .imgedit-help-toggle:focus {
1197      color: var(--wp-admin-theme-color);
1198      border-color: var(--wp-admin-theme-color);
1199      box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
1200      /* Only visible in Windows High Contrast mode */
1201      outline: 2px solid transparent;
1202  }
1203  
1204  .form-table td.imgedit-response {
1205      padding: 0;
1206  }
1207  
1208  .imgedit-submit-btn {
1209      margin-left: 20px;
1210  }
1211  
1212  .imgedit-wrap .nowrap {
1213      white-space: nowrap;
1214      font-size: 12px;
1215      line-height: inherit;
1216  }
1217  
1218  span.imgedit-scale-warn {
1219      display: flex;
1220      align-items: center;
1221      margin: 4px;
1222      gap: 4px;
1223      color: #b32d2e;
1224      font-style: normal;
1225      visibility: hidden;
1226      vertical-align: middle;
1227  }
1228  
1229  .imgedit-save-target {
1230      margin: 8px 0;
1231  }
1232  
1233  .imgedit-save-target legend {
1234      font-weight: 600;
1235  }
1236  
1237  .imgedit-group {
1238      margin-bottom: 20px;
1239  }
1240  
1241  .image-editor .imgedit-original-dimensions {
1242      display: inline-block;
1243  }
1244  
1245  .image-editor .imgedit-scale-controls input[type="text"],
1246  .image-editor .imgedit-crop-ratio input[type="text"],
1247  .image-editor .imgedit-crop-sel input[type="text"],
1248  .image-editor .imgedit-scale-controls input[type="number"],
1249  .image-editor .imgedit-crop-ratio input[type="number"],
1250  .image-editor .imgedit-crop-sel input[type="number"] {
1251      width: 80px;
1252      font-size: 14px;
1253      padding: 0 8px;
1254  }
1255  
1256  .imgedit-separator {
1257      display: inline-block;
1258      width: 7px;
1259      text-align: center;
1260      font-size: 13px;
1261      color: #3c434a;
1262  }
1263  
1264  .image-editor .imgedit-scale-button-wrapper {
1265      margin-top: 0.3077em;
1266      display: block;
1267  }
1268  
1269  .image-editor .imgedit-scale-controls .button {
1270      margin-bottom: 0;
1271  }
1272  
1273  audio, video {
1274      display: inline-block;
1275      max-width: 100%;
1276  }
1277  
1278  .wp-core-ui .mejs-container {
1279      width: 100%;
1280      max-width: 100%;
1281  }
1282  
1283  .wp-core-ui .mejs-container * {
1284      box-sizing: border-box;
1285  }
1286  
1287  .wp-core-ui .mejs-time {
1288      box-sizing: content-box;
1289  }
1290  
1291  /* =Media Queries
1292  -------------------------------------------------------------- */
1293  
1294  /**
1295   * HiDPI Displays
1296   */
1297  @media print,
1298    (min-resolution: 120dpi) {
1299      .imgedit-wait:before {
1300          background-image: url(../images/spinner-2x.gif);
1301      }
1302  }
1303  
1304  @media screen and (max-width: 782px) {
1305      .edit-attachment-frame input,
1306      .edit-attachment-frame textarea {
1307          line-height: 1.5;
1308      }
1309  
1310      .wp_attachment_details label[for="content"] {
1311          font-size: 14px;
1312          line-height: 1.5;
1313      }
1314  
1315      .wp_attachment_details textarea {
1316          line-height: 1.5;
1317      }
1318  
1319      .wp_attachment_details #attachment_alt {
1320          height: 3.375em;
1321      }
1322  
1323      .media-upload-form .media-item.error,
1324      .media-upload-form .media-item .error {
1325          font-size: 13px;
1326          line-height: 1.5;
1327      }
1328  
1329      .media-upload-form .media-item.error {
1330          padding: 1px 10px;
1331      }
1332  
1333      .media-upload-form .media-item .error {
1334          padding: 10px 0 10px 12px;
1335      }
1336  
1337      .image-editor .imgedit-scale input[type="text"],
1338      .image-editor .imgedit-crop-ratio input[type="text"],
1339      .image-editor .imgedit-crop-sel input[type="text"] {
1340          font-size: 16px;
1341          padding: 6px 10px;
1342      }
1343  
1344      .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
1345      .wp_attachment_holder .imgedit-wrap .image-editor {
1346          float: none;
1347          width: auto;
1348          max-width: none;
1349          padding-bottom: 16px;
1350      }
1351  
1352      .copy-to-clipboard-container .success {
1353          font-size: 14px;
1354      }
1355  
1356      /* Restructure image editor on narrow viewports. */
1357      .imgedit-crop-wrap img{
1358          width: 100%;
1359      }
1360  
1361      .media-modal .imgedit-wrap .imgedit-panel-content,
1362      .media-modal .imgedit-wrap .image-editor {
1363          position: initial !important;
1364      }
1365  
1366      .media-modal .imgedit-wrap .image-editor {
1367          box-sizing: border-box;
1368          width: 100% !important;
1369      }
1370  
1371      .image-editor .imgedit-scale-button-wrapper {
1372          display: inline-block;
1373      }
1374  }
1375  
1376  @media only screen and (max-width: 600px) {
1377      .media-item-wrapper {
1378          grid-template-columns: 1fr;
1379      }
1380  }
1381  
1382  /**
1383   * Media queries for media grid.
1384   */
1385  @media only screen and (max-width: 1120px) {
1386      /* override for media-views.css */
1387      #wp-media-grid .wp-filter .attachment-filters {
1388          max-width: 100%;
1389      }
1390  }
1391  
1392  @media only screen and (max-width: 1000px) {
1393      /* override for forms.css */
1394      .wp-filter p.search-box {
1395          float: none;
1396          width: 100%;
1397          display: flex;
1398          flex-wrap: nowrap;
1399          column-gap: 0;
1400      }
1401  
1402      .wp-filter p.search-box #media-search-input {
1403          width: 100%;
1404      }
1405  
1406  }
1407  
1408  @media only screen and (max-width: 782px) {
1409      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1410          top: 46px;
1411          right: 10px;
1412      }
1413  
1414      .media-frame.mode-grid .media-toolbar select {
1415          min-height: 40px;
1416          padding: 0 24px 0 12px;
1417      }
1418  
1419      .media-frame.mode-grid .media-toolbar input[type="search"] {
1420          min-height: 40px;
1421          padding: 0 12px;
1422      }
1423  
1424      .wp-filter p.search-box {
1425          margin-bottom: 0;
1426      }
1427  }
1428  
1429  @media only screen and (max-width: 600px) {
1430      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1431          top: 0;
1432      }
1433  }
1434  
1435  @media only screen and (max-width: 480px) {
1436      .edit-attachment-frame .media-frame-title {
1437          right: 110px;
1438      }
1439  
1440      .upload-php .media-modal-close,
1441      .edit-attachment-frame .edit-media-header .left,
1442      .edit-attachment-frame .edit-media-header .right {
1443          width: 40px;
1444          height: 40px;
1445      }
1446  
1447      .edit-attachment-frame .edit-media-header .right:before,
1448      .edit-attachment-frame .edit-media-header .left:before {
1449          line-height: 40px !important;
1450      }
1451  
1452      .edit-attachment-frame .edit-media-header .left {
1453          right: 82px;
1454      }
1455  
1456      .edit-attachment-frame .edit-media-header .right {
1457          right: 41px;
1458      }
1459  
1460      .edit-attachment-frame .media-frame-content {
1461          top: 40px;
1462      }
1463  
1464      .edit-attachment-frame .attachment-media-view {
1465          float: none;
1466          height: auto;
1467          width: 100%;
1468      }
1469  
1470      .edit-attachment-frame .attachment-info {
1471          height: auto;
1472          width: 100%;
1473      }
1474  }
1475  
1476  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1477      .upload-php .mode-grid .media-sidebar{
1478          max-width: 100%;
1479      }
1480  }
1481  
1482  @media only screen and (max-width: 375px) {
1483      .media-item .attachment-tools {
1484          align-items: baseline;
1485      }
1486      .media-item .edit-attachment.copy-to-clipboard-container {
1487          flex-direction: column;
1488      }
1489  
1490      .copy-to-clipboard-container .success {
1491          line-height: normal;
1492          margin-top: 10px;
1493      }
1494  }