obsidian_bjonnh.css

/* @settings

name: Bjonnh
id: bjonnh-theme-snippet

settings:
    -
        id: bjonnh-page-width
        title: Page width
        type: variable-number
        default: 42
        format: rem
    -
        id: bjonnh-eat-folder-names-at-root
        title: Eat prefix letters from folders on the root
        type: variable-number
        default: 0
        format: ch
    -
        id: bjonnh-menu-shadow-spread
        title: Menu shadow spread
        default: 100
        format: px
    -
        id: bjonnh-menu-shadow-blur
        title: Menu shadow blur
        default: 8
        format: px

*/


/*
 * This is to be used with the Border theme in dark mode it will likely not work in light mode
*/

/*
 * {
  "Components@@tab-autohide": false,
  "Components@@status-bar-autohide": true,
  "Components@@Ribbon-autohide": true,
  "Components@@nav-header-autohide": true,
  "Components@@tab-title-bar-autohide": true,
  "Components@@CTA-BTN-enable": true,
  "Components@@file-names-untrim": false,
  "Components@@folder-font-bold": true,
  "Components@@colorful-folder": true,
  "Components@@outline-enhanced": true,
  "Components@@setting-item-title-icon-remove": false,
  "Components@@scrollbar-hide": false,
  "Appearance-dark@@theme-dark-style-select": "theme-dark-background-black",
  "Appearance-dark@@card-layout-open-dark": false,
  "Appearance-dark@@color-accent-dark": "#8B8989",
  "Appearance-dark@@color-accent-1-dark": "#ADADAD",
  "Appearance-dark@@color-accent-2-dark": "#B8B8B8",
  "Appearance-dark@@color-red-rgb@@dark": "#FB464C",
  "Appearance-dark@@color-orange-rgb@@dark": "#E9973F",
  "Appearance-dark@@color-yellow-rgb@@dark": "#E0DE71",
  "Appearance-dark@@color-green-rgb@@dark": "#44CF6E",
  "Appearance-dark@@color-cyan-rgb@@dark": "#53DFDD",
  "Appearance-dark@@color-blue-rgb@@dark": "#027AFF",
  "Appearance-dark@@color-purple-rgb@@dark": "#A882FF",
  "Appearance-dark@@color-pink-rgb@@dark": "#FA99CD",
  "Appearance-dark@@background-primary@@dark": "#0C0419",
  "Appearance-dark@@background-secondary@@dark": "#000000",
  "Appearance-dark@@background-tertiary@@dark": "#000000",
  "Appearance-dark@@text-normal@@dark": "#FFFFFF",
  "Appearance-dark@@text-muted@@dark": "#FCF7FF",
  "Appearance-dark@@text-faint@@dark": "#C79CD3",
  "Appearance-dark@@interactive-normal@@dark": "#3D1146",
  "Appearance-dark@@interactive-hover@@dark": "#6A3680",
  "Appearance-dark@@link-external-color@@dark": "#A8A8A8",
  "Appearance-dark@@link-external-color-hover@@dark": "#A8A8A8",
  "Appearance-dark@@input-radius-dark": 3,
  "Editor@@border-focus-mode": true,
  "Editor@@line-hover-indicator": true,
  "Plugin@@colorful-checkbox": true,
  "Components@@file-icon-remove": false,
  "bjonnh-theme-snippet@@bjonnh-page-width": 68,
  "Appearance-dark@@accent-dark": "#4A2775",
  "Appearance-dark@@accent-color-override-dark": true,
  "Appearance-dark@@text-accent@@dark": "#D7BFEB",
  "Appearance-dark@@background-modifier-border@@dark": "#D497FF3D",
  "a-unique-id@@cards-border-width": 1,
  "Appearance-dark@@color-accent-3-dark": "#F3B7FF",
  "Appearance-dark@@interactive-accent@@dark": "#4D2160",
  "Editor@@heading-indicator-off": false,
  "Editor@@collapse-icon-restore": false,
  "Editor@@h2-divider-on": false,
  "Editor@@h1-divider-on": false,
  "Editor@@line-normal-opacity": 0.85,
  "Appearance-dark@@interactive-accent-hsl@@dark": "#DA93DD",
  "Appearance-dark@@background-mod-left-split-dark": "#CC1B1B",
  "Appearance-dark@@mod-left-split-background-select-dark": "mod-left-split-background-transparent-dark",
  "Appearance-dark@@mod-right-split-background-select-dark": "mod-right-split-background-transparent-dark",
  "Appearance-dark@@mod-root-split-background-select-dark": "mod-root-split-background-CSS-dark",
  "Appearance-dark@@background-mod-root-CSS-dark": "rgba(0,0,0,0.25)",
  "Appearance-dark@@background-underlying-select-dark": "background-underlying-default-dark",
  "Appearance-dark@@Active-states-file-explorer-select-dark": "activated-file-tab-style-dark",
  "Appearance-dark@@background-primary-alt@@dark": "#340064",
  "Appearance-dark@@background-secondary-alt@@dark": "#30005C",
  "Appearance-light@@mod-left-split-background-select-light": "mod-left-split-background-primary-light",
  "Appearance-light@@card-layout-open-light": false,
  "Plugin@@Projects-bg-color": "Projects-bg-color-default",
  "Components@@vault-profile-autohide": true,
  "Components@@new-tab-image-select": "new-tab-image-none",
  "Components@@extra-anim-remove": true,
  "Components@@anim-speed": 2,
  "bjonnh-theme-snippet@@bjonnh-eat-folder-names-at-root": -3
}
*/

body {
--bjonnh-eat-folder-names-at-root: 0ch;
--bjonnh-menu-shadow-spread: 100px;
--bjonnh-menu-shadow-blur: 8px;
--bjonnh-callout-shadow-spread: 20px;
--bjonnh-callout-shadow-blur: 4px;
--background-alt-dark: #100010 !important; /* Missing color used for code background for example or headers of tables */
--background-modifier-hover: rgba(100,0,100,0.5) !important; /* For Projects table/board etc */
--interactive-accent-hover: rgba(100,0,100,0.5) !important; /* For Projects table/board etc */


/*--titlebar-background: transparent !important;
--titlebar-background-focused: var(--titlebar-background);

--text-normal: #f1f1f1 !Important;

--workspace-background-translucent: rgba(var(--mono-rgb-0), 0.31);
*/
}

.modal, .modal-container .prompt, .suggestion-container, .popover, .menu {
  box-shadow: 12px 0px var(--bjonnh-menu-shadow-spread) var(--bjonnh-menu-shadow-blur) rgba(0, 0, 255, .2), -12px 0px var(--bjonnh-menu-shadow-spread) var(--bjonnh-menu-shadow-blur) rgba(255, 0, 0, .2) !important;
}

/* Unfortunately doesn't work well with quotes */
.cm-callout {
  box-shadow: 12px 0px var(--bjonnh-callout-shadow-spread) var(--bjonnh-callout-shadow-blur) rgba(0, 0, 255, .2), -12px 0px var(--bjonnh-callout-shadow-spread) var(--bjonnh-callout-shadow-blur) rgba(255, 0, 0, .2) !important;
}

/* no margins */

.workspace {
  margin-right: 4px !important;
}


/* Stuff */

.markdown-rendered table {
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.markdown-source-view, .markdown-preview-view {
 width: var(--bjonnh-page-width) !important;
 margin: auto;
}

.prompt {
  border: solid var(--text-accent);
  opacity: 0.9;
}

.suggestion-highlight {
  text-decoration: none;
  color: var(--text-accent);
}

.suggestion-item.is-selected {
  border: solid var(--text-accent);
  border-radius: 14px;
}

.suggestion-hotkey {
  background-color: var(--text-accent);
  color: black;
  border-radius: 10px;
  font-weight: 500;
}

.prompt-instruction {
  font-weight: 500;
}

.prompt-instruction-command {
  background-color: rgb(250, 252, 255, 0.5);
  color: black;
  border-radius: 10px;
  padding: 0 3px 0 3px;
}


/* Folders */

.nav-files-container > div > .nav-folder> .nav-folder-title > .nav-folder-title-content {
  text-indent: var(--bjonnh-eat-folder-names-at-root);
}

.nav-folder:has(> :is(
        [data-path="zz_templates"],
        [data-path="Contacts"]
    )),
    .nav-file:has(> :is(
        [data-path="root.md"]
    ))
    {
	position: relative;

	&::before {
		content: "";
		--padding-x: 10px;
		margin-inline-start: calc(24px - var(--padding-x));
		padding: 0 var(--padding-x);
		background-color: var(--background-secondary);
		/*background-color: #262626;*/
	}

	&::after {
		content: "";
		display: block;
		position: absolute;
		top: calc(0.5em * var(--line-height-tight));
		width: 100%; /* change for something smaller if you don't want the divider to span full length */
		height: 0;
		border-top: 1px solid currentColor;
		z-index: -1;
	}
}

.nav-folder:has(> [data-path="zz_templates"])::before { content: "Internal"; }
.nav-folder:has(> [data-path="Contacts"])::before { content: "♡ Life ♡"; }
.nav-file:has(> [data-path="root.md"])::before { content: "☆ Docs ☆"; }


.tree-item-children {
 border-inline-start-color: var(--colorful-folder-color);
}