mirror of
https://github.com/aljazceru/dev-gpt.git
synced 2026-01-03 05:44:22 +01:00
86 lines
2.6 KiB
CSS
86 lines
2.6 KiB
CSS
.modify-button {
|
|
/* transparent */
|
|
background-color: #00000000;
|
|
color: white;
|
|
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;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add some shadow */
|
|
}
|
|
|
|
|
|
/*!* 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%); }*/
|
|
/*}*/
|
|
|
|
|
|
|
|
/*.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%); }
|
|
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; }*/
|