[Summary view] [Print] [Text view]

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