From 8d60c7f93407988ee0232ea90980028f299cb0f3 Mon Sep 17 00:00:00 2001 From: srdusr Date: Fri, 26 Sep 2025 13:39:28 +0200 Subject: Initial Commit --- web/src/styles/ThemeToggle.css | 70 ++++++++++++++++++++++++++++++++++++++++++ web/src/styles/TypingGame.css | 19 ++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 web/src/styles/ThemeToggle.css create mode 100644 web/src/styles/TypingGame.css (limited to 'web/src/styles') diff --git a/web/src/styles/ThemeToggle.css b/web/src/styles/ThemeToggle.css new file mode 100644 index 0000000..818a1ba --- /dev/null +++ b/web/src/styles/ThemeToggle.css @@ -0,0 +1,70 @@ +.theme-toggle { + position: fixed; + top: 1rem; + right: 1rem; + background: none; + border: none; + padding: 0.5rem; + cursor: pointer; + z-index: 1000; + transition: transform 0.3s ease; +} + +.theme-toggle:hover { + transform: scale(1.1); +} + +.toggle-track { + width: 3rem; + height: 1.5rem; + background-color: var(--background-color); + border: 2px solid var(--primary-color); + border-radius: 1rem; + position: relative; + transition: background-color 0.3s ease; +} + +.toggle-thumb { + width: 1.2rem; + height: 1.2rem; + background-color: var(--primary-color); + border-radius: 50%; + position: absolute; + top: 0.1rem; + left: 0.1rem; + transition: transform 0.3s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.theme-toggle.dark .toggle-thumb { + transform: translateX(1.5rem); +} + +.theme-toggle svg { + width: 1rem; + height: 1rem; + color: var(--background-color); +} + +@media (max-width: 768px) { + .theme-toggle { + top: 0.5rem; + right: 0.5rem; + } + + .toggle-track { + width: 2.5rem; + height: 1.2rem; + } + + .toggle-thumb { + width: 1rem; + height: 1rem; + } + + .theme-toggle.dark .toggle-thumb { + transform: translateX(1.2rem); + } +} \ No newline at end of file diff --git a/web/src/styles/TypingGame.css b/web/src/styles/TypingGame.css new file mode 100644 index 0000000..e5f5c8e --- /dev/null +++ b/web/src/styles/TypingGame.css @@ -0,0 +1,19 @@ +.space { + color: #666; + opacity: 0.7; +} + +.space.correct { + color: #4CAF50; + opacity: 1; +} + +.space.incorrect { + color: #f44336; + opacity: 1; +} + +.space.current { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 2px; +} \ No newline at end of file -- cgit v1.2.3