src/App.css

   1 html {
   2   box-sizing: border-box;
   3 }
   4
   5 *,
   6 *:before,
   7 *:after {
   8   box-sizing: inherit;
   9 }
  10
  11 body {
  12   font-family: monospace;
  13 }
  14
  15 .hextrapolate-footer {
  16   text-align: center;
  17 }
  18
  19 .hextrapolate-field {
  20   display: flex;
  21   flex-grow: 5;
  22   font-size: 12px;
  23   position: relative;
  24 }
  25
  26 .hextrapolate-field input {
  27   flex-grow: 80;
  28   font-family: monospace;
  29 }
  30
  31 .hextrapolate-row {
  32   align-items: center;
  33   display: flex;
  34   margin-bottom: 12px;
  35 }
  36
  37 .hextrapolate {
  38   padding: 0 64px;
  39 }
  40
  41 .hextrapolate h1 {
  42   text-align: center;
  43 }
  44
  45 .hextrapolate-base {
  46   display: inline-block;
  47   font-size: 12px;
  48   padding-right: 12px;
  49   text-align: right;
  50   width: 128px;
  51 }
  52
  53 .hextrapolate-copy {
  54   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSIjNDQ0IiBkPSJNMjAgOFYwSDZMMCA2djE4aDEydjhoMjBWOEgyMHpNNiAyLjgyOFY2SDIuODI4TDYgMi44Mjh6TTIgMjJWOGg2VjJoMTB2NmwtNiA2djhIMnptMTYtMTEuMTcyVjE0aC0zLjE3MkwxOCAxMC44Mjh6TTMwIDMwSDE0VjE2aDZ2LTZoMTB2MjB6Ii8+PC9zdmc+);
  55   background-repeat: no-repeat;
  56   background-size: 16px 16px;
  57   cursor: pointer;
  58   display: inline-block;
  59   height: 16px;
  60   margin-left: 8px;
  61   overflow: hidden;
  62   position: relative;
  63   text-indent: -10000px;
  64   top: 4px;
  65   user-select: none;
  66   width: 16px;
  67 }
  68
  69 .hextrapolate-copy-status {
  70   color: #0f0;
  71   opacity: 0;
  72   position: absolute;
  73   right: 4px;
  74   top: 4px;
  75   transform: scale(1);
  76   transition: transform .25s, opacity .25s;
  77   user-select: none;
  78 }
  79
  80 .hextrapolate-copy-success {
  81   opacity: .5;
  82   transform: scale(5);
  83   transition: transform .5s, opacity .5s;
  84 }