djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat(docker): add docker configuration files and update styles

Browse Source 
refactor: convert script tags to link tags for stylesheets in HTML files
fix: update PDF download to use Uint8Array for blob creation
style: reformat CSS file for better readability and organization
This commit is contained in:
abdullahalam123
2025-10-12 18:23:13 +05:30
parent 5e72d7ca2d
commit 3f90e5ed8d
38 changed files with 269 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/css/styles.css
View File

@@ -65,16 +65,16 @@ input[type="file"]::file-selector-button {
}
#tool-interface {
color: #39A0ED;
color: #39A0ED;
}
.page-thumbnail,
#file-list > li {
cursor: grab;
#file-list>li {
cursor: grab;
}
.sortable-chosen {
cursor: grabbing;
cursor: grabbing;
}
.compare-viewer-wrapper.overlay-mode {
@@ -92,7 +92,7 @@ input[type="file"]::file-selector-button {
position: absolute;
top: 0;
left: 0;
width: 100%;
width: 100%;
height: auto;
}
@@ -134,40 +134,52 @@ footer a {
left: 0;
width: 100%;
/* height: 30px; */
background-color: orange; /* Yellow marker color */
background-color: orange;
/* Yellow marker color */
z-index: -1;
transform: skew(-20deg);
}
.pill {
background-color: #374151; /* bg-gray-700 */
color: #d1d5db; /* text-gray-300 */
background-color: #374151;
/* bg-gray-700 */
color: #d1d5db;
/* text-gray-300 */
padding: 8px 16px;
border-radius: 9999px; /* rounded-full */
border-radius: 9999px;
/* rounded-full */
font-size: 14px;
font-weight: 500;
}
.cta-button {
background-color: #4f46e5; /* indigo-600 */
background-color: #4f46e5;
/* indigo-600 */
color: white;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px; /* rounded-lg */
border-radius: 8px;
/* rounded-lg */
transition: background-color 0.2s ease-in-out;
}
.cta-button:hover {
background-color: #4338ca; /* indigo-700 */
background-color: #4338ca;
/* indigo-700 */
}
.marker-text {
background-color: rgba(255, 255, 0, 0.5); /* Yellow marker color */
background-color: rgba(255, 255, 0, 0.5);
/* Yellow marker color */
padding: 0 5px;
}
.feature-card {
background-color: #1f2937; /* bg-gray-800 */
background-color: #1f2937;
/* bg-gray-800 */
padding: 24px;
border-radius: 8px; /* rounded-lg */
border-radius: 8px;
/* rounded-lg */
text-align: center;
}
@@ -197,33 +209,44 @@ footer a {
.section-divider {
height: 1px;
background: linear-gradient(to right, transparent, #4f46e5, transparent); /* Fades from transparent to indigo and back */
margin: 2rem auto; /* my-16 */
max-width: 42rem; /* max-w-xl */
background: linear-gradient(to right, transparent, #4f46e5, transparent);
/* Fades from transparent to indigo and back */
margin: 2rem auto;
/* my-16 */
max-width: 42rem;
/* max-w-xl */
opacity: 0.5;
}
.btn-gradient {
display: inline-block;
padding: 0.75rem 2rem; /* py-3 px-8 */
border-radius: 0.5rem; /* rounded-lg */
background-image: linear-gradient(to bottom, #6366f1, #4f46e5); /* from-indigo-500 to-indigo-600 */
color: #ffffff; /* text-white */
font-weight: 600; /* font-semibold */
padding: 0.75rem 2rem;
/* py-3 px-8 */
border-radius: 0.5rem;
/* rounded-lg */
background-image: linear-gradient(to bottom, #6366f1, #4f46e5);
/* from-indigo-500 to-indigo-600 */
color: #ffffff;
/* text-white */
font-weight: 600;
/* font-semibold */
transition-property: all;
transition-duration: 200ms;
transform: translateY(0);
}
.btn-gradient:hover {
box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3), 0 4px 6px -4px rgba(79, 70, 229, 0.3); /* hover:shadow-xl hover:shadow-indigo-500/30 */
transform: translateY(-0.25rem); /* hover:-translate-y-1 */
box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3), 0 4px 6px -4px rgba(79, 70, 229, 0.3);
/* hover:shadow-xl hover:shadow-indigo-500/30 */
transform: translateY(-0.25rem);
/* hover:-translate-y-1 */
}
.btn-gradient:focus {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px #111827, 0 0 0 4px #818cf8; /* focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 */
box-shadow: 0 0 0 2px #111827, 0 0 0 4px #818cf8;
/* focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 */
}
.btn-gradient:disabled {
@@ -234,10 +257,14 @@ footer a {
}
.solid-spinner {
width: 64px; /* w-16 */
height: 64px; /* h-16 */
border: 5px solid #374151; /* border-gray-700 */
border-bottom-color: #4f46e5; /* border-indigo-600 */
width: 64px;
/* w-16 */
height: 64px;
/* h-16 */
border: 5px solid #374151;
/* border-gray-700 */
border-bottom-color: #4f46e5;
/* border-indigo-600 */
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
@@ -248,6 +275,7 @@ footer a {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@@ -256,7 +284,8 @@ footer a {
#signature-ghost {
position: absolute;
z-index: 100;
pointer-events: none; /* Allows clicks to pass through to the canvas */
pointer-events: none;
/* Allows clicks to pass through to the canvas */
opacity: 0.6;
background-size: contain;
background-repeat: no-repeat;
@@ -264,7 +293,8 @@ footer a {
/* Highlight for selected signature in the saved list */
.saved-signature.selected {
border-color: #4f46e5; /* indigo-600 */
border-color: #4f46e5;
/* indigo-600 */
box-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
}
@@ -273,13 +303,25 @@ footer a {
cursor: move;
}
#canvas-sign.resize-ns { cursor: ns-resize; }
#canvas-sign.resize-ew { cursor: ew-resize; }
#canvas-sign.resize-nesw { cursor: nesw-resize; }
#canvas-sign.resize-nwse { cursor: nwse-resize; }
#canvas-sign.resize-ns {
cursor: ns-resize;
}
#canvas-sign.resize-ew {
cursor: ew-resize;
}
#canvas-sign.resize-nesw {
cursor: nesw-resize;
}
#canvas-sign.resize-nwse {
cursor: nwse-resize;
}
.faq-item.open .faq-question {
color: #818cf8; /* indigo-400 */
color: #818cf8;
/* indigo-400 */
}
.faq-item.open .faq-icon {
@@ -288,30 +330,39 @@ footer a {
/* Testimonial Card Styles */
.testimonial-card {
background-color: #1f2937; /* bg-gray-800 */
background-color: #1f2937;
/* bg-gray-800 */
padding: 24px;
border-radius: 0.75rem; /* rounded-xl */
border: 1px solid #374151; /* border-gray-700 */
border-radius: 0.75rem;
/* rounded-xl */
border: 1px solid #374151;
/* border-gray-700 */
display: flex;
flex-direction: column;
}
.pill {
background-color: #374151; /* bg-gray-700 */
color: #d1d5db; /* text-gray-300 */
background-color: #374151;
/* bg-gray-700 */
color: #d1d5db;
/* text-gray-300 */
padding: 8px 16px;
border-radius: 9999px; /* rounded-full */
border-radius: 9999px;
/* rounded-full */
font-size: 14px;
font-weight: 500;
}
.pill {
background-color: #374151; /* bg-gray-700 */
color: #d1d5db; /* text-gray-300 */
background-color: #374151;
/* bg-gray-700 */
color: #d1d5db;
/* text-gray-300 */
/* Smaller padding and font size by default for mobile */
padding: 6px 12px;
font-size: 12px;
border-radius: 9999px; /* rounded-full */
border-radius: 9999px;
/* rounded-full */
font-weight: 500;
}
@@ -333,9 +384,11 @@ footer a {
overflow-x: auto;
white-space: nowrap;
}
.form-field-group {
display: inline-block;
width: 90%; /* Adjust as needed */
width: 90%;
/* Adjust as needed */
margin-right: 1rem;
}
}
@@ -345,4 +398,61 @@ footer a {
gap: 1rem;
padding: 1rem;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.legal-content h2 {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: white;
margin-top: 2rem;
margin-bottom: 1rem;
}
.legal-content h3 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
color: rgb(129 140 248);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.legal-content p {
margin-bottom: 1rem;
line-height: 1.625;
color: rgb(156 163 175);
}
.legal-content ul {
list-style-type: disc;
list-style-position: inside;
margin-bottom: 1rem;
padding-left: 1rem;
color: rgb(156 163 175);
}
.legal-content a {
color: rgb(129 140 248);
text-decoration: underline;
}
.legal-content a:hover {
color: rgb(165 180 252);
}
details>summary {
list-style: none;
}
details>summary::-webkit-details-marker {
display: none;
}
details>summary .icon {
transition: transform 0.2s ease-in-out;
}
details[open]>summary .icon {
transform: rotate(45deg);
}