[Summary view] [Print] [Text view]

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