brackets-npm-registry/styles/main.less

Install your extensions into Brackets using npm

@import './brackets_variables.less';

@font-weight-semibold: 500;

#brackets-npm-registry-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(icon.svg);
  &.active {
    background-image: url(icon-active.svg);
  }
}

#brackets-npm-registry-dialog {
  width: 760px;
  .modal-body {
    padding: 0;
  }
  .dialog-message {
    margin-bottom: 0;
    li {
      padding: 0;
    }
  }
  .registry-item {
    font-size: 12px;
    padding: 1em;
    box-sizing: border-box;
    &:nth-child(odd) {
      background-color: #e6e9e9;
      .dark & {
        background-color: #313131;
      }
    }
    &:nth-child(even) {
      background-color: #dfe2e2;
      .dark & {
        background-color: #2c2c2c;
      }
    }
    h1 {
      font-size: 1.5em;
    }
    h2 {
      font-size: 1.2em;
      font-weight: normal;
    }
    h1, h2 {
      line-height: 1em;
      margin: 0 0 0.5em 0;
    }
    a {
      &.defaultColor {
        color: #333333;
        .dark & {
          color: #cccccc;
        }
      }
      &:focus {
        box-shadow: none;
      }
      &:hover {
        text-decoration: underline !important;
      }
    }
    button {
      width: 100%;
      box-shadow: inset 0 1px 0 @bc-highlight;
      text-shadow: 0 -1px 0 @bc-shadow-small;
      .dark & {
        box-shadow: inset 0 1px 0 @dark-bc-highlight;
        text-shadow: 0 -1px 0 @dark-bc-shadow-small;
      }
    }
    .btn-update {
      background-color: @bc-secondary-btn-bg;
      border-color: @bc-secondary-btn-border;
      color: @bc-text-alt;
      font-weight: @font-weight-semibold;
      .dark & {
        background-color: @dark-bc-secondary-btn-bg;
        border-color: @dark-bc-secondary-btn-border;
        color: @dark-bc-text-alt;
      }
    }
    .btn-reinstall {
      background-color: @bc-warning-bg;
      border-color: darken(@bc-warning-bg, 30%);
      color: @bc-warning-text;
      .dark & {
        background-color: @dark-bc-warning-bg;
        border-color: @dark-bc-primary-btn-border;
        color: @dark-bc-warning-text;
      }
    }
  }
}

#brackets-npm-registry-progress-dialog {
  position: relative;
  textarea {
    min-height: 300px;
  }
  .modal-body {
    > div {
      position: relative;
      > .spinner {
        @size: 36px;
        position: absolute;
        width: @size;
        height: @size;
        left: 50%;
        top: 50%;
        margin-left: -1 * @size / 2;
        margin-top: -1 * @size / 2;
      }
    }
  }
}