#50 Restyling LinkList and Removing Add Item Form

public/main.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .RV-Dummy {
   overflow: hidden;
   background-color: #F4A460;
@@ -83,27 +82,27 @@
 .RV-AspectRatio--1to2 {
   --aspectX: 1;
   --aspectY: 2;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 .RV-AspectRatio--2to1 {
   --aspectX: 2;
   --aspectY: 1;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 .RV-AspectRatio--3to2 {
   --aspectX: 3;
   --aspectY: 2;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 .RV-AspectRatio--4to3 {
   --aspectX: 4;
   --aspectY: 3;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 .RV-AspectRatio--16to9 {
   --aspectX: 16;
   --aspectY: 9;
-  padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
+  padding-top: calc(100% * var(--aspectY) / var(--aspectX));
 }
 
 /**
@@ -315,7 +314,7 @@ html {
   overflow: hidden;
   flex-grow: 0;
   flex-shrink: 0;
-  flex-basis: calc(100%/3);
+  flex-basis: 33.3333333333%;
 }
 .RV-Flex__Item--quarter {
   overflow: hidden;
@@ -371,7 +370,7 @@ html {
 .RV-BreakPoint__Item {
   flex-grow: 5;
   flex-shrink: 5;
-  flex-basis: calc(var(--breakPoint) * 999 - 100% * 999);
+  flex-basis: calc(var(--breakPoint) * 999 - 99900%);
   overflow: hidden;
   --outer-spacing: 0;
   --inner-spacing: 0;
@@ -412,7 +411,7 @@ html {
   gap: var(--gap);
 }
 .RV-Grid__Item {
-  height: calc(var(--itemHeight) - calc(2*var(--inner-spacing)));
+  height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
 }
 .RV-Grid__Item > * {
   height: 100%;
@@ -926,7 +925,7 @@ body {
   height: 1em;
   width: 1em;
   border: 1px solid #565656;
-  padding: 0 calc(.5em + 2px);
+  padding: 0 calc(0.5em + 2px);
   margin-right: 0.7em;
 }
 
@@ -26397,7 +26396,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
 }
 
 .mdi-blank::before {
-  content: "";
+  content: "\f68c";
   visibility: hidden;
 }
 
@@ -26895,7 +26894,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
   justify-content: center;
 }
 .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item {
-  height: calc(var(--itemHeight) - calc(2*var(--inner-spacing)));
+  height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
 }
 .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item > * {
   height: 100%;
@@ -26945,65 +26944,38 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
   --icon-color: #C09F80;
 }
 .LP-LinkList .RV-Iconized__Icon {
-  font-size: calc(var(--itemHeight) * .75);
+  font-size: calc(var(--itemHeight) * 0.75);
   line-height: 1em;
   color: var(--icon-color);
-  transition: color 0.1s;
+  transition: color 0.2s;
 }
 .LP-LinkList .LP-LinkList__Item {
+  font-weight: 500;
+  --color: #565656;
   border-left: 1px solid #C09F80;
-  transition: background 0.1s;
+  transition: background 0.2s;
   height: 100%;
   display: flex;
   align-items: center;
 }
 .LP-LinkList .LP-LinkList__Item:hover {
-  background-color: #f9f9f9;
+  background-color: #D7CEC7;
   --icon-color: #565656;
+  --color: #f9f9f9;
 }
 .LP-LinkList .LP-LinkList__Item:hover .LP-LinkList__ItemHover {
   opacity: 1;
 }
+.LP-LinkList .LP-LinkList__Item--addItem {
+  background-color: #f9f9f9;
+  font-weight: bold;
+}
 .LP-LinkList .LP-Link {
   flex-grow: 5;
   flex-shrink: 5;
   padding-left: 25px;
-  color: #565656;
-}
-.LP-LinkList .LP-LinkAdd {
-  height: 0;
-}
-.LP-LinkList .LP-LinkAdd__Container {
-  position: relative;
-  top: -39px;
-}
-.LP-LinkList .LP-LinkAdd__Container .LP-Form__Fieldset {
-  min-width: unset;
-}
-.LP-LinkList .LP-LinkAdd__Container .LP-Form {
-  display: block;
-  min-width: 0px;
-}
-
-.LP-LinkAdd {
-  display: none;
-}
-
-.LP-LinkAdd__Trigger {
-  display: none;
-}
-
-.LP-LinkAdd__TriggerLabel {
-  cursor: pointer;
-  display: contents;
-}
-
-.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel {
-  display: none;
-}
-
-.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd {
-  display: block;
+  color: var(--color);
+  transition: color 0.2s;
 }
 
 /*# sourceMappingURL=main.css.map */