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

.cp__settings {
  &-inner {
    @apply flex flex-col md:flex-row min-h-[55dvh] max-h-[75dvh];

    > header {
      padding: 0 10px 10px;
      border-bottom: 1px solid var(--lx-gray-06, var(--ls-quaternary-background-color));

      h1 {
        @apply text-xl m-0;
      }
    }

    aside {
      @apply bg-gray-03-alpha p-4;

      > ul > li {
        > a {
          @apply mb-2;

          > strong {
            @apply text-sm font-normal pl-1 opacity-90;
          }
        }

        &.active {
          @apply bg-black/10;
        }
      }
    }

    > article {
      @apply p-4 flex-1 min-h-[12rem] w-screen overflow-y-auto;
      @apply md:h-[70vh] md:w-[44rem];
    }

    > aside > .cp__settings-header,
    > article > .cp__settings-header {
      @apply h-10 py-2 flex flex-row items-center justify-start gap-2;
    }

    aside > .cp__settings-header {
      @apply px-2;
    }

    aside > .cp__settings-header > .ui__icon {
      @apply h-8 w-8 bg-gray-700/10 rounded grid place-items-center;
    }

    aside > .cp__settings-header > .ui__icon > svg {
      @apply h-6 w-6;
    }

    h1.cp__settings-modal-title {
      @apply text-2xl font-semibold lowercase;
    }

    h1.cp__settings-category-title {
      @apply text-xl lowercase;
    }

    h1.cp__settings-modal-title:first-letter,
    h1.cp__settings-category-title:first-letter {
      @apply uppercase;
    }

    .settings-menu {
      @apply p-0 m-0 mt-4;
    }

    .settings-menu-item {
      @apply list-none p-0 my-1.5 rounded;
      @apply hover:bg-black/10;

      &[data-id=keymap] {
        @apply hidden sm:block;
      }
    }

    .settings-menu-link {
      @apply px-2 py-1.5 select-none text-gray-12;
    }


    &.no-aside {
      > article {
        padding-left: 0;
      }
    }

    .panel-wrap {
      @apply p-1 flex flex-col gap-4;

      @screen sm {
        width: 600px;
      }

      > .it {
        @apply sm:grid sm:grid-cols-3 sm:gap-6;

        label {
          min-height: 28px;
          line-height: 28px;
          display: flex;
          align-items: center;

          & + div {
            display: flex;
            align-items: center;
            min-height: 24px;
            user-select: none;

            .max-w-lg {
              width: 100%;
            }
          }
        }

        &.app-updater {
          padding-top: 15px;
          align-items: flex-start;


          > .wrap {
            display: block;

            .ver {
              position: relative;
              top: -2px;
            }
          }
        }

        .form-select, .form-input {
          width: 100%;
          max-width: 200px;
          display: inline-block;

          &:hover {
            opacity: .8;
          }
        }

        &:first-of-type {
          padding-top: 14px;
        }
      }

      span[role="checkbox"] {
        &:hover {
          opacity: .8;
        }
      }
    }

    .admonitionblock {
      p {
        @apply text-sm;
      }
    }
  }

  &-app-updater {
    min-height: 20px;
    position: relative;
    margin-bottom: -5px;

    .ctls {
      position: relative;

      &:disabled {
        cursor: progress;
      }
    }

    .update-state {
      padding: 6px 10px;
      background-color: var(--ls-quaternary-background-color);
      border-radius: 4px;
      margin-top: 10px;
      width: fit-content;

      > p {
        margin: 0;
      }

      .link {
        font-size: 16px;
        line-height: 1em;
        letter-spacing: 1px;

        svg {
          display: inline-block;
          position: relative;
          top: -1px;
          margin-right: 2px;
        }

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  &-network-proxy-panel {
    margin: -15px 0;

    label {
      display: flex;
      align-items: center;

      > select {
        min-width: 100px;
        margin-left: -14px !important;
        padding: 4px 10px !important;
      }

      > input[disabled] {
        opacity: .5;
      }

      > strong {
        font-weight: 500;
        width: 60px;
      }
    }
  }

  &-files-breaking-changed {
    &[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  &-appearance-modal-inner {
    @apply -m-2 -mb-3 flex flex-col gap-4;

    .keyboard-shortcut {
      @apply relative -top-[3px];
    }
  }
}

.cp__theme-modes-options {
  @apply flex items-center m-0 list-none;

  > li {
    @apply pr-2 m-0 opacity-90 hover:opacity-100;

    &:hover {
      cursor: pointer;
    }

    &.active {
      @apply opacity-100;
      cursor: inherit;

      > i {
        border-color: var(--ls-link-text-color);
        border-width: 2px;
      }
    }

    > i {
      @apply block w-[70px] h-[47px] rounded overflow-hidden border-0 border-solid border-transparent bg-gray-04;

      background: url("../img/theme-modes.png") no-repeat;
      background-size: 355%;

      &.mode-dark {
        background-position-x: -97px;
      }

      &.mode-system {
        background-position-x: -194px;
      }

      &.mode-dark.radix {
        background: url('../img/dark-theme.png') no-repeat center / cover;
      }

      &.mode-light.radix {
        background: url('../img/light-theme.png') no-repeat center / cover;
      }

      &.mode-system.radix {
        background: url('../img/system-theme.png') no-repeat center / cover;
      }
    }

    > strong {
      @apply block pr-2 pt-1.5 text-center text-xs font-medium;
    }
  }
}

.cp__assets {
  &-alias-directories {
    @apply py-2 px-1;

    > ul {
      @apply m-0 list-none -mx-2;

      > li {
        border-top: 1px solid var(--ls-secondary-border-color);

        &:hover {
          .ext-label.is-plus {
            opacity: 100;
          }

          .ctrls {
            display: block;
          }
        }
      }
    }

    .ext-label {
      @apply rounded px-1.5 opacity-70 cursor-pointer flex items-center select-none active:opacity-50;

      background-color: var(--ls-secondary-border-color);
      color: var(--ls-secondary-text-color);

      &.is-del {
        i.ti {
          width: 0;
          overflow: hidden;
          opacity: .9;
          color: red;
          transition: width .3s;

          &:hover {
            opacity: 1;
          }
        }

        &:hover {
          i.ti {
            width: 14px;
            padding-left: 2px;
          }
        }
      }

      &.is-plus {
        background-color: var(--ls-primary-background-color);
        border: 1px solid var(--ls-border-color);
      }
    }

    .ext-input {
      @apply leading-none;

      padding: 1px 4px;
      width: 60px;
    }

    .cp__input-ac {
      width: unset;
      margin: 0;
      line-height: 1em;
      position: relative;
      overflow: visible;

      /*noinspection ALL*/

      .item-results-wrap {
        position: absolute;
        top: 24px;
        left: 0;
        z-index: 1;
        width: 100px;
        max-height: 180px;
        border: 1px solid var(--ls-border-color);
        border-radius: 4px;
        overflow: auto;
        overflow: overlay;

        .menu-link {
          padding: 4px 6px;
          font-size: 12px;
        }

        .ext-select-item {
          display: block;
          white-space: nowrap;
        }
      }

      &.is-empty-input {
        .item-results-wrap {
          display: none;
        }
      }
    }
  }

  &-alias-name-content {
    margin: -8px;

    > p {
      @apply py-1.5 text-lg px-1 my-0;

      strong {
        @apply inline-block pr-4 text-right w-40 opacity-70;
      }
    }
  }

  &-alias-ext-input {
    width: 80px !important;
    padding: 1px 4px;
    border: 2px solid var(--ls-secondary-border-color);
    font-size: 11px;
    border-radius: 4px;
    height: 22px;

    &:focus {
      border-color: var(--ls-border-color);
    }
  }
}

html.is-native-android,
html.is-native-iphone,
html.is-native-iphone-without-notch {

  .cp__settings-inner {
    > article {
      padding-bottom: 0;
    }

    .panel-wrap {
      padding-bottom: 0;
    }
  }

  .theme-row--swatch {
    @apply w-5 h-5 rounded-full flex justify-center items-center;
  }

  .theme-row--swatch-active {
    @apply w-5 h-5 rounded-full flex justify-center items-center;
  }
}

svg.git {
  margin-left: -4px;
  transform: scale(0.9);
}

svg.cmd {
  margin-left: -1px;
}

body[data-settings-tab=keymap] {
  .cp__settings-inner {
    > article {
      @apply p-0;

      > header {
        @apply px-4 pt-[22px] pb-2 h-auto;
      }
    }
  }

  .ui__dialog-content[label=app-settings] {
    @apply max-w-none;
  }
}

.ui__dialog-content[label=customize-appearance] {
  @apply pt-4 pb-8 px-8 lg:max-w-xl;
}

.ui__dialog-overlay[label=customize-appearance] {
  @apply bg-transparent;
}

.cp__accent-colors {
  &-list-wrap {
    @apply grid grid-cols-8 gap-2 max-w-[250px];

    &.as-modal-picker {
      @apply grid-cols-8 pb-1 ml-1 max-w-[320px];
    }
  }
}