mirror of
https://github.com/ivabus/www
synced 2024-11-10 12:15:15 +03:00
styling for <input>
This commit is contained in:
parent
df3f9fcfd4
commit
6117aa677c
|
@ -4,17 +4,30 @@
|
||||||
|
|
||||||
<!-- Package Grid Header -->
|
<!-- Package Grid Header -->
|
||||||
<hr>
|
<hr>
|
||||||
<div class="container package-grid-header">
|
<div class="container package-grid-header two-boxes">
|
||||||
<section class="flex flex-column flex-md-row">
|
<section class="flex flex-column flex-md-row">
|
||||||
<h3>packages</h3>
|
<h3>packages</h3>
|
||||||
<div id="searchBar" class="flex flex-column flex-md-row">
|
|
||||||
<input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
|
|
||||||
{{- partial "sort-dropdown.html" -}}
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
|
<p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="button-container">
|
||||||
|
<div id="searchBar">
|
||||||
|
<div style="display:flex; align-items:center;">
|
||||||
|
<div class="icon">
|
||||||
|
<i class="icon-search-icon"></i>
|
||||||
|
</div>
|
||||||
|
<input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
|
||||||
|
</div>
|
||||||
|
{{- partial "sort-dropdown.html" -}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
<div class="package-grid">
|
<div class="package-grid">
|
||||||
|
|
||||||
<!-- Start Package Grid -->
|
<!-- Start Package Grid -->
|
||||||
|
@ -93,24 +106,40 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-search-icon{
|
||||||
|
font-size: 30px;
|
||||||
|
color: #949494;
|
||||||
|
margin-right: 20px;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
#searchBar {
|
#searchBar {
|
||||||
|
padding: 0px;
|
||||||
|
height: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
#searchBar .sorting-container {
|
#searchBar .sorting-container {
|
||||||
min-width: 260px;
|
min-width: 260px;
|
||||||
}
|
}
|
||||||
#searchBar input {
|
#searchBar input {
|
||||||
min-width: 260px;
|
font-size: 32px;
|
||||||
height: 60px;
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
padding: 5px 10px;
|
color:#00ffd0;
|
||||||
|
text-transform:uppercase;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
min-width: 60%;
|
||||||
|
padding: 0px;
|
||||||
background-color: #1a1a1a !important;
|
background-color: #1a1a1a !important;
|
||||||
color: #949494;
|
border: none;
|
||||||
|
color: #00ffd0;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: 2px solid #949494;
|
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
}
|
}
|
||||||
#searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
#searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||||
color: white;
|
color: #949494;
|
||||||
opacity: 1; /* Firefox */
|
opacity: 1; /* Firefox */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue