notes.css

:root {
  --default-sidebar-width: 25%;
}

html {
  font-size: 12px;
}

body, #sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

body {
  right: 0;
}

svg {
  fill: var(--svg-fill-color);
}

.bold { font-weight: bold; }
.underline { text-decoration: underline; }
.italic { font-style: italic; }
.line-through { text-decoration: line-through; }

/* Layers */

#modal {
  z-index: 20;
}

#context-menu {
  z-index: 15;
}

#overlay {
  z-index: 10;
}

#drag {
  z-index: 6;
}

#sidebar {
  z-index: 5;
}

#panel, .notification {
  z-index: 4;
}

#toolbar {
  z-index: 3;
}

#content {
  z-index: 2;
}

/* Keyframes */

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Notifications */

.notification {
  font-weight: bold;
  padding: 1em;
  border-bottom: 1px solid var(--notification-border-color);
}

/* Bar (for #sidebar-buttons and #toolbar) */

#toolbar, #sidebar-buttons {
  font-size: .8em;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  user-select: none;
  box-sizing: border-box;
  border-top: 1px solid var(--bar-border-color);
}

.bar > .button {
  font-weight: bold;
  padding: .5em;
  margin: .5em;
  margin-right: 0;
  border-radius: 3px;
}

.bar > .button.disabled {
  opacity: .4;
}

.bar > .button > svg {
  height: .8em;
  pointer-events: none;
}

/* Sidebar */

#sidebar {
  max-width: 50% !important;
  width: var(--default-sidebar-width);
  box-sizing: border-box;
  user-select: none;
  overflow: hidden;
  transform: translateX(-100%);
}

body.with-sidebar #sidebar { transform: translateX(0); }
body.with-sidebar { left: var(--default-sidebar-width); }
body:not(.with-sidebar) { left: 0 !important; }

#sidebar-notes {
  padding: .5em;
  overflow-y: auto;
  flex-grow: 1;
  background: var(--sidebar-notes-background-color);
}

#sidebar-notes .note {
  cursor: pointer;
  font-weight: bold;
  padding: .5em 1em;
  margin-top: 3px;
  color: var(--sidebar-notes-text-color);
  border-radius: 3px;
}

#sidebar-notes .note:hover,
#sidebar-notes .note.active {
  background: var(--sidebar-active-note-background-color);
  color: var(--sidebar-active-note-text-color);
}

#sidebar-buttons .button {
  cursor: pointer;
}

body.syncing #sync-now > svg {
  animation: rotating .5s linear infinite;
}

#drag {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: col-resize;
  background: var(--drag-background-color);
  border-right: 1px solid var(--drag-border-color);
}

body.resizing-sidebar #drag {
  background: var(--drag-resizing-background-color);
  border-color: var(--drag-resizing-border-color);
}

body.resizing-sidebar #sidebar-notes,
body.resizing-sidebar #sidebar-buttons,
body.resizing-sidebar #content,
body.resizing-sidebar #toolbar {
  pointer-events: none;
}

body.resizing-sidebar { cursor: col-resize; }
body.resizing-sidebar-locked-min { cursor: e-resize; }
body.resizing-sidebar-locked-max { cursor: w-resize; }

/* Note */

#content {
  white-space: break-spaces;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#content {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  resize: none;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  padding: 1em;
  overflow-y: auto;
}

#content ul { margin: 0; }
#content ol { margin: 0 0 0 1em; }

#content pre {
  overflow: auto;
  padding: .5em;
  border: 1px solid var(--pre-border-color, red);
}

#content table {
  border: var(--table-border, 3px solid red);
  border-spacing: 0;
  border-collapse: collapse;
}

#content table td {
  padding: .25em;
  border: var(--table-td-border, 1px solid red);
  min-width: 1em;
}

#content table td.heading {
  background: var(--table-td-heading-background-color, silver);
  font-weight: bold;
}

body.with-control #content a {
  cursor: pointer;
}

#content .my-notes-highlight {
  background: var(--highlight-background-color, yellow);
  color: var(--highlight-text-color, black);
}

/* Context menu */

#context-menu {
  position: fixed;
  border-radius: 2px;
  font-size: .8em;
  font-weight: bold;
  user-select: none;
  background: var(--context-menu-background-color);
  color: var(--context-menu-text-color);
  border: 1px solid var(--context-menu-border-color);
}

body:not(.with-context-menu) #context-menu { display: none; }

#context-menu .action {
  cursor: pointer;
  margin: .8em;
}

#context-menu .action:hover {
  text-decoration: underline;
}

/* Toolbar */

#toolbar {
  transform: translateY(100%);
  background: var(--background-color);
  color: var(--toolbar-button-color);
}

#toolbar .button {
  color: var(--svg-fill-color);
}

#toolbar .button.active,
#toolbar .button:hover {
  background: var(--toolbar-button-hover-background-color);
  color: var(--toolbar-button-hover-color);
}

#toolbar .button.active > svg,
#toolbar .button:hover > svg {
  fill: var(--toolbar-button-hover-color);
}

body:not(.with-toolbar) #toolbar { display: none; }
body.with-toolbar #toolbar { transform: translateY(0); }

#toolbar .button { cursor: pointer; }
#toolbar .button.wide { margin-right: 1.5em; }
#toolbar .button.rotate90 > svg { transform: rotate(90deg); }

#H1 > span { font-size: 1em; }
#H2 > span { font-size: .85em; }
#H3 > span { font-size: .65em; }

#toolbar .button .menu {
  position: absolute;
  bottom: calc(100% + 1px);
  background: var(--toolbar-submenu-background-color);
  left: 0;
  right: 0;
}

#toolbar .button:not(.active) .menu {
  display: none;
}

/* Overlay */

#overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px; /* #drag border */
  right: 0;
  pointer-events: none;
}

body:not(.with-overlay) #overlay { display: none; }
body.with-overlay #sidebar { pointer-events: none; }

body.to-create #overlay { background: var(--to-create-overlay-background-color); }
body.to-rename #overlay { background: var(--to-rename-overlay-background-color); }
body.to-delete #overlay { background: var(--to-delete-overlay-background-color); }

/* Modal */

#modal {
  position: absolute;
  padding: .5em;
  border-radius: 5px;
  min-width: 30%;
  box-sizing: border-box;
  background: var(--modal-background-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - .5em - 1em));
}

body.with-modal #sidebar,
body.with-modal #toolbar {
  pointer-events: none;
}

#modal.with-border {
  border: 1px solid var(--modal-border-color);
}

#modal input {
  box-sizing: border-box;
  outline: none;
  border: none;
  border-radius: 3px;
  padding: .5em;
  font-family: inherit;
  font-size: .8em;
}

#modal #input {
  width: 100%;
  background: white;
  border: 1px solid var(--modal-input-border-color);
}

#modal #buttons {
  text-align: right;
  margin-top: 1em;
}

#modal #buttons input {
  cursor: pointer;
  background: var(--modal-button-background-color);
  color: var(--modal-button-text-color);
}

#modal .modal-description {
  font-size: .75em;
  margin-top: 1.5em;
}

body.with-overlay #modal {
  border: none !important;
}

/* Focus */

body.focus #sidebar,
body.focus #toolbar {
  display: none;
}

body.focus {
  left: 0 !important;
}

/* Print */

@media print {
  #sidebar, #toolbar {
    display: none !important;
  }

  body {
    position: static !important;
    left: 0 !important;
    font-size: 100% !important;
    background: white;
    color: black;
  }

  #content pre { border: 1px solid black; }
  #content table { border: none; }
  #content table td { border: 1px solid black; }
  #content table td.heading { background: #dddddd; }
}