sh_discord_bot/kdb-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;
    justify-content: center;
  }

  .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 {
    height: 100%;
  }

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

  .component-wrapper {
    width: 100%;

    .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%;
            }
          }

          .content-row {
            display: flex;
            flex-direction: row;
            flex: 1;
            margin: 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;
          }

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

          p-panel {
            margin: 5px 0;
          }

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

          .content-input-field {
            width: 50% !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-text {
              flex: 1;
              font-weight: 400;
            }

            .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;

                .logo {

                  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;
                  }

                  .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 {
                          display: flex;
                          flex-direction: column;
                          margin-left: 2%;

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

                          .client-info-value {
                            white-space: nowrap;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.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;
  }

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

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

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

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

  .left {
    width: 50%;

    display: flex;

    // .frontend-version {
    // }

    .version-divider {
      margin: 0 5px;
    }

    // .backend-version {
    // }
  }

  .right {
    width: 50%;
    text-align: right;
    .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;
}

.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;
  }
}