main
90e35a3 ยท 1 year ago 22 commits
  1#tooltip{
  2    color: var(--gold);
  3    margin-top: 25px;
  4    margin-bottom: 50px;
  5}
  6
  7:root {
  8    --pixel-size: 1;
  9 }
 10 
 11 .Character {
 12    width: calc(48px * var(--pixel-size));
 13    height: calc(96px * var(--pixel-size));
 14    overflow: hidden;
 15    position:relative;
 16    visibility: hidden;
 17    display: flex;
 18}
 19
 20.character-dialog{
 21    font-size: 10px;
 22    color: var(--gold);
 23    text-shadow: 1px 1px 0px var(--black);
 24    text-align: center;
 25    width: 100%;
 26    margin-bottom: 5px;
 27    visibility: hidden;
 28}
 29 
 30 .Character_spritesheet {
 31    animation: moveSpritesheet 1.2s steps(12) infinite;
 32    width: calc(576px * var(--pixel-size));
 33    position: absolute;
 34 }
 35
 36 .pixelart {
 37    image-rendering: pixelated;
 38 }
 39
 40 .face-down {
 41    top: calc(-96px * var(--pixel-size)) !important;
 42 }
 43
 44 .face-left {
 45    top: calc(-192px * var(--pixel-size));
 46 }
 47 
 48 .face-right {
 49    top: calc(-288px * var(--pixel-size));
 50 }
 51
 52 .face-up {
 53    top: calc(-384px * var(--pixel-size)) !important;
 54 }
 55 
 56 @keyframes moveSpritesheet {
 57    from {
 58       transform: translate3d(0px,0,0)
 59    }
 60    to {
 61       transform: translate3d(-100%,0,0)
 62    }
 63 }
 64 
 65 .keyboard {
 66   position: relative;
 67   width: 200px;
 68   height: 120px;
 69   display: none;
 70}
 71
 72 .keyboard button {
 73   color : white;
 74   text-decoration: none;
 75   border: 3px solid white;
 76   border-radius: 5px;
 77   box-shadow: -2px 2px;
 78   flex-grow: 1;
 79   font-family: monospace;
 80   background: black;
 81   font-size: 20px;
 82   position: absolute;
 83   width: 50px;
 84   height: 50px;
 85   display: flex;
 86   justify-content: center;
 87   align-items: center;
 88   cursor: pointer;
 89}
 90
 91.left {
 92   left: 0;
 93}
 94
 95.right {
 96   right: 0;
 97   box-shadow: 2px -2px !important;
 98}
 99
100.top, .bottom {
101   left: 50%;
102   transform: translateX(-50%);
103}
104
105.bottom, .left, .right {
106   bottom: 0px;
107}
108
109.lit{
110   background: 3px solid var(--gold) !important;
111   color: var(--gold) !important;
112   border: 3px solid var(--gold) !important;
113}