diff --git a/examples/rainbow_tweet/chrome_extension/manifest.json b/examples/rainbow_tweet/chrome_extension/manifest.json index e2429db..2b9be91 100644 --- a/examples/rainbow_tweet/chrome_extension/manifest.json +++ b/examples/rainbow_tweet/chrome_extension/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 3, "name": "Rainbow-Tweet", "description": "The Rainbow-Tweet plugin allows the user to convert any tweet into positive language by clicking a button on the tweet.", - "version": "0.0.0.1", + "version": "0.0.1.0", "icons": { "128": "logo.png" }, diff --git a/examples/rainbow_tweet/chrome_extension/popup.html b/examples/rainbow_tweet/chrome_extension/popup.html index 7b322aa..f3259fe 100644 --- a/examples/rainbow_tweet/chrome_extension/popup.html +++ b/examples/rainbow_tweet/chrome_extension/popup.html @@ -6,14 +6,14 @@
-

Twitter Rewrite: Extension Options

+

Rainbow-Tweet: Extension Options



Enter your OpenAI API Key to start using the plugin. If you don't have one, create it here. + target="_blank">here. After inserting the key, you need to reload the page
diff --git a/examples/rainbow_tweet/chrome_extension/styles.css b/examples/rainbow_tweet/chrome_extension/styles.css index 2169abf..bf6f9c9 100644 --- a/examples/rainbow_tweet/chrome_extension/styles.css +++ b/examples/rainbow_tweet/chrome_extension/styles.css @@ -1,7 +1,5 @@ .modify-button { - /* transparent */ - background-color: #00000000; - color: white; + /* common styles */ border: none; padding: 5px 10px; text-align: center; @@ -11,29 +9,24 @@ margin: 4px 2px; cursor: pointer; border-radius: 3px; - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add some shadow */ + background: transparent; /* Make the button transparent */ } +/* Dark mode */ +@media (prefers-color-scheme: dark) { + .modify-button { + color: white; /* Light text for dark mode */ + } +} -/*!* Dynamic rainbow colors for each letter *!*/ -/*@keyframes rainbow {*/ -/* 0% { color: hsl(0, 100%, 50%); }*/ -/* 14% { color: hsl(60, 100%, 50%); }*/ -/* 28% { color: hsl(120, 100%, 50%); }*/ -/* 42% { color: hsl(180, 100%, 50%); }*/ -/* 57% { color: hsl(240, 100%, 50%); }*/ -/* 71% { color: hsl(300, 100%, 50%); }*/ -/* 85% { color: hsl(360, 100%, 50%); }*/ -/* 100% { color: hsl(0, 100%, 50%); }*/ -/*}*/ +/* Light mode */ +@media (prefers-color-scheme: light) { + .modify-button { + color: #000; /* Dark text for light mode */ + } +} - -/*.rainbow-text {*/ -/* animation: rainbow 7s linear infinite;*/ -/* animation-delay: calc(.07s * var(--i));*/ -/*}*/ - /* Light mode colors (darker) */ @keyframes rainbow-light { 0% { color: hsl(0, 100%, 30%); }