diff --git a/styles/buttons.css b/styles/buttons.css new file mode 100644 index 0000000..72a1a85 --- /dev/null +++ b/styles/buttons.css @@ -0,0 +1,84 @@ +/* CSS for System64.dev buttons, by IDeletedSystem64. Under MIT License (v4.14.23) */ +/* Heavily based from 98css, Check it out here: https://jdan.github.io/98.css/ */ +@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); +/* Import dem fonts */ + +input { + -webkit-appearance: none; + appearance: none; + background: #dad9d9; + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; + + min-width: 200px; + min-height: 16px; + + color: black; + font-size: 17pt; + font-family: 'Share Tech Mono', monospace; +} + +input:active { + background: #acacac; + box-shadow: inset 0em 0em +} + +.button { + display: inline-flex; + font-size: 16px; + text-align: center; + border: none; + border-radius: 4px; + outline: none; + box-shadow: none; + cursor: pointer; + transition: 0.3s ease-in-out; +} + +.button.button1 { + border-radius: 0; + box-sizing: border-box; + min-height: 23px; + color: #000; + padding: 0 2px 2px 0; + border-top: 1px solid #CCCCCC; + border-right: 0.1px solid transparent; + border-bottom: 1px solid #333333; + border-left: 1px solid #CCCCCC; + background-color: #979797; + width: 15%; +} + +.button.button1 span { + -webkit-appearance: none; + appearance: none; + margin-left: auto; + margin-right: auto; + display: block; + width: 100%; + background: #dad9d9; + font-size: 170%; + font-family: 'Share Tech Mono', monospace; + box-shadow: inset -0.05em -0.05em black; +} + +.button.button1 span:hover, +.button.button1:hover + .button.button1 span { + background-color: #ACACAC; + border-top: 1px solid transparent; + border-right: 0.1px solid #dad9d9; + border-bottom: 1px solid #dad9d9; + border-left: 1px solid transparent; + box-shadow: inset -0.05em -0.05em transparent;} +.button.button1:hover { + background-color: #ACACAC; +} +/* *vomits* */ + +@media (max-width: 64em) { +input { + min-height: 70px; + min-width: 250px; + font-size: 32pt; +} +} \ No newline at end of file