mirror of
https://github.com/aljazceru/dev-gpt.git
synced 2026-01-27 01:04:35 +01:00
🌈 docs: example light mode
This commit is contained in:
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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%); }
|
||||
|
||||
Reference in New Issue
Block a user