design wip
This commit is contained in:
salam committed
1 parent
d5355800fe
commit
3a2b333a51
29 files changed
+717
-1579
No files matched your search
@@ -0,0 +1,107 @@
|
||||
<div>
|
||||
<script>
|
||||
window.filamentData = []
|
||||
</script>
|
||||
|
||||
<script src="http://nutzwerte_fi4.test/js/filament/actions/actions.js?v=4.0.8.0"></script>
|
||||
|
||||
|
||||
<script src="http://nutzwerte_fi4.test/js/filament/notifications/notifications.js?v=4.0.8.0"></script>
|
||||
|
||||
|
||||
<script src="http://nutzwerte_fi4.test/js/filament/schemas/schemas.js?v=4.0.8.0"></script>
|
||||
|
||||
|
||||
<script src="http://nutzwerte_fi4.test/js/filament/support/support.js?v=4.0.8.0"></script>
|
||||
|
||||
|
||||
<script src="http://nutzwerte_fi4.test/js/filament/tables/tables.js?v=4.0.8.0"></script>
|
||||
|
||||
|
||||
<script src="http://nutzwerte_fi4.test/js/filament/filament/echo.js?v=4.0.8.0"></script>
|
||||
|
||||
|
||||
<script src="http://nutzwerte_fi4.test/js/filament/filament/app.js?v=4.0.8.0"></script>
|
||||
|
||||
<style>
|
||||
:root {}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
loadDarkMode()
|
||||
</script>
|
||||
|
||||
<div class="fixed w-full flex p-4 z-40 auth-theme-switcher top-0 justify-end">
|
||||
<div class="rounded-lg bg-gray-50 dark:bg-gray-950">
|
||||
<div x-data="{
|
||||
theme: null,
|
||||
|
||||
init: function() {
|
||||
this.theme = localStorage.getItem('theme') || 'system'
|
||||
|
||||
$dispatch('theme-changed', theme)
|
||||
|
||||
$watch('theme', (theme) => {
|
||||
$dispatch('theme-changed', theme)
|
||||
})
|
||||
},
|
||||
}" class="fi-theme-switcher grid grid-flow-col gap-x-1">
|
||||
<button aria-label="Light Mode einschalten" type="button"
|
||||
x-bind:class="theme === 'light' ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
|
||||
'text-gray-400 hover:text-gray-500 focus:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:text-gray-400'"
|
||||
x-on:click="(theme = 'light')"
|
||||
x-tooltip="{
|
||||
content: 'Light Mode einschalten',
|
||||
theme: $store.theme,
|
||||
}"
|
||||
class="flex justify-center rounded-lg p-2 outline-none transition duration-75 hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-white/5 dark:focus:bg-white/5">
|
||||
<svg class="fi-icon fi-size-md h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
||||
fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path
|
||||
d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button aria-label="Dark Mode einschalten" type="button"
|
||||
x-bind:class="theme === 'dark' ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
|
||||
'text-gray-400 hover:text-gray-500 focus:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:text-gray-400'"
|
||||
x-on:click="(theme = 'dark')"
|
||||
x-tooltip="{
|
||||
content: 'Dark Mode einschalten',
|
||||
theme: $store.theme,
|
||||
}"
|
||||
class="flex justify-center rounded-lg p-2 outline-none transition duration-75 hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-white/5 dark:focus:bg-white/5">
|
||||
<svg class="fi-icon fi-size-md h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
||||
fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.455 2.004a.75.75 0 0 1 .26.77 7 7 0 0 0 9.958 7.967.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button aria-label="Systemthema benutzen" type="button"
|
||||
x-bind:class="theme === 'system' ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
|
||||
'text-gray-400 hover:text-gray-500 focus:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:text-gray-400'"
|
||||
x-on:click="(theme = 'system')"
|
||||
x-tooltip="{
|
||||
content: 'Systemthema benutzen',
|
||||
theme: $store.theme,
|
||||
}"
|
||||
class="flex justify-center rounded-lg p-2 outline-none transition duration-75 hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-white/5 dark:focus:bg-white/5">
|
||||
<svg class="fi-icon fi-size-md h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
||||
fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd"
|
||||
d="M2 4.25A2.25 2.25 0 0 1 4.25 2h11.5A2.25 2.25 0 0 1 18 4.25v8.5A2.25 2.25 0 0 1 15.75 15h-3.105a3.501 3.501 0 0 0 1.1 1.677A.75.75 0 0 1 13.26 18H6.74a.75.75 0 0 1-.484-1.323A3.501 3.501 0 0 0 7.355 15H4.25A2.25 2.25 0 0 1 2 12.75v-8.5Zm1.5 0a.75.75 0 0 1 .75-.75h11.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75v-7.5Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Livewire Scripts -->
|
||||
<script src="/livewire/livewire.js?id=df3a17f2" data-csrf="rXVfWsqBtHFpptLxNoNpzOf56uwroVoGKlXmKt1h"
|
||||
data-update-uri="/livewire/update" data-navigate-once="true"></script>
|
||||
</div>
|
||||
Reference in new issue
Block a user