Add colored + - icons for lists

ronilaukkarinen · Nov 1, 2023 · 0cb84d6 · 0cb84d6
1 parent 59b6823
commit 0cb84d6
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -150,6 +150,8 @@
   --icon-more-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");
   --icon-close: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f7f9f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --icon-close-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --icon-plus-green: url("data:image/svg+xml, %3Csvg fill='%2317bf63' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 -960 960 960' class='icon icon-plus' aria-hidden='true'%3E%3Cpath d='M440.391-440.391H185.869v-79.218h254.522v-255.087h79.218v255.087h255.087v79.218H519.609v254.522h-79.218v-254.522Z'%3E%3C/path%3E%3C/svg%3E");
+  --icon-cross-red: url("data:image/svg+xml, %3Csvg fill='%23e0245e' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 -960 960 960' class='icon icon-times' aria-hidden='true'%3E%3Cpath d='M249-193.434 193.434-249l231-231-231-231L249-766.566l231 231 231-231L766.566-711l-231 231 231 231L711-193.434l-231-231-231 231Z'%3E%3C/path%3E%3C/svg%3E");
   --icon-cog: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' width='26' height='26' viewBox='0 0 512 512' fill='%23f7f9f9'%3E%3Cpath d='M456.7 242.27l-26.08-4.2a8 8 0 01-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08 8.08 0 013.9-8.62l23.09-12.82a8.05 8.05 0 003.9-9.92l-4-11a7.94 7.94 0 00-9.4-5l-25.89 5a8 8 0 01-8.59-4.11q-2.25-4.2-4.8-8.41a8.16 8.16 0 01.7-9.52l17.29-19.94a8 8 0 00.3-10.62l-7.49-9a7.88 7.88 0 00-10.5-1.51l-22.69 13.63a8 8 0 01-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8 8 0 01-2.5-9.11l9.4-24.75A8 8 0 00365 78.77l-10.2-5.91a8 8 0 00-10.39 2.21l-16.64 20.84a7.15 7.15 0 01-8.5 2.5s-5.6-2.3-9.8-3.71A8 8 0 01304 87l.4-26.45a8.07 8.07 0 00-6.6-8.42l-11.59-2a8.07 8.07 0 00-9.1 5.61l-8.6 25.05a8 8 0 01-7.79 5.41h-9.8a8.07 8.07 0 01-7.79-5.41l-8.6-25.05a8.07 8.07 0 00-9.1-5.61l-11.59 2a8.07 8.07 0 00-6.6 8.42l.4 26.45a8 8 0 01-5.49 7.71c-2.3.9-7.3 2.81-9.7 3.71-2.8 1-6.1.2-8.8-2.91l-16.51-20.34A8 8 0 00156.75 73l-10.2 5.91a7.94 7.94 0 00-3.3 10.09l9.4 24.75a8.06 8.06 0 01-2.5 9.11c-2.5 2-5 4.11-7.4 6.22a8 8 0 01-9.39.9L111 116.14a8 8 0 00-10.5 1.51l-7.49 9a8 8 0 00.3 10.62l17.29 19.94a8 8 0 01.7 9.52q-2.55 4-4.8 8.41a8.11 8.11 0 01-8.59 4.11l-25.89-5a8 8 0 00-9.4 5l-4 11a8.05 8.05 0 003.9 9.92L85.58 213a7.94 7.94 0 013.9 8.62c-.6 3.2-1.2 6.31-1.7 9.51a8.08 8.08 0 01-6.6 6.82l-26.08 4.2a8.09 8.09 0 00-7.1 7.92v11.72a7.86 7.86 0 007.1 7.92l26.08 4.2a8 8 0 016.6 6.82c.5 3.2 1 6.41 1.7 9.51a8.08 8.08 0 01-3.9 8.62L62.49 311.7a8.05 8.05 0 00-3.9 9.92l4 11a7.94 7.94 0 009.4 5l25.89-5a8 8 0 018.59 4.11q2.25 4.2 4.8 8.41a8.16 8.16 0 01-.7 9.52l-17.29 19.96a8 8 0 00-.3 10.62l7.49 9a7.88 7.88 0 0010.5 1.51l22.69-13.63a8 8 0 019.39.9c2.4 2.11 4.9 4.21 7.4 6.22a8 8 0 012.5 9.11l-9.4 24.75a8 8 0 003.3 10.12l10.2 5.91a8 8 0 0010.39-2.21l16.79-20.64c2.1-2.6 5.5-3.7 8.2-2.6 3.4 1.4 5.7 2.2 9.9 3.61a8 8 0 015.49 7.71l-.4 26.45a8.07 8.07 0 006.6 8.42l11.59 2a8.07 8.07 0 009.1-5.61l8.6-25a8 8 0 017.79-5.41h9.8a8.07 8.07 0 017.79 5.41l8.6 25a8.07 8.07 0 009.1 5.61l11.59-2a8.07 8.07 0 006.6-8.42l-.4-26.45a8 8 0 015.49-7.71c4.2-1.41 7-2.51 9.6-3.51s5.8-1 8.3 2.1l17 20.94A8 8 0 00355 439l10.2-5.91a7.93 7.93 0 003.3-10.12l-9.4-24.75a8.08 8.08 0 012.5-9.12c2.5-2 5-4.1 7.4-6.21a8 8 0 019.39-.9L401 395.66a8 8 0 0010.5-1.51l7.49-9a8 8 0 00-.3-10.62l-17.29-19.94a8 8 0 01-.7-9.52q2.55-4.05 4.8-8.41a8.11 8.11 0 018.59-4.11l25.89 5a8 8 0 009.4-5l4-11a8.05 8.05 0 00-3.9-9.92l-23.09-12.82a7.94 7.94 0 01-3.9-8.62c.6-3.2 1.2-6.31 1.7-9.51a8.08 8.08 0 016.6-6.82l26.08-4.2a8.09 8.09 0 007.1-7.92V250a8.25 8.25 0 00-7.27-7.73zM256 112a143.82 143.82 0 01139.38 108.12A16 16 0 01379.85 240H274.61a16 16 0 01-13.91-8.09l-52.1-91.71a16 16 0 019.85-23.39A146.94 146.94 0 01256 112zM112 256a144 144 0 0143.65-103.41 16 16 0 0125.17 3.47L233.06 248a16 16 0 010 15.87l-52.67 91.7a16 16 0 01-25.18 3.36A143.94 143.94 0 01112 256zm144 144a146.9 146.9 0 01-38.19-4.95 16 16 0 01-9.76-23.44l52.58-91.55a16 16 0 0113.88-8H379.9a16 16 0 0115.52 19.88A143.84 143.84 0 01256 400z'/%3E%3C/svg%3E");
   --icon-globe: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.00 0.00 512.00 512.00'%3E%3Cpath fill='%23f7f9f9' d=' M 512.00 383.82 L 512.00 385.55 C 509.71 419.39 473.05 422.09 447.81 418.87 Q 423.66 415.79 400.31 408.70 Q 358.58 396.03 318.76 378.21 Q 218.90 333.52 129.46 270.53 C 92.32 244.38 56.82 216.22 27.43 182.58 C 14.63 167.94 1.88 149.41 0.00 128.96 L 0.00 125.94 C 3.19 91.33 40.56 90.05 66.57 93.40 Q 81.64 95.34 88.25 97.23 C 99.02 100.32 103.61 112.14 97.29 121.55 C 92.20 129.11 85.23 129.19 76.43 127.41 C 64.10 124.92 44.84 121.70 32.89 126.36 A 1.55 1.54 74.3 0 0 31.93 128.08 C 34.07 139.90 43.53 152.31 51.28 161.22 Q 68.49 181.02 88.94 198.55 Q 89.49 199.02 89.73 198.34 Q 110.62 140.43 161.78 107.51 C 234.44 60.76 331.69 75.26 388.09 139.91 C 446.04 206.35 446.71 303.97 388.97 370.93 Q 388.58 371.38 389.14 371.58 Q 413.92 380.31 439.48 385.26 C 451.88 387.65 467.05 389.92 479.11 385.65 A 1.51 1.50 -14.2 0 0 480.10 384.00 C 477.90 369.69 463.57 354.46 454.60 343.62 C 440.99 327.16 463.05 306.29 479.15 323.40 C 495.03 340.29 510.01 360.98 512.00 383.82 Z M 115.39 210.46 Q 136.86 228.57 159.38 244.15 C 223.66 288.63 294.05 327.49 367.32 354.98 A 1.46 1.44 30.8 0 0 368.93 354.58 Q 400.10 318.66 405.76 270.75 Q 407.08 259.64 406.38 249.56 C 401.05 172.60 342.31 113.52 265.72 106.81 Q 255.74 105.94 245.77 106.92 C 185.42 112.87 134.96 151.32 114.89 208.65 Q 114.52 209.72 115.39 210.46 Z M 295.33 328.94 A 0.34 0.34 0.0 0 0 295.16 329.58 L 299.51 331.72 A 0.34 0.34 0.0 0 0 300.00 331.41 L 300.00 329.51 A 0.34 0.34 0.0 0 0 299.68 329.17 L 295.33 328.94 Z'%0A/%3E%3Cpath fill='%23f7f9f9' d=' M 307.69 408.30 C 316.86 412.38 316.05 421.82 306.19 424.66 C 209.45 452.48 109.79 396.22 85.13 298.09 Q 83.95 293.40 84.37 291.18 C 85.73 284.03 93.55 284.22 98.50 287.80 Q 197.11 359.12 307.69 408.30 Z M 263.31 410.94 Q 262.74 410.51 262.12 410.23 Q 199.27 381.56 142.55 342.19 Q 129.49 333.13 117.25 323.09 A 0.18 0.18 0.0 0 0 116.97 323.31 C 142.74 377.01 195.57 410.10 255.44 411.80 Q 261.32 411.97 263.93 411.40 Q 264.37 411.30 264.00 411.06 Q 263.69 410.85 263.31 410.94 Z'%0A/%3E%3C/svg%3E");
   --icon-globe-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E');
@@ -3019,6 +3021,8 @@ body.embed .button.logo-button:hover,
 }
 
 /* stylelint-disable-next-line */
+.layout-multiple-columns .icon-plus,
+.layout-multiple-columns .icon-times,
 .layout-multiple-columns .detailed-status__action-bar .icon,
 .layout-multiple-columns .status__action-bar .icon,
 .layout-multiple-columns .notification__filter-bar .icon,
@@ -3041,6 +3045,10 @@ body.embed .button.logo-button:hover,
 }
 
 /* Hide the original icon from behind */
+.layout-multiple-columns .icon-plus > path,
+.layout-multiple-columns .icon-times > path,
+.layout-multiple-columns .list-adder__lists .list__display-name svg > path,
+.layout-multiple-columns .status__prepend .icon.icon-retweet path,
 .layout-multiple-columns .notification-reblog .notification__message > .icon path,
 .layout-multiple-columns .notification-favourite .notification__message > .icon path,
 .layout-multiple-columns .account__header__tabs__buttons .icon path,
@@ -3077,6 +3085,24 @@ body.embed .button.logo-button:hover,
   background-image: var(--icon-home-notification-active);
 }
 
+.layout-multiple-columns .icon-plus {
+  --size-icon: 20px;
+  background-image: var(--icon-plus-green);
+}
+
+.layout-multiple-columns .icon-times {
+  --size-icon: 20px;
+  background-image: var(--icon-cross-red);
+}
+
+.layout-multiple-columns .icon-button:hover .icon-plus {
+  background-image: var(--icon-cross-red);
+}
+
+.layout-multiple-columns .icon-button:hover .icon-times {
+  background-image: var(--icon-plus-green);
+}
+
 /* Notifications icon */
 .layout-multiple-columns .column-link .icon-bell {
   background-image: var(--icon-bell);

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -149,6 +149,8 @@
   --icon-more-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");
   --icon-close: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f7f9f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --icon-close-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --icon-plus-green: url("data:image/svg+xml, %3Csvg fill='%2317bf63' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 -960 960 960' class='icon icon-plus' aria-hidden='true'%3E%3Cpath d='M440.391-440.391H185.869v-79.218h254.522v-255.087h79.218v255.087h255.087v79.218H519.609v254.522h-79.218v-254.522Z'%3E%3C/path%3E%3C/svg%3E");
+  --icon-cross-red: url("data:image/svg+xml, %3Csvg fill='%23e0245e' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 -960 960 960' class='icon icon-times' aria-hidden='true'%3E%3Cpath d='M249-193.434 193.434-249l231-231-231-231L249-766.566l231 231 231-231L766.566-711l-231 231 231 231L711-193.434l-231-231-231 231Z'%3E%3C/path%3E%3C/svg%3E");
   --icon-cog: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' width='26' height='26' viewBox='0 0 512 512' fill='%23f7f9f9'%3E%3Cpath d='M456.7 242.27l-26.08-4.2a8 8 0 01-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08 8.08 0 013.9-8.62l23.09-12.82a8.05 8.05 0 003.9-9.92l-4-11a7.94 7.94 0 00-9.4-5l-25.89 5a8 8 0 01-8.59-4.11q-2.25-4.2-4.8-8.41a8.16 8.16 0 01.7-9.52l17.29-19.94a8 8 0 00.3-10.62l-7.49-9a7.88 7.88 0 00-10.5-1.51l-22.69 13.63a8 8 0 01-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8 8 0 01-2.5-9.11l9.4-24.75A8 8 0 00365 78.77l-10.2-5.91a8 8 0 00-10.39 2.21l-16.64 20.84a7.15 7.15 0 01-8.5 2.5s-5.6-2.3-9.8-3.71A8 8 0 01304 87l.4-26.45a8.07 8.07 0 00-6.6-8.42l-11.59-2a8.07 8.07 0 00-9.1 5.61l-8.6 25.05a8 8 0 01-7.79 5.41h-9.8a8.07 8.07 0 01-7.79-5.41l-8.6-25.05a8.07 8.07 0 00-9.1-5.61l-11.59 2a8.07 8.07 0 00-6.6 8.42l.4 26.45a8 8 0 01-5.49 7.71c-2.3.9-7.3 2.81-9.7 3.71-2.8 1-6.1.2-8.8-2.91l-16.51-20.34A8 8 0 00156.75 73l-10.2 5.91a7.94 7.94 0 00-3.3 10.09l9.4 24.75a8.06 8.06 0 01-2.5 9.11c-2.5 2-5 4.11-7.4 6.22a8 8 0 01-9.39.9L111 116.14a8 8 0 00-10.5 1.51l-7.49 9a8 8 0 00.3 10.62l17.29 19.94a8 8 0 01.7 9.52q-2.55 4-4.8 8.41a8.11 8.11 0 01-8.59 4.11l-25.89-5a8 8 0 00-9.4 5l-4 11a8.05 8.05 0 003.9 9.92L85.58 213a7.94 7.94 0 013.9 8.62c-.6 3.2-1.2 6.31-1.7 9.51a8.08 8.08 0 01-6.6 6.82l-26.08 4.2a8.09 8.09 0 00-7.1 7.92v11.72a7.86 7.86 0 007.1 7.92l26.08 4.2a8 8 0 016.6 6.82c.5 3.2 1 6.41 1.7 9.51a8.08 8.08 0 01-3.9 8.62L62.49 311.7a8.05 8.05 0 00-3.9 9.92l4 11a7.94 7.94 0 009.4 5l25.89-5a8 8 0 018.59 4.11q2.25 4.2 4.8 8.41a8.16 8.16 0 01-.7 9.52l-17.29 19.96a8 8 0 00-.3 10.62l7.49 9a7.88 7.88 0 0010.5 1.51l22.69-13.63a8 8 0 019.39.9c2.4 2.11 4.9 4.21 7.4 6.22a8 8 0 012.5 9.11l-9.4 24.75a8 8 0 003.3 10.12l10.2 5.91a8 8 0 0010.39-2.21l16.79-20.64c2.1-2.6 5.5-3.7 8.2-2.6 3.4 1.4 5.7 2.2 9.9 3.61a8 8 0 015.49 7.71l-.4 26.45a8.07 8.07 0 006.6 8.42l11.59 2a8.07 8.07 0 009.1-5.61l8.6-25a8 8 0 017.79-5.41h9.8a8.07 8.07 0 017.79 5.41l8.6 25a8.07 8.07 0 009.1 5.61l11.59-2a8.07 8.07 0 006.6-8.42l-.4-26.45a8 8 0 015.49-7.71c4.2-1.41 7-2.51 9.6-3.51s5.8-1 8.3 2.1l17 20.94A8 8 0 00355 439l10.2-5.91a7.93 7.93 0 003.3-10.12l-9.4-24.75a8.08 8.08 0 012.5-9.12c2.5-2 5-4.1 7.4-6.21a8 8 0 019.39-.9L401 395.66a8 8 0 0010.5-1.51l7.49-9a8 8 0 00-.3-10.62l-17.29-19.94a8 8 0 01-.7-9.52q2.55-4.05 4.8-8.41a8.11 8.11 0 018.59-4.11l25.89 5a8 8 0 009.4-5l4-11a8.05 8.05 0 00-3.9-9.92l-23.09-12.82a7.94 7.94 0 01-3.9-8.62c.6-3.2 1.2-6.31 1.7-9.51a8.08 8.08 0 016.6-6.82l26.08-4.2a8.09 8.09 0 007.1-7.92V250a8.25 8.25 0 00-7.27-7.73zM256 112a143.82 143.82 0 01139.38 108.12A16 16 0 01379.85 240H274.61a16 16 0 01-13.91-8.09l-52.1-91.71a16 16 0 019.85-23.39A146.94 146.94 0 01256 112zM112 256a144 144 0 0143.65-103.41 16 16 0 0125.17 3.47L233.06 248a16 16 0 010 15.87l-52.67 91.7a16 16 0 01-25.18 3.36A143.94 143.94 0 01112 256zm144 144a146.9 146.9 0 01-38.19-4.95 16 16 0 01-9.76-23.44l52.58-91.55a16 16 0 0113.88-8H379.9a16 16 0 0115.52 19.88A143.84 143.84 0 01256 400z'/%3E%3C/svg%3E");
   --icon-globe: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.00 0.00 512.00 512.00'%3E%3Cpath fill='%23f7f9f9' d=' M 512.00 383.82 L 512.00 385.55 C 509.71 419.39 473.05 422.09 447.81 418.87 Q 423.66 415.79 400.31 408.70 Q 358.58 396.03 318.76 378.21 Q 218.90 333.52 129.46 270.53 C 92.32 244.38 56.82 216.22 27.43 182.58 C 14.63 167.94 1.88 149.41 0.00 128.96 L 0.00 125.94 C 3.19 91.33 40.56 90.05 66.57 93.40 Q 81.64 95.34 88.25 97.23 C 99.02 100.32 103.61 112.14 97.29 121.55 C 92.20 129.11 85.23 129.19 76.43 127.41 C 64.10 124.92 44.84 121.70 32.89 126.36 A 1.55 1.54 74.3 0 0 31.93 128.08 C 34.07 139.90 43.53 152.31 51.28 161.22 Q 68.49 181.02 88.94 198.55 Q 89.49 199.02 89.73 198.34 Q 110.62 140.43 161.78 107.51 C 234.44 60.76 331.69 75.26 388.09 139.91 C 446.04 206.35 446.71 303.97 388.97 370.93 Q 388.58 371.38 389.14 371.58 Q 413.92 380.31 439.48 385.26 C 451.88 387.65 467.05 389.92 479.11 385.65 A 1.51 1.50 -14.2 0 0 480.10 384.00 C 477.90 369.69 463.57 354.46 454.60 343.62 C 440.99 327.16 463.05 306.29 479.15 323.40 C 495.03 340.29 510.01 360.98 512.00 383.82 Z M 115.39 210.46 Q 136.86 228.57 159.38 244.15 C 223.66 288.63 294.05 327.49 367.32 354.98 A 1.46 1.44 30.8 0 0 368.93 354.58 Q 400.10 318.66 405.76 270.75 Q 407.08 259.64 406.38 249.56 C 401.05 172.60 342.31 113.52 265.72 106.81 Q 255.74 105.94 245.77 106.92 C 185.42 112.87 134.96 151.32 114.89 208.65 Q 114.52 209.72 115.39 210.46 Z M 295.33 328.94 A 0.34 0.34 0.0 0 0 295.16 329.58 L 299.51 331.72 A 0.34 0.34 0.0 0 0 300.00 331.41 L 300.00 329.51 A 0.34 0.34 0.0 0 0 299.68 329.17 L 295.33 328.94 Z'%0A/%3E%3Cpath fill='%23f7f9f9' d=' M 307.69 408.30 C 316.86 412.38 316.05 421.82 306.19 424.66 C 209.45 452.48 109.79 396.22 85.13 298.09 Q 83.95 293.40 84.37 291.18 C 85.73 284.03 93.55 284.22 98.50 287.80 Q 197.11 359.12 307.69 408.30 Z M 263.31 410.94 Q 262.74 410.51 262.12 410.23 Q 199.27 381.56 142.55 342.19 Q 129.49 333.13 117.25 323.09 A 0.18 0.18 0.0 0 0 116.97 323.31 C 142.74 377.01 195.57 410.10 255.44 411.80 Q 261.32 411.97 263.93 411.40 Q 264.37 411.30 264.00 411.06 Q 263.69 410.85 263.31 410.94 Z'%0A/%3E%3C/svg%3E");
   --icon-globe-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E');
@@ -3121,6 +3123,8 @@ body.embed .button.logo-button:hover,
 }
 
 /* stylelint-disable-next-line */
+.layout-single-column .icon-plus,
+.layout-single-column .icon-times,
 .layout-single-column .detailed-status__action-bar .icon,
 .layout-single-column .status__action-bar .icon,
 .layout-single-column .notification__filter-bar .icon,
@@ -3143,6 +3147,8 @@ body.embed .button.logo-button:hover,
 }
 
 /* Hide the original icon from behind */
+.layout-single-column .icon-plus > path,
+.layout-single-column .icon-times > path,
 .layout-single-column .list-adder__lists .list__display-name svg > path,
 .layout-single-column .status__prepend .icon.icon-retweet path,
 .layout-single-column .notification-reblog .notification__message > .icon path,
@@ -3181,6 +3187,24 @@ body.embed .button.logo-button:hover,
   background-image: var(--icon-home-notification-active);
 }
 
+.layout-single-column .icon-plus {
+  --size-icon: 20px;
+  background-image: var(--icon-plus-green);
+}
+
+.layout-single-column .icon-times {
+  --size-icon: 20px;
+  background-image: var(--icon-cross-red);
+}
+
+.layout-single-column .icon-button:hover .icon-plus {
+  background-image: var(--icon-cross-red);
+}
+
+.layout-single-column .icon-button:hover .icon-times {
+  background-image: var(--icon-plus-green);
+}
+
 /* Notifications icon */
 .layout-single-column .column-link .icon-bell {
   background-image: var(--icon-bell);