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