Full document, spreadsheet, slideshow, and diagram tooling
Merge pull request 'fix: polish task list checkbox alignment and spacing' (#278) from fix/checkbox-alignment-polish into main
+18
-5
+18
-5
src/css/app.css
+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 {