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

light.css (2482B)

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