From 1d6a1ef407f19fb2b5f5448b175bb7e7ff6b3a35 Mon Sep 17 00:00:00 2001 From: Natasha Moongrave Date: Sun, 22 Mar 2026 22:47:50 +0100 Subject: moved ./style.css to src/Style/style.css --- src/Style/style.css | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 src/Style/style.css (limited to 'src/Style/style.css') diff --git a/src/Style/style.css b/src/Style/style.css new file mode 100644 index 0000000..61e39e0 --- /dev/null +++ b/src/Style/style.css @@ -0,0 +1,176 @@ +/* Synthwave Terminal */ + +/* Define the font */ +@font-face { + font-family: 'Hacked'; + src: url('./fonts/Hacked/Hacked-KerX.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +/* Make canvas sit behind everything */ +canvas { + position: fixed; + top: 0; + left: 0; + z-index: -1; +} +html, body { + height: 100%; + margin: 0; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +html::-webkit-scrollbar, +body::-webkit-scrollbar { + display: none; +} +html { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +body { + background: radial-gradient(ellipse at bottom, #1a0f2e 0%, #090012 60%, #050008 100%); + color: #e0d6ff; + font-family: "Courier New", monospace; + margin: 0; + padding: 0; + +} + +/* Floating terminal panel */ +.container { + /* visibility: hidden; */ + position: relative; + top: 35%; + z-index: 1; + max-width: 800px; + margin: 80px auto; + padding: 30px; + background: rgba(10, 0, 25, 0.6); + border: 1px solid rgba(255, 0, 255, 0.4); + box-shadow: + 0 0 15px rgba(255, 0, 255, 0.2), + 0 0 40px rgba(0, 255, 255, 0.1); + backdrop-filter: blur(6px); +} + +/* Title glow */ +h1 { + font-size: 42px; + text-align: center; + font-family: 'Hacked'; + color: #ff00ff; + text-shadow: + 0 0 5px #ff00ff, + 0 0 15px rgba(255, 0, 255, 0.6); +} + +/* Subtitle */ +.subtitle { + text-align: center; + font-size: 18px; + margin-bottom: 40px; + color: #c9b6ff; +} + +/* Section headers */ +h2 { + font-size: 22px; + margin-top: 30px; + color: #00ffff; + text-shadow: 0 0 8px rgba(0, 255, 255, 0.6); +} + +/* Terminal-style list */ +ul { + list-style: none; + padding-left: 20px; +} + +li::before { + content: "> "; + color: #ff00ff; +} + +/* Links */ +a { + color: #00ffff; + text-decoration: none; +} + +a:hover { + text-shadow: 0 0 8px #00ffff; +} + +/* Exclude h1 links */ +h1 a { + color: inherit; /* take h1 color */ + text-decoration: none; /* remove underline if any */ + text-shadow: none; /* remove link glow */ +} + +/* Terminal-style form elements */ +input[type="text"], +textarea, +button { + font-family: 'Hacked', monospace; + font-size: 16px; + background: rgba(10, 0, 25, 0.6); + color: #e0d6ff; + border: 1px solid #ff00ff; + border-radius: 4px; + padding: 10px; + outline: none; + box-shadow: + 0 0 5px #ff00ff, + 0 0 15px rgba(255, 0, 255, 0.2); + backdrop-filter: blur(4px); + transition: all 0.2s ease-in-out; + width: 100%; + margin-bottom: 15px; +} + +input[type="text"] { + font-family: "Courier New", monospace; +} + +/* Textarea bigger height */ +textarea { + min-height: 100px; + resize: vertical; +} + +/* Hover/focus effects */ +input[type="text"]:focus, +textarea:focus { + border-color: #00ffff; + box-shadow: + 0 0 5px #00ffff, + 0 0 15px rgba(0, 255, 255, 0.2); +} + +/* Button */ +button { + cursor: pointer; + background: #ff00ff; + color: #000; + font-weight: bold; + border: none; + box-shadow: + 0 0 10px #ff00ff, + 0 0 20px rgba(255, 0, 255, 0.2); +} + +button:hover { + background: #ff66ff; + box-shadow: + 0 0 15px #ff66ff, + 0 0 30px rgba(255, 102, 255, 0.3); +} + +/* Footer */ +footer { + text-align: center; + margin-top: 60px; + font-size: 14px; + color: #888; +} -- cgit v1.2.3