feat: add firefox extension

2026-05-19 02:46:51 +02:00
parent 237b5f3004
commit bcee65cbad
7 changed files with 510 additions and 0 deletions
--- a/extensions/mal-firefox/popup.css
+++ b/extensions/mal-firefox/popup.css
@@ -0,0 +1,229 @@
+:root {
+  color-scheme: light dark;
+  --bg: #0b0f1a;
+  --card: rgba(255, 255, 255, 0.06);
+  --border: rgba(255, 255, 255, 0.12);
+  --text: rgba(255, 255, 255, 0.92);
+  --muted: rgba(255, 255, 255, 0.65);
+  --accent: #6ea8fe;
+  --danger: #ff6b6b;
+  --ok: #4ade80;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #f6f7fb;
+    --card: rgba(0, 0, 0, 0.03);
+    --border: rgba(0, 0, 0, 0.1);
+    --text: rgba(0, 0, 0, 0.88);
+    --muted: rgba(0, 0, 0, 0.6);
+    --accent: #1f6feb;
+    --danger: #b42318;
+  }
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--text);
+  font:
+    14px/1.4 system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    sans-serif;
+}
+
+body {
+  width: 380px;
+  min-width: 380px;
+}
+
+#app {
+  padding: 10px;
+}
+
+.panel {
+  background: transparent;
+  border-radius: 0;
+  padding: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.brandIcon {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+}
+
+.title {
+  font-weight: 650;
+  letter-spacing: 0.2px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.link {
+  background: transparent;
+  color: var(--accent);
+  border: 0;
+  padding: 6px 0;
+  cursor: pointer;
+}
+
+.divider {
+  height: 1px;
+  background: transparent;
+  opacity: 0.9;
+}
+
+.subtitle {
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.label {
+  display: grid;
+  gap: 4px;
+  color: var(--muted);
+}
+
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 9px 10px;
+  border-radius: 0;
+  border: 1px solid var(--border);
+  background: rgba(0, 0, 0, 0.15);
+  color: var(--text);
+  outline: none;
+}
+
+.input:focus {
+  border: 1px solid var(--border);
+  outline: none;
+}
+
+.btn {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 0;
+  border: 0;
+  background: rgba(110, 168, 254, 0.18);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.btn.danger {
+  background: rgba(255, 107, 107, 0.18);
+}
+
+.error {
+  color: var(--danger);
+}
+
+.body {
+  color: var(--muted);
+}
+
+.login {
+  display: grid;
+  gap: 8px;
+}
+
+.statusRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+}
+
+.statusDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--ok);
+}
+
+.statusText {
+  font-size: 12px;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.list {
+  display: grid;
+  gap: 8px;
+}
+
+.item {
+  display: grid;
+  grid-template-columns: 44px 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 8px;
+  border-radius: 10px;
+  border: 0;
+}
+
+.thumb {
+  width: 44px;
+  height: 62px;
+  border-radius: 8px;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.meta {
+  display: grid;
+  gap: 4px;
+}
+
+.metaTitle {
+  font-weight: 650;
+}
+
+.metaSub {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.select {
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 0;
+  background: rgba(0, 0, 0, 0.15);
+  color: var(--text);
+  flex: 1;
+}
+
+.mini {
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 0;
+  background: rgba(110, 168, 254, 0.18);
+  color: var(--text);
+  cursor: pointer;
+}