logseq/resources/css/shui.css

html * {
  border-color: hsl(var(--border));
}

html[data-theme=light] {
  --accent: var(--rx-gray-12-hsl);
  --accent-foreground: var(--rx-gray-02-hsl);
  --input: var(--rx-gray-05-hsl);
  --secondary: 240 4.8% 95.9%;
  --kbd-glow-top: transparent;
  --kbd-glow-bottom: rgba(0, 0, 0, 0.10);
}

html[data-theme=dark] {
  --accent: var(--rx-gray-12-hsl);
  --accent-foreground: var(--rx-gray-02-hsl);
  --primary-foreground: 0 0% 22%;
  --background: 0 0% 11%;
  --foreground: 0 0% 95%;
  --card: 0 0% 11%;
  --card-foreground: 0 0% 95%;
  --secondary: 0 0% 20%;
  --secondary-foreground: 0 0% 98%;
  --border: 0 0% 16%;
  --muted: 0 0% 15%;
  --popover: 0 0% 7%;
  --popover-foreground: 0 0 95%;
  --input: 0 0% 16%;
  --kbd-glow-top: rgba(255, 255, 255, 0.15);
  --kbd-glow-bottom: rgba(0, 0, 0, 0.25);
}

html {
  div[data-radix-menu-content],
  .ui__select-content {
    --accent: var(--rx-gray-04-hsl);
    --accent-foreground: var(--rx-gray-12-hsl);

    --muted: var(--rx-gray-05-hsl);
  }

  .ui__calendar {
    --accent: var(--rx-gray-04-hsl);
    --accent-foreground: var(--rx-gray-12-hsl);
  }

  &:not([data-color=logseq]) {
    .ui__dropdown-menu-item,
    div[data-radix-popper-content-wrapper] div[data-radix-collection-item] {
      &:focus, &.is-active {
        background-color: var(--lx-gray-04, hsl(var(--accent)));
      }
    }

    .ui__dropdown-menu-content.has-search-key {
      > .head:focus-within + div[data-radix-collection-item] {
        background-color: var(--lx-gray-04, hsl(var(--accent)));
      }
    }


    div[data-radix-popper-content-wrapper] div[role=menu],
    .menu-links-wrapper,
    .menu-links-outer,
    .absolute-modal[data-modal-name] {
      background-color: var(--lx-popover-bg, var(--lx-gray-01, hsl(var(--popover))));
    }
  }

  &[data-color=logseq] {
    .references-blocks-item {
      --lx-bg-override: var(--rx-gray-03-alpha);
    }

    .block-children-left-border:hover {
      --ls-block-left-color: var(--rx-logseq-11);
    }
  }

  &[data-color=none] {
    --ls-block-bullet-color: var(--rx-gray-08);
    --ls-block-bullet-active-color: var(--rx-gray-12);

    ::selection {
      @apply bg-primary/20;
    }

    #ui__ac-inner {
    }

    .cp__cmdk {
      --lx-gray-07: var(--rx-gray-07);
    }

    .ui__toggle {
      &-background-off {
        @apply bg-gray-08;

        .switcher {
          @apply bg-gray-10;
        }
      }

      &-background-on {
        .switcher {
          @apply bg-gray-03;
        }
      }
    }

    .tl-container {
      --ls-primary-background-color: hsl(var(--background));
      --ls-secondary-background-color: var(--rx-gray-01);
      --ls-tertiary-background-color: var(--rx-gray-03);
      --ls-quaternary-background-color: var(--rx-gray-05);
    }
  }
}

html[data-theme=light] {
  &[data-color=logseq] {
    .references-blocks-item {
      --lx-bg-override: var(--rx-gray-03-alpha);
    }
  }

  .extensions__pdf-container {
    --lx-pdf-container-dark-bg: var(--lx-gray-11, #042f3c);
  }
}

html[data-theme=dark] {
  background-color: #161616;

  &[data-color=logseq] {
    @apply bg-[#002b36];

    .ui__modal-panel {
      @apply border-accent-01;
    }

    .tippy-tooltip {
      @apply border-accent-02;
    }

    .references-blocks-item {
      background-color: var(--lx-gray-03, var(--ls-secondary-background-color));
    }

    .cp__right-sidebar-inner {
      .references-blocks-item {
        background-color: var(--lx-gray-04, var(--ls-tertiary-background-color));
      }
    }

    .cp__themes-installed {
      .it.is-active, .it:hover {
        @apply bg-accent-01;
      }
    }

    .ui__button {
      &.as-outline {
        --accent: 192 100% 12%;
      }
    }

    div[data-radix-menu-content],
    .ui__select-content {
      --accent: 190 100% 15%;
      --muted: 192 100% 13%;
      --secondary-foreground: 0 0% 82%;
    }

    .ui__button {
      &.as-ghost {
        @apply hover:bg-accent-01;
      }
    }

    .menu-separator {
      @apply opacity-20;
    }

    .ui__calendar {
      --accent: 196 100% 15%;
    }

    .rc-datepicker {
      --accent: 200 97% 37%;
    }

    .cp__cmdk {
      .border-gray-06,
      .border-gray-07 {
        border-color: var(--ls-border-color, var(--lx-gray-06));
        opacity: .6;
      }

      > .hints {
        @apply border-accent-01 bg-gray-02;
      }
    }

    .tl-button {
      &:hover {
        @apply bg-accent-02;
      }
    }

    .cp__header {
      > .r > div:not(.ui__dropdown-trigger) a.button, button.button,
      .ui__button.as-ghost {
        @apply opacity-60 hover:opacity-90;
      }
    }

    .form-input {
      @apply border-accent-01;
    }
  }
}

.ui__dialog-overlay, .ui__alert-dialog-overlay,
.ui__dialog-content, .ui__alert-dialog-content,
.ui__dropdown-menu-content, .ui__select-content {

  &.z-50 {
    @apply z-[999];
  }
}

div[data-radix-popper-content-wrapper] {
  @apply !z-[999];

  &:has(> .repos-list) {
    @apply !z-[var(--ls-z-index-level-5)];
  }
}

.ui__dialog-overlay {
  &[data-align=start],
  &[data-align=top] {
    @apply !items-start;

    .ui__dialog-content {
      @apply top-20;
    }
  }
}

.ui__dialog-content {
  @apply outline-none m-4;

  &[data-auto-width] {
    @apply max-w-[90vw] w-max sm:max-w-[960px];
  }

  &[data-close-btn=false] {
    .ui__dialog-close {
      @apply hidden;
    }
  }
}

.ui__alert-dialog-content {
  &[data-mode=confirm] {
    .ui__alert-dialog-footer {
      @apply flex justify-between font-normal items-center select-none;
    }
  }
}

/* Deprecated: .ui__button-shortcut-key - replaced by shui-shortcut-key */

/* Unified Keyboard Shortcut Component Styles */

/* Combo Keys - simultaneous key combinations with separator */
.shui-shortcut-combo {
  @apply flex items-start relative rounded;
  background-color: var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
  border: 1px solid var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
  box-sizing: border-box;
  white-space: nowrap;
  min-width: 0;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out;
  filter: brightness(1);
}

/* Glow effect for combo and separate keys */
/* Top highlight and bottom shadow use theme-aware variables for light/dark visibility */
/* Combo keys: glow on container (wraps all keys together) */
.shui-shortcut-combo.shui-shortcut-glow {
  box-shadow: var(--kbd-glow-top) 0px 1px 0px 0px inset, var(--kbd-glow-bottom) 0px -1px 0px 0px inset;
  border: none;
}

/* Separate keys: glow on individual keys (not container) */
.shui-shortcut-separate.shui-shortcut-glow kbd.shui-shortcut-key {
  box-shadow: var(--kbd-glow-top) 0px 1px 0px 0px inset, var(--kbd-glow-bottom) 0px -1px 0px 0px inset;
  border: none;
}

.shui-shortcut-combo kbd.shui-shortcut-key {
  @apply flex flex-col items-center justify-center px-1 py-0.5 relative shrink-0;
  min-width: 20px;
  background: transparent;
  border: none;
}

.shui-shortcut-separator {
  background-color: var(--lx-gray-07-alpha, var(--rx-gray-07-alpha));
  align-self: stretch;
  flex-shrink: 0;
  width: 1px;
}

/* Separate Keys - sequential key presses with 4px gap */
.shui-shortcut-separate {
  @apply flex items-start relative;
  gap: 4px;
  white-space: nowrap;
  min-width: 0;
}

.shui-shortcut-separate kbd.shui-shortcut-key {
  @apply flex flex-col items-center justify-center px-1 py-0.5 relative rounded shrink-0;
  background-color: var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
  border: 1px solid var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
  box-sizing: border-box;
  min-width: 20px;
}

/* Compact Keys - minimal text-only style */
.shui-shortcut-compact {
  @apply flex items-start relative;
  font-family: 'Inter', sans-serif;
  font-weight: normal;
  line-height: 16px;
  font-style: normal;
  color: var(--lx-gray-12, var(--rx-gray-12));
  font-size: 12px;
  text-align: center;
  letter-spacing: -0.5px;
  white-space: nowrap;
  gap: 2px;
}

/* Individual key styling with inner glow */
kbd.shui-shortcut-key,
.shui-shortcut-key {
  @apply text-xs font-normal h-5 flex items-center justify-center;
  font-family: 'Inter', sans-serif;
  color: var(--lx-gray-12, var(--rx-gray-12));
  font-size: 12px;
  text-align: center;
  letter-spacing: -0.5px;
  padding: 2px 4px;
  line-height: 16px;
  min-width: fit-content;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out;
  box-shadow: 0 0 0 transparent;
  filter: brightness(1);
}

/* Keys in separate containers get their own styling */
.shui-shortcut-separate kbd.shui-shortcut-key {
  @apply rounded;
  background-color: var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
  border: 1px solid var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
  box-sizing: border-box;
}

/* Override shortcut text color inside primary buttons for better contrast */
.bg-primary kbd.shui-shortcut-key,
.bg-primary .shui-shortcut-key,
.bg-primary .shui-shortcut-compact,
.bg-primary\/90 kbd.shui-shortcut-key,
.bg-primary\/90 .shui-shortcut-key,
.bg-primary\/90 .shui-shortcut-compact,
.bg-primary\/100 kbd.shui-shortcut-key,
.bg-primary\/100 .shui-shortcut-key,
.bg-primary\/100 .shui-shortcut-compact {
  color: hsl(var(--primary-foreground));
}

/* Key press animation — separate keys: animate individual kbd elements */
kbd.shui-shortcut-key-pressed,
.shui-shortcut-key-pressed {
  transform: translateY(1px);
  filter: brightness(0.92);
}

.shui-shortcut-separate.shui-shortcut-glow kbd.shui-shortcut-key-pressed {
  box-shadow: var(--kbd-glow-top) 0px 2px 0px 0px inset, var(--kbd-glow-bottom) 0px -0.5px 0px 0px inset;
}

/* Key press animation — combo keys: animate the container (the whole keycap) */
.shui-shortcut-combo.shui-shortcut-key-pressed {
  transform: translateY(1px);
  filter: brightness(0.92);
}

.shui-shortcut-combo.shui-shortcut-glow.shui-shortcut-key-pressed {
  box-shadow: var(--kbd-glow-top) 0px 2px 0px 0px inset, var(--kbd-glow-bottom) 0px -0.5px 0px 0px inset;
}

/* Row highlight animation — accent band sweep (only on actual row elements) */
.shui-shortcut-row.shui-shortcut-row--pressed,
.shortcut-row.shui-shortcut-row--pressed {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    rgba(223, 239, 254, 0.08) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: shortcut-row-sweep 700ms ease-out forwards;
}

@keyframes shortcut-row-sweep {
  from { background-position: -50% 0; }
  to   { background-position: 150% 0; }
}

/* Ensure consistent height for shortcut containers */
.shui-shortcut-row {
  min-height: 20px;
  align-items: center;
  flex-wrap: nowrap;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  kbd.shui-shortcut-key,
  .shui-shortcut-key,
  .shui-shortcut-combo {
    transition: none;
    transform: none;
    filter: none;
    box-shadow: 0 0 0 transparent;
  }

  .shui-shortcut-row.shui-shortcut-row--pressed,
  .shortcut-row.shui-shortcut-row--pressed {
    animation: none !important;
    background-image: none !important;
  }
}

.ui__list-item-highlighted-span {
  background-color: var(--lx-accent-06, var(--color-level-4));
}

.dark .ui__list-item-highlighted-span {
  background-color: var(--lx-accent-08-alpha, var(--color-level-4));
}

.ui__dropdown-menu-content, div[data-radix-menu-content],
.ui__select-content {
  @apply overflow-y-auto;

  &[data-side=top] {
    max-height: calc(var(--radix-dropdown-menu-content-available-height) - 20px);
  }

  &[data-side=bottom] {
    max-height: calc(var(--radix-dropdown-menu-content-available-height) - 10px);
  }

  &.text-popover-foreground {
    color: inherit;
  }
}

.ui__popover-content {
  @apply overflow-y-auto;

  &[data-side=top] {
    max-height: calc(var(--radix-popover-content-available-height) - 40px);
  }

  &[data-side=bottom] {
    max-height: calc(var(--radix-popover-content-available-height) - 20px);
  }
}

.ui__popover-content {
  @apply !pointer-events-auto;
}

.ui__multi-select-content {
  @apply relative;

  > .head {
    @apply sticky top-0 z-10;
  }

  .search-input {
    > .ui__input {
      @apply rounded-[1px] h-8;
    }
  }

  &:has([data-radix-collection-item]) {
    > .head {
      @apply mb-1.5;
    }
  }
}

.ui__calendar {
  .rdp-caption_dropdowns {
    @apply flex items-center justify-center relative rounded opacity-80;

    .rdp-vhidden {
      @apply hidden;
    }

    .rdp-dropdown_month,
    .rdp-dropdown_year {
      @apply relative pr-3 mr-3;

      select {
        @apply absolute px-2 py-0 border left-0 z-[2] opacity-0 bg-none;
      }

      > .text-sm {
        @apply w-full z-[1];

        svg {
          @apply absolute right-0 top-[6px];
        }
      }
    }

    .rdp-dropdown_month {
      @apply ml-4;
    }

    & + div {
      @apply absolute -right-1 flex gap-2;

      button[name=previous-month] {
        @apply relative;
        svg {
          width: 14px;
          height: 14px;
        }
      }

      button[name=next-month] {
        @apply relative;
        svg {
            width: 14px;
            height: 14px;
        }
      }
    }
  }

  .rdp-caption_start {
    > div {
      @apply justify-start;
    }
  }

  .del-date-btn {
    @apply absolute right-[4px] top-[17px] px-1 opacity-70 hover:opacity-100
    active:opacity-80 hover:text-red-rx-09 rounded-md !h-6 !w-6;
  }

  &.has-del-btn {
    .rdp-caption_dropdowns {
      & + div {
        @apply right-5;
      }
    }
  }

  input[type=number] {
    appearance: initial;
  }

  .rdp-button {
    &[name=previous-month], &[name=next-month] {
      @apply !h-6 !w-6;
    }
  }
}

.popper-arrow {
  fill: white;
  filter: drop-shadow(0 0 3px var(--lx-gray-12));
  clip-path: inset(0 -10px -10px -10px);
}

.dark-theme {
  .popper-arrow {
    /* FIXME: set the best color for different themes */
    fill: none;
  }
}