1f349/admin.1f349.com
1
0
Fork 0
mirror of https://github.com/1f349/admin.1f349.com.git synced 2024-09-19 02:16:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Start rewriting with glass effect

Browse Source
This commit is contained in:
Melon 2024-03-24 16:20:22 +00:00
parent 32b02a155d
commit ce1358f39a
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
9 changed files with 59 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/jason-leem-50bzI1F6urA-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 MiB

36
src/App.svelte
View File

@ -43,6 +43,10 @@
<h1>🍉 Admin Panel</h1>
</div>
<div class="flex-gap" />
{#each sidebarOptions as item (item.name)}
<button class="header-tab" on:click={() => (sidebarSelection = item)} class:selected={item == sidebarSelection}>{item.name}</button>
{/each}
<div class="flex-gap" />
<div class="nav-link">
<a href="https://status.1f349.com" target="_blank">Status</a>
</div>
@ -70,11 +74,6 @@
{#if $loginStore == null}
<div id="login-view">Please login to continue</div>
{:else}
<div id="sidebar">
{#each sidebarOptions as item (item.name)}
<button class="sidebar-item" on:click={() => (sidebarSelection = item)} class:selected={item == sidebarSelection}>{item.name}</button>
{/each}
</div>
<div id="option-view">
<svelte:component this={sidebarSelection.view} />
</div>
@ -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;

29
src/app.scss
View File

@ -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;

4
src/components/RedirectCreator.svelte
View File

@ -31,11 +31,11 @@
<style lang="scss">
tr:nth-child(2n) {
background-color: #2a2a2a;
background-color: #2a2a2a55;
}
tr:nth-child(2n + 1) {
background-color: #242424;
background-color: #24242455;
}
tr.created {

12
src/components/RedirectRow.svelte
View File

@ -48,26 +48,26 @@
<style lang="scss">
tr.created {
background-color: #1a5100;
background-color: #1a510077;
&:nth-child(2n) {
background-color: #103300;
background-color: #10330077;
}
}
tr.modified {
background-color: #515100;
background-color: #51510077;
&:nth-child(2n) {
background-color: #333300;
background-color: #33330077;
}
}
tr.deleted {
background-color: #510000;
background-color: #51000077;
&:nth-child(2n) {
background-color: #330000;
background-color: #33000077;
}
}

4
src/components/RouteCreator.svelte
View File

@ -29,11 +29,11 @@
<style lang="scss">
tr:nth-child(2n) {
background-color: #2a2a2a;
background-color: #2a2a2a55;
}
tr:nth-child(2n + 1) {
background-color: #242424;
background-color: #24242455;
}
tr.created {

12
src/components/RouteRow.svelte
View File

@ -45,26 +45,26 @@
<style lang="scss">
tr.created {
background-color: #1a5100;
background-color: #1a510077;
&:nth-child(2n) {
background-color: #103300;
background-color: #10330077;
}
}
tr.modified {
background-color: #515100;
background-color: #51510077;
&:nth-child(2n) {
background-color: #333300;
background-color: #33330077;
}
}
tr.deleted {
background-color: #510000;
background-color: #51000077;
&:nth-child(2n) {
background-color: #330000;
background-color: #33000077;
}
}

4
src/views/CertificatesView.svelte
View File

@ -104,11 +104,11 @@
// css please explain yourself
tr.cert-error.cert-error {
&:nth-child(2n + 1) {
background-color: #510000;
background-color: #51000055;
}
&:nth-child(2n) {
background-color: #330000;
background-color: #33000055;
}
}
</style>

12
src/views/GeneralView.svelte
View File

@ -1,9 +1,11 @@
<div style="padding:8px;background-color:#bb7900;">Warning: This is currently still under development</div>
<div class="wrapper">
<div style="padding:8px;background-color:#bb7900;">Warning: This is currently still under development</div>
<div class="button-wrapper">
<div><a class="btn-green" href="https://uptime-kuma.1f349.com" target="_blank">Status Dashboard</a></div>
<div><a class="btn-green" href="https://sso.1f349.com" target="_blank">SSO Dashboard</a></div>
<div><a class="btn-green" href="https://grafana.1f349.com" target="_blank">Grafana</a></div>
<div class="button-wrapper">
<div><a class="btn-green" href="https://uptime-kuma.1f349.com" target="_blank">Status Dashboard</a></div>
<div><a class="btn-green" href="https://sso.1f349.com" target="_blank">SSO Dashboard</a></div>
<div><a class="btn-green" href="https://grafana.1f349.com" target="_blank">Grafana</a></div>
</div>
</div>
<style lang="scss">