From 0f8573534e0d8306c4c7ddd23d2ca78d1578ed63 Mon Sep 17 00:00:00 2001 From: ystiff <114044523+ystiff@users.noreply.github.com> Date: Mon, 17 Mar 2025 18:01:52 +0800 Subject: [PATCH] Added style --- style.css | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..7f4e1e1 --- /dev/null +++ b/style.css @@ -0,0 +1,134 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); + +body { + margin: 0; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + font-family: Roboto Mono; + line-height: 1.6rem; +} + +*[onclick] { + cursor: pointer; +} + +.bar { + display: flex; + justify-content: space-between; +} + +#header { + margin: 0; + margin: 1.2rem 0 0 0; + line-height: 2rem; +} + +#command-center { + margin: 0 0.4rem; + width: 100%; + max-width: 40rem; + display: flex; + flex-direction: column; + justify-content: center; + transform: translateY(-2vh); +} + +#theme-area{ + margin-top: 1rem; + padding: 1.4rem 1rem; + border-radius: 0.4rem; + background: #eaeaea; + display: grid; + grid-gap: 1rem; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +#theme-center{ + margin: 0 0.4rem; + width: 100%; + max-width: 40rem; + display: flex; + flex-direction: column; + justify-content: center; + transform: translateY(-2vh); +} + +.theme-button{ + padding: 1rem 0; + background: gray; + border-radius: 0.4rem; + text-align: center; + font-size: .8rem; +} + +.theme-button:hover{ + cursor: pointer; + box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2); +} + +/* #left-wing {} */ + +/* #right-wing {} */ + +#typing-area { + margin-top: 1rem; + padding: 1.4rem 1rem; + border-radius: 0.4rem; + background: #eaeaea; +} + +#text-display { + margin-bottom: 1rem; + overflow: hidden; +} + +#input-field { + width: 100%; + border: none; + font: inherit; + padding: 0.4rem 1rem; + border-radius: 0.2rem; + font-size: 1.2rem; +} + +#redo-button { + margin-left: 0.7rem; + border: none; + font: inherit; + padding: 0.4rem 1rem; + border-radius: 0.2rem; + font-size: 1.2rem; + cursor: pointer; +} + +#footer { + margin-bottom: 1.2rem; + display: flex; +} + +#footer *{ + text-decoration: none; + margin: 0 .5rem; + color: inherit; +} + +#footer .button{ + cursor: pointer; +} + +#footer a:visited{ + color: unset; +} + +.hidden{ + display: none !important; +} + +body, #header, #left-wing, #right-wing, #typing-area, #theme-area, #theme-center, +#text-display, #redo-button, #footer, #highlight { + transition: all .4s ease-in-out 0s; + +} \ No newline at end of file