image-rights-html-generator/css/style.css

/* Modal Hintergrund */
#modal {
  display: none;
}

#modal.hidden {
  display: none;
}

#modal:not(.hidden) {
  display: flex;
}

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200000;
  justify-content: center;
  align-items: center;
}

/* Modal Inhalt */
#modal .modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  overflow-y: auto;
  max-height: 90vh;
}

#modal.dark .modal-content {
  background-color: #333;
  color: #fff;
}

/* Formular Elemente */
#metaDataForm label {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  color: #333;
}

#metaDataForm input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#metaDataForm input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 2px rgba(0, 123, 255, 0.25);
}

#metaDataForm .btn-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

#metaDataForm button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#metaDataForm button[type="submit"] {
  background-color: #007bff;
  color: #fff;
}

#metaDataForm button[type="button"] {
  background-color: #6c757d;
  color: #fff;
  margin-left: 10px;
}

/* Dunkelmodus */
#modal.dark #metaDataForm label {
  color: #ddd;
}

#modal.dark #metaDataForm input {
  background-color: #444;
  color: #ddd;
  border-color: #555;
}

#modal.dark #metaDataForm input:focus {
  border-color: #80bdff;
  box-shadow: 0 0 2px rgba(128, 189, 255, 0.25);
}

#modal.dark #metaDataForm button[type="submit"] {
  background-color: #007bff;
}

#modal.dark #metaDataForm button[type="button"] {
  background-color: #6c757d;
}
#modal .bg-white {
  background-color: #fff;
  padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}
#openModal {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

#openModal:hover {
  background-color: #0056b3;
}