-
Notifications
You must be signed in to change notification settings - Fork 2
/
style.sass
92 lines (78 loc) · 2.93 KB
/
style.sass
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
:host, plasmo-csui
opacity: 1 !important
[data-plasmo-styles-target]
font-size: 16px
--bezier: cubic-bezier(0, 1, 0, 1)
--bezier-chill: cubic-bezier(0, 1, .5, 1)
--bezier-chill-inverted: cubic-bezier(1, 0, 1, .5)
--bezier-out: cubic-bezier(1, 0.24, 1, 0.66)
--bezier-relaxed: cubic-bezier(0.35, 0.7, 0.25, 1)
--bezier-round: cubic-bezier(0, 0.5, 0.5, 1)
--bezier-round-inverted: cubic-bezier(.5, 0, 1, .5)
--bezier-symmetric: cubic-bezier(0.7, 0, 0.25, 1)
--bezier-symmetric-inverted: cubic-bezier(0, .7, 1, 0.25)
--bezier-symmetric-hard: cubic-bezier(.5, .1, .5, .9)
--bezier-symmetric-hard-inverted: cubic-bezier(.1, .5, .9, .5)
visibility: visible
@tailwind base
@tailwind components
@tailwind utilities
@import 'components/popup.sass'
@import 'components/button.sass'
@import 'components/binding-button.sass'
body.dialog-open
overflow: hidden
.made-tommy
font-family: 'made_tommy', sans-serif
@mixin boolean-behavior($hidden-opacity: 0, $hidden-scale-factor: .85, $out-duration: .15s, $in-duration: .3s, $out-timing: var(--bezier-round-inverted), $in-timing: var(--bezier-chill))
&:not(.enabled)
pointer-events: none
opacity: var(--_hidden-opacity, $hidden-opacity)
transform: scale(var(--_hidden-scale-factor, $hidden-scale-factor))
transition-timing-function: var(--_out-timing, $out-timing)
transition-duration: var(--_out-duration, $out-duration)
&.enabled
opacity: 1
transform: scale(1)
transition-property: transform, opacity
will-change: transform, opacity
transition-duration: var(--_in-duration, $in-duration)
transition-timing-function: var(--_in-timing, $in-timing)
.v_toggle-visibility
@include boolean-behavior
.v_toggle-availability
@include boolean-behavior($hidden-opacity: .4, $hidden-scale-factor: .98, $out-duration: .3s, $out-timing: var(--bezier-chill))
transition-property: transform, opacity, filter
&:not(.enabled)
filter: blur(3px) saturate(0)
.btn
@apply rounded-full
.browser-safari
.bg-blur
-webkit-backdrop-filter: blur(15px) hue-rotate(15deg) !important
.browser-firefox
.bg-blur
backdrop-filter: blur(15px) hue-rotate(15deg) !important
.bg-blur
backdrop-filter: blur(15px) url(#aberration) hue-rotate(15deg) !important
// background-color: rgba(20, 20, 20, 0.5)
background-color: var(--_blur-bg) !important
border: 2px solid #ccc5 !important
border-radius: 16px !important
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) !important
color: var(--_blur-text-color) !important
&.bg-blur\:soft
backdrop-filter: blur(10px) url(#aberration) hue-rotate(15deg) !important
background-color: var(--_blur-bg-soft) !important
border: 1px solid #ccc5 !important
&.bg-blur\:round
border-radius: 100em !important
.debug *
outline: 1px solid red
outline-offset: -1px
.ghost
// transition: opacity 0.3s var(--bezier-chill) !important
*
pointer-events: none !important
&:hover
opacity: 0.1 !important