[Summary view] [Print] [Text view]

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