Arx/npub.email
2
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

clean css

Browse source
This commit is contained in:
Danny Morabito 2024-11-29 19:16:34 +01:00
parent e4f1536eb0
commit c9b6f02fd3
Signed by: dannym
GPG key ID: 7CC8056A5A04557E
19 changed files with 585 additions and 638 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/Checkbox.svelte
View file

@ -158,7 +158,7 @@
}
input:checked ~ .checkbox-wrapper .check-path {
animation: check-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation: draw-svg 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
input:checked ~ .checkbox-wrapper .checkbox-border {
@ -187,12 +187,6 @@
scale: 0.95;
}
@keyframes check-draw {
to {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.checkbox-container *,
.checkbox-container {

20
src/components/ColorPicker.svelte
View file

@ -97,7 +97,7 @@
transparent 60%
);
transform: rotate(45deg);
animation: shine 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
animation: gleam 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.glow {
@ -110,22 +110,4 @@
);
animation: pulse 3s infinite alternate;
}
@keyframes shine {
0% {
transform: translateX(-150%) rotate(45deg);
}
100% {
transform: translateX(150%) rotate(45deg);
}
}
@keyframes pulse {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>

1
src/components/Dialog.svelte
View file

@ -15,7 +15,6 @@
<dialog
bind:this={dialog}
class="glass"
onclose={() => { open = false; onClose(); }}
use:appendToBody
>

93
src/components/MailboxFolderItems.svelte
View file

@ -8,6 +8,7 @@
import type { Letter } from '$lib/letter';
import { slide } from 'svelte/transition';
import { FolderLabel } from '$lib/folderLabel';
import '$lib/style/mailbox-folder-items.css';
let {
letters,
@ -215,95 +216,3 @@
{@render letterGroup(sortedInbox)}
{/if}
</main>
<style>
@layer layout {
.letter-list {
display: grid;
gap: var(--spacing-sm);
overflow: hidden;
.stamp-group {
display: grid;
gap: var(--spacing-md);
}
.letter-group {
display: grid;
gap: var(--spacing-sm);
}
.letter-meta {
color: var(--text-secondary);
font-size: 0.85rem;
margin-bottom: var(--spacing-xs);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
& .letter-item {
text-decoration: none;
color: var(--text-primary);
position: relative;
overflow: hidden;
padding: var(--spacing-md);
border-radius: 12px;
background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
border: 1px solid var(--glass-border);
transition: all 0.3s ease;
cursor: pointer;
&::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-shine);
background-size: 200% 200%;
opacity: 0;
transition: opacity 0.3s ease;
}
&:hover, &.selected {
transform: translateY(-2px) scale(1.01);
background: color-mix(in srgb, var(--glass-bg) 90%, var(--accent));
box-shadow: 0 4px 16px var(--glass-shadow);
&::before {
opacity: 1;
animation: shine 2s linear infinite;
}
}
& .subject-line {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xs);
}
& .letter-subject, .letter-from {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
align-items: center;
font-weight: 600;
}
& .stamps-count {
color: var(--text-secondary);
font-size: 0.85rem;
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
& .letter-preview {
color: var(--text-secondary);
font-size: 0.9rem;
}
}
}
}
</style>

2
src/components/Notification.svelte
View file

@ -1,4 +1,6 @@
<script lang="ts">
import '$lib/style/notifications.css';
import Icon from '@iconify/svelte';
import { onMount } from 'svelte';
import { appendToBody } from '$lib/utils.svelte';

1
src/components/Tooltip.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import '$lib/base.css';
export let content: string;
export let position: 'top' | 'bottom' | 'left' | 'right' = 'top';