522 lines
13 KiB
CSS
522 lines
13 KiB
CSS
/* Mobile search: the Figma frames use a 375px-wide canvas. */
|
|
.mobile-search {
|
|
--mobile-search-unit: 1px;
|
|
width: 375px;
|
|
max-width: 100%;
|
|
min-height: 100vh;
|
|
margin-inline: auto;
|
|
background: var(--bg, #0b0b0d);
|
|
color: var(--text, #f2f2f4);
|
|
font-family: var(--font, "PingFang SC", sans-serif);
|
|
}
|
|
|
|
.mobile-search__header {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: calc(56 * var(--mobile-search-unit));
|
|
padding-inline: calc(12 * var(--mobile-search-unit));
|
|
background: var(--bg, #0b0b0d);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
.mobile-search__back {
|
|
display: grid;
|
|
flex: 0 0 calc(36 * var(--mobile-search-unit));
|
|
place-items: center;
|
|
width: calc(36 * var(--mobile-search-unit));
|
|
height: calc(36 * var(--mobile-search-unit));
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.mobile-search__back img,
|
|
.mobile-search__back svg {
|
|
display: block;
|
|
width: calc(22 * var(--mobile-search-unit));
|
|
height: calc(22 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__form {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
align-items: center;
|
|
gap: calc(8 * var(--mobile-search-unit));
|
|
min-width: 0;
|
|
height: calc(36 * var(--mobile-search-unit));
|
|
padding-inline: calc(14 * var(--mobile-search-unit));
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid #ec237f;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.mobile-search__search-icon {
|
|
display: block;
|
|
flex: 0 0 calc(18 * var(--mobile-search-unit));
|
|
width: calc(18 * var(--mobile-search-unit));
|
|
height: calc(18 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__input {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
height: 100%;
|
|
padding: 0;
|
|
color: var(--text, #f2f2f4);
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
font: 400 calc(14 * var(--mobile-search-unit)) / calc(22 * var(--mobile-search-unit)) var(--font, "PingFang SC", sans-serif);
|
|
appearance: none;
|
|
}
|
|
|
|
.mobile-search__input::placeholder {
|
|
color: var(--text-dim, #7c7c86);
|
|
opacity: 1;
|
|
}
|
|
|
|
.mobile-search__input::-webkit-search-cancel-button,
|
|
.mobile-search__input::-webkit-search-decoration {
|
|
appearance: none;
|
|
}
|
|
|
|
.mobile-search__clear {
|
|
display: grid;
|
|
flex: 0 0 calc(16 * var(--mobile-search-unit));
|
|
place-items: center;
|
|
width: calc(16 * var(--mobile-search-unit));
|
|
height: calc(16 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__clear[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-search__clear img,
|
|
.mobile-search__clear svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mobile-search__cancel {
|
|
flex: 0 0 auto;
|
|
padding-left: 8px;
|
|
color: var(--text-muted, #a1a1aa);
|
|
font-size: calc(14 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(22 * var(--mobile-search-unit));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__main,
|
|
.mobile-search__default,
|
|
.mobile-search__suggestions {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-search__default[hidden],
|
|
.mobile-search__suggestions[hidden],
|
|
.mobile-search__suggestion-list[hidden],
|
|
.mobile-search__suggestion[hidden],
|
|
.mobile-search__history[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-search__history {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: calc(10 * var(--mobile-search-unit));
|
|
padding: calc(16 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit)) calc(8 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__history-head,
|
|
.mobile-search__section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mobile-search__section-label {
|
|
margin: 0;
|
|
color: var(--text-dim, #7c7c86);
|
|
font-size: calc(12 * var(--mobile-search-unit));
|
|
font-weight: 500;
|
|
line-height: calc(16 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__history-clear {
|
|
display: grid;
|
|
flex: 0 0 calc(14 * var(--mobile-search-unit));
|
|
place-items: center;
|
|
width: calc(14 * var(--mobile-search-unit));
|
|
height: calc(14 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__history-clear img,
|
|
.mobile-search__history-clear svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mobile-search__chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: calc(8 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: calc(30 * var(--mobile-search-unit));
|
|
padding-inline: calc(12 * var(--mobile-search-unit));
|
|
color: var(--text-muted, #a1a1aa);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 999px;
|
|
font-size: calc(13 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(20 * var(--mobile-search-unit));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__trending {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(6 * var(--mobile-search-unit));
|
|
padding: calc(12 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__trend-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(6 * var(--mobile-search-unit));
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.mobile-search__trend {
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-search__trend > a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(12 * var(--mobile-search-unit));
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: calc(40 * var(--mobile-search-unit));
|
|
padding-block: calc(9 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__trend-rank {
|
|
flex: 0 0 calc(18 * var(--mobile-search-unit));
|
|
width: calc(18 * var(--mobile-search-unit));
|
|
color: var(--text-dim, #7c7c86);
|
|
font-family: Inter, var(--font, "PingFang SC", sans-serif);
|
|
font-size: calc(16 * var(--mobile-search-unit));
|
|
font-weight: 600;
|
|
line-height: calc(20 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__trend:nth-child(-n + 3) .mobile-search__trend-rank {
|
|
color: var(--accent-hot, #ff4a7b);
|
|
}
|
|
|
|
.mobile-search__trend-name {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--text, #f2f2f4);
|
|
font-size: calc(14 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(22 * var(--mobile-search-unit));
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__trend-badge {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: calc(18 * var(--mobile-search-unit));
|
|
padding-inline: calc(5 * var(--mobile-search-unit));
|
|
border-radius: 999px;
|
|
font-size: calc(11 * var(--mobile-search-unit));
|
|
font-weight: 500;
|
|
line-height: calc(14 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__trend-badge--hot,
|
|
.mobile-search__trend-badge:not(.mobile-search__trend-badge--new) {
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #ff4a7b 15%, #ec237f 51%, #93226f 85%);
|
|
}
|
|
|
|
.mobile-search__trend-badge--new {
|
|
color: var(--accent-hot, #ff4a7b);
|
|
background: rgba(236, 35, 127, 0.1);
|
|
border: 1px solid rgba(236, 35, 127, 0.3);
|
|
}
|
|
|
|
.mobile-search__trend-heat {
|
|
flex: 0 0 auto;
|
|
color: var(--text-dim, #7c7c86);
|
|
font-size: calc(12 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(18 * var(--mobile-search-unit));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__recommendations {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(14 * var(--mobile-search-unit));
|
|
padding: calc(8 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit)) calc(24 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__recommend-title {
|
|
margin: 0;
|
|
color: var(--text, #f2f2f4);
|
|
font-size: calc(16 * var(--mobile-search-unit));
|
|
font-weight: 600;
|
|
line-height: calc(22 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__recommend-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: calc(16 * var(--mobile-search-unit)) calc(8 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(6 * var(--mobile-search-unit));
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-search__cover {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 109 / 145;
|
|
overflow: hidden;
|
|
background: var(--bg-panel, #1b1b1f);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
border-radius: calc(8 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__cover > img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mobile-search__cover-shade {
|
|
position: absolute;
|
|
inset: 58% 0 0;
|
|
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mobile-search__episodes {
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: calc(10 * var(--mobile-search-unit));
|
|
left: calc(10 * var(--mobile-search-unit));
|
|
color: var(--text, #f2f2f4);
|
|
font-size: calc(11 * var(--mobile-search-unit));
|
|
font-weight: 500;
|
|
line-height: calc(14 * var(--mobile-search-unit));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__title,
|
|
.mobile-search__meta {
|
|
display: block;
|
|
margin: 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__title {
|
|
color: var(--text, #f2f2f4);
|
|
font-size: calc(14 * var(--mobile-search-unit));
|
|
font-weight: 600;
|
|
line-height: calc(20 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__meta {
|
|
color: var(--text-muted, #a1a1aa);
|
|
font-size: calc(11 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(16 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__suggestions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
padding: calc(12 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__suggestion-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: calc(6 * var(--mobile-search-unit));
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.mobile-search__suggest-empty {
|
|
margin: 0;
|
|
padding: calc(12 * var(--mobile-search-unit)) calc(4 * var(--mobile-search-unit));
|
|
color: var(--text-dim, #7c7c86);
|
|
font-size: calc(13 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(20 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__suggestion-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(12 * var(--mobile-search-unit));
|
|
width: 100%;
|
|
min-height: calc(84 * var(--mobile-search-unit));
|
|
padding: calc(10 * var(--mobile-search-unit));
|
|
background: var(--bg-panel, #1b1b1f);
|
|
border-radius: calc(12 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__feature-cover {
|
|
display: block;
|
|
flex: 0 0 calc(48 * var(--mobile-search-unit));
|
|
width: calc(48 * var(--mobile-search-unit));
|
|
height: calc(64 * var(--mobile-search-unit));
|
|
overflow: hidden;
|
|
border-radius: calc(6 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__feature-cover img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mobile-search__feature-copy {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-direction: column;
|
|
gap: calc(4 * var(--mobile-search-unit));
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-search__feature-title {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--text, #f2f2f4);
|
|
font-size: calc(15 * var(--mobile-search-unit));
|
|
font-weight: 600;
|
|
line-height: calc(21 * var(--mobile-search-unit));
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__feature-title mark,
|
|
.mobile-search__feature-title > span:first-child,
|
|
.mobile-search__suggestion-text mark,
|
|
.mobile-search__suggestion-text > span:first-child,
|
|
.mobile-search__highlight {
|
|
color: var(--accent-hot, #ff4a7b);
|
|
background: none;
|
|
}
|
|
|
|
.mobile-search__feature-meta {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--text-dim, #7c7c86);
|
|
font-size: calc(12 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(18 * var(--mobile-search-unit));
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__feature-play {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: calc(8 * var(--mobile-search-unit));
|
|
height: calc(32 * var(--mobile-search-unit));
|
|
padding-inline: calc(12 * var(--mobile-search-unit));
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #ff4a7b 0%, #ec237f 52%, #93226f 100%);
|
|
border-radius: 999px;
|
|
font-size: calc(14 * var(--mobile-search-unit));
|
|
font-weight: 500;
|
|
line-height: calc(20 * var(--mobile-search-unit));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__feature-play img,
|
|
.mobile-search__feature-play svg {
|
|
width: calc(16 * var(--mobile-search-unit));
|
|
height: calc(16 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__suggestion {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(10 * var(--mobile-search-unit));
|
|
min-width: 0;
|
|
padding: calc(10 * var(--mobile-search-unit)) calc(4 * var(--mobile-search-unit));
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
.mobile-search__suggestion-icon {
|
|
display: block;
|
|
flex: 0 0 calc(16 * var(--mobile-search-unit));
|
|
width: calc(16 * var(--mobile-search-unit));
|
|
height: calc(16 * var(--mobile-search-unit));
|
|
}
|
|
|
|
.mobile-search__suggestion-text {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--text, #f2f2f4);
|
|
font-size: calc(14 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(22 * var(--mobile-search-unit));
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-search__suggestion-type {
|
|
flex: 0 0 auto;
|
|
color: var(--text-dim, #7c7c86);
|
|
font-size: calc(12 * var(--mobile-search-unit));
|
|
font-weight: 400;
|
|
line-height: calc(18 * var(--mobile-search-unit));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mobile-search {
|
|
--mobile-search-unit: calc(100vw / 375);
|
|
width: 100%;
|
|
}
|
|
}
|