From 063d8ef9eaf874a941f4459e831057dd0a1b7ddd Mon Sep 17 00:00:00 2001
From: Joris
Date: Tue, 5 Jul 2022 21:55:41 +0200
Subject: Rewrite in TS

---
 public/main.css | 143 ++++++++++++++++++--------------------------------------
 1 file changed, 46 insertions(+), 97 deletions(-)

(limited to 'public/main.css')

diff --git a/public/main.css b/public/main.css
index b94fefa..8b41538 100644
--- a/public/main.css
+++ b/public/main.css
@@ -14,6 +14,7 @@
 
 body {
   margin: 0;
+  font-family: sans-serif;
 }
 
 .g-Layout__Header {
@@ -23,15 +24,11 @@ body {
   width: 100%;
   background-color: var(--color-header);
   color: white;
-  font-size: 2rem;
+  font-size: 1.7rem;
   height: 3rem;
   padding: 0 0.5rem;
 }
 
-.g-Layout__HeaderImportExport {
-  font-size: 1rem;
-}
-
 .g-Layout__Home {
   color: white;
   text-decoration: none;
@@ -48,16 +45,7 @@ body {
 .g-Layout__Line {
   display: flex;
   align-items: center;
-}
-
-.g-Layout__Line > *:not(:last-child) {
-  margin-right: 1.5rem;
-}
-
-/* Header */
-
-#g-Header__ImportInput {
-  display: none;
+  gap: 1.5rem;
 }
 
 /* Modal */
@@ -92,7 +80,6 @@ body {
   background-color: white;
   border-radius: var(--modal-border-radius);
   padding: 2rem 4rem;
-  width: 50%;
 }
 
 .g-Modal__Close {
@@ -101,6 +88,7 @@ body {
   right: 0px;
   font-size: 2rem !important;
   border-top-right-radius: var(--modal-border-radius);
+  padding: 5px 10px 10px;
 }
 
 .g-Modal__Close:hover {
@@ -143,49 +131,40 @@ body {
 /* Form */
 
 .g-Form__Field {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
   margin-bottom: 1rem;
 }
 
-.g-Form__Label {
-  margin-bottom: 0.5rem;
-}
-
-.g-Form__Textarea {
-  width: 100%;
-  height: 5rem;
-}
-
-.g-Form__DefaultColor {
+.g-Form__Color {
   border: 1px solid #333333 !important;
   width: 20px;
   height: 20px;
   border-radius: 50%;
 }
 
-/* Autocomplete */
-
-:root {
-  --autocomplete-width: 500px;
-}
+/* AutoComplete */
 
-.g-Autocomplete {
+.g-AutoComplete {
   position: relative;
+  width: 100%;
 }
 
-.g-Autocomplete__Input {
-  width: var(--autocomplete-width);
+.g-AutoComplete__Input {
+  width: 100%;
 }
 
-.g-Autocomplete__Completion {
+.g-AutoComplete__Completion {
   position: absolute;
-  width: var(--autocomplete-width);
+  width: 100%;
   background-color: white;
   max-height: 10rem;
   overflow-y: auto;
   border: 1px solid black;
 }
 
-.g-Autocomplete__Entry {
+.g-AutoComplete__Entry {
   display: block;
   width: 100%;
   text-align: left;
@@ -194,15 +173,15 @@ body {
   cursor: pointer;
 }
 
-.g-Autocomplete__Entry:hover {
+.g-AutoComplete__Entry:hover {
   background-color: #DDDDDD;
 }
 
-.g-Autocomplete__Clear {
+.g-AutoComplete__Clear {
   position: absolute;
   right: 0.5rem;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-53%);
 }
 
 /* Button */
@@ -262,16 +241,16 @@ body {
 #g-Map__Content {
   width: 100%;
   height: 100%;
-  cursor: default;
+  cursor: grab;
 }
 
 /* Marker form */
 
-.g-MarkerForm__AutocompleteAndIcon {
+.g-MarkerForm__AutoCompleteAndIcon {
   position: relative;
 }
 
-.g-MarkerForm__Autocomplete {
+.g-MarkerForm__AutoComplete {
   padding-left: 1.5rem;
 }
 
@@ -283,76 +262,46 @@ body {
 }
 
 .g-MarkerForm__IconEntry {
-  margin-right: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.g-MarkerForm__IconElem {
   width: 1rem;
-  text-align: center;
 }
 
 /* Marker icon */
 
-:root {
-  --marker-box-size: 12px;
-  --marker-width: 25px;
-  --marker-peak-height: calc(var(--marker-width) * 1);
-  --marker-border-width: 2px;
-  --marker-border-color: #333333;
-  --marker-icon-size: 14px;
-}
-
 .g-Marker {
+  position: relative;
+  width: 100%;
+  height: 100%;
   cursor: move;
 }
 
-.g-Marker__Round {
+.g-Marker__Base {
   position: absolute;
-  bottom: calc(var(--marker-box-size) / 2 + var(--marker-peak-height) - var(--marker-width) * 15 / 40);
-  left: calc((var(--marker-width) - var(--marker-box-size)) / -2);
-
-  width: var(--marker-width);
-  height: var(--marker-width);
-  border-radius: 50%;
-  border: var(--marker-border-width) solid var(--marker-border-color);
-  cursor: move;
+  width: 25px;
+  bottom: calc(50%);
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .g-Marker__Icon {
   position: absolute;
-  bottom: calc(var(--marker-box-size) / 2 + var(--marker-peak-height) - var(--marker-width) * 15 / 40);
-  left: calc((var(--marker-width) - var(--marker-box-size)) / -2);
-  font-size: var(--marker-icon-size);
-
+  bottom: 25px;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--marker-width);
-  height: var(--marker-width);
+  width: var(--marker-icon-size);
+  height: var(--marker-icon-size);
 }
 
-.g-Marker__PeakInner {
+.g-Marker__Title {
   position: absolute;
-  bottom: calc(var(--marker-box-size) / 2 + var(--marker-border-width));
-  left: calc((var(--marker-width) - var(--marker-box-size)) / -2 + var(--marker-border-width));
-
-  width: 0;
-  height: 0;
-  border-left: calc(var(--marker-width) / 2 - var(--marker-border-width)) solid transparent;
-  border-right: calc(var(--marker-width) / 2 - var(--marker-border-width)) solid transparent;
-
-  border-top-width: calc(var(--marker-peak-height) - var(--marker-border-width));
-  border-top-style: solid;
-}
-
-.g-Marker__PeakBorder {
-  position: absolute;
-  bottom: calc(var(--marker-box-size) / 2);
-  left: calc((var(--marker-width) - var(--marker-box-size)) / -2);
-
-  width: 0;
-  height: 0;
-  border-left: calc(var(--marker-width) / 2) solid transparent;
-  border-right: calc(var(--marker-width) / 2) solid transparent;
-
-  border-top-width: var(--marker-peak-height);
-  border-top-style: solid;
-  border-top-color: var(--marker-border-color);
+  bottom: 43px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  width: 100px;
 }
-- 
cgit v1.2.3