notesnook/apps/web/src/app.css

.tabsScroll,
.titlebarLogo,
.theme-scope-titleBar,
.navigation-menu-header,
.route-container-header {
  -webkit-app-region: drag;
}

.theme-scope-titleBar button,
.tabsScroll .tab,
.editor-action-bar button,
.route-container-header button,
.search-container {
  -webkit-app-region: no-drag;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local(""), url("./assets/fonts/Inter-Regular.woff2") format("woff2"),
    url("./assets/fonts/Inter-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: local(""), url("./assets/fonts/Inter-SemiBold.woff2") format("woff2"),
    url("./assets/fonts/Inter-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: local(""), url("./assets/fonts/Inter-Bold.woff2") format("woff2"),
    url("./assets/fonts/Inter-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: local(""), url("./assets/fonts/Inter-Medium.woff2") format("woff2"),
    url("./assets/fonts/Inter-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: local(""), url("./assets/fonts/Inter-Italic.woff2") format("woff2"),
    url("./assets/fonts/Inter-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: local(""),
    url("./assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
    url("./assets/fonts/Inter-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: local(""), url("./assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
    url("./assets/fonts/Inter-BoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: local(""), url("./assets/fonts/Inter-MediumItalic.woff2") format("woff2"),
    url("./assets/fonts/Inter-MediumItalic.ttf") format("truetype");
}

.rpv-core__text-layer,
.rpv-core__text-layer *,
.selectable,
.selectable *,
input,
textarea,
[contenteditable="true"],
[contenteditable="true"] * {
  -webkit-touch-callout: initial;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: initial;
  user-select: text;
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.rpv-core__text-layer-text::selection {
  background-color: var(--background-selected) !important;
  color: transparent;
}

.rpv-core__text-layer-text::-moz-selection {
  /* Code for Firefox */
  background-color: var(--background-selected) !important;
  color: transparent;
}

::-moz-selection {
  /* Code for Firefox */
  background-color: var(--background-selected);
  color: var(--paragraph-selected);
}

::selection {
  background-color: var(--background-selected);
  color: var(--paragraph-selected);
}

*::-moz-focus-inner {
  border: 0;
}

.ct-toast {
  padding: 0px 10px !important;
  background-color: var(--background) !important;
}

.route {
  display: flex;
  flex-direction: column;
  flex: 1;
  opacity: 1;
}

.middle-pane {
  overflow: hidden;
  display: flex;
}
.editor-pane {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nav-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pane::before {
  width: 1px !important;
}

.route#settings,
#mainRouteContainer {
  overflow: hidden;
}

.ms-track:hover,
.ms-track:active {
  background: var(--background-secondary) !important;
  border-left: 1px solid var(--border-secondary) !important;
}

.ms-track {
  border-width: 0px !important;
}

.ms-active .ms-thumb {
  filter: brightness(80%);
}

.ms-thumb {
  background: var(--paragraph-secondary) !important;
}

.rct-tree-items-container {
  margin: 0px;
  margin-block-start: 0px !important;
  margin-block-end: 0px !important;
  margin-inline-end: 0px !important;
  margin-inline-start: 0px !important;
  padding: 0px !important;
}

#app.app-focus-mode .toasts-container {
  display: none;
}

a {
  color: var(--accent);
}

.flash {
  animation: flash 1s;
}

@keyframes flash {
  0% {
    background-color: color-mix(in srgb, var(--accent) 5%, transparent);
  }
  50% {
    background-color: initial;
  }
  100% {
    background-color: color-mix(in srgb, var(--accent) 5%, transparent);
  }
}

kbd {
  background: var(--background);
  border-radius: 3px;
  padding: 2px 5px;
  color: var(--paragraph);
}

.ping {
  animation: ping 1s infinite;
}

@keyframes ping {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}