134 lines
2.2 KiB
CSS
134 lines
2.2 KiB
CSS
/*General*/
|
|
* {
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
body {
|
|
text-align:center;
|
|
font:16px sans-serif;
|
|
color:white;
|
|
background-color:#141414;
|
|
background-size:cover;
|
|
background-repeat:no-repeat;
|
|
background-attachment:fixed;
|
|
}
|
|
|
|
h1{
|
|
text-align:center;
|
|
font-size:30px;
|
|
font-family:monospace;
|
|
}
|
|
|
|
.h{padding:10% 0 0 0;}
|
|
|
|
|
|
/*Header*/
|
|
#header a,#sub a{color:white;}
|
|
|
|
|
|
/*Input*/
|
|
div.form{width:100%;}
|
|
|
|
input[type=text],input[type=url]{
|
|
width:60%;
|
|
font-size:16px;
|
|
padding:12px 20px;
|
|
margin:8px 0;
|
|
border:1px solid #ccc;
|
|
border-radius:4px;
|
|
box-sizing:border-box;
|
|
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.1);
|
|
}
|
|
|
|
input[type=submit],.btn{
|
|
width:25%;
|
|
font-size:16px;
|
|
padding:12px 20px;
|
|
margin:8px 0;
|
|
border:1px solid #ccc;
|
|
border-radius:4px;
|
|
box-sizing:border-box;
|
|
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.1);
|
|
color:#fff;
|
|
opacity:0.75;
|
|
background-color:rgb(205,0,205);
|
|
}
|
|
|
|
input[type=submit]:hover{
|
|
background-color:rgb(255,0,255);
|
|
}
|
|
|
|
input[type=text] {
|
|
background-color:#f1f1f1;
|
|
}
|
|
|
|
input[type=submit],.btn {
|
|
background-color:DodgerBlue;
|
|
color:#fff;
|
|
cursor:pointer;
|
|
}
|
|
|
|
/*the container must be positioned relative:*/
|
|
.autocomplete {
|
|
position: relative;
|
|
|
|
}
|
|
|
|
input {
|
|
border: 1px solid transparent;
|
|
background-color: #f1f1f1;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
/*Autocomplete*/
|
|
.autocomplete-items {
|
|
position: absolute;
|
|
border: 1px solid #d4d4d4;
|
|
border-bottom: none;
|
|
border-top: none;
|
|
z-index: 99;
|
|
/*position the autocomplete items to be the same width as the container:*/
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.autocomplete-items div {
|
|
text-align: initial;
|
|
color: #000;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #d4d4d4;
|
|
}
|
|
|
|
#container{width:90%;margin:auto;}
|
|
#content{width:100%;margin:auto;}
|
|
|
|
/*when hovering an item:*/
|
|
.autocomplete-items div:hover {
|
|
background-color: #e9e9e9;
|
|
}
|
|
|
|
/*when navigating through the items using the arrow keys:*/
|
|
.autocomplete-active {
|
|
background-color: DodgerBlue !important;
|
|
color: #ffffff;
|
|
}
|
|
|
|
|
|
/*Query*/
|
|
div.item{
|
|
text-align:initial;
|
|
color:black;
|
|
background-color:white;
|
|
opacity:0.9;
|
|
border-radius:10px;
|
|
border:1px solid #ccc;
|
|
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.1);
|
|
padding:20px 30px;
|
|
margin:8px 0;
|
|
}
|