How to make the editor pane have rounded corners?

Hi! For the sake of visual harmony, I want the main area/editor pane to have rounded corners, the radius of which must match a macOS window’s. (It appears to be 9px.) How can I achieve this? Claude AI couldn’t crack it!

Appearance settings

Minimal Theme w/ “Minimal status bar” OFF in Minimal Theme settings.

CSS snippet for matching sidebar & tab container background
body.is-focused .titlebar,
body.is-focused .workspace-ribbon.mod-left {
   --titlebar-background: var(--bg2) !important;
}

.sidebar-toggle-button, 
.workspace-tabs.mod-top {
   --tab-container-background: var(--bg2) !important;
}

.workspace-tab-header-container {
   --titlebar-background-focused: var(--bg2) !important;
}

body.is-focused {
   --titlebar-background-focused: var(--bg2) !important;
}

body:not(.sidebar-color) .mod-right-split {
   --background-secondary: var(--bg2) !important;
}

body:not(.sidebar-color) .mod-right-split :not(.mod-top) .workspace-tab-header-container {
   --tab-container-background: var(--bg2);
}

[Minimal] Matching background for sidebars & tab container.css (636 Bytes)

I am not sure if this helps, but … to get this “ugly but nice seen” round border with rounded corners:

image

… I’ve just added “border” and “border-radius”, like this:

.markdown-source-view.mod-cm6 .cm-editor {
    flex: 1 1;
    min-height: 0;
    border: 1px aqua solid;
    border-radius: 9px;
}

This was in DevTools, didn’t try with snippet. Hope it helps.

Cheers, Marko

1 Like

That’s a start, thanks! Any idea how to clip the part of the background outside the rounded corner? :thinking: Claude again wasn’t of help…

Screen Shot 2024-10-24 at 15.31.06

Currently, not behind my computer, so can’t play with the theme⁣ :slight_smile: … try to apply (also) to this part:

.view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller {
    padding: var(--file-margins);
    border-radius: 9px;
    border: 1px red solid;
}

… it’s actually a child element of the previous one.

Cheers, Marko

Didn’t work unfortunately :pensive:

Screen Shot 2024-10-24 at 15.58.35

OK, I saw what was the problem at my vault … some plugin was hiding my view …

image

.workspace-leaf-content[data-type='markdown'] .view-content {
    padding: 0;
    overflow: hidden;
    background: blue;
    border-radius: 9px;
}

Let’s try to apply border-radius to this group of classes.

Cheers, Marko