CalvinBackup/phishingclub
1
0
Fork 0
mirror of https://github.com/phishingclub/phishingclub.git synced 2026-05-29 11:01:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

replaced blur with alpha channel for performance

Browse Source 
Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
Ronni Skansing
2026-03-28 20:39:48 +01:00
parent b0688f8da8
commit bb27af8ae4
8 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Alert.svelte
+4 -2
View File
@@ -1,4 +1,5 @@
<script>
import { fade } from 'svelte/transition';
import { onMount, tick } from 'svelte';
import FormButton from './FormButton.svelte';
import Input from './Input.svelte';
@@ -245,7 +246,8 @@
{#if visible}
<div class="fixed top-0 left-0 w-full h-full opacity-[0.5]" />
<div
class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
transition:fade={{ duration: 150 }}
class="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-overlay/[0.92] z-20"
role="dialog"
aria-modal="true"
aria-labelledby="alert-title"
@@ -253,7 +255,7 @@
>
<section
bind:this={alertElement}
class="shadow-xl dark:shadow-gray-900/70 w-[32rem] bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-colors duration-200"
class="shadow-2xl ring-1 ring-white/10 dark:shadow-gray-900/80 w-[32rem] bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-colors duration-200"
>
<!-- Header -->
<div
frontend/src/lib/components/ConfirmPrompt.svelte
+5 -3
View File
@@ -1,4 +1,5 @@
<script>
import { fade } from 'svelte/transition';
import { onMount, tick } from 'svelte';
import { beforeNavigate } from '$app/navigation';
@@ -161,10 +162,11 @@
{#if visible}
<div
class="fixed top-0 left-0 w-full h-full bg-cta-blue dark:bg-gray-900 opacity-20 blur-xl transition-colors duration-200"
transition:fade={{ duration: 150 }}
class="fixed top-0 left-0 w-full h-full bg-overlay/[0.93] transition-colors duration-200"
/>
<div
class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-20"
role="dialog"
aria-modal="true"
aria-labelledby="confirm-title"
@@ -172,7 +174,7 @@
>
<section
bind:this={confirmElement}
class="flex flex-col items-center w-1/3 bg-slate-100 dark:bg-gray-800 shadow-xl dark:shadow-gray-900/70 rounded-md transition-colors duration-200"
class="flex flex-col items-center w-1/3 bg-slate-100 dark:bg-gray-800 shadow-2xl ring-1 ring-white/10 dark:shadow-gray-900/80 rounded-md transition-colors duration-200"
>
<div
class="bg-cta-orange2 dark:bg-orange-600 text-white rounded-tl-md rounded-tr-md w-full transition-colors duration-200"
frontend/src/lib/components/Loader.svelte
+4 -4
View File
@@ -1,6 +1,6 @@
<script>
import { isLoading } from '$lib/store/loading.js';
import { blur } from 'svelte/transition';
import { fade } from 'svelte/transition';
let isAnimating = false;
const duration = 250; //ms
@@ -15,10 +15,10 @@
</script>
{#if $isLoading && isAnimating}
<div class="fixed top-0 left-0 w-full h-full opacity-[0.5]" transition:blur={{ duration }} />
<div class="fixed top-0 left-0 w-full h-full opacity-[0.5]" transition:fade={{ duration }} />
<div
transition:blur={{ duration }}
class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-50"
transition:fade={{ duration }}
class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-50"
>
<div
class="w-20 h-20 border-t-8 border-t-cta-blue border-r-8 border-r-cta-blue border-b-cta-blue border-b-8 border-l-transparent border-l-8 rounded-full animate-spin"
frontend/src/lib/components/Modal.svelte
+8 -3
View File
@@ -1,4 +1,5 @@
<script>
import { fade } from 'svelte/transition';
import { onMount, tick } from 'svelte';
import { beforeNavigate } from '$app/navigation';
import { scrollBarClassesVertical } from '$lib/utils/scrollbar';
@@ -315,9 +316,13 @@
{#if visible}
<div bind:this={bindTo}>
<div class="fixed top-0 left-0 w-full h-full opacity-[0.5]" />
<div
class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
class="fixed top-0 left-0 w-full h-full opacity-[0.5]"
transition:fade={{ duration: 150 }}
/>
<div
transition:fade={{ duration: 150 }}
class="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-overlay/[0.92] z-20"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
@@ -325,7 +330,7 @@
>
<section
bind:this={modalElement}
class="shadow-xl dark:shadow-gray-900/70 bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-all duration-200
class="shadow-2xl ring-1 ring-white/10 dark:shadow-gray-900/80 bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-all duration-200
{fullscreen
? 'fixed inset-0 w-full h-full max-w-none max-h-none rounded-none'
: 'w-auto ml-20 mr-8 max-h-[90vh]'}"
frontend/src/lib/components/ThemeToggle.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
<button
on:click={handleToggle}
class="relative inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/10 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50 hover:bg-white/20 dark:hover:bg-gray-700/80 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50 shadow-lg"
class="relative inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/10 dark:bg-gray-800/80 border border-gray-200/50 dark:border-gray-600/50 hover:bg-white/20 dark:hover:bg-gray-700/80 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50 shadow-lg"
title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
>
frontend/src/lib/components/header/MobileMenu.svelte
+1 -1
View File
@@ -169,7 +169,7 @@
>
<!-- Header -->
<div
class="mobile-menu-header flex justify-between h-20 items-center bg-pc-darkblue/90 dark:bg-gray-900/90 backdrop-blur-sm px-6 border-b border-white/10 dark:border-gray-700/50"
class="mobile-menu-header flex justify-between h-20 items-center bg-pc-darkblue/90 dark:bg-gray-900/90 px-6 border-b border-white/10 dark:border-gray-700/50"
>
<img class="w-40 h-auto" src="/logo-white.svg" alt="logo" />
<div class="flex items-center gap-2">
frontend/src/lib/components/modal/CommandPalette.svelte
+4 -1
View File
@@ -1,4 +1,6 @@
<script>
import { fade } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
import { onMount, onDestroy } from 'svelte';
import { goto } from '$app/navigation';
import { menu, topMenu } from '$lib/consts/navigation';
@@ -237,7 +239,8 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div
class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-start justify-center pt-20"
transition:fade={{ duration: 150, easing: cubicOut }}
class="fixed inset-0 z-50 flex items-start justify-center pt-20 bg-overlay/[0.92]"
on:click|self={close}
on:keydown={handleKeydown}
role="dialog"
frontend/tailwind.config.js
+1
View File
@@ -9,6 +9,7 @@ export default {
titilium: ['Titillium Web', 'sans-serif']
},
colors: {
overlay: 'rgb(10 10 12 / <alpha-value>)',
'pc-pink': '#ff00ff',
'pc-pink-hover': '#fa48ff',
'pc-purple': '#9622fc',