mirror of
https://github.com/benbusby/whoogle-search.git
synced 2026-01-08 13:10:33 -05:00
Adds a new advanced search icon alongside the result tabs for switching to a different country from the result page. This will obviously get populated with other methods of filtering results, but for now it's just the country selector.
251 lines
4.2 KiB
CSS
251 lines
4.2 KiB
CSS
header {
|
|
font-family: Roboto,HelveticaNeue,Arial,sans-serif;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #3C4043;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.logo-link, .logo-letter {
|
|
text-decoration: none !important;
|
|
letter-spacing: -1px;
|
|
text-align: center;
|
|
border-radius: 2px 0 0 0;
|
|
}
|
|
|
|
.result-config {
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.mobile-logo {
|
|
font: 22px/36px Futura, Arial, sans-serif;
|
|
padding-left: 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo-div {
|
|
letter-spacing: -1px;
|
|
text-align: center;
|
|
font: 22pt Futura, Arial, sans-serif;
|
|
padding: 10px 0 5px 0;
|
|
height: 37px;
|
|
font-smoothing: antialiased;
|
|
}
|
|
|
|
.search-bar-desktop {
|
|
border-radius: 8px 8px 0 0;
|
|
height: 40px !important;
|
|
}
|
|
|
|
.search-div {
|
|
border-radius: 8px 8px 0 0;
|
|
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.search-form {
|
|
height: 39px;
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 0px;
|
|
}
|
|
|
|
.search-input {
|
|
background: none;
|
|
margin: 2px 4px 2px 8px;
|
|
display: block;
|
|
font-size: 16px;
|
|
padding: 0 0 0 8px;
|
|
flex: 1;
|
|
height: 35px;
|
|
outline: none;
|
|
border: none;
|
|
width: 100%;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tracking-link {
|
|
font-size: large;
|
|
text-align: center;
|
|
margin: 15px;
|
|
display: block;
|
|
}
|
|
|
|
#main>div:focus-within {
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 6px 1px #2375e8;
|
|
}
|
|
|
|
#mobile-header-logo {
|
|
height: 1.75em;
|
|
}
|
|
|
|
.mobile-input-div {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-search-bar {
|
|
display: block;
|
|
font-size: 16px;
|
|
padding: 0 0 0 8px;
|
|
padding-right: 0px;
|
|
-webkit-box-flex: 1;
|
|
height: 35px;
|
|
outline: none;
|
|
border: none;
|
|
width: 100%;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,.00);
|
|
overflow: hidden;
|
|
border: 0px !important;
|
|
}
|
|
|
|
.autocomplete-mobile{
|
|
display: -webkit-box;
|
|
width: 100%;
|
|
}
|
|
|
|
.desktop-header-logo {
|
|
height: 1.65em;
|
|
}
|
|
|
|
.header-autocomplete {
|
|
width: 100%;
|
|
flex: 1
|
|
}
|
|
|
|
a {
|
|
color: #1967D2;
|
|
text-decoration: none;
|
|
tap-highlight-color: rgba(0, 0, 0, .10);
|
|
}
|
|
|
|
.header-tab-div {
|
|
border-radius: 0 0 8px 8px;
|
|
box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18);
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header-tab-div-2 {
|
|
border-top: 1px solid #dadce0;
|
|
height: 39px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-tab-div-3 {
|
|
height: 51px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.desktop-header {
|
|
height: 39px;
|
|
display: box;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.header-tab {
|
|
box-pack: justify;
|
|
font-size: 14px;
|
|
line-height: 37px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.desktop-header a, .desktop-header span {
|
|
color: #70757a;
|
|
display: block;
|
|
flex: none;
|
|
padding: 0 16px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
span.header-tab-span {
|
|
border-bottom: 2px solid #4285f4;
|
|
color: #4285f4;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mobile-header {
|
|
height: 39px;
|
|
display: box;
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
width: 100%;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.mobile-header a, .mobile-header span {
|
|
color: #70757a;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
/* padding: 8px 12px 8px 12px; */
|
|
}
|
|
|
|
span.mobile-tab-span {
|
|
border-bottom: 2px solid #202124;
|
|
color: #202124;
|
|
height: 26px;
|
|
/* margin: 0 12px; */
|
|
/* padding: 0; */
|
|
}
|
|
|
|
.desktop-header input {
|
|
margin: 2px 4px 2px 8px;
|
|
}
|
|
|
|
a.header-tab-a:visited {
|
|
color: #70757a;
|
|
}
|
|
|
|
.header-tab-div-end {
|
|
border-left: 1px solid rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.adv-search {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.adv-search:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#adv-search-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.result-collapsible {
|
|
max-height: 0px;
|
|
overflow: hidden;
|
|
transition: max-height .25s linear;
|
|
}
|
|
|
|
.search-bar-input {
|
|
display: block;
|
|
font-size: 16px;
|
|
padding: 0 0 0 8px;
|
|
flex: 1;
|
|
height: 35px;
|
|
outline: none;
|
|
border: none;
|
|
width: 100%;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#result-country {
|
|
max-width: 200px;
|
|
}
|
|
|
|
@media (max-width: 801px) {
|
|
.header-tab-div {
|
|
margin-bottom: 10px !important
|
|
}
|
|
}
|