🌈 docs: example light mode

This commit is contained in:
Florian Hönicke
2023-05-18 19:14:24 +02:00
parent c8c9089d33
commit 2f91cb4804
3 changed files with 17 additions and 24 deletions

View File

@@ -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"
},

View File

@@ -6,14 +6,14 @@
</head>
<body>
<div class="container">
<h1>Twitter Rewrite: Extension Options</h1>
<h1>Rainbow-Tweet: Extension Options</h1>
<form id="optionForm">
<div class="form-group">
<label for="openai_api_key">OpenAI API Key:</label><br>
<input type="password" id="openai_api_key" name="openai_api_key"><br>
<small id="apiHelp" class="form-text text-muted">Enter your OpenAI API Key to start using the plugin. If you
don't have one, create it <a href="https://platform.openai.com/account/api-keys"
target="_blank">here</a>.</small>
target="_blank">here</a>. After inserting the key, you need to reload the page</small>
</div>
<input type="submit" value="Save" class="btn btn-primary">
</form>

View File

@@ -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%); }