penpot/frontend/src/app/main/ui/static.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 "refactor/common-refactor.scss" as deprecated;
@use "./ds/typography.scss" as t;

.exception-layout {
  width: 100%;
  height: 100%;
  background-color: var(--color-background-secondary);
}

.deco-before,
.deco-after {
  position: absolute;
  left: calc(50% - deprecated.$s-40);

  svg {
    position: absolute;
    fill: var(--color-foreground-secondary);
    height: 1537px;
    width: deprecated.$s-80;
  }
}

.deco-before {
  height: 34vh;
  top: 0;

  svg {
    bottom: 0;
  }
}

.deco-after {
  height: 34vh;
  bottom: 0;

  svg {
    top: 0;
  }
}

.deco-after2 {
  display: flex;
  justify-content: center;
  gap: deprecated.$s-8;
  width: 100%;
  height: 34vh;
  position: absolute;
  left: 0;
  bottom: 0;
  color: var(--color-foreground-primary);

  svg {
    fill: var(--color-foreground-secondary);
    height: 1537px;
    width: deprecated.$s-80;
  }

  span {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    width: 25%;
    padding-bottom: deprecated.$s-28;

    &:first-child {
      text-align: right;
    }
  }
}

.exception-header {
  color: var(--color-foreground-secondary);
  padding: deprecated.$s-24 deprecated.$s-32;
  position: fixed;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.penpot-logo {
  fill: var(--color-foreground-primary);
  width: deprecated.$s-48;
  height: deprecated.$s-48;
}

.back-arrow {
  transform: rotate(180deg);
}

.go-back-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: deprecated.$s-8;
  margin-left: deprecated.$s-12;
  font-size: deprecated.$fs-14;
}

.login-header {
  @extend .button-primary;
  padding: deprecated.$s-8 deprecated.$s-16;
  font-size: deprecated.$fs-11;
  position: fixed;
  right: 0;
  margin: deprecated.$s-40 deprecated.$s-32;
}

.exception-content {
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;

  .container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: deprecated.$s-16;
    height: 34vh;
    justify-content: center;
    margin-top: 33vh;
    text-align: center;
    width: deprecated.$s-640;
  }
}

.main-message {
  @include t.use-typography("title-large");
  color: var(--color-foreground-primary);
}

.desc-message {
  @include t.use-typography("title-large");
  color: var(--color-foreground-secondary);
}

.desc-text {
  @include t.use-typography("title-large");
  color: var(--color-foreground-secondary);
  margin-block-end: 0;
}

.download-link {
  @include t.use-typography("code-font");
  color: var(--color-foreground-primary);
  text-transform: lowercase;
}

.sign-info {
  text-align: center;

  button {
    @extend .button-primary;
    text-transform: uppercase;
    padding: deprecated.$s-8 deprecated.$s-16;
    font-size: deprecated.$fs-11;
  }
}

.image {
  svg {
    fill: var(--color-foreground-primary);
  }
}

.workspace {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: var(--color-canvas);
  position: relative;

  .workspace-left,
  .workspace-right {
    padding: deprecated.$s-12;
    width: deprecated.$s-276;
    height: 100%;
    background-color: var(--color-background-primary);
    display: flex;
    gap: deprecated.$s-4;

    svg {
      width: 2rem;
      height: 2rem;
      fill: var(--icon-foreground-hover);
    }

    .project-name {
      @include deprecated.uppercaseTitleTipography;
      color: var(--title-foreground-color);
    }

    .file-name {
      @include deprecated.smallTitleTipography;
      text-transform: none;
      color: var(--title-foreground-color-hover);
    }
  }
}

.dashboard {
  width: 100%;
  height: 100%;

  .dashboard-sidebar {
    width: deprecated.$s-300;
    height: 100%;
  }
}

.viewer {
  width: 100%;
  height: 100%;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.65);
  display: flex;
  justify-content: center;
  align-items: center;

  .dialog,
  .dialog-login {
    width: 556px;
    background-color: var(--color-background-primary);
    border-radius: deprecated.$s-8;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    padding: deprecated.$s-36;
    color: var(--modal-text-foreground-color);

    .modal-close {
      text-align: right;

      .modal-close-button {
        background: none;
        border: none;
        cursor: pointer;

        svg {
          cursor: pointer;
          width: deprecated.$s-24;
          height: deprecated.$s-24;
          fill: var(--modal-text-foreground-color);
          stroke: var(--modal-text-foreground-color);
        }
      }
    }

    .dialog-title {
      font-size: deprecated.$fs-20;
    }

    .sign-info {
      display: flex;
      justify-content: flex-end;
      margin-top: deprecated.$s-32;

      button {
        @extend .button-primary;
        text-transform: uppercase;
        padding: deprecated.$s-8 deprecated.$s-16;
        font-size: deprecated.$fs-11;
      }

      .cancel-button {
        @extend .button-secondary;
        text-transform: uppercase;
        padding: deprecated.$s-8 deprecated.$s-16;
        font-size: deprecated.$fs-11;
        margin-right: deprecated.$s-16;
      }
    }
  }

  .dialog {
    gap: deprecated.$s-12;
  }

  .login {
    gap: 0;
    padding: 0 deprecated.$s-36 deprecated.$s-72 deprecated.$s-36;

    .logo {
      margin-bottom: deprecated.$s-40;

      svg {
        fill: var(--color-foreground-primary);
        width: deprecated.$s-120;
        height: deprecated.$s-40;
      }
    }

    .logo-title {
      font-size: deprecated.$fs-20;
      color: var(--title-foreground-color-hover);
      margin-bottom: deprecated.$s-4;
    }

    .logo-subtitle {
      font-size: deprecated.$fs-14;
      color: var(--title-foreground-color-hover);
      margin-bottom: deprecated.$s-24;
    }

    .change-section {
      width: 100%;
      text-align: center;

      a {
        color: var(--link-foreground-color);
      }
    }

    hr {
      margin: deprecated.$s-20 0;
      border-top: solid deprecated.$s-1 var(--modal-separator-background-color);
    }

    .separator {
      margin: deprecated.$s-20 0;
    }

    form div {
      margin-bottom: deprecated.$s-8;
    }
  }
}

.login-container {
  width: 100%;
  background-color: var(--color-background-error);
}

.buttons-container {
  display: flex;

  .retry-btn {
    margin-inline-start: var(--sp-xxl);
  }
}