kate522
397231ca75
Put hero main title/subtitle in search before_html (document flow), move the search overlay outside the swiper as a sibling, and reset search/slide-text positioning to zibll tops so title and search no longer overlap.
176 lines
4.2 KiB
CSS
176 lines
4.2 KiB
CSS
/* ===== Card device visibility ===== */
|
|
@media (min-width: 768px) {
|
|
.hide-cards-pc .header-components-card { display: none; }
|
|
}
|
|
@media (max-width: 767px) {
|
|
.hide-cards-mobile .header-components-card { display: none; }
|
|
}
|
|
|
|
.theme-dark .header-components-search .line-form,
|
|
html.dark .header-components-search .line-form {
|
|
background: rgba(30, 30, 30, 0.86);
|
|
color: #ddd;
|
|
}
|
|
|
|
/* zibll base padding; leave room for abs-right submit */
|
|
.header-components-search .search-input-text,
|
|
.header-slider-search .search-input-text {
|
|
position: relative;
|
|
padding: 5px 42px 5px 10px;
|
|
}
|
|
|
|
.header-components-search .line-form-input {
|
|
width: 100%;
|
|
padding: 0.65em 0 0.2em 0;
|
|
font-size: 16px;
|
|
border: none !important;
|
|
outline: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
opacity: 0.92;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.theme-dark .header-components-search .line-form-input,
|
|
html.dark .header-components-search .line-form-input {
|
|
color: #f2f2f2;
|
|
}
|
|
|
|
.header-components-search .line-form-input::placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.header-components-search .line-form-line,
|
|
.header-components-search .line-form-line::before {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
transition: 0.4s;
|
|
background: rgba(255, 255, 255, 0.34);
|
|
}
|
|
|
|
.header-components-search .line-form-line::before {
|
|
content: "";
|
|
width: 0;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
}
|
|
|
|
.header-components-search .line-form-input:focus ~ .line-form-line::before,
|
|
.header-components-search .line-form-input:not(:placeholder-shown) ~ .line-form-line::before {
|
|
width: 100%;
|
|
}
|
|
|
|
.header-components-search .scale-placeholder {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0.72em;
|
|
opacity: 0.68;
|
|
transition: transform 0.2s, font-size 0.2s, color 0.2s, opacity 0.2s;
|
|
pointer-events: none;
|
|
transform-origin: left top;
|
|
}
|
|
|
|
.header-components-search .scale-placeholder.is-focus,
|
|
.header-components-search .line-form-input:focus ~ .scale-placeholder,
|
|
.header-components-search .line-form-input:not(:placeholder-shown) ~ .scale-placeholder {
|
|
transform: translateY(-1.45em);
|
|
font-size: 12px;
|
|
color: #fff;
|
|
opacity: 0.92;
|
|
}
|
|
|
|
/* zibll: .header-slider-search .line-form .abs-right { margin-top:0; margin-right:-6px; } */
|
|
.header-components-search .line-form .abs-right,
|
|
.header-slider-search .line-form .abs-right {
|
|
position: absolute;
|
|
right: 0.7em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-top: 0;
|
|
margin-right: -6px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.header-components-search__submit {
|
|
width: 34px;
|
|
height: 34px;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: var(--color-primary, var(--color-primary));
|
|
color: #fff;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-components-search__submit svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
/* Search add-ons: category dropdown */
|
|
.header-components-search__cat {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
border: none;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.25);
|
|
color: inherit;
|
|
font-size: 13px;
|
|
padding: 0 12px;
|
|
min-width: 90px;
|
|
max-width: 140px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
height: 40px;
|
|
}
|
|
|
|
.header-components-search__cat option {
|
|
color: #333;
|
|
background: #fff;
|
|
}
|
|
|
|
/* Search add-ons: type switcher */
|
|
.header-components-search__types {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0 8px;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.header-components-search__type-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
padding: 3px 8px;
|
|
border-radius: 100px;
|
|
transition: background 0.2s, color 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.header-components-search__type-radio {
|
|
display: none;
|
|
}
|
|
|
|
.header-components-search__type-radio:checked + .header-components-search__type-text {
|
|
color: var(--color-primary, #4a90d9);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* has-addons: pill adjustments */
|
|
.line-form.has-addons {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.line-form.has-addons .search-input-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|