theming
This commit is contained in:
parent
0752bf129e
commit
95bc2dfabc
12
src/app.css
12
src/app.css
@ -5,9 +5,9 @@
|
||||
|
||||
[data-theme='light'] {
|
||||
--text-color: #000000;
|
||||
--bg-color: #f4f4f4;
|
||||
--hover-bg-color: #e4e4f0;
|
||||
--separator-line-color: #e0e0e0;
|
||||
--bg-color: #e9e9e9;
|
||||
--hover-bg-color: #e0e0e0;
|
||||
--separator-line-color: #d0d0d0;
|
||||
--low-emphasis-text-color: #6b6b6b;
|
||||
--primary-color: #1F96F3;
|
||||
--dull-primary-color: #51aaf0;
|
||||
@ -15,6 +15,7 @@
|
||||
--bg-accent-color: #f4f4f4;
|
||||
--danger-color: #ff2d2f;
|
||||
--hyperlink-color: #3b82f6;
|
||||
--nav-bg-color: #f0f0f0;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
@ -29,6 +30,7 @@
|
||||
--bg-accent-color: #202020;
|
||||
--danger-color: #ff1d1f;
|
||||
--hyperlink-color: #3b82f6;
|
||||
--nav-bg-color: #101011;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -230,6 +232,10 @@ th.left, td.left {
|
||||
background-color: var(--elevated-bg-color);
|
||||
}
|
||||
|
||||
.nav-bg {
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
.primary-bg-color {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
@ -52,98 +52,100 @@
|
||||
/>
|
||||
|
||||
<div class="flex min-h-screen flex-col">
|
||||
<div class="bottom-border bg-color sticky top-0 z-50 flex h-14 justify-between p-3 align-middle">
|
||||
<nav class="pt-1">
|
||||
<a class="hover-bg-color mr-1 rounded-md px-2 pb-2 pt-1.5" href="/">
|
||||
<img
|
||||
alt="MarinoDev Logo"
|
||||
class="inline-block"
|
||||
height="24"
|
||||
src="/mdevtriangle.svg"
|
||||
width="24"
|
||||
/>
|
||||
<!-- <div class="inline-block text-sm">Home</div>-->
|
||||
</a>
|
||||
<!-- <a href="/about" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">About</a>-->
|
||||
{#if largeScreen.current}
|
||||
{#if (userState.perms & PERMISSIONS.VIEW) > 0}
|
||||
<a href="/postings" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Postings</a>
|
||||
<a href="/companies" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Companies</a>
|
||||
{/if}
|
||||
{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
|
||||
<a
|
||||
href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
|
||||
? '/admin/postings'
|
||||
: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
|
||||
? '/admin/users'
|
||||
: // TODO: Implement tags
|
||||
// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
|
||||
// ? '/admin/tags'
|
||||
(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
|
||||
? '/admin/companies'
|
||||
: '/admin'}
|
||||
class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Administration</a
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</nav>
|
||||
<div>
|
||||
<button
|
||||
class="material-symbols-outlined hover-bg-color rounded-full p-1"
|
||||
onclick={toggleTheme}
|
||||
>
|
||||
{currentTheme === 'light' ? 'light_mode' : 'dark_mode'}
|
||||
</button>
|
||||
{#if largeScreen.current}
|
||||
<a
|
||||
class="hover-bg-color inline-block h-min rounded p-1 pr-2 align-top"
|
||||
href={userState.id !== null ? '/account' : '/signin'}
|
||||
>
|
||||
<span class="material-symbols-outlined inline-block h-min align-top">
|
||||
{userState.id !== null ? 'account_circle' : 'login'}
|
||||
</span>
|
||||
<span class="inline-block h-min align-top text-sm">
|
||||
{userState.id !== null ? 'Account' : 'Sign-in'}
|
||||
</span>
|
||||
<nav class="bottom-border nav-bg sticky top-0 z-50 align-middle">
|
||||
<div class="flex h-14 justify-between p-3">
|
||||
<div class="pt-1">
|
||||
<a class="hover-bg-color mr-1 rounded-md px-2 pb-2 pt-1.5" href="/">
|
||||
<img
|
||||
alt="MarinoDev Logo"
|
||||
class="inline-block"
|
||||
height="24"
|
||||
src="/mdevtriangle.svg"
|
||||
width="24"
|
||||
/>
|
||||
<!-- <div class="inline-block text-sm">Home</div>-->
|
||||
</a>
|
||||
{:else}
|
||||
<!-- <a href="/about" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">About</a>-->
|
||||
{#if largeScreen.current}
|
||||
{#if (userState.perms & PERMISSIONS.VIEW) > 0}
|
||||
<a href="/postings" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Postings</a>
|
||||
<a href="/companies" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Companies</a>
|
||||
{/if}
|
||||
{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
|
||||
<a
|
||||
href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
|
||||
? '/admin/postings'
|
||||
: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
|
||||
? '/admin/users'
|
||||
: // TODO: Implement tags
|
||||
// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
|
||||
// ? '/admin/tags'
|
||||
(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
|
||||
? '/admin/companies'
|
||||
: '/admin'}
|
||||
class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Administration</a
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="material-symbols-outlined hover-bg-color rounded-full p-1"
|
||||
onclick={toggleMenu}>menu</button
|
||||
onclick={toggleTheme}
|
||||
>
|
||||
{currentTheme === 'light' ? 'light_mode' : 'dark_mode'}
|
||||
</button>
|
||||
{#if largeScreen.current}
|
||||
<a
|
||||
class="hover-bg-color inline-block h-min rounded p-1 pr-2 align-top"
|
||||
href={userState.id !== null ? '/account' : '/signin'}
|
||||
>
|
||||
<span class="material-symbols-outlined inline-block h-min align-top">
|
||||
{userState.id !== null ? 'account_circle' : 'login'}
|
||||
</span>
|
||||
<span class="inline-block h-min align-top text-sm">
|
||||
{userState.id !== null ? 'Account' : 'Sign-in'}
|
||||
</span>
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
class="material-symbols-outlined hover-bg-color rounded-full p-1"
|
||||
onclick={toggleMenu}>menu</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden">
|
||||
{#if (userState.perms & PERMISSIONS.VIEW) > 0}
|
||||
<a
|
||||
href="/postings"
|
||||
class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
|
||||
onclick={toggleMenu}>Postings</a
|
||||
>
|
||||
<a
|
||||
href="/companies"
|
||||
class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
|
||||
onclick={toggleMenu}>Companies</a
|
||||
>
|
||||
{/if}
|
||||
{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
|
||||
<a
|
||||
href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
|
||||
? '/admin/postings'
|
||||
: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
|
||||
? '/admin/users'
|
||||
: // TODO: Implement tags
|
||||
// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
|
||||
// ? '/admin/tags'
|
||||
(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
|
||||
? '/admin/companies'
|
||||
: '/admin'}
|
||||
class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
|
||||
onclick={toggleMenu}>Administration</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden">
|
||||
{#if (userState.perms & PERMISSIONS.VIEW) > 0}
|
||||
<a
|
||||
href="/postings"
|
||||
class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
|
||||
onclick={toggleMenu}>Postings</a
|
||||
>
|
||||
<a
|
||||
href="/companies"
|
||||
class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
|
||||
onclick={toggleMenu}>Companies</a
|
||||
>
|
||||
{/if}
|
||||
{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
|
||||
<a
|
||||
href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
|
||||
? '/admin/postings'
|
||||
: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
|
||||
? '/admin/users'
|
||||
: // TODO: Implement tags
|
||||
// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
|
||||
// ? '/admin/tags'
|
||||
(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
|
||||
? '/admin/companies'
|
||||
: '/admin'}
|
||||
class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
|
||||
onclick={toggleMenu}>Administration</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex-grow">
|
||||
{@render children()}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user