zerotab

Zerotab - the zero-javascript lightweight startpage.
git clone git://git.alex.balgavy.eu/zerotab.git
Log | Files | Refs | README

style.scss (1741B)

      1 @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
      2   ::-webkit-scrollbar {
      3       width:  $size;
      4       height: $size;
      5   }
      6 
      7   ::-webkit-scrollbar-thumb {
      8       background: $foreground-color;
      9   }
     10 
     11   ::-webkit-scrollbar-track {
     12       background: $background-color;
     13   }
     14 
     15   // For Internet Explorer
     16   body {
     17     scrollbar-face-color: $foreground-color;
     18     scrollbar-track-color: $background-color;
     19   }
     20 };
     21 
     22 $linkswidth: 10vw;
     23 body {
     24   display: flex;
     25   flex-direction: column;
     26   justify-content: center;
     27   align-items: center;
     28   margin-top: 15vh;
     29 }
     30 h1 {
     31   font-size: 3em;
     32 }
     33 
     34 form input {
     35   margin: 1em 0;
     36   border: none;
     37   &:focus { outline: none; }
     38   width: 40vw;
     39   height: 10vh;
     40   font-size: 2em;
     41   text-align: center;
     42 }
     43 ul#links {
     44   list-style: none;
     45   padding: 0;
     46   display: flex;
     47   flex-wrap: wrap;
     48   height: max-content;
     49   justify-content: center;
     50 
     51   > li {
     52     border: 1px solid transparent;
     53     border-radius: 5px;
     54     text-align: center;
     55     margin: 0 2em 2em;
     56     height: 5em;
     57     width: 5em;
     58 
     59     img {
     60       width: 10vw;
     61       height: 3em;
     62       width: 3em;
     63       padding: 1em;
     64     }
     65     > a:focus + ul, >a:active + ul {
     66       display: block;
     67     }
     68   }
     69   li {
     70     list-style: none;
     71     position: relative;
     72 
     73     &:hover {
     74       border-bottom-left-radius: 0px;
     75       ul {
     76         display: block;
     77       }
     78     }
     79     ul {
     80       width: 20vw;
     81       overflow-y: auto;
     82       position: absolute;
     83       display: none;
     84       padding-inline-start: 0;
     85       z-index: 1;
     86       top: 5em;
     87       text-align: left;
     88       max-height: 30vh;
     89 
     90       a {
     91         display: block;
     92         padding-left: 1em;
     93         text-decoration: none;
     94         line-height: 35px;
     95         font-size: 80%;
     96       }
     97     }
     98 
     99   }
    100 
    101 }