luz tokens

Toggle class name on click in jQuery

by Marc Chehab

HTML

<div id="content" class="luz">
<span>300</span>
</div>

<div id="border" class="luz">
<span>300</span>
</div>

CSS

body {
  background: #20262E;
  font-family: Helvetica;
}

.luz {
  position:fixed;
  bottom:10px;
  margin-left:-25px;
  width:50px;
  height:50px;
  border-radius:25px;
  box-sizing: border-box;
}
#border {
  padding:0px;
  left:30%;
  box-shadow:
    inset 0 0 2px 2px #ffffffbb, /*inner*/
    inset 0 0 5px 5px #0000ff88, /*inner*/
    0 0 2px 2px #ffffffbb, /* outer*/
    0 0 5px 5px #0000ff88; /* outer*/
}
#border span {
  position:absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  font-family: Impact "Arial Black";
  font-weight:600;
  font-size: 1.3rem;
  color:#aaaaaa;
}
#content {
  padding:0px;
  left:50%;
  background: white;
  box-shadow:
    0 0 30px 0px #fff,  /* inner white */
    0 0 50px 10px #f0f, /* middle magenta */
    0 0 70px 20px #0ff; /* outer cyan */
}
#content span {
  position:absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  font-family: Impact "Arial Black";
  font-weight:600;
  font-size: 1.3rem;
  color:#aaaaaa;
}