github.com/derat/nup@v0.0.0-20230418113745-15592ba7c620/web/index.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3    <head>
     4      <title>nup</title>
     5      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     6      <meta name="viewport" content="width=device-width, initial-scale=1" />
     7  
     8      <script>
     9        // Polyfill needed to use adoptedStyleSheets and replaceSync() on Firefox and Safari:
    10        // https://caniuse.com/mdn-api_cssstylesheet_replacesync
    11        // https://caniuse.com/?search=adoptedStyleSheets
    12        (async () => {
    13          if (!('adoptedStyleSheets' in document)) {
    14            await import('./construct-style-sheets-polyfill.js');
    15          }
    16        })();
    17      </script>
    18      <script src="{{SCRIPT}}" type="module"></script>
    19  
    20      <link id="favicon" rel="shortcut icon" href="favicon-v1.ico" sizes="48x48" />
    21      <link rel="manifest" href="manifest.json" />
    22      <link
    23        rel="preload"
    24        href="roboto-v30-latin-regular.woff2"
    25        as="font"
    26        type="font/woff2"
    27        crossorigin
    28      />
    29  
    30      <style>
    31        html {
    32          height: 100%;
    33        }
    34        body {
    35          background-color: var(--bg-color);
    36          color: var(--text-color);
    37          font-family: var(--font-family);
    38          font-size: var(--font-size);
    39          height: 100%;
    40          margin: 0;
    41          overflow: hidden;
    42        }
    43  
    44        #container {
    45          box-sizing: border-box;
    46          display: grid;
    47          grid-auto-rows: 100%;
    48          grid-template-columns: 50% 50%;
    49          height: 100vh;
    50          overflow: hidden;
    51          padding-bottom: 2px;
    52        }
    53        #container > :not(:last-child) {
    54          /* With Chrome on a high-DPI display, there's a 1-2 pixel white gap
    55           * between the play-view component and its right border that I'm
    56           * utterly unable to get rid of. I've tried:
    57           *
    58           * - setting a left border on search-view instead
    59           * - setting negative margins
    60           * - using grid-gap and background-color on #container
    61           * - making #container a flexbox and adding a dedicated div for the border
    62           * - probably other stuff that I'm forgetting
    63           *
    64           * I suspect that this is a rounding bug in Chrome's subpixel-rendering
    65           * code. Things work as expected in Firefox. */
    66          border-right: 1px solid var(--border-color);
    67        }
    68  
    69        dialog.dialog {
    70          background-color: var(--bg-color);
    71          border: solid 1px var(--frame-border-color);
    72          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.1);
    73          color: var(--text-color);
    74          padding: var(--margin);
    75        }
    76        dialog.dialog::backdrop {
    77          /* I'd like to set the opacity to 0.1 for the light theme and 0.5 for
    78           * the dark theme, but for some reason I don't seem to be able to access
    79           * CSS vars from within this pseudo-element -- Dev Tools claims that any
    80           * vars that I reference aren't defined. This sounds similar to
    81           * https://crbug.com/1174553, except the backdrop is also transparent,
    82           * so I think it isn't just a Dev Tools problem. */
    83          background-color: rgba(0, 0, 0, 0.3);
    84        }
    85  
    86        dialog.menu {
    87          background-color: var(--bg-color);
    88          border: solid 1px var(--frame-border-color);
    89          box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
    90          color: var(--text-color);
    91          left: auto;
    92          margin: 0;
    93          opacity: 0; /* overridden by menu.js after positioning */
    94          padding: 0;
    95          pointer-events: auto;
    96          position: absolute;
    97          right: auto;
    98          text-align: left;
    99        }
   100        dialog.menu.ready {
   101          opacity: 1;
   102        }
   103        dialog.menu::backdrop {
   104          background-color: transparent;
   105        }
   106      </style>
   107    </head>
   108  
   109    <body>
   110      <script>
   111        // This duplicates updateTheme() in index.ts. It's inlined here so that the correct theme will
   112        // be used when the page is first displayed; otherwise there's a jarring white flash on load
   113        // when the dark theme is requested.
   114        (() => {
   115          const config = localStorage.getItem('config'); // ConfigKey
   116          const pref = JSON.parse(config ?? '{}').theme ?? 0; // Pref.THEME
   117          if (
   118            pref === 2 || // Theme.DARK
   119            (pref === 0 && window.matchMedia('(prefers-color-scheme: dark)').matches) // Theme.AUTO
   120          ) {
   121            document.documentElement.setAttribute('data-theme', 'dark');
   122          }
   123        })();
   124      </script>
   125      <div id="container"><play-view></play-view><search-view></search-view></div>
   126    </body>
   127  </html>