1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- /* Animations */
- /* Rainbox-Animation */
- @-o-keyframes rainbow {
- 0%{background-position:0% 82%}
- 50%{background-position:100% 19%}
- 100%{background-position:0% 82%}
- }
- @keyframes rainbow {
- 0%{background-position:0% 82%}
- 50%{background-position:100% 19%}
- 100%{background-position:0% 82%}
- }
- @-webkit-keyframes rainbow {
- 0%{background-position:0% 82%}
- 50%{background-position:100% 19%}
- 100%{background-position:0% 82%}
- }
- @-moz-keyframes rainbow {
- 0%{background-position:0% 82%}
- 50%{background-position:100% 19%}
- 100%{background-position:0% 82%}
- }
- /* Variables */
- :root {
- --background: #111;
- --primary: #ff4444;
- --secondary: #272727;
- --white: #fff;
- }
- /* Window Styling */
- html,body {
- background-color: var(--background);
- color: var(--white);
- width: 300px;
- padding: 0.5em;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 14px;
- }
- h1 {
- font-size: 26px;
- }
- button {
- color: var(--white);
- background: var(--secondary);
- cursor: pointer;
- padding: 5px 16px;
- border: none;
- border-radius: 4px;
- font-weight: 500;
- box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
- transition: 0.5s;
- }
- button:hover {
- color: var(--secondary);
- background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
- background-size: 1800% 1800%;
- -webkit-animation: rainbow 18s ease infinite;
- -z-animation: rainbow 18s ease infinite;
- -o-animation: rainbow 18s ease infinite;
- animation: rainbow 18s ease infinite;
- }
- #advancedToggle {
- margin-top: 1em;
- margin-bottom: 2em;
- }
- #advancedSettings {
- display: none;
- border: 2px solid var(--secondary);
- border-radius: 4px;
- padding: 0.5em;
- margin-right: 1em; /* FIREFOX ONLY */
- }
|