Add bottom border line to menubar

Better visual separation of menubar and editor content, especially when scrolling long content. Signed-off-by: Jonas <jonas@freesources.org>
nextcloud · Sep 16, 2024 · ef3d8c8 · ef3d8c8
1 parent 888a183
commit ef3d8c8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
@@ -227,6 +227,7 @@ export default {
 		background-color: var(--color-main-background-translucent);
 		backdrop-filter: var(--background-blur);
 		max-height: var(--default-clickable-area); // important for mobile so that the buttons are always inside the container
+		border-bottom: 1px solid var(--color-border);
 		padding-top:3px;
 		padding-bottom: 3px;
 

diff --git a/src/components/Menu/ReadonlyBar.vue b/src/components/Menu/ReadonlyBar.vue
@@ -49,6 +49,9 @@ export default defineComponent({
 <style scoped>
 .text-readonly-bar {
 	display: flex;
+	border-bottom: 1px solid var(--color-border);
+	padding-top: 3px;
+	padding-bottom: 3px;
 }
 .text-readonly-bar__entries {
 	display: flex;