...
Code Block | ||
---|---|---|
| ||
body { background: lightgrey; display: flex; flex-direction: column; justify-content: center; } #keyboard { left: 2.8rem; right: 2.8rem; z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; } .keyboard__button--close { display: block; position: absolute; z-index: 9999; top: 2rem; left: 2rem; width: 4rem; height: 4rem; } .keyboard__row, .keyboard__row--numerical { display: flex; } .keyboard__button { font-size: 1.5rem; height: 3.5rem; min-width: fit-content; width: 3.5rem; margin: 0.25rem; border-radius: 0.1em; background: white; color: black; font-family: Arial, Helvetica, sans-serif; } .keyboard__button--space:active { widthbackground-color: 30vw#ddd; } .keyboard__button--enter {transition: background-color 0s; widthanimation: fadeEffect 70.25vw2s; } .keyboard__button--toggle { @keyframes fadeEffect { 0% { widthopacity: 7.25vw1; } } 100% { opacity: 0.6; } } .keyboard__button--backspace { width: 7vw30vw; } .keyboard__button--shiftenter { width: 5vw7.25vw; } .keyboard__button--toggle { :not(inputwidth: 7.25vw; } .keyboard__button--back { width: 7vw; } .keyboard__button--shift { width: 5vw; } :not(input):not(textarea), :not(input):not(textarea)::after, :not(input):not(textarea)::before { -webkit-user-select: none; user-select: none; cursor: default; } input, button, textarea, :focus { outline: none; } /*720p horiz*/ @media only screen and (min-height: 216px) and (max-height: 216px) { #keyboard { margin-top: 1rem; } .keyboard__button { font-size: 1rem; height: 2.5rem; min-width: fit-content; width: 2.5rem; margin: 0.5%; border-radius: 0.1em; background: white; color: black; font-family: Arial, Helvetica, sans-serif; } .keyboard__row--numerical > .keyboard_button--numerical { font-size: 1.4rem; margin: 1%; } .keyboard__row--numerical > .keyboard__button--space--numerical { width: 5vw; } .keyboard__row--numerical > .keyboard__button--enter--numerical { width: 3.5vw; } .keyboard__row--numerical > .keyboard__button--back--numerical { width: 2vw; } .keyboard__button--space { width: 20vw; } .keyboard__button--enter { width: 5vw; } .keyboard__button--toggle { width: 5vw; } .keyboard__button--back { width: 5vw; } .keyboard__button--shift { width: 3.5vw; } } /*720p vert*/ @media only screen and (min-height: 384px) and (max-height: 384px) { #keyboard { margin-top: 4rem; } .keyboard__button { font-size: 1.7rem; height: 3rem; min-width: fit-content; width: 3rem; margin: 0.5%; border-radius: 0.1em; background: white; color: black; font-family: Arial, Helvetica, sans-serif; } .keyboard__row--numerical > .keyboard_button--numerical { font-size: 2.2rem; margin: 2%; } .keyboard__row--numerical > .keyboard__button--space--numerical { width: 5rem; } .keyboard__row--numerical > .keyboard__button--enter--numerical { width: 4rem; } .keyboard__row--numerical > .keyboard__button--back--numerical { width: 2.5rem; } .keyboard__button--space { width: 25rem; } .keyboard__button--space--numerical { width: 6rem; } .keyboard__button--enter { width: 8.5rem; } .keyboard__button--toggle { width: 8.5rem; } .keyboard__button--back { width: 6rem; } .keyboard__button--shift { width: 5rem; } } /*1080p horiz*/ @media only screen and (min-height: 324px) and (max-height: 324px) { #keyboard { margin-top: 2.5rem; } .keyboard__button { font-size: 1.5rem; height: 3rem; min-width: fit-content; width: 3rem; margin: 0.5%; border-radius: 0.1em; background: white; color: black; font-family: Arial, Helvetica, sans-serif; } .keyboard__row--numerical > .keyboard_button--numerical { font-size: 1.8rem; margin: 2%; } .keyboard__row--numerical > .keyboard__button--space--numerical { width: 7.5vw; } .keyboard__row--numerical > .keyboard__button--enter--numerical { width: 5vw; } .keyboard__row--numerical > .keyboard__button--back--numerical { width: 3.5vw; } .keyboard__button--space { width: 30vw; } .keyboard__button--enter { width: 7.25vw; } .keyboard__button--toggle { width: 7.25vw; } .keyboard__button--back { width: 7vw; } .keyboard__button--shift { width: 5vw; } } /*1080p vert*/ @media only screen and (min-height: 576px) and (max-height: 576px) { #keyboard { margin-top: 8rem; } .keyboard__button { font-size: 2.5rem; height: 5rem; min-width: fit-content; width: 5rem; margin: 0.5%; border-radius: 0.1em; background: white; color: black; font-family: Arial, Helvetica, sans-serif; } .keyboard__row--numerical > .keyboard_button--numerical { font-size: 2.8rem; margin: 2%; } .keyboard__row--numerical > .keyboard__button--space--numerical { width: 7.5rem; } .keyboard__row--numerical > .keyboard__button--enter--numerical { width: 5.5rem; } .keyboard__row--numerical > .keyboard__button--back--numerical { width: 4rem; } .keyboard__button--space { width: 30rem; } .keyboard__button--space--numerical { width: 8rem; } .keyboard__button--enter { width: 11.25rem; } .keyboard__button--toggle { width: 11.25rem; } .keyboard__button--back { width: 8rem; } .keyboard__button--shift { width: 7rem; } } /*4k horiz*/ @media only screen and (min-height: 648px) and (max-height: 648px){ #keyboard { margin-top: 5rem; } .keyboard__button { font-size: 3.5rem; height: 7rem; min-width: fit-content; width: 7rem; margin: 0.5%; border-radius: 0.1em; background: white; color: black; font-family: Arial, Helvetica, sans-serif; } .keyboard__row--numerical > .keyboard_button--numerical { font-size: 3.8rem; margin: 2%; } .keyboard__row--numerical > .keyboard__button--space--numerical { width: 16rem; } .keyboard__row--numerical > .keyboard__button--enter--numerical { width: 5.5rem; } .keyboard__row--numerical > .keyboard__button--back--numerical { width: 4rem; } .keyboard__button--space { width: 50rem; } .keyboard__button--space--numerical { width: 25rem; } .keyboard__button--enter { width: 11.25rem; } .keyboard__button--toggle { width: 11.25rem; } .keyboard__button--back { width: 10rem; } .keyboard__button--shift { width: 8rem; } } /*4k vert*/ @media only screen and (min-height: 1152px) and (max-height: 1152px) { #keyboard { margin-top: 17rem; } .keyboard__button { font-size: 4rem; height: 10rem; min-width: fit-content; width: 10rem; margin: 0.5%; border-radius: 0.1em; background: white; color: black; font-family: Arial, Helvetica, sans-serif; } .keyboard__row--numerical > .keyboard_button--numerical { font-size: 3.8rem; margin: 2%; } .keyboard__row--numerical > .keyboard__button--space--numerical { width: 26rem; } .keyboard__row--numerical > .keyboard__button--enter--numerical { width: 7rem; } .keyboard__row--numerical > .keyboard__button--back--numerical { width: 6.5rem; } .keyboard__button--space { width: 80rem; } .keyboard__button--space--numerical { width: 40rem; } .keyboard__button--enter { width: 14.25rem; } .keyboard__button--toggle { width: 14.25rem; } .keyboard__button--back { width: 13rem; } .keyboard__button--shift { width: 11rem; } } |
...