Update frontend with some style
This commit is contained in:
parent
dd44027776
commit
c8fbe70232
2 changed files with 36 additions and 10 deletions
|
|
@ -13,12 +13,12 @@
|
||||||
<!-- Settings Panel -->
|
<!-- Settings Panel -->
|
||||||
<div class="settings-panel">
|
<div class="settings-panel">
|
||||||
<div class="settings-row">
|
<div class="settings-row">
|
||||||
<div class="form-group">
|
<div class="form-group pdf-group">
|
||||||
<label for="pdf_file">PDF Document</label>
|
<div><label for="pdf_file">PDF Document</label><div id="pdf-load-status"></div></div>
|
||||||
<select id="pdf_file" name="pdf_file">
|
<select id="pdf_file" name="pdf_file">
|
||||||
<option value="">Select a PDF file...</option>
|
<option value="">Select a PDF file...</option>
|
||||||
</select>
|
</select>
|
||||||
<div id="pdf-load-status"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="page_num">Page Number</label>
|
<label for="page_num">Page Number</label>
|
||||||
|
|
|
||||||
|
|
@ -96,6 +96,31 @@ p {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-xs);
|
gap: var(--spacing-xs);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Specific styling for PDF form group */
|
||||||
|
.pdf-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS for aligning PDF Document label and status on same line */
|
||||||
|
.pdf-group > div:first-child {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
align-items: center !important;
|
||||||
|
margin-bottom: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-group > div:first-child label {
|
||||||
|
margin: 0 !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
color: var(--primary-dark) !important;
|
||||||
|
font-size: 0.875rem !important;
|
||||||
|
text-transform: uppercase !important;
|
||||||
|
letter-spacing: 0.025em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
|
@ -122,6 +147,14 @@ select:focus, input:focus {
|
||||||
box-shadow: 0 0 0 3px rgba(97, 135, 148, 0.1);
|
box-shadow: 0 0 0 3px rgba(97, 135, 148, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* PDF Load Status - positioned below the select but within the form group */
|
||||||
|
#pdf-load-status {
|
||||||
|
margin: 0 !important;
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
color: #27ae60 !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Checkbox styling */
|
/* Checkbox styling */
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
|
@ -444,13 +477,6 @@ button:disabled {
|
||||||
background: var(--text-dark);
|
background: var(--text-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Status indicators for PDF loading */
|
|
||||||
#pdf-load-status {
|
|
||||||
margin-top: var(--spacing-xs);
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Utility classes */
|
/* Utility classes */
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue