blue-theme.css

/*
Blue theme 
https://github.com/SiriusXT/trilium-theme-blue
Version:0.9 for trilium-NEXT:>=0.90.8
*/

:root {
   --theme-style: light;        
   --main-background-color: #fff;
   --main-text-color: #000;
   --main-border-color:  #ced4da;/**/
 
   /*--accented-background-color: #252526;*/
   /*--more-accented-background-color: #ddd;*/
 
   /*--button-background-color: transparent;
   --button-border-color: #333;
   --button-text-color: currentColor;
   --button-border-radius: 3px;
   --button-disabled-background-color: transparent;
   --button-disabled-text-color: #999;*/
 
   --primary-button-background-color: #4682B4;/**/
   /*--primary-button-text-color: #ccc;*/
   --primary-button-border-color: transparent;
 
   /*--muted-text-color: #bbb;
 
   --input-text-color: #ccc;
   --input-background-color: #333;*/
 
   /*--hover-item-text-color: #ccc;
   --hover-item-background-color: transparent;
   --hover-item-border-color: #333;
 
   --active-item-text-color: #ccc;
   --active-item-background-color: #04395E;
   --active-item-border-color: transparent;*/
 
   /*--menu-text-color: #000;
   --menu-background-color: #222;
 
   --modal-background-color: #333;
   --modal-backdrop-color: #444;*/
 
   --left-pane-background-color: #F3f3f3;/**/
   --left-pane-text-color: #000;/**/
 
   --launcher-pane-background-color: #4682B4;/**/
   --launcher-pane-text-color: #f0f4f4;/**/
 
   --active-tab-background-color: #4682B470;
   --active-tab-hover-background-color: #4682B470;
   --active-tab-text-color: #4682B4;
 
   /*--inactive-tab-background-color: #4682B470;*/
   --inactive-tab-hover-background-color: #4682B450;/**/
   /*--inactive-tab-text-color: #4682B4;*/
 
   --scrollbar-border-color: #ccc;
   --tooltip-background-color: #F3f3f3;
   --link-color: #4682B4;
 
   --mermaid-theme: light;
   --ck-color-code-block-label-background: #333;
   --right-pane-li-hover-background:rgb(235, 235, 235);

   /*--color-blue-theme: #4682B4;
   --color-blue-theme-alpha: #4682B470;
   --color-gray: #d6d6d6;
   --color-gray-light: #f5f5f5;
   --color-gray-light-text: #999;
   --color-gray-light-alpha: rgba(199, 199, 199, 0.2);
   --border-standard: 1px solid var(--color-gray);
   --color-blue-dark: #2e4b76;
   --link-color: #4682B4 !important;*/
   --h2-background-color:rgb(105 154 187);
   --h3-background-color:rgb(112 175 164);
   --h4-background-color:rgb(215 187 162);
   --h5-background-color:rgb(190 186 206);
   --h6-background-color:rgb(197 197 197);
 }



/*left panel wallpaper*/
#left-pane.component {
   background-image: url("../../../custom/background.png");
}
div.tree-wrapper.component .tree-actions{
   background-color:var(--left-pane-background-color);
}
div.tree-actions button.tree-floating-button{
   color:var(--left-pane-text-color);
}
/*search bar*/
#left-pane input.search-string {
  background: rgba(255, 255, 255, 0.3) !important;
}

::-webkit-scrollbar-thumb{
   background-color:#fefefe !important;
}

div.tree:not(.fancytree-ext-filter.fancytree-ext-filter-hide) li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n) {
   border-left: 4px solid #f4a6a6 ;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

div.tree:not(.fancytree-ext-filter.fancytree-ext-filter-hide) li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1) {
   border-left: 4px solid #99d0df;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

div.tree:not(.fancytree-ext-filter.fancytree-ext-filter-hide) li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2) {
   border-left: 4px solid #b4afdf ;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

div.tree:not(.fancytree-ext-filter.fancytree-ext-filter-hide) li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3) {
   border-left: 4px solid #abd58b ;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

div.tree:not(.fancytree-ext-filter.fancytree-ext-filter-hide) li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4) {
   border-left: 4px solid #f3d275 ;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

div.tree:not(.fancytree-ext-filter.fancytree-ext-filter-hide)  li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5) {
   border-left: 4px solid #bccdf1;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n):hover {
   background-color:#f4a6a640 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1):hover {
   background-color:#99d0df40 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2):hover {
   background-color:#b4afdf40 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3):hover {
   background-color:#abd58b40 !important ;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4):hover {
   background-color:#f3d27540 !important ;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5):hover {
   background-color:#bccdf140 !important ;
}
li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n)>span.fancytree-node:hover {
   background-color:#f4a6a640 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1)>span.fancytree-node:hover {
   background-color:#99d0df40 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2)>span.fancytree-node:hover {
   background-color:#b4afdf40 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3)>span.fancytree-node:hover {
   background-color:#abd58b40 !important ;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4)>span.fancytree-node:hover {
   background-color:#f3d27540 !important ;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5)>span.fancytree-node:hover {
   background-color:#bccdf140 !important ;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n)>span.fancytree-node.fancytree-active {
   background-color:#f4a6a680 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1)> span.fancytree-node.fancytree-active {
   background-color:#99d0df80 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2) >span.fancytree-node.fancytree-active {
   background-color:#b4afdf80 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3) >span.fancytree-node.fancytree-active {
   background-color:#abd58b80 !important ;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4)> span.fancytree-node.fancytree-active {
   background-color:#f3d27580 !important ;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5)> span.fancytree-node.fancytree-active {
   background-color:#bccdf180 !important ;
}


/*heading*/  
div.component.note-split.type-text h1 {
  padding-left: 0.4em;
  border-left: 9px solid rgba(0, 0, 0, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}

h2:not(div.note-list-widget h2) {
  background: var(--h2-background-color);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 0 0 1px var(--h2-background-color), 1px 1px 6px 1px var(--h2-background-color);
  color: #FFFFFF;
  padding: 5px 10px 4px 10px;
  text-shadow: 2px 2px 3px #222222;
}

h3:not(div.note-list-widget h3) {
  background: var(--h3-background-color);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 0 0 1px var(--h3-background-color), 1px 1px 6px 1px var(--h3-background-color);
  color: #FFFFFF;
  padding: 4px 10px 3px 10px;
  text-shadow: 2px 2px 3px #222222;
}

h4:not(div.note-list-widget h4){
  background: var(--h4-background-color);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 0 0 1px var(--h4-background-color), 1px 1px 6px 1px var(--h4-background-color);
  color: #FFFFFF;
  padding: 3px 10px 2px 10px;
  text-shadow: 2px 2px 3px #222222;
}

 h5:not(.note-book-header):not(div.note-list-widget h5){
  background: var(--h5-background-color);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 0 0 1px var(--h5-background-color), 1px 1px 6px 1px var(--h5-background-color);
  color: #FFFFFF;
  padding: 2px 10px 1px 10px;
  text-shadow: 2px 2px 3px #222222;
}
h6:not(div.note-list-widget h6) {
  background: var(--h6-background-color);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 0 0 1px var(--h6-background-color), 1px 1px 6px 1px var(--h6-background-color);
  color: #FFFFFF;
  padding: 1px 10px 0px 10px;
  text-shadow: 2px 2px 3px #222222;
}


h1, h2, h3, h4, h5, h6{
   margin-top:.3rem !important;
   margin-bottom: .15rem !important;
}

/*TOC*/
div.toc-widget span.toc>ol>li{
   color:var(--h2-background-color);
}
div.toc-widget span.toc>ol>ol>li{
   color:var(--h3-background-color);
}
div.toc-widget span.toc>ol>ol>ol>li{
   color:var(--h4-background-color);
}
div.toc-widget span.toc>ol>ol>ol>ol>li{
   color:var(--h5-background-color);
}
div.toc-widget span.toc>ol>ol>ol>ol>ol>li{
   color:var(--h6-background-color);
}
.toc ol{
   padding-left:15px;
}

 /*立体
 
 div#rest-pane.component div.tab-row-widget.component{
     box-shadow: 0px 1px #ddd;
 }*/
 div.quick-search.input-group.input-group-sm.component{
     box-shadow: 0px 1px #ddd;
 }
 
 div.note-book-card.block-link.expanded {
     box-shadow: 1px 1px 1px 0px #ddd;
 }

.dropdown-divider {
   background-color: var(--dropdown-border-color) !important;
}
/*Make the notification in the bottom right*/
div#toast-container {
   right: 10px !important;
   bottom: 10px !important;
   top: auto !important;
   width: auto !important;
}

/*Background color for button opening*/
.switch-widget span.slider.checked {
   background-color: var(--primary-button-background-color) !important;
}

/*horizontal line*/
div.note-detail div.ck-horizontal-line.ck-widget {
   margin-top: 10px !important;
}

.ck-content hr {
   margin-bottom: 10px !important;
}

/*Left title font*/
body,
span.fancytree-title {
   font-family: var(--detail-font-family) !important;
   top: 0px !important;
}

span:not(.fancytree-active) span.fancytree-title {
   font-weight: 500 !important;
}

/*Left navigation bar
#launcher-pane .launcher-button{    
   color: #f0f4f4  !important;
   background-color: var(--color-blue-light) !important;
}*/

#launcher-pane svg{
   vertical-align: unset;
}
.global-menu {
   /* background-color: var(--color-blue-light);*/
   width: auto !important;
}

#launcher-container div.dropdown.right-dropdown-widget.dropright.component>button {
   padding-left: 8px !important;
}

ul.fancytree-container li {
   contain: initial;
}

.global-menu-button {
   background-size: 35px !important;
}

div#launcher-pane.component {
   width: 40px !important;
}

#launcher-pane .launcher-button {
   padding: initial !important;
}

div.dropdown.global-menu.dropright.component>.icon-action {
   border: 0px;
}

.dropdown,
.dropleft,
.dropright,
.dropup {
   position: initial;
}

.sync-status .sync-status-icon {
   padding: 5px 5px 5px 5px;
   top: 0px !important;
}

.sync-status .sync-status-icon span {
   padding: 5px 5px 5px 5px;
}

div.quick-search.input-group.input-group-sm.component {
   align-content: center;
}

/*Left fold arrow*/
span.fancytree-node:not(.fancytree-folder) .fancytree-expander::before {
   content: "\ec21" !important;
   visibility: visible !important;
   color: var(--left-pane-text-color) !important;
   opacity: 0.1;
}

/*tree clone copy after icon*/
span.fancytree-node.multiple-parents .fancytree-title::after{
   content: " \ea84" !important;
}


#center-pane .title-row .note-icon-widget button {
   display: flex;
   margin-top: 2px;
}

input.note-title {
   font-family: var(--detail-font-family) !important;
   font-weight: bold;
}

.bx-dock-right::before {
   vertical-align: middle;
}

div#rest-pane>div.component {
   height: 30px !important;
   margin-bottom: 1px !important;
}

.note-new-tab {
   width: 30px !important;
   height: 30px !important;
   font-size: 19px !important;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper {
   padding: 2px 5px 1px 5px !important;
   height: 30px !important;
}
.note-tab:hover .note-tab-close{
   display: inline-block !important;	
} 
.note-tab:not([active]) .note-tab-close{
   display: none;	
} 
div.note-tab-wrapper div.note-tab-close.bx {
   padding-bottom: 25px;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper>div:hover {
   background: none;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper div.note-tab-title::before {
   content: "\203B ";
   margin-right: 5px;
}

/*Gap height between panel items*/
.fancytree-node {
   padding-top: 0px !important;
   padding-bottom: 0px !important;
}

span.fancytree-node.fancytree-active {
   border-radius: 0px !important;
   border: 0px !important;
}

span.button-widget.icon-action.bx.component.bx-history,
.ribbon-button-container .icon-action {
   padding-top: 5px !important;
}

span.fancytree-node:hover {
   border: 0px !important;
}

span.fancytree-node {
   border: 0px !important;
}

.title-bar-buttons div button.icon-action {
   font-size: 80% !important;
}

.title-bar-buttons {
   font-size: 12px;
}

div.note-detail p {
   margin-top: 0.5rem !important;
   /*0.1*/
   margin-bottom: 0.5rem !important;
   /*0.1*/
   /*first-line indent*/
   text-indent: 2em;
   /*Align both ends*/
   text-align: justify;
}

div.note-detail .bx {
   text-indent: 0em;
}

/*does not indent
div.note-detail p span.bx {
   display: inline;
}*/
/*List and text alignment*/
dl,
ol,
ul {
   padding-left: 2em;
}

div.note-detail ul>li,
ol>li {
   text-align: justify;
}

div.note-detail ol,
.note-detail ul,
.note-detail dl {
   margin-bottom: 0 !important;
}

.ck-content .todo-list li {
   margin-bottom: 0 !important;
}

blockquote>p {
   text-indent: 0em;
}

p>span.ck-math-tex {
   text-indent: 0em;
   /*Formulas are not indented*/
}

/*line spacing*/
.note-detail {
   line-height: 1.35;
}
/*include note's link outline*/
.ck a.ck-widget:hover{
  outline: unset;
}
/*Image center*/
.ck-content p>span.image-inline {
   vertical-align: middle;
}

/*image*/
.ck-content figure.image {
   margin-top: 0.5rem;
   /*0.2*/
   margin-bottom: 0.5rem;
   /*0.2*/
}

/*Image Borders*/
div.note-detail.component span.image-inline {
   border: 1px dashed var(--main-border-color);
}

div.note-detail.component figure.image {
   border: 1px dashed var(--main-border-color);
}

::selection {
   background-color: rgba(70, 130, 180, 0.5) !important;
}
/*search page*/
:root{
  --ck-color-highlight-background: rgba(255, 255, 0, 0.6) !important;
}

.note-properties-widget {
   padding: 0px !important;
}

/*Left side of title bar*/
.note-icon-widget.dropdown.component {
   padding-top: 1.5px !important;
}

/*Button below title bar*/
.basic-properties-widget>* {
   margin-top: 0px !important;
}

div.attribute-list {
   margin-top: 0px !important;
}


.basic-properties-widget {
   padding: 0px 12px 0px 12px !important;
}

.component {
   padding-top: 0px !important;
   padding-bottom: 0px !important;
}

.inherited-attributes-container {
   padding: 0px 12px 0px 12px !important;
}

.add-new-attribute-button,
.save-attributes-button {
   bottom: 0px !important;
}

/*Upper right corner text*/
.ck.ck-editor__editable pre[data-language]::after {
   opacity: 0.5;
}


/*formula spacing*/
.ck-math-tex .katex-display {
   margin: 0;
}

/*Quote block style*/
.ck-content blockquote {
   font-style: initial !important;
   color: #708faf !important;
   border-left: 5px solid var(--main-border-color) !important;
   background: none repeat scroll 0 0 rgba(102, 128, 153, .1) !important;
   padding: 0px 1px 0px 10px !important;
   margin: 0.2rem 0 0 0 !important;
}

/*code {
   font-size: 100% !important;
}*/

blockquote>p {
   margin-bottom: 0 !important;
   text-indent: 1.7em !important;
}

/* 
dl, ol, ul{
   margin-bottom: 0.5rem !important;
}
*/


/*table top and bottom spacing*/
.ck-content .table {
   margin-top: 0.1rem;
   margin-bottom: 0.1rem;
   --bs-table-bg: auto;
}

.ck-content .table>figcaption {
   background-color: var(--main-background-color) !important;
   color: var(--muted-text-color) !important;
   border-color: var(--muted-text-color) !important;
}

/*.ck-content .table table td, .ck-content .table table th{
   border: 1px solid var(--main-border-color) !important;
}
.ck-content .table table{
   border: 1px solid var(--main-border-color) !important;
}*/

/*设置界面*/
.form-control,
.form-select {
   border: 1px solid var(--main-border-color) !important;
}

.input-group-text {
   border: 1px solid var(--main-border-color) !important;
}

div.shared-info-widget.alert.alert-warning.component {
   margin-top: 0;
   margin-bottom: 0;
}

/*input box focus border color*/
:focus-visible {
   outline: 2px solid var(--main-border-color);
}

div.note-title-widget.component>input.note-title {
   margin-top: 2px;
}

/*div.note-icon-widget>button.bx.bx-code.note-icon {
   margin-top: 2px !important;
}
*/
/*The color of the button when clicked, such as the three buttons in the upper right corner*/
.btn.focus,
.btn:focus {
   box-shadow: 0 0 0 0.2rem #11111100 !important;
}

/*The size of the three buttons in the upper right corner*/
.title-bar-buttons div {
   height: unset !important;
   width: unset !important;
}

.title-bar-buttons div button {
   height: unset !important;
   width: unset !important;
}

/*new tab page*/
.note-new-tab {
   margin-left: 5px;
   background-color: var(--main-background-color);
   border-radius: 8px;
}
.note-new-tab:hover {
   border-radius: 8px !important;
}

/*Hollow tree arrow in the lower left corner*/
.bxs-tree::before {
   color: transparent;
   -webkit-text-stroke: 1.8px var(--left-pane-text-color);
}


/*Avoid link shadows under headings
h2 a, h3 a, h4 a, h5 a{
   text-shadow: initial;
}*/

/*Right-click menu*/
#context-menu-container{
   z-index:10000 !important;
}


.form-control:focus{
   box-shadow: 0 0 0 2px rgba(13,110,253,.25) !important; 
}