penpot/frontend/src/app/main/ui/settings.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@use "common/refactor/common-refactor.scss" as *;
@use "common/refactor/common-dashboard";

.dashboard {
  background-color: var(--app-background);
  display: grid;
  grid-template-rows: $s-48 1fr;
  grid-template-columns: $s-40 $s-256 1fr;
  height: 100vh;
}

.dashboard-content {
  display: flex;
  flex-direction: column;
  position: relative;
  grid-row: 1 / span 2;
  padding: $s-16 $s-16 0 0;
}

.dashboard-container {
  flex: 1 0 0;
  margin-right: $s-16;
  overflow-y: auto;
  width: 100%;
  border-top: $s-1 solid var(--color-background-quaternary);

  &.dashboard-projects {
    user-select: none;
  }
  &.dashboard-shared {
    width: calc(100vw - $s-320);
    margin-right: $s-52;
  }

  &.search {
    margin-top: $s-12;
  }
}

.dashboard-settings {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  a {
    color: var(--color-foreground-secondary);
  }
}

.form-container {
  width: $s-800;
  margin: $s-48 auto $s-32 $s-120;
  display: flex;
  max-width: $s-368;
  width: 100%;

  &.two-columns {
    max-width: $s-520;
    justify-content: space-between;
    flex-direction: row;
  }

  h2 {
    margin-bottom: $s-16;
  }

  form {
    width: $s-468;

    .custom-input,
    .custom-select {
      flex-direction: column-reverse;
      label {
        position: relative;
        text-transform: uppercase;
        color: var(--color-foreground-primary);
        font-size: $fs-11;
        margin-bottom: $s-12;
        margin-left: calc(-1 * $s-4);
      }
      input,
      select {
        background-color: var(--color-background-tertiary);
        border-radius: $s-8;
        border-color: transparent;
        color: var(--color-foreground-primary);
        padding: 0 $s-16;
        &:focus {
          outline: $s-1 solid var(--color-accent-primary);
        }
        ::placeholder {
          color: var(--color-foreground-secondary);
        }
      }
      .help-icon {
        bottom: $s-12;
        top: auto;
        svg {
          fill: var(--color-foreground-secondary);
        }
      }
      &.disabled {
        input {
          background-color: var(--input-background-color-disabled);
          border-color: var(--color-background-quaternary);
          color: var(--color-foreground-secondary);
        }
      }
      .input-container {
        background-color: var(--color-background-tertiary);
        border-radius: $s-8;
        border-color: transparent;
        margin-top: $s-24;
        .main-content {
          label {
            position: absolute;
            top: calc(-1 * $s-24);
          }
          span {
            color: var(--color-foreground-primary);
          }
        }
        &:focus {
          border: $s-1 solid var(--color-accent-primary);
        }
      }
      textarea {
        border-radius: $s-8;
        padding: $s-12 $s-16;
        background-color: var(--color-background-tertiary);
        color: var(--color-foreground-primary);
        border: none;
        &:focus {
          outline: $s-1 solid var(--color-accent-primary);
        }
      }
    }

    .field-title {
      color: var(--color-foreground-primary);
    }
    .field-title:not(:first-child) {
      margin-top: $s-64;
    }

    .field-text {
      color: var(--color-foreground-secondary);
    }
    button,
    .btn-secondary {
      width: 100%;
      font-size: $fs-11;
      text-transform: uppercase;
      background-color: var(--color-background-tertiary);
      color: var(--color-foreground-primary);
      &:hover {
        color: var(--color-accent-primary);
        background-color: var(--color-background-quaternary);
      }
    }
    hr {
      display: none;
    }
  }
  .links {
    margin-top: $s-12;
  }
}

.profile-form {
  display: flex;
  flex-direction: column;
  max-width: $s-368;
  width: 100%;

  .newsletter-subs {
    border-bottom: $s-1 solid var(--color-foreground-secondary);
    border-top: $s-1 solid var(--color-foreground-secondary);
    padding: $s-32 0;
    margin-bottom: $s-32;

    .newsletter-title {
      font-family: "worksans", "vazirmatn", sans-serif;
      color: var(--color-foreground-secondary);
      font-size: $fs-14;
    }

    label {
      font-family: "worksans", "vazirmatn", sans-serif;
      color: var(--color-background-primary);
      font-size: $fs-12;
      margin-right: calc(-1 * $s-16);
      margin-bottom: $s-12;
    }

    .info {
      font-family: "worksans", "vazirmatn", sans-serif;
      color: var(--color-foreground-secondary);
      font-size: $fs-12;
      margin-bottom: $s-8;
    }

    .input-checkbox label {
      align-items: flex-start;
    }
  }
}

.avatar-form {
  display: flex;
  flex-direction: column;
  width: $s-120;
  min-width: $s-120;

  img {
    border-radius: 50%;
    flex-shrink: 0;
    height: $s-120;
    margin-right: $s-16;
    width: $s-120;
  }

  .image-change-field {
    position: relative;
    width: $s-120;
    height: $s-120;

    .update-overlay {
      opacity: 0;
      cursor: pointer;
      position: absolute;
      width: $s-120;
      height: $s-120;
      border-radius: 50%;
      font-size: $fs-24;
      color: var(--color-foreground-primary);
      line-height: 5;
      text-align: center;
      background: var(--color-accent-tertiary);
      z-index: 14;
    }

    input[type="file"] {
      width: $s-120;
      height: $s-120;
      position: absolute;
      opacity: 0;
      cursor: pointer;
      top: 0;
      z-index: 15;
    }

    &:hover {
      .update-overlay {
        opacity: 0.8;
      }
    }
  }
}

.options-form,
.password-form {
  h2 {
    font-size: $fs-14;
    margin-bottom: $s-20;
  }
}