sh_discord_bot/web/src/styles.scss

@import "./styles/themes/default-light-theme.scss";
@import "./styles/themes/default-dark-theme.scss";
@import "./styles/themes/sh-edraft-dark-theme.scss";
@import "./styles/themes/sh-edraft-light-theme.scss";
@import "./styles/primeng-fixes.scss";
@import "./styles/constants.scss";


html,
body {
  height: 100vh;
  padding: 0;
  margin: 0;

  font-size: 1rem;

  $scrollbarColor: #272727;
  $scrollbarBackgroundColor: #888;

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background-color: $scrollbarBackgroundColor;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: $scrollbarColor;
    border: 3px solid $scrollbarBackgroundColor;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: $scrollbarColor;
  }
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1 {
  margin: 0;
  font-size: 1.75rem;
}

h2 {
  margin: 0;
  font-size: 1.5rem;
}

h3 {
  margin: 0;
  font-size: 1.25rem;
}

header {
  height: $headerHeight;
  display: flex;
  flex-direction: row;

  .logo-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    .p-button.p-button-text {
      border: none;
    }
  }

  .logo {
    display: flex;
    align-items: center;

    overflow: hidden;

    .app-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .header-menu {
    text-align: right;
    flex: 1;
    justify-content: flex-end;
    margin: 0 5px 0 0;
  }

  .p-menu-overlay {
    width: 180px !important;
  }
}

.auth-header {
  .p-menu-overlay {
    width: 180px !important;
  }
}

.auth-footer {
}

.app {
  height: 100%;
  display: flex;
  flex: 1;

  .sidebar-open {
    height: 100%;
    width: 175px;
  }

  .sidebar-closed {
    height: 100%;
    width: 75px;
  }

  h1 {
    // table views with filters are scrollable with 10 items, when 30px margin
    margin-bottom: 20px;
  }

  .component-wrapper {
    width: 100%;
    overflow: hidden;

    .component {
      width: 100%;
      height: 100%;
      padding: 15px;

      .content-wrapper {
        margin-bottom: 30px;
        border-radius: 5px;

        .content-header {
          padding: 10px;

          h2 {
            font-size: 20px;
          }
        }

        .content {
          width: 100%;
          display: flex;
          flex-direction: column;
          padding: 15px;

          form {
            input {
              width: 100%;
            }
          }

          td,
          th {
            p-dropdown,
            .p-dropdown {
              width: 100%;
            }
          }

          .content-row {
            display: flex;
            flex-direction: row;
            flex: 1;
            margin: 5px 0;
            gap: 5px;

            .content-column {
              display: flex;
              flex: 1;
              gap: 5px;
            }

            .content-data-name {
              display: flex;
              align-items: center;

              font-size: 18px;
            }

            .content-data-value {
              display: flex;
              align-items: center;

              font-size: 18px;

              input {
                width: 100% !important;
              }
            }

            .content-data-value-row {
              display: flex;
              flex: 1;
              flex-direction: column;

              font-size: 18px;
            }
          }

          .content-divider {
            margin: 10px 0;
          }

          p-panel {
            margin: 5px 0;
          }

          .dropdown-icon-label-wrapper {
            display: flex;
            flex-direction: row;
            gap: 10px;
          }

          .content-input-field {
            width: 75% !important;
            margin: 0 !important;
          }

          .input-field {
            width: 100%;

            input,
            .p-password {
              width: 100%;
            }
          }

          .input-field-info-text {
            margin: 15px 0;
            width: 100%;
          }

          .login-form-submit {
            .login-form-submit-btn {
              width: 100%;
            }
          }

          .login-form-sub-button-wrapper {
            display: flex;
            flex-direction: column;

            .login-form-sub-btn {
              margin-top: 15px;
              width: 100%;
            }

            .login-form-sub-btn-wrapper {
              width: 100%;
            }
          }

          .table-caption {
            display: flex;

            .table-caption-table-info {
              display: flex;
              flex: 1;
              flex-direction: row;
              gap: 25px;
              align-items: center;

              .table-caption-text {
                display: flex;
                align-items: center;

                font-weight: 400;
              }

              .table-caption-column-select {
                flex: 1;
              }
            }

            .table-caption-search {
            }
          }

          .table-header-label {
            display: flex;

            .table-header-text {
              flex: 1;
            }

            .table-header-icon {
            }
          }

          .table-header-small {
            width: 75px;
          }

          .table-header-medium {
            width: 150px;
          }

          .table-header-actions {
            width: 100px;
          }

          .table-header-small-dropdown {
            width: 150px;
          }

          .server-list-wrapper {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .server-filter {
            }

            .server-count {
            }

            .server-list {
              display: flex;
              flex-direction: column;

              gap: 15px;

              .server {
                display: flex;
                gap: 15px;

                padding: 20px;
                overflow: hidden;

                .logo {
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  img {
                    width: 4rem;
                    height: 4rem;
                    object-fit: contain;
                  }
                }

                .info {
                  display: flex;
                  flex-direction: column;
                  width: 100%;
                  gap: 10px;

                  .name {
                    margin: 0;

                    justify-content: center;
                    align-items: center;
                    word-break: break-word;
                  }

                  .data {
                  }

                  .client-data {
                    display: flex;
                    flex-direction: row;
                    width: 100%;

                    .client-component {

                      width: 100%;

                      .client {
                        display: flex;
                        flex-direction: row;
                        align-content: stretch !important;
                        flex-wrap: wrap;
                        gap: 10px;

                        .client-info-small {
                          flex: 0.25 !important;
                        }

                        .client-info {
                          display: flex;
                          flex-direction: column;
                          flex: 1;

                          .client-info-header {
                            margin-bottom: 5px;
                            white-space: break-spaces;
                            font-weight: bold
                          }

                          .client-info-value {
                            word-break: break-word;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.history {
  width: 300px;

  .entry-list {
    display: flex;
    flex-direction: column;

    gap: 15px;

    .entry {
      padding-bottom: 10px;

      display: flex;
      flex-direction: column;

      gap: 5px;

      .attribute {
        display: flex;
        gap: 5px;

        .key {
          width: 30%;
        }

        .seperator {
          width: 10%;
        }

        .value {
          width: 60%;
        }
      }
    }
  }
}

.p-dialog-header {
  padding: 20px 20px 20px 20px !important;
}

.p-dialog-content {
  padding: 20px !important;
}

.p-dialog-footer {
  padding: 0 20px 20px 20px !important;
}

.p-dialog-content {
  .content-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin: 1.5px 0;
  }

  .content-column {
    display: flex;
    flex: 1;
  }

  .content-data-name {
    display: flex;
    flex: 1;
    align-items: center;

    font-size: 18px;
  }

  .content-data-value {
    display: flex;
    flex: 1;
    align-items: center;

    font-size: 18px;

    input {
      width: 100% !important;
    }
  }

  .content-divider {
    margin: 10px 0;
  }

  .content-input-field {
    width: 50% !important;
    margin: 0 !important;
  }
}

footer {
  width: 100%;
  min-height: $footerHeight;
  padding: 0 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  .left {
    width: 50%;
    display: flex;
    gap: 10px;
  }

  .right {
    width: 50%;

    display: flex;
    align-items: flex-end;
    text-align: right;
    justify-content: right;
    gap: 10px;

    .p-button-label {
      font-weight: unset !important;
    }
  }
}

.login-wrapper {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;

  .login-form-wrapper,
  .auth-header,
  .auth-footer {
    width: 350px;
    height: 450px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 25px;

    .login-form {
      width: 80%;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      h1 {
        text-align: center;
      }

      .input-field-info-text {
        margin: 15px 0;
        width: 100%;
      }

      .login-form-submit {
        .login-form-submit-btn {
          width: 100%;
        }
      }

      .login-form-sub-button-wrapper {
        display: flex;
        flex-direction: column;

        .login-form-sub-btn {
          margin-top: 15px;
          width: 100%;
        }

        .login-form-sub-btn-wrapper {
          width: 100%;
        }
      }
    }
  }

  .register-form-wrapper {
    height: 600px;
  }

  .register-confirm-form-wrapper {
    height: 250px;
  }

  .auth-header {
    width: 350px;
    height: 75px;
  }

  .auth-footer {
    width: 350px;
    height: 75px;
  }
}

.input-field {
  margin: 15px 0;

  input,
  .p-password {
    height: 40px;
    width: 100%;
    font-size: 18px;
  }
}

.btn {
  border: 0;
}

.btn,
.icon-btn,
.text-btn,
.danger-btn,
.danger-icon-btn {
  span {
    transition-duration: unset !important;
  }

  transition: none !important;
}

.spinner-component-wrapper {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: row;
  justify-content: center;

  .spinner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.hidden-column {
  display: none;
}

p-inputNumber {
  padding: 0 !important;
  border: none !important;
}

.edit-dialog {
  .p-dialog-content {
    padding: 0 !important;

    .p-tabview-nav {
      justify-content: space-between;

      li {
        width: 100%;

        a {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 20px;

    textarea {
      min-height: 101px !important;

      &:focus {
        box-shadow: none !important;
      }
    }

    .type {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .field-checkbox {
        display: flex;
        gap: 15px;
      }
    }

    input,
    .p-dropdown {
      width: 100%;
    }
  }
}

p-calendar {
  .p-calendar {
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  footer {
    .left,
    .right {
      flex-direction: column;

      .divider {
        display: none;
      }
    }
  }


  .p-panelmenu {
    .p-menuitem-text {
      display: none;
    }
  }

  .app {
    .sidebar-open {
      width: 65px;
    }

    .sidebar-closed {
      display: none;
    }

    .component-wrapper {
      .component {
        .content-wrapper {
          .content {
            .client {
              flex-direction: column !important;
            }

            .server-list-wrapper {
              .server-list {
                .server {
                  flex-direction: column;
                }
              }
            }

            .table-caption {
              flex-direction: column;

              .table-caption-btn-wrapper {
                .p-button {
                  padding: 0.75rem 0 !important;
                }
              }

              .table-caption-table-info,
              .table-caption-btn-wrapper {
                flex-direction: column;
                align-items: baseline !important;

                .p-multiselect-chip .p-multiselect-label {
                  flex-direction: column !important;
                }
              }
            }


            .content-row {
              .content-column {
                flex-direction: column;
                word-break: break-word;
              }
            }
          }
        }
      }
    }
  }

  .p-datatable-wrapper {
    border-top: 1px solid white;
  }

  .hidden-column {
    display: none !important;
  }

  app-multi-select-columns {
    width: 100%;
  }

  app-config-list,
  app-feature-flag-list {
    .content-row {
      .content-column {
        flex-direction: column;

        .content-data-name {
        }

        .content-data-value-row {
          .content-table-row {
            flex-direction: column;

            p-inputSwitch {
              display: flex;
              justify-content: center !important;
            }

            p-cellEditor {
              justify-content: center !important;
            }
          }
        }
      }
    }
  }

  td {
    .btn-wrapper {
      width: 100%;
      justify-content: center;
    }
  }

  .p-column-title {
    min-width: 50%;
    font-weight: 600;
    word-break: break-word;
  }

  p-cellEditor {
    width: 100%;

    display: flex;
    justify-content: flex-end;
    text-align: end;
    word-break: break-word;
  }

  .p-multiselect {
    width: 100% !important;
  }

  .p-paginator {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
  }

  .p-panel-content {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .content-row {
      flex-direction: column !important;
      gap: 5px;
    }
  }
}