f490c63632
Add manifest.json, sidepanel components, and scripts. Include project assets and documentation files. Remove placeholder blank file.
177 lines
3.1 KiB
CSS
177 lines
3.1 KiB
CSS
/* Compact CSS - Overrides for smaller UI */
|
|
|
|
.container {
|
|
padding: 10px 10px 250px 10px !important;
|
|
/* Ensure bottom padding for fixed footer */
|
|
}
|
|
|
|
/* ... existing styles ... */
|
|
|
|
/* Buttons */
|
|
.action-buttons {
|
|
gap: 8px !important;
|
|
padding: 12px 16px !important;
|
|
/* Adjust padding for compact fixed footer */
|
|
background: rgba(15, 23, 42, 0.95) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border-top: 1px solid var(--border) !important;
|
|
margin: 0 !important;
|
|
/* Reset margin for fixed position */
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
position: fixed !important;
|
|
z-index: 100 !important;
|
|
}
|
|
|
|
.header {
|
|
padding: 12px 10px !important;
|
|
margin-bottom: 10px !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
.title {
|
|
font-size: 18px !important;
|
|
margin-bottom: 2px !important;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.section {
|
|
padding: 10px !important;
|
|
margin-bottom: 8px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 13px !important;
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
/* Grids */
|
|
.style-grid,
|
|
.ratio-grid,
|
|
.mood-grid,
|
|
.position-grid,
|
|
.font-type-grid {
|
|
gap: 6px !important;
|
|
}
|
|
|
|
.style-card {
|
|
padding: 8px 6px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.style-icon {
|
|
font-size: 24px !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
.style-name {
|
|
font-size: 12px !important;
|
|
margin-bottom: 2px !important;
|
|
}
|
|
|
|
.style-desc {
|
|
font-size: 9px !important;
|
|
}
|
|
|
|
.ratio-btn,
|
|
.position-btn,
|
|
.font-type-btn,
|
|
.image-position-btn {
|
|
padding: 8px 4px !important;
|
|
gap: 4px !important;
|
|
}
|
|
|
|
.ratio-btn span,
|
|
.position-btn span,
|
|
.font-type-btn span,
|
|
.image-position-btn span {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.mood-btn {
|
|
padding: 6px 4px !important;
|
|
}
|
|
|
|
.mood-icon {
|
|
font-size: 20px !important;
|
|
margin-bottom: 2px !important;
|
|
}
|
|
|
|
.mood-name {
|
|
font-size: 9px !important;
|
|
}
|
|
|
|
/* Forms */
|
|
.form-group {
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 12px !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
.text-input,
|
|
.custom-prompt {
|
|
padding: 8px 10px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.headline-textarea {
|
|
min-height: 40px !important;
|
|
}
|
|
|
|
.custom-prompt {
|
|
min-height: 60px !important;
|
|
}
|
|
|
|
.checkbox-style {
|
|
padding: 6px 8px !important;
|
|
gap: 6px !important;
|
|
}
|
|
|
|
.checkbox-style span {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.checkbox-style input[type="checkbox"] {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
}
|
|
|
|
.color-picker-wrapper {
|
|
padding: 6px 8px !important;
|
|
gap: 8px !important;
|
|
}
|
|
|
|
.color-picker-wrapper input[type="color"] {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
}
|
|
|
|
.color-label {
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* Buttons */
|
|
.action-buttons {
|
|
gap: 8px !important;
|
|
margin-top: 10px !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 14px !important;
|
|
font-size: 13px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.status-message {
|
|
padding: 8px 12px !important;
|
|
font-size: 12px !important;
|
|
} |