popup.css

:root {
    --text-color-light: #000;
    --bg-color-light: #fff;
    --text-color-dark: #fff;
    --bg-color-dark: #333;
    --delete-button-light: #f44336;
    --generate-button-dark: #d65687;
    --delete-button-dark: #e53935;
    --generate-button-light: #D1C4E9;  /* Light Purple */
  }
  
  .headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .generateButtonContainer {
    display: flex;
    margin: 10px;
    justify-content: space-between;
    align-items: center;
  }

  body {
    min-width: 500px; 
    max-width: 500px;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
    transition: background-color 0.3s, color 0.3s;
  }

  #container {
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  #optionsContainer {
    display: flex;
    flex-direction: column;
  }

  .generatedPassword{
    padding: 10px;
    font-size: 20px;
    margin: 10px;
    display: grid;
    grid-template-columns: 8fr 2fr;
    align-items: center;
  }
  
  .generatedPasswordText {
    word-wrap: break-word;  /* Older browsers */
    overflow-wrap: break-word;
    max-width: 400px;
  }

  .historyHeaderRow{
    padding: 5px;
    font-size: 15px;
    margin: 5px;
    display: grid;
    grid-template-columns: 6fr 4fr;
    align-items: center;
  }
  
  .historyPasswordText {
    word-wrap: break-word;  /* Older browsers */
    overflow-wrap: break-word;
    max-width: 350px;
  }
  
  #firstRow,
  #secondRow,
  #thirdRow {
    display: flex;
    justify-content: start;
    padding: 10px;
  }

  button {
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
    border-radius: 12px; /* Rounded corners */
  }

  .rowActionButton {
    cursor: pointer;
    padding: 5px;
    margin: 5px;
    width: auto;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
  }

  #toggleTheme {
    margin-top: 0px;
    padding: 0px;
  }
  
  /* Light theme button colors */
  body[data-theme="light"] #generate {
    background-color: var(--generate-button-light);
  }
  
  body[data-theme="light"] #deleteHistory {
    background-color: var(--delete-button-light);
  }
  
  /* Dark theme button colors */
  body[data-theme="dark"] #generate {
    background-color: var(--generate-button-dark);
  }
  
  body[data-theme="dark"] #deleteHistory {
    background-color: var(--delete-button-dark);
  }

  .glow-on-hover {
    width: 200px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    margin: 0px 10px 0px 10px;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
  width: 150px;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
  
  background-color: white;
}

input[type=checkbox] + label:active:before {
  transform: scale(0);
}

input[type=checkbox]:checked + label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}
input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

.history{
  padding: 2px;
  margin: 5px;
  display: grid;
  grid-template-columns: 8fr 1fr 1fr;
  align-items: center;
}

.historyHeader{
  padding: 2px;
  margin: 5px;
}