roam/css

roam-theme.css

/* @azlen's fantastic cosmonaut theme + some alterations for focused writing mode */
@import url('https://azlen.github.io/roam-themes/cosmonaut.css');

/* First I'd like my main page to be wider than my sidebar pages */
:root {
  --page-width: 1024px;
}

#roam-right-sidebar-content {
  --page-width: 616px;
}

/* A few kanban board fixes */
.rm-block-text, .kanban-board {
  max-width: var(--page-width)
}

.rm-full-width {
  margin-right: auto;
}

/* Focus mode (https://gist.github.com/mnmaraes/523d006a1663b55784d7eb6d4d086cac) suport (and flair) */
.roam-article {
  transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;
}

.roam-article.patch-roam-focus {
  --page-width: 95vw;
}

.roam-topbar > .flex-h-box {
  height: auto !important;
}

/* Need to be precise here in order to avoid making the search bar transparent */
#buffer.patch-roam-focus,
.roam-topbar.patch-roam-focus > .flex-h-box > *:not(.rm-find-or-create-wrapper),
.roam-topbar.patch-roam-focus > .flex-h-box > .rm-find-or-create-wrapper > .bp3-fill > .bp3-popover-target > .bp3-input-group > .search-icon::before {
  opacity: 0;
  transition: opacity 3s ease-in-out 1s;
}

#buffer.patch-roam-focus:hover,
.roam-topbar.patch-roam-focus > .flex-h-box:hover > *:not(.rm-find-or-create-wrapper),
.roam-topbar.patch-roam-focus > .flex-h-box:hover > .rm-find-or-create-wrapper > .bp3-fill > .bp3-popover-target > .bp3-input-group > .search-icon::before {
  opacity: 1;
  transition: none;
}