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

.cp__settings {
  &-main {
    aside {
      @apply bg-gray-400/5 p-4;
    }

    article {
      @apply p-4 flex-1 min-h-[12rem] w-auto overflow-y-auto;
      @apply md:max-h-[70vh] md:w-[40rem];
      /* margin-right: -17px; */
      /* margin-bottom: -17px; */

      @screen md {
        /* max-height: 70vh; */
        /* width: 680px; */
      }
    }

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

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

    .settings-menu-link {
      @apply px-2 py-1.5 select-none; 
      color: var(--ls-primary-text-color);
    }
  }

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

    > aside {

      ul {

        > li {

          > a {

            > i {
              overflow: hidden;
              opacity: .9;
            }

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

          &.active {
            background-color: var(--ls-quaternary-background-color);

            i {
              opacity: 1;
            }
          }
        }
      }
    }

    &.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;
        align-items: center;

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

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

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

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

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