280e301ab2db

add category nav and feedback form CSS rules to popup.css

time
2026-04-26 13:31 UTC · 6 months ago
machine
koh2
parent
73260e9b28a1
1 file src/popup/styles/popup.css+174 −0
src/popup/styles/popup.css+174 −0
@@ -1713,6 +1713,180 @@17131713   color: var(--peach-t2);17141714 }17151715 1716+/* ── Settings home navigation ──────────────────────────────────────────── */1717+.peach-settings-nav-label {1718+  margin: 0 0 2px;1719+  padding: 12px 16px 4px;1720+  font-family: "IBM Plex Mono", monospace;1721+  font-size: 8px;1722+  text-transform: uppercase;1723+  letter-spacing: 0.18em;1724+  color: var(--peach-t2);1725+}1726+1727+.peach-settings-cat-row {1728+  display: flex;1729+  align-items: center;1730+  gap: 10px;1731+  width: 100%;1732+  padding: 9px 16px;1733+  background: none;1734+  border: none;1735+  border-bottom: 1px solid var(--peach-t3);1736+  cursor: pointer;1737+  text-align: left;1738+  color: inherit;1739+  transition: background var(--peach-dur-80) ease;1740+}1741+.peach-settings-cat-row:hover {1742+  background: var(--peach-t3);1743+}1744+.peach-settings-cat-row:last-child {1745+  border-bottom: none;1746+}1747+1748+.peach-settings-cat-icon {1749+  width: 28px;1750+  height: 28px;1751+  border-radius: 7px;1752+  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1753+  color: var(--peach-accent);1754+  display: flex;1755+  align-items: center;1756+  justify-content: center;1757+  flex-shrink: 0;1758+}1759+1760+.peach-settings-cat-content {1761+  flex: 1;1762+  display: flex;1763+  flex-direction: column;1764+  gap: 2px;1765+  min-width: 0;1766+}1767+1768+.peach-settings-cat-name {1769+  font-size: 13px;1770+  font-weight: 450;1771+  color: var(--peach-t0);1772+  line-height: 1.2;1773+}1774+1775+.peach-settings-cat-desc {1776+  font-size: 10px;1777+  color: var(--peach-t2);1778+  line-height: 1.3;1779+  white-space: nowrap;1780+  overflow: hidden;1781+  text-overflow: ellipsis;1782+}1783+1784+.peach-settings-cat-chevron {1785+  color: var(--peach-t2);1786+  flex-shrink: 0;1787+  opacity: 0.5;1788+}1789+1790+/* ── Settings sub-view section labels ──────────────────────────────────── */1791+.peach-settings-sub-label {1792+  margin: 12px 0 4px;1793+  font-family: "IBM Plex Mono", monospace;1794+  font-size: 8px;1795+  text-transform: uppercase;1796+  letter-spacing: 0.18em;1797+  color: var(--peach-t2);1798+}1799+.peach-settings-sub-label:first-child {1800+  margin-top: 4px;1801+}1802+1803+/* ── Feedback form ──────────────────────────────────────────────────────── */1804+.peach-feedback-intro {1805+  margin: 4px 0 14px;1806+  font-size: 12px;1807+  line-height: 1.55;1808+  color: var(--peach-t1);1809+}1810+1811+.peach-feedback-chips {1812+  display: flex;1813+  flex-wrap: wrap;1814+  gap: 6px;1815+  margin-bottom: 14px;1816+}1817+1818+.peach-feedback-chip {1819+  padding: 4px 10px;1820+  border-radius: 999px;1821+  border: 1px solid var(--peach-t3);1822+  background: none;1823+  color: var(--peach-t2);1824+  font-size: 11px;1825+  font-family: var(--font-ui);1826+  cursor: pointer;1827+  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1828+    background var(--peach-dur-80) ease;1829+}1830+.peach-feedback-chip:hover {1831+  border-color: var(--peach-t2);1832+  color: var(--peach-t1);1833+}1834+.peach-feedback-chip.is-active {1835+  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);1836+  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1837+  color: var(--peach-accent);1838+}1839+1840+.peach-feedback-textarea {1841+  width: 100%;1842+  box-sizing: border-box;1843+  background: var(--peach-t3);1844+  border: 1px solid var(--peach-t3);1845+  border-radius: 6px;1846+  color: var(--peach-t0);1847+  font-size: 12px;1848+  font-family: var(--font-ui);1849+  line-height: 1.5;1850+  padding: 8px 10px;1851+  resize: none;1852+  outline: none;1853+  transition: border-color var(--peach-dur-150) ease;1854+}1855+.peach-feedback-textarea:focus {1856+  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1857+}1858+.peach-feedback-textarea::placeholder {1859+  color: var(--peach-t2);1860+}1861+1862+.peach-feedback-meta {1863+  margin: 6px 0 0;1864+  font-size: 10px;1865+  color: var(--peach-t2);1866+  font-family: "IBM Plex Mono", monospace;1867+}1868+1869+.peach-feedback-result {1870+  margin: 8px 0 0;1871+  font-size: 11px;1872+  font-family: "IBM Plex Mono", monospace;1873+}1874+.peach-feedback-result--ok { color: var(--peach-sync-ok); }1875+.peach-feedback-result--err { color: var(--peach-breach); }1876+1877+.peach-feedback-submit {1878+  width: 100%;1879+  margin-top: 12px;1880+  justify-content: center;1881+}1882+1883+.peach-feedback-anon {1884+  margin: 8px 0 0;1885+  font-size: 10px;1886+  color: var(--peach-t2);1887+  text-align: center;1888+}1889+17161890 .peach-passkey-badge {17171891   margin-left: 8px;17181892   font-size: 10px;

view file