Improve styling

sveltia · Feb 2, 2025 · 3179e74 · 3179e74
1 parent 90a5469
commit 3179e74
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 41 deletions.
diff --git a/src/lib/components/assets/shared/asset-preview.svelte b/src/lib/components/assets/shared/asset-preview.svelte
@@ -176,22 +176,22 @@
       border-width: 1px;
       border-style: solid;
       border-color: transparent;
-      padding: var(--tile-padding, 8px);
+      padding: var(--tile-padding, 12px);
 
       :global(.sui.icon) {
         font-size: 48px;
       }
     }
 
     &.icon {
-      width: 32px;
-      height: 32px;
+      border-radius: var(--sui-control-medium-border-radius);
+      width: var(--icon-size, 32px);
+      height: var(--icon-size, 32px);
     }
 
     &.tile,
     &.icon {
       overflow: hidden;
-      border-radius: var(--sui-control-medium-border-radius);
       aspect-ratio: 1 / 1;
     }
 

diff --git a/src/lib/components/common/list-container.svelte b/src/lib/components/common/list-container.svelte
@@ -38,17 +38,10 @@
 
       :global(:is(.grid-view, .list-view)) {
         display: block;
+        padding: 0 16px 16px;
         height: 100%;
         overflow-y: auto;
       }
-
-      :global(.grid-view) {
-        padding: 16px;
-      }
-
-      :global(.list-view) {
-        padding: 8px 16px;
-      }
     }
   }
 </style>
diff --git a/src/lib/components/common/listing-grid.svelte b/src/lib/components/common/listing-grid.svelte
@@ -56,17 +56,6 @@
       height: auto;
       text-align: left;
 
-      &:focus-visible {
-        outline-color: transparent;
-
-        :global(.preview) {
-          outline-offset: -2px;
-          outline-width: 2px !important;
-          outline-style: solid;
-          outline-color: var(--sui-primary-accent-color-light);
-        }
-      }
-
       :global(.grid-cell) {
         display: block;
       }
@@ -111,6 +100,8 @@
   }
 
   .list-view {
+    --icon-size: 36px;
+
     :global([role='grid']) {
       :global(.row-group) {
         :global(.row-group-caption + .grid-row) {
@@ -127,16 +118,8 @@
       }
 
       :global([role='row']) {
-        outline-offset: -2px;
-        outline-width: 2px !important;
-        outline-style: solid;
-        outline-color: transparent;
         transition-property: background-color, outline-color;
         transition-duration: 200ms;
-
-        &:focus {
-          outline-color: var(--sui-primary-accent-color-light);
-        }
       }
 
       :global([role='row'][tabindex]) {
@@ -152,14 +135,18 @@
       }
 
       :global([role='gridcell']) {
-        vertical-align: middle;
         overflow: hidden;
-        text-overflow: ellipsis;
+        padding: 0 16px 0 0;
         height: 40px;
-        padding: 0 8px;
         max-width: 100%;
         color: var(--sui-secondary-foreground-color);
         white-space: nowrap;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+
+        &:first-child {
+          padding-left: 16px;
+        }
 
         :global(.label) {
           overflow: hidden;
@@ -170,16 +157,12 @@
       :global(.grid-cell.image:empty::before) {
         display: block;
         border-radius: var(--sui-control-medium-border-radius);
-        width: 32px;
-        height: 32px;
+        width: var(--icon-size);
+        height: var(--icon-size);
         background-color: var(--sui-secondary-background-color);
         content: '';
       }
 
-      :global([role='gridcell']:last-child) {
-        padding-right: 16px;
-      }
-
       :global([role='row'] [role='gridcell']) {
         border-width: 1px 0 0;
         border-color: var(--sui-secondary-border-color);
@@ -190,6 +173,7 @@
       }
 
       :global([role='gridcell'].checkbox) {
+        padding-left: 8px;
         width: 44px;
       }
 
@@ -199,7 +183,6 @@
       }
 
       :global([role='gridcell'].image) {
-        padding: 0 8px;
         width: 48px;
       }
     }