Merge branch 'master' of https://github.com/haishanh/yacd into haishanh-master

1 files changed, 27 insertions, 9 deletions

diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index 4507a07..72087cf 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -15,7 +15,7 @@
     border: 1px solid var(--color-focus-blue);
   }
 
-  max-width: 280px;
+  max-width: 200px;
   @media (--breakpoint-not-small) {
     min-width: 200px;
     border-radius: 10px;
@@ -34,7 +34,7 @@
     transition: transform 0.2s ease-in-out;
     cursor: pointer;
     &:hover {
-      transform: translateY(-2px);
+      border-color: hsl(0deg, 0%, var(--card-hover-border-lightness));
     }
   }
 }
@@ -58,19 +58,37 @@
   width: 100%;
   margin-bottom: 5px;
   font-size: 0.85em;
-  @media (--breakpoint-not-small) {
-    font-size: 0.85em;
-  }
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .proxySmall {
-  width: 11px;
-  height: 11px;
+  --size: 13px;
+  width: var(--size);
+  height: var(--size);
   border-radius: 50%;
-  border: 1px solid var(--color-background);
+  position: relative;
 
   &.now {
-    border-color: var(--color-text-secondary);
+    --size: 15px;
+    &:before {
+      --size-dot: 7px;
+      content: '';
+      position: absolute;
+      width: var(--size-dot);
+      height: var(--size-dot);
+      background-color: #fff;
+      // For non-primitive proxy type like "Selector", "LoadBalance", "DIRECT", etc. we are using a transparent
+      // background, and this selected indicator has a white background. In "light" them mode, the constrast
+      // between the bg of the indicator and the "background" is too small. In that case we want to add a
+      // border around this indicator so it's more distinguishable.
+      border: 1px solid var(--color-proxy-dot-selected-ind-bo);
+      border-radius: 4px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 
   &.selectable {