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

.cp__settings {

  &-main {
    > header {
      padding: 10px;
      padding-top: 0;
      border-bottom: 1px solid var(--ls-quaternary-background-color);

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

  &-inner {
    > aside {
        border-right: 0px solid var(--ls-quaternary-background-color);
        border-bottom: 1px solid var(--ls-quaternary-background-color);
        @screen md {
            border-right: 1px solid var(--ls-quaternary-background-color);
            border-bottom: 0px solid var(--ls-quaternary-background-color);
        }

      ul {
        padding: 12px;
        padding-left: 5px;
        margin: 0;

        > li {
          list-style: none;
          padding: 0;
          margin: 5px 0;
          border-radius: 4px;

          > a {
            padding: 10px;
            user-select: none;
            color: var(--ls-primary-text-color);

            > i {
              width: 20px;
              height: 20px;
              overflow: hidden;
              opacity: .6;
            }

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

    > article {
      flex: 1;
      padding: 0 12px 12px;
      max-height: 80vh;
      /* overflow: auto; */
    }

    .panel-wrap {
      padding: 12px;

      @screen sm {
        width: 600px;
      }

      > .it {
        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: 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;
        }
      }
    }
  }
}

/* Styles for the category icon on the left of settings-modal */
.cp__settings-inner > aside ul > li > a > i {
  margin-right: 4px;
}

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

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