admin page css

This commit is contained in:
Tyler Murphy 2023-01-30 15:37:16 -05:00
parent 6ba51230c0
commit c839fafe8a
2 changed files with 24 additions and 15 deletions

View file

@ -22,10 +22,12 @@
<div id="admin" class="hidden">
<div id="queryinput">
<input type="text" name="query" id="query" placeholder="SQL Query">
<button class="submit" onclick="submit()">Submit</button>
<button class="view" onclick="posts()">View Posts</button>
<button class="view" onclick="users()">View Users</button>
<button class="view" onclick="sessions()">View Sessions</button>
<div id="buttons">
<button class="submit" onclick="submit()">Submit</button>
<button class="view" onclick="posts()">View Posts</button>
<button class="view" onclick="users()">View Users</button>
<button class="view" onclick="sessions()">View Sessions</button>
</div>
</div>
<table id="table"></table>
</div>

View file

@ -2,6 +2,7 @@ body {
margin: 0;
padding: 0;
background-color: #181818;
overflow-x: hidden;
}
#header {
@ -12,9 +13,11 @@ body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
flex-direction: column;
margin: 0;
padding: 0;
}
#error .logo {
@ -39,20 +42,24 @@ input:focus {
#admin {
margin: 1.75em;
margin-top: 5em;
width: calc(100vw - 1.75em * 2);
height: calc(100vh - 5em - 1.75em);
width: calc(100% - 1.75em * 2);
height: calc(100% - 5em - 1.75em);
display: flex;
flex-direction: column;
}
#queryinput {
display: flexbox;
width: 100%;
display: flex;
width: calc(100% - 2em);
justify-content: space-between;
flex-direction: row;
margin: 1em;
}
#queryinput #query {
width: 50em;
margin: 0;
flex: 10;
}
form {
@ -62,7 +69,7 @@ form {
align-content: center;
}
#queryinput .submit, .view {
#buttons .submit, .view {
all: unset;
font-family: sfpro;
margin: 0;
@ -75,22 +82,22 @@ form {
border: 1px solid #606770;
}
#queryinput .submit:active {
#buttons .submit:active {
background-color: #30ab5a;
}
#queryinput .view {
#buttons .view {
background-color: #242424;
color: #707882;
border: 1px solid #606770;
}
#queryinput .view:active {
#buttons .view:active {
background-color: #181818;
}
table {
margin-top: 3em;
margin: 1em 0em;
border-collapse: separate;
border-spacing: 15px;
table-layout: fixed;