example-blind-auction/frontend/assets/style.scss

@import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";
//@import 'material-icons/iconfont/material-icons.css';

// // Finally load bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

$color-mode-type: data;

@include color-mode(dark) {
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
}

body {
  background-image: url('../assets/bg.jpg');
  background-size: cover;
  background-position: center;
}

.btn-xs {
  padding: 1px 5px !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  border-radius: 6px !important;
}

.connect-btn {
  background-color: #ff6600;
  margin-bottom: 10px;
  border: none;
}

.small-title {
  font-size: 18px; 
  font-weight: bold
}

.card {
  background-color: #453f7954; 
  width: 300px; 
  height: 350px; 
  padding: 10px;
  border-radius: 20px; 
  display: flex; 
  flex-direction: column;  
  border: 1px rgba(103, 103, 107, 0.3) solid;
  backdrop-filter: blur(7px);
  filter: drop-shadow(1px 0 1px black);  

  position: relative;
}


.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 10px;
  margin-top: 10px;
}

:root {
  --custom-select: #b6b7bd;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  min-height: 40px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #6c7fe7;
}

.home__cta {
  width: 200px;
  padding: 10px;
  font-size: 16px;
  outline: none;
  border: none;
  cursor: pointer;
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  margin: 0;
}

.navbar {
  width: 100%;
  height: 10vh;
  background-color: #f0ebe3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 30px;
}
.navbar .header {
  width: 70%;
}
.bellIcon {
  height: 30px;
  cursor: pointer;
}
.editIcon {
  height: 35px;
  cursor: pointer;
}

.editIcon.colored-1 {
  filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(-10deg) brightness(100%) contrast(120%);
}

.editIcon.colored-2 {
  filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(-50deg) brightness(100%) contrast(120%);
}

.home__form {
  width: 100%;
  height: 80vh;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.home__input,
.addProduct__form input,
.bidProduct__form input {
  width: 70%;
  padding: 10px;
  border-radius: 5px;
  margin: 15px 0;
  outline: none;
  border: 1px solid #576f72;
}
.home__cta {
  width: 200px;
  padding: 10px;
  font-size: 16px;
  outline: none;
  border: none;
  cursor: pointer;
}

table {
  width: 95%;
  border: 1px solid #576f72;
  margin: 0 auto;
  border-collapse: collapse;
}
tr,
td,
th {
  border: 1px solid #576f72;
  text-align: center;
  padding: 5px;
}
.table__container {
  display: flex;

  min-width: 900px;
  align-items: center;
  flex-direction: column;
}
.products__cta {
  width: 70%;
  background-color: rgb(67, 143, 67);
  padding: 15px;
  color: #fff;
  margin-bottom: 35px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
}
.addproduct__container,
.bidproduct__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.addproduct__container h2,
.bidproduct__container h2 {
  margin-bottom: 30px;
}
.addProduct__form,
.bidProduct__form {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
}
.addProduct__cta {
    width: 200px;
    padding: 10px;
    margin: 10px;
    font-size: 16px;
    outline: none;
    border: none;
    color: #fff;
    background-color: rgb(67, 143, 67);
    cursor: pointer;
}
.bidProduct__cta {
  width: 200px;
  padding: 10px;
  font-size: 16px;
  outline: none;
  border: none;
  color: #fff;
  background-color: rgb(67, 143, 67);
  cursor: pointer;
}
.bidProduct__name {
  margin-bottom: 20px;
}

.frame {
  background: #fff;
  height: 600px;
  border: 1px solid #ddd;
  padding: 20px;
  /*margin-bottom: 2em; !* Provides consistent space between frames *!*/
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: scroll;
  /* Now these will be relative to #app's max-width */
  width: 100%; /* Takes the full width of #app */
  min-height: 200px; /* Minimum height set for each frame */
  /* No need to set margin auto here as it will follow #app */
}

.big_frame {
  /*max-width: 800px; !* Adjust the width as per the design requirement *!*/
  /*min-width: 800px;*/
  margin: 20px auto; /* Centers the container within the body based on its max-width */
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.app_frame {
  /*max-width: 800px; !* Adjust the width as per the design requirement *!*/
  /*min-width: 800px;*/
  margin: 5px auto; /* Centers the container within the body based on its max-width */
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}


#loader-wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0%   {
      -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(0deg);  /* IE 9 */
      transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
  }
  100% {
      -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(360deg);  /* IE 9 */
      transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
  }
}
@keyframes spin {
  0%   {
      -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(0deg);  /* IE 9 */
      transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
  }
  100% {
      -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(360deg);  /* IE 9 */
      transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
  }
}