Uses CSS variables for common definitions, to allow for themes

src/components/LinkItems/Collapsable.vue

@@ -93,7 +93,7 @@ export default {
 .collapsable {
     padding: 5px;
     margin: 10px;
-    border-radius: $curve-factor;
+    border-radius: var(--curve-factor);
     background: var(--primary);
     // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
@@ -140,7 +140,7 @@ export default {
         display: block;
         padding: 0.25rem;
         cursor: pointer;
-        border-radius: $curve-factor;
+        border-radius: var(--curve-factor);
         transition: all 0.25s ease-out;
         text-align: left;
         color: var(--background-transparent);

src/components/LinkItems/Item.vue

@@ -104,8 +104,9 @@ export default {
   background: #607d8b33;
   text-align: center;
   padding: 2px;
-  border: 2px solid transparent;
-  border-radius: $curve-factor;
+  outline: 2px solid transparent;
+  border: 1px solid var(--outline-color);
+  border-radius: var(--curve-factor);
   box-shadow: 1px 1px 2px #373737;
   cursor: pointer;
   &:hover {
@@ -113,8 +114,7 @@ export default {
     background: #607d8b4d;
   }
   &:focus {
-    border: 2px solid var(--primary);
-    outline: none;
+    outline: 2px solid var(--primary);
   }
   &.short {
     height: 18px;

src/components/LinkItems/ItemOpenMethodIcon.vue

@@ -43,7 +43,7 @@ export default {
     width: 1rem;
     margin: 2px;
     path {
-      fill: var(--primary-transparent);
+      fill: var(--primary);
     }
   }
   &.top svg { top: 0; }