<style include="cr-shared-style">
:host {
color: var(--cr-primary-text-color);
display: flex;
flex-direction: column;
height: 100%;
line-height: 1.54; /* 20px. */
}
#main-container {
display: flex;
flex-direction: row;
flex-grow: 1;
overflow: hidden;
}
#splitter {
box-sizing: border-box;
cursor: col-resize;
<if expr="is_win">
/* Unlike other platforms, e-resize is a two-way arrow on Windows. */
cursor: e-resize;
</if>
flex: 0 0 var(--splitter-width);
opacity: 0;
}
#splitter:hover,
#splitter.splitter-active {
border-inline-start: 1px solid rgba(0, 0, 0, 0.1);
opacity: 1;
transition: opacity 100ms ease-out;
}
@media (prefers-color-scheme: dark) {
#splitter:hover,
#splitter.splitter-active {
border-inline-start-color: var(--cr-separator-color);
}
}
#sidebar {
display: flex;
flex-direction: column;
max-width: 40%;
min-width: var(--min-sidebar-width);
width: var(--min-sidebar-width);
}
bookmarks-folder-node {
flex: 1;
overflow-y: auto;
padding: 8px 0;
user-select: none;
}
managed-footnote {
--managed-footnote-icon-padding: 12px;
flex: 0;
padding-bottom: 24px;
padding-top: 24px;
}
bookmarks-list {
flex: 1;
overflow-x: hidden;
}
#drop-shadow {
display: block;
flex-shrink: 0;
}
:host([toolbar-shadow_]) #drop-shadow {
opacity: var(--cr-container-shadow-max-opacity);
}
</style>
<bookmarks-toolbar sidebar-width="[[sidebarWidth_]]" role="banner">
</bookmarks-toolbar>
<div id="drop-shadow" class="cr-container-shadow"></div>
<div id="main-container">
<div id="sidebar" role="tree" aria-label="$i18n{sidebarAxLabel}">
<bookmarks-folder-node item-id="0" depth="-1"></bookmarks-folder-node>
<managed-footnote></managed-footnote>
</div>
<cr-splitter id="splitter"></cr-splitter>
<bookmarks-list></bookmarks-list>
</div>
<bookmarks-router></bookmarks-router>
<bookmarks-command-manager></bookmarks-command-manager>
<cr-toast-manager duration="10000">
<cr-button on-click="onUndoClick_" aria-label="$i18n{undoDescription}">
$i18n{undo}
</cr-button>
</cr-toast-manager>