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
↓ peach-browser-280e301a.tar.gzatlas at this save
files changed1 file
src/popup/styles/popup.css+174 −0src/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;