diff --git a/templates/base.html b/templates/base.html index e5b228d..9b8eeea 100644 --- a/templates/base.html +++ b/templates/base.html @@ -7,7 +7,7 @@ - +
diff --git a/templates/main.css b/templates/main.css index 9a513b5..e69de29 100644 --- a/templates/main.css +++ b/templates/main.css @@ -1,79 +0,0 @@ -:root { - --background-color: #121212; - --surface-color: #1e1e1e; - --primary-color: #9146FF; /* Twitch Purple */ - --on-primary-color: #FFFFFF; - --text-color: #E0E0E0; - --text-secondary-color: #A0A0A0; - --border-color: #333333; - --font-family: 'Inter', sans-serif; -} - -body { - background-color: var(--background-color); - color: var(--text-color); - font-family: var(--font-family); - margin: 0; - padding: 2rem; - display: flex; - justify-content: center; - align-items: flex-start; - min-height: 100vh; -} - -.container { - width: 100%; - max-width: 800px; - text-align: center; -} - -.main-header { - margin-bottom: 3rem; - border-bottom: 1px solid var(--border-color); - padding-bottom: 1rem; -} - -.main-header h1 { - margin: 0; - font-weight: 700; -} - -.card { - background-color: var(--surface-color); - border: 1px solid var(--border-color); - border-radius: 8px; - padding: 2rem; - margin-bottom: 1.5rem; - text-align: left; -} - -.card h2 { - margin-top: 0; - border-bottom: 1px solid var(--border-color); - padding-bottom: 0.5rem; - margin-bottom: 1rem; -} - -.btn { - display: inline-block; - background-color: var(--primary-color); - color: var(--on-primary-color); - padding: 12px 24px; - border-radius: 6px; - text-decoration: none; - font-weight: 500; - border: none; - cursor: pointer; - transition: background-color 0.2s ease-in-out; -} - -.btn:hover { - background-color: #7a3ad9; /* Darker purple */ -} - -.btn-twitch { - display: flex; - align-items: center; - gap: 10px; - font-size: 1.1rem; -} \ No newline at end of file diff --git a/templates/overlay-bright-green.css b/templates/overlay-bright-green.css new file mode 100644 index 0000000..35f6db8 --- /dev/null +++ b/templates/overlay-bright-green.css @@ -0,0 +1,20 @@ +body { + background-color: transparent; + color: #FFFFFF; + font-family: 'Inter', sans-serif; + font-size: 16px; + margin: 0; + padding: 10px; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); + overflow: hidden; +} +.chat-message { + padding: 6px 10px; + background-color: rgba(10, 10, 10, 0.5); + border-left: 3px solid #1ED760; /* Bright Green Accent */ + margin-bottom: 8px; +} +.username { + font-weight: 800; + color: #1ED760; /* Bright Green */ +} \ No newline at end of file diff --git a/templates/overlay-bright-green.html b/templates/overlay-bright-green.html index 64ec412..7d7a4ad 100644 --- a/templates/overlay-bright-green.html +++ b/templates/overlay-bright-green.html @@ -6,7 +6,7 @@ - +
diff --git a/templates/overlay-dark-purple.css b/templates/overlay-dark-purple.css new file mode 100644 index 0000000..b7ef871 --- /dev/null +++ b/templates/overlay-dark-purple.css @@ -0,0 +1,20 @@ +body { + background-color: transparent; + color: #E0E0E0; + font-family: 'Inter', sans-serif; + font-size: 16px; + margin: 0; + padding: 10px; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); + overflow: hidden; +} +.chat-message { + padding: 4px 8px; + background-color: rgba(24, 24, 27, 0.6); + border-radius: 4px; + margin-bottom: 8px; +} +.username { + font-weight: 800; + color: #a970ff; /* Twitch Purple */ +} \ No newline at end of file diff --git a/templates/overlay-dark-purple.html b/templates/overlay-dark-purple.html index 7574998..3dd0a04 100644 --- a/templates/overlay-dark-purple.html +++ b/templates/overlay-dark-purple.html @@ -6,7 +6,7 @@ - +