b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
123 lines
2.4 KiB
CSS
Executable file
123 lines
2.4 KiB
CSS
Executable file
.search-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
background-color: rgba(0, 0, 0, 1);
|
|
transition-property: background-color;
|
|
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
|
|
transition-duration: 0.92s;
|
|
}
|
|
|
|
.search-bar.hidden {
|
|
opacity: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
transition-property: none;
|
|
}
|
|
|
|
smart-button.search-mic-button {
|
|
opacity: 1;
|
|
background-color: #5d6368;
|
|
position: absolute;
|
|
left: 28.6rem;
|
|
top: 4rem;
|
|
}
|
|
|
|
.search-bar.hidden .search-input {
|
|
left: 6rem;
|
|
right: auto;
|
|
top: 4rem;
|
|
width: 8rem;
|
|
border-radius: 4rem;
|
|
padding-left: 0;
|
|
transition-property: none;
|
|
}
|
|
|
|
.search-input span {
|
|
opacity: 0;
|
|
}
|
|
|
|
.search-bar.opened .search-input span {
|
|
opacity: 1;
|
|
transition-property: opacity;
|
|
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
|
|
transition-duration: 0.92s;
|
|
}
|
|
|
|
/* icon parts */
|
|
.search-bar.hidden [data-icon].search-input:before {
|
|
left: 1.3rem;
|
|
right: auto;
|
|
}
|
|
|
|
[data-icon].search-input:before {
|
|
width: 5.4rem;
|
|
right: 1.2rem;
|
|
font-size: 5.4rem;
|
|
line-height: 8rem;
|
|
text-align: center;
|
|
color: #2d2d2d;
|
|
white-space: normal;
|
|
top: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.search-input {
|
|
/* 38.4rem = 28.6rem (left) + 8rem (voice button) + 1.8rem (margin) */
|
|
left: 38.4rem;
|
|
/* 77rem = left: 38.4rem + right 38.6rem */
|
|
width: calc(100% - 77rem);
|
|
top: 4rem;
|
|
height: 8rem;
|
|
position: absolute;
|
|
|
|
display: inline-block;
|
|
background-color: #ffffff;
|
|
|
|
color: #808080;
|
|
|
|
font-size: 3.2rem;
|
|
line-height: 8rem;
|
|
|
|
overflow: hidden;
|
|
padding-left: 4rem;
|
|
border-radius: 4rem;
|
|
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
|
|
transition-duration: 0.92s;
|
|
}
|
|
|
|
/* blue underline */
|
|
.search-input:after {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
content: ' ';
|
|
border-bottom: 0.6rem #61acd7 solid;
|
|
box-sizing: border-box;
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
|
|
transition-duration: 0.92s;
|
|
}
|
|
|
|
.search-bar.hidden .search-input:after {
|
|
opacity: 0;
|
|
transition-property: none;
|
|
}
|
|
|
|
.search-bar.opened .search-mic-button {
|
|
transition-property: opacity;
|
|
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
|
|
transition-duration: 0.66s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.search-bar .search-mic-button {
|
|
transition-property: none;
|
|
opacity: 0;
|
|
}
|