pdf / static /css /responsive.css
github-actions[bot]
Deploy from GitHub Actions
dea2c47
@media (max-width: 1200px) {
.container {
width: calc(100vw - 24px);
}
.card-body {
padding: 24px;
}
}
@media (max-width: 992px) {
.container {
width: calc(100vw - 18px);
margin-top: 14px;
margin-bottom: 22px;
}
.card-header {
padding: 24px 22px 22px;
}
.card-body {
padding: 20px;
}
.nav-tabs {
gap: 8px;
padding: 10px;
border-radius: 18px;
}
.nav-tabs .nav-link {
font-size: 13px;
padding: 10px 12px;
}
.split-landscape-layout,
.pdf-to-images-landscape-layout,
.pdf-compress-landscape-layout {
grid-template-columns: 1fr;
gap: 16px;
}
.feature-section + .feature-section {
margin-top: 16px;
}
.panel-section-title {
margin-bottom: 12px;
}
.split-left-panel .file-list,
.pdf-to-images-left-panel .file-list,
.pdf-compress-left-panel .file-list {
max-height: 240px;
}
.pdf-to-images-options-grid {
grid-template-columns: 1fr;
gap: 14px;
}
}
@media (max-width: 576px) {
.container {
width: calc(100vw - 10px);
margin-top: 8px;
margin-bottom: 16px;
}
.card {
border-radius: 22px;
}
.card-header {
padding: 20px 16px 18px;
}
.hero-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.1em;
}
.card-header h2 {
font-size: 1.7rem;
gap: 10px;
}
.hero-subtitle {
font-size: 0.9rem;
}
.card-body {
padding: 14px;
}
.instructions,
.split-options,
.compress-options,
.convert-options,
.download-container,
.loading,
.file-drop-area,
.upload-placeholder {
border-radius: 16px;
}
.feature-section + .feature-section {
margin-top: 14px;
}
.panel-section-title {
font-size: 0.93rem;
margin-bottom: 10px;
}
.file-drop-area,
.upload-placeholder {
padding: 24px 16px;
}
.feature-action-section .btn-merge {
min-height: 48px;
padding: 12px 18px;
}
.file-drop-area i,
.upload-placeholder i {
width: 62px;
height: 62px;
border-radius: 18px;
}
.nav-tabs {
gap: 6px;
padding: 8px;
margin-bottom: 1rem !important;
}
.nav-tabs .nav-link {
padding: 9px 11px;
border-radius: 13px;
}
.batch-action-bar {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.batch-action-buttons {
width: 100%;
flex-wrap: wrap;
}
}