midnight.css

/* Table of Contents
==>
1. Global
  1.1. Color Palette & Variables
  1.2. General Fixes
  1.3. Typography
2. Components
  2.1. Note Cards
  2.2. Tab Bar
  2.3. Launcher Pane
  2.4. File Tree
  2.5. Menus & Tooltips
  2.6. Modal Options Dialog  
<== */

/* ===[ 1. Global ]=== */
/* ==[ 1.1. Color Palette & Variables ]== */
:root {
	--midnight-background-color-primary: #212224;
	--midnight-background-color-secondary: #292a2d;
	--midnight-background-color-tertiary: #353637;
	--midnight-font-main: "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei",
		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji",
		"EmojiSymbols";
	--midnight-text-color-primary: #c9d1d9;
}
body {
	--main-background-color: var(--midnight-background-color-primary);
	--accented-background-color: var(--midnight-background-color-secondary);
	--more-accented-background-color: var(--midnight-background-color-tertiary);
	--menu-background-color: var(--midnight-background-color-secondary);
	--header-background-color: var(--midnight-background-color-tertiary);
	--launcher-pane-background-color: var(--midnight-background-color-tertiary);
	--left-pane-background-color: var(--midnight-background-color-secondary);
	--modal-background-color: var(--midnight-background-color-primary);
	--active-tab-background-color: var(--midnight-background-color-primary);
	--inactive-tab-background-color: var(--midnight-background-color-tertiary);
	--active-item-background-color: var(--midnight-background-color-tertiary);
	--tooltip-background-color: rgba(70, 72, 76, 0.86);
	--hover-item-background-color: #3f4041;
	--main-border-color: #7a8ba654;
	--button-border-color: #8d9ca39c;
	--button-border-radius: 0px;
	--main-font-family: var(--midnight-font-main);
	--tree-font-family: var(--main-font-family);
	--detail-font-family: var(--main-font-family);
	--main-text-color: var(--midnight-text-color-primary);
	--menu-text-color: var(--main-text-color);
	--active-item-text-color: var(--main-text-color);
	--hover-item-text-color: var(--menu-text-color);
	--left-pane-text-color: #9aa0a6;
	--link-color: #52a2ff;
	--muted-text-color: #757d86;
}

/* ==[ 1.2. General Fixes ]== */
/* Scrollbars */
#root-widget ::-webkit-scrollbar {
	width: 8px;
}
#root-widget ::-webkit-scrollbar-thumb {
	border-width: 0;
	border-radius: 0;
	background: var(--hover-item-background-color);
}
/* Cursors */
.gutter.gutter-horizontal {
	cursor: col-resize !important;
}

/* ==[ 1.3. Typography ]== */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700 !important;
}
/* Use #root-widget to override trillium default themes styles without the need to redundantly use !important */
#root-widget h2 {
	margin-block-start: 1em;
	margin-block-end: 0.83em;
}
#root-widget h3 {
	margin-block-start: 1.2em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}
/* Note Title */
#root-widget .title-row {
	margin-bottom: 15px;
}
#root-widget .note-title {
	font-size: 160%;
	line-height: 50px;
}
#root-widget .note-title-widget input {
	outline: none;
	font-weight: 700;
}
/* Code Mirror */
#root-widget .CodeMirror-lines {
	font-size: 1rem;
}
#root-widget .CodeMirror-vscrollbar {
	filter: invert(1);
}
#root-widget .cm-matchhighlight {
	background-color: var(--main-text-color);
}
/* Icons */
#root-widget #launcher-pane .launcher-button,
#root-widget .ribbon-tab-title .bx {
	text-align: center;
	font-size: 1.3rem;
}

/* ===[ 2. Components ]=== */
/* ==[ 2.1. Note Cards ]== */
#root-widget .note-book-card {
	margin: 4px 7px 4px 0;
	border-radius: 5px;
}
#root-widget .note-book-card h2 {
	font-size: 1.25em;

	margin-block-start: 0.3em;
}
#root-widget .note-book-card .note-book-title .rendered-note-attributes {
	font-weight: 400;
}

/* ==[ 2.2. Tab Bar ]== */
#root-widget .component.title-bar-buttons {
	height: 34px;
}
#root-widget .title-bar-buttons div,
#root-widget .title-bar-buttons button.btn {
	width: 34px;
	height: 34px;
	font-size: 1.125rem;
}
#root-widget .tab-row-widget {
	margin-left: -5px;
	padding-left: 5px;
	width: calc(100% + 5px);
	height: 34px;
}
#root-widget .tab-row-widget-container {
	height: 34px;
	background: var(--midnight-background-color-tertiary);
}
#root-widget .note-tab-wrapper {
	margin-left: -5px;
	padding: 1px 6px 0 11px;
	height: 34px;
	border-right: 1px solid var(--midnight-background-color-primary);
	border-radius: 0;
	line-height: 32px;
}
#root-widget .note-tab-wrapper:hover {
	background-color: var(--hover-item-background-color);
}
#root-widget .tab-row-widget .note-tab[active] .note-tab-wrapper:hover {
	background-color: var(--active-tab-background-color);
}
#root-widget .tab-row-widget .note-tab[active] .note-tab-wrapper {
	font-weight: 400;
}
#root-widget .note-new-tab {
	width: 34px;
	height: 34px;
	border-radius: 0;
	line-height: 32px;
}
#root-widget .tab-row-widget .note-tab .note-tab-close span,
#root-widget .note-new-tab {
	color: var(--muted-text-color);
	font-size: 0.9rem;
}
#root-widget .note-new-tab:hover {
	background-color: var(--hover-item-background-color);
	color: var(--hover-item-text-color);
}
#root-widget .tab-row-widget .note-tab .note-tab-close {
	position: relative;
	top: 5px;
	height: 22px;
}
#root-widget .tab-row-widget .note-tab .note-tab-close span {
	top: -5px;
}
#root-widget .tab-row-widget .note-tab .note-tab-close:hover span {
	color: var(--hover-item-text-color);
}

/* ==[ 2.3. Laucher Pane ]== */
#root-widget #launcher-pane {
	width: 46px;
}
#root-widget #launcher-pane .global-menu-button {
	outline: 0;
	background-size: 26px;
}
#root-widget #launcher-pane .launcher-button {
	padding: 0;
	width: 100%;
	height: 48px;
	outline: 0;
}
#root-widget #launcher-pane .right-dropdown-widget {
	width: 100%;
}
#root-widget #launcher-pane .launcher-button:hover {
	background-color: transparent;
	color: var(--main-text-color);
}

/* ==[ 2.4. File Tree ]== */
/* Use full width background for hover and active state of nested list items. 
Extend the code below for deeper nesting structure if neccecary.
As an alternative its possible to add aad a script that automates this. */
#root-widget .ui-fancytree ul {
	padding-left: 0;
}
#root-widget .fancytree-node {
	padding-left: 10px;
	border: 0;
	border-radius: 0;
}
#root-widget .ui-fancytree li li li .fancytree-node {
	padding-left: 27px;
}
#root-widget .ui-fancytree li li li li .fancytree-node {
	padding-left: 46px;
}
#root-widget .ui-fancytree li li li li li .fancytree-node {
	padding-left: 65px;
}
#root-widget .ui-fancytree li li li li li li .fancytree-node {
	padding-left: 84px;
}
#root-widget .ui-fancytree li li li li li li li .fancytree-node {
	padding-left: 103px;
}
#root-widget .ui-fancytree li li li li li li li li .fancytree-node {
	padding-left: 122px;
}
#root-widget .ui-fancytree li li li li li li li li li .fancytree-node {
	padding-left: 141px;
}
#root-widget .ui-fancytree li li li li li li li li li li .fancytree-node {
	padding-left: 150px;
}
#root-widget .fancytree-node:hover {
	background: var(--hover-item-background-color);
}
/* Collapse / Expand Icon */
#root-widget .fancytree-node .fancytree-expander:before {
	font-size: 1em;
}
/* Tree-Node Title */
#root-widget .fancytree-node.fancytree-title {
	top: 1px;
}
#root-widget .fancytree-node.fancytree-active .fancytree-title {
	font-weight: 400;
}
/* Tree Icons & Buttons */
#root-widget .tree-actions {
	border: 1px solid #22272e;
	border-bottom: 0;
}
#root-widget .tree-item-button,
#root-widget .fancytree-custom-icon {
	z-index: 1;
	border: 0;
	font-size: 1.125em;
}
#root-widget .tree-item-button {
	color: var(--left-pane-text-color);
}
#root-widget .tree-item-button:not(.unhoist-button) {
	position: absolute;
	right: 10px;
}
#root-widget .tree-item-button.unhoist-button {
	position: relative;
}
#root-widget .tree-item-button.enter-workspace-button {
	right: 38px;
}
#root-widget .tree-item-button:hover {
	color: var(--main-text-color);
}
#root-widget .tree-item-button::before {
	position: relative;
	z-index: 1;
}
#root-widget .tree-item-button::after {
	position: absolute;
	left: 0;
	z-index: 0;
	padding: 1px;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background: transparent;
	content: "";
	opacity: 0.75;
	transition: opacity 100ms;
}
#root-widget .fancytree-node.fancytree-active:hover .tree-item-button::after {
	background: var(--active-item-background-color);
}
#root-widget .fancytree-node:hover .tree-item-button::after {
	background: var(--hover-item-background-color);
}
#root-widget .tree-item-button:hover::after {
	opacity: 1;
}
#root-widget .tree-item-button:hover,
#root-widget button.tree-floating-button:hover {
	color: var(--active-item-text-color);
}
#root-widget button.tree-floating-button {
	border: none;
	font-size: 1.25rem;
}
#root-widget button.tree-floating-button:hover {
	color: var(--active-item-text-color);
}

/* ==[ 2.5. Menus & Tooltips ]== */
.dropdown-menu .dropdown-menu {
	margin: 0 !important;
	padding: 3px 0 4px !important;
	border: 0 !important;
	box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
		0 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
}
.dropdown-menu .dropdown-item {
	padding: 3.5px 10px !important;
	border: 0 !important;
	color: var(--menu-text-color) !important;
	line-height: 24px !important;
}
.dropdown-menu .dropdown-item kbd {
	margin-left: 10px !important;
	color: var(--muted-text-color) !important;
	font-weight: 300 !important;
	font-size: 0.8em !important;
	font-family: var(--main-font-family) !important;
}
.dropdown-menu .dropdown-item span.bx {
	top: 1px !important;
	color: var(--muted-text-color) !important;
	font-size: 0.925em !important;
}
.dropdown-menu .dropdown-item.disabled span {
	color: var(--muted-text-color) !important;
}
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
	outline: 0 !important;
	border: none !important;
	background-color: var(--midnight-background-color-tertiary) !important;
}
.dropdown-menu .dropdown-divider,
.modal-footer,
.modal-header {
	border-color: var(--midnight-background-color-tertiary) !important;
}
.tooltip-inner {
	padding: 5px 8px 6px !important;
	font-size: 0.95rem !important;
}
.tooltip .arrow {
	opacity: 0.8 !important;
}