style(next): tweak the attribute detail dialog

src/public/app/widgets/attribute_widgets/attribute_detail.ts

@@ -13,7 +13,7 @@ import appContext from "../../components/app_context.js";
 import type { Attribute } from "../../services/attribute_parser.js";
 
 const TPL = `
-<div class="attr-detail">
+<div class="attr-detail tn-tool-dialog">
     <style>
         .attr-detail {
             display: block;
@@ -80,7 +80,7 @@ const TPL = `
     <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
         <h5 class="attr-detail-title">${t("attribute_detail.attr_detail_title")}</h5>
 
-        <span class="bx bx-x close-attr-detail-button" title="${t("attribute_detail.close_button_title")}"></span>
+        <span class="bx bx-x close-attr-detail-button tn-tool-button" title="${t("attribute_detail.close_button_title")}"></span>
     </div>
 
     <div class="attr-is-owned-by">${t("attribute_detail.attr_is_owned_by")}</div>

src/public/stylesheets/theme-next-dark.css

@@ -19,6 +19,9 @@
 
     --accented-background-color: #555;
 
+    --tool-dialog-background-color: #262626;
+    --tool-dialog-shadow-color: black;
+
     --button-text-color: currentColor;
 
     --cmd-button-background-color: #ffffff28;

src/public/stylesheets/theme-next-light.css

@@ -19,6 +19,9 @@
 
     --accented-background-color: #f5f5f5;
 
+    --tool-dialog-background-color: white;
+    --tool-dialog-shadow-color: #00000070;
+
     --button-text-color: currentColor;
 
     --cmd-button-background-color: #0000000f;

src/public/stylesheets/theme-next/base.css

@@ -67,6 +67,14 @@
     --tab-note-icons: true;
 }
 
+/* Tool dialogs - small dialogs without a backdrop */
+div.tn-tool-dialog {
+    border-radius: 10px;
+    background: var(--tool-dialog-background-color) !important;
+    user-select: none;
+    box-shadow: 10px 10px 93px -25px var(--tool-dialog-shadow-color);
+}
+
 /*
  * Note search suggestions
  */