danvics/docling-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Update frontend with some style

Browse source
This commit is contained in:
pjmalandrino 2025-05-22 14:49:30 +02:00
parent dd44027776
commit c8fbe70232
2 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -13,12 +13,12 @@
<!-- Settings Panel -->
<div class="settings-panel">
<div class="settings-row">
<div class="form-group">
<label for="pdf_file">PDF Document</label>
<div class="form-group pdf-group">
<div><label for="pdf_file">PDF Document</label><div id="pdf-load-status"></div></div>
<select id="pdf_file" name="pdf_file">
<option value="">Select a PDF file...</option>
</select>
<div id="pdf-load-status"></div>
</div>
<div class="form-group">
<label for="page_num">Page Number</label>

40
static/styles.css
View file

@ -96,6 +96,31 @@ p {
display: flex;
flex-direction: column;
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 {
@ -122,6 +147,14 @@ select:focus, input:focus {
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 */
input[type="checkbox"] {
width: 16px;
@ -444,13 +477,6 @@ button:disabled {
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 */
.hidden {
display: none !important;