/** * Styles for Search */ /** * _components * * All of the base styles for each page */ /* * Lib */ /* * Local */ /** * Global * * Included at all viewport sizes. This file imports all our common libraries * and any module and page specific styling. */ /* * Break points */ /** * _colours * * Colour scheme for the search autosuggest results display */ /* ------------------------------ Search Results (autosuggest) ------------------------------ */ #orb-modules.mn-search-results-shown { min-height: 900px; } #mn #mn-search-results-wrapper { position: absolute; top: 56px; left: 0; width: 100%; } #mn #mn-search-results-wrapper #mn-search-results { display: none; margin-top: 8px; margin-bottom: 8px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists h2.results-title, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists h2.results-title, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips h2.results-title { font-size: 1.6em; font-weight: normal; color: #bbb; margin: 0; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul { clear: both; margin: 0; padding: 0; list-style-type: none; z-index: 905; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item { box-sizing: border-box; display: block; padding: 0; position: relative; list-style-type: none; font-size: 14px; width: 100%; margin-top: 8px; vertical-align: top; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.playlist, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.playlist, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.playlist, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip { display: flex; margin: 0; padding: 8px; text-decoration: none; color: #fff; background: #2e2e2e; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.playlist:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.playlist:active, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist:active, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip:active, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.playlist:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.playlist:active, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist:active, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip:active, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.playlist:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.playlist:active, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist:active, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip:active { color: #A0E2F5; background-color: #383838; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.playlist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.playlist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.playlist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail { width: 32px; height: 32px; overflow: hidden; flex-shrink: 0; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.playlist .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.playlist .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.playlist .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail img { display: block; max-width: 100%; max-height: 100%; border: 0px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.playlist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.playlist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.playlist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .description { max-height: 32px; line-height: 32px; margin: 0 8px; word-break: keep-all; word-wrap: break-word; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist { position: relative; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist .thumbnail { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail { position: relative; background: #4c4c4c; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail img { display: none; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail .duration-wrapper { display: inline-block; height: 32px; line-height: 32px; position: absolute; bottom: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 16px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail .duration-wrapper .icon, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail .duration-wrapper .icon, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail .duration-wrapper .icon { width: 32px; height: 32px; display: inline-block; text-align: center; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail .duration-wrapper .duration, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail .duration-wrapper .duration, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail .duration-wrapper .duration { display: none; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .mobile-duration, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .mobile-duration, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .mobile-duration { color: #bbb; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .description { max-height: 16px; line-height: 16px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip:hover .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip:focus .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip:hover .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip:focus .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip:hover .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip:focus .thumbnail .duration-wrapper { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; color: #000; background-color: #a0e2f5; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists .see-more-results, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists .see-more-results, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips .see-more-results { position: relative; margin-top: 8px; border-top: 1px solid #4a4a4a; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists .see-more-results a.see-more-results-link, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists .see-more-results a.see-more-results-link, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips .see-more-results a.see-more-results-link { display: block; margin: 0; text-decoration: none; color: #fff; background: #2e2e2e; padding: 11px 8px; text-align: center; font-size: 14px; line-height: 18px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists .see-more-results a.see-more-results-link .gelicon, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists .see-more-results a.see-more-results-link .gelicon, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips .see-more-results a.see-more-results-link .gelicon { position: relative; top: 1px; margin-left: 4px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists .see-more-results a.see-more-results-link:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists .see-more-results a.see-more-results-link:focus, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists .see-more-results a.see-more-results-link:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists .see-more-results a.see-more-results-link:focus, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips .see-more-results a.see-more-results-link:hover, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips .see-more-results a.see-more-results-link:focus { color: #A0E2F5; background-color: #383838; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists .see-more-results::after, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists .see-more-results::after, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips .see-more-results::after { background-color: #a0e2f5; content: ""; height: 1px; left: 25%; position: absolute; top: -1px; width: 50%; transition: all 400ms cubic-bezier(.19, 1, .22, 1); -webkit-transition: all 400ms cubic-bezier(.19, 1, .22, 1); -moz-transition: all 400ms cubic-bezier(.19, 1, .22, 1); -ms-transition: all 400ms cubic-bezier(.19, 1, .22, 1); -o-transition: all 400ms cubic-bezier(.19, 1, .22, 1); opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists .see-more-results:hover::after, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists .see-more-results:hover::after, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips .see-more-results:hover::after { opacity: 1; left: 0; width: 100%; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips { margin-top: 32px; } #mn #mn-search-results-wrapper #mn-search-results .mn-no-results { color: #bbb; font-size: 1.4em; line-height: 1.6em; } /* ------------------------------ Overlay ------------------------------ */ #orb-modules { position: relative; /* For the overlay to be positioned correctly */ } #mn-search-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 905; display: none; background: #1a1a1a; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; filter: alpha(opacity=95); opacity: 0.95; } /* * Importing CSS for breakpoints */ @media (min-width: 25em) { /** * _400 * * Styles for screens greater than 400px wide */ #orb-modules.mn-search-results-shown { min-height: 920px; } #mn-search-results { margin-top: 16px; margin-bottom: 16px; } } @media (min-width: 37.5em) { /** * _600 * * Styles for smaller devices like tablets */ #orb-modules.mn-search-results-shown { min-height: 880px; } } @media (min-width: 50em) { /** * _800 * * Styles for screens greater than 800px wide */ #mn #mn-search-results-wrapper { top: 64px; } } @media (min-width: 63em) { /** * _1008 * * Styles for screens greater than 1008px wide */ #orb-modules.mn-search-results-shown { min-height: 680px; } #mn #mn-search-results-wrapper #mn-search-results { margin: 16px auto; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul { padding: 0; margin: 12px -8px 0 -8px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item { width: 33.3%; float: left; margin-top: 0; padding: 0 8px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.playlist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.playlist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.playlist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail { width: 64px; height: 64px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.playlist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.playlist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.playlist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .description { line-height: 18px; max-height: 64px; overflow: hidden; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail { width: 128px; height: 72px; background: #AAA; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail img, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail img { display: block; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail .duration-wrapper, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail .duration-wrapper { height: 24px; line-height: 24px; font-size: 12px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail .duration-wrapper .icon, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail .duration-wrapper .icon, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail .duration-wrapper .icon { width: 24px; height: 24px; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .thumbnail .duration-wrapper .duration, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .thumbnail .duration-wrapper .duration, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .thumbnail .duration-wrapper .duration { display: inline-block; max-height: 72px; padding: 0 8px 0 0; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.clip .mobile-duration, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.clip .mobile-duration, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.clip .mobile-duration { display: none; } #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-playlists ul .results-item a.artist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-artists ul .results-item a.artist .description, #mn #mn-search-results-wrapper #mn-search-results .mn-search-results-clips ul .results-item a.artist .description { line-height: 64px; } }