style: update background colors and improve layout for update sections

This commit is contained in:
Manuel Weiser 2025-02-22 20:25:00 +01:00
parent 989076e794
commit 074bfb658d
2 changed files with 59 additions and 61 deletions

View File

@ -1050,7 +1050,7 @@ input[type="submit"]:disabled,
border: 1px solid #a5d6a7; border: 1px solid #a5d6a7;
} }
.update-form { .update-form {
background: var(--primary-color); background: var(--background-green);
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@ -1086,10 +1086,66 @@ input[type="submit"]:disabled,
.warning { .warning {
background-color: var(--primary-color); background-color: var(--primary-color);
border: 1px solid #ffe0b2; border: 1px solid #ffe0b2;
color: white;
padding: 15px;
margin: 20px auto; margin: 20px auto;
border-radius: 4px; border-radius: 4px;
max-width: 600px; max-width: 600px;
text-align: center; text-align: center;
color: #e65100;
padding: 15px;
}
.update-options {
display: flex;
gap: 2rem;
margin: 2rem 0;
}
.update-section {
flex: 1;
background: var(--background-green);
padding: 1.5rem;
border-radius: 8px;
}
.update-section h2 {
margin-top: 0;
color: #333;
}
.update-section p {
color: #666;
margin-bottom: 1rem;
}
.progress-container {
margin: 20px 0;
background: #f0f0f0;
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 20px;
background: #4CAF50;
transition: width 0.3s ease-in-out;
text-align: center;
line-height: 20px;
color: white;
}
.status {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
display: none;
}
.status.success {
background: #e8f5e9;
color: #2e7d32;
}
.status.error {
background: #ffebee;
color: #c62828;
}
.warning {
background: #fff3e0;
color: #e65100;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
} }

View File

@ -86,64 +86,6 @@
<div class="status"></div> <div class="status"></div>
</div> </div>
<style>
.update-options {
display: flex;
gap: 2rem;
margin: 2rem 0;
}
.update-section {
flex: 1;
background: #f5f5f5;
padding: 1.5rem;
border-radius: 8px;
}
.update-section h2 {
margin-top: 0;
color: #333;
}
.update-section p {
color: #666;
margin-bottom: 1rem;
}
.progress-container {
margin: 20px 0;
background: #f0f0f0;
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 20px;
background: #4CAF50;
transition: width 0.3s ease-in-out;
text-align: center;
line-height: 20px;
color: white;
}
.status {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
display: none;
}
.status.success {
background: #e8f5e9;
color: #2e7d32;
}
.status.error {
background: #ffebee;
color: #c62828;
}
.warning {
background: #fff3e0;
color: #e65100;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
}
</style>
<script> <script>
// Hide status indicators during update // Hide status indicators during update
const statusContainer = document.querySelector('.status-container'); const statusContainer = document.querySelector('.status-container');