tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve form layout and styling

Browse Source
This commit is contained in:
Arthur Lu 2022-12-20 17:02:33 -08:00
parent 41d8b240ab
commit 9754351e22
3 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.html
View File

@ -15,6 +15,8 @@
<legend>Change Configuration</legend> <legend>Change Configuration</legend>
<div class="labels-inputs" id="user-configurable"> <div class="labels-inputs" id="user-configurable">
</div> </div>
</fieldset>
<fieldset>
<div class="btn-group" id="form-actions"> <div class="btn-group" id="form-actions">
<button id="cancel" type="button">CANCEL</button> <button id="cancel" type="button">CANCEL</button>
<button id="submit" type="button">SUBMIT</button> <button id="submit" type="button">SUBMIT</button>

17
css/form.css
View File

@ -3,10 +3,21 @@
justify-content: center; justify-content: center;
} }
form > :first-child {
border: solid white 1px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
form > :last-child {
border: solid white 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
fieldset { fieldset {
border: solid white 1px; border: solid white 1px;
border-radius: 5px; padding: 10px;
width: fit-content;
} }
input, label, legend { input, label, legend {
@ -21,7 +32,7 @@ input {
} }
button { button {
margin-top: 10px; margin-top: 0px;
} }
.labels-inputs { .labels-inputs {

4
login.html
View File

@ -19,12 +19,14 @@
<label for="username">Password:</label> <label for="username">Password:</label>
<input type="password" id="password" name="password"> <input type="password" id="password" name="password">
</div> </div>
</fieldset>
<fieldset>
<div class="btn-group"> <div class="btn-group">
<button id="submit">LOGIN</button> <button id="submit">LOGIN</button>
</div> </div>
</fieldset> </fieldset>
<p id="status"></p>
</form> </form>
<p id="status"></p>
</div> </div>
</body> </body>
</html> </html>