mirror of
https://github.com/aljazceru/dev-gpt.git
synced 2025-12-30 11:54:21 +01:00
79 lines
2.3 KiB
CSS
79 lines
2.3 KiB
CSS
.modify-button {
|
|
/* common styles */
|
|
border: none;
|
|
padding: 5px 10px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
background: transparent; /* Make the button transparent */
|
|
}
|
|
|
|
/* Dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
.modify-button {
|
|
color: white; /* Light text for dark mode */
|
|
}
|
|
}
|
|
|
|
/* Light mode */
|
|
@media (prefers-color-scheme: light) {
|
|
.modify-button {
|
|
color: #000; /* Dark text for light mode */
|
|
}
|
|
}
|
|
|
|
|
|
/* Light mode colors (darker) */
|
|
@keyframes rainbow-light {
|
|
0% { color: hsl(0, 100%, 30%); }
|
|
14% { color: hsl(60, 100%, 30%); }
|
|
28% { color: hsl(120, 100%, 30%); }
|
|
42% { color: hsl(180, 100%, 30%); }
|
|
57% { color: hsl(240, 100%, 30%); }
|
|
71% { color: hsl(300, 100%, 30%); }
|
|
85% { color: hsl(360, 100%, 30%); }
|
|
100% { color: hsl(0, 100%, 30%); }
|
|
}
|
|
|
|
/* Dark mode colors (brighter) */
|
|
@keyframes rainbow-dark {
|
|
0% { color: hsl(0, 100%, 70%); }
|
|
14% { color: hsl(60, 100%, 70%); }
|
|
28% { color: hsl(120, 100%, 70%); }
|
|
42% { color: hsl(180, 100%, 70%); }
|
|
57% { color: hsl(240, 100%, 70%); }
|
|
71% { color: hsl(300, 100%, 70%); }
|
|
85% { color: hsl(360, 100%, 70%); }
|
|
100% { color: hsl(0, 100%, 70%); }
|
|
}
|
|
|
|
/* Apply light mode colors by default */
|
|
.rainbow-text {
|
|
font-size: 200%;
|
|
animation: rainbow-light 7s linear infinite;
|
|
animation-delay: calc(.07s * var(--i));
|
|
}
|
|
|
|
/* Apply dark mode colors if user prefers dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
.rainbow-text {
|
|
animation: rainbow-dark 7s linear infinite;
|
|
animation-delay: calc(.07s * var(--i));
|
|
}
|
|
}
|
|
|
|
|
|
/*!* Rainbow colors for each letter *!*/
|
|
/*!* Rainbow colors for each letter *!*/
|
|
/*.rainbow0 { color: red; background-color: cyan; mix-blend-mode: difference; }*/
|
|
/*.rainbow1 { color: orange; background-color: blue; mix-blend-mode: difference; }*/
|
|
/*.rainbow2 { color: yellow; background-color: purple; mix-blend-mode: difference; }*/
|
|
/*.rainbow3 { color: green; background-color: magenta; mix-blend-mode: difference; }*/
|
|
/*.rainbow4 { color: blue; background-color: orange; mix-blend-mode: difference; }*/
|
|
/*.rainbow5 { color: indigo; background-color: yellow; mix-blend-mode: difference; }*/
|
|
/*.rainbow6 { color: violet; background-color: green; mix-blend-mode: difference; }*/
|