diff --git a/src/App.css b/src/App.css index d630e1e..c9594cb 100644 --- a/src/App.css +++ b/src/App.css @@ -136,6 +136,8 @@ input:checked+.slider:before { color: #444; } + + .hint { position: absolute; font-size: 80%; @@ -244,7 +246,7 @@ button { z-index: 1; &:hover { - opacity: 75%; + opacity: 80%; } } @@ -307,10 +309,15 @@ button { bottom: 16px; padding: 0.4em; border-radius: 1em; - background-color: rgba(0, 0, 0, 0.3); + background-color: #36c8; font-size: xx-large; margin-bottom: 16px; margin-right: 16px; + + } + + .wavering { + animation: blink 40s infinite; } } @@ -324,12 +331,13 @@ button { } .tab-button { + color: black; flex: 1; - background-color: grey; + background-color: #bfbfbf; border: none; margin: 4px auto; cursor: pointer; - opacity: 50%; + opacity: 80%; } .tab-button.active { @@ -352,7 +360,7 @@ button { opacity: 50%; &:hover { - opacity: 75%; + opacity: 80%; } } } @@ -435,6 +443,67 @@ button { left: 48px; } +@keyframes blink { + + 0% { + background-color: #36c8; + } + + + 13% { + background-color: #36c8; + } + + 15% { + background-color: #f00a; + } + + 17% { + background-color: #36c8; + } + + + 38% { + background-color: #36c8; + } + + 40% { + background-color: #ff0a; + } + + 42% { + background-color: #36c8; + } + + 63% { + background-color: #36c8; + } + + 65% { + background-color: #248f24aa; + } + + 67% { + background-color: #36c8; + } + + 88% { + background-color: #36c8; + } + + 90% { + background-color: #4700b3aa; + } + + 92% { + background-color: #36c8; + } + + 100% { + background-color: #36c8; + } +} + /*======SPINNER=======*/ .loader { diff --git a/src/Rankings.tsx b/src/Rankings.tsx index 8648bfd..9e3cb13 100644 --- a/src/Rankings.tsx +++ b/src/Rankings.tsx @@ -133,7 +133,7 @@ function ChemistryDnD({ user, players }: PlayerInfoProps) { - -