zerotab

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

style.scss (2511B)

      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 @keyframes popin {
     23   from {opacity: 0;}
     24   to {opacity: 1;}
     25 }
     26 $linkswidth: 10vw;
     27 body {
     28   display: flex;
     29   flex-direction: column;
     30   justify-content: center;
     31   align-items: center;
     32   margin-top: 15vh;
     33   max-height: 100vh;
     34   margin-bottom: 5vh;
     35   width: 80vw;
     36   margin: 15vh 0 10vw 10vw;
     37   animation: popin 0.3s linear 0.1s;
     38 }
     39 h1 {
     40   font-size: 3em;
     41 }
     42 
     43 form input {
     44   margin: 1em 0;
     45   border: none;
     46   &:focus { outline: none; }
     47   width: 40vw;
     48   height: 10vh;
     49   font-size: 2em;
     50   text-align: center;
     51 }
     52 ul#links {
     53   list-style: none;
     54   padding: 0;
     55   display: flex;
     56   flex-wrap: wrap;
     57   height: max-content;
     58   justify-content: center;
     59 
     60   /* Main buttons */
     61   > li {
     62     border: 1px solid transparent;
     63     border-radius: 5px;
     64     text-align: center;
     65     margin: 0 2em 2em;
     66     height: 5em;
     67     width: 5em;
     68 
     69     &:hover, &:focus {
     70       border-bottom-left-radius: 0px;
     71       outline: none;
     72     }
     73 
     74     img {
     75       width: 10vw;
     76       height: 3em;
     77       width: 3em;
     78       padding: 1em;
     79     }
     80 
     81     > a {
     82       cursor: initial;
     83     }
     84     > a:focus + ul, >a:active + ul, >a:hover + ul {
     85       opacity: 1;
     86       visibility: visible;
     87     }
     88   }
     89   li {
     90     list-style: none;
     91 
     92     &:hover ul, &:focus ul, &:active ul {
     93       opacity: 1;
     94       visibility: visible;
     95     }
     96 
     97     /* Links under buttons */
     98     ul {
     99       overflow-y: auto;
    100       display: block;
    101       opacity: 0;
    102       visibility: hidden;
    103       text-align: left;
    104       margin: -4% 0 0;
    105       padding: 0;
    106       position: relative;
    107       height: content-box;
    108       max-height: 20vh;
    109       width: 200%;
    110       transition: opacity 0.1s;
    111       z-index: 1;
    112 
    113       a {
    114         display: block;
    115         padding-left: 1em;
    116         text-decoration: none;
    117         line-height: 35px;
    118         font-size: 80%;
    119       }
    120     }
    121 
    122   }
    123 
    124   li.separator {
    125     display: flex;
    126     align-items: center;
    127     text-align: center;
    128 
    129     &:hover, &:focus, &:active {
    130       background: inherit;
    131     }
    132     &::before, &::after {
    133       content: '';
    134       flex: 1;
    135     }
    136     &::before { margin-right: 0.25em; }
    137     &::after { margin-left: 0.25em; }
    138   }
    139 
    140 }