diff --git a/public/jason-leem-50bzI1F6urA-unsplash.jpg b/public/jason-leem-50bzI1F6urA-unsplash.jpg
new file mode 100644
index 0000000..b30d3bf
Binary files /dev/null and b/public/jason-leem-50bzI1F6urA-unsplash.jpg differ
diff --git a/src/App.svelte b/src/App.svelte
index eb4de9a..eec2a27 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -43,6 +43,10 @@
🍉 Admin Panel
+ {#each sidebarOptions as item (item.name)}
+
+ {/each}
+
@@ -70,11 +74,6 @@
{#if $loginStore == null}
Please login to continue
{:else}
-
@@ -155,22 +154,8 @@
line-height: 24px;
padding: 8px;
border-radius: 0.375rem;
- }
- }
- main {
- display: flex;
- flex-grow: 1;
- align-items: stretch;
- height: 0;
-
- #sidebar {
- width: 150px;
- min-width: 150px;
-
- button {
- background-color: #2c2c2c;
- border: none;
+ &.header-tab {
box-shadow: none;
box-sizing: border-box;
color: tomato;
@@ -178,8 +163,6 @@
font-size: 20px;
font-weight: 700;
line-height: 24px;
- width: 100%;
- height: 70px;
&:hover {
background-color: #1c1c1c;
@@ -190,6 +173,13 @@
}
}
}
+ }
+
+ main {
+ display: flex;
+ flex-grow: 1;
+ align-items: stretch;
+ height: 0;
#login-view {
padding: 16px;
@@ -205,7 +195,7 @@
footer {
padding: 8px;
- background-color: #2c2c2c;
+ background-color: #2c2c2c55;
box-shadow:
0 -4px 8px #0003,
0 -6px 20px #00000030;
diff --git a/src/app.scss b/src/app.scss
index acfdb72..06c34d4 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -23,6 +23,11 @@ $theme-bg: #242424;
-webkit-text-size-adjust: 100%;
}
+body {
+ background-image: url('jason-leem-50bzI1F6urA-unsplash.jpg');
+ background-position: center;
+}
+
@font-face {
font-family: 'Ubuntu';
font-style: normal;
@@ -45,6 +50,9 @@ $theme-bg: #242424;
display: flex;
flex-direction: column;
align-content: stretch;
+
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
}
a {
@@ -99,7 +107,7 @@ table.main-table {
width: 100%;
thead {
- background-color: #333333;
+ background-color: #33333355;
position: sticky;
top: 0;
z-index: 9999;
@@ -113,20 +121,20 @@ table.main-table {
}
tr:nth-child(2n) {
- background-color: #2a2a2a;
+ background-color: #2a2a2a55;
}
tr:nth-child(2n + 1) {
- background-color: #242424;
+ background-color: #24242455;
}
.invert-rows {
tr:nth-child(2n) {
- background-color: #242424;
+ background-color: #24242455;
}
tr:nth-child(2n + 1) {
- background-color: #2a2a2a;
+ background-color: #2a2a2a55;
}
}
}
@@ -134,9 +142,14 @@ table.main-table {
.wrapper {
display: flex;
flex-direction: column;
- width: 100%;
- height: 100%;
overflow: hidden;
+ margin: 2em;
+
+ backdrop-filter: blur(16px) saturate(180%);
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
+ background-color: rgba(17, 25, 40, 0.75);
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.125);
.scrolling-area {
overflow: auto;
@@ -150,7 +163,7 @@ table.main-table {
.footer {
height: 50px;
- background-color: #2c2c2c;
+ background-color: #2c2c2c55;
box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
display: flex;
flex-direction: row;
diff --git a/src/components/RedirectCreator.svelte b/src/components/RedirectCreator.svelte
index dabfda7..15892fa 100644
--- a/src/components/RedirectCreator.svelte
+++ b/src/components/RedirectCreator.svelte
@@ -31,11 +31,11 @@
diff --git a/src/views/GeneralView.svelte b/src/views/GeneralView.svelte
index acdac2b..b34ae9b 100644
--- a/src/views/GeneralView.svelte
+++ b/src/views/GeneralView.svelte
@@ -1,9 +1,11 @@
-Warning: This is currently still under development
+
+
Warning: This is currently still under development
-