Refine subscription panel layout and feedback

src/web/styles/features/subscription.css

@@ -60,54 +60,17 @@
   letter-spacing: 0.02em;
 }
 
-.client-profiles-operation {
-  min-height: 22px;
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-  color: var(--client-muted);
-  font-size: 9px;
-  gap: 8px;
-}
-
-.client-profiles-operation.is-active::before {
-  content: '';
-  width: 7px;
-  height: 7px;
-  border: 1px solid currentColor;
-  border-radius: 50%;
-}
-
 .client-profile-list {
-  margin-top: 8px;
-  border-top: 1px solid var(--client-border);
+  margin-top: 2px;
 }
 
 .client-profile-group {
   position: relative;
-  border-bottom: 1px solid var(--client-border);
-  animation: client-profile-group-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
-.client-profile-group.is-active {
-  background: color-mix(in oklch, var(--client-accent) 3%, transparent);
-}
-
-.client-profile-group.is-active .client-profile-title strong,
-.client-profile-group.is-active .client-profile-selected-server {
-  color: var(--client-accent);
-}
-
-@keyframes client-profile-group-in {
-  from {
-    opacity: 0;
-    filter: blur(5px);
-    transform: translateY(8px);
-  }
+  padding: 2px 0;
 }
 
 .client-profile-header {
-  min-height: 72px;
+  min-height: 54px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto 36px 36px;
   align-items: center;
@@ -116,11 +79,11 @@
 
 .client-profile-disclosure {
   min-width: 0;
-  min-height: 56px;
+  min-height: 48px;
   display: grid;
   grid-template-columns: 18px minmax(0, 1fr);
   align-items: center;
-  padding: 6px 0;
+  padding: 4px 0 4px 8px;
   border: 0;
   background: transparent;
   color: var(--client-text);
@@ -143,7 +106,7 @@
 .client-profile-title {
   min-width: 0;
   display: grid;
-  gap: 4px;
+  gap: 2px;
 }
 
 .client-profile-title > span {
@@ -172,10 +135,7 @@
 }
 
 .client-profile-title em {
-  padding: 3px 6px;
-  border: 1px solid color-mix(in oklch, var(--client-accent) 30%, transparent);
-  border-radius: 3px;
-  background: color-mix(in oklch, var(--client-accent) 8%, transparent);
+  padding: 0;
   color: var(--client-accent);
   font-size: 7px;
   font-style: normal;
@@ -225,11 +185,19 @@
 
 .client-profile-refresh:hover:not(:disabled),
 .client-profile-refresh:focus-visible,
-.client-profile-delete:hover:not(:disabled),
-.client-profile-delete:focus-visible {
+.client-profile-delete:hover:not(:disabled) {
   color: var(--client-accent);
 }
 
+.client-profile-delete,
+.client-profile-delete:focus-visible {
+  color: oklch(0.62 0.16 28);
+}
+
+.client-profile-delete:hover:not(:disabled) {
+  color: oklch(0.7 0.18 28);
+}
+
 .client-profile-refresh:hover:not(:disabled) svg,
 .client-profile-refresh:focus-visible:not(.is-refreshing) svg {
   transform: rotate(90deg);
@@ -255,21 +223,11 @@
 }
 
 .client-profile-body {
-  max-height: 3200px;
   padding: 0 0 4px;
-  overflow: hidden;
-  opacity: 1;
-  visibility: visible;
-  transition: max-height 560ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, padding 420ms ease, visibility 0s;
 }
 
 .client-profile-body[aria-hidden='true'] {
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition: max-height 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease, padding 320ms ease, visibility 0s 420ms;
+  display: none;
 }
 
 .client-profile-body .client-servers {
@@ -279,14 +237,13 @@
 
 .client-profile-selected-server {
   width: 100%;
-  min-height: 52px;
+  min-height: 44px;
   display: grid;
   grid-template-columns: 18px minmax(0, 1fr) auto;
   align-items: center;
   gap: 8px;
   padding: 0 8px;
   border: 0;
-  border-top: 1px solid var(--client-border);
   background: transparent;
   color: var(--client-text);
   font: inherit;
@@ -319,7 +276,7 @@
 
 .client-profile-selected-server:hover,
 .client-profile-selected-server:focus-visible {
-  background: color-mix(in oklch, var(--client-accent) 5%, transparent);
+  background: color-mix(in oklch, var(--client-accent) 2%, transparent);
 }
 
 .client-profile-selected-server:focus-visible {
@@ -341,17 +298,7 @@
 }
 
 .client-subscription-sheet > .client-profile-add {
-  margin-top: 12px;
-  border-bottom: 0;
-  animation: client-profile-add-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
-@keyframes client-profile-add-in {
-  from {
-    opacity: 0;
-    filter: blur(5px);
-    transform: translateY(8px);
-  }
+  margin-top: 8px;
 }
 
 .client-profile-activate {
@@ -365,13 +312,12 @@
 
 .client-profile-add-trigger {
   width: 100%;
-  margin-top: 24px;
+  margin-top: 10px;
   text-align: left;
 }
 
 .client-profile-server-hint,
-.client-profile-local-status,
-.client-profile-form-status {
+.client-profile-local-status {
   min-height: 18px;
   margin: 0;
   color: var(--client-muted);
@@ -388,8 +334,7 @@
 .client-profile-add {
   display: grid;
   gap: 10px;
-  padding: 16px 0 20px;
-  border-bottom: 1px solid var(--client-border);
+  padding: 10px 0 4px;
 }
 
 .client-profile-add label {
@@ -405,8 +350,9 @@
 .client-profile-add input {
   min-width: 0;
   height: 40px;
-  padding: 0 10px;
-  border: 1px solid var(--client-border);
+  padding: 0 2px;
+  border: 0;
+  border-bottom: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
   border-radius: 0;
   outline: 0;
   background: transparent;
@@ -415,11 +361,11 @@
 }
 
 .client-profile-add input:focus {
-  border: 1px solid var(--client-accent);
+  border-bottom-color: var(--client-accent);
 }
 
 .client-profile-add input[aria-invalid='true'] {
-  border: 1px solid oklch(0.68 0.15 28);
+  border-bottom-color: oklch(0.68 0.15 28);
 }
 
 .client-profile-form-actions {
@@ -487,12 +433,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   .client-profile-chevron,
-  .client-profile-body,
   .client-profile-refresh,
   .client-profile-refresh svg,
   .client-profile-delete-lid,
-  .client-profile-group,
-  .client-subscription-sheet > .client-profile-add {
+  .client-profile-group {
     transition: none;
     animation: none;
   }