logseq/src/main/frontend/components/page.css

.cp__page {
  &-inner-wrap {
    &.is-node-page:not([data-ready]) {
      .ls-page-blocks,
      .ls-page-appendix-els {
        @apply invisible;
      }
    }
  }

  &-publish-actions {
    background-color: var(--ls-primary-background-color);
    padding: 50px 0;
    margin: -1.5rem;

    > h1 {
      font-size: 18px;
      padding: 15px;
      text-align: center;
    }

    > .it {
      display: flex;
      justify-content: flex-start;
      padding-top: 5px;
      padding-bottom: 5px;

      button {
        width: 90%;
        justify-content: center;
        padding: 15px 0;
      }
    }
  }
}

.cp__vertical-menu-button {
  opacity: 60%;
  display: block;
}

.cp__vertical-menu-button:hover {
  opacity: 1;
}

.cp__vertical-menu-button svg {
  width: 20px;
  height: 20px;
}

.graph-filters {
  width: 200px;
  background: var(--ls-secondary-background-color);
}

.graph-filters ul {
  margin-left: 0;
}

.graph-filters li {
  list-style: none;
  margin: 0;
}

.graph-layout {
  background: var(--ls-secondary-background-color);
}

.search-filter-close svg {
  transform: scale(0.7);
}

.ls-page-title {
  @apply rounded-sm;

  &.title {
    @apply mb-3;

    .block-main-container {
      @apply gap-2;
    }
  }

  .edit-input {
    @apply w-full border-0 p-0 pr-1 bg-transparent outline-0;

    box-shadow: none;

    &-wrapper {
      @apply rounded;

      &.editing {
        background-color: var(--ls-secondary-background-color);
      }
    }
  }

  .page-icon {
    @apply font-[48px] leading-none;

    .ui__button {
      @apply !h-auto pb-[1.5px];
    }
  }
}

a.page-title {
  padding: 0 8px;
  margin-left: -8px;
  transition: none;
  display: block;
  color: inherit;
}

.page-title-sizer-wrapper {
  @apply w-full overflow-x-auto overflow-y-hidden;

  :empty::before {
    content: '\200b';
  }

  > .title {
    @apply w-full overflow-hidden overflow-ellipsis;
  }
}

html.is-native-android,
html.is-native-ipad,
html.is-native-iphone,
html.is-native-iphone-without-notch {
  .ls-page-title {
    margin: 0 0 10px -15px;
    padding: 0 !important;
  }
}

/* Change to another cursor style if Shift key is active */
[data-active-keystroke*="Shift" i] :is(.journal-title, .page-title,
    .block-ref, .page-ref, a.tag,
    .bullet-container.cursor) {
  cursor: e-resize;
}

.ls-all-pages {
  max-width: 1400px;
}

.add-button-link {
  opacity: 0;
  color: var(--ls-primary-text-color);
  transform: scale(.8);
  margin-left: -1px;


  &:hover {
    color: var(--ls-primary-text-color);
    opacity: .6 !important;
    transform: scale(.9);
  }

  &:active {
    opacity: .8 !important;
  }

  &-wrap {
    cursor: pointer;
  }
}

html.is-native-android,
html.is-native-ios {
  .block-content-wrapper {
    /* 38px is the width of block-control */
    width: calc(100% - 35px);
    @screen sm {
      width: calc(100% - 33px);
    }
  }
}

.page-blocks-collapse-control, .page-blocks-collapse-control:hover {
  text-decoration: none;
  cursor: default;
  min-width: 22px;
  padding-top: 22px;
  color: initial;
  user-select: none;

  .control-hide {
    display: none;
  }
}

.toned-down {
  opacity: 0.5;
  color: var(--ls-secondary-text-color);
}

.highlighted {
  opacity: 1;
  color: var(--ls-primary-text-color);
}

.separator-top {
  border-top: 1px solid var(--ls-quaternary-background-color);
}

.icon-box {
  display: inline-block;
  line-height: normal;
  background-color: var(--ls-quaternary-background-color);
}

.references {
  @apply select-none;
}

.no-ring {
  @apply focus:ring-0 focus:ring-offset-0;
}

.ls-dummy-block {
  @apply mb-[20px] pt-[5px] pb-[3px] h-[29px];

  &.selected {
  }

  .bullet {
    @apply relative -top-[2px] left-[-2px];
  }

  .text {
    @apply relative -top-[2px];
  }
}

.ls-preview-popup {
  @apply pl-6;

  .tippy-wrapper {
    @apply p-2;

    &.as-page {
      @apply -ml-5 pl-7 outline-none;
    }

    &.as-block {
      @apply -ml-5;
    }
  }
}

.cp__right-sidebar {
  .page-linked > .content {
    @apply pt-2;
  }
}