1f349/admin.1f349.com
4
0
Fork 0
mirror of https://github.com/1f349/admin.1f349.com.git synced 2025-02-22 21:44:57 +00: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> <h1>🍉 Admin Panel</h1>
</div> </div>
<div class="flex-gap" /> <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"> <div class="nav-link">
<a href="https://status.1f349.com" target="_blank">Status</a> <a href="https://status.1f349.com" target="_blank">Status</a>
</div> </div>
@ -70,11 +74,6 @@
{#if $loginStore == null} {#if $loginStore == null}
<div id="login-view">Please login to continue</div> <div id="login-view">Please login to continue</div>
{:else} {: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"> <div id="option-view">
<svelte:component this={sidebarSelection.view} /> <svelte:component this={sidebarSelection.view} />
</div> </div>
@ -155,22 +154,8 @@
line-height: 24px; line-height: 24px;
padding: 8px; padding: 8px;
border-radius: 0.375rem; border-radius: 0.375rem;
}
}
main { &.header-tab {
display: flex;
flex-grow: 1;
align-items: stretch;
height: 0;
#sidebar {
width: 150px;
min-width: 150px;
button {
background-color: #2c2c2c;
border: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;
color: tomato; color: tomato;
@ -178,8 +163,6 @@
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
width: 100%;
height: 70px;
&:hover { &:hover {
background-color: #1c1c1c; background-color: #1c1c1c;
@ -190,6 +173,13 @@
} }
} }
} }
}
main {
display: flex;
flex-grow: 1;
align-items: stretch;
height: 0;
#login-view { #login-view {
padding: 16px; padding: 16px;
@ -205,7 +195,7 @@
footer { footer {
padding: 8px; padding: 8px;
background-color: #2c2c2c; background-color: #2c2c2c55;
box-shadow: box-shadow:
0 -4px 8px #0003, 0 -4px 8px #0003,
0 -6px 20px #00000030; 0 -6px 20px #00000030;

29
src/app.scss
View File

@ -23,6 +23,11 @@ $theme-bg: #242424;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
body {
background-image: url('jason-leem-50bzI1F6urA-unsplash.jpg');
background-position: center;
}
@font-face { @font-face {
font-family: 'Ubuntu'; font-family: 'Ubuntu';
font-style: normal; font-style: normal;
@ -45,6 +50,9 @@ $theme-bg: #242424;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: stretch; align-content: stretch;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
} }
a { a {
@ -99,7 +107,7 @@ table.main-table {
width: 100%; width: 100%;
thead { thead {
background-color: #333333; background-color: #33333355;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 9999; z-index: 9999;
@ -113,20 +121,20 @@ table.main-table {
} }
tr:nth-child(2n) { tr:nth-child(2n) {
background-color: #2a2a2a; background-color: #2a2a2a55;
} }
tr:nth-child(2n + 1) { tr:nth-child(2n + 1) {
background-color: #242424; background-color: #24242455;
} }
.invert-rows { .invert-rows {
tr:nth-child(2n) { tr:nth-child(2n) {
background-color: #242424; background-color: #24242455;
} }
tr:nth-child(2n + 1) { tr:nth-child(2n + 1) {
background-color: #2a2a2a; background-color: #2a2a2a55;
} }
} }
} }
@ -134,9 +142,14 @@ table.main-table {
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden; 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 { .scrolling-area {
overflow: auto; overflow: auto;
@ -150,7 +163,7 @@ table.main-table {
.footer { .footer {
height: 50px; height: 50px;
background-color: #2c2c2c; background-color: #2c2c2c55;
box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030; box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

4
src/components/RedirectCreator.svelte
View File

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

12
src/components/RedirectRow.svelte
View File

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

4
src/components/RouteCreator.svelte
View File

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

12
src/components/RouteRow.svelte
View File

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

4
src/views/CertificatesView.svelte
View File

@ -104,11 +104,11 @@
// css please explain yourself // css please explain yourself
tr.cert-error.cert-error { tr.cert-error.cert-error {
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
background-color: #510000; background-color: #51000055;
} }
&:nth-child(2n) { &:nth-child(2n) {
background-color: #330000; background-color: #33000055;
} }
} }
</style> </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 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://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://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><a class="btn-green" href="https://grafana.1f349.com" target="_blank">Grafana</a></div>
</div>
</div> </div>
<style lang="scss"> <style lang="scss">