Changeset 46363 for trunk/src/wp-includes/css/media-views.css
- Timestamp:
- 09/30/2019 07:36:42 PM (4 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/css/media-views.css
r46362 r46363 581 581 } 582 582 583 .media-menu > a { 584 display: block; 583 .media-menu .media-menu-item { 584 display: block; 585 box-sizing: border-box; 586 width: 100%; 585 587 position: relative; 588 border: 0; 589 margin: 0; 586 590 padding: 8px 20px; 587 margin: 0;591 font-size: 14px; 588 592 line-height: 1.28571428; 589 font-size: 14px;593 background: transparent; 590 594 color: #0073aa; 595 text-align: left; 591 596 text-decoration: none; 592 } 593 594 .media-menu > a:hover { 597 cursor: pointer; 598 } 599 600 .media-menu .media-menu-item:hover { 601 background: rgba(0, 0, 0, 0.04); 602 } 603 604 .media-menu .media-menu-item:active { 595 605 color: #0073aa; 596 background: rgba(0, 0, 0, 0.04);597 }598 599 .media-menu > a:active {600 606 outline: none; 601 607 } … … 605 611 color: #23282d; 606 612 font-weight: 600; 613 } 614 615 .media-menu .media-menu-item:focus { 616 box-shadow: 617 0 0 0 1px #5b9dd9, 618 0 0 2px 1px rgba(30, 140, 190, 0.8); 619 color: #124964; 620 /* Only visible in Windows High Contrast mode */ 621 outline: 1px solid transparent; 607 622 } 608 623 … … 622 637 margin: 0; 623 638 clear: both; 624 -webkit-user-select: none; 625 -moz-user-select: none; 626 -ms-user-select: none; 627 user-select: none; 628 } 629 630 .media-router a { 631 transition: none; 632 } 633 634 .media-router > a { 639 } 640 641 .media-router .media-menu-item { 635 642 position: relative; 636 643 float: left; 644 border: 0; 645 margin: 0; 637 646 padding: 8px 10px 9px; 638 margin: 0;639 647 height: 18px; 640 648 line-height: 1.28571428; 641 649 font-size: 14px; 642 650 text-decoration: none; 643 } 644 645 .media-router > a:last-child { 651 background: transparent; 652 cursor: pointer; 653 transition: none; 654 } 655 656 .media-router .media-menu-item:last-child { 646 657 border-right: 0; 647 658 } 648 659 649 .media-router > a:active { 650 outline: none; 660 .media-router .media-menu-item:hover, 661 .media-router .media-menu-item:active { 662 color: #0073aa; 651 663 } 652 664 653 665 .media-router .active, 654 666 .media-router .active:hover { 655 color: #32373c; 667 color: #23282d; 668 } 669 670 .media-router .media-menu-item:focus { 671 box-shadow: 672 0 0 0 1px #5b9dd9, 673 0 0 2px 1px rgba(30, 140, 190, 0.8); 674 color: #124964; 675 /* Only visible in Windows High Contrast mode */ 676 outline: 1px solid transparent; 656 677 } 657 678 658 679 .media-router .active, 659 .media-router > a.active:last-child {680 .media-router .media-menu-item.active:last-child { 660 681 margin: -1px -1px 0; 661 682 background: #fff; … … 753 774 } 754 775 755 .media-frame.hide-router .media-frame-title {756 border-bottom: 1px solid #ddd;757 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);758 }759 760 .media-frame-title .dashicons {761 display: none;762 }763 764 776 .media-frame-title h1 { 765 777 padding: 0 16px; … … 767 779 line-height: 2.27272727; 768 780 margin: 0; 781 } 782 783 .wp-core-ui .button.media-frame-menu-toggle { 784 display: none; 769 785 } 770 786 … … 2252 2268 */ 2253 2269 @media only screen and (max-width: 900px) { 2270 .media-modal .media-frame-title { 2271 height: 40px; 2272 } 2273 2274 .media-modal .media-frame-title h1 { 2275 line-height: 2.22222222; 2276 font-size: 18px; 2277 } 2278 2279 .media-modal-close { 2280 width: 42px; 2281 height: 42px; 2282 } 2254 2283 2255 2284 /* Drop-down menu */ 2256 .media-frame:not(.hide-menu) .media-frame-title, 2285 .media-frame .media-frame-title { 2286 position: static; 2287 padding: 0 44px; 2288 text-align: center; 2289 } 2290 2257 2291 .media-frame:not(.hide-menu) .media-frame-router, 2258 2292 .media-frame:not(.hide-menu) .media-frame-content, … … 2261 2295 } 2262 2296 2297 .media-frame:not(.hide-menu) .media-frame-router { 2298 /* 40 title + (40 - 6) menu toggle button + 6 spacing */ 2299 top: 80px; 2300 } 2301 2302 .media-frame:not(.hide-menu) .media-frame-content { 2303 /* 80 + room for the tabs */ 2304 top: 114px; 2305 } 2306 2307 .media-frame.hide-router .media-frame-content { 2308 top: 80px; 2309 } 2310 2263 2311 .media-frame:not(.hide-menu) .media-frame-menu { 2264 2312 position: static; … … 2267 2315 2268 2316 .media-frame:not(.hide-menu) .media-menu { 2317 display: none; 2269 2318 width: auto; 2270 2319 max-width: 80%; 2271 2320 overflow: auto; 2272 2321 z-index: 2000; 2273 top: 50px;2274 left: -300px;2322 top: 75px; 2323 left: 0; 2275 2324 right: auto; 2276 2325 bottom: auto; … … 2280 2329 2281 2330 .media-frame:not(.hide-menu) .media-menu.visible { 2282 left: 0;2331 display: block; 2283 2332 } 2284 2333 … … 2288 2337 } 2289 2338 2290 .media-frame:not(.hide-menu) .media-menu > a.active {2291 display: none;2292 }2293 2294 2339 .media-frame:not(.hide-menu) .media-menu .separator { 2295 2340 margin: 5px 10px; 2296 2341 } 2297 2342 2298 .media-frame:not(.hide-menu) .media-frame-title { 2299 left: 0; 2300 } 2301 2302 .media-frame:not(.hide-menu) .media-frame-title .dashicons { 2303 display: inline-block; 2304 line-height: 2.5; 2305 } 2306 2307 .media-frame:not(.hide-menu) .media-frame-title h1 { 2308 color: #0073aa; 2309 line-height: 3; 2310 font-size: 18px; 2311 float: left; 2312 cursor: pointer; 2343 .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle { 2344 display: inline-flex; 2345 align-items: center; 2346 vertical-align: top; 2347 min-height: 40px; 2348 margin: -6px 6px 0; 2349 padding: 0 2px 0 12px; 2350 font-size: 0.875rem; 2351 font-weight: 600; 2352 text-decoration: none; 2353 background: transparent; 2354 } 2355 2356 .wp-core-ui .button.media-frame-menu-toggle:hover, 2357 .wp-core-ui .button.media-frame-menu-toggle:active { 2358 background: transparent; 2359 transform: none; 2360 } 2361 2362 .wp-core-ui .button.media-frame-menu-toggle:focus { 2363 /* Only visible in Windows High Contrast mode */ 2364 outline: 1px solid transparent; 2313 2365 } 2314 2366 /* End drop-down menu */ … … 2562 2614 } 2563 2615 2564 /* Landscape specific header override */2565 @media screen and (max-height: 400px) {2566 .media-menu,2567 .media-frame:not(.hide-menu) .media-menu {2568 top: 44px;2569 }2570 2571 .media-frame-router {2572 top: 44px;2573 }2574 2575 .media-frame-content {2576 top: 78px;2577 }2578 2579 .attachments-browser .attachments {2580 top: 40px;2581 }2582 2583 /* Prevent unnecessary scrolling on title input */2584 .embed-link-settings {2585 overflow: visible;2586 }2587 }2588 2589 2616 @media only screen and (min-width: 901px) and (max-height: 400px) { 2590 2617 .media-menu, … … 2596 2623 2597 2624 @media only screen and (max-width: 480px) { 2598 .media-modal-close {2599 top: -5px;2600 }2601 2602 .media-modal .media-frame-title {2603 height: 40px;2604 }2605 2606 2625 .wp-core-ui.wp-customizer .media-button { 2607 2626 margin-top: 13px; 2608 }2609 2610 .media-modal .media-frame-title h1,2611 .media-frame:not(.hide-menu) .media-frame-title h1 {2612 font-size: 18px;2613 line-height: 2.22222222;2614 }2615 2616 .media-frame:not(.hide-menu) .media-frame-title .dashicons {2617 line-height: 2;2618 }2619 2620 .media-frame-router,2621 .media-frame:not(.hide-menu) .media-menu {2622 top: 40px;2623 padding-top: 0;2624 }2625 2626 .media-frame-content {2627 top: 74px;2628 2627 } 2629 2628
Note: See TracChangeset
for help on using the changeset viewer.