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

.cp__settings {
  &-inner {
    @apply flex flex-col md:flex-row;

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

      h1 {
        font-size: 22px;
        margin: 0;
      }
    }

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

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

          > strong {
            font-size: 14px;
            font-weight: normal;
            padding-left: 5px;
            opacity: .9;
          }
        }

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

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

    > 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;
      color: var(--ls-primary-text-color);
    }


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

    .panel-wrap {
      @apply p-1;

      @screen sm {
        width: 600px;
      }

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

        margin-bottom: 0;
        padding-bottom: 12px;

        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;
        }
      }

      &.is-general {
        > .it {
          margin-bottom: 8px;
        }

      }

      &.is-advanced {
        > .it {
          margin-bottom: 8px;
        }
      }

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

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

    .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 {
          display: block;
          width: 80px;
          height: 57px;
          background-color: #a4b5b6;
          background: url("../img/theme-modes.png") no-repeat;
          background-size: 355%;
          border-radius: 4px;
          overflow: hidden;
          border-width: 0;
          border-style: solid;
          border-color: transparent;


          &.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;
        }
      }
    }
  }

  &-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;

    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;
    }
  }

  &-accent-colors-modal-inner {
    & > .it {
      grid-template-columns: auto;
      margin: -8px;
    }

    label[for=toggle_radix_theme] {
      @apply text-xl font-semibold opacity-90;
    }
  }
}

.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__modal[label=accent-colors-picker] {
  .panel-content {
    @apply sm:min-w-[520px];
  }
}

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

    &.as-modal-picker {
      @apply grid-cols-8 gap-3 pt-1 pb-2 ml-8 max-w-none;
    }
  }
}