feat(styles): make header css component

This commit is contained in:
Kaname 2022-09-10 01:13:44 +00:00
parent 341cde2781
commit 56f24fe317
5 changed files with 7 additions and 10 deletions

View File

@ -191,7 +191,7 @@
</script>
<nav
class="flex flex-row px-3 justify-center lg:justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-16"
class="header"
>
<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
<div class="flex flex-col">

View File

@ -150,9 +150,7 @@
</script>
{#if id !== 'new'}
<nav
class="flex flex-row px-3 justify-center lg:justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-16"
>
<nav class="header">
<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
<div class="flex flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">

View File

@ -276,7 +276,7 @@
</script>
<nav
class="header" style="backdrop-filter: blur(20px);"
class="header p-5"
>
<h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1>
{#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)}

View File

@ -69,7 +69,7 @@
} from '$lib/store';
import { onDestroy, onMount } from 'svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
import ServiceLinks from './_ServiceLinks.svelte';
import ServiceLinks from './_ServiceLinks.svelte';
const { id } = $page.params;
export let service: any;
@ -156,9 +156,7 @@ import ServiceLinks from './_ServiceLinks.svelte';
});
</script>
<nav
class="flex flex-row px-3 justify-center lg:justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-16"
>
<nav class="header">
<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
<div class="flex flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">

View File

@ -202,6 +202,7 @@ input {
}
.header {
@apply flex flex-row px-4 justify-between items-center lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5;
@apply flex flex-row px-4 justify-between items-center lg:fixed w-full z-10;
background-color: rgba(31, 30, 30, 0.6);
backdrop-filter: blur(20px);
}