forked from
did:plc:2hcnfmbfr4ucfbjpnvjqvt3e/bbell
wip bsky client for the web & android
feat: springy animation for modals & popovers, prettier toggleswitch styles
+104
-54
+27
-23
src/assets/main.css
src/assets/main.scss
+27
-23
src/assets/main.css
src/assets/main.scss
···
1
+
@use './variables.scss' as vars;
2
+
1
3
@font-face {
2
4
font-family: 'OpenDyslexic';
3
5
src:
···
30
32
margin: 0;
31
33
padding: 0;
32
34
font-weight: normal;
35
+
user-select: none;
33
36
34
37
scrollbar-width: thin;
35
38
scrollbar-color: hsla(var(--overlay1) / 1) transparent;
36
39
37
-
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
38
40
-webkit-tap-highlight-color: transparent;
39
41
outline: 2px solid transparent;
40
42
outline-offset: 4px;
41
43
42
-
transition:
43
-
margin var(--transition),
44
-
grid-template-rows var(--transition),
45
-
grid-template-columns var(--transition),
46
-
stroke-dasharray var(--transition),
47
-
stroke-dashoffset var(--transition),
48
-
outline-color var(--transition),
49
-
outline-offset var(--transition),
50
-
color var(--transition),
51
-
background-color var(--transition),
52
-
box-shadow var(--transition),
53
-
outline var(--transition),
54
-
border-color var(--transition),
55
-
border-radius var(--transition),
56
-
font-weight var(--transition),
57
-
opacity var(--transition),
58
-
transform var(--transition),
59
-
backdrop-filter var(--transition),
60
-
text-decoration-color var(--transition),
61
-
filter var(--transition);
44
+
transition-property: vars.$transition-properties;
45
+
transition-duration: vars.$transition-duration;
46
+
transition-timing-function: vars.$ease;
62
47
63
48
&:focus-visible {
64
49
outline-color: hsl(var(--blue));
···
95
80
--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
96
81
--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
97
82
83
+
--transition: vars.$default-transition;
98
84
--border-colour: hsl(var(--surface0) / 0.5);
99
85
100
86
--accented-border-colour: color-mix(
101
87
in oklab,
102
-
hsl(var(--accent) / 0.1) 20%,
88
+
hsl(var(--accent) / 0.5) 20%,
103
89
hsl(var(--surface0) / 0.1) 80%
104
90
);
105
91
···
128
114
-webkit-font-smoothing: antialiased;
129
115
-moz-osx-font-smoothing: grayscale;
130
116
overflow: hidden;
117
+
118
+
&.reduce-blur {
119
+
* {
120
+
backdrop-filter: none !important;
121
+
}
122
+
}
131
123
}
132
124
133
125
::selection {
134
-
background-color: hsla(var(--rosewater) / 0.3);
126
+
background-color: hsla(var(--accent) / 0.3);
135
127
color: hsl(var(--text));
136
128
}
137
129
···
235
227
color: hsl(var(--surface2));
236
228
font-weight: 900;
237
229
}
230
+
231
+
.sr-only {
232
+
position: absolute;
233
+
width: 1px;
234
+
height: 1px;
235
+
padding: 0;
236
+
margin: -1px;
237
+
overflow: hidden;
238
+
clip: rect(0, 0, 0, 0);
239
+
white-space: nowrap;
240
+
border: 0;
241
+
}
+19
src/assets/variables.scss
+19
src/assets/variables.scss
···
1
+
$ease: cubic-bezier(0.4, 0, 0.2, 1);
2
+
$ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
3
+
$ease-springier: cubic-bezier(0.25, 2.2, 0.5, 1);
4
+
$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
5
+
6
+
$transition-properties:
7
+
margin, grid-template-rows, grid-template-columns, stroke-dasharray, stroke-dashoffset,
8
+
outline-color, outline-offset, color, background-color, box-shadow, outline, border-color,
9
+
border-radius, font-weight, opacity, transform, backdrop-filter, text-decoration-color, filter,
10
+
scale;
11
+
$transition-duration: 0.2s;
12
+
$default-transition: $transition-duration $ease;
13
+
14
+
$border-colour: hsl(var(--subtext0) / 0.1);
15
+
$accented-border-colour: color-mix(
16
+
in oklab,
17
+
hsl(var(--accent) / 1) 20%,
18
+
hsl(var(--surface0) / 1) 20%
19
+
);
+10
src/components/UI/BaseModal.vue
+10
src/components/UI/BaseModal.vue
···
156
156
</template>
157
157
158
158
<style scoped lang="scss">
159
+
@use '@/assets/variables' as *;
160
+
161
+
.modal-wrapper,
162
+
.backdrop,
163
+
.modal-container,
164
+
.modal-content {
165
+
transition-timing-function: $ease-spring;
166
+
transition-duration: 0.3s;
167
+
}
168
+
159
169
.modal-wrapper {
160
170
position: fixed;
161
171
inset: 0;
+9
src/components/UI/BasePopover.vue
+9
src/components/UI/BasePopover.vue
···
378
378
</template>
379
379
380
380
<style scoped lang="scss">
381
+
@use '@/assets/variables' as *;
382
+
383
+
.popover-root,
384
+
.popover-backdrop,
385
+
.popover-panel {
386
+
transition-timing-function: $ease-spring;
387
+
transition-duration: 0.3s;
388
+
}
389
+
381
390
.popover-root {
382
391
position: fixed;
383
392
inset: 0;
+2
-2
src/components/UI/ListItem.vue
+2
-2
src/components/UI/ListItem.vue
···
129
129
130
130
.is-clickable {
131
131
cursor: pointer;
132
-
&:hover {
132
+
/* &:hover {
133
133
background: var(--accent-surface-hover);
134
134
}
135
135
&:active {
···
139
139
z-index: 1;
140
140
background: hsl(var(--mantle));
141
141
box-shadow: inset 0 0 0 2px hsl(var(--accent));
142
-
}
142
+
} */
143
143
}
144
144
145
145
.is-danger {
+23
-10
src/components/UI/ToggleSwitch.vue
+23
-10
src/components/UI/ToggleSwitch.vue
···
49
49
display: inline-flex;
50
50
width: 3rem;
51
51
height: 1.75rem;
52
-
background-color: hsl(var(--surface1));
52
+
background-color: hsla(var(--surface1) / 0.85);
53
53
border-radius: 1rem;
54
54
border: none;
55
55
position: relative;
···
76
76
outline-offset: -1px;
77
77
}
78
78
79
+
&:hover {
80
+
background-color: hsla(var(--surface1) / 1);
81
+
}
82
+
83
+
&:active {
84
+
.toggle-thumb {
85
+
width: calc(var(--width) + var(--pressed-grow));
86
+
}
87
+
}
88
+
79
89
&.is-checked {
80
-
background-color: hsla(var(--accent) / 0.8);
90
+
background: hsl(var(--accent));
81
91
82
92
.toggle-thumb {
83
93
transform: translateX(1.25rem);
84
-
background-color: hsl(var(--base));
94
+
}
95
+
.toggle-label {
96
+
color: hsl(var(--text));
85
97
}
86
98
87
-
&:active,
88
-
&:focus-visible {
99
+
&:active {
89
100
.toggle-thumb {
90
-
background-color: hsl(var(--base) / 0.8);
91
-
transform: translateX(1.1rem);
101
+
transform: translateX(calc(1.15rem - (var(--pressed-grow))));
92
102
}
93
103
}
94
104
}
95
105
}
96
106
97
107
.toggle-thumb {
108
+
--width: 1.35rem;
109
+
--pressed-grow: 0.4rem;
110
+
98
111
position: absolute;
99
112
top: 0.2rem;
100
113
left: 0.2rem;
101
-
width: 1.35rem;
114
+
width: var(--width);
102
115
height: 1.35rem;
103
116
background: hsl(var(--base));
104
-
border-radius: 50%;
105
-
box-shadow: 0 1px 3px hsla(var(--crust) / 0.2);
117
+
border-radius: 2rem;
106
118
107
119
transition-timing-function: $ease-spring;
108
120
transition-duration: 0.3s;
121
+
transition-property: $transition-properties, width;
109
122
}
110
123
</style>
+1
-1
src/main.ts
+1
-1
src/main.ts
+3
-1
src/views/Root/HomeView.vue
+3
-1
src/views/Root/HomeView.vue
···
189
189
</template>
190
190
191
191
<style lang="scss" scoped>
192
+
@use '@/assets/variables.scss' as vars;
193
+
192
194
.feeds-bar {
193
195
display: flex;
194
196
gap: 0.5rem;
···
252
254
inset: 0;
253
255
border-radius: 10rem;
254
256
background: transparent;
255
-
transition: var(--transition);
257
+
transition: vars.$default-transition;
256
258
z-index: -1;
257
259
pointer-events: none;
258
260
}