Appearance issue with tab bar

it does not really bother me too much but it would be nice if i could make this smooth.
this is what it looks like:

gggg
close up
hhhhhhhhhhhh

i thought maybe it is a border but couldnt find any with this color.

Is that the default theme? If not, I’d add what theme it is and include any custom CSS, Style Settings settings, etc., you’ve set.

1 Like

yes it is the default theme with a css snippet on top.


.root {
    --input-focus-border-color: black;
    --input-focus-outline: 0px solid Canvas;
    --input-unfocused-border-color: transparent;
    --input-disabled-border-color: transparent;
    --input-hover-border-color: black;
}

.theme-light {
    --color-base-00: #fdfdfd; /* #141c27   */
    --color-base-05: #ffffff;
    --color-base-10: #f8f8f8;
    --color-base-20: #ffffff;
    --color-base-25: rgb(219, 219, 219);
    --color-base-30: #9a9a9a;
    --color-base-35: #666666;
    --color-base-40: #4d4d4d;
    --color-base-50: #373737;
    --color-base-60: #4c4c4c;
    --color-base-70: #3b3b3b;
    --color-base-100: #3f3f3f;
    
    --h1-color: rgb(243, 243, 243);
    --h2-color: rgb(243, 243, 243);
    --h3-color: rgb(243, 243, 243);
    --h4-color: rgb(243, 243, 243);
    --h5-color: rgb(92, 102, 148);
    --h6-color: rgb(61, 120, 98);
    --h1-weight: 400;
    --h2-weight: 400;
    --h3-weight: 400;
    --h4-weight: 400;
    --h5-weight: 400;
    --h6-weight: 400;
    --h3-size: 1.4rem;
    --h4-size: 1.4rem;
    --h5-size: 1.4rem;
    --h6-size: 1.4rem;
  

    --titlebar-background: var(--accent-jade-dimmed);
    --titlebar-background-focused: var(--accent-jade-dimmed);
    --titlebar-border-width: 0px;
    --titlebar-border-color: var(--background-modifier-border);
    --titlebar-text-color: rgb(223, 223, 223);
    --titlebar-text-color-focused:rgb(223, 223, 223);
    --titlebar-text-weight: var(--font-bold);

    --icon-color: rgb(223, 223, 223);
    --icon-color-hover: rgb(223, 223, 223);
    --icon-color-active: rgb(223, 223, 223);
    --icon-color-focused: rgb(223, 223, 223);

    --code-comment: rgb(0, 0, 0);
    --code-white-space: pre-wrap;
    --code-radius: var(--radius-s);
    --code-size: var(--font-normal);
    --code-background: #1e2530//#141c27;
    --code-normal: #85f8df;
    --code-function: #f4e1b8;
    --code-important: var(--color-orange);
    --code-keyword: #2aadc1;
    --code-operator: white;
    --code-property:#85f8df;
    --code-punctuation: rgb(242, 242, 242);
    --code-string: #989898;
    --code-tag: rgb(242, 242, 242);
    --code-value: #989898;

    --text-selection: rgba(150, 215, 255, 0.419);

    --table-background: white;
    --table-border-width: 0.5px;
    --table-border-color: #d0d7de; 
    --table-white-space: normal;
    --table-header-background: white;
    --table-header-background-hover: rgb(30, 45, 75);
    --table-header-border-width: var(--table-border-width);
    --table-header-border-color: #d0d7de;
    --table-header-font: inherit;
    --table-header-size: var(--font-text-size);
    --table-header-weight: 500;
    --table-header-color: #24292f;
    --table-text-size: inherit;
    --table-text-color: inherit;
    --table-column-max-width: none;
    --table-column-alt-background: transparent;
    --table-column-first-border-width: var(--table-border-width);
    --table-column-last-border-width: var(--table-border-width);
    --table-row-background-hover:#f6f8fa;
    --table-row-alt-background:#f6f8fa;
    --table-row-last-border-width: var(--table-border-width);

}

.theme-dark {
    font-family: Georgia;
    --color-base-00: #141c27; /* #141c27   */
    --color-base-05: #141b26;
    --color-base-10: #1e2530;
    --color-base-20: #282f3a;
    --color-base-25: #323944;
    --color-base-30: #3c434e;
    --color-base-35: #464d58;
    --color-base-40: #505762;
    --color-base-50: #5a616c;
    --color-base-60: #646b76;
    --color-base-70: #bababa;
    --color-base-100: #f2f2f2;

 
    --text-highlight-bg: #2d3f3e;

    --text-normal: #dfdfdf; /* #97cfbc; */ 

    --h1-color: rgb(242, 242, 242);
    --h1-size: 1rem;
    --h1-weight: 400;
    --h2-color: rgb(242, 242, 242);
    --h2-size: 1rem;
    --h2-weight: 400;
    --h3-color: rgb(242, 242, 242);
    --h3-size: 1rem;
    --h3-weight: 400;
    --h4-color: rgb(242, 242, 242);
    --h4-weight: 400;
    --h4-size: 1rem;
    --h5-color: #afc7fd;
    --h5-size: 1rem;
    --h5-weight: 400;
    --h6-color: rgb(170, 216, 236);
    --h6-size: 1rem;

    --accent-purple-30: #364380;
    --accent-blue-20: #0b1528;
    --accent-codeblock: rgb(0, 0, 0);

    --background-modifier-form-field: #000000;

    --background-secondary-alt: var(--color-base-20);
    --interactive-normal: var(--color-base-10);
    --interactive-hover: var(--color-base-35);

    --background-primary:var(--color-base-00); /* rgb(60, 82, 70); */
    --background-primary-alt: var(--color-base-10);
    --background-secondary: var(--color-base-10);
    --background-modifier-hover: rgba(var(--mono-rgb-100), 0.075);
    --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);

    --titlebar-background: var(--accent-jade-dimmed);
    --titlebar-background-focused: var(--accent-jade-dimmed);
    --titlebar-border-width: 0px;
    --titlebar-border-color: var(--background-modifier-border);
    --titlebar-text-color: var(--text-muted);
    --titlebar-text-color-focused: var(--text-normal);
    --titlebar-text-weight: var(--font-bold);

    /*
    --code-comment: rgb(0, 0, 0);
    --code-white-space: pre-wrap;
    --code-radius: none;
    --code-size: var(--font-normal);
    --code-background: var(--color-base-00);
    --code-normal: #85f8df;
    --code-function: #f4e1b8;
    --code-important: var(--color-orange);
    --code-keyword: #2aadc1;
    --code-operator: white;
    --code-property:#85f8df;
    --code-punctuation: rgb(242, 242, 242);
    --code-string: #989898;
    --code-tag: rgb(242, 242, 242);
    --code-value: #989898;
    */
    --code-comment: rgb(0, 0, 0);
    --code-white-space: pre-wrap;
    --code-radius: none;
    --code-size: var(--font-normal);
    --code-background: #141c27;
    --code-normal: #f5f5f5;
    --code-function: #bbc055;
    --code-important: var(--color-orange);
    --code-keyword:  #647ca2; /*#fdafaf; */
    --code-operator: #08a9c2;
    --code-property:#f7f7f7;
    --code-punctuation: #008ea4;
    --code-string: #989898;
    --code-tag: rgb(242, 242, 242);
    --code-value: #989898;


    --text-selection: rgba(150, 215, 255, 0.419);

    --table-background: rgb(60, 82, 70);
    --table-border-width: 0px;
    --table-border-color: #354256; 
    --table-white-space: normal;
    --table-header-background: #101721;
    --table-header-background-hover: #101721;
    --table-header-border-width: var(--table-border-width);
    --table-header-border-color: #354256;
    --table-header-font: inherit;
    --table-header-size: var(--font-text-size);
    --table-header-weight: 500;
    --table-header-color: var(--color-base-100);
    --table-text-size: inherit;
    --table-text-color: var(--color-base-100);
    --table-column-max-width: none;
    --table-column-alt-background: transparent;
    --table-column-first-border-width: var(--table-border-width);
    --table-column-last-border-width: var(--table-border-width);
    --table-row-background-hover: black;
    --table-row-alt-background:rgb(47, 66, 56);
    --table-row-last-border-width: var(--table-border-width);

}

code[class*="language-"],pre[class*="language-"] {
    
    border: 1px solid #3e4e6588 ;
    
    font-family:  d;
}
p {
    font-family : 'Times New Roman', Times, serif ;
}
body {
    font-style:normal;
    /* color: #ebebeb; */
    --accent-h: 169;
    --accent-s: 45%;
    --accent-l: 34%;
    --accent-jade-dimmed: #2f567d ;
    --accent-teal: #0f454a;
    --accent-blue-dimmed: #293f63;
    --accent-gold-30: #c7a366;
    --accent-gold-40: #dcdcdc;
    --accent-red-30: #deab87;
    --accent-header:#efefef;

    --canvas-background: var(--color-base-10); 
    --canvas-card-label-color: var(--text-faint);
    --canvas-color-1: var(--color-red-rgb);
    --canvas-color-2: var(--color-orange-rgb);
    --canvas-color-3: var(--color-yellow-rgb);
    --canvas-color-4: var(--color-green-rgb);
    --canvas-color-5: var(--color-cyan-rgb);
    --canvas-color-6: var(--color-purple-rgb);
    --canvas-dot-pattern: none;

    --tab-background-active: var(--background-primary);
    --tab-text-color: #b0c4c0;
    --tab-divider-color: #5ba89a00;
    --tab-text-color-active: #d1d6d5;
    --tab-text-color-focused: #b0c4c0;
    --tab-text-color-focused-active: #b0c4c0;
    --tab-outline-width: 0px;

    --status-bar-border-width: 0px 0 0 0px;

    --slider-thumb-border-width: 1px;
    --slider-thumb-border-color: var(--background-modifier-border-hover);
    --slider-thumb-height: 18px;
    --slider-thumb-width: 18px;
    --slider-thumb-y: -6px;
    --slider-thumb-radius: 50%;
    --slider-s-thumb-size: 15px;
    --slider-s-thumb-position: -5px;
    --slider-track-background: var(--color-base-25);
    --slider-track-height: 3px;

    --heading-spacing: calc(var(--p-spacing) * 1);

    --input-height: 30px;
    --input-radius: 0px;
    --input-font-weight: var(--font-normal);
    --input-border-width: 0px;

	--border-width: 0px;
    
    --nav-item-color-hover: var(--text-normal);
    --nav-item-color-active: var(--text-normal);
    --nav-item-color-selected: var(--text-normal);
    --nav-item-color-highlighted: var(--text-accent-hover);
    --nav-item-background-hover: var(--color-base-10);
    --nav-item-background-active: var(--accent-purple-30);
    --nav-item-background-selected: hsla(var(--color-accent-hsl), 0.15);
    --nav-item-padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-6);
    --nav-item-parent-padding: var(--nav-item-padding);
    --nav-item-children-padding-left: var(--size-2-2);
    --nav-item-children-margin-left: var(--size-4-3);
    --nav-item-weight: inherit;
    --nav-item-weight-hover: inherit;
    --nav-item-weight-active: inherit;
    --nav-item-white-space: nowrap;
    --nav-indentation-guide-width: var(--indentation-guide-width);
    --nav-indentation-guide-color: var(--indentation-guide-color);
    --nav-collapse-icon-color: var(--collapse-icon-color);
    --nav-collapse-icon-color-collapsed: var(--text-faint);

    --table-background:#2f567d ;
    --table-border-width: 2px;
    --table-border-color: rgb(15, 46, 67); 
    --table-white-space: normal;
    --table-header-background: transparent;
    --table-header-background-hover: inherit;
    --table-header-border-width: var(--table-border-width);
    --table-header-border-color: rgb(0, 0, 0);
    --table-header-font: inherit;
    --table-header-size: var(--font-text-size);
    --table-header-weight: ;
    --table-header-color: #ffffff;
    --table-text-size: inherit;
    --table-text-color: inherit;
    --table-column-max-width: none;
    --table-column-alt-background: var(--table-background);
    --table-column-first-border-width: var(--table-border-width);
    --table-column-last-border-width: var(--table-border-width);
    --table-row-background-hover: var(--table-background);
    --table-row-alt-background: var(--table-background);
    --table-row-last-border-width: var(--table-border-width);

    --background-primary: var(--color-base-20);
    --background-primary-alt: var(--color-base-10);
    --background-secondary: var(--color-base-20);
    --background-modifier-hover: rgba(var(--mono-rgb-100), 0.075);
    --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);
    --background-modifier-border: rgba(0,0,0,0);
    --background-modifier-border-hover: var(--color-base-35);
    --background-modifier-border-focus: var(--color-base-40);
    --background-modifier-error-rgb: var(--color-red-rgb);
    --background-modifier-error: var(--color-red);
    --background-modifier-error-hover: var(--color-red);
    --background-modifier-success-rgb: var(--color-green-rgb);
    --background-modifier-success: var(--color-green);
    --background-modifier-message: rgba(0, 0, 0, 0.9);
    --background-modifier-form-field: var(--color-base-00);

    --list-marker-color:#d6d6d6;
}
:root table {
    --table-border-radius: 5px;
    border-collapse:collapse;
    border-spacing: 0;
    margin-top: 8px;
}


  /* Add the radius */
th:first-child {border-top-left-radius: var(--table-border-radius)}
th:last-child {border-top-right-radius: var(--table-border-radius)}
tr:last-child td:first-child {border-bottom-left-radius: var(--table-border-radius)}
tr:last-child td:last-child {border-bottom-right-radius: var(--table-border-radius)}


  /* Redo the borders */
:root :is(td, th) {
    border-width: 0 var(--table-border-width) var(--table-border-width) 0;
    padding: 8px;
}


img {
    border-radius: 0px;
}



.view-content .list-collapse-indicator svg.svg-icon,
.view-content .collapse-indicator svg.svg-icon {
  color: #5b7497 ;
}
.view-content .is-collapsed .list-collapse-indicator svg.svg-icon,
.view-content .is-collapsed .collapse-indicator svg.svg-icon {
  color: #5b7497;
}

.cm-s-obsidian .cm-inline-code:not(.cm-formatting),
.markdown-rendered :not(pre) > code {
    color: #d59b61;
    background-color: transparent;
}

h5 {
    margin-bottom: 0px;
    padding-top: 3px;
    padding-left:21px;
    padding-right:8px;
    padding-bottom:4px;
    border-bottom-left-radius: 2px;
}
.theme-dark h6 {
    padding-left: 12px;
    padding-left:21px;
    font-weight: 400;
}
.theme-dark h5 {
    color: rgb(164, 194, 255);
    padding-left: 12px;
    padding-left:21px;
    font-weight: 400;
}
.theme-light h4,h3,h2,h1 {
    background-color: rgba(228, 255, 240, 0);
}
.theme-dark h1 {
    background-color: #141a24;
    font-weight:400;
}
.theme-dark h2 {
    background-color: #283837;
    font-weight:400;
}
.theme-dark h3 {
    background-color: #3b4b52;
    font-weight:400;
}
.theme-dark h4 {
    background-color: #4b566b;
    
}
:is(h1,h2,h3,h4) {
    border-top: none;
    padding-left: 3px;
    padding-right: 8px;
    border-left: 16px solid #2d3f3e;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: fit-content;
    background-color: #000000;
}
:is(h1,h2,h3,h4,h5,h6) .collapse-indicator { 
    opacity: 1;
} 



div[data-path='attachments'], div[data-path='attachments'] + div.nav-folder-children { display: none; }
div[data-path='Daily Notes'], div[data-path='Daily Notes'] + div.nav-folder-children { display: none; }
div[data-path='Daily Note Template'], div[data-path='Daily Note Template'] + div.nav-folder-children { display: none; }

.markdown-source-view.mod-cm6 .internal-embed > img, .markdown-preview-view .internal-embed > img { margin:0; }


.HyperMD-header .cm-header-1 {
    padding-left: 8px;
    padding-right: 8px;
    border-left: 6px solid #2d3f3e;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: fit-content;
    background-color: #141a24;
}
.HyperMD-header .cm-header-2 {
    padding-left: 8px;
    padding-right: 8px;
    border-left: 6px solid #2d3f3e;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: fit-content;
    background-color: #283837;
}
.HyperMD-header .cm-header-3 {
    padding-left: 8px;
    padding-right: 8px;
    border-left: 6px solid #2d3f3e;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: fit-content;
    background-color: #3b4b52;
}
.HyperMD-header .cm-header-4 {
    padding-left: 8px;
    padding-right: 8px;
    border-left: 6px solid #2d3f3e;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: fit-content;
    background-color: #4b566b;
    
}
.HyperMD-header .cm-header-5 {
    color: #afc7fd;
    padding-top: 3px;
    padding-left:0px;
    padding-right:8px;
    padding-bottom:4px;
    border-bottom-left-radius: 2px;
    font-weight:400;
}
.HyperMD-header .cm-header-6 {
    color:rgb(170, 216, 236);
    padding-bottom:2px;
    padding-top:1px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-weight:400;
    
}
/*
.markdown-preview-view code{
    color: rgb(182, 162, 98);
} */
.theme-dark #calendar-container {
    font-weight: 400;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:small;
    --color-background-heading: transparent;
    --color-background-day:none;
    --color-background-weekend: #34385962;
    --color-background-weeknum: rgb(194, 184, 33);
    
    --color-dot: #fdafaf;
    --color-arrow: var(--text-muted);
    --color-button: var(--text-muted);
  
    --color-text-title: #ffffff;
    --color-text-heading: #ffffff;
    --color-text-day: #ffffff;
    --color-text-today: #ffffff;
    --color-text-weeknum: #ffffff;
}
.theme-light #calendar-container {
    font-weight: 400;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:small;
    --color-background-heading: transparent;
    --color-background-day:none;
    --color-background-weekend: #34594362;
    --color-background-weeknum: rgb(194, 184, 33);

    --color-dot: rgb(0, 190, 155);
    --color-arrow: var(--text-muted);
    --color-button: var(--text-muted);
  
    --color-text-title: #7a7a7a;
    --color-text-heading: #545454;
    --color-text-day: #737c8b;
    --color-text-today: #737c8b;
    --color-text-weeknum: #ffffff;

}
#calendar-container .year {
    color: rgb(174, 132, 96);
}

#calender-container h1,h2,h3,h4,h5,h6 { background: transparent;}

so i turned the snippet off and it went away. so its caused by the snippet.

In your snippet, it looks like it’s the --titlebar-background parts that are causing you to see it.

In the default theme, it’s here:

.workspace-split.mod-root .workspace-tab-header.is-active::before, 
.workspace-split.mod-root .workspace-tab-header.is-active::after {
    box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve) * 4) var(--tab-background-active);
}

so you can play around with the above or just add:

body {
    --tab-curve: 0px; /*default is 6px*/  
}

somewhere in your snippet.

thanks again for the help. the titlebar background elements do not change anything but the color for me. i guess i have to delete one block after the other and refresh to see what its caused by. if i find a way to keep the curve i will post it here.

the cause was this line

--tab-outline-width: 0px;

this will fix

--tab-outline-width: 1px;

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.