Theme Inputs and Buttons. Change font and background
This commit is contained in:
parent
2105b4d1b0
commit
9b05dd44b6
|
@ -1,23 +1,63 @@
|
||||||
* {
|
* {
|
||||||
font-family: 'Roboto', sans-serif;
|
padding:0px;
|
||||||
|
margin:0px;
|
||||||
|
|
||||||
}
|
}
|
||||||
header{
|
header{
|
||||||
padding: 50px;
|
|
||||||
|
|
||||||
|
padding-top: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 30px;
|
||||||
|
color: white;
|
||||||
|
|
||||||
}
|
}
|
||||||
body{
|
body{
|
||||||
background-image: url("https://images.unsplash.com/photo-1528459584353-5297db1a9c01?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1075&q=80");
|
background:url("https://images.unsplash.com/photo-1485579149621-3123dd979885?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
margin:10px 10px;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=text]{
|
input[type=text]{
|
||||||
width:40%;
|
width:43%;
|
||||||
|
background: white;
|
||||||
border:2px solid #aaa;
|
border:2px solid #aaa;
|
||||||
border-radius:4px;
|
border-radius:20px;
|
||||||
margin:8px 0;
|
margin:8px 0;
|
||||||
outline:none;
|
outline:none;
|
||||||
padding:8px;
|
padding:8px;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
transition:.3s;
|
transition:.3s;
|
||||||
}
|
}
|
||||||
|
.change{
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type=submit]{
|
||||||
|
border: 1px solid #000000;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size:20px ;
|
||||||
|
font-family: "montserrat";
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 10px;
|
||||||
|
color: #000000;
|
||||||
|
transition: 0.8s;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
button[type=submit]:hover{
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
|
||||||
input[type=text]:focus{
|
input[type=text]:focus{
|
||||||
border-color: dodgerBlue;
|
border-color: dodgerBlue;
|
||||||
|
|
|
@ -6,17 +6,21 @@
|
||||||
<title>Mock Car API Admin</title>
|
<title>Mock Car API Admin</title>
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css">
|
<link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Mock Data API</h1>
|
<h1>Mock Data API</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="change">
|
<div class="change">
|
||||||
<input class="input-box" type="text" name="key" id="key" placeholder="Key">
|
<input class="input-box" type="text" name="key" id="key" placeholder="Key">
|
||||||
<input class="input-box" type="text" name="value" id="value" placeholder="Valid JSON values">
|
<input class="input-box" type="text" name="value" id="value" placeholder="Valid JSON values">
|
||||||
</div>
|
</div>
|
||||||
<div class='button-dec'>
|
<div class='container'>
|
||||||
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
|
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="table-dec">
|
<div class="table-dec">
|
||||||
|
|
Loading…
Reference in New Issue