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

View file

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