Global Boomarks

web/css/components/app-bookmark-form.css

@@ -0,0 +1,124 @@
+/**
+ * app-bookmark-form.css
+ * Styles for bookmark and bookmark-group dialogs.
+ */
+@layer components {
+  dialog[data-app-bookmark-dialog] > article.app-bookmark-dialog,
+  dialog[data-app-bookmark-group-dialog] > article.app-bookmark-dialog {
+    max-width: 24rem;
+  }
+
+  dialog[data-app-bookmark-dialog] > article.app-bookmark-dialog > header,
+  dialog[data-app-bookmark-group-dialog] > article.app-bookmark-dialog > header {
+    position: relative;
+    padding-inline-end: 2rem;
+  }
+
+  dialog[data-app-bookmark-dialog] > article.app-bookmark-dialog > header h2,
+  dialog[data-app-bookmark-group-dialog] > article.app-bookmark-dialog > header h2 {
+    margin: 0;
+  }
+
+  dialog[data-app-bookmark-dialog] [data-bookmark-dialog-close].close,
+  dialog[data-app-bookmark-group-dialog] [data-bookmark-group-dialog-close].close {
+    position: absolute;
+    inset-inline-end: 1rem;
+    inset-block-start: 1rem;
+    float: none;
+    margin: 0;
+  }
+
+  dialog[data-app-bookmark-dialog] form,
+  dialog[data-app-bookmark-group-dialog] form {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin: 0;
+  }
+
+  dialog[data-app-bookmark-dialog] form label,
+  dialog[data-app-bookmark-group-dialog] form label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  dialog[data-app-bookmark-dialog] form input[type="text"],
+  dialog[data-app-bookmark-dialog] form select,
+  dialog[data-app-bookmark-group-dialog] form input[type="text"],
+  dialog[data-app-bookmark-group-dialog] form select {
+    width: 100%;
+    margin: 0;
+  }
+
+  dialog[data-app-bookmark-dialog] form footer,
+  dialog[data-app-bookmark-group-dialog] form footer {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    padding-top: var(--app-spacing);
+  }
+
+  dialog[data-app-bookmark-dialog] form footer button,
+  dialog[data-app-bookmark-group-dialog] form footer button {
+    margin: 0;
+  }
+
+  .app-bookmark-delete-btn {
+    color: var(--app-del-color, #c62828);
+    border-color: var(--app-del-color, #c62828);
+    width: 100%;
+  }
+
+  .app-bookmark-delete-btn:hover {
+    background: var(--app-del-color, #c62828);
+    color: #fff;
+  }
+
+  .app-bookmark-new-group-btn {
+    width: 100%;
+  }
+
+  .app-bookmark-group-icon-picker {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 0.3rem;
+  }
+
+  .app-bookmark-group-icon-option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    min-height: 1.9rem;
+    border: 1px solid var(--app-border);
+    border-radius: var(--app-border-radius);
+    background: transparent;
+    color: var(--app-muted-color);
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    transition: border-color 120ms ease, color 120ms ease;
+  }
+
+  .app-bookmark-group-icon-option:hover {
+    border-color: var(--app-primary);
+    color: var(--app-primary);
+  }
+
+  .app-bookmark-group-icon-option.active {
+    border-color: var(--app-primary);
+    background: var(--app-primary);
+    color: #fff;
+  }
+
+  .app-bookmark-group-icon-option > i {
+    font-size: 0.95rem;
+  }
+
+  .app-bookmark-delete-separator {
+    margin-block: 0.2rem 0.35rem;
+  }
+}

web/css/components/app-details-titlebar.css

@@ -73,26 +73,24 @@
   }
 
   .app-details-titlebar details.dropdown li {
-    padding: 0 !important;
-    margin: 0 !important;
-    border-bottom: 1px solid var(--app-border);
-  }
-
-  .app-details-titlebar details.dropdown li:last-child {
-    border-bottom: none;
-  }
-
-  .app-details-titlebar details.dropdown ul {
-    padding: 0 !important;
-    margin: 0 !important;
+    padding: 0;
+    margin: 0;
   }
 
   .app-details-titlebar details.dropdown li button,
   .app-details-titlebar details.dropdown li [role="button"] {
-    margin: 0 !important;
+    margin: 0;
     border: none;
-    border-radius: 0;
+    border-radius: 3px;
     width: 100%;
     text-align: left;
+    padding: 0.375rem 0.5rem;
+  }
+
+  .app-details-titlebar details.dropdown li button:hover,
+  .app-details-titlebar details.dropdown li button:focus-visible,
+  .app-details-titlebar details.dropdown li [role="button"]:hover,
+  .app-details-titlebar details.dropdown li [role="button"]:focus-visible {
+    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
   }
 }

web/css/components/app-list-titlebar.css

@@ -59,26 +59,24 @@
   }
 
   .app-list-titlebar details.dropdown li {
-    padding: 0 !important;
-    margin: 0 !important;
-    border-bottom: 1px solid var(--app-border);
-  }
-
-  .app-list-titlebar details.dropdown li:last-child {
-    border-bottom: none;
-  }
-
-  .app-list-titlebar details.dropdown ul {
-    padding: 0 !important;
-    margin: 0 !important;
+    padding: 0;
+    margin: 0;
   }
 
   .app-list-titlebar details.dropdown li button,
   .app-list-titlebar details.dropdown li [role="button"] {
-    margin: 0 !important;
+    margin: 0;
     border: none;
-    border-radius: 0;
+    border-radius: 3px;
     width: 100%;
     text-align: left;
+    padding: 0.375rem 0.5rem;
+  }
+
+  .app-list-titlebar details.dropdown li button:hover,
+  .app-list-titlebar details.dropdown li button:focus-visible,
+  .app-list-titlebar details.dropdown li [role="button"]:hover,
+  .app-list-titlebar details.dropdown li [role="button"]:focus-visible {
+    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
   }
 }

web/css/layout/app-shell.css

@@ -323,7 +323,7 @@
 
   footer.site-footer {
     padding-inline: calc(var(--app-spacing) * 2);
-    }
+  }
 
   footer.site-footer a {
     color: inherit;
@@ -1486,7 +1486,8 @@
     --app-background-color: var(--app-form-element-readonly-background-color);
     --app-border-color: var(--app-form-element-readonly-border-color);
     --app-color: var(--app-form-element-readonly-color);
-    --app-box-shadow: inset 0 0 0 0.0625rem var(--app-form-element-readonly-border-color);
+    --app-box-shadow: inset 0 0 0 0.0625rem
+      var(--app-form-element-readonly-border-color);
   }
 
   input:not(
@@ -2396,8 +2397,8 @@
     min-width: fit-content;
     margin: 0;
     margin-top: var(--app-outline-width);
-    padding: 0;
-    border: var(--app-border-width) solid var(--app-dropdown-border-color);
+    padding: 0.25rem;
+    border: 1px solid var(--app-dropdown-border-color);
     border-radius: var(--app-border-radius);
     background-color: var(--app-dropdown-background-color);
     box-shadow: var(--app-dropdown-box-shadow);
@@ -2417,30 +2418,18 @@
   details.dropdown > summary + ul li {
     width: 100%;
     margin-bottom: 0;
-    padding: calc(var(--app-form-element-spacing-vertical) * 0.5)
-      var(--app-form-element-spacing-horizontal);
+    padding: 0;
     list-style: none;
     text-align: left;
-    border-bottom: 1px solid var(--app-accordion-border-color);
-  }
-
-  details.dropdown > summary + ul li:first-of-type {
-    margin-top: calc(var(--app-form-element-spacing-vertical) * 0.5);
-  }
-
-  details.dropdown > summary + ul li:last-of-type {
-    margin-bottom: calc(var(--app-form-element-spacing-vertical) * 0.5);
-    border-bottom: 0;
   }
 
   details.dropdown > summary + ul li a {
     display: block;
-    margin: calc(var(--app-form-element-spacing-vertical) * -0.5)
-      calc(var(--app-form-element-spacing-horizontal) * -1);
-    padding: calc(var(--app-form-element-spacing-vertical) * 0.5)
-      var(--app-form-element-spacing-horizontal);
+    width: 100%;
+    margin: 0;
+    padding: 0.375rem 0.5rem;
     overflow: hidden;
-    border-radius: 0;
+    border-radius: 3px;
     color: var(--app-dropdown-color);
     text-decoration: none;
     text-overflow: ellipsis;
@@ -2455,7 +2444,7 @@
     + ul
     li
     a[aria-current]:not([aria-current="false"]) {
-    background-color: var(--app-dropdown-hover-background-color);
+    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
   }
 
   details.dropdown > summary + ul li label {
@@ -2463,7 +2452,8 @@
   }
 
   details.dropdown > summary + ul li:has(label):hover {
-    background-color: var(--app-dropdown-hover-background-color);
+    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+    border-radius: 3px;
   }
 
   details.dropdown[open] > summary {
@@ -2779,6 +2769,10 @@
     overflow: auto;
   }
 
+  dialog > article > footer button {
+    margin-bottom: 0;
+  }
+
   .bi::before,
   [class^="bi-"]::before,
   [class*=" bi-"]::before {

web/css/layout/app-sidebar.css

@@ -283,68 +283,267 @@
     margin-top: 10px;
   }
 
-  .app-sidebar .app-sidebar-saved-filters {
-    margin-bottom: var(--app-spacing);
-  }
-
-  .app-sidebar .app-sidebar-saved-filter-item:before {
-    content: "";
-    display: none;
-  }
-
-  .app-sidebar .app-sidebar-group.app-sidebar-saved-filters > small {
-    padding: 5px var(--app-spacing);
-  }
-
-  .app-sidebar .app-sidebar-saved-filter-item {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    justify-content: space-between;
-    padding-right: 10px;
-  }
-
-  .app-sidebar .app-sidebar-saved-filter-item > a {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .app-sidebar .app-sidebar-saved-filter-delete {
-    margin: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .app-sidebar .app-sidebar-saved-filter-delete button {
-    margin: 0;
-    border: 0;
-    background: transparent;
-    color: var(--app-muted-color);
-    padding: 4px;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transition: opacity 120ms ease;
-  }
-
-  .app-sidebar .app-sidebar-saved-filter-delete button:hover {
-    color: var(--app-contrast);
-  }
-
-  .app-sidebar
-    .app-sidebar-saved-filter-item:hover
-    .app-sidebar-saved-filter-delete
-    button,
-  .app-sidebar
-    .app-sidebar-saved-filter-item:focus-within
-    .app-sidebar-saved-filter-delete
-    button {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-  }
-
   aside.app-sidebar li.app-sidebar-group {
     margin-bottom: var(--app-spacing);
   }
+
+  .app-sidebar .app-sidebar-bookmark-item > a > i {
+    flex-shrink: 0;
+    width: 16px;
+    text-align: center;
+  }
+
+  .app-sidebar #aside-panel-bookmarks .app-sidebar-bookmark-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .app-sidebar #aside-panel-bookmarks .app-sidebar-bookmark-group-shell {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    width: 100%;
+  }
+
+  .app-sidebar #aside-panel-bookmarks .app-sidebar-bookmark-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: var(--app-spacing);
+  }
+
+  .app-sidebar #aside-panel-bookmarks .app-sidebar-bookmark-group-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    color: var(--app-muted-color);
+    font-size: 0.72rem;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+  }
+
+  .app-sidebar #aside-panel-bookmarks .app-sidebar-bookmark-group-label > span {
+    flex: 1;
+    min-width: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .app-sidebar #aside-panel-bookmarks .app-sidebar-bookmark-group-label > i {
+    flex-shrink: 0;
+    width: 16px;
+    text-align: center;
+  }
+
+  .app-sidebar #aside-panel-bookmarks .app-sidebar-bookmark-action-menu {
+    margin: 0;
+    margin-right: 5px;
+    position: relative;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu
+    summary:after {
+    display: none;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu
+    > summary {
+    list-style: none;
+    border: 0;
+    background: transparent;
+    color: var(--app-muted-color);
+    padding: 0.25rem;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    line-height: 1;
+    margin: 0;
+    border-radius: 3px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      color 120ms ease,
+      background 120ms ease,
+      opacity 120ms ease;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu
+    > summary {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-item:hover
+    .app-sidebar-bookmark-action-menu
+    > summary,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-item:focus-within
+    .app-sidebar-bookmark-action-menu
+    > summary,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-group-header:hover
+    .app-sidebar-bookmark-action-menu
+    > summary,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-group-header:focus-within
+    .app-sidebar-bookmark-action-menu
+    > summary,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu[open]
+    > summary,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu
+    > summary:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu
+    > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu
+    > summary
+    i {
+    font-size: 0.95rem;
+    pointer-events: none;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu[open]
+    > summary,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu
+    > summary:hover,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu
+    > summary:focus-visible {
+    color: var(--app-contrast);
+    background: color-mix(in srgb, var(--app-contrast) 10%, transparent);
+  }
+
+  @media (hover: none), (pointer: coarse) {
+    .app-sidebar
+      #aside-panel-bookmarks
+      .app-sidebar-bookmark-action-menu
+      > summary {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .app-sidebar #aside-panel-bookmarks .app-sidebar-bookmark-action-menu-list {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-start: calc(100% + 4px);
+    min-width: 10rem;
+    max-width: calc(220px - 2 * var(--app-spacing));
+    border: 1px solid var(--app-border);
+    border-radius: var(--app-border-radius);
+    background: var(--app-card-bg, var(--app-background-color));
+    box-shadow:
+      0 4px 16px rgba(0, 0, 0, 0.14),
+      0 1px 3px rgba(0, 0, 0, 0.08);
+    padding: 0.25rem;
+    z-index: 10;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    > li {
+    margin: 0;
+    padding: 0;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    button {
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    text-align: start;
+    padding: 0.375rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    button:hover,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    button:focus-visible {
+    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    button[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    li:has(> .app-sidebar-bookmark-action-danger) {
+    margin-top: 0.2rem;
+    padding-top: 0.2rem;
+    border-top: 1px solid var(--app-border);
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    .app-sidebar-bookmark-action-danger {
+    color: var(--app-del-color, #c62828);
+  }
+
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    .app-sidebar-bookmark-action-danger:hover,
+  .app-sidebar
+    #aside-panel-bookmarks
+    .app-sidebar-bookmark-action-menu-list
+    .app-sidebar-bookmark-action-danger:focus-visible {
+    background: rgba(198, 40, 40, 0.12);
+  }
 }

web/css/layout/app-topbar.css

@@ -187,13 +187,12 @@ main:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
 .app-topbar-menu-list li > a,
 .app-topbar-menu-list li > button {
   display: block;
-  margin: calc(var(--app-form-element-spacing-vertical) * -0.5)
-    calc(var(--app-form-element-spacing-horizontal) * -1);
-  padding: calc(var(--app-form-element-spacing-vertical) * 0.5)
-    var(--app-form-element-spacing-horizontal);
+  width: 100%;
+  margin: 0;
+  padding: 0.375rem 0.5rem;
   overflow: hidden;
   border: 0;
-  border-radius: 0;
+  border-radius: 3px;
   background: transparent;
   color: var(--app-dropdown-color);
   font: inherit;
@@ -213,7 +212,7 @@ main:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
 .app-topbar-menu-list li > button:hover,
 .app-topbar-menu-list li > button:focus,
 .app-topbar-menu-list li > button:focus-visible {
-  background-color: var(--app-dropdown-hover-background-color);
+  background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
 }
 
 .app-topbar-menu-list li > button.app-topbar-menu-with-hotkey {
@@ -230,9 +229,7 @@ main:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
 }
 
 .app-topbar-menu-list li.app-topbar-menu-heading {
-  padding-top: calc(var(--app-spacing) * 0.5);
-  padding-bottom: calc(var(--app-spacing) * 0.35);
-  border-bottom: 0;
+  padding: calc(var(--app-spacing) * 0.5) 0.5rem calc(var(--app-spacing) * 0.35);
   color: var(--app-muted-color);
   font-weight: 500;
   letter-spacing: 0.03em;
@@ -240,14 +237,9 @@ main:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
   pointer-events: none;
 }
 
-.app-topbar-menu-list.app-topbar-menu-list--right li {
-  border-bottom: 0;
-}
-
 .app-topbar-menu-list li.app-topbar-menu-divider {
   margin: calc(var(--app-spacing) * 0.25) 0;
   padding: 0;
-  border-bottom: 0;
   height: 1px;
   background: var(--app-border);
   list-style: none;