More style tweaks

assets/theme.css

@@ -163,6 +163,9 @@ body {
     --list-item-selected-color: var(--color-highlight-dark);
     --list-item-selected-color-highlight: var(--color-highlight);
 
+    --list-item-focus-background: var(--color-shade-2);
+    --list-item-focus-color: var(--color-foreground);
+
     /* BOXES */
 
     --box-border-style: solid;

packages/app/src/elements/attachment.ts

@@ -60,7 +60,7 @@ export class AttachmentElement extends LitElement {
             }
 
             .info {
-                margin: -0.2em 0.5em 0.5em;
+                margin: -0.2em 0.5em 0.5em 1.5em;
             }
         `,
     ];

packages/app/src/elements/item-view.ts

@@ -385,12 +385,14 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
                         </div>
 
                         <div class="attachments" ?hidden=${!attachments.length}>
-                            <h2 class="horizontally-double-margined animated section-header">
-                                <pl-icon icon="attachment" class="inline"></pl-icon>
+                            <h2
+                                class="horizontally-double-margined bottom-margined animated section-header"
+                                style="margin-left: 2.2em;"
+                            >
                                 ${$l("Attachments")}
                             </h2>
 
-                            <pl-list>
+                            <pl-list class="border-top border-bottom block">
                                 ${attachments.map(
                                     (a) => html`
                                         <pl-attachment

packages/app/src/elements/items-list.ts

@@ -146,7 +146,7 @@ export class VaultItemListItem extends LitElement {
             :host {
                 display: block;
                 pointer-events: none;
-                padding: 0.65em;
+                padding: 0.5em;
             }
 
             .item-fields {
@@ -158,8 +158,8 @@ export class VaultItemListItem extends LitElement {
                 /* scroll-padding: 1em; */
                 scroll-behavior: smooth;
                 pointer-events: auto;
-                padding: 0 0.65em 0 2.6em;
-                margin: 0.65em -0.65em 0 -0.65em;
+                padding: 0 0.5em 0 2.7em;
+                margin: 0.5em -0.5em 0 -0.5em;
             }
 
             .item-field {
@@ -273,26 +273,16 @@ export class VaultItemListItem extends LitElement {
         const { item, vault, warning } = this;
         const tags = [];
 
-        // if (!this.filter?.vault) {
         let name = truncate(vault.name, 15);
         if (vault.org) {
             name = `${truncate(vault.org.name, 15)} / ${name}`;
         }
-        tags.push({ name, icon: "vault", class: "highlight" });
-        // }
 
         if (warning) {
             tags.push({ icon: "error", class: "warning", name: "" });
         }
 
-        if (item.tags.length === 1) {
-            const t = item.tags.find((t) => t === router.params.tag) || item.tags[0];
-            tags.push({
-                icon: "tag",
-                name: t,
-                class: "",
-            });
-        } else if (item.tags.length) {
+        if (item.tags.length) {
             tags.push({
                 icon: "tag",
                 name: item.tags.length.toString(),
@@ -317,6 +307,8 @@ export class VaultItemListItem extends LitElement {
             });
         }
 
+        tags.push({ name, icon: "vault", class: "highlight" });
+
         return html`
             <div class="margined center-aligning horizontal layout">
                 <div class="stretch collapse spacing center-aligning horizontal layout">
@@ -326,7 +318,7 @@ export class VaultItemListItem extends LitElement {
                         ? html` <pl-icon icon="checkbox-unchecked" class="faded"></pl-icon> `
                         : html` <pl-item-icon .item=${item}></pl-item-icon> `}
 
-                    <div class="ellipsis semibold stretch collapse" ?disabled=${!item.name}>
+                    <div class="ellipsis semibold stretch collapse left-half-margined" ?disabled=${!item.name}>
                         ${item.name || $l("No Name")}
                     </div>
 

packages/app/src/styles/misc.ts

@@ -148,6 +148,12 @@ export const misc = css`
         /* box-shadow: inset 0.2em 0 0 0 var(--color-highlight); */
     }
 
+    .list-item:focus:not([aria-selected="true"]) {
+        background: var(--list-item-focus-background);
+        color: var(--list-item-focus-color);
+        /* box-shadow: inset 0.2em 0 0 0 var(--color-highlight); */
+    }
+
     .section-header {
         font-variant: all-small-caps;
         letter-spacing: 0.1em;