425 lines
11 KiB
CSS
425 lines
11 KiB
CSS
/*---------- Media Query min-width Structure ----------*/
|
|
/*---------- Media Query max-width Structure ----------*/
|
|
/*---------- Break-point min-width Structure ----------*/
|
|
/*---------- Break-point max-width Structure ----------*/
|
|
/**
|
|
* Header Cover / Full Screen Search
|
|
*/
|
|
.main-header-bar-wrap .ast-search-box.header-cover {
|
|
z-index: 7;
|
|
}
|
|
|
|
.ast-below-header-wrap .ast-search-box.header-cover .search-field,
|
|
.ast-below-header-wrap .ast-search-box.header-cover #close {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.ast-below-header-wrap .ast-search-box.header-cover .search-submit {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.ast-search-box.header-cover, .ast-search-box.full-screen {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity .3s ease-in-out,display .3s ease-in-out;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* Placeholder Color */
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-field, .ast-search-box.full-screen .search-field {
|
|
background: 100% 0;
|
|
border: 0;
|
|
color: #fafafa;
|
|
box-shadow: none;
|
|
text-align: right;
|
|
padding: 0;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-submit, .ast-search-box.full-screen .search-submit {
|
|
background: var(--ast-fs-search-submit-background, 0 0);
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
box-shadow: none;
|
|
color: var(--ast-fs-search-text-color, #9E9E9E);
|
|
transition: all .7s ease-In;
|
|
outline: none;
|
|
border: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ast-search-box.header-cover .ast-search-wrapper, .ast-search-box.full-screen .ast-search-wrapper {
|
|
position: absolute;
|
|
width: 100%;
|
|
right: 50%;
|
|
top: 50%;
|
|
transform: translate(50%, -50%);
|
|
}
|
|
|
|
.ast-search-box.header-cover .ast-search-wrapper .search-form, .ast-search-box.full-screen .ast-search-wrapper .search-form {
|
|
line-height: normal;
|
|
}
|
|
|
|
.ast-search-box.header-cover #close, .ast-search-box.full-screen #close {
|
|
color: #fafafa;
|
|
transform: rotate(0);
|
|
font-size: 2em;
|
|
cursor: pointer;
|
|
z-index: 9;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-field::-webkit-input-placeholder, .ast-search-box.full-screen .search-field::-webkit-input-placeholder {
|
|
color: #fafafa;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-field:-moz-placeholder, .ast-search-box.full-screen .search-field:-moz-placeholder {
|
|
/* Firefox 18- */
|
|
color: #fafafa;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-field::-moz-placeholder, .ast-search-box.full-screen .search-field::-moz-placeholder {
|
|
/* Firefox 19+ */
|
|
color: #fafafa;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-field:-ms-input-placeholder, .ast-search-box.full-screen .search-field:-ms-input-placeholder {
|
|
color: #fafafa;
|
|
}
|
|
|
|
.ast-search-box.header-cover {
|
|
position: absolute;
|
|
background: rgba(25, 25, 25, 0.96);
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-field {
|
|
font-size: 2em;
|
|
line-height: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.ast-search-box.header-cover .ast-container {
|
|
position: relative;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-text-wrap,
|
|
.ast-search-box.header-cover .search-submit,
|
|
.ast-search-box.header-cover .close {
|
|
display: inline-block;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-text-wrap {
|
|
width: calc( 100% - 2.5em);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ast-search-box.header-cover .search-submit {
|
|
font-size: 1.7em;
|
|
margin-left: 2em;
|
|
}
|
|
|
|
.ast-search-box.header-cover #close {
|
|
vertical-align: middle;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.ast-search-box.full-screen {
|
|
position: fixed;
|
|
background: rgba(25, 25, 25, 0.96);
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.ast-search-box.full-screen .ast-search-wrapper .large-search-text {
|
|
text-align: center;
|
|
color: #e2e2e2;
|
|
font-size: 1.5em;
|
|
font-weight: normal;
|
|
transition-delay: 50ms;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
|
|
.ast-search-box.full-screen .ast-search-wrapper fieldset {
|
|
border: 0;
|
|
padding: 2.5em 0 1em;
|
|
border-bottom: 2px solid var(--ast-border-color);
|
|
}
|
|
|
|
.ast-search-box.full-screen .ast-search-wrapper .search-field {
|
|
font-size: 2em;
|
|
padding-right: 20px;
|
|
line-height: 1.7;
|
|
width: 92%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ast-search-box.full-screen .ast-search-wrapper .search-form {
|
|
width: 70%;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.ast-search-box.full-screen .ast-search-wrapper .search-submit {
|
|
font-size: var(--ast-fs-search-font-size, 1.7em);
|
|
}
|
|
|
|
.ast-search-box.full-screen #close {
|
|
position: absolute;
|
|
color: #fafafa;
|
|
left: 1em;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
z-index: 9;
|
|
font-weight: normal;
|
|
font-size: 2em;
|
|
top: 1.5em;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.ast-search-box.full-screen ::-webkit-input-placeholder {
|
|
/* Chrome/Opera/Safari */
|
|
opacity: 0;
|
|
}
|
|
|
|
.ast-search-box.full-screen ::-moz-placeholder {
|
|
/* Firefox 19+ */
|
|
opacity: 0;
|
|
}
|
|
|
|
.ast-search-box.full-screen :-ms-input-placeholder {
|
|
/* IE 10+ */
|
|
opacity: 0;
|
|
}
|
|
|
|
.ast-search-box.full-screen :-moz-placeholder {
|
|
/* Firefox 18- */
|
|
opacity: 0;
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.ast-search-box.full-screen ::-webkit-input-placeholder {
|
|
/* Chrome/Opera/Safari */
|
|
opacity: 1;
|
|
}
|
|
.ast-search-box.full-screen ::-moz-placeholder {
|
|
/* Firefox 19+ */
|
|
opacity: 1;
|
|
}
|
|
.ast-search-box.full-screen :-ms-input-placeholder {
|
|
/* IE 10+ */
|
|
opacity: 1;
|
|
}
|
|
.ast-search-box.full-screen :-moz-placeholder {
|
|
/* Firefox 18- */
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.ast-hfb-header .ast-search-box.full-screen.full-screen ::-webkit-input-placeholder {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.ast-hfb-header .ast-search-box.full-screen.full-screen ::-moz-placeholder {
|
|
/* Firefox 19+ */
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.ast-hfb-header .ast-search-box.full-screen.full-screen :-ms-input-placeholder {
|
|
/* IE 10+ */
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.ast-hfb-header .ast-search-box.full-screen.full-screen :-moz-placeholder {
|
|
/* Firefox 18- */
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.site-header .ast-inline-search.ast-search-menu-icon .search-form {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.site-header .ast-inline-search.ast-search-menu-icon .search-field {
|
|
padding-right: 1em;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.ast-inline-search.ast-search-menu-icon {
|
|
position: relative;
|
|
transform: none;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.ast-inline-search.ast-search-menu-icon .search-submit {
|
|
display: block;
|
|
background: none;
|
|
border: none;
|
|
position: absolute;
|
|
height: 100%;
|
|
left: 0.25em;
|
|
padding: 0;
|
|
top: 0;
|
|
font-size: 1.3em;
|
|
color: #757575;
|
|
}
|
|
|
|
.ast-header-break-point .ast-inline-search.ast-search-menu-icon .search-form {
|
|
padding: 0;
|
|
}
|
|
|
|
.ast-header-break-point .site-header .ast-inline-search.ast-search-menu-icon .search-field {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-search-box.full-screen .ast-search-wrapper .search-field {
|
|
width: 80%;
|
|
}
|
|
|
|
.ast-header-custom-item-inside.ast-desktop .main-header-menu .ast-search-menu-icon.full-screen,
|
|
.ast-header-custom-item-inside.ast-desktop .main-header-menu .ast-search-menu-icon.header-cover {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Swap Above Header
|
|
*/
|
|
.ast-header-break-point .ast-swap-above-header-sections .ast-above-header-section-1 .ast-search-menu-icon .search-form {
|
|
left: -1em;
|
|
right: auto;
|
|
padding-right: 0em;
|
|
padding-left: 3em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-above-header-sections .ast-above-header-section-1 .search-field {
|
|
padding-left: 0px;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-above-header-sections .ast-above-header-section-2 .ast-search-menu-icon .search-form {
|
|
right: -1em;
|
|
left: auto;
|
|
padding-left: 0em;
|
|
padding-right: 3em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-above-header-sections .ast-above-header-section-2 .search-field {
|
|
padding-right: 0px;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
/** Above Header - Swap + Stack */
|
|
.ast-header-break-point .ast-above-header .ast-above-header-section-1 .ast-inline-search.ast-search-menu-icon .search-field {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-above-header-sections.ast-mobile-header-stack .ast-above-header .ast-above-header-section-2 .ast-search-menu-icon .search-form {
|
|
padding-right: 0px;
|
|
right: auto;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-above-header-sections.ast-mobile-header-stack .ast-above-header .ast-above-header-section-2 .ast-search-menu-icon.slide-search .search-form {
|
|
right: -1em;
|
|
padding-right: 2em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-above-header-sections.ast-mobile-header-stack .ast-above-header .ast-above-header-section-1 .search-field {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-above-header-sections.ast-mobile-header-stack .ast-above-header .search-field {
|
|
padding-left: 0;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-above-header-mobile-stack .ast-above-header .ast-above-header-section-1 .ast-search-menu-icon.ast-inline-search .search-form {
|
|
left: auto;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-below-header-sections .ast-below-header .below-header-section-2 .ast-search-menu-icon.ast-inline-search .search-form {
|
|
right: 0;
|
|
padding-right: 0;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
/**
|
|
* Swap Below Header
|
|
*/
|
|
.ast-header-break-point .ast-swap-below-header-sections .below-header-section-1 .ast-search-menu-icon .search-form {
|
|
left: -1em;
|
|
right: auto;
|
|
padding-right: 0em;
|
|
padding-left: 3em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-below-header-sections .below-header-section-1 .search-field {
|
|
padding-left: 0px;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-below-header-sections .below-header-section-2 .ast-search-menu-icon .search-form {
|
|
right: -1em;
|
|
left: auto;
|
|
padding-left: 0em;
|
|
padding-right: 3em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-below-header-sections .below-header-section-2 .search-field {
|
|
padding-right: 0px;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
/** Below Header - Swap + Stack */
|
|
.ast-header-break-point .ast-below-header .below-header-section-1 .ast-inline-search.ast-search-menu-icon .search-field {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-below-header-sections.site-header .ast-below-header .ast-inline-search.ast-search-menu-icon .search-field {
|
|
padding-right: 1em;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ast-header-break-point .ast-swap-below-header-sections .ast-below-header .below-header-section-2 .ast-search-menu-icon .search-form {
|
|
right: -1em;
|
|
padding-right: 3em;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.ast-below-header-mobile-stack .ast-below-header .below-header-section-1 .ast-search-menu-icon.ast-inline-search .search-form {
|
|
left: auto;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
/**
|
|
* iPhone/iPad fix
|
|
*
|
|
* Full screen search input cursor position not looks on expected place.
|
|
* So, We add the `fixed` to body when it full-screen search is open.
|
|
*/
|
|
.ipod.full-screen,
|
|
.iphone.full-screen {
|
|
position: fixed !important;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.ast-above-header-mobile-stack .ast-above-header-section-1 .ast-search-menu-icon.ast-inline-search .search-form {
|
|
right: auto;
|
|
}
|
|
.ast-below-header-mobile-stack .below-header-section-1 .ast-search-menu-icon.ast-inline-search .search-form {
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 544px) {
|
|
.ast-search-box.full-screen .ast-search-wrapper .large-search-text {
|
|
display: none;
|
|
}
|
|
.ast-search-box.full-screen .ast-search-wrapper .search-field,
|
|
.ast-search-box.full-screen .ast-search-wrapper .search-submit {
|
|
font-size: 1.6em;
|
|
}
|
|
}
|