mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 07:08:55 +02:00
1661 lines
40 KiB
CSS
1661 lines
40 KiB
CSS
/*
|
|
* USER INTERFACE
|
|
*/
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--dropdown-backdrop-filter: blur(10px) saturate(6);
|
|
--dropdown-border-radius: 10px;
|
|
}
|
|
|
|
#root-widget {
|
|
background-color: var(--root-background);
|
|
}
|
|
|
|
body {
|
|
--native-titlebar-darwin-x-offset: 10;
|
|
--native-titlebar-darwin-y-offset: 17 !important;
|
|
}
|
|
|
|
body.layout-horizontal {
|
|
--launcher-pane-background-color: var(--launcher-pane-horizontal-background-color);
|
|
--launcher-pane-size: var(--launcher-pane-horizontal-size);
|
|
--active-tab-background-color: var(--launcher-pane-background-color);
|
|
--active-tab-hover-background-color: var(--active-tab-background-color);
|
|
--new-tab-button-background: transparent;
|
|
--tab-bar-height: 44px;
|
|
--native-titlebar-darwin-x-offset: 12;
|
|
--native-titlebar-darwin-y-offset: 14 !important;
|
|
}
|
|
|
|
body.mobile {
|
|
--hover-item-background-color: transparent;
|
|
}
|
|
|
|
/* #region Mica */
|
|
body.background-effects.platform-win32 {
|
|
--launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15);
|
|
--launcher-pane-background-color: rgba(255, 255, 255, 0.7);
|
|
--tab-background-color: transparent;
|
|
--new-tab-button-background: transparent;
|
|
--active-tab-background-color: var(--launcher-pane-background-color);
|
|
--background-material: tabbed;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body.background-effects.platform-win32 {
|
|
--launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5);
|
|
--launcher-pane-background-color: rgba(255, 255, 255, 0.09);
|
|
}
|
|
}
|
|
|
|
body.background-effects.platform-win32.layout-vertical {
|
|
--left-pane-background-color: transparent;
|
|
--launcher-pane-background-color: rgba(255, 255, 255, 0.055);
|
|
--left-pane-item-hover-background: rgba(127, 127, 127, 0.05);
|
|
--background-material: mica;
|
|
}
|
|
|
|
body.background-effects.platform-win32,
|
|
body.background-effects.platform-win32 #root-widget,
|
|
body.background-effects.platform-win32 #launcher-pane .launcher-button {
|
|
background: transparent !important;
|
|
}
|
|
|
|
body.background-effects.platform-win32.layout-horizontal #horizontal-main-container,
|
|
body.background-effects.platform-win32.layout-vertical #vertical-main-container {
|
|
background-color: var(--root-background);
|
|
}
|
|
/* #endregion */
|
|
|
|
/* Matches when the left pane is collapsed */
|
|
:has(#left-pane.hidden-int) {
|
|
--center-pane-border-radius: 0;
|
|
--tab-first-item-horiz-offset: 5px;
|
|
}
|
|
|
|
:has(#left-pane.hidden-int) #launcher-pane.vertical {
|
|
border-right: 2px solid var(--left-pane-collapsed-border-color);
|
|
}
|
|
|
|
/*
|
|
* Global menu
|
|
*/
|
|
|
|
.global-menu div.zoom-buttons a {
|
|
border: unset;
|
|
}
|
|
|
|
.global-menu div.zoom-buttons a.bx {
|
|
color: var(--menu-text-color) !important;
|
|
}
|
|
|
|
/*
|
|
* Launcher pane
|
|
*/
|
|
#launcher-container,
|
|
body.layout-horizontal > .horizontal {
|
|
align-items: center;
|
|
}
|
|
|
|
#launcher-pane.vertical {
|
|
width: var(--launcher-pane-size) !important;
|
|
padding-bottom: var(--launcher-pane-button-gap);
|
|
}
|
|
|
|
#launcher-pane.horizontal {
|
|
height: var(--launcher-pane-size) !important;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
#mobile-bottom-bar {
|
|
background: var(--launcher-pane-background-color);
|
|
}
|
|
|
|
body.mobile #launcher-pane {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
#launcher-pane.horizontal {
|
|
border-top: unset;
|
|
border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
|
|
}
|
|
}
|
|
|
|
#launcher-pane .launcher-button,
|
|
#launcher-pane .dropdown {
|
|
width: calc(var(--launcher-pane-size) - (var(--launcher-pane-button-margin) * 2)) !important;
|
|
height: calc(var(--launcher-pane-size) - (var(--launcher-pane-button-margin) * 2)) !important;
|
|
margin: var(--launcher-pane-button-gap) var(--launcher-pane-button-margin);
|
|
}
|
|
|
|
#launcher-pane .launcher-button {
|
|
padding: 0 !important;
|
|
border-radius: 8px;
|
|
transition:
|
|
background-color 300ms ease-out,
|
|
color 300ms ease-out,
|
|
box-shadow 300ms ease-out;
|
|
cursor: default;
|
|
}
|
|
|
|
#launcher-pane .dropdown .launcher-button {
|
|
margin: 0;
|
|
}
|
|
|
|
#launcher-pane .launcher-button:active,
|
|
#launcher-pane .launcher-button.show {
|
|
transform: scale(0.9);
|
|
transition: transform 50ms linear;
|
|
}
|
|
|
|
#launcher-pane .launcher-button:hover,
|
|
#launcher-pane .launcher-button.right-dropdown-button.show,
|
|
#launcher-pane.horizontal .global-menu-button:hover,
|
|
#launcher-pane.horizontal .global-menu-button.show {
|
|
background: var(--launcher-pane-button-hover-background) !important;
|
|
color: var(--launcher-pane-button-hover-color);
|
|
box-shadow: var(--launcher-pane-button-hover-shadow);
|
|
transition:
|
|
background-color 100ms ease-in,
|
|
color 80ms ease-in,
|
|
box-shadow 100ms ease-in;
|
|
}
|
|
|
|
#launcher-pane div.launcher-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#launcher-pane.vertical .spacer {
|
|
width: var(--launcher-pane-size);
|
|
}
|
|
|
|
#launcher-pane.horizontal .spacer {
|
|
height: var(--launcher-pane-size);
|
|
}
|
|
|
|
/* Protected session enabled button */
|
|
|
|
#launcher-pane button.bx-check-shield,
|
|
#launcher-pane button.bx-check-shield:hover {
|
|
color: var(--protected-session-active-icon-color);
|
|
transition: color 500ms ease-in-out;
|
|
}
|
|
|
|
/* Sync status button */
|
|
|
|
#launcher-pane .sync-status .sync-status-icon {
|
|
top: 3px;
|
|
}
|
|
|
|
#launcher-pane .sync-status-icon:not(.sync-status-in-progress):hover {
|
|
background: unset;
|
|
}
|
|
|
|
@keyframes sync-status-pulse {
|
|
from {
|
|
color: currentColor;
|
|
}
|
|
to {
|
|
color: var(--pulse-color);
|
|
}
|
|
}
|
|
|
|
#launcher-pane .sync-status-disconnected-with-changes {
|
|
--pulse-color: var(--sync-status-error-pulse-color);
|
|
animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite;
|
|
}
|
|
|
|
#launcher-pane.horizontal .launcher-button {
|
|
font-size: var(--launcher-pane-horizontal-icon-size);
|
|
}
|
|
|
|
#launcher-pane .global-menu-button {
|
|
--hover-item-background-color: transparent;
|
|
}
|
|
|
|
#launcher-pane.horizontal .global-menu-button .global-menu-button-update-available {
|
|
right: -23px;
|
|
bottom: -22px;
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
.tooltip .tooltip-arrow {
|
|
display: none;
|
|
}
|
|
|
|
.tooltip .tooltip-inner {
|
|
padding: 6px 10px !important;
|
|
box-shadow:
|
|
-1px -1px 2px var(--tooltip-shadow-color),
|
|
2px 2px 8px var(--tooltip-shadow-color) !important;
|
|
border: unset !important;
|
|
border-radius: 6px;
|
|
backdrop-filter: blur(5px);
|
|
color: var(--tooltip-foreground-color) !important;
|
|
}
|
|
|
|
/*
|
|
* Search Box
|
|
*/
|
|
|
|
div.quick-search {
|
|
--padding-top: 8px;
|
|
--padding-left: 8px;
|
|
--padding-right: 8px;
|
|
--padding-bottom: 8px;
|
|
|
|
position: relative;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
height: unset;
|
|
contain: unset;
|
|
padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
|
|
}
|
|
|
|
div.quick-search, div.quick-search:hover, div.quick-search:focus-within {
|
|
/* Prevent changes to background and outline when the state of the input group changes */
|
|
background: transparent;
|
|
outline: none;
|
|
}
|
|
|
|
div.quick-search::before {
|
|
/* The background rectangle of the search box */
|
|
position: absolute;
|
|
content: "";
|
|
top: var(--padding-top);
|
|
left: var(--padding-left);
|
|
bottom: var(--padding-bottom);
|
|
right: var(--padding-right);
|
|
z-index: 0;
|
|
border: 2px solid transparent;
|
|
border-radius: 6px;
|
|
background: var(--quick-search-background);
|
|
transition: background-color 200ms ease-in;
|
|
}
|
|
|
|
div.quick-search:hover:before {
|
|
/* Hovered search box background rectangle */
|
|
background: var(--quick-search-hover-background);
|
|
transition: background-color 75ms ease-out;
|
|
}
|
|
|
|
div.quick-search:focus-within:before {
|
|
/* Focused search box background rectangle */
|
|
border-color: var(--quick-search-focus-border);
|
|
background: var(--quick-search-focus-background);
|
|
transition: background-color 100ms ease-out;
|
|
}
|
|
|
|
div.quick-search input {
|
|
padding-left: 15px !important;
|
|
box-shadow: unset !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
div.quick-search input::placeholder {
|
|
color: var(--quick-search-color);
|
|
}
|
|
|
|
div.quick-search:focus-within input {
|
|
color: var(--quick-search-focus-color) !important;
|
|
}
|
|
|
|
div.quick-search .search-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 25px;
|
|
height: 25px;
|
|
margin-right: 8px;
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
color: var(--quick-search-color) !important;
|
|
transition: background-color 200ms ease-in !important;
|
|
}
|
|
|
|
div.quick-search .search-button:active {
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
div.quick-search:focus-within:has(input:not(:placeholder-shown)) .search-button {
|
|
/* Matches when the input has a value and the focus is inside the search box */
|
|
background: var(--left-pane-item-action-button-background) !important;
|
|
color: var(--left-pane-item-action-button-color) !important;
|
|
transition: background-color 500ms ease-out !important;
|
|
}
|
|
|
|
html body .quick-search:focus-within .search-button:hover,
|
|
div.quick-search .search-button.show {
|
|
/* Hover state */
|
|
background: var(--left-pane-item-action-button-hover-background) !important;
|
|
color: var(--left-pane-item-action-button-color) !important;
|
|
transition: background-color 100ms ease-out !important;
|
|
}
|
|
|
|
/*
|
|
* Quick search results
|
|
*/
|
|
|
|
/* Item */
|
|
.quick-search .dropdown-menu *.dropdown-item {
|
|
padding: 8px 12px !important;
|
|
}
|
|
|
|
/* Note icon */
|
|
.quick-search .dropdown-menu .dropdown-item > .bx {
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
/* Note title */
|
|
.quick-search .dropdown-menu .dropdown-item > a {
|
|
color: var(--menu-text-color);
|
|
}
|
|
|
|
.quick-search .dropdown-menu .dropdown-item > a:hover {
|
|
--hover-item-background-color: transparent;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Note path */
|
|
.quick-search .dropdown-menu small {
|
|
display: block;
|
|
opacity: 0.5;
|
|
font-size: 0.75em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* The "Show in full search" button */
|
|
.quick-search .dropdown-menu button {
|
|
padding: 0;
|
|
color: var(--menu-text-color) !important;
|
|
}
|
|
|
|
/*
|
|
* Left pane
|
|
*/
|
|
|
|
/* Tree */
|
|
|
|
#left-pane div.tree {
|
|
padding: 3px 6px 40px 6px;
|
|
animation: fade-in 200ms ease-in;
|
|
}
|
|
|
|
#left-pane span.fancytree-node {
|
|
border: unset;
|
|
border-radius: 6px;
|
|
cursor: default;
|
|
}
|
|
|
|
#left-pane .ui-fancytree ul {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
/* The root element of the tree */
|
|
#left-pane .fancytree-container > li:first-child > span {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
#left-pane span.fancytree-node.fancytree-active {
|
|
position: relative;
|
|
background: transparent !important;
|
|
color: var(--left-pane-item-selected-color) !important;
|
|
}
|
|
|
|
@keyframes left-pane-item-select {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#left-pane span.fancytree-node.fancytree-active::before {
|
|
position: absolute;
|
|
content: "";
|
|
top: var(--left-pane-item-selected-shadow-size);
|
|
left: var(--left-pane-item-selected-shadow-size);
|
|
bottom: var(--left-pane-item-selected-shadow-size);
|
|
right: var(--left-pane-item-selected-shadow-size);
|
|
background: var(--left-pane-item-selected-background) !important;
|
|
box-shadow: var(--left-pane-item-selected-shadow);
|
|
border-radius: 6px;
|
|
animation: left-pane-item-select 200ms ease-out;
|
|
z-index: -1;
|
|
}
|
|
|
|
#left-pane span.fancytree-node.protected > span.fancytree-custom-icon {
|
|
position: relative;
|
|
filter: unset !important;
|
|
}
|
|
|
|
#left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
font-size: 14px;
|
|
content: "\eb4a";
|
|
font-family: "boxicons";
|
|
transform: translateX(25%);
|
|
background: var(--left-pane-background-color);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
body.mobile .fancytree-expander::before,
|
|
body.mobile .fancytree-title,
|
|
body.mobile .fancytree-node > span {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
body.mobile #mobile-sidebar-container {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
body.mobile #mobile-sidebar-wrapper {
|
|
border-top-right-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
border-right: 1px solid var(--subtle-border-color);
|
|
}
|
|
}
|
|
|
|
#left-pane .fancytree-expander {
|
|
opacity: 0.65;
|
|
transition: opacity 150ms ease-in;
|
|
}
|
|
|
|
#left-pane .fancytree-expander:hover {
|
|
opacity: 1;
|
|
transition: opacity 300ms ease-out;
|
|
}
|
|
|
|
#left-pane .fancytree-custom-icon {
|
|
margin-top: 0; /* Use this to align the icon with the tree view item's caption */
|
|
}
|
|
|
|
#left-pane span .fancytree-title {
|
|
margin-top: -5px;
|
|
}
|
|
|
|
#left-pane span.fancytree-active .fancytree-title {
|
|
font-weight: normal;
|
|
}
|
|
|
|
#left-pane span.fancytree-node:hover {
|
|
background: var(--left-pane-item-hover-background);
|
|
}
|
|
|
|
#left-pane span.fancytree-node.shared .fancytree-title::after {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#left-pane .tree-item-button {
|
|
margin-right: 6px;
|
|
border: unset;
|
|
border-radius: 50%;
|
|
background: var(--left-pane-item-action-button-background);
|
|
color: var(--left-pane-item-action-button-color);
|
|
transition:
|
|
background-color 200ms ease-out,
|
|
box-shadow 200ms ease-out;
|
|
}
|
|
|
|
#left-pane .tree-item-button:hover {
|
|
background: var(--left-pane-item-action-button-hover-background);
|
|
box-shadow: var(--left-pane-item-action-button-hover-shadow);
|
|
transition:
|
|
background-color 100ms ease-in,
|
|
box-shadow 100ms ease-in;
|
|
}
|
|
|
|
#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover {
|
|
box-shadow: var(--left-pane-item-selected-action-button-hover-shadow);
|
|
}
|
|
|
|
#context-menu-container {
|
|
/* The context menu of the tree */
|
|
--menu-item-icon-vert-offset: -1px;
|
|
}
|
|
|
|
/* Tree actions toolbar */
|
|
|
|
/* Toolbar container (collapsed state) */
|
|
#left-pane .tree-actions {
|
|
max-width: var(--tree-actions-toolbar-collapsed-width);
|
|
right: var(--tree-actions-toolbar-horizontal-margin);
|
|
bottom: var(--tree-actions-toolbar-vertical-margin);
|
|
overflow: hidden;
|
|
border: 1px solid transparent;
|
|
padding: var(--tree-actions-toolbar-padding-size);
|
|
padding-right: var(--tree-actions-toolbar-collapsed-width);
|
|
background: transparent;
|
|
transition:
|
|
max-width 400ms ease-out,
|
|
background-color 400ms ease-out,
|
|
border-color 400ms ease-out;
|
|
}
|
|
|
|
/* Toolbar container (expanded state) */
|
|
#left-pane .tree-actions:hover {
|
|
max-width: 200px;
|
|
border-color: var(--dropdown-border-color);
|
|
background: var(--menu-background-color);
|
|
backdrop-filter: blur(10px) saturate(6);
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
|
}
|
|
|
|
/* Toolbar button (toolbar collapsed)*/
|
|
#left-pane .tree-actions button {
|
|
border: unset;
|
|
color: var(--menu-item-icon-color);
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
|
|
/* Toolbar button on hover */
|
|
#left-pane .tree-actions button:hover {
|
|
background: var(--hover-item-background-color);
|
|
}
|
|
|
|
/* Toolbar button (toolbar expanded) */
|
|
#left-pane .tree-actions:hover button {
|
|
opacity: 1;
|
|
transition: opacity 250ms ease-in;
|
|
}
|
|
|
|
/* The floating expand button (toolbar collapsed) */
|
|
#left-pane .tree-actions::after {
|
|
display: flex;
|
|
content: "\eab4";
|
|
position: absolute;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: 50%;
|
|
right: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
|
|
width: var(--tree-actions-toolbar-expand-button-size);
|
|
height: var(--tree-actions-toolbar-expand-button-size);
|
|
box-shadow: 2px 2px 6px var(--left-pane-background-color);
|
|
border-radius: 50%;
|
|
background: var(--left-pane-item-action-button-background);
|
|
backdrop-filter: blur(10px);
|
|
color: var(--left-pane-item-action-button-color);
|
|
font-family: boxicons;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
transform: translateY(-50%);
|
|
transition: color 200ms ease-in;
|
|
}
|
|
|
|
/* The floating expand button (toolbar expanded) */
|
|
#left-pane .tree-actions:hover::after {
|
|
background: transparent;
|
|
color: var(--menu-item-icon-color);
|
|
opacity: var(--menu-item-disabled-opacity);
|
|
transition: color 200ms ease-out;
|
|
}
|
|
|
|
/*
|
|
* Tree settings popup
|
|
*/
|
|
|
|
#left-pane .tree-settings-popup {
|
|
box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
|
border: 1px solid var(--dropdown-border-color);
|
|
padding: 25px;
|
|
background: var(--menu-background-color);
|
|
backdrop-filter: blur(10px) saturate(6);
|
|
color: var(--menu-text-color);
|
|
}
|
|
|
|
#left-pane .tree-settings-popup h4 {
|
|
margin-bottom: 0.75em;
|
|
font-size: 1.5em;
|
|
line-height: 1;
|
|
}
|
|
|
|
/*
|
|
* Gutter
|
|
*/
|
|
|
|
.gutter {
|
|
background: var(--gutter-color) !important;
|
|
transition: background 150ms ease-out;
|
|
}
|
|
|
|
.gutter:hover {
|
|
background: var(--gutter-hover-color) !important;
|
|
transition: background 300ms ease-in;
|
|
}
|
|
|
|
/*
|
|
* Tab bar
|
|
*/
|
|
|
|
/* The parent element of the tab bar */
|
|
#rest-pane > div.component:first-child {
|
|
height: var(--tab-bar-height) !important;
|
|
}
|
|
|
|
.tab-row-widget,
|
|
.tab-row-container {
|
|
background: transparent !important;
|
|
height: var(--tab-bar-height) !important;
|
|
}
|
|
|
|
.tab-row-container .toggle-button {
|
|
margin: 6px 10px !important;
|
|
}
|
|
|
|
.tab-row-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* #region Apply a border to the tab bar that avoids the current tab but also allows a transparent active tab. */
|
|
body.layout-horizontal .tab-row-widget,
|
|
body.layout-horizontal .tab-row-widget-container,
|
|
body.layout-horizontal .tab-row-container .note-tab[active] {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
body.layout-horizontal .tab-row-container .note-tab[active]:before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: -100vw;
|
|
top: var(--tab-height);
|
|
right: calc(100% - 1px);
|
|
height: 1px;
|
|
border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
|
|
}
|
|
|
|
body.layout-horizontal .tab-row-container .note-tab[active]:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 100%;
|
|
top: var(--tab-height);
|
|
right: 0;
|
|
width: 100vw;
|
|
height: 1px;
|
|
border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
|
|
}
|
|
/* #endregion */
|
|
|
|
body.layout-vertical.electron.platform-darwin .tab-row-container {
|
|
border-bottom: 1px solid var(--subtle-border-color);
|
|
}
|
|
|
|
.tab-row-widget-container {
|
|
margin-top: calc((var(--tab-bar-height) - var(--tab-height)) / 2);
|
|
height: var(--tab-height) !important;
|
|
}
|
|
|
|
body.layout-horizontal .tab-row-container {
|
|
padding-top: calc((var(--tab-bar-height) - var(--tab-height)));
|
|
}
|
|
|
|
body.layout-horizontal .tab-row-widget-container {
|
|
margin-top: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-layout {
|
|
background-color: var(--root-background) !important;
|
|
}
|
|
|
|
#root-widget.horizontal-layout .tab-row-widget .note-tab .note-tab-wrapper {
|
|
border: 1px solid transparent;
|
|
border-bottom-color: transparent;
|
|
box-shadow: unset;
|
|
}
|
|
|
|
#root-widget.horizontal-layout .tab-row-widget .note-tab[active] .note-tab-wrapper {
|
|
border: 1px solid var(--launcher-pane-horizontal-border-color);
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.tab-row-widget .note-tab .note-tab-wrapper {
|
|
height: var(--tab-height) !important;
|
|
transition:
|
|
background 75ms ease-in,
|
|
box-shadow 75ms ease-in;
|
|
}
|
|
|
|
.tab-row-widget .note-tab .note-tab-wrapper:hover {
|
|
transition: none;
|
|
}
|
|
|
|
.tab-row-container .title-bar-buttons {
|
|
margin-top: calc((var(--tab-bar-height) - var(--tab-height)) * -1);
|
|
}
|
|
|
|
body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.note-tab .note-tab-wrapper {
|
|
--tab-background-color: initial !important;
|
|
}
|
|
|
|
.note-tab .note-tab-wrapper::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background-color: var(--workspace-tab-background-color);
|
|
}
|
|
|
|
.tab-row-widget .note-tab:nth-child(1) {
|
|
transform: translate3d(var(--tab-first-item-horiz-offset), 0, 0);
|
|
}
|
|
|
|
.tab-row-widget .note-tab .note-tab-title {
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tab-row-widget-is-sorting .note-tab[active] .note-tab-wrapper {
|
|
transform: scale(0.85);
|
|
box-shadow: var(--active-tab-dragging-shadow) !important;
|
|
}
|
|
|
|
.tab-row-widget .note-tab[active] .note-tab-wrapper {
|
|
box-shadow: var(--active-tab-shadow);
|
|
font-weight: unset !important;
|
|
transition:
|
|
background 150ms ease-out,
|
|
box-shadow 300ms ease-out;
|
|
}
|
|
|
|
.tab-row-widget-is-sorting .note-tab-drag-handle {
|
|
cursor: grabbing !important;
|
|
}
|
|
|
|
.tab-row-widget .note-tab-close {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition:
|
|
background-color 75ms ease-out,
|
|
color 75ms ease-out;
|
|
}
|
|
|
|
.tab-row-widget .note-tab-close:hover {
|
|
background: var(--tab-close-button-hover-background) !important;
|
|
color: var(--tab-close-button-hover-color) !important;
|
|
transition-timing-function: ease-in;
|
|
}
|
|
|
|
.tab-row-widget .note-new-tab {
|
|
position: relative;
|
|
margin-left: 3px;
|
|
color: transparent; /* Prevent the original "+" from being displayed */
|
|
}
|
|
|
|
.tab-row-widget .note-new-tab {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.tab-row-widget .note-new-tab::before {
|
|
/* The background circle */
|
|
position: absolute;
|
|
content: "";
|
|
top: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
|
|
left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
|
|
width: var(--new-tab-button-size);
|
|
height: var(--new-tab-button-size);
|
|
background: var(--new-tab-button-background);
|
|
border-radius: 50%;
|
|
transition:
|
|
background-color 200ms ease-out,
|
|
box-shadow 200ms ease-out,
|
|
transform 300ms ease-in;
|
|
will-change: transform;
|
|
}
|
|
|
|
.tab-row-widget .note-new-tab:hover::before {
|
|
background: var(--new-tab-button-hover-background);
|
|
box-shadow: var(--new-tab-button-shadow);
|
|
transition:
|
|
background-color 100ms ease-in,
|
|
box-shadow 100ms ease-in;
|
|
}
|
|
|
|
.tab-row-widget .note-new-tab::after {
|
|
/* The "X" icon */
|
|
display: flex;
|
|
position: absolute;
|
|
content: "\ebc0";
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: boxicons;
|
|
font-size: calc(var(--new-tab-button-size) * 0.75);
|
|
color: var(--new-tab-button-color);
|
|
transition:
|
|
color 300ms ease-out,
|
|
transform 300ms ease-in;
|
|
will-change: transform;
|
|
}
|
|
|
|
.tab-row-widget .note-new-tab:hover::after {
|
|
color: var(--new-tab-button-hover-color);
|
|
transition: color 100ms ease-in;
|
|
}
|
|
|
|
.tab-row-widget .note-new-tab:active:before,
|
|
.tab-row-widget .note-new-tab:active:after {
|
|
transform: scale(0.85);
|
|
transition: transform 75ms ease-out;
|
|
}
|
|
|
|
.tab-row-filler {
|
|
top: 0;
|
|
}
|
|
|
|
/*
|
|
* Center pane
|
|
*/
|
|
|
|
#center-pane {
|
|
padding-top: 2px;
|
|
background: var(--main-background-color);
|
|
}
|
|
|
|
.vertical-layout #center-pane {
|
|
border-radius: var(--center-pane-border-radius) 0 0 0;
|
|
}
|
|
|
|
/*
|
|
* Ribbon & note header
|
|
*/
|
|
.note-title.protected {
|
|
text-shadow: unset !important;
|
|
}
|
|
|
|
body.mobile .note-title {
|
|
background: transparent;
|
|
}
|
|
|
|
.ribbon-container {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/*
|
|
* Table of contents & Highlights list
|
|
*/
|
|
|
|
#right-pane {
|
|
background: var(--main-background-color);
|
|
}
|
|
|
|
#right-pane .card-header-buttons {
|
|
align-items: center;
|
|
}
|
|
|
|
#right-pane .toc li,
|
|
#right-pane .highlights-list li {
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
text-align: unset;
|
|
transition:
|
|
background-color 150ms ease-in,
|
|
color 150ms ease-in;
|
|
}
|
|
|
|
#right-pane .highlights-list li {
|
|
line-height: 1.2;
|
|
padding: 8px;
|
|
}
|
|
|
|
#right-pane .toc li::marker,
|
|
#right-pane .highlights-list li::marker {
|
|
color: var(--muted-text-color);
|
|
}
|
|
|
|
#right-pane .toc li:hover,
|
|
#right-pane .highlights-list li:hover {
|
|
background: var(--right-pane-item-hover-background);
|
|
color: var(--right-pane-item-hover-color);
|
|
font-weight: normal;
|
|
transition: background-color 300ms ease-out color 300ms ease-out;
|
|
}
|
|
|
|
#right-pane .toc li:active,
|
|
#right-pane .highlights-list li:active {
|
|
background: transparent;
|
|
transition: none;
|
|
}
|
|
|
|
/*
|
|
* Menus
|
|
*
|
|
* Note: apply the "tn-dropdown-list" class for scrollable dropdown menus. Submenus are not
|
|
* supported when this class is used.
|
|
*/
|
|
|
|
.dropdown-menu {
|
|
border-radius: var(--dropdown-border-radius);
|
|
padding: var(--menu-padding-size) !important;
|
|
font-size: 0.9rem !important;
|
|
}
|
|
|
|
body.mobile .dropdown-menu {
|
|
backdrop-filter: var(--dropdown-backdrop-filter);
|
|
border-radius: var(--dropdown-border-radius);
|
|
position: relative;
|
|
}
|
|
|
|
body.mobile .dropdown-menu .dropdown-menu {
|
|
backdrop-filter: unset !important;
|
|
border-radius: unset !important;
|
|
}
|
|
|
|
body.desktop .dropdown-menu::before {
|
|
content: "";
|
|
backdrop-filter: var(--dropdown-backdrop-filter);
|
|
border-radius: var(--dropdown-border-radius);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
body.desktop .dropdown-menu.tn-dropdown-list {
|
|
backdrop-filter: var(--dropdown-backdrop-filter);
|
|
}
|
|
|
|
body.desktop .dropdown-menu.tn-dropdown-list::before {
|
|
display: none;
|
|
}
|
|
|
|
body.desktop .dropdown-submenu .dropdown-menu::before {
|
|
content: unset;
|
|
}
|
|
|
|
body.mobile .dropdown-submenu .dropdown-menu {
|
|
background: transparent !important;
|
|
}
|
|
|
|
body.desktop .dropdown-submenu .dropdown-menu {
|
|
backdrop-filter: var(--dropdown-backdrop-filter);
|
|
background: transparent;
|
|
}
|
|
|
|
.dropdown-item,
|
|
body.mobile .dropdown-submenu .dropdown-toggle {
|
|
padding: 2px 16px 2px 8px !important;
|
|
/* Note: the right padding should also accommodate the submenu arrow. */
|
|
border-radius: 6px;
|
|
cursor: default !important;
|
|
}
|
|
|
|
body.mobile .dropdown-submenu {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
body.mobile .dropdown-item:not(:last-of-type) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
body.mobile #launcher-pane .dropdown-submenu > .dropdown-toggle {
|
|
display: none;
|
|
}
|
|
|
|
body.mobile .dropdown-submenu:hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
html body .dropdown-item.disabled {
|
|
color: var(--menu-text-color) !important;
|
|
opacity: var(--menu-item-disabled-opacity);
|
|
}
|
|
|
|
/* Menu item icon */
|
|
.dropdown-item .bx {
|
|
transform: translateY(var(--menu-item-icon-vert-offset));
|
|
color: var(--menu-item-icon-color) !important;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Menu item keyboard shortcut */
|
|
.dropdown-item kbd {
|
|
margin-left: 16px;
|
|
font-family: unset !important;
|
|
font-size: unset !important;
|
|
color: var(--menu-item-keyboard-shortcut-color) !important;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.dropdown-divider {
|
|
position: relative;
|
|
border-color: transparent !important;
|
|
overflow: visible;
|
|
}
|
|
|
|
.dropdown-divider::after {
|
|
position: absolute;
|
|
content: "";
|
|
top: -1px;
|
|
left: calc(0px - var(--menu-padding-size));
|
|
right: calc(0px - var(--menu-padding-size));
|
|
border-top: 1px solid var(--menu-item-delimiter-color);
|
|
}
|
|
|
|
/* Menu item arrow */
|
|
.dropdown-menu .dropdown-toggle::after {
|
|
content: "\ed3b" !important;
|
|
position: absolute;
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
top: 0;
|
|
right: 0;
|
|
margin: unset !important;
|
|
border: unset !important;
|
|
padding: 0 4px;
|
|
font-family: boxicons;
|
|
font-size: 1.2em;
|
|
color: var(--menu-item-arrow-color) !important;
|
|
}
|
|
|
|
body.desktop .dropdown-menu .dropdown-toggle::after {
|
|
height: 100%;
|
|
}
|
|
|
|
body.mobile .dropdown-menu .dropdown-toggle::after {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
/*
|
|
* Calendar
|
|
*/
|
|
|
|
.calendar-dropdown-widget {
|
|
padding: 12px;
|
|
color: var(--calendar-color);
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-header {
|
|
padding: 8px 0 20px 0;
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-header input[type="number"] {
|
|
appearance: textfield !important;
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-outer-spin-button,
|
|
.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-header input,
|
|
.calendar-dropdown-widget .calendar-header [data-calendar-input="month"] {
|
|
/* TODO: Provide styling for background and states */
|
|
background: transparent !important;
|
|
border: unset;
|
|
text-align: center;
|
|
font-size: 1.4em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-header .dropdown-toggle::after {
|
|
content: unset !important;
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-week span {
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
color: var(--calendar-weekday-labels-color);
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-body {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-body a {
|
|
background: transparent;
|
|
color: var(--calendar-color);
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-body a.calendar-date-exists {
|
|
position: relative;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.calendar-dropdown-widget .calendar-body a.calendar-date-exists:not(:hover)::before {
|
|
--vertical-margin: 13%;
|
|
--horiz-margin: 18%;
|
|
content: "";
|
|
position: absolute;
|
|
top: var(--vertical-margin);
|
|
right: var(--horiz-margin);
|
|
bottom: var(--vertical-margin);
|
|
left: var(--horiz-margin);
|
|
border-radius: 6px;
|
|
background: var(--calendar-day-highlight-background);
|
|
z-index: -1;
|
|
}
|
|
|
|
body .calendar-dropdown-widget .calendar-body a:hover {
|
|
border-radius: 6px;
|
|
background: var(--calendar-day-hover-background);
|
|
color: var(--calendar-day-hover-color) !important;
|
|
}
|
|
|
|
/*
|
|
* Note tooltip
|
|
*/
|
|
|
|
.tooltip .tooltip-inner:has(.note-tooltip-content) {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.note-tooltip-content {
|
|
padding: 8px;
|
|
}
|
|
|
|
.note-tooltip-content .note-title-with-path {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
border-bottom: 2px solid currentColor;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.note-tooltip-content .note-path {
|
|
display: block;
|
|
color: var(--muted-text-color);
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.note-tooltip-content .note-tooltip-attributes {
|
|
margin-top: -4px;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.note-tooltip-content .rendered-content {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/*
|
|
* Jump to note
|
|
*/
|
|
|
|
.jump-to-note-dialog .modal-dialog {
|
|
--modal-background-color: var(--menu-background-color);
|
|
--bs-modal-header-border-width: 0;
|
|
--bs-modal-footer-border-width: 0;
|
|
--bs-modal-footer-gap: 0;
|
|
|
|
backdrop-filter: var(--dropdown-backdrop-filter);
|
|
}
|
|
|
|
.jump-to-note-dialog .modal-content {
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
|
border: 1px solid var(--dropdown-border-color);
|
|
padding: 32px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.jump-to-note-dialog .modal-header {
|
|
padding: unset !important;
|
|
}
|
|
|
|
.jump-to-note-dialog .modal-body {
|
|
padding: 26px 0 !important;
|
|
}
|
|
|
|
/* Search box wrapper */
|
|
.jump-to-note-dialog .input-group {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.jump-to-note-dialog .input-group:hover {
|
|
background: var(--quick-search-hover-background);
|
|
}
|
|
|
|
/* Focused search box */
|
|
.jump-to-note-dialog .input-group:focus-within {
|
|
border-color: var(--quick-search-focus-border);
|
|
background: var(--quick-search-focus-background);
|
|
color: var(--quick-search-focus-color);
|
|
}
|
|
|
|
.jump-to-note-dialog .input-clearer-button {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/*
|
|
* Recent changes list
|
|
*/
|
|
|
|
.recent-changes-dialog .modal-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.recent-changes-content {
|
|
margin: var(--bs-modal-padding);
|
|
}
|
|
|
|
/* Date headings */
|
|
.recent-changes-content > div > b {
|
|
position: sticky;
|
|
display: block;
|
|
top: 0;
|
|
background: var(--modal-background-color);
|
|
padding: 10px 0 10px calc(var(--timeline-left-gap) + var(--timeline-right-gap));
|
|
font-size: 1.25em;
|
|
font-weight: 300;
|
|
z-index: 10;
|
|
}
|
|
|
|
.recent-changes-content ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Timeline items */
|
|
.recent-changes-content ul li {
|
|
display: flex;
|
|
position: relative;
|
|
margin: 0;
|
|
border: unset;
|
|
padding-top: var(--timeline-item-top-padding);
|
|
padding-bottom: var(--timeline-item-bottom-padding);
|
|
padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
|
|
padding-right: var(--timeline-left-gap);
|
|
color: var(--active-item-text-color);
|
|
}
|
|
|
|
.recent-changes-content li > span:first-child::after {
|
|
/* Remove the dash between time and note title */
|
|
content: "" !important;
|
|
}
|
|
|
|
.recent-changes-content ul li:not(.deleted-note):hover {
|
|
border-radius: 8px;
|
|
background: var(--hover-item-background-color);
|
|
color: var(--hover-item-text-color);
|
|
}
|
|
|
|
.recent-changes-content ul li .note-path {
|
|
color: var(--muted-text-color);
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
/* Item time */
|
|
.recent-changes-content ul li > span:first-child {
|
|
display: inline-block;
|
|
min-width: 80px;
|
|
vertical-align: top;
|
|
color: var(--muted-text-color);
|
|
}
|
|
|
|
/* Item title & path container */
|
|
.recent-changes-content ul li > span:nth-child(2) {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Item title link */
|
|
|
|
.recent-changes-content ul li .note-title a {
|
|
color: currentColor;
|
|
}
|
|
|
|
.recent-changes-content ul li .note-title a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Item title for deleted notes */
|
|
.recent-changes-content ul li.deleted-note .note-title > .note-title {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* Item path */
|
|
.recent-changes-content ul li > span:nth-child(2) small {
|
|
display: block;
|
|
line-height: 1;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
/* Timeline connector */
|
|
.recent-changes-content ul li::before,
|
|
.recent-changes-content > div > b::before {
|
|
position: absolute;
|
|
content: "";
|
|
top: var(--connector-top, 0);
|
|
left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
|
|
bottom: var(--connector-bottom, 0);
|
|
width: var(--timeline-connector-size);
|
|
border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
|
|
background: var(--timeline-connector-color);
|
|
transition: background-color 400ms ease-in-out;
|
|
}
|
|
|
|
.recent-changes-content ul li:hover:before {
|
|
mix-blend-mode: var(--timeline-connector-hover-blend-mode);
|
|
}
|
|
|
|
.recent-changes-content > div:hover {
|
|
--timeline-connector-color: var(--timeline-connector-active-color);
|
|
}
|
|
|
|
/* The first item of the timeline */
|
|
.recent-changes-content > div:first-child > *:first-child {
|
|
--connector-top: 50%;
|
|
--connector-radius: calc(var(--timeline-connector-size) / 2);
|
|
}
|
|
|
|
/* The last item of the timeline */
|
|
.recent-changes-content > div:last-child li:last-child {
|
|
--connector-bottom: 50%;
|
|
}
|
|
|
|
/* Timeline bullet */
|
|
.recent-changes-content ul li::after {
|
|
position: absolute;
|
|
content: "";
|
|
top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
|
|
left: var(--timeline-left-gap);
|
|
width: var(--timeline-bullet-size);
|
|
height: var(--timeline-bullet-size);
|
|
border-radius: 50%;
|
|
background: var(--timeline-bullet-color);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Hovered timeline bullet */
|
|
.recent-changes-content ul li:hover::after {
|
|
background: var(--timeline-bullet-hover-color);
|
|
}
|
|
|
|
/*
|
|
* Note list
|
|
*/
|
|
.note-list .note-book-card {
|
|
--note-list-horizontal-padding: 22px;
|
|
--note-list-vertical-padding: 15px;
|
|
background-color: var(--card-background-color);
|
|
border: 1px solid var(--card-border-color) !important;
|
|
box-shadow: 2px 3px 4px var(--card-shadow-color);
|
|
border-radius: 12px;
|
|
user-select: none;
|
|
padding: 0;
|
|
margin: 5px 10px 5px 0;
|
|
}
|
|
|
|
.note-list.list-view .note-book-card {
|
|
box-shadow: 0 0 3px var(--card-shadow-color);
|
|
}
|
|
|
|
.note-list.list-view .note-book-card .note-book-header .note-icon {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card:active {
|
|
background-color: var(--card-background-press-color);
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card a {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-header {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
padding: 0.5em 1rem;
|
|
border-bottom-color: var(--card-border-color);
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-header .note-icon {
|
|
font-size: 17px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-header .note-book-title {
|
|
font-size: 1em;
|
|
color: var(--active-item-text-color);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-header .rendered-note-attributes {
|
|
font-size: 0.7em;
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-header:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-content {
|
|
padding: 0 !important;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-content .rendered-content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis {
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-content h1,
|
|
.note-list-wrapper .note-book-card .note-book-content h2,
|
|
.note-list-wrapper .note-book-card .note-book-content h3,
|
|
.note-list-wrapper .note-book-card .note-book-content h4,
|
|
.note-list-wrapper .note-book-card .note-book-content h5,
|
|
.note-list-wrapper .note-book-card .note-book-content h6 {
|
|
font-size: 1rem;
|
|
color: var(--active-item-text-color);
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content,
|
|
.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content,
|
|
.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .note-book-content.type-code pre {
|
|
height: 100%;
|
|
padding: 1em;
|
|
}
|
|
|
|
.note-list-wrapper .note-book-card .bx {
|
|
color: var(--left-pane-icon-color) !important;
|
|
}
|
|
|
|
.note-list.grid-view .note-book-card:hover {
|
|
background: var(--card-background-color) !important;
|
|
filter: contrast(105%);
|
|
}
|
|
|
|
.note-list.grid-view .note-book-card img {
|
|
object-fit: cover !important;
|
|
width: 100%;
|
|
}
|
|
|
|
.note-list.grid-view .ck-content {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.note-list.grid-view .ck-content p {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.note-list.grid-view .ck-content figure.image {
|
|
width: 25%;
|
|
}
|
|
|
|
/* Note paths */
|
|
|
|
.note-path .path-bracket {
|
|
/* Hide the leading and trailing bracket from the path */
|
|
display: none;
|
|
}
|
|
|
|
.note-path .path-delimiter {
|
|
/* Hide the path delimiters (slashes) */
|
|
display: none;
|
|
}
|
|
|
|
.note-path .path-delimiter + span::before {
|
|
/* Replace the path delimiters with arrows */
|
|
display: inline-block;
|
|
content: "\ed3b";
|
|
padding: 0 0.25em;
|
|
font-family: boxicons;
|
|
opacity: 0.75;
|
|
transform: translateY(4%);
|
|
}
|
|
|
|
/* Search */
|
|
|
|
.search-result-widget-content .note-path .path-bracket {
|
|
display: inline;
|
|
}
|
|
|
|
.search-result-widget-content .note-path {
|
|
opacity: 0.75;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Help */
|
|
|
|
.help-dialog .modal-content {
|
|
--modal-background-color: var(--help-background-color);
|
|
backdrop-filter: blur(var(--help-backdrop-blur));
|
|
}
|
|
|
|
.help-dialog .help-cards {
|
|
display: block;
|
|
columns: 3;
|
|
column-gap: 20px;
|
|
}
|
|
|
|
.help-dialog .card {
|
|
margin: 0;
|
|
width: auto;
|
|
border: none;
|
|
background: unset;
|
|
padding: 16px 8px;
|
|
break-inside: avoid-column;
|
|
}
|
|
|
|
.help-dialog .card-body {
|
|
box-shadow: var(--help-card-shadow);
|
|
border-radius: 6px;
|
|
background: var(--help-card-background);
|
|
}
|
|
|
|
.help-dialog .card-body h5,
|
|
.help-dialog .card-body h6 {
|
|
color: var(--help-card-heading-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.help-dialog .card-body h5 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.help-dialog .card-body h6 {
|
|
font-size: 15px;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
/* Help card item */
|
|
.help-dialog .help-cards ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.help-dialog .help-cards li + li {
|
|
margin-top: 0.4em;
|
|
}
|
|
|
|
/* Keyboard shortcut */
|
|
.help-dialog .help-cards kbd {
|
|
box-shadow: var(--help-kbd-shortcut-shadow);
|
|
margin: 0 4px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 2px 10px;
|
|
background: var(--help-kbd-shortcut-background);
|
|
color: var(--help-kbd-shortcut-color);
|
|
font-weight: 500;
|
|
letter-spacing: 0.5pt;
|
|
}
|
|
|
|
.help-dialog .help-cards kbd:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Inline code - used for Markdown samples */
|
|
.help-dialog .help-cards code {
|
|
border-radius: 4px;
|
|
background: var(--help-code-background);
|
|
padding: 0 8px;
|
|
color: var(--help-code-color);
|
|
}
|
|
|
|
/* Note area */
|
|
|
|
.title-row > *:first-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.title-row > *:nth-child(2) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.title-row {
|
|
/* Aligns the "Create new split" button with the note menu button (the three dots button) */
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.note-title-widget input {
|
|
--input-background-color: transparent;
|
|
|
|
border-radius: 8px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
/* Promoted attributes */
|
|
.promoted-attribute-cell div.input-group {
|
|
margin: 1px 0;
|
|
} |