feat: add extension implementation and docs

Add manifest.json, sidepanel components, and scripts. Include project assets and documentation files. Remove placeholder blank file.
2026-01-06 08:49:28 +07:00
parent 87dd2931fa
commit f490c63632
23 changed files with 4586 additions and 0 deletions
--- a/sidepanel/panel-compact.css
+++ b/sidepanel/panel-compact.css
@@ -0,0 +1,177 @@
+/* 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;
+}