--- a/wp/wp-includes/css/media-views.css Thu Sep 29 08:06:27 2022 +0200
+++ b/wp/wp-includes/css/media-views.css Fri Sep 05 18:40:08 2025 +0200
@@ -45,12 +45,10 @@
}
.media-frame a:focus {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: 0 0 0 2px #2271b1;
color: #043959;
/* Only visible in Windows High Contrast mode */
- outline: 1px solid transparent;
+ outline: 2px solid transparent;
}
.media-frame a.button {
@@ -100,6 +98,7 @@
color: #2c3338;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
+ line-height: 1.38461538;
}
.media-frame input[type="text"],
@@ -280,10 +279,6 @@
width: calc(48% - 12px);
}
-.media-modal-content .attachments-browser .search {
- width: 100%;
-}
-
/* higher specificity */
.wp-core-ui .media-modal-icon {
background-image: url(../images/uploader-icons.png);
@@ -370,7 +365,7 @@
}
.media-sidebar h2,
-.image-details h2:not(.media-attachments-filter-heading) {
+.image-details .media-embed h2 {
position: relative;
font-weight: 600;
text-transform: uppercase;
@@ -387,6 +382,11 @@
margin: 0 0 10px;
}
+.attachment-details h2 {
+ display: grid;
+ grid-template-columns: auto 5em;
+}
+
.media-sidebar .collection-settings .setting {
margin: 1px 0;
}
@@ -476,7 +476,7 @@
min-height: 0;
line-height: 2.18181818;
text-align: left;
- color: #008a20;
+ color: #007017;
}
.compat-item label span {
@@ -529,6 +529,13 @@
resize: vertical;
}
+.media-sidebar .alt-text textarea,
+.attachment-details .alt-text textarea,
+.compat-item .alt-text textarea,
+.alt-text textarea {
+ height: 50px;
+}
+
.compat-item {
float: left;
width: 100%;
@@ -645,12 +652,10 @@
}
.media-menu .media-menu-item:focus {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: 0 0 0 2px #2271b1;
color: #043959;
/* Only visible in Windows High Contrast mode */
- outline: 1px solid transparent;
+ outline: 2px solid transparent;
}
.media-menu .separator {
@@ -700,12 +705,10 @@
}
.media-router .media-menu-item:focus {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: 0 0 0 2px #2271b1;
color: #043959;
/* Only visible in Windows High Contrast mode */
- outline: 1px solid transparent;
+ outline: 2px solid transparent;
}
.media-router .active,
@@ -851,6 +854,7 @@
height: 100%;
}
+.options-general-php .crop-content.site-icon,
.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
margin-right: 300px;
}
@@ -898,8 +902,6 @@
.media-frame select.attachment-filters:last-of-type {
margin-right: 0;
- width: auto;
- max-width: 100%;
}
/**
@@ -918,7 +920,7 @@
max-width: 100%;
}
-.media-frame .media-search-input-label {
+.media-modal .media-frame .media-search-input-label {
position: absolute;
left: 0;
top: 10px;
@@ -1211,6 +1213,8 @@
.mode-grid .attachments-browser .media-toolbar-primary {
display: flex;
align-items: center;
+ column-gap: .5rem;
+ margin: 11px 0;
}
.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
@@ -1317,47 +1321,6 @@
outline: 2px dotted #c3c4c7;
}
-.load-more-wrapper {
- clear: both;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- padding: 1em 0;
-}
-
-.load-more-wrapper .load-more-count {
- min-width: 100%;
- margin: 0 0 1em;
- text-align: center;
-}
-
-.load-more-wrapper .load-more {
- margin: 0;
-}
-
-/* Needs high specificity. */
-.media-frame .load-more-wrapper .load-more + .spinner {
- float: none;
- margin: 0 -30px 0 10px;
-}
-
-/* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */
-.media-frame .load-more-wrapper .load-more.hidden + .spinner {
- margin: 0;
-}
-
-/* Force a new row within the flex container. */
-.load-more-wrapper::after {
- content: "";
- min-width: 100%;
- order: 1;
-}
-
-.load-more-wrapper .load-more-jump {
- margin: 0 0 0 12px;
-}
-
/**
* Progress Bar
*/
@@ -1765,6 +1728,12 @@
vertical-align: middle;
}
+.media-frame .media-sidebar .settings-save-status .spinner {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
.media-frame.mode-grid .spinner {
margin: 0;
float: none;
@@ -1794,7 +1763,7 @@
}
.attachment-details .settings-save-status {
- float: right;
+ text-align: right;
text-transform: none;
font-weight: 400;
}
@@ -1951,32 +1920,7 @@
.media-modal .imgedit-wrap .imgedit-panel-content {
padding: 16px 16px 0;
- position: absolute;
- top: 0;
- right: 282px;
- bottom: 0;
- left: 0;
- overflow: auto;
-}
-
-/*
- * Implementation of bottom padding in overflow content differs across browsers.
- * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
- */
-.media-modal .imgedit-wrap .imgedit-submit {
- margin-bottom: 16px;
-}
-
-.media-modal .imgedit-wrap .imgedit-settings {
- background: #f6f7f7;
- border-left: 1px solid #dcdcde;
- padding: 20px 16px 0;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- width: 250px;
- overflow: auto;
+ overflow: visible;
}
/*
@@ -1990,19 +1934,15 @@
.media-modal .imgedit-group {
background: none;
border: none;
- border-bottom: 1px solid #dcdcde;
box-shadow: none;
margin: 0;
- margin-bottom: 16px;
padding: 0;
- padding-bottom: 16px;
position: relative; /* RTL fix, #WP29352 */
}
-.media-modal .imgedit-group:last-of-type {
- border: none;
- margin: 0;
- padding: 0;
+.media-modal .imgedit-group.imgedit-panel-active {
+ margin-bottom: 16px;
+ padding-bottom: 16px;
}
.media-modal .imgedit-group-top {
@@ -2043,8 +1983,8 @@
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
color: #2271b1;
- border-color: #4f94d4;
- box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+ border-color: #2271b1;
+ box-shadow: 0 0 0 1px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@@ -2071,8 +2011,7 @@
.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
.media-modal .imgedit-wrap .notice {
- margin: 0;
- margin-bottom: 16px;
+ margin: 0 16px;
}
/**
@@ -2161,8 +2100,8 @@
}
.mejs-container:focus {
- outline: 1px solid #4f94d4;
- box-shadow: 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ outline: 1px solid #2271b1;
+ box-shadow: 0 0 0 2px #2271b1;
}
.image-details .media-modal {
@@ -2549,7 +2488,6 @@
/* Visually hide the menu heading keeping it available to assistive technologies. */
.media-frame-menu-heading {
clip: rect(1px, 1px, 1px, 1px);
- -webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
@@ -2593,6 +2531,10 @@
width: 230px;
}
+ .options-general-php .crop-content.site-icon {
+ margin-right: 262px;
+ }
+
.attachments-browser .attachments,
.attachments-browser .uploader-inline,
.attachments-browser .media-toolbar,
@@ -2601,6 +2543,16 @@
right: 262px;
}
+ .attachments-browser .media-toolbar {
+ height: 82px;
+ }
+
+ .attachments-browser .attachments,
+ .attachments-browser .uploader-inline,
+ .media-frame-content .attachments-browser .attachments-wrapper {
+ top: 82px;
+ }
+
.media-sidebar .setting,
.attachment-details .setting {
margin: 6px 0;
@@ -2798,6 +2750,7 @@
.media-frame textarea,
.media-frame select {
font-size: 16px;
+ line-height: 1.5;
}
.media-frame .media-toolbar input[type="search"] {
@@ -2810,13 +2763,8 @@
}
@media screen and (max-width: 782px) {
- .attachments-browser .media-toolbar {
- height: 82px;
- }
-
- .attachments-browser .attachments,
- .attachments-browser .uploader-inline {
- top: 82px;
+ .imgedit-panel-content {
+ grid-template-columns: auto;
}
.media-frame-toolbar .media-toolbar {
@@ -2824,7 +2772,12 @@
}
.mode-grid .attachments-browser .media-toolbar-primary {
- display: block;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ }
+
+ .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
+ width: 100%;
}
.media-sidebar .copy-to-clipboard-container .success,
@@ -2832,6 +2785,34 @@
font-size: 14px;
line-height: 2.71428571;
}
+
+ .media-frame .wp-filter .media-toolbar-secondary {
+ position: unset;
+ }
+
+ .media-frame .media-toolbar-secondary .spinner {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ left: 0;
+ right: 0;
+ z-index: 9;
+ }
+
+ .media-bg-overlay {
+ content: '';
+ background: #ffffff;
+ width: 100%;
+ height: 100%;
+ display: none;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ opacity: 0.6;
+ }
}
/* Responsive on portrait and landscape */
@@ -2850,6 +2831,10 @@
position: fixed;
}
+ .options-general-php .crop-content.site-icon {
+ margin-right: 0;
+ }
+
.media-sidebar {
z-index: 1900;
max-width: 70%;
@@ -2869,10 +2854,6 @@
right: 0;
}
- .attachments-browser .attachments-wrapper {
- padding-top: 12px;
- }
-
.image-details .media-frame-title {
display: block;
top: 0;
@@ -2926,7 +2907,6 @@
* HiDPI Displays
*/
@media print,
- (-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.wp-core-ui .media-modal-icon {