Even more improvements
This commit is contained in:
parent
e3c44f775b
commit
ec579650d7
5 changed files with 724 additions and 109 deletions
|
|
@ -20,6 +20,7 @@
|
|||
|
||||
html {
|
||||
font-size: 0.85rem;
|
||||
|
||||
@media (max-width: $breakpoint) {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
|
@ -30,17 +31,21 @@ img {
|
|||
}
|
||||
|
||||
h1 {
|
||||
|
||||
&,
|
||||
* {
|
||||
font-family: 'Comfortaa', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
font-size: 6rem;
|
||||
text-align: center;
|
||||
padding-bottom: $medium-padding;
|
||||
|
||||
@media (max-width: $height-breakpoint) {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
|
||||
@media (max-height: $height-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -48,6 +53,7 @@ h1 {
|
|||
|
||||
.red {
|
||||
color: $accent;
|
||||
|
||||
&::selection {
|
||||
color: $accent;
|
||||
background-color: white;
|
||||
|
|
@ -75,8 +81,10 @@ body {
|
|||
top: 0;
|
||||
|
||||
@include background;
|
||||
|
||||
#spinner {
|
||||
@include square(20vmax);
|
||||
|
||||
@media (max-width: $breakpoint) {
|
||||
@include square(20vmax);
|
||||
}
|
||||
|
|
@ -107,7 +115,7 @@ body {
|
|||
|
||||
overflow: hidden;
|
||||
|
||||
& > * {
|
||||
&>* {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -120,8 +128,10 @@ body {
|
|||
|
||||
&.decla {
|
||||
color: $bright-decla;
|
||||
div:first-child {
|
||||
|
||||
.health {
|
||||
background-color: $bright-decla;
|
||||
|
||||
&:before {
|
||||
background-color: $bright-decla;
|
||||
opacity: 0.3;
|
||||
|
|
@ -131,8 +141,10 @@ body {
|
|||
|
||||
&.red {
|
||||
color: $bright-red;
|
||||
div:first-child {
|
||||
|
||||
.health {
|
||||
background-color: $bright-red;
|
||||
|
||||
&:before {
|
||||
background-color: $bright-red;
|
||||
opacity: 0.4;
|
||||
|
|
@ -140,7 +152,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
.health {
|
||||
position: relative;
|
||||
height: 5px;
|
||||
border-radius: 1000px;
|
||||
|
|
@ -155,9 +167,33 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
div:not(:first-child) {
|
||||
letter-spacing: 2px;
|
||||
.charge {
|
||||
height: 3px;
|
||||
margin-top: 2px;
|
||||
border-radius: 1000px;
|
||||
background-color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
|
||||
|
||||
.stat {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.1em;
|
||||
height: 1.1em;
|
||||
fill: currentColor;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -172,9 +208,13 @@ body {
|
|||
|
||||
.falling-point {
|
||||
font-size: 1.2em;
|
||||
font-weight: 700;
|
||||
animation: falling-point 2s ease-out forwards;
|
||||
|
||||
&.decla {
|
||||
color: $bright-decla;
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: $bright-red;
|
||||
}
|
||||
|
|
@ -184,6 +224,7 @@ body {
|
|||
transition: transform 150ms;
|
||||
|
||||
@include square($large-icon);
|
||||
|
||||
@media (max-width: $breakpoint) {
|
||||
@include square($small-icon);
|
||||
}
|
||||
|
|
@ -219,6 +260,56 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.touch-button {
|
||||
display: none;
|
||||
pointer-events: auto;
|
||||
touch-action: none;
|
||||
cursor: pointer;
|
||||
|
||||
$size: $large-icon * 1.6;
|
||||
@include square($size);
|
||||
top: auto;
|
||||
left: auto;
|
||||
bottom: $medium-padding;
|
||||
border-radius: 1000px;
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
box-shadow: inset 0 0 8px 3px rgba(0, 0, 0, 0.33);
|
||||
border: $border-width solid rgba(255, 255, 255, 0.4);
|
||||
|
||||
font-size: 1.6rem;
|
||||
line-height: $size - 2 * $border-width;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.fire {
|
||||
right: $medium-padding;
|
||||
|
||||
&::after {
|
||||
content: '\25C9';
|
||||
}
|
||||
}
|
||||
|
||||
.strength-ring {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
width: calc(100% + 6px);
|
||||
height: calc(100% + 6px);
|
||||
border-radius: 1000px;
|
||||
pointer-events: none;
|
||||
-webkit-mask: radial-gradient(farthest-side,
|
||||
transparent calc(100% - 5px),
|
||||
#000 calc(100% - 5px));
|
||||
mask: radial-gradient(farthest-side,
|
||||
transparent calc(100% - 5px),
|
||||
#000 calc(100% - 5px));
|
||||
}
|
||||
}
|
||||
|
||||
.announcement {
|
||||
top: 25%;
|
||||
transform: translateX(calc(-50% + 50vw)) translateY(-50%);
|
||||
|
|
@ -242,20 +333,65 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.tutorial-hint {
|
||||
top: auto;
|
||||
bottom: calc(#{$medium-padding} + #{$large-icon} * 1.6 + #{$medium-padding});
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
|
||||
font-size: 1.6rem;
|
||||
@include background;
|
||||
z-index: 1000;
|
||||
padding: $small-padding $medium-padding;
|
||||
border-radius: 1000px;
|
||||
opacity: 0.9;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.planet-progress {
|
||||
top: $small-padding;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50%;
|
||||
display: flex;
|
||||
$height: 8px;
|
||||
$height: 20px;
|
||||
height: $height;
|
||||
|
||||
justify-content: space-between;
|
||||
box-shadow: inset 0 0 3px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
border-radius: 4px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
box-shadow: inset 0 0 3px 0px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 1000px;
|
||||
|
||||
.fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: $height;
|
||||
transition: width $animation-time;
|
||||
}
|
||||
|
||||
.fill.decla {
|
||||
right: 50%;
|
||||
background: $bright-decla;
|
||||
color: $bright-decla;
|
||||
border-radius: 1000px 0 0 1000px;
|
||||
}
|
||||
|
||||
.fill.red {
|
||||
left: 50%;
|
||||
background: $bright-red;
|
||||
color: $bright-red;
|
||||
border-radius: 0 1000px 1000px 0;
|
||||
}
|
||||
|
||||
.fill.match-point {
|
||||
z-index: 1;
|
||||
animation: match-point-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -263,38 +399,87 @@ body {
|
|||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background-color: #888;
|
||||
height: 24px;
|
||||
width: 4px;
|
||||
background-color: #fff;
|
||||
height: $height + 8px;
|
||||
width: 3px;
|
||||
border-radius: 1000px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
.score {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
|
||||
@include square(24px);
|
||||
|
||||
background-image: url('../static/flag.svg');
|
||||
background-size: contain;
|
||||
transform: translateY(-50%);
|
||||
z-index: 3;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
0 0 3px rgba(0, 0, 0, 0.95),
|
||||
0 0 6px rgba(0, 0, 0, 0.8);
|
||||
opacity: 0.8;
|
||||
transition:
|
||||
opacity $animation-time,
|
||||
text-shadow $animation-time,
|
||||
font-size $animation-time;
|
||||
}
|
||||
|
||||
div {
|
||||
height: $height;
|
||||
box-shadow: inset 0 0 3px 0px rgba(0, 0, 0, 0.2);
|
||||
.score.decla {
|
||||
right: calc(50% + #{$small-padding});
|
||||
}
|
||||
|
||||
div:nth-child(1) {
|
||||
background: $bright-decla;
|
||||
border-radius: 100px 0 0 100px;
|
||||
.score.red {
|
||||
left: calc(50% + #{$small-padding});
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
background: $bright-red;
|
||||
border-radius: 0 100px 100px 0;
|
||||
.score.leading {
|
||||
opacity: 1;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.score.decla.leading {
|
||||
text-shadow:
|
||||
0 0 3px rgba(0, 0, 0, 0.95),
|
||||
0 0 8px $bright-decla;
|
||||
}
|
||||
|
||||
.score.red.leading {
|
||||
text-shadow:
|
||||
0 0 3px rgba(0, 0, 0, 0.95),
|
||||
0 0 8px $bright-red;
|
||||
}
|
||||
|
||||
.you-marker {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 100%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 5px solid currentColor;
|
||||
}
|
||||
|
||||
&.decla {
|
||||
right: calc(50% + #{$small-padding});
|
||||
color: $bright-decla;
|
||||
}
|
||||
|
||||
&.red {
|
||||
left: calc(50% + #{$small-padding});
|
||||
color: $bright-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -308,6 +493,7 @@ body {
|
|||
background-color: transparent;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $accent;
|
||||
border-radius: $border-radius;
|
||||
|
|
@ -321,6 +507,10 @@ body {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
user-select: none;
|
||||
|
|
@ -328,6 +518,7 @@ body {
|
|||
|
||||
padding: $medium-padding;
|
||||
@include square($large-icon);
|
||||
|
||||
@media (max-width: $breakpoint) {
|
||||
@include square($small-icon);
|
||||
padding: $small-padding;
|
||||
|
|
@ -338,3 +529,217 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feedback-hud {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 2000;
|
||||
overflow: hidden;
|
||||
|
||||
.hitmarker {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
@include square(26px);
|
||||
opacity: 0.9;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
animation: hitmarker-pop 250ms ease-out forwards;
|
||||
}
|
||||
|
||||
.kill-popup {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
white-space: nowrap;
|
||||
color: $bright-neutral;
|
||||
text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
|
||||
animation: kill-popup-rise 1200ms ease-out forwards;
|
||||
|
||||
.heal {
|
||||
color: #6fcf6f;
|
||||
}
|
||||
}
|
||||
|
||||
.streak-callout {
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 700;
|
||||
font-size: 2.6rem;
|
||||
color: $accent;
|
||||
text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
|
||||
white-space: nowrap;
|
||||
animation: streak-pop 1400ms ease-out forwards;
|
||||
}
|
||||
|
||||
.killfeed {
|
||||
position: absolute;
|
||||
top: calc(#{$small-padding} + 36px);
|
||||
right: $medium-padding;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
|
||||
.kill-entry {
|
||||
font-size: 1rem;
|
||||
padding: 4px 10px;
|
||||
border-radius: 1000px;
|
||||
@include background;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
|
||||
animation: kill-entry-fade 4500ms ease-out forwards;
|
||||
|
||||
b {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.charge-ring {
|
||||
position: fixed;
|
||||
@include square(56px);
|
||||
margin: -28px 0 0 -28px;
|
||||
border-radius: 1000px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 2000;
|
||||
opacity: 0;
|
||||
transition: opacity 100ms;
|
||||
-webkit-mask: radial-gradient(farthest-side,
|
||||
transparent calc(100% - 6px),
|
||||
#000 calc(100% - 6px));
|
||||
mask: radial-gradient(farthest-side,
|
||||
transparent calc(100% - 6px),
|
||||
#000 calc(100% - 6px));
|
||||
|
||||
&.full {
|
||||
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes match-point-pulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 4px 0 currentColor;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 14px 3px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes falling-point {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, calc(-50% - 90px));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hitmarker-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1.6);
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kill-popup-rise {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -30%) scale(0.8);
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -60%) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -160%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes streak-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scale(0.6);
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kill-entry-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue