tor-browser

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

scroll-marker-selection-in-2d-ref.html (1933B)


      1 <!DOCTYPE html>
      2 <html>
      3  <body>
      4    <style>
      5      .scroller {
      6        width: 200px;
      7        height: 200px;
      8        position: relative;
      9        border: solid;
     10        scroll-marker-group: after;
     11        overflow: scroll;
     12      }
     13      .scroll_marker_group {
     14        height: 100px;
     15        width: 200px;
     16        border: solid;
     17        white-space: nowrap;
     18        display: grid;
     19        grid-auto-flow: column;
     20      }
     21      .vwm {
     22        writing-mode: vertical-lr;
     23      }
     24      .box {
     25        position: absolute;
     26        height: 50px;
     27        width: 50px;
     28        font-size: 50px;
     29        background-color: blue;
     30      }
     31      .current {
     32        border: solid blue;
     33      }
     34      .scroll_marker {
     35        height: 40px;
     36        width: 40px;
     37        font-size: 20px;
     38        display: inline-block;
     39      }
     40      .top_right {
     41        top: 0px;
     42        left: 100px;
     43        &>scroll_marker {
     44          background-color: teal;
     45        }
     46      }
     47      .bottom_left {
     48        top: 100px;
     49        left: 0px;
     50      }
     51      .tr.scroll_marker {
     52        background-color: teal;
     53      }
     54      .bl.scroll_marker {
     55        background-color: brown;
     56      }
     57      .space {
     58        height: 800px;
     59        width: 800px;
     60        position: absolute;
     61      }
     62    </style>
     63    <div>
     64      <div class="scroller">
     65        <div class="space"></div>
     66        <div class="top_right box">TR</div>
     67        <div class="bottom_left box">BL</div>
     68      </div>
     69      <div class="scroll_marker_group">
     70        <div class="current tr scroll_marker"></div>
     71        <div class="bl scroll_marker"></div>
     72      </div>
     73      <div class="vwm scroller">
     74        <div class="space"></div>
     75        <div class="top_right box">TR</div>
     76        <div class="bottom_left box">BL</div>
     77      </div>
     78      <div class="vwm scroll_marker_group">
     79        <div class="tr scroll_marker"></div>
     80        <div class="bl current scroll_marker"></div>
     81      </div>
     82    </div>
     83  </body>
     84  </html>