You've already forked speedtest-go
Sync PHP backend feature parity: IP detection, database backends, API endpoints, and frontend
- IP detection: Cloudflare IPv6, ULA IPv6, proxy header chain, offline GeoIP DB - Database: add SQLite (pure Go, no CGo) and MSSQL backends - API: add JSON result sharing endpoint and ID obfuscation - Frontend: add modern CSS design, design switcher, favicon - Compatibility: ?cors parameter support, human-friendly distance rounding - Update Go to 1.21, add modernc.org/sqlite and maxminddb deps
This commit is contained in:
Maddie Zhan
@@ -0,0 +1,83 @@
|
||||
/* The main "start the test" button and the share button */
|
||||
|
||||
button {
|
||||
height: 6.8rem;
|
||||
min-width: 26.4rem;
|
||||
padding: 0 5rem;
|
||||
margin: 2.5rem;
|
||||
border-radius: 3.4rem;
|
||||
border: 0;
|
||||
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.1rem;
|
||||
color: var(--button-text-color);
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0.4rem 1.6rem 0 var(--button-shadow-color);
|
||||
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
transform: scale(1) translate3d(0, 0, 0) perspective(1px);
|
||||
|
||||
background: var(--button-gradient-1-color-1);
|
||||
transition: background-position 0.2s, transform 0.2s;
|
||||
background-position: 0% 0%;
|
||||
background: linear-gradient(
|
||||
92.97deg,
|
||||
var(--button-gradient-1-color-1) 0%,
|
||||
var(--button-gradient-1-color-1) 33%,
|
||||
var(--button-gradient-1-color-2) 40%,
|
||||
var(--button-gradient-1-color-3) 66.71%,
|
||||
var(--button-gradient-1-color-3) 100%
|
||||
);
|
||||
background-size: 300% 100%;
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
transform: scale(1) translate3d(0, 0, 0) perspective(1px);
|
||||
background: var(--button-disabled-background-color);
|
||||
}
|
||||
&.small {
|
||||
height: 4.7rem;
|
||||
min-width: 20.2rem;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
&.inverted {
|
||||
border: 1px solid var(--button-gradient-1-color-1);
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover {
|
||||
background-position: 60% 0%;
|
||||
transform: scale(1.03) translate3d(0, 0, 0) perspective(1px);
|
||||
}
|
||||
&.active,
|
||||
&:active {
|
||||
background-position: 100% 0%;
|
||||
animation: pulse 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1.03) translate3d(0, 0, 0) perspective(1px);
|
||||
}
|
||||
20% {
|
||||
transform: scale(1.2) translate3d(0, 0, 0) perspective(1px);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1) translate3d(0, 0, 0) perspective(1px);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.1) translate3d(0, 0, 0) perspective(1px);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translate3d(0, 0, 0) perspective(1px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
:root {
|
||||
--theme-green: #5cf9fd;
|
||||
--theme-pink: #d63bc6;
|
||||
|
||||
--background-backup-color: #0e0720;
|
||||
--background-overlay-color: rgb(41 26 70 / 71%);
|
||||
|
||||
--primary-text-color: #ffffff;
|
||||
--tagline-text-color: var(--theme-green);
|
||||
--secondary-text-color: #898591;
|
||||
--primary-text-disabled-color: #888888;
|
||||
--secondary-text-disabled-color: #2e7d7f;
|
||||
|
||||
--button-text-color: #3e2f50;
|
||||
--button-gradient-1-color-1: #f5f5f5;
|
||||
--button-gradient-1-color-2: var(--theme-green);
|
||||
--button-gradient-1-color-3: var(--theme-pink);
|
||||
--button-shadow-color: #5cf9fd47;
|
||||
--button-disabled-background-color: #a2a2a2;
|
||||
|
||||
--server-selector-border-color: #625b6b;
|
||||
--server-selector-hover-border-color: var(--theme-green);
|
||||
--server-selector-background-color: #251b32;
|
||||
--server-selector-hover-background-color: var(--server-selector-border-color);
|
||||
|
||||
--gauge-background-color: #3e2f50;
|
||||
--gauge-progress-color: #726c7a;
|
||||
--gauge-pointer-green: #e2fbfc;
|
||||
--gauge-pointer-pink: #d091ca;
|
||||
|
||||
--ping-and-jitter-primary-text-color: #f5f5f5;
|
||||
--ping-and-jitter-secondary-text-color: #7b7b7b;
|
||||
|
||||
--popup-background-color: #251b32;
|
||||
--popup-shadow-color: #000000;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/* Styling for the popups */
|
||||
|
||||
dialog {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 70vw;
|
||||
height: 70vh;
|
||||
margin: auto;
|
||||
margin-top: 23rem;
|
||||
|
||||
background: var(--popup-background-color);
|
||||
border: none;
|
||||
border-radius: 0.8rem;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
max-width: 100vw; /* We need these overrides of browser defaults*/
|
||||
max-height: 100vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
animation: fade-out 0.3s ease-out;
|
||||
&[open] {
|
||||
display: flex;
|
||||
animation: fade-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
& > .close-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
right: 3rem;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > section {
|
||||
max-width: 800px;
|
||||
overflow-y: auto;
|
||||
margin: 4rem 2rem 2rem 4rem;
|
||||
padding: 0 2rem 0 0;
|
||||
|
||||
& h1,
|
||||
& h2 {
|
||||
margin: 3rem 0 2rem 0;
|
||||
font-size: 3.6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.2rem;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
& h2 {
|
||||
margin: 2rem 0 1rem 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
& p,
|
||||
& li {
|
||||
margin: 1rem 0 1rem 0;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.5rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.1rem;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
& ul {
|
||||
list-style-position: inside;
|
||||
margin: 1rem;
|
||||
|
||||
& li {
|
||||
margin: 0.1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.1rem;
|
||||
color: var(--secondary-text-color);
|
||||
text-underline-offset: 0.3rem;
|
||||
transition: text-underline-offset 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-green);
|
||||
text-underline-offset: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
display: none;
|
||||
}
|
||||
0.1% {
|
||||
display: flex;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
display: flex;
|
||||
}
|
||||
99.9% {
|
||||
display: flex;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Inter-latin-ext.woff2) format("woff2");
|
||||
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
|
||||
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Inter-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
|
||||
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* Design by fromScratch Studio - 2022, 2023 (fromscratch.io)
|
||||
* Implementation in HTML/CSS/JS by Timendus - 2024 (https://github.com/Timendus)
|
||||
*
|
||||
* See https://github.com/librespeed/speedtest/issues/585
|
||||
*/
|
||||
|
||||
@import url("colors.css");
|
||||
@import url("fonts.css");
|
||||
@import url("main.css");
|
||||
@import url("server-selector.css");
|
||||
@import url("button.css");
|
||||
@import url("results.css");
|
||||
@import url("dialog.css");
|
||||
|
||||
/* Setting up the basic structure */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--background-backup-color);
|
||||
background-image: url("../images/background.jpeg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
font-size: 10px;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
background-color: var(--background-overlay-color);
|
||||
color: var(--primary-text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Position the logo */
|
||||
|
||||
header {
|
||||
padding: 4rem 7rem;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
padding: 7rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Position the source code link */
|
||||
|
||||
footer {
|
||||
margin: auto auto 0 auto;
|
||||
padding: 5rem;
|
||||
|
||||
& > p.source a {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.1rem;
|
||||
color: var(--theme-green);
|
||||
text-underline-offset: 0.3rem;
|
||||
transition: text-underline-offset 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-pink);
|
||||
text-underline-offset: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/* Texts on the front page */
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 0 2rem;
|
||||
flex: 1;
|
||||
|
||||
& > h1 {
|
||||
margin: 0.2rem;
|
||||
font-size: 3.6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.2rem;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-top: 8rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.5rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.1rem;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
&#privacy-warning {
|
||||
min-height: 5.3rem;
|
||||
|
||||
& > span {
|
||||
font-weight: 700;
|
||||
color: var(--theme-green);
|
||||
}
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > p.tagline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 6rem;
|
||||
font-size: 2rem;
|
||||
color: var(--tagline-text-color);
|
||||
}
|
||||
|
||||
& a {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.1rem;
|
||||
color: var(--secondary-text-color);
|
||||
text-underline-offset: 0.3rem;
|
||||
transition: text-underline-offset 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-green);
|
||||
text-underline-offset: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
/* Variables */
|
||||
|
||||
:root {
|
||||
--gauge-width: 32rem;
|
||||
--gauge-height: 22rem;
|
||||
--progress-width: 0.6rem;
|
||||
--speed-width: 3rem;
|
||||
}
|
||||
|
||||
/* Layout for the gauges */
|
||||
|
||||
.gauge-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
gap: 5rem;
|
||||
margin: 5rem auto 3rem auto;
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"download upload"
|
||||
"ping jitter";
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
|
||||
--gauge-width: min(40vw, 32rem);
|
||||
--gauge-height: min(28vw, 22rem);
|
||||
--progress-width: min(1.2vw, 0.6rem);
|
||||
--speed-width: min(4vw, 3rem);
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
gap: 5rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* The download/upload speed gauges */
|
||||
|
||||
/**
|
||||
* One thing I should really document here is the weird `transform: scale(1);`
|
||||
* and `position: fixed` in this code. This is a nasty little trick to allow the
|
||||
* gauge pointer to break out of the `overflow: hidden` of the .speed element.
|
||||
* We need the `overflow: hidden` to hide the arc that's rotating into view when
|
||||
* the value goes up. But we do want to see the full pointer, even when it's at
|
||||
* zero. This degrades fairly gracefully into showing half of the pointer when
|
||||
* browsers don't understand this.
|
||||
*
|
||||
* Trick taken from this article:
|
||||
* https://medium.com/@thomas.ryu/css-overriding-the-parents-overflow-hidden-90c75a0e7296
|
||||
*/
|
||||
|
||||
div.gauge {
|
||||
position: relative;
|
||||
transform: scale(1);
|
||||
width: var(--gauge-width);
|
||||
height: var(--gauge-height);
|
||||
|
||||
&.download {
|
||||
grid-area: download;
|
||||
}
|
||||
&.upload {
|
||||
grid-area: upload;
|
||||
}
|
||||
|
||||
& > .progress,
|
||||
& > .speed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--gauge-width);
|
||||
height: calc(var(--gauge-width) / 2);
|
||||
overflow: hidden;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
& > .progress {
|
||||
&:before,
|
||||
&:after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--gauge-width);
|
||||
height: calc(var(--gauge-width) / 2);
|
||||
|
||||
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
|
||||
border: var(--progress-width) solid var(--gauge-background-color);
|
||||
border-bottom: 0;
|
||||
|
||||
transform-origin: bottom center;
|
||||
transform: rotate(var(--progress-rotation));
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
&:after {
|
||||
top: calc(var(--gauge-width) / 2);
|
||||
|
||||
border-radius: 0 0 50% 50% / 0 0 100% 100%;
|
||||
border: var(--progress-width) solid var(--gauge-background-color);
|
||||
border-top: 0;
|
||||
|
||||
transform-origin: top center;
|
||||
}
|
||||
}
|
||||
|
||||
& > .speed {
|
||||
&:before,
|
||||
&:after {
|
||||
transform: rotate(var(--speed-rotation));
|
||||
transition: transform 0.2s ease;
|
||||
transition-timing-function: cubic-bezier(0.56, 0.04, 0.59, 0.91);
|
||||
}
|
||||
&:before {
|
||||
position: fixed;
|
||||
top: calc(var(--gauge-width) / 2 - var(--speed-width) / 3);
|
||||
left: var(--progress-width);
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-top: calc(var(--speed-width) / 3) solid transparent;
|
||||
border-bottom: calc(var(--speed-width) / 3) solid transparent;
|
||||
border-right: calc(var(--speed-width) * 0.97) solid
|
||||
var(--gauge-background-color);
|
||||
z-index: 1;
|
||||
|
||||
transform-origin: calc(var(--gauge-width) / 2 - var(--progress-width))
|
||||
calc(var(--speed-width) / 3);
|
||||
}
|
||||
&:after {
|
||||
top: calc(var(--gauge-width) / 2);
|
||||
left: calc(var(--progress-width) - 0.1rem);
|
||||
width: calc(var(--gauge-width) - var(--progress-width) * 2 + 0.2rem);
|
||||
height: calc(var(--gauge-width) / 2 - var(--progress-width) + 0.1rem);
|
||||
|
||||
border-radius: 0 0 50% 50% / 0 0 100% 100%;
|
||||
border: var(--speed-width) solid var(--gauge-background-color);
|
||||
border-top: 0;
|
||||
|
||||
transform-origin: top center;
|
||||
}
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
&.download {
|
||||
& > .progress:after {
|
||||
border-color: var(--theme-pink);
|
||||
}
|
||||
& > .speed {
|
||||
&:before {
|
||||
border-right-color: var(--gauge-pointer-pink);
|
||||
}
|
||||
&:after {
|
||||
border-color: var(--theme-pink);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.upload {
|
||||
& > .progress:after {
|
||||
border-color: var(--theme-green);
|
||||
}
|
||||
& > .speed {
|
||||
&:before {
|
||||
border-right-color: var(--gauge-pointer-green);
|
||||
}
|
||||
&:after {
|
||||
border-color: var(--theme-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
& > h1 > span {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
& > h1,
|
||||
& > h2 {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 2.1rem;
|
||||
letter-spacing: -0.1rem;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
& > h1 {
|
||||
bottom: calc(var(--gauge-height) - var(--gauge-width) / 2);
|
||||
font-weight: 300;
|
||||
|
||||
& > span {
|
||||
font-size: 5.5rem;
|
||||
font-weight: 200;
|
||||
display: block;
|
||||
color: var(--secondary-text-color);
|
||||
letter-spacing: -0.3rem;
|
||||
}
|
||||
}
|
||||
& > h2 {
|
||||
bottom: 0;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
& > h1 {
|
||||
font-size: 3vw;
|
||||
|
||||
& > span {
|
||||
font-size: 8vw;
|
||||
}
|
||||
}
|
||||
|
||||
& > h2 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Styling for Ping and Jitter */
|
||||
|
||||
.ping,
|
||||
.jitter {
|
||||
grid-area: jitter;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
height: calc(var(--gauge-width) / 2);
|
||||
width: 13rem;
|
||||
|
||||
font-size: 2.1rem;
|
||||
letter-spacing: -0.1rem;
|
||||
font-weight: 300;
|
||||
color: var(--ping-and-jitter-secondary-text-color);
|
||||
|
||||
& > .label {
|
||||
font-weight: 700;
|
||||
}
|
||||
& > .value {
|
||||
color: var(--ping-and-jitter-primary-text-color);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
justify-content: center !important;
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
.ping {
|
||||
grid-area: ping;
|
||||
justify-content: end;
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
/* The server selector fake dropdown */
|
||||
|
||||
.server-selector {
|
||||
position: relative;
|
||||
width: 50rem;
|
||||
margin: 0rem auto;
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& > .chosen {
|
||||
position: relative;
|
||||
height: 8.8rem;
|
||||
|
||||
border: 1px solid var(--server-selector-border-color);
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--server-selector-background-color);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--server-selector-hover-border-color);
|
||||
}
|
||||
|
||||
& > div.chevron {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
right: 1.8rem;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 2.4rem;
|
||||
top: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.1rem;
|
||||
color: var(--theme-green);
|
||||
}
|
||||
|
||||
& > h2 {
|
||||
position: absolute;
|
||||
left: 2.4rem;
|
||||
right: 2.4rem;
|
||||
bottom: 1rem;
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.2rem;
|
||||
color: var(--primary-text-color);
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
& span {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Special case for when we have only one server */
|
||||
&.single-server {
|
||||
& > .chosen {
|
||||
cursor: default;
|
||||
&:hover {
|
||||
border-color: var(--server-selector-border-color);
|
||||
}
|
||||
& > div.chevron {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Overrides for when the test is running and the selector is disabled */
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
||||
& > .chosen {
|
||||
cursor: default;
|
||||
&:hover {
|
||||
border-color: var(--server-selector-border-color);
|
||||
}
|
||||
& > p {
|
||||
color: var(--secondary-text-disabled-color);
|
||||
}
|
||||
& > h2 {
|
||||
color: var(--primary-text-disabled-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Styling for the list of servers that pops out */
|
||||
& > ul.servers {
|
||||
position: absolute;
|
||||
width: 50rem;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
|
||||
border: 1px solid var(--server-selector-border-color);
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--server-selector-background-color);
|
||||
list-style: none;
|
||||
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform 0.1s;
|
||||
|
||||
&.active {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& > li {
|
||||
&:first-child a {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
&:last-child a {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
padding: 0.7rem 2.4rem;
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.2rem;
|
||||
color: var(--sprint-text-color);
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
transition: background-color 0.2s;
|
||||
|
||||
& span {
|
||||
font-weight: 400;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--server-selector-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Styling for the sponsor text under the dropdown */
|
||||
& > p.sponsor {
|
||||
margin: 1rem 0 5rem 0;
|
||||
|
||||
& a {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user