[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      /* Only visible in Windows High Contrast mode */
 730      outline: 2px solid transparent;
 731      outline-offset: -2px;
 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 [disabled],
 750  .edit-attachment-frame .edit-media-header [disabled]:hover {
 751      color: #c3c4c7;
 752      background: inherit;
 753      cursor: default;
 754  }
 755  
 756  .edit-attachment-frame .media-frame-content,
 757  .edit-attachment-frame .media-frame-router {
 758      right: 0;
 759  }
 760  
 761  .edit-attachment-frame .media-frame-content {
 762      border-bottom: none;
 763      bottom: 0;
 764      top: 50px;
 765  }
 766  
 767  .edit-attachment-frame .attachment-details {
 768      position: absolute;
 769      overflow: auto;
 770      top: 0;
 771      bottom: 0;
 772      left: 0;
 773      right: 0;
 774      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 775  }
 776  
 777  .edit-attachment-frame .attachment-media-view {
 778      float: right;
 779      width: 65%;
 780      height: 100%;
 781  }
 782  
 783  .edit-attachment-frame .attachment-media-view .thumbnail {
 784      box-sizing: border-box;
 785      padding: 16px;
 786      height: 100%;
 787  }
 788  
 789  .edit-attachment-frame .attachment-media-view .details-image {
 790      display: block;
 791      margin: 0 auto 16px;
 792      max-width: 100%;
 793      max-height: 90%;
 794      max-height: calc(100% - 56px); /* leave space for actions underneath */
 795      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);
 796      background-position: 100% 0, 10px 10px;
 797      background-size: 20px 20px;
 798  }
 799  
 800  .edit-attachment-frame .attachment-media-view .details-image.icon {
 801      background: none;
 802  }
 803  
 804  .edit-attachment-frame .attachment-media-view .attachment-actions {
 805      text-align: center;
 806  }
 807  
 808  .edit-attachment-frame .wp-media-wrapper {
 809      margin-bottom: 12px;
 810  }
 811  
 812  .edit-attachment-frame input,
 813  .edit-attachment-frame textarea {
 814      padding: 4px 8px;
 815      line-height: 1.42857143;
 816  }
 817  
 818  .edit-attachment-frame .attachment-info {
 819      overflow: auto;
 820      box-sizing: border-box;
 821      margin-bottom: 0;
 822      padding: 12px 16px 0;
 823      width: 35%;
 824      height: 100%;
 825      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 826      border-bottom: 0;
 827      border-right: 1px solid #dcdcde;
 828      background: #f6f7f7;
 829  }
 830  
 831  .edit-attachment-frame .attachment-info .details,
 832  .edit-attachment-frame .attachment-info .settings {
 833      position: relative; /* RTL fix, #WP29352 */
 834      overflow: hidden;
 835      float: none;
 836      margin-bottom: 15px;
 837      padding-bottom: 15px;
 838      border-bottom: 1px solid #dcdcde;
 839  }
 840  
 841  .edit-attachment-frame .attachment-info .filename {
 842      font-weight: 400;
 843      color: #646970;
 844  }
 845  
 846  .edit-attachment-frame .attachment-info .thumbnail {
 847      margin-bottom: 12px;
 848  }
 849  
 850  .attachment-info .actions {
 851      margin-bottom: 16px;
 852  }
 853  
 854  .attachment-info .actions a {
 855      display: inline;
 856      text-decoration: none;
 857  }
 858  
 859  .copy-to-clipboard-container {
 860      display: flex;
 861      align-items: center;
 862      margin-top: 8px;
 863      clear: both;
 864  }
 865  
 866  .copy-to-clipboard-container .copy-attachment-url {
 867      white-space: normal;
 868  }
 869  
 870  .copy-to-clipboard-container .success {
 871      color: #007017;
 872      margin-right: 8px;
 873  }
 874  
 875  /**
 876   * Image Editor
 877   */
 878  .wp_attachment_details .attachment-alt-text {
 879      margin-bottom: 5px;
 880  }
 881  
 882  .wp_attachment_details #attachment_alt {
 883      max-width: 500px;
 884      height: 3.28571428em;
 885  }
 886  
 887  .wp_attachment_details .attachment-alt-text-description {
 888      margin-top: 5px;
 889  }
 890  
 891  .wp_attachment_details label[for="content"] {
 892      font-size: 13px;
 893      line-height: 1.5;
 894      margin: 1em 0;
 895  }
 896  
 897  .wp_attachment_details #attachment_caption {
 898      height: 4em;
 899  }
 900  
 901  .describe .image-editor {
 902      vertical-align: top;
 903  }
 904  
 905  .imgedit-wrap {
 906      position: relative;
 907      padding-top: 10px;
 908  }
 909  
 910  .image-editor p,
 911  .image-editor fieldset {
 912      margin: 8px 0;
 913  }
 914  
 915  .image-editor legend {
 916      margin-bottom: 5px;
 917  }
 918  
 919  .describe .imgedit-wrap .image-editor {
 920      padding: 0 5px;
 921  }
 922  
 923  .wp_attachment_holder div.updated {
 924      margin-top: 0;
 925  }
 926  
 927  .wp_attachment_holder .imgedit-wrap > div {
 928      height: auto;
 929  }
 930  
 931  .imgedit-panel-content {
 932      display: flex;
 933      flex-wrap: wrap;
 934      gap: 20px;
 935      margin-bottom: 20px;
 936  }
 937  
 938  .imgedit-settings {
 939      max-width: 240px; /* Prevent reflow when help info is expanded. */
 940  }
 941  
 942  .imgedit-group-controls > * {
 943      display: none;
 944  }
 945  
 946  .imgedit-panel-active .imgedit-group-controls > * {
 947      display: block;
 948  }
 949  
 950  .imgedit-panel-active .imgedit-group-controls > .imgedit-crop-apply {
 951      display: flex;
 952  }
 953  
 954  .imgedit-crop-apply {
 955      gap: 4px;
 956      flex-wrap: wrap;
 957  }
 958  
 959  .wp_attachment_holder .imgedit-wrap .image-editor {
 960      float: left;
 961      width: 250px;
 962  }
 963  
 964  .image-editor input {
 965      margin-top: 0;
 966      vertical-align: middle;
 967  }
 968  
 969  .imgedit-wait {
 970      position: absolute;
 971      top: 0;
 972      bottom: 0;
 973      width: 100%;
 974      background: #fff;
 975      opacity: 0.7;
 976      filter: alpha(opacity=70);
 977      display: none;
 978  }
 979  
 980  .imgedit-wait::before {
 981      content: "";
 982      display: block;
 983      width: 20px;
 984      height: 20px;
 985      position: absolute;
 986      right: 50%;
 987      top: 50%;
 988      margin: -10px -10px 0 0;
 989      background: transparent url(../images/spinner.gif) no-repeat center;
 990      background-size: 20px 20px;
 991      transform: translateZ(0);
 992  }
 993  
 994  .no-float {
 995      float: none;
 996  }
 997  
 998  .media-disabled,
 999  .image-editor .disabled {
1000      /* WCAG 1.4.3 Text or images of text that are part of an inactive user
1001         interface component ... have no contrast requirement. */
1002      color: #a7aaad;
1003  }
1004  
1005  .A1B1 {
1006      overflow: hidden;
1007  }
1008  
1009  .wp_attachment_image .button,
1010  .A1B1 .button {
1011      float: right;
1012  }
1013  
1014  .no-js .wp_attachment_image .button {
1015      display: none;
1016  }
1017  
1018  .wp_attachment_image .spinner,
1019  .A1B1 .spinner {
1020      float: right;
1021  }
1022  
1023  .imgedit-menu .note-no-rotate {
1024      clear: both;
1025      margin: 0;
1026      padding: 1em 0 0;
1027  }
1028  
1029  .imgedit-menu .button::after,
1030  .imgedit-menu .button::before {
1031      font: 400 16px/1 dashicons;
1032      margin-left: 8px;
1033      vertical-align: middle;
1034      position: relative;
1035      top: -2px;
1036      -webkit-font-smoothing: antialiased;
1037      -moz-osx-font-smoothing: grayscale;
1038  }
1039  
1040  .imgedit-menu .imgedit-rotate.button::after {
1041      content: "\f140";
1042      margin-right: 2px;
1043      margin-left: 0;
1044  }
1045  
1046  .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]::after {
1047      content: "\f142";
1048  }
1049  
1050  .imgedit-menu .button.disabled {
1051      color: #a7aaad;
1052      border-color: #dcdcde;
1053      background: #f6f7f7;
1054      box-shadow: none;
1055      text-shadow: 0 1px 0 #fff;
1056      cursor: default;
1057      transform: none;
1058  }
1059  
1060  .imgedit-crop::before {
1061      content: "\f165";
1062      content: "\f165" / "";
1063  }
1064  
1065  .imgedit-scale::before {
1066      content: "\f211";
1067      content: "\f211" / "";
1068  }
1069  
1070  .imgedit-rotate::before {
1071      content: "\f167";
1072      content: "\f167" / "";
1073  }
1074  
1075  .imgedit-undo::before {
1076      content: "\f171";
1077      content: "\f171" / "";
1078  }
1079  
1080  .imgedit-redo::before {
1081      content: "\f172";
1082      content: "\f172" / "";
1083  }
1084  
1085  .imgedit-crop-wrap {
1086      position: relative;
1087      padding: 20px;
1088      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);
1089      background-position: 100% 0, 10px 10px;
1090      background-size: 20px 20px;
1091  }
1092  
1093  .imgedit-crop-wrap img {
1094      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);
1095      background-position: 100% 0, 10px 10px;
1096      background-size: 20px 20px;
1097  }
1098  
1099  .imgedit-crop {
1100      margin: 0 0 0 8px;
1101  }
1102  
1103  .imgedit-rotate {
1104      margin: 0 3px 0 8px;
1105  }
1106  
1107  .imgedit-undo {
1108      margin: 0 3px;
1109  }
1110  
1111  .imgedit-redo {
1112      margin: 0 3px 0 8px;
1113  }
1114  
1115  .imgedit-thumbnail-preview-group {
1116      display: flex;
1117      flex-wrap: wrap;
1118      column-gap: 10px;
1119  }
1120  
1121  .imgedit-thumbnail-preview {
1122      margin: 10px 0 0 8px;
1123  }
1124  
1125  .imgedit-thumbnail-preview-caption {
1126      display: block;
1127  }
1128  
1129  #poststuff .imgedit-group-top h2 {
1130      display: inline-block;
1131      margin: 0;
1132      padding: 0;
1133      font-size: 14px;
1134      line-height: 1.4;
1135  }
1136  
1137  #poststuff .imgedit-group-top .button-link {
1138      text-decoration: none;
1139      color: #1d2327;
1140  }
1141  
1142  .imgedit-applyto .imgedit-label {
1143      display: block;
1144      padding: 0.5em 0 0;
1145  }
1146  
1147  .imgedit-popup-menu,
1148  .imgedit-help {
1149      display: none;
1150      padding-bottom: 8px;
1151  }
1152  
1153  .imgedit-panel-tools > .imgedit-menu {
1154      display: flex;
1155      column-gap: 4px;
1156      align-items: flex-start;
1157      flex-wrap: wrap;
1158  }
1159  
1160  .imgedit-popup-menu {
1161      width: calc(100% - 20px);
1162      position: absolute;
1163      background: #fff;
1164      padding: 10px;
1165      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
1166  }
1167  
1168  .image-editor .imgedit-menu .imgedit-popup-menu button {
1169      display: block;
1170      margin: 2px 0;
1171      width: 100%;
1172      white-space: break-spaces;
1173      line-height: 1.5;
1174      padding-top: 3px;
1175      padding-bottom: 2px;
1176  }
1177  
1178  .imgedit-rotate-menu-container {
1179      position: relative;
1180  }
1181  
1182  .imgedit-help.imgedit-restore {
1183      padding-bottom: 0;
1184  }
1185  
1186  /* higher specificity than buttons */
1187  .image-editor .imgedit-settings .imgedit-help-toggle,
1188  .image-editor .imgedit-settings .imgedit-help-toggle:hover,
1189  .image-editor .imgedit-settings .imgedit-help-toggle:active {
1190      border: 1px solid transparent;
1191      margin: -1px -1px 0 0;
1192      padding: 0;
1193      background: transparent;
1194      color: var(--wp-admin-theme-color);
1195      font-size: 20px;
1196      line-height: 1;
1197      cursor: pointer;
1198      box-sizing: content-box;
1199      box-shadow: none;
1200  }
1201  
1202  .image-editor .imgedit-settings .imgedit-help-toggle:focus {
1203      color: var(--wp-admin-theme-color);
1204      border-color: var(--wp-admin-theme-color);
1205      box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
1206      /* Only visible in Windows High Contrast mode */
1207      outline: 2px solid transparent;
1208  }
1209  
1210  .form-table td.imgedit-response {
1211      padding: 0;
1212  }
1213  
1214  .imgedit-submit-btn {
1215      margin-right: 20px;
1216  }
1217  
1218  .imgedit-wrap .nowrap {
1219      white-space: nowrap;
1220      font-size: 12px;
1221      line-height: inherit;
1222  }
1223  
1224  span.imgedit-scale-warn {
1225      display: flex;
1226      align-items: center;
1227      margin: 4px;
1228      gap: 4px;
1229      color: #b32d2e;
1230      font-style: normal;
1231      visibility: hidden;
1232      vertical-align: middle;
1233  }
1234  
1235  .imgedit-save-target {
1236      margin: 8px 0;
1237  }
1238  
1239  .imgedit-save-target legend {
1240      font-weight: 600;
1241  }
1242  
1243  .imgedit-group {
1244      margin-bottom: 20px;
1245  }
1246  
1247  .image-editor .imgedit-original-dimensions {
1248      display: inline-block;
1249  }
1250  
1251  .image-editor .imgedit-scale-controls input[type="text"],
1252  .image-editor .imgedit-crop-ratio input[type="text"],
1253  .image-editor .imgedit-crop-sel input[type="text"],
1254  .image-editor .imgedit-scale-controls input[type="number"],
1255  .image-editor .imgedit-crop-ratio input[type="number"],
1256  .image-editor .imgedit-crop-sel input[type="number"] {
1257      width: 80px;
1258      font-size: 14px;
1259      padding: 0 8px;
1260  }
1261  
1262  .imgedit-separator {
1263      display: inline-block;
1264      width: 7px;
1265      text-align: center;
1266      font-size: 13px;
1267      color: #3c434a;
1268  }
1269  
1270  .image-editor .imgedit-scale-button-wrapper {
1271      margin-top: 0.3077em;
1272      display: block;
1273  }
1274  
1275  .image-editor .imgedit-scale-controls .button {
1276      margin-bottom: 0;
1277  }
1278  
1279  audio,
1280  video {
1281      display: inline-block;
1282      max-width: 100%;
1283  }
1284  
1285  .wp-core-ui .mejs-container {
1286      width: 100%;
1287      max-width: 100%;
1288  }
1289  
1290  .wp-core-ui .mejs-container * {
1291      box-sizing: border-box;
1292  }
1293  
1294  .wp-core-ui .mejs-time {
1295      box-sizing: content-box;
1296  }
1297  
1298  /* =Media Queries
1299  -------------------------------------------------------------- */
1300  
1301  /**
1302   * HiDPI Displays
1303   */
1304  @media print,
1305      (min-resolution: 120dpi) {
1306      .imgedit-wait::before {
1307          background-image: url(../images/spinner-2x.gif);
1308      }
1309  }
1310  
1311  @media screen and (max-width: 782px) {
1312      .edit-attachment-frame input,
1313      .edit-attachment-frame textarea {
1314          line-height: 1.5;
1315      }
1316  
1317      .wp_attachment_details label[for="content"] {
1318          font-size: 14px;
1319          line-height: 1.5;
1320      }
1321  
1322      .wp_attachment_details textarea {
1323          line-height: 1.5;
1324      }
1325  
1326      .wp_attachment_details #attachment_alt {
1327          height: 3.375em;
1328      }
1329  
1330      .media-upload-form .media-item.error,
1331      .media-upload-form .media-item .error {
1332          font-size: 13px;
1333          line-height: 1.5;
1334      }
1335  
1336      .media-upload-form .media-item.error {
1337          padding: 1px 10px;
1338      }
1339  
1340      .media-upload-form .media-item .error {
1341          padding: 10px 12px 10px 0;
1342      }
1343  
1344      .image-editor .imgedit-scale input[type="text"],
1345      .image-editor .imgedit-crop-ratio input[type="text"],
1346      .image-editor .imgedit-crop-sel input[type="text"] {
1347          font-size: 16px;
1348          padding: 6px 10px;
1349      }
1350  
1351      .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
1352      .wp_attachment_holder .imgedit-wrap .image-editor {
1353          float: none;
1354          width: auto;
1355          max-width: none;
1356          padding-bottom: 16px;
1357      }
1358  
1359      .copy-to-clipboard-container .success {
1360          font-size: 14px;
1361      }
1362  
1363      /* Restructure image editor on narrow viewports. */
1364      .imgedit-crop-wrap img {
1365          width: 100%;
1366      }
1367  
1368      .media-modal .imgedit-wrap .imgedit-panel-content,
1369      .media-modal .imgedit-wrap .image-editor {
1370          position: initial !important;
1371      }
1372  
1373      .media-modal .imgedit-wrap .image-editor {
1374          box-sizing: border-box;
1375          width: 100% !important;
1376      }
1377  
1378      .image-editor .imgedit-scale-button-wrapper {
1379          display: inline-block;
1380      }
1381  }
1382  
1383  @media only screen and (max-width: 600px) {
1384      .media-item-wrapper {
1385          grid-template-columns: 1fr;
1386      }
1387  }
1388  
1389  /**
1390   * Media queries for media grid.
1391   */
1392  @media only screen and (max-width: 1120px) {
1393      /* override for media-views.css */
1394      #wp-media-grid .wp-filter .attachment-filters {
1395          max-width: 100%;
1396      }
1397  }
1398  
1399  @media only screen and (max-width: 1000px) {
1400      /* override for forms.css */
1401      .wp-filter p.search-box {
1402          float: none;
1403          width: 100%;
1404          display: flex;
1405          flex-wrap: nowrap;
1406          column-gap: 0;
1407      }
1408  
1409      .wp-filter p.search-box #media-search-input {
1410          width: 100%;
1411      }
1412  
1413  }
1414  
1415  @media only screen and (max-width: 782px) {
1416      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1417          top: 46px;
1418          left: 10px;
1419      }
1420  
1421      .media-frame.mode-grid .media-toolbar select {
1422          min-height: 40px;
1423          padding: 0 12px 0 24px;
1424      }
1425  
1426      .media-frame.mode-grid .media-toolbar input[type="search"] {
1427          min-height: 40px;
1428          padding: 0 12px;
1429      }
1430  
1431      .wp-filter p.search-box {
1432          margin-bottom: 0;
1433      }
1434  }
1435  
1436  @media only screen and (max-width: 600px) {
1437      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1438          top: 0;
1439      }
1440  }
1441  
1442  @media only screen and (max-width: 480px) {
1443      .edit-attachment-frame .media-frame-title {
1444          left: 110px;
1445      }
1446  
1447      .upload-php .media-modal-close,
1448      .edit-attachment-frame .edit-media-header .left,
1449      .edit-attachment-frame .edit-media-header .right {
1450          width: 40px;
1451          height: 40px;
1452      }
1453  
1454      .edit-attachment-frame .edit-media-header .right::before,
1455      .edit-attachment-frame .edit-media-header .left::before {
1456          /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Used for dashicons. */
1457          line-height: 40px !important;
1458      }
1459  
1460      .edit-attachment-frame .edit-media-header .left {
1461          left: 82px;
1462      }
1463  
1464      .edit-attachment-frame .edit-media-header .right {
1465          left: 41px;
1466      }
1467  
1468      .edit-attachment-frame .media-frame-content {
1469          top: 40px;
1470      }
1471  
1472      .edit-attachment-frame .attachment-media-view {
1473          float: none;
1474          height: auto;
1475          width: 100%;
1476      }
1477  
1478      .edit-attachment-frame .attachment-info {
1479          height: auto;
1480          width: 100%;
1481      }
1482  }
1483  
1484  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1485      .upload-php .mode-grid .media-sidebar {
1486          max-width: 100%;
1487      }
1488  }
1489  
1490  @media only screen and (max-width: 375px) {
1491      .media-item .attachment-tools {
1492          align-items: baseline;
1493      }
1494  
1495      .media-item .edit-attachment.copy-to-clipboard-container {
1496          flex-direction: column;
1497      }
1498  
1499      .copy-to-clipboard-container .success {
1500          line-height: normal;
1501          margin-top: 10px;
1502      }
1503  }