this repo has no description
Default show chars-left donut
+15
-6
+13
-5
src/app.css
+13
-5
src/app.css
···
1641
1641
1642
1642
meter.donut {
1643
1643
position: relative;
1644
-
width: 24px;
1645
-
height: 24px;
1644
+
--dimension: 24px;
1645
+
--border-width: 2px;
1646
+
--middle-circle-radius: calc(var(--dimension) / 2 - var(--border-width));
1647
+
width: var(--dimension);
1648
+
height: var(--dimension);
1646
1649
border-radius: 50%;
1647
1650
--fill: calc(var(--percentage) * 1%);
1648
1651
--color: var(--link-color);
1649
1652
--middle-circle: radial-gradient(
1650
1653
circle at 50% 50%,
1651
-
var(--bg-faded-color) 10px,
1652
-
transparent 10px
1654
+
var(--bg-color) var(--middle-circle-radius),
1655
+
transparent var(--middle-circle-radius)
1653
1656
);
1654
1657
background-image: var(--middle-circle),
1655
-
conic-gradient(var(--color) var(--fill), var(--bg-faded-blur-color) 0);
1658
+
conic-gradient(var(--color) var(--fill), var(--outline-color) 0);
1659
+
transform: scale(0.7);
1660
+
transition: transform 0.2s ease-in-out;
1656
1661
}
1657
1662
meter.donut.warning {
1658
1663
--color: var(--orange-color);
1664
+
transform: scale(1);
1659
1665
}
1660
1666
meter.donut.danger {
1661
1667
--color: var(--red-color);
1668
+
transform: scale(1);
1662
1669
}
1663
1670
meter.donut.explode {
1664
1671
background-image: none;
1672
+
transform: scale(1);
1665
1673
}
1666
1674
meter.donut:is(.warning, .danger, .explode):after {
1667
1675
content: attr(data-left);
+2
-1
src/components/compose.jsx
+2
-1
src/components/compose.jsx
···
1381
1381
const snapStates = useSnapshot(states);
1382
1382
const charCount = snapStates.composerCharacterCount;
1383
1383
const leftChars = maxCharacters - charCount;
1384
-
if (charCount <= maxCharacters / 2 || hidden) {
1384
+
if (hidden) {
1385
1385
return <meter class="donut" hidden />;
1386
1386
}
1387
1387
return (
···
1398
1398
value={charCount}
1399
1399
max={maxCharacters}
1400
1400
data-left={leftChars}
1401
+
title={`${leftChars}/${maxCharacters}`}
1401
1402
style={{
1402
1403
'--percentage': (charCount / maxCharacters) * 100,
1403
1404
}}