WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
09/29/2026 08:12:17 AM (3 weeks ago)
Author:
afercia
Message:

Administration: Fix the CSS Coding Standards in media.css.

Lints the src/wp-admin/css/media.css file.
Part of the ongoing effort to lint all the admin CSS files.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13144

See #65898.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/media.css

    r63559 r63987  
    1 /*------------------------------------------------------------------------------
    2   14.0 - Media Screen
    3 ------------------------------------------------------------------------------*/
    4 
     1/**
     2 * Media Screen
     3 */
    54.media-item .describe {
    65        border-collapse: collapse;
    … …  
    190189        margin: 0 6px 7px;
    191190        width: 200px;
    192         line-height: 2em;
     191        line-height: 2;
    193192        padding: 0;
    194193        overflow: hidden;
    … …  
    215214        color: #fff;
    216215        text-align: center;
    217         line-height: 22px;
     216        line-height: 1.6923;
    218217        font-weight: 400;
    219218        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    … …  
    252251}
    253252
    254 /*------------------------------------------------------------------------------
    255   14.1 - Media Library
    256 ------------------------------------------------------------------------------*/
    257 
     253/**
     254 * Media Library
     255 */
    258256.find-box {
    259257        background-color: #fff;
    … …  
    352350}
    353351
    354 #find-posts-close:before {
    355         font: normal 20px/36px dashicons;
     352#find-posts-close::before {
     353        font: 400 20px/36px dashicons;
    356354        vertical-align: top;
    357355        -webkit-font-smoothing: antialiased;
    358356        -moz-osx-font-smoothing: grayscale;
    359357        content: "\f158";
    360         content: "\f158" / '';
     358        content: "\f158" / "";
    361359}
    362360
    … …  
    382380
    383381@media screen and (max-width: 660px) {
    384 
    385382        .find-box {
    386383                top: 0;
    … …  
    666663}
    667664
    668 .upload-php .media-modal-close .media-modal-icon:before {
     665.upload-php .media-modal-close .media-modal-icon::before {
    669666        content: "\f335";
    670         content: "\f335" / '';
     667        content: "\f335" / "";
    671668        font-size: 22px;
    672669}
    … …  
    685682        border: 0;
    686683        border-left: 1px solid #dcdcde;
    687         transition: color .1s ease-in-out, background .1s ease-in-out;
     684        transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
    688685}
    689686
    … …  
    706703}
    707704
    708 .edit-attachment-frame .edit-media-header .right:before,
    709 .edit-attachment-frame .edit-media-header .left:before {
    710         font: normal 20px/50px dashicons !important;
     705.edit-attachment-frame .edit-media-header .right::before,
     706.edit-attachment-frame .edit-media-header .left::before {
     707        font: 400 20px/50px dashicons !important;
    711708        display: inline;
    712709        font-weight: 300;
    … …  
    734731}
    735732
    736 .upload-php .media-modal-close:focus .media-modal-icon:before,
    737 .upload-php .media-modal-close:hover .media-modal-icon:before {
     733.upload-php .media-modal-close:focus .media-modal-icon::before,
     734.upload-php .media-modal-close:hover .media-modal-icon::before {
    738735        color: #000;
    739736}
    740737
    741 .edit-attachment-frame .edit-media-header .left:before {
     738.edit-attachment-frame .edit-media-header .left::before {
    742739        content: "\f341";
    743         content: "\f341" / '';
    744 }
    745 
    746 .edit-attachment-frame .edit-media-header .right:before {
     740        content: "\f341" / "";
     741}
     742
     743.edit-attachment-frame .edit-media-header .right::before {
    747744        content: "\f345";
    748         content: "\f345" / '';
     745        content: "\f345" / "";
    749746}
    750747
    … …  
    794791        max-width: 100%;
    795792        max-height: 90%;
    796         max-height: calc( 100% - 56px ); /* leave space for actions underneath */
     793        max-height: calc(100% - 56px); /* leave space for actions underneath */
    797794        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);
    798795        background-position: 0 0, 10px 10px;
    … …  
    875872}
    876873
    877 /*------------------------------------------------------------------------------
    878   14.2 - Image Editor
    879 ------------------------------------------------------------------------------*/
     874/**
     875 * Image Editor
     876 */
    880877.wp_attachment_details .attachment-alt-text {
    881878        margin-bottom: 5px;
    … …  
    980977}
    981978
    982 .imgedit-wait:before {
     979.imgedit-wait::before {
    983980        content: "";
    984981        display: block;
    … …  
    10291026}
    10301027
    1031 .imgedit-menu .button:after,
    1032 .imgedit-menu .button:before {
    1033         font: normal 16px/1 dashicons;
     1028.imgedit-menu .button::after,
     1029.imgedit-menu .button::before {
     1030        font: 400 16px/1 dashicons;
    10341031        margin-right: 8px;
    10351032        vertical-align: middle;
    … …  
    10401037}
    10411038
    1042 .imgedit-menu .imgedit-rotate.button:after {
    1043         content: '\f140';
     1039.imgedit-menu .imgedit-rotate.button::after {
     1040        content: "\f140";
    10441041        margin-left: 2px;
    10451042        margin-right: 0;
    10461043}
    10471044
    1048 .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
    1049         content: '\f142';
     1045.imgedit-menu .imgedit-rotate.button[aria-expanded="true"]::after {
     1046        content: "\f142";
    10501047}
    10511048
    … …  
    10601057}
    10611058
    1062 .imgedit-crop:before {
     1059.imgedit-crop::before {
    10631060        content: "\f165";
    1064         content: "\f165" / '';
    1065 }
    1066 
    1067 .imgedit-scale:before {
     1061        content: "\f165" / "";
     1062}
     1063
     1064.imgedit-scale::before {
    10681065        content: "\f211";
    1069         content: "\f211" / '';
    1070 }
    1071 
    1072 .imgedit-rotate:before {
     1066        content: "\f211" / "";
     1067}
     1068
     1069.imgedit-rotate::before {
    10731070        content: "\f167";
    1074         content: "\f167" / '';
    1075 }
    1076 
    1077 .imgedit-undo:before {
     1071        content: "\f167" / "";
     1072}
     1073
     1074.imgedit-undo::before {
    10781075        content: "\f171";
    1079         content: "\f171" / '';
    1080 }
    1081 
    1082 .imgedit-redo:before {
     1076        content: "\f171" / "";
     1077}
     1078
     1079.imgedit-redo::before {
    10831080        content: "\f172";
    1084         content: "\f172" / '';
     1081        content: "\f172" / "";
    10851082}
    10861083
    10871084.imgedit-crop-wrap {
    10881085        position: relative;
     1086        padding: 20px;
     1087        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);
     1088        background-position: 0 0, 10px 10px;
     1089        background-size: 20px 20px;
    10891090}
    10901091
    … …  
    10941095        background-size: 20px 20px;
    10951096}
    1096 
    1097 .imgedit-crop-wrap {
    1098         padding: 20px;
    1099         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);
    1100         background-position: 0 0, 10px 10px;
    1101         background-size: 20px 20px;
    1102 }
    1103 
    11041097
    11051098.imgedit-crop {
    … …  
    11481141.imgedit-applyto .imgedit-label {
    11491142        display: block;
    1150         padding: .5em 0 0;
     1143        padding: 0.5em 0 0;
    11511144}
    11521145
    … …  
    11651158
    11661159.imgedit-popup-menu {
    1167         width: calc( 100% - 20px );
     1160        width: calc(100% - 20px);
    11681161        position: absolute;
    11691162        background: #fff;
    … …  
    12831276}
    12841277
    1285 audio, video {
     1278audio,
     1279video {
    12861280        display: inline-block;
    12871281        max-width: 100%;
    … …  
    13081302 */
    13091303@media print,
    1310   (min-resolution: 120dpi) {
    1311         .imgedit-wait:before {
     1304        (min-resolution: 120dpi) {
     1305        .imgedit-wait::before {
    13121306                background-image: url(../images/spinner-2x.gif);
    13131307        }
    … …  
    13671361
    13681362        /* Restructure image editor on narrow viewports. */
    1369         .imgedit-crop-wrap img{
     1363        .imgedit-crop-wrap img {
    13701364                width: 100%;
    13711365        }
    … …  
    14571451        }
    14581452
    1459         .edit-attachment-frame .edit-media-header .right:before,
    1460         .edit-attachment-frame .edit-media-header .left:before {
     1453        .edit-attachment-frame .edit-media-header .right::before,
     1454        .edit-attachment-frame .edit-media-header .left::before {
     1455                /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Used for dashicons. */
    14611456                line-height: 40px !important;
    14621457        }
    … …  
    14871482
    14881483@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    1489         .upload-php .mode-grid .media-sidebar{
     1484        .upload-php .mode-grid .media-sidebar {
    14901485                max-width: 100%;
    14911486        }
    … …  
    14961491                align-items: baseline;
    14971492        }
     1493
    14981494        .media-item .edit-attachment.copy-to-clipboard-container {
    14991495                flex-direction: column;
Note: See TracChangeset for help on using the changeset viewer.