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

136 lines
2.3 KiB
CSS
Raw Normal View History

2024-06-03 21:21:41 +00:00
/* 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;
2024-06-05 08:55:48 +00:00
padding: 10px 20px;
2024-06-03 21:21:41 +00:00
border: none;
border-radius: 4px;
cursor: pointer;
2024-06-05 08:55:48 +00:00
font-size: 14px;
font-weight: bold;
text-align: center;
margin-top: 10px;
2024-06-03 21:21:41 +00:00
}
2024-06-05 08:55:48 +00:00
#openModal:hover {
background-color: #0056b3;
}