Full document, spreadsheet, slideshow, and diagram tooling
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Merge pull request 'fix: polish task list checkbox alignment and spacing' (#278) from fix/checkbox-alignment-polish into main

scott ac1e6822 87d2ab43

+18 -5
+18 -5
src/css/app.css
··· 1883 1883 .tiptap ul[data-type="taskList"] { 1884 1884 list-style: none; 1885 1885 padding-left: 0; 1886 + margin: 0.5em 0; 1886 1887 } 1887 1888 .tiptap ul[data-type="taskList"] li { 1888 1889 display: flex; 1889 1890 align-items: flex-start; 1890 - gap: var(--space-sm); 1891 + gap: 0.375rem; 1892 + margin-bottom: 0.15em; 1893 + } 1894 + /* Kill paragraph margins inside task items so text aligns with checkbox */ 1895 + .tiptap ul[data-type="taskList"] li > div > p { 1896 + margin: 0; 1891 1897 } 1892 1898 .tiptap ul[data-type="taskList"] li > label { 1893 - margin-top: 0.3em; 1899 + /* Center 16px checkbox within the line: (line-height * 1em - 16px) / 2 ≈ 4.4px */ 1900 + margin-top: calc((1.55em - 16px) / 2); 1894 1901 flex-shrink: 0; 1902 + line-height: 0; 1895 1903 } 1896 1904 1897 1905 /* Task list checkbox styling */ ··· 1908 1916 position: relative; 1909 1917 display: block; 1910 1918 flex-shrink: 0; 1919 + margin: 0; 1911 1920 transition: background var(--transition-fast), border-color var(--transition-fast); 1912 - vertical-align: middle; 1913 1921 } 1914 1922 .tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:hover { 1915 1923 border-color: var(--color-accent); ··· 1923 1931 content: ''; 1924 1932 position: absolute; 1925 1933 left: 3.5px; 1926 - top: 1px; 1927 - width: 5px; 1934 + top: 0.5px; 1935 + width: 5.5px; 1928 1936 height: 9px; 1929 1937 border: solid var(--color-btn-primary-text); 1930 1938 border-width: 0 2px 2px 0; ··· 1933 1941 .tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:focus-visible { 1934 1942 outline: 2px solid var(--color-focus); 1935 1943 outline-offset: 1px; 1944 + } 1945 + /* Nested task lists */ 1946 + .tiptap ul[data-type="taskList"] ul[data-type="taskList"] { 1947 + margin-top: 0.15em; 1948 + margin-bottom: 0; 1936 1949 } 1937 1950 /* Checked task items: muted text */ 1938 1951 .tiptap ul[data-type="taskList"] li[data-checked="true"] > div {