mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-25 02:57:30 +00:00
Add some dubious style
This commit is contained in:
parent
5ba23eb71e
commit
7671a0fb45
2 changed files with 45 additions and 8 deletions
52
src/App.css
52
src/App.css
|
|
@ -1,30 +1,66 @@
|
|||
/* Coolors Exported Palette - coolors.co/ed4b6c-f7b54c-06d6a0-4c84b2-684b3a
|
||||
|
||||
HSL
|
||||
$color1: hsla(348%, 82%, 61%, 1);
|
||||
$color2: hsla(37%, 91%, 63%, 1);
|
||||
$color3: hsla(164%, 95%, 43%, 1);
|
||||
$color4: hsla(207%, 40%, 50%, 1);
|
||||
$color5: hsla(22%, 28%, 32%, 1);
|
||||
|
||||
RGB
|
||||
$color1: rgba(237, 75, 108, 1);
|
||||
$color2: rgba(247, 181, 76, 1);
|
||||
$color3: rgba(6, 214, 160, 1);
|
||||
$color4: rgba(76, 132, 178, 1);
|
||||
$color5: rgba(104, 75, 58, 1);
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: grey;
|
||||
background-color: rgba(59, 83, 90, 0.9);
|
||||
}
|
||||
|
||||
#search {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: black;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
height: 50px; /* This matches the margin-top for #infinite-skins */
|
||||
background: #4c84b2;
|
||||
text-align: left;
|
||||
height: 40px; /* This matches the margin-top for #infinite-skins */
|
||||
z-index: 5;
|
||||
padding: 10px 0;
|
||||
/* A little shadow below the search bar */
|
||||
-webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
|
||||
-moz-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#search h1 {
|
||||
margin: 0 20px 0 15px;
|
||||
}
|
||||
|
||||
#search input {
|
||||
margin-right: 25px;
|
||||
max-width: 400px;
|
||||
border: none;
|
||||
font-size: 40px;
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
border-width: 0.125rem;
|
||||
line-height: 1.15;
|
||||
height: 100%;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
border-radius: 9999px;
|
||||
outline: none;
|
||||
flex-grow: 1;
|
||||
color: rgba(59, 83, 90, 0.9);
|
||||
}
|
||||
|
||||
#infinite-skins {
|
||||
margin-top: 50px; /* This matches the height of #search */
|
||||
margin-top: 60px; /* This matches the height of #search */
|
||||
}
|
||||
|
||||
body.overlay-open {
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@ class App extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<div id="search">
|
||||
<h1>{"🌩️"}</h1>
|
||||
<input
|
||||
type="text"
|
||||
onChange={e => this.props.setSearchQuery(e.target.value)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue