tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

custom-scrollbar.html (1256B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <title>View Transitions: custom scrollbar (new page)</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      5 <link rel="author" href="mailto:bokan@chromium.org">
      6 <script src="/common/reftest-wait.js"></script>
      7 <script>
      8 onload = takeScreenshot;
      9 </script>
     10 <style>
     11 @view-transition {
     12  navigation: auto;
     13 }
     14 @layer {
     15    ::-webkit-scrollbar {
     16        background-color: hsl(0, 100%, 10%);
     17        color: hsl(0, 100%, 90%);
     18    }
     19    ::-webkit-scrollbar-thumb {
     20        background-color: hsl(0, 100%, 50%);
     21    }
     22    ::-webkit-scrollbar-corner {
     23        background-color: hsl(0, 100%, 0%);
     24    }
     25 }
     26 html {
     27  background: grey;
     28  overflow: scroll;
     29 }
     30 html::view-transition-group(root) { animation-duration: 300s; }
     31 /* Hold the old image for the entire duration. */
     32 html::view-transition-old(root) {
     33  animation: none;
     34  opacity: 1;
     35 }
     36 html::view-transition-new(root) {
     37  animation: none;
     38  opacity: 0;
     39 }
     40 html::view-transition-old(root) {
     41  animation-duration: 3s;
     42  width: 50vw;
     43  height: 100vh;
     44  position: fixed;
     45  left: 0px;
     46  top: 0px;
     47 }
     48 html::view-transition-new(root) {
     49  animation-duration: 3s;
     50  width: 50vw;
     51  height: 100vh;
     52  position: fixed;
     53  left: 50vw;
     54  top: 0px;
     55 }
     56 </style>
     57 </html>