~james/core

core/web/src/listView.css -rw-r--r-- 2.1 KiB
452f17b7 — james chore(import): snapshot james.dad.town/core at f70c71c7696a 14 hours ago 
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

@utility list-morph {
	:root[data-list-switch] & > * {
		view-transition-name: match-element;
		view-transition-class: list-shell;
	}
}

:root[data-list-switch] {
	view-transition-name: none;

	& [data-vt="move"] {
		view-transition-name: match-element;
		view-transition-class: list-move;
	}

	& [data-vt="fade"] {
		view-transition-name: match-element;
		view-transition-class: list-fade;
	}

	& [data-vt-skip],
	& [data-vt-skip] [data-vt] {
		view-transition-name: none;
	}
}

::view-transition {
	pointer-events: none;
}

::view-transition-group(.list-shell),
::view-transition-group(.list-move),
::view-transition-group(.list-fade) {
	animation-duration: 420ms;
	animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

::view-transition-group(.list-shell) {
	background: var(--color-background-default);
	border-radius: var(--radius-md);
	box-shadow: 0 0 0 1px var(--color-shadow-ring);
}

::view-transition-old(.list-shell),
::view-transition-new(.list-shell) {
	display: none;
}

::view-transition-old(.list-move),
::view-transition-new(.list-move),
::view-transition-old(.list-fade),
::view-transition-new(.list-fade) {
	height: 100%;
	width: auto;
	object-fit: none;
	object-position: left top;
}

::view-transition-old(.list-fade) {
	animation: 150ms cubic-bezier(0.33, 1, 0.68, 1) both list-fade-out;
}

::view-transition-new(.list-fade) {
	animation: 210ms cubic-bezier(0.33, 1, 0.68, 1) 105ms both list-fade-in;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-image-pair(*) {
		animation-duration: 0s !important;
		animation-delay: 0s !important;
	}
	::view-transition-old(*) {
		animation: 150ms cubic-bezier(0.33, 1, 0.68, 1) both list-dissolve-out !important;
	}
	::view-transition-new(*) {
		animation: 150ms cubic-bezier(0.33, 1, 0.68, 1) both list-dissolve-in !important;
	}
}

@keyframes list-fade-in {
	from {
		opacity: 0;
		filter: blur(3px);
	}
}

@keyframes list-fade-out {
	to {
		opacity: 0;
		filter: blur(3px);
	}
}

@keyframes list-dissolve-in {
	from {
		opacity: 0;
	}
}

@keyframes list-dissolve-out {
	to {
		opacity: 0;
	}
}