vikki-tools/dist/general/css/general_light.css

Libraries for https://tools.vikki.in

.searchbox {
    /*definint width of form element*/
    width: 100%;
    /*centering the form element*/
    margin: auto;
    text-align: center;

}

input[type="search"] {
    /*padding: 10px 15px 10px 50px; */
    padding: 15px 15px 15px 50px;
    font-size: 20px;
    columns: #333333;

    /*removing boder from search box*/
    border: none;
    /*defining background image as a search symbol*/
    background-image: url('https://cdn.jsdelivr.net/gh/vignesh88/cdn/django/tools/common/img/search.png');

    background-repeat: no-repeat;
    /*background-size*/
    -webkit-background-size: 35px 35px;
    -moz-background-size: 35px 35px;
    -o-background-size: 35px 35px;
    background-size: 25px 25px;
    /*positioning background image*/
    background-position: 8px 18px;
    /*changing background color form white*/
    background-color: whitesmoke;
    border: 0.5px solid white;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
}

/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
input[type="search"]::-webkit-input-placeholder {
    color: #333333;
}

input[type="search"]:-moz-placeholder {
    /* Firefox 18- */
    color: #333333;
}

input[type="search"]::-moz-placeholder {
    /* Firefox 19+ */
    color: #333333;
}

input[type="search"]:-ms-input-placeholder {
    /* interner explorer*/
    color: #333333;
}

/*adding effect when the mouse is hovered over list item*/
.searchbox ul li a {
    display: block;
    /*removing underlines from anchor element*/
    text-decoration: none;
    color: #333333;
    font-size: 15px;
    background-color: whitesmoke;
    padding: 8px;
    text-align: center;
}

ul {
    /*removing predefined bullet points from list*/
    list-style: none;
    /*removing padding from list items*/
    padding: 0;
    width: 250px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

ul li {
    margin-bottom: 8px;

}

/*adding effect when the mouse is hovered over list item*/
.searchbox ul li a:hover {
    color: #333333;
    background: ghostwhite;
}

/*moving it slightly toware right when hovered*/
.searchbox ul li:hover {
    /*transform*/
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

/*now first we will hide the suggestion list*/
.suggestions li {
    overflow: hidden;
    height: 0;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

/*and make the suggestion reappear when user focus on search field*/
input[type="search"]:focus+.suggestions li {
    height: 40px;

}

input[type=search]:focus {
    outline: 2px solid #026FE6;
    /* oranges! yey */
}

.byline {
    text-align: center;
    font-size: 18px;
}