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

dark.css (2992B)

      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 ::-webkit-scrollbar {
    122   width: 0.6em;
    123   height: 0.6em;
    124 }
    125 
    126 ::-webkit-scrollbar-thumb {
    127   background: slategray;
    128 }
    129 
    130 ::-webkit-scrollbar-track {
    131   background: #b8c0c8;
    132 }
    133 
    134 body {
    135   scrollbar-face-color: slategray;
    136   scrollbar-track-color: #b8c0c8;
    137 }
    138 
    139 body {
    140   background: #111111;
    141   color: #727272;
    142 }
    143 
    144 h1 {
    145   color: #bfbfbf;
    146 }
    147 
    148 input[type=text] {
    149   background: #2b2b2b;
    150   color: #727272;
    151 }
    152 
    153 ul#links li {
    154   background: #2b2b2b;
    155   color: #727272;
    156 }
    157 ul#links li ul {
    158   background: #2b2b2b;
    159 }
    160 ul#links li ul a {
    161   color: #a5a5a5;
    162 }
    163 ul#links li ul a:hover {
    164   color: #d8d8d8;
    165 }
    166 ul#links li ul li:hover {
    167   background: #444444;
    168 }
    169 ul#links li img {
    170   filter: invert(90%) hue-rotate(170deg);
    171 }
    172 ul#links li.separator {
    173   color: #bfbfbf;
    174 }
    175 ul#links li.separator::before, ul#links li.separator::after {
    176   border-bottom: 1px dashed #727272;
    177 }
    178 
    179 /*# sourceMappingURL=dark.css.map */