github.com/stampzilla/stampzilla-go@v2.0.0-rc9+incompatible/nodes/stampzilla-magicmirror/web/src/index.css (about)

     1  @import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
     2  
     3  html {
     4    font-size: 100%;
     5    color: #fff;
     6    background: #000;
     7    font-weight: 300;
     8    overflow: hidden;
     9  }
    10  
    11  body {
    12    margin: 0;
    13    padding: 0;
    14    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    15      Helvetica, Arial, sans-serif;
    16    font-size: 3rem;
    17  }
    18  
    19  .clock {
    20    font-size: 20vw;
    21  
    22    display: flex;
    23    flex-direction: row;
    24    align-items: baseline;
    25  }
    26  
    27  .seconds {
    28    font-size: 10vw;
    29    margin-left: 1rem;
    30  }
    31  
    32  .date {
    33    font-size: 6vw;
    34    margin-left: 1rem;
    35    margin-bottom: 1rem;
    36  }
    37  
    38  .forecast {
    39    display: flex;
    40    flex-direction: column;
    41    padding-left: 20px;
    42    padding-bottom: 40px;
    43  }
    44  .weather {
    45    display: flex;
    46    flex-direction: row;
    47  }
    48  .weathericon {
    49    position: relative;
    50    width: 150px;
    51  }
    52  
    53  .weather small {
    54    font-size: 0.5em;
    55    display: block;
    56  }
    57  
    58  /* SUNNY */
    59  .sunny {
    60    animation: sunny 15s linear infinite;
    61    background: linear-gradient(
    62      to bottom,
    63      rgba(255, 255, 255, 0) 0%,
    64      rgba(255, 255, 255, 0.8) 50%,
    65      rgba(255, 255, 255, 0) 100%
    66    );
    67    height: 140px;
    68    width: 20px;
    69    margin-left: 50px;
    70    /*margin-left: -15px;*/
    71    /*position: absolute;*/
    72    /*left: 90px;  */
    73    /*top: 20px;*/
    74  }
    75  .sunny:before {
    76    background: linear-gradient(
    77      to bottom,
    78      rgba(255, 255, 255, 0) 0%,
    79      rgba(255, 255, 255, 0.8) 50%,
    80      rgba(255, 255, 255, 0) 100%
    81    );
    82    content: '';
    83    height: 140px;
    84    width: 20px;
    85    opacity: 1;
    86    position: absolute;
    87    bottom: 0px;
    88    left: 0px;
    89    transform: rotate(90deg);
    90  }
    91  .sunny:after {
    92    background: #ffee44;
    93    border-radius: 50%;
    94    box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 15px;
    95    content: '';
    96    height: 80px;
    97    width: 80px;
    98    position: absolute;
    99    left: -30px;
   100    top: 30px;
   101  }
   102  @keyframes sunny {
   103    0% {
   104      transform: rotate(0deg);
   105    }
   106    100% {
   107      transform: rotate(360deg);
   108    }
   109  }
   110  
   111  /* CLOUDY */
   112  .cloudy {
   113    animation: cloudy 5s ease-in-out infinite;
   114    background: #ffffff;
   115    border-radius: 50%;
   116    box-shadow: #ffffff 65px -15px 0 -5px, #ffffff 25px -25px, #ffffff 30px 10px,
   117      #ffffff 60px 15px 0 -10px, #ffffff 85px 5px 0 -5px;
   118    height: 50px;
   119    width: 50px;
   120    margin-top: 50px;
   121    margin-bottom: 50px;
   122    /*margin-left: -60px;*/
   123    /*position: absolute;*/
   124    /*left: 255px;*/
   125    /*top: 70px; */
   126  }
   127  .cloudy:after {
   128    animation: cloudy_shadow 5s ease-in-out infinite;
   129    background: #000000;
   130    border-radius: 50%;
   131    content: '';
   132    height: 15px;
   133    width: 120px;
   134    opacity: 0.2;
   135    position: absolute;
   136    left: 5px;
   137    bottom: -60px;
   138    transform: scale(1);
   139  }
   140  @keyframes cloudy {
   141    50% {
   142      transform: translateY(-20px);
   143    }
   144  }
   145  @keyframes cloudy_shadow {
   146    50% {
   147      transform: translateY(20px) scale(0.7);
   148      opacity: 0.05;
   149    }
   150  }
   151  
   152  /* RAINY */
   153  .rainy {
   154    animation: rainy 5s ease-in-out infinite 1s;
   155    background: #fff;
   156    border-radius: 50%;
   157    box-shadow: #fff 65px -15px 0 -5px, #fff 25px -25px, #fff 30px 10px,
   158      #fff 60px 15px 0 -10px, #fff 85px 5px 0 -5px;
   159    display: block;
   160    height: 50px;
   161    width: 50px;
   162    margin-top: 40px;
   163    margin-bottom: 40px;
   164    /*margin-left: -60px;*/
   165    /*position: absolute;*/
   166    /*left: 80px;*/
   167    /*top: 70px;*/
   168  }
   169  .rainy:after {
   170    animation: rainy_shadow 5s ease-in-out infinite 1s;
   171    background: #000000;
   172    border-radius: 50%;
   173    content: '';
   174    height: 15px;
   175    width: 120px;
   176    opacity: 0.2;
   177    position: absolute;
   178    left: 5px;
   179    bottom: -60px;
   180    transform: scale(1);
   181  }
   182  .rainy:before {
   183    animation: rainy_rain 0.7s infinite linear;
   184    content: '';
   185    background: #000;
   186    border-radius: 50%;
   187    display: block;
   188    height: 8px;
   189    width: 4px;
   190    opacity: 1;
   191    transform: scale(0.9);
   192  }
   193  @keyframes rainy {
   194    50% {
   195      transform: translateY(-20px);
   196    }
   197  }
   198  @keyframes rainy_shadow {
   199    50% {
   200      transform: translateY(20px) scale(0.7);
   201      opacity: 1.05;
   202    }
   203  }
   204  @keyframes rainy_rain {
   205    0% {
   206      box-shadow: rgba(0, 0, 0, 0) 30px 30px, rgba(0, 0, 0, 0) 40px 40px,
   207        #60b1f5 50px 75px, #60b1f5 55px 50px, #60b1f5 70px 100px,
   208        #60b1f5 80px 95px, #60b1f5 110px 45px, #60b1f5 90px 35px;
   209    }
   210    25% {
   211      box-shadow: #60b1f5 30px 45px, #60b1f5 40px 60px, #60b1f5 50px 90px,
   212        #60b1f5 55px 65px, rgba(0, 0, 0, 0) 70px 120px,
   213        rgba(0, 0, 0, 0) 80px 120px, #60b1f5 110px 70px, #60b1f5 90px 60px;
   214    }
   215    26% {
   216      box-shadow: #60b1f5 30px 45px, #60b1f5 40px 60px, #60b1f5 50px 90px,
   217        #60b1f5 55px 65px, rgba(0, 0, 0, 0) 70px 40px, rgba(0, 0, 0, 0) 80px 20px,
   218        #60b1f5 110px 70px, #60b1f5 90px 60px;
   219    }
   220    50% {
   221      box-shadow: #60b1f5 30px 70px, #60b1f5 40px 80px,
   222        rgba(0, 0, 0, 0) 50px 100px, #60b1f5 55px 80px, #60b1f5 70px 60px,
   223        #60b1f5 80px 45px, #60b1f5 110px 95px, #60b1f5 90px 85px;
   224    }
   225    51% {
   226      box-shadow: #60b1f5 30px 70px, #60b1f5 40px 80px, rgba(0, 0, 0, 0) 50px 45px,
   227        #60b1f5 55px 80px, #60b1f5 70px 60px, #60b1f5 80px 45px,
   228        #60b1f5 110px 95px, #60b1f5 90px 85px;
   229    }
   230    75% {
   231      box-shadow: #60b1f5 30px 95px, #60b1f5 40px 100px, #60b1f5 50px 60px,
   232        rgba(0, 0, 0, 0) 55px 95px, #60b1f5 70px 80px, #60b1f5 80px 70px,
   233        rgba(0, 0, 0, 0) 110px 120px, rgba(0, 0, 0, 0) 90px 110px;
   234    }
   235    76% {
   236      box-shadow: #60b1f5 30px 95px, #60b1f5 40px 100px, #60b1f5 50px 60px,
   237        rgba(0, 0, 0, 0) 55px 35px, #60b1f5 70px 80px, #60b1f5 80px 70px,
   238        rgba(0, 0, 0, 0) 110px 25px, rgba(0, 0, 0, 0) 90px 15px;
   239    }
   240    100% {
   241      box-shadow: rgba(0, 0, 0, 0) 30px 120px, rgba(0, 0, 0, 0) 40px 120px,
   242        #60b1f5 50px 75px, #60b1f5 55px 50px, #60b1f5 70px 100px,
   243        #60b1f5 80px 95px, #60b1f5 110px 45px, #60b1f5 90px 35px;
   244    }
   245  }
   246  
   247  /* RAINBOW */
   248  .rainbow {
   249    animation: rainbow 5s ease-in-out infinite;
   250    border-radius: 170px 0 0 0;
   251    box-shadow: #fb323c -2px -2px 0 1px, #f99716 -4px -4px 0 3px,
   252      #fee124 -6px -6px 0 5px, #afdf2e -8px -8px 0 7px, #6ad7f8 -10px -10px 0 9px,
   253      #60b1f5 -12px -12px 0 11px, #a3459b -14px -14px 0 13px;
   254    height: 70px;
   255    width: 70px;
   256    margin-top: 40px;
   257    margin-left: 35px;
   258    margin-bottom: 10px;
   259    /*margin-left: -40px;*/
   260    /*position: absolute;*/
   261    /*left: 610px;*/
   262    /*top: 71px;*/
   263    transform: rotate(40deg);
   264  }
   265  .rainbow:after {
   266    animation: rainbow_shadow 5s ease-in-out infinite;
   267    background: #000000;
   268    border-radius: 50%;
   269    content: '';
   270    opacity: 0.2;
   271    height: 15px;
   272    width: 120px;
   273    position: absolute;
   274    bottom: -23px;
   275    left: 17px;
   276    transform: rotate(-40deg);
   277    transform-origin: 50% 50%;
   278  }
   279  @keyframes rainbow {
   280    50% {
   281      transform: rotate(50deg);
   282    }
   283  }
   284  @keyframes rainbow_shadow {
   285    50% {
   286      transform: rotate(-50deg) translate(10px) scale(0.7);
   287      opacity: 0.05;
   288    }
   289  }
   290  
   291  /* STARRY */
   292  .starry {
   293    animation: starry_star 5s ease-in-out infinite;
   294    background: #fff;
   295    border-radius: 50%;
   296    box-shadow: #ffffff 26px 7px 0 -1px,
   297      rgba(255, 255, 255, 0.1) -36px -19px 0 -1px,
   298      rgba(255, 255, 255, 0.1) -51px -34px 0 -1px, #ffffff -52px -62px 0 -1px,
   299      #ffffff 14px -37px, rgba(255, 255, 255, 0.1) 41px -19px, #ffffff 34px -50px,
   300      rgba(255, 255, 255, 0.1) 14px -71px 0 -1px, #ffffff 64px -21px 0 -1px,
   301      rgba(255, 255, 255, 0.1) 32px -85px 0 -1px, #ffffff 64px -90px,
   302      rgba(255, 255, 255, 0.1) 60px -67px 0 -1px, #ffffff 34px -127px,
   303      rgba(255, 255, 255, 0.1) -26px -103px 0 -1px;
   304    height: 4px;
   305    width: 4px;
   306    opacity: 1;
   307    position: relative;
   308  
   309    margin-top: 110px;
   310    margin-left: 60px;
   311    /*margin-left: -10px;*/
   312    /*position: absolute;*/
   313    /*left: 777px; */
   314    /*top: 150px;*/
   315  }
   316  .starry:after {
   317    animation: starry 5s ease-in-out infinite;
   318    border-radius: 50%;
   319    box-shadow: #ffffff -25px 0;
   320    content: '';
   321    height: 100px;
   322    width: 100px;
   323    position: absolute;
   324    top: -106px;
   325    transform: rotate(-5deg);
   326    transform-origin: 0 50%;
   327  }
   328  
   329  @keyframes starry {
   330    50% {
   331      transform: rotate(10deg);
   332    }
   333  }
   334  @keyframes starry_star {
   335    50% {
   336      box-shadow: rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
   337        #ffffff -36px -19px 0 -1px, #ffffff -51px -34px 0 -1px,
   338        rgba(255, 255, 255, 0.1) -52px -62px 0 -1px,
   339        rgba(255, 255, 255, 0.1) 14px -37px, #ffffff 41px -19px,
   340        rgba(255, 255, 255, 0.1) 34px -50px, #ffffff 14px -71px 0 -1px,
   341        rgba(255, 255, 255, 0.1) 64px -21px 0 -1px, #ffffff 32px -85px 0 -1px,
   342        rgba(255, 255, 255, 0.1) 64px -90px, #ffffff 60px -67px 0 -1px,
   343        rgba(255, 255, 255, 0.1) 34px -127px, #ffffff -26px -103px 0 -1px;
   344    }
   345  }
   346  
   347  /* STORMY */
   348  .stormy {
   349    animation: stormy 5s ease-in-out infinite;
   350    background: #fff;
   351    border-radius: 50%;
   352    box-shadow: #fff 65px -15px 0 -5px, #fff 25px -25px, #fff 30px 10px,
   353      #fff 60px 15px 0 -10px, #fff 85px 5px 0 -5px;
   354    height: 50px;
   355    width: 50px;
   356    margin-top: 50px;
   357    margin-bottom: 50px;
   358    /*margin-left: -70px; */
   359    /*position: absolute;*/
   360    /*left: 947px; */
   361    /*top: 70px; */
   362  }
   363  .stormy:after {
   364    animation: stormy_shadow 5s ease-in-out infinite;
   365    background: #000;
   366    border-radius: 50%;
   367    content: '';
   368    height: 15px;
   369    width: 120px;
   370    opacity: 0.2;
   371    position: absolute;
   372    left: 5px;
   373    bottom: -60px;
   374    transform: scale(1);
   375  }
   376  .stormy:before {
   377    animation: stormy_thunder 2s steps(1, end) infinite;
   378    border-left: 0px solid transparent;
   379    border-right: 7px solid transparent;
   380    border-top: 43px solid yellow;
   381    box-shadow: yellow -7px -32px;
   382    content: '';
   383    display: block;
   384    height: 0;
   385    width: 0;
   386    position: absolute;
   387    left: 57px;
   388    top: 70px;
   389    transform: rotate(14deg);
   390    transform-origin: 50% -60px;
   391  }
   392  @keyframes stormy {
   393    50% {
   394      transform: translateY(-20px);
   395    }
   396  }
   397  @keyframes stormy_shadow {
   398    50% {
   399      transform: translateY(20px) scale(0.7);
   400      opacity: 0.05;
   401    }
   402  }
   403  @keyframes stormy_thunder {
   404    0% {
   405      transform: rotate(20deg);
   406      opacity: 1;
   407    }
   408    5% {
   409      transform: rotate(-34deg);
   410      opacity: 1;
   411    }
   412    10% {
   413      transform: rotate(0deg);
   414      opacity: 1;
   415    }
   416    15% {
   417      transform: rotate(-34deg);
   418      opacity: 0;
   419    }
   420  }
   421  
   422  /* SNOWY */
   423  .snowy {
   424    animation: snowy 5s ease-in-out infinite 1s;
   425    background: #ffffff;
   426    border-radius: 50%;
   427    box-shadow: #ffffff 65px -15px 0 -5px, #ffffff 25px -25px, #ffffff 30px 10px,
   428      #ffffff 60px 15px 0 -10px, #ffffff 85px 5px 0 -5px;
   429    display: block;
   430    height: 50px;
   431    width: 50px;
   432    margin-top: 50px;
   433    margin-bottom: 50px;
   434    /*margin-left: -60px;*/
   435    /*position: absolute;*/
   436    /*left: 1112px;*/
   437    /*top: 70px;*/
   438  }
   439  .snowy:after {
   440    animation: snowy_shadow 5s ease-in-out infinite 1s;
   441    background: #000000;
   442    border-radius: 50%;
   443    content: '';
   444    height: 15px;
   445    width: 120px;
   446    opacity: 0.2;
   447    position: absolute;
   448    left: 8px;
   449    bottom: -60px;
   450    transform: scale(1);
   451  }
   452  .snowy:before {
   453    animation: snowy_snow 2s infinite linear;
   454    content: '';
   455    border-radius: 50%;
   456    display: block;
   457    height: 7px;
   458    width: 7px;
   459    opacity: 0.8;
   460    transform: scale(0.9);
   461  }
   462  @keyframes snowy {
   463    50% {
   464      transform: translateY(-20px);
   465    }
   466  }
   467  @keyframes snowy_shadow {
   468    50% {
   469      transform: translateY(20px) scale(0.7);
   470      opacity: 0.05;
   471    }
   472  }
   473  @keyframes snowy_snow {
   474    0% {
   475      box-shadow: rgba(238, 238, 238, 0) 30px 30px,
   476        rgba(238, 238, 238, 0) 40px 40px, #eeeeee 50px 75px, #eeeeee 55px 50px,
   477        #eeeeee 70px 100px, #eeeeee 80px 95px, #eeeeee 110px 45px,
   478        #eeeeee 90px 35px;
   479    }
   480    25% {
   481      box-shadow: #eeeeee 30px 45px, #eeeeee 40px 60px, #eeeeee 50px 90px,
   482        #eeeeee 55px 65px, rgba(238, 238, 238, 0) 70px 120px,
   483        rgba(238, 238, 238, 0) 80px 120px, #eeeeee 110px 70px, #eeeeee 90px 60px;
   484    }
   485    26% {
   486      box-shadow: #eeeeee 30px 45px, #eeeeee 40px 60px, #eeeeee 50px 90px,
   487        #eeeeee 55px 65px, rgba(238, 238, 238, 0) 70px 40px,
   488        rgba(238, 238, 238, 0) 80px 20px, #eeeeee 110px 70px, #eeeeee 90px 60px;
   489    }
   490    50% {
   491      box-shadow: #eeeeee 30px 70px, #eeeeee 40px 80px,
   492        rgba(238, 238, 238, 0) 50px 100px, #eeeeee 55px 80px, #eeeeee 70px 60px,
   493        #eeeeee 80px 45px, #eeeeee 110px 95px, #eeeeee 90px 85px;
   494    }
   495    51% {
   496      box-shadow: #eeeeee 30px 70px, #eeeeee 40px 80px,
   497        rgba(238, 238, 238, 0) 50px 45px, #eeeeee 55px 80px, #eeeeee 70px 60px,
   498        #eeeeee 80px 45px, #eeeeee 110px 95px, #eeeeee 90px 85px;
   499    }
   500    75% {
   501      box-shadow: #eeeeee 30px 95px, #eeeeee 40px 100px, #eeeeee 50px 60px,
   502        rgba(238, 238, 238, 0) 55px 95px, #eeeeee 70px 80px, #eeeeee 80px 70px,
   503        rgba(238, 238, 238, 0) 110px 120px, rgba(238, 238, 238, 0) 90px 110px;
   504    }
   505    76% {
   506      box-shadow: #eeeeee 30px 95px, #eeeeee 40px 100px, #eeeeee 50px 60px,
   507        rgba(238, 238, 238, 0) 55px 35px, #eeeeee 70px 80px, #eeeeee 80px 70px,
   508        rgba(238, 238, 238, 0) 110px 25px, rgba(238, 238, 238, 0) 90px 15px;
   509    }
   510    100% {
   511      box-shadow: rgba(238, 238, 238, 0) 30px 120px,
   512        rgba(238, 238, 238, 0) 40px 120px, #eeeeee 50px 75px, #eeeeee 55px 50px,
   513        #eeeeee 70px 100px, #eeeeee 80px 95px, #eeeeee 110px 45px,
   514        #eeeeee 90px 35px;
   515    }
   516  }
   517  
   518  .device-list {
   519    display: flex;
   520    flex-direction: row;
   521  }
   522  
   523  .device-list-item {
   524    display: flex;
   525    flex-direction: column;
   526    margin-bottom: 1rem;
   527    margin-left: 1rem;
   528    align-items: center;
   529  }