← All changes
|
media-optimization/assets/css/media-optimization.css
+188
-11
2.6.5
→
2.7.2
View file →
| @@ -161,8 +161,9 @@ | ||
| 161 | 161 | display: grid; |
| 162 | 162 | grid-template-columns: 1fr 1fr; |
| 163 | 163 | gap: 24px; |
| 164 | 164 | margin-bottom: 20px; |
| 165 | + align-items: stretch; | |
| 165 | 166 | } |
| 166 | 167 | |
| 167 | 168 | .metasync-field-row:last-child { |
| 168 | 169 | margin-bottom: 0; |
| @@ -167,8 +168,26 @@ | ||
| 167 | 168 | .metasync-field-row:last-child { |
| 168 | 169 | margin-bottom: 0; |
| 169 | 170 | } |
| 170 | 171 | |
| 172 | +.metasync-field-row > .metasync-field { | |
| 173 | + display: flex; | |
| 174 | + flex-direction: column; | |
| 175 | +} | |
| 176 | + | |
| 177 | +.metasync-field--card { | |
| 178 | + padding: 12px 16px; | |
| 179 | + background: rgba(0, 0, 0, 0.2); | |
| 180 | + border: 1px solid var(--dashboard-border, #374151); | |
| 181 | + border-radius: 8px; | |
| 182 | + transition: background 0.3s ease, border-color 0.3s ease; | |
| 183 | +} | |
| 184 | + | |
| 185 | +.metasync-field--card:hover { | |
| 186 | + background: rgba(102, 126, 234, 0.05); | |
| 187 | + border-color: rgba(102, 126, 234, 0.3); | |
| 188 | +} | |
| 189 | + | |
| 171 | 190 | @media (max-width: 768px) { |
| 172 | 191 | .metasync-field-row { |
| 173 | 192 | grid-template-columns: 1fr; |
| 174 | 193 | } |
| @@ -184,9 +203,10 @@ | ||
| 184 | 203 | |
| 185 | 204 | .metasync-field select, |
| 186 | 205 | .metasync-field .metasync-text-input { |
| 187 | 206 | width: 100%; |
| 188 | - padding: 10px 14px; | |
| 207 | + padding: 8px 14px; | |
| 208 | + line-height: 1.2; | |
| 189 | 209 | background: rgba(0, 0, 0, 0.3); |
| 190 | 210 | border: 1px solid var(--dashboard-border, #374151); |
| 191 | 211 | border-radius: 8px; |
| 192 | 212 | color: var(--dashboard-text-primary, #ffffff); |
| @@ -194,9 +214,49 @@ | ||
| 194 | 214 | transition: all 0.3s ease; |
| 195 | 215 | box-sizing: border-box; |
| 196 | 216 | } |
| 197 | 217 | |
| 198 | -.metasync-field select:focus, | |
| 218 | +/* ── Select wrapper: provides the custom dropdown chevron via ::after ── */ | |
| 219 | +.metasync-select-wrap { | |
| 220 | + position: relative; | |
| 221 | + display: block; | |
| 222 | +} | |
| 223 | + | |
| 224 | +.metasync-select-wrap::after { | |
| 225 | + content: ''; | |
| 226 | + position: absolute; | |
| 227 | + right: 14px; | |
| 228 | + top: 50%; | |
| 229 | + transform: translateY(-50%); | |
| 230 | + width: 0; | |
| 231 | + height: 0; | |
| 232 | + border-left: 5px solid transparent; | |
| 233 | + border-right: 5px solid transparent; | |
| 234 | + border-top: 5px solid var(--dashboard-text-secondary, #9ca3af); | |
| 235 | + pointer-events: none; | |
| 236 | + transition: border-top-color 0.2s ease; | |
| 237 | +} | |
| 238 | + | |
| 239 | +.metasync-select-wrap:hover::after, | |
| 240 | +.metasync-select-wrap:focus-within::after { | |
| 241 | + border-top-color: var(--dashboard-text-primary, #ffffff); | |
| 242 | +} | |
| 243 | + | |
| 244 | +.metasync-field .metasync-select-wrap select { | |
| 245 | + appearance: none; | |
| 246 | + -webkit-appearance: none; | |
| 247 | + -moz-appearance: none; | |
| 248 | + padding-right: 36px; | |
| 249 | + cursor: pointer; | |
| 250 | +} | |
| 251 | + | |
| 252 | +.metasync-field select:focus { | |
| 253 | + border-color: var(--dashboard-accent, #3b82f6); | |
| 254 | + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| 255 | + outline: none; | |
| 256 | + background-color: rgba(0, 0, 0, 0.4); | |
| 257 | +} | |
| 258 | + | |
| 199 | 259 | .metasync-field .metasync-text-input:focus { |
| 200 | 260 | border-color: var(--dashboard-accent, #3b82f6); |
| 201 | 261 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| 202 | 262 | outline: none; |
| @@ -307,9 +367,10 @@ | ||
| 307 | 367 | } |
| 308 | 368 | |
| 309 | 369 | .metasync-number-group input[type="number"] { |
| 310 | 370 | width: 80px; |
| 311 | - padding: 10px 14px; | |
| 371 | + padding: 8px 14px; | |
| 372 | + line-height: 1.2; | |
| 312 | 373 | background: rgba(0, 0, 0, 0.3); |
| 313 | 374 | border: 1px solid var(--dashboard-border, #374151); |
| 314 | 375 | border-radius: 8px; |
| 315 | 376 | color: var(--dashboard-text-primary, #ffffff); |
| @@ -334,13 +395,13 @@ | ||
| 334 | 395 | display: flex !important; |
| 335 | 396 | align-items: center; |
| 336 | 397 | gap: 10px; |
| 337 | 398 | cursor: pointer; |
| 338 | - padding: 12px 16px; | |
| 399 | + padding: 8px 14px; | |
| 339 | 400 | background: rgba(0, 0, 0, 0.2); |
| 340 | 401 | border: 1px solid var(--dashboard-border, #374151); |
| 341 | 402 | border-radius: 8px; |
| 342 | - transition: all 0.3s ease; | |
| 403 | + transition: background 0.3s ease, border-color 0.3s ease; | |
| 343 | 404 | } |
| 344 | 405 | |
| 345 | 406 | .metasync-checkbox-label:hover { |
| 346 | 407 | background: rgba(102, 126, 234, 0.05); |
| @@ -608,9 +669,11 @@ | ||
| 608 | 669 | margin: 0; |
| 609 | 670 | } |
| 610 | 671 | |
| 611 | 672 | .metasync-media-optimization-page .metasync-tab-nav a { |
| 612 | - display: block; | |
| 673 | + display: flex; | |
| 674 | + align-items: center; | |
| 675 | + gap: 4px; | |
| 613 | 676 | padding: 12px 20px; |
| 614 | 677 | text-decoration: none; |
| 615 | 678 | color: var(--dashboard-text-secondary); |
| 616 | 679 | border-bottom: none; |
| @@ -622,8 +685,16 @@ | ||
| 622 | 685 | position: relative; |
| 623 | 686 | overflow: hidden; |
| 624 | 687 | } |
| 625 | 688 | |
| 689 | +.metasync-media-optimization-page .metasync-tab-nav a .dashicons { | |
| 690 | + font-size: 16px; | |
| 691 | + width: 16px; | |
| 692 | + height: 16px; | |
| 693 | + line-height: 1; | |
| 694 | + flex-shrink: 0; | |
| 695 | +} | |
| 696 | + | |
| 626 | 697 | .metasync-media-optimization-page .metasync-tab-nav a:hover { |
| 627 | 698 | color: var(--dashboard-text-primary); |
| 628 | 699 | background: rgba(255, 255, 255, 0.05); |
| 629 | 700 | } |
| @@ -675,8 +746,12 @@ | ||
| 675 | 746 | flex-direction: column; |
| 676 | 747 | gap: 4px; |
| 677 | 748 | } |
| 678 | 749 | |
| 750 | +.metasync-stat-rate { | |
| 751 | + margin-left: auto; | |
| 752 | +} | |
| 753 | + | |
| 679 | 754 | .metasync-stat-number { |
| 680 | 755 | font-size: 28px; |
| 681 | 756 | font-weight: 700; |
| 682 | 757 | color: var(--dashboard-text-primary); |
| @@ -703,10 +778,15 @@ | ||
| 703 | 778 | align-items: center; |
| 704 | 779 | gap: 10px; |
| 705 | 780 | } |
| 706 | 781 | |
| 782 | +.metasync-stat-rate .metasync-stat-progress-wrap { | |
| 783 | + min-height: 28px; | |
| 784 | + align-items: center; | |
| 785 | +} | |
| 786 | + | |
| 707 | 787 | .metasync-stat-progress-bar { |
| 708 | - width: 120px; | |
| 788 | + width: 200px; | |
| 709 | 789 | height: 8px; |
| 710 | 790 | background: var(--dashboard-border); |
| 711 | 791 | border-radius: 4px; |
| 712 | 792 | overflow: hidden; |
| @@ -850,8 +930,29 @@ | ||
| 850 | 930 | .metasync-toolbar-right .search-box label { |
| 851 | 931 | display: none; |
| 852 | 932 | } |
| 853 | 933 | |
| 934 | +.metasync-toolbar-right .search-box .metasync-search-input-wrap { | |
| 935 | + position: relative; | |
| 936 | + display: inline-flex; | |
| 937 | + align-items: center; | |
| 938 | +} | |
| 939 | + | |
| 940 | +.metasync-toolbar-right .search-box .metasync-search-input-wrap::before { | |
| 941 | + content: ''; | |
| 942 | + position: absolute; | |
| 943 | + left: 10px; | |
| 944 | + top: 50%; | |
| 945 | + transform: translateY(-50%); | |
| 946 | + width: 15px; | |
| 947 | + height: 15px; | |
| 948 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); | |
| 949 | + background-repeat: no-repeat; | |
| 950 | + background-size: contain; | |
| 951 | + pointer-events: none; | |
| 952 | + z-index: 1; | |
| 953 | +} | |
| 954 | + | |
| 854 | 955 | .metasync-toolbar-right .search-box input[type="search"], |
| 855 | 956 | .metasync-toolbar-right .search-box input[type="text"] { |
| 856 | 957 | background: var(--dashboard-card-bg); |
| 857 | 958 | color: var(--dashboard-text-primary); |
| @@ -856,16 +957,48 @@ | ||
| 856 | 957 | background: var(--dashboard-card-bg); |
| 857 | 958 | color: var(--dashboard-text-primary); |
| 858 | 959 | border: 1px solid var(--dashboard-border); |
| 859 | 960 | border-radius: 6px; |
| 860 | - padding: 6px 12px; | |
| 961 | + padding: 6px 30px 6px 34px; | |
| 861 | 962 | height: 32px; |
| 862 | 963 | line-height: 32px; |
| 863 | 964 | font-size: 13px; |
| 864 | - min-width: 200px; | |
| 965 | + min-width: 260px; | |
| 865 | 966 | box-sizing: border-box; |
| 866 | 967 | } |
| 867 | 968 | |
| 969 | +.metasync-toolbar-right .search-box input[type="search"]::-webkit-search-cancel-button { | |
| 970 | + -webkit-appearance: none; | |
| 971 | + display: none; | |
| 972 | +} | |
| 973 | + | |
| 974 | +.metasync-toolbar-right .search-box .metasync-clear-search { | |
| 975 | + position: absolute; | |
| 976 | + right: 10px; | |
| 977 | + top: 50%; | |
| 978 | + transform: translateY(-50%); | |
| 979 | + background: none; | |
| 980 | + border: none; | |
| 981 | + padding: 0; | |
| 982 | + cursor: pointer; | |
| 983 | + color: var(--dashboard-text-secondary); | |
| 984 | + font-size: 16px; | |
| 985 | + line-height: 1; | |
| 986 | + display: none; | |
| 987 | + align-items: center; | |
| 988 | + justify-content: center; | |
| 989 | + width: 16px; | |
| 990 | + height: 16px; | |
| 991 | +} | |
| 992 | + | |
| 993 | +.metasync-toolbar-right .search-box .metasync-clear-search:hover { | |
| 994 | + color: var(--dashboard-text-primary); | |
| 995 | +} | |
| 996 | + | |
| 997 | +.metasync-toolbar-right .search-box .metasync-clear-search.visible { | |
| 998 | + display: flex; | |
| 999 | +} | |
| 1000 | + | |
| 868 | 1001 | .metasync-toolbar-right .search-box input[type="search"]:focus, |
| 869 | 1002 | .metasync-toolbar-right .search-box input[type="text"]:focus { |
| 870 | 1003 | border-color: var(--dashboard-accent); |
| 871 | 1004 | outline: none; |
| @@ -984,19 +1117,31 @@ | ||
| 984 | 1117 | } |
| 985 | 1118 | |
| 986 | 1119 | /* ── Tablenav Inputs (select, button) ── */ |
| 987 | 1120 | #metasync-image-library-form .tablenav select { |
| 988 | - background: var(--dashboard-card-bg); | |
| 1121 | + background-color: var(--dashboard-card-bg); | |
| 989 | 1122 | color: var(--dashboard-text-primary); |
| 990 | 1123 | border: 1px solid var(--dashboard-border); |
| 991 | 1124 | border-radius: 6px; |
| 992 | 1125 | height: 34px; |
| 993 | 1126 | line-height: 32px; |
| 994 | - padding: 0 10px; | |
| 1127 | + padding: 0 30px 0 10px; | |
| 995 | 1128 | font-size: 13px; |
| 996 | 1129 | box-sizing: border-box; |
| 1130 | + cursor: pointer; | |
| 1131 | + appearance: none; | |
| 1132 | + -webkit-appearance: none; | |
| 1133 | + -moz-appearance: none; | |
| 1134 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); | |
| 1135 | + background-repeat: no-repeat; | |
| 1136 | + background-position: right 10px center; | |
| 1137 | + background-size: 10px 10px; | |
| 997 | 1138 | } |
| 998 | 1139 | |
| 1140 | +#metasync-image-library-form .tablenav select:focus { | |
| 1141 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); | |
| 1142 | +} | |
| 1143 | + | |
| 999 | 1144 | #metasync-image-library-form .tablenav .actions .button { |
| 1000 | 1145 | background: var(--dashboard-card-hover); |
| 1001 | 1146 | color: var(--dashboard-text-primary); |
| 1002 | 1147 | border: 1px solid var(--dashboard-border); |
| @@ -1153,8 +1298,27 @@ | ||
| 1153 | 1298 | border-radius: 4px; |
| 1154 | 1299 | display: block; |
| 1155 | 1300 | } |
| 1156 | 1301 | |
| 1302 | +/* Placeholder shown when an attachment's file is missing on disk */ | |
| 1303 | +.metasync-image-thumb-missing { | |
| 1304 | + width: 50px; | |
| 1305 | + height: 50px; | |
| 1306 | + border-radius: 4px; | |
| 1307 | + display: inline-flex; | |
| 1308 | + align-items: center; | |
| 1309 | + justify-content: center; | |
| 1310 | + background: rgba(239, 68, 68, 0.08); | |
| 1311 | + border: 1px dashed rgba(239, 68, 68, 0.4); | |
| 1312 | + color: #ef4444; | |
| 1313 | +} | |
| 1314 | + | |
| 1315 | +.metasync-image-thumb-missing .dashicons { | |
| 1316 | + font-size: 22px; | |
| 1317 | + width: 22px; | |
| 1318 | + height: 22px; | |
| 1319 | +} | |
| 1320 | + | |
| 1157 | 1321 | .metasync-image-info { |
| 1158 | 1322 | display: flex; |
| 1159 | 1323 | flex-direction: column; |
| 1160 | 1324 | gap: 2px; |
| @@ -1233,8 +1397,13 @@ | ||
| 1233 | 1397 | background: rgba(156, 163, 175, 0.15); |
| 1234 | 1398 | color: var(--dashboard-text-secondary); |
| 1235 | 1399 | } |
| 1236 | 1400 | |
| 1401 | +.metasync-status-missing { | |
| 1402 | + background: rgba(239, 68, 68, 0.15); | |
| 1403 | + color: #ef4444; | |
| 1404 | +} | |
| 1405 | + | |
| 1237 | 1406 | /* ── Size Savings ── */ |
| 1238 | 1407 | .metasync-size-savings { |
| 1239 | 1408 | display: flex; |
| 1240 | 1409 | flex-direction: column; |
| @@ -1284,9 +1453,13 @@ | ||
| 1284 | 1453 | .metasync-optimize-btn, |
| 1285 | 1454 | .metasync-revert-btn { |
| 1286 | 1455 | display: inline-flex !important; |
| 1287 | 1456 | align-items: center; |
| 1457 | + justify-content: center; | |
| 1288 | 1458 | gap: 4px; |
| 1459 | + min-width: 96px; | |
| 1460 | + white-space: nowrap; | |
| 1461 | + box-sizing: border-box; | |
| 1289 | 1462 | } |
| 1290 | 1463 | |
| 1291 | 1464 | .metasync-optimize-btn .dashicons, |
| 1292 | 1465 | .metasync-revert-btn .dashicons { |
| @@ -1338,8 +1511,12 @@ | ||
| 1338 | 1511 | } |
| 1339 | 1512 | |
| 1340 | 1513 | .metasync-stat-item { |
| 1341 | 1514 | min-width: 80px; |
| 1515 | + } | |
| 1516 | + | |
| 1517 | + .metasync-stat-rate { | |
| 1518 | + margin-left: 0; | |
| 1342 | 1519 | } |
| 1343 | 1520 | |
| 1344 | 1521 | .metasync-table-toolbar { |
| 1345 | 1522 | flex-direction: column; |