admin page css
This commit is contained in:
parent
6ba51230c0
commit
c839fafe8a
2 changed files with 24 additions and 15 deletions
|
@ -22,10 +22,12 @@
|
||||||
<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">
|
||||||
<button class="submit" onclick="submit()">Submit</button>
|
<div id="buttons">
|
||||||
<button class="view" onclick="posts()">View Posts</button>
|
<button class="submit" onclick="submit()">Submit</button>
|
||||||
<button class="view" onclick="users()">View Users</button>
|
<button class="view" onclick="posts()">View Posts</button>
|
||||||
<button class="view" onclick="sessions()">View Sessions</button>
|
<button class="view" onclick="users()">View Users</button>
|
||||||
|
<button class="view" onclick="sessions()">View Sessions</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table id="table"></table>
|
<table id="table"></table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue