Mailspring/app/internal_packages/preferences/styles/preferences.less

@import 'ui-variables';
@import 'ui-mixins';

// Preferences Specific

.preferences-wrap {
  input[type='checkbox'] {
    margin: 0 7px 0 0;
    position: relative;
    top: -1px;
  }
  input[type='radio'] {
    margin: 0 7px 0 0;
    position: relative;
    top: -1px;
  }
  select {
    margin: 4px 0 0 8px;
  }

  height: 100%;
  background-color: @background-primary;
  color: @text-color;

  h6 {
    color: @text-color-very-subtle;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  section:first-child h6:first-child {
    margin-top: 0;
  }

  p {
    color: @text-color-very-subtle;
    font-size: @font-size-smaller;

    a {
      color: @text-color-very-subtle;
      font-weight: bold;
      text-decoration: underline;
    }
  }
  *[contenteditable] {
    p {
      color: @text-color;
      font-size: @font-size-base;
    }
  }

  section {
    padding-bottom: @padding-base-vertical;
    .item {
      padding-top: @padding-small-vertical;
      padding-bottom: @padding-small-vertical;
    }
  }

  .container-preference-tabs {
    width: 100%;
    background-color: @source-list-bg;
    border-bottom: 1px solid @border-color-divider;

    .preferences-tabs {
      padding-top: 10px;
      background-color: @source-list-bg;

      .item {
        cursor: default;
        margin: 0 auto;
        flex: 1.3;
        min-width: 54px;
        max-width: 120px;
        text-align: center;
        padding-top: 8px;

        &:active {
          img {
            filter: brightness(40%);
          }
        }

        &.active {
          background: darken(@background-primary, 10%);
          border-radius: @border-radius-large @border-radius-large 0 0;
          box-shadow: @shadow-border;
        }

        .tab-icon {
          display: block;
          margin: auto;
        }

        .name {
          padding: @padding-base-vertical * 1.5 @padding-base-horizontal * 0.3
            @padding-large-vertical @padding-base-horizontal * 0.3;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: @font-size-small;
          line-height: @font-size-small;
        }
      }
    }
  }

  .preferences-content {
    flex: 8;
    background-color: lighten(@background-secondary, 1%);
    & > .scroll-region-content {
      padding: @padding-large-vertical * 3 @padding-large-horizontal * 3;
    }
    .container-dropdown {
      margin: 5px 0;
      .dropdown {
        padding-left: 10px;
      }
    }
  }

  .container-general {
    width: 40%;
    min-width: 430px;
    margin: 0 auto;

    .local-data {
      .btn {
        margin: 4px 0 0 8px;
        border: 1px solid @dropdown-default-border-color;
        box-shadow: none;
        border-radius: 5px;
      }
    }
  }

  .container-appearance {
    width: 400px;
    margin: 0 auto;

    input[type='radio'] {
      vertical-align: middle;
    }

    .appearance-scale-slider {
      .ruler {
        display: flex;
        align-items: bottom;
        .midpoint {
          border-right: 1px solid @border-color-divider;
          width: 1px;
          flex-grow: 0;
        }
      }
    }

    .appearance-mode-switch {
      max-width: 400px;
      text-align: right;

      .appearance-mode {
        background-color: @background-off-primary;
        border-radius: 10px;
        border: 1px solid @background-tertiary;
        text-align: center;
        flex: 1;
        padding: 25px;
        padding-bottom: 9px;
        margin-right: 10px;
        margin-bottom: 7px;
        margin-top: 0;
        img {
          background-color: @background-tertiary;
        }
        div {
          margin-top: 15px;
          text-transform: capitalize;
          cursor: default;
        }
        &:last-child {
          margin-right: 0;
        }
      }
      .appearance-mode.active {
        border: 1px solid @component-active-color;
        color: @component-active-color;
        img {
          background-color: @component-active-color;
        }
      }
    }
  }

  .container-keymaps {
    width: 40%;
    min-width: 460px;
    margin: 0 auto;

    .col-left {
      text-align: right;
      flex: 1;
      margin-right: 20px;
    }
    .col-right {
      text-align: left;
      flex: 1;
      select {
        width: 75%;
      }
    }

    .shortcut-section-title {
      border-bottom: 1px solid @border-color-divider;
      margin: @padding-large-vertical * 1.5 0;
    }

    .shortcut {
      padding: 3px 0;
      color: @text-color-very-subtle;
      .values {
        font-family: monospace;
        font-weight: 600;
        color: @text-color;
        display: inline-block;
        padding-left: @padding-small-horizontal;
        padding-right: @padding-small-horizontal;
        cursor: text;

        .shortcut-value {
          .then {
            font-size: 0.9em;
            color: @text-color-very-subtle;
          }
          &:after {
            content: ', ';
          }
          &:last-child:after {
            content: '';
          }
        }
      }

      &:hover {
        .values {
          background: @input-bg;
          border-radius: @border-radius-base;
          outline: 1px solid @input-border-color;
        }
      }
      &.editing {
        .values {
          background: @input-bg;
          color: @component-active-color;

          border-radius: @border-radius-base;
          outline: 1px solid @input-border-color;
        }
      }
    }
  }

  .platform-note {
    padding: @padding-base-vertical @padding-base-horizontal;
    background: fade(@black, 4%);
    border-left: 3px solid @color-info;
    margin: @padding-base-vertical 0;
    font-size: 0.95em;
    &:before {
      color: @color-info;
      font-weight: 600;
      content: 'NOTE: ';
    }
  }
  .platform-linux-only {
    display: none;
  }
}

body.platform-win32 {
  .preferences-wrap {
    .well {
      border-radius: 0;
    }
    .container-appearance {
      .appearance-mode {
        border-radius: 0;
      }
    }
  }
}

body.platform-linux {
  .preferences-wrap {
    .platform-linux-only {
      display: block;
    }
  }
}

@media (max-width: 600px) {
  .preferences-wrap {
    .container-preference-tabs {
      .preferences-tabs .item img.tab-icon {
        margin-bottom: 10px;
      }
      .preferences-tabs .item .name {
        display: none;
      }
    }
    .preferences-content > .scroll-region-content {
      padding-left: @padding-large-horizontal * 1;
      padding-right: @padding-large-horizontal * 1;
    }
  }
}