UI Tweaks (#8152)

apps/client/src/stylesheets/style.css

@@ -2182,7 +2182,7 @@ body.zen.experimental-feature-new-layout {
         display: none;
     }
 
-    .classic-toolbar-widget {
+    #rest-pane > div.classic-toolbar-widget {
         position: fixed;
         left: 50%;
         bottom: 20px;
@@ -2197,6 +2197,7 @@ body.zen.experimental-feature-new-layout {
         padding: 4px;
         background: var(--menu-background-color);
         transform: translateX(-50%);
+        backdrop-filter: blur(6px);
     }
 
     #root-widget:has(.note-split.type-text:focus-within) .classic-toolbar-widget,

apps/client/src/stylesheets/theme-next-dark.css

@@ -77,6 +77,7 @@
     --link-color: #95c3d9;
     --link-hover-background: #75c2e324;
     --link-hover-color: var(--link-color);
+    --link-selection-outline-color: #75c2e385;
 
     --hover-item-text-color: #efefef;
     --hover-item-background-color: #ffffff16;

apps/client/src/stylesheets/theme-next-light.css

@@ -77,6 +77,7 @@
     --link-color: #0076af;
     --link-hover-background: #3c7fa017;
     --link-hover-color: var(--link-color);
+    --link-selection-outline-color: #95c3d9db;
 
     --hover-item-text-color: black;
     --hover-item-background-color: #0000001a;

apps/client/src/stylesheets/theme-next/forms.css

@@ -353,6 +353,11 @@ label.input-group.tn-number-unit-pair input {
     padding-inline-end: 0;
 }
 
+:root .input-group > pre[aria-hidden="true"] {
+    margin: 0;
+    padding: 0;
+}
+
 /* Combo box-like dropdown buttons */
 
 .select-button.dropdown-toggle::after {

apps/client/src/stylesheets/theme-next/notes/text.css

@@ -678,8 +678,8 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
 
 .ck-content a.ck-widget.ck-widget_selected,
 .ck-content a.ck-link_selected {
-    outline: 2px solid var(--input-focus-outline-color);
+    outline: none;
-    outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--link-selection-outline-color);
     background: var(--link-hover-background);
 } 
 
@@ -692,7 +692,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
      text-decoration: none;
 }
 
-.ck-content a.reference-link.use-note-color  > span {
+.ck-content a.reference-link > span.use-note-color {
     color: var(--custom-color, inherit);
 }
 

apps/client/src/stylesheets/theme-next/shell.css

@@ -1085,7 +1085,7 @@ body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-lay
     margin-top: calc((var(--tab-bar-height) - var(--tab-height)) * -1);
 }
 
-body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
+body.layout-horizontal div.tab-row-widget div.note-tab div.note-tab-wrapper {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -1374,6 +1374,14 @@ body.mobile .note-title {
     border-bottom: 2px solid #0000001c !important;
 }
 
+body.experimental-feature-new-layout #center-pane .note-split > div.alert {
+    margin-top: 0;
+}
+
+body.experimental-feature-new-layout #center-pane .note-split > div.alert + .scrolling-container {
+    padding-top: 20px;
+}
+
 /*
  * Promoted attributes
  */

apps/client/src/widgets/attribute_widgets/attribute_detail.ts

@@ -82,7 +82,7 @@ const TPL = /*html*/`
     <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
         <h5 class="attr-detail-title">${t("attribute_detail.attr_detail_title")}</h5>
 
-        <span class="bx bx-x close-attr-detail-button tn-tool-button" title="${t("attribute_detail.close_button_title")}"></span>
+        <button class="close-attr-detail-button icon-action bx bx-x" title="${t("attribute_detail.close_button_title")}"></button>
     </div>
 
     <div class="attr-is-owned-by">${t("attribute_detail.attr_is_owned_by")}</div>

apps/client/src/widgets/layout/StatusBar.css

@@ -298,6 +298,11 @@
     margin: 0 !important;
     padding: 0;
 
+    body.layout-horizontal.background-effects & {
+        /* Do not apply Mica over the bottom panel in the horizontal layout */
+        background: var(--right-pane-background-color);
+    }
+
     .bottom-panel-title-bar {
         display: flex;
         padding: 6px 12px;

apps/client/src/widgets/note_title.css

@@ -18,6 +18,10 @@ div.note-title-widget {
     line-height: 1;
     padding-block: 0;
     padding-inline: var(--note-title-padding-inline);
+
+    &::selection {
+        color: var(--main-text-color);
+    }
 }
 
 .note-title-widget input.note-title[readonly] {

apps/client/src/widgets/watched_file_update_status.ts

@@ -17,7 +17,7 @@ const TPL = /*html*/`
 
     <p>${t("watched_file_update_status.file_last_modified")}</p>
 
-    <div style="display: flex; flex-direction: row; justify-content: space-evenly;">
+    <div style="display: flex; flex-direction: row; justify-content: flex-start; gap: 8px;">
         <button class="btn btn-sm file-upload-button">${t("watched_file_update_status.upload_modified_file")}</button>
 
         <button class="btn btn-sm ignore-this-change-button">${t("watched_file_update_status.ignore_this_change")}</button>