From 9c73659ceac9386a38ceb28bace28a822355628b Mon Sep 17 00:00:00 2001 From: Reimar Date: Sat, 15 Mar 2025 15:13:05 +0100 Subject: [PATCH] Extract stylesheet --- index.html | 97 +----------------------------------------------------- style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+), 96 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index e6d8b65..4f038d1 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ + -

Start a new WhatsApp chat

diff --git a/style.css b/style.css new file mode 100644 index 0000000..d87e79c --- /dev/null +++ b/style.css @@ -0,0 +1,95 @@ +body { + background-color: #EFE9DD; + text-align: center; + font-family: sans-serif; +} +* { + -webkit-tap-highlight-color: transparent; +} +h1 { + margin-bottom: 0; + opacity: 0.7; +} +p { + opacity: 0.5; + font-size: 0.85rem; + max-width: 400px; + margin: 1rem auto; +} +summary { + opacity: 0.5; + font-size: 0.85rem; + margin: 0.5rem auto; + cursor: pointer; + user-select: none; +} +summary:focus { + outline: none; + opacity: 0.7; +} +#desc { + margin-top: 2rem; + font-size: 0.75rem; +} +.icon { + width: 1.25rem; + height: 1.25rem; + position: relative; + top: 0.25rem; +} + +input, textarea { + padding: 0.5rem 1rem; + border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.5); + transition: all 150ms; + font-size: 1rem; +} +textarea { + resize: vertical; + font-family: sans-serif; + font-size: 0.75rem; + width: 100%; + max-width: 400px; + box-sizing: border-box; +} +input:focus, textarea:focus { + outline: none; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); +} + +/* Used for copying to clipboard */ +#copy-input { + opacity: 0; + pointer-events: none; +} + +button { + background-color: inherit; + border: none; + margin: 0.25rem 0; + opacity: 0.5; + cursor: pointer; + transition: all 150ms; +} +button:hover, button:focus { + opacity: 1; + outline: none; +} + +#send { + background-color: #1DAA61; + color: white; + border: none; + padding: 0.5rem 2rem; + margin-top: 1rem; + border-radius: 4px; + opacity: 1; +} +#send:active { + background-color: #18864D; +} +#send:focus { + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); +} +