[READ-ONLY] Mirror of https://github.com/probablykasper/time-machine-inspector. Time Machine backup size inspector app
backup
macos
tauri
time-machine
Dark blue gradient theme
+12
-27
+12
-27
src/App.svelte
+12
-27
src/App.svelte
···
13
13
} else {
14
14
backups = stdout.split('\n')
15
15
}
16
-
// await new Promise((resolve) => setTimeout(resolve, 1000))
16
+
await new Promise((resolve) => setTimeout(resolve, 1000))
17
17
loading = false
18
18
}
19
19
}
···
38
38
39
39
<style lang="sass">
40
40
$easing: cubic-bezier(0.4, 0.0, 0.2, 1)
41
-
$c1: #F3A3AB
42
-
$c2: #dd83cb
43
-
$c3: #FFFFFF
44
41
:global(html)
45
42
height: 100%
46
-
background-color: #F7FAFE
47
-
font-family: Karla
48
-
// , Arial, Helvetica, sans-serif
43
+
background-color: hsl(230, 72%, 7%)
44
+
font-family: Karla, Arial, Helvetica, sans-serif
49
45
font-size: 18px
50
46
color: #f2f2f2
51
47
:global(body)
···
54
50
display: flex
55
51
box-sizing: border-box
56
52
border-top: 0px
57
-
background: radial-gradient(ellipse at 10% 10%, hsla(9, 72%, 75%, 1) 0%, rgba(255,255,255,0) 100%) 0px 0px, radial-gradient(ellipse at 65% 0%, hsla(278, 89%, 76%, 1) 0%, rgba(69,168,255,0) 95%) 0px 0px, linear-gradient(0deg, hsla(0, 0%, 100%, 1) 0%, hsla(0, 0%, 100%, 1) 100%) 0px 0px
53
+
background-image: radial-gradient(circle at 50% 27%, hsl(230, 65%, 33%), transparent 100%),radial-gradient(circle at 0% 90%, hsl(230, 53%, 38%), transparent 40%),radial-gradient(circle at 5% 1%, hsl(230, 71%, 4%), transparent 100%),radial-gradient(circle at 50% 50%, #000000, #000000 100%)
58
54
.sidebar
59
55
width: 200px
60
56
flex-shrink: 0
···
62
58
box-sizing: border-box
63
59
overflow: auto
64
60
padding: 15px
65
-
background-color: hsla(9, 100%, 95%, 0.25)
61
+
backdrop-filter: brightness(80%)
66
62
color: hsla(0, 0%, 0%, 0.7)
67
63
border: 0px
68
-
border-right: 1px solid hsla(9, 100%, 93%, 0.5)
69
-
border-image: radial-gradient(ellipse at top right, hsla(9, 100%, 93%, 0.8), transparent) 1 / 1px
64
+
border-right: 1px solid hsla(230, 100%, 93%, 0.5)
65
+
border-image: radial-gradient(ellipse at bottom right, hsla(230, 100%, 93%, 0.1), transparent) 1 / 1px
70
66
border-image-outset: 1px
71
67
display: flex
72
68
flex-direction: column
···
78
74
height: 100%
79
75
.button
80
76
user-select: none
81
-
-webkit-user-select: none
82
77
cursor: default
83
78
outline: none
84
79
width: 100%
85
80
box-sizing: border-box
86
-
padding: 7px 14px
81
+
padding: 9px 18px
87
82
text-align: center
88
83
font-size: 13px
89
-
// border: 1px solid hsla(9, 100%, 93%, 0.8)
90
-
// border-radius: 5px
91
-
background-color: hsla(9, 100%, 95%, 0.35)
92
-
color: #ffffff
84
+
border: 1px solid hsla(230, 100%, 70%, 0.1)
85
+
border-radius: 5px
86
+
background-color: hsla(230, 80%, 70%, 0.1)
87
+
color: hsla(216, 100%, 60%, 0.6)
93
88
font-weight: 600
94
89
text-shadow: 0 0.1rem 0.2rem hsl(270, 58%, 54%, 0.36)
95
-
box-shadow: 0px 4px 10px 0px hsla(270, 30%, 35%, 0.2)
96
90
transition: all 360ms $easing
97
-
98
-
@function svg-gradient-border($angle, $border-width, $border-radius, $stops)
99
-
$length: 20%
100
-
@return url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient gradientTransform="rotate(#{$angle})" id="Gradient" x1="0" x2="#{$length}" y1="0" y2="0" gradientUnits="userSpaceOnUse">#{$stops}</linearGradient></defs><rect x="#{calc($border-width / 2)}" y="#{calc($border-width / 2)}" width="100%" height="100%" style="height:calc(100% - #{$border-width}px);width:calc(100% - #{$border-width}px)" rx="#{$border-radius}" ry="#{$border-radius}" stroke-width="#{$border-width}" fill="transparent" stroke="url(%23Gradient)"/></svg>')
101
-
102
-
$stop1: '<stop stop-color="hsla(9, 100%, 94%, 0.8)" offset="0%"/>'
103
-
$stop2: '<stop stop-color="hsla(9, 100%, 94%, 0)" offset="100%"/>'
104
-
border-radius: 5px
105
-
background-image: svg-gradient-border(90, 1, 5, $stop1+$stop2)
106
91
&.disabled
107
92
opacity: 0.75
108
93
box-shadow: 0px 4px 30px 0px hsla(270, 30%, 35%, 0)