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