the-glorious-startpage/css/search-engine-settings.css
Gerome Matilla 620f297f70
Code quality improvement(i guess) (#17)
* replace  divs with labels in dashboard textboxes

* convert weather settings block to form

* convert search engine block to form

* convert theme engine block to form

* dashboard buttons:replace onmouseup with .onclick()

* add hover event on buttons
2020-06-07 14:34:27 +08:00

121 lines
2.0 KiB
CSS

.searchEngine {
font-family: roboto, sans-serif;
width: 100%;
height: auto;
position: relative;;
border-radius: 6px;
color: var(--base-color);
background: var(--base-container);
margin-top: 10px;
}
#searchEnginePadding {
padding: 10px;
height: auto;
}
#searchEngineHeader {
height: 32px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: left;
}
#searchEngineHeaderIcon {
background: url('../assets/ui-icons/internet.svg');
background-size: cover;
margin-right: 10px;
width: 28px;
height: 28px;
}
#searchEngineHeaderLabel {
text-align: left;
font-weight: bold;
font-size: 14pt;
margin-top: auto;
margin-bottom: auto;
}
#searchEngineContainer {
margin-top: 5px;
}
#searchEngineSelect {
width: 100%;
height: 32px;
background: var(--base-container);
color: var(--base-color);
font-weight: normal;
font-style: 14pt;
border: none;
border-radius: 6px;
padding: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#searchEngineSelect:hover {
outline: none !important;
cursor: pointer;
background: var(--base-hover-bg) !important;
}
#searchEngineSelect:focus {
outline: none !important;
background: var(--base-focus-bg) !important;
}
#searchEngineSelect:active {
outline: none !important;
background: var(--base-active-bg) !important;
}
#searchEngineSelect option {
color: initial;
border: none;
}
select::-ms-expand {
display: none;
}
#searchEngineAsDefault {
background: var(--base-container);
color: var(--base-color);
text-align: center;
width: 100%;
height: 32px;
margin-top: 5px;
border-radius: 6px;
cursor: pointer;
border: none;
/*Center vertically*/
display: flex;
justify-content: center;
align-items: center;
}
#searchEngineAsDefault:hover {
background: var(--base-hover-bg);
}
#searchEngineAsDefault:active {
background: var(--base-active-bg);
}
#searchEngineAsDefault:focus {
background: var(--base-focus-bg);
}
@media screen and (max-width: 580px) {
.searchEngine {
width: 96vw;
box-sizing: border-box;
}
}