diff --git a/.env b/.env index 828e2bff..64e9bc30 100644 --- a/.env +++ b/.env @@ -10,6 +10,7 @@ VITE_PLATFORM_LOGO=static/logo.png VITE_PLATFORM_RELAYS= VITE_PLATFORM_ACCENT="#7161FF" VITE_PLATFORM_SECONDARY="#EB5E28" +VITE_THEME="clay" VITE_PLATFORM_DESCRIPTION="Flotilla is nostr — for communities." VITE_PUSH_SERVER=https://nps.flotilla.social/ VITE_PUSH_BRIDGE=wss://npb.coracle.social/ diff --git a/package.json b/package.json index 6fff937f..a68fa30e 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,6 @@ "@welshman/util": "^0.8.16", "cheerio": "^1.2.0", "compressorjs-next": "^1.1.2", - "daisyui": "^5.5.19", "date-picker-svelte": "^2.17.0", "dotenv": "^16.6.1", "emoji-picker-element": "^1.28.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f420fca3..607418d3 100644 Binary files a/pnpm-lock.yaml and b/pnpm-lock.yaml differ diff --git a/src/app.css b/src/app.css deleted file mode 100644 index 99bb3dc4..00000000 --- a/src/app.css +++ /dev/null @@ -1,459 +0,0 @@ -@import "tailwindcss"; - -@config "../tailwind.config.js"; - -/* root */ - -:root { - font-family: Lato; - --sait: var(--safe-area-inset-top, env(safe-area-inset-top)); - --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom)); - --sail: var(--safe-area-inset-left, env(safe-area-inset-left)); - --sair: var(--safe-area-inset-right, env(safe-area-inset-right)); -} - -@utility pt-sai { - padding-top: var(--sait); -} - -@utility pr-sai { - padding-right: var(--sair); -} - -@utility pb-sai { - padding-bottom: var(--saib); -} - -@utility pl-sai { - padding-left: var(--sail); -} - -@utility px-sai { - @apply pl-sai pr-sai; -} - -@utility py-sai { - @apply pt-sai pb-sai; -} - -@utility p-sai { - @apply py-sai px-sai; -} - -@utility mt-sai { - margin-top: var(--sait); -} - -@utility mr-sai { - margin-right: var(--sair); -} - -@utility mb-sai { - margin-bottom: var(--saib); -} - -@utility ml-sai { - margin-left: var(--sail); -} - -@utility mx-sai { - @apply ml-sai mr-sai; -} - -@utility my-sai { - @apply mt-sai mb-sai; -} - -@utility m-sai { - @apply my-sai mx-sai; -} - -@utility top-sai { - top: var(--sait); -} - -@utility right-sai { - right: var(--sair); -} - -@utility bottom-sai { - bottom: var(--saib); -} - -@utility left-sai { - left: var(--sail); -} - -@utility card2 { - @apply rounded-box text-base-content border-base-content/20 bg-base-100 border border-solid p-4 shadow-xl/5 sm:p-6; -} - -@utility card2-interactive { - @apply cursor-pointer hover:scale-101 transition-all; -} - -@utility column { - @apply flex flex-col; -} - -@utility center { - @apply flex items-center justify-center; -} - -@utility row-2 { - @apply flex items-center gap-2; -} - -@utility row-3 { - @apply flex items-center gap-3; -} - -@utility row-4 { - @apply flex items-center gap-4; -} - -@utility col-2 { - @apply flex flex-col gap-2; -} - -@utility col-3 { - @apply flex flex-col gap-3; -} - -@utility col-4 { - @apply flex flex-col gap-4; -} - -@utility col-8 { - @apply flex flex-col gap-8; -} - -@utility ellipsize { - @apply overflow-hidden text-ellipsis; -} - -@utility content-padding-x { - @apply px-4 sm:px-8 md:px-12; -} - -@utility content-padding-t { - @apply pt-4 sm:pt-8 md:pt-12; -} - -@utility content-padding-b { - @apply pb-4 sm:pb-8 md:pb-12; -} - -@utility content-padding-y { - @apply pt-4 pb-4 sm:pt-8 sm:pb-8 md:pt-12 md:pb-12; -} - -@utility content-sizing { - @apply m-auto w-full max-w-3xl; -} - -@utility content { - @apply m-auto w-full max-w-3xl px-4 pt-4 pb-4 sm:px-8 sm:pt-8 sm:pb-8 md:px-12 md:pt-12 md:pb-12; -} - -@utility heading { - @apply text-center text-2xl; -} - -@utility subheading { - @apply text-center text-xl; -} - -@utility superheading { - @apply text-center text-4xl; -} - -@utility link { - @apply text-primary cursor-pointer underline; -} - -/* content visibility */ - -@utility cv { - content-visibility: auto; -} - -/* - The default border color has changed to `currentcolor` in Tailwind CSS v4, - so we've added these compatibility styles to make sure everything still - looks the same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add an explicit border - color utility to any element that depends on these defaults. -*/ -@layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); - } -} - -@layer utilities { - /* Fonts */ - - @font-face { - font-family: "Satoshis"; - font-style: normal; - font-weight: 400; - src: - local(""), - url("/fonts/Satoshi Symbol.ttf") format("truetype"); - } - - @font-face { - font-family: "Lato"; - font-style: normal; - font-weight: 400; - src: - local(""), - url("/fonts/Lato-Regular.ttf") format("truetype"); - } - - @font-face { - font-family: "Lato"; - font-style: bold; - font-weight: 600; - src: - local(""), - url("/fonts/Lato-Bold.ttf") format("truetype"); - } - - @font-face { - font-family: "Lato"; - font-style: italic; - font-weight: 400; - src: - local(""), - url("/fonts/Italic.ttf") format("truetype"); - } - - /* root */ - - :root { - font-family: Lato; - text-size-adjust: 100%; - --sait: var(--safe-area-inset-top, env(safe-area-inset-top)); - --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom)); - --sail: var(--safe-area-inset-left, env(safe-area-inset-left)); - --sair: var(--safe-area-inset-right, env(safe-area-inset-right)); - } - - [data-theme] { - @apply bg-base-300; - } - - .mobile [data-tip]::before { - display: none !important; - } - - /* safe area insets */ -} - -/* utilities */ - -.bg-alt, -.bg-alt .bg-alt .bg-alt, -.hover\:bg-alt:hover, -.bg-alt .bg-alt .hover\:bg-alt:hover, -.bg-alt .bg-alt.hover\:bg-alt:hover { - @apply bg-base-100 text-base-content transition-colors; -} - -.bg-alt .bg-alt, -.bg-alt .bg-alt .bg-alt .bg-alt, -.bg-alt .hover\:bg-alt:hover, -.bg-alt .bg-alt .bg-alt .hover\:bg-alt:hover, -.bg-alt.hover\:bg-alt:hover, -.bg-alt .bg-alt .bg-alt.hover\:bg-alt:hover { - @apply bg-base-300 text-base-content transition-colors; -} - -.card2.card2-sm { - @apply text-base-content p-2 sm:p-4; -} - -.card2 .card2, -.dialog .card2 { - @apply shadow-none; -} - -[data-tip]::before { - @apply overflow-hidden text-ellipsis; -} - -.input input::placeholder { - opacity: 0.5; -} - -/* tiptap */ - -.input-editor, -.chat-editor, -.note-editor { - @apply -m-1 p-1; -} - -.tiptap { - --tiptap-object-bg: var(--color-neutral); - --tiptap-object-fg: var(--color-neutral-content); - --tiptap-active-bg: var(--color-primary); - --tiptap-active-fg: var(--color-primary-content); -} - -.tiptap-suggestions { - --tiptap-object-bg: var(--color-base-100); - --tiptap-object-fg: var(--color-base-content); - --tiptap-active-bg: var(--color-base-300); - --tiptap-active-fg: var(--color-base-content); -} - -.tiptap-suggestions__item { - @apply border-base-100 border-l-2 border-solid; -} - -.tiptap-suggestions__selected { - @apply border-primary; -} - -.tiptap { - @apply max-h-[350px] min-h-10 overflow-y-auto p-2 px-4; -} - -.tiptap p.is-editor-empty:first-child::before { - opacity: 40%; -} - -.chat-editor .tiptap { - @apply rounded-box bg-base-300 pr-12; -} - -.note-editor .tiptap { - --tiptap-object-bg: var(--color-base-200); - @apply input rounded-box block h-auto min-h-32 w-full p-[.65rem] pb-6; -} - -.input-editor .tiptap { - --tiptap-object-bg: var(--color-base-200); - @apply input block h-auto p-[.65rem]; -} - -/* link-content, based on tiptap */ - -.link-content { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - border-radius: 3px; - padding: 0 0.25rem; - background-color: var(--color-base-100); - color: var(--color-base-content); -} - -/* content rendered by welshman/content */ - -.welshman-content a { - @apply link; -} - -.welshman-content-error a { - @apply underline; -} - -/* date input */ - -.picker { - --date-picker-foreground: var(--color-base-content); - --date-picker-background: var(--color-base-300); - --date-picker-highlight-border: var(--color-primary); - --date-picker-selected-color: var(--color-primary-content); - --date-picker-selected-background: var(--color-primary); -} - -.date-time-field { - @apply input rounded-lg px-0; -} - -.date-time-field input { - @apply h-full! w-full! rounded-lg! border-none! bg-inherit! px-4! text-inherit!; -} - -/* tippy popover */ - -.tippy-target { - @apply z-tooltip pointer-events-none fixed inset-0; -} - -.tippy-target > * { - pointer-events: auto; -} - -.tippy-box { - @apply rounded-box shadow-xl; -} - -/* emoji picker */ - -emoji-picker { - --background: var(--color-base-100); - --border-color: var(--color-base-100); - --border-radius: var(--rounded-box); - --button-active-background: var(--color-base-content); - --button-hover-background: var(--color-base-content); - --indicator-color: var(--color-base-content); - --input-border-color: var(--color-base-100); - --input-font-color: var(--color-base-content); - --outline-color: var(--color-base-100); -} - -/* progress */ - -progress[value]::-webkit-progress-value { - transition: width 0.5s; -} - -/* content width for fixed elements */ - -.left-content { - @apply left-sai md:left-[calc(18.5rem+var(--sail))]; -} - -.left-content-full { - @apply left-sai md:left-[calc(3.5rem+var(--sail))]; -} - -/* Keyboard open state adjustments */ - -body.keyboard-open { - --saib: 0px; -} - -body.keyboard-open .hide-on-keyboard { - display: none; -} - -body.keyboard-open .chat__compose { - margin-bottom: 0; -} - -/* chat view */ - -.chat__compose { - @apply z-compose relative mb-14 shrink-0 md:mb-0; -} - -.chat__compose .chat__compose-inner { - @apply min-w-0; -} - -.chat__scroll-down { - @apply pb-sai z-feature fixed right-4 bottom-28 md:bottom-16; -} diff --git a/src/app/components/BunkerUrl.svelte b/src/app/components/BunkerUrl.svelte index fce640bf..585d0488 100644 --- a/src/app/components/BunkerUrl.svelte +++ b/src/app/components/BunkerUrl.svelte @@ -34,7 +34,7 @@

Bunker Link*

{/snippet} {#snippet input()} -