visual-viewport/index.html at main · jbasoo/visual-viewport · GitHub

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
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <style>
            html {
                color-scheme: light dark;
                --color: light-dark(navy, white);
                --bg-color: color-mix(in srgb, var(--color) 7%, transparent 100%);

                background-color: light-dark(transparent, black);
                background-image: linear-gradient(var(--bg-color) 2px, transparent 2px), linear-gradient(90deg, var(--bg-color) 2px, transparent 2px), linear-gradient(var(--bg-color) 1px, transparent 1px), linear-gradient(90deg, var(--bg-color) 1px, transparent 1px);
                background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
                background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
                height: 100%;
            }

            body {
                min-height: 100%;
                margin: 0;
                display: grid;
                place-items: center;

                > button {
                    font-size: 1.2rem;
                    padding: 0.5rem;
                }

                &:has(:popover-open) {
                    > button {
                        display: none;
                    }
                }
            }
        </style>

        <script type="module">
            import('./visual-viewport.js').then((mod) => {
                mod.VisualViewport.register();
            });
        </script>
    </head>
    <body>
        <button popovertarget="visual-viewport" popovertargetaction="show">Open Visual Viewport Debugger</button>
        <visual-viewport data-position="center-center" popover="manual" id="visual-viewport"></visual-viewport>
    </body>
</html>