2022-10-21 21:26:41 +02:00
|
|
|
:root {
|
|
|
|
|
|
|
|
--panel-bg-color: hsl(131.6, 47.7%, 12.5%);
|
|
|
|
--panel-place-name-bg-color: hsl(131.6, 52.7%, 7.5%);
|
|
|
|
--panel-place-name-color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
|
|
background: hsl(0, 50%, 2%);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#login-page {
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#mapview #geoPoint a,
|
|
|
|
#mapview #geoPoint a:visited {
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
opacity: 0.4;
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
body#sonar {
|
|
|
|
|
|
|
|
background:
|
|
|
|
/*
|
|
|
|
repeating-linear-gradient(to right, hsl(132.2, 59.8%, 52.2%) 0vh, hsl(132.2, 59.8%, 52.2%) 0.4vh, transparent 0.4vh, transparent 10vh),
|
|
|
|
repeating-linear-gradient(transparent, transparent 9.8vh, hsl(132.2, 59.8%, 52.2%) 10.2vh, hsl(132.2, 59.8%, 52.2%) 10.2vh, transparent 10.2vh),
|
|
|
|
*/
|
|
|
|
|
|
|
|
linear-gradient(to right, transparent 0vw, transparent 32.9vw, hsl(132.2, 59.8%, 74.2%) 32.9vw, hsl(132.2, 59.8%, 74.2%) 33.1vw, transparent 33.1vw),
|
|
|
|
linear-gradient(to right, hsl(132.2, 59.8%, 12.1%) 0vw, hsl(132.2, 59.8%, 12.1%) 0.1vw, transparent 0.1vw),
|
|
|
|
repeating-linear-gradient(to right, hsl(132.2, 59.8%, 52.2%) 0vw, hsl(132.2, 59.8%, 52.2%) 0.1vw, transparent 0.1vw, transparent 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.5vw),
|
|
|
|
|
|
|
|
/*linear-gradient(to bottom, transparent 0vw, transparent 32.9vw, hsl(132.2, 59.8%, 74.2%) 32.9vw, hsl(132.2, 59.8%, 74.2%) 33.1vw, transparent 33.1vw), */
|
|
|
|
linear-gradient(to bottom, hsl(132.2, 59.8%, 12.1%) 0vw, hsl(132.2, 59.8%, 12.1%) 0.1vw, transparent 0.1vw),
|
|
|
|
repeating-linear-gradient(to bottom, hsl(132.2, 59.8%, 52.2%) 0vw, hsl(132.2, 59.8%, 52.2%) 0.1vw, transparent 0.1vw, transparent 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.5vw),
|
|
|
|
|
|
|
|
hsl(132.2, 59.8%, 12.1%);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#map {
|
|
|
|
|
2022-10-22 18:35:53 +02:00
|
|
|
border-style: solid;
|
|
|
|
border-color: hsl(132.2, 59.8%, 74.2%);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#map[data-radius="100"] {
|
|
|
|
|
|
|
|
background:
|
|
|
|
linear-gradient( 0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
repeating-radial-gradient(transparent 0, transparent 5%, hsl(132.2, 59.8%, 74.2%) 5%, hsl(132.2, 59.8%, 74.2%) 5.4%),
|
|
|
|
/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
|
|
|
|
hsla(132.2, 59.8%, 37.1%, 0.8);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#map[data-radius="50"] {
|
|
|
|
|
2022-10-21 21:26:41 +02:00
|
|
|
background:
|
|
|
|
linear-gradient( 0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
repeating-radial-gradient(transparent 0, transparent 10%, hsl(132.2, 59.8%, 74.2%) 10%, hsl(132.2, 59.8%, 74.2%) 10.4%),
|
|
|
|
/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
|
|
|
|
hsla(132.2, 59.8%, 37.1%, 0.8);
|
|
|
|
|
2022-10-22 18:35:53 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#map[data-radius="20"] {
|
|
|
|
|
|
|
|
background:
|
|
|
|
linear-gradient( 0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
repeating-radial-gradient(transparent 0, transparent 12.5%, hsl(132.2, 59.8%, 74.2%) 12.5%, hsl(132.2, 59.8%, 74.2%) 12.9%),
|
|
|
|
/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
|
|
|
|
hsla(132.2, 59.8%, 37.1%, 0.8);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#map[data-radius="10"] {
|
|
|
|
|
|
|
|
background:
|
|
|
|
linear-gradient( 0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
repeating-radial-gradient(transparent 0, transparent 25%, hsl(132.2, 59.8%, 74.2%) 25%, hsl(132.2, 59.8%, 74.2%) 25.4%),
|
|
|
|
/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
|
|
|
|
hsla(132.2, 59.8%, 37.1%, 0.8);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#map[data-radius="5"] {
|
|
|
|
|
|
|
|
background:
|
|
|
|
linear-gradient( 0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
|
|
|
|
linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%),
|
|
|
|
repeating-radial-gradient(transparent 0, transparent 50%, hsl(132.2, 59.8%, 74.2%) 100%, hsl(132.2, 59.8%, 74.2%) 100%),
|
|
|
|
/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
|
|
|
|
hsla(132.2, 59.8%, 37.1%, 0.8);
|
2022-10-21 21:26:41 +02:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2022-10-22 18:35:53 +02:00
|
|
|
|
|
|
|
|
2022-10-21 21:26:41 +02:00
|
|
|
#map-deco {
|
|
|
|
|
|
|
|
background:
|
|
|
|
conic-gradient(hsla(132.2, 59.8%, 74.2%, 1) 0deg, hsla(132.2, 59.8%, 74.2%, 0) 45deg, hsla(132.2, 59.8%, 74.2%, 0) 0deg);
|
|
|
|
animation: sonar 5s linear infinite reverse;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes sonar {
|
|
|
|
|
|
|
|
0% {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
transform: rotate(355deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#map .place {
|
|
|
|
|
|
|
|
opacity: 0;
|
|
|
|
animation: appear infinite 5s;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes appear {
|
|
|
|
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-22 18:35:53 +02:00
|
|
|
#map .place img {
|
|
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
|
2022-10-21 21:26:41 +02:00
|
|
|
|
|
|
|
#map .place,
|
|
|
|
#map .player {
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2022-10-22 18:35:53 +02:00
|
|
|
#mapview #zoom {
|
|
|
|
|
|
|
|
background-color: black;
|
|
|
|
}
|
|
|
|
|
|
|
|
#mapview #zoom a,
|
|
|
|
#mapview #zoom a:visited {
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
2022-10-21 21:26:41 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#place-details {
|
|
|
|
|
|
|
|
background: var(--panel-bg-color);
|
|
|
|
color: white;
|
|
|
|
|
|
|
|
cursor: auto;
|
|
|
|
|
|
|
|
animation: slideIn 1s forwards;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes slideIn {
|
|
|
|
|
|
|
|
0% {
|
|
|
|
transform: translateX(33vw);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#place-details > .place-name {
|
|
|
|
|
|
|
|
|
|
|
|
background-color: var(--panel-place-name-bg-color);
|
|
|
|
color: var(--panel-place-name-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#place-details > address {
|
|
|
|
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
|
|
|
|
#place-details > address .distance:after {
|
|
|
|
|
|
|
|
content: " à vol d\'OVNI";
|
|
|
|
}
|
|
|
|
|
|
|
|
#place-details .get-directions a span {
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#place-details .get-directions .car:after {
|
|
|
|
|
|
|
|
content: "en hyperespace";
|
|
|
|
}
|
|
|
|
|
|
|
|
#place-details .get-directions .bike:after {
|
|
|
|
|
|
|
|
content: "en vitesse supraluminique";
|
|
|
|
}
|
|
|
|
|
|
|
|
#place-details .get-directions .foot:after {
|
|
|
|
|
|
|
|
content: "en vitesse subluminique";
|
|
|
|
}
|
|
|
|
|
|
|
|
#place-details > h4 {
|
|
|
|
|
|
|
|
background: var(--panel-place-name-bg-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
#place-details a,
|
|
|
|
#place-details a:hover,
|
|
|
|
#place-details a:focus,
|
|
|
|
#place-details a:active,
|
|
|
|
#place-details a:visited {
|
|
|
|
|
|
|
|
color: inherit;
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
2022-10-22 18:35:53 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#messenger-page {
|
|
|
|
|
|
|
|
background-color: black;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#messenger-page .penpal {
|
|
|
|
|
|
|
|
background: hsl(0, 100%, 50%);
|
|
|
|
color: white;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
#messenger-page #msgList .message {
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
#messenger-page #msgList .message.in {
|
|
|
|
|
|
|
|
background-color: hsl(132.2, 59.8%, 12.1%);
|
|
|
|
}
|
|
|
|
|
|
|
|
#messenger-page #msgList .message.out {
|
|
|
|
|
|
|
|
background-color: hsl(132.2, 59.8%, 12.1%);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#messenger-page #msgList .message .date {
|
|
|
|
|
|
|
|
color: hsl(132.2, 59.8%, 75.2%);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#messenger-page #conversations-list .conversation time {
|
|
|
|
|
|
|
|
font-weight: normal;
|
|
|
|
color: hsl(0, 27.8%, 82.1%);
|
|
|
|
}
|
|
|
|
|
|
|
|
#messenger-page #conversations-list .conversation cite {
|
|
|
|
|
|
|
|
font-style: normal;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
#messenger-page #conversations-list .conversation .contents-preview {
|
|
|
|
|
|
|
|
height: 1rem;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
#messenger-page #conversations-list .conversation {
|
|
|
|
|
|
|
|
background-color: hsl(0, 27.8%, 12.1%);
|
|
|
|
}
|
|
|
|
|
|
|
|
#messenger-page #conversations-list .conversation:hover {
|
|
|
|
|
|
|
|
background-color: hsl(0, 27.8%, 24.2%);
|
|
|
|
}
|