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
|
import { style } from "@vanilla-extract/css"
import { themeContract } from "../styles/theme.css"
/**
* Navigation controls container
*/
export const navContainer = style({
display: "flex",
flexDirection: "column",
gap: themeContract.space[1],
})
/**
* Base button styles for navigation controls
*/
const navButtonBase = style({
backgroundColor: "rgba(0, 0, 0, 0.2)",
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
border: `1px solid rgba(255, 255, 255, 0.1)`,
borderRadius: themeContract.radii.lg,
padding: themeContract.space[2],
color: "rgba(255, 255, 255, 0.7)",
fontSize: themeContract.typography.fontSize.xs,
fontWeight: themeContract.typography.fontWeight.medium,
minWidth: "64px",
cursor: "pointer",
transition: themeContract.transitions.normal,
selectors: {
"&:hover": {
backgroundColor: "rgba(0, 0, 0, 0.3)",
borderColor: "rgba(255, 255, 255, 0.2)",
color: "rgba(255, 255, 255, 1)",
},
},
})
/**
* Standard navigation button
*/
export const navButton = navButtonBase
/**
* Zoom controls container
*/
export const zoomContainer = style({
display: "flex",
flexDirection: "column",
})
/**
* Zoom in button (top rounded)
*/
export const zoomInButton = style([
navButtonBase,
{
borderTopLeftRadius: themeContract.radii.lg,
borderTopRightRadius: themeContract.radii.lg,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
borderBottom: 0,
},
])
/**
* Zoom out button (bottom rounded)
*/
export const zoomOutButton = style([
navButtonBase,
{
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomLeftRadius: themeContract.radii.lg,
borderBottomRightRadius: themeContract.radii.lg,
},
])
|