diff --git a/app/javascript/styles/tangerine/cherry.scss b/app/javascript/styles/tangerine/cherry.scss index 9b8a8cad32..4a8353bd5b 100644 --- a/app/javascript/styles/tangerine/cherry.scss +++ b/app/javascript/styles/tangerine/cherry.scss @@ -8,12 +8,10 @@ /* 📄 Meta */ :root { - --version: "v2.4~"; - - --variant-name: "Cherry"; - --variant-emoji: "\1F352\00A0"; + --version: 'v2.4~'; + --variant-name: 'Cherry'; + --variant-emoji: '\1F352\00A0'; --variant: var(--variant-emoji) var(--variant-name); - --meta: 'Tangerine UI for Mastodon: ' var(--version) ' \00B7 ' var(--variant); } @@ -27,30 +25,29 @@ --color-fg-muted: #888494; --color-secondary-bg: #f2e4ea; --color-secondary-separator: #eddbe3; - --color-content-bg: #ffffff; --color-content-fg: #444a5a; --color-content-fg-bold: #000000; - --color-content-fg-muted: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 40%); + --color-content-fg-muted: color-mix( + in srgb, + var(--color-content-fg), + var(--color-content-bg) 40% + ); --color-content-secondary-bg: #f9f4f7; - --color-content-secondary-separator: rgba(237, 219, 227, 0.4); + --color-content-secondary-separator: rgba(237, 219, 227, 40%); --color-content-bg-focus: #fffcfa; - --color-accent: #d3487f; --color-accent-focus: #eb5e96; - --color-accent-lines: rgba(230, 90, 146, 0.2); + --color-accent-lines: rgba(230, 90, 146, 20%); --color-accent-bg: #f7e7ed; --color-accent-fg: #ffffff; - --color-lines: #e1dde4; - --color-lines-translucent: rgba(0, 0, 0, .15); - + --color-lines-translucent: rgba(0, 0, 0, 15%); --color-confirm: #79bd9a; - --color-confirm-bg: rgba(121, 189, 154, 0.3); - --color-confirm-fg: #4E8A6B; - + --color-confirm-bg: rgba(121, 189, 154, 30%); + --color-confirm-fg: #4e8a6b; --color-reject: #df405a; - --color-reject-bg: rgba(223, 64, 90, 0.3); + --color-reject-bg: rgba(223, 64, 90, 30%); } @media (prefers-color-scheme: dark) { :root { @@ -60,27 +57,24 @@ --color-fg-muted: #6e5e67; --color-secondary-bg: #1f1118; --color-secondary-separator: #2e2328; - --color-content-bg: #030303; --color-content-fg: var(--color-fg); --color-content-fg-bold: #ffffff; --color-content-fg-muted: #737373; --color-content-secondary-bg: var(--color-secondary-bg); - --color-content-secondary-separator: rgba(89, 62, 78, 0.4); + --color-content-secondary-separator: rgba(89, 62, 78, 40%); --color-content-bg-focus: #0e0e0e; - --color-accent: #d05c8a; --color-accent-focus: #ad2862; - --color-accent-lines: rgba(249, 122, 194, 0.3); + --color-accent-lines: rgba(249, 122, 194, 30%); --color-accent-bg: #3c1f2f; --color-accent-fg: #ffffff; - --color-lines: #343434; - --color-lines-translucent: rgba(255, 255, 255, .15); - + --color-lines-translucent: rgba(255, 255, 255, 15%); --color-confirm-fg: var(--color-confirm); } } + :root { /* Mastodon logo */ --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' class='mastodon-logo' viewBox='0 0 216.414 232.01'%3E%3Cdefs xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient xmlns='http://www.w3.org/2000/svg' id='a' x2='0%25' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23d3487f'/%3E%3Cstop offset='100%25' stop-color='%23d3487f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='url(%23a)' d='M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916'/%3E%3Cpath fill='%23fff' d='M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675'/%3E%3C/svg%3E"); @@ -121,71 +115,55 @@ --icon-home-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-direct-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bookmark-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-accent: var(--icon-star-accent); --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent: var(--icon-user-plus-accent); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-dot-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-dot-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); --icon-settings-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-moderation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-moderation-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-administration-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-ellipsis-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); --icon-ellipsis-column-link-active-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); --icon-hashtag-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); @@ -239,7 +217,7 @@ --icon-edited-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,90.34,192,120,136,64l29.66-29.66a8,8,0,0,1,11.31,0L221.66,79A8,8,0,0,1,221.66,90.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H216a8,8,0,0,0,0-16H115.32l112-112A16,16,0,0,0,227.32,73.37ZM48,163.31l88-88L180.69,120l-88,88H48Zm144-54.62L147.32,64l24-24L216,84.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-timer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M128,44a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,44Zm0,168a72,72,0,1,1,72-72A72.08,72.08,0,0,1,128,212ZM164.49,99.51a12,12,0,0,1,0,17l-28,28a12,12,0,0,1-17-17l28-28A12,12,0,0,1,164.49,99.51ZM92,16A12,12,0,0,1,104,4h48a12,12,0,0,1,0,24H104A12,12,0,0,1,92,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-timer-inv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M128,44a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,44Zm0,168a72,72,0,1,1,72-72A72.08,72.08,0,0,1,128,212ZM164.49,99.51a12,12,0,0,1,0,17l-28,28a12,12,0,0,1-17-17l28-28A12,12,0,0,1,164.49,99.51ZM92,16A12,12,0,0,1,104,4h48a12,12,0,0,1,0,24H104A12,12,0,0,1,92,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-check-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'%3E%3C/path%3E%3C/svg%3E");; + --icon-check-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-check-radio-inv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-check-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0ZM228,48V208a20,20,0,0,1-20,20H48a20,20,0,0,1-20-20V48A20,20,0,0,1,48,28H208A20,20,0,0,1,228,48Zm-24,4H52V204H204Z'%3E%3C/path%3E%3C/svg%3E"); --icon-check-box-inv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0ZM228,48V208a20,20,0,0,1-20,20H48a20,20,0,0,1-20-20V48A20,20,0,0,1,48,28H208A20,20,0,0,1,228,48Zm-24,4H52V204H204Z'%3E%3C/path%3E%3C/svg%3E"); @@ -294,7 +272,7 @@ --icon-ellipsis-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M152,128a24,24,0,1,1-24-24A24,24,0,0,1,152,128ZM48,104a24,24,0,1,0,24,24A24,24,0,0,0,48,104Zm160,0a24,24,0,1,0,24,24A24,24,0,0,0,208,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144ZM48,96a32,32,0,1,0,32,32A32,32,0,0,0,48,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,48,144ZM208,96a32,32,0,1,0,32,32A32,32,0,0,0,208,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,208,144Z'%3E%3C/path%3E%3C/svg%3E"); --icon-poll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,92H188V56a12,12,0,0,0-12-12H60V40a12,12,0,0,0-24,0V216a12,12,0,0,0,24,0v-4h84a12,12,0,0,0,12-12V164h68a12,12,0,0,0,12-12V104A12,12,0,0,0,224,92ZM164,68V92H60V68ZM132,188H60V164h72Zm80-48H60V116H212Z'%3E%3C/path%3E%3C/svg%3E"); --icon-poll-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M224,104v48H48V104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,96H184V56a8,8,0,0,0-8-8H56V40a8,8,0,0,0-16,0V216a8,8,0,0,0,16,0v-8h88a8,8,0,0,0,8-8V160h72a8,8,0,0,0,8-8V104A8,8,0,0,0,224,96ZM168,64V96H56V64ZM136,192H56V160h80Zm80-48H56V112H216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-post: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,128A96,96,0,0,1,79.93,211.11h0L42.54,223.58a8,8,0,0,1-10.12-10.12l12.47-37.39h0A96,96,0,1,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-4-1.08,7.85,7.85,0,0,0-2.53.42L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Zm12-88a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm-44,0a12,12,0,1,1-12-12A12,12,0,0,1,96,128Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,184,128Z'%3E%3C/path%3E%3C/svg%3E");; + --icon-post: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,128A96,96,0,0,1,79.93,211.11h0L42.54,223.58a8,8,0,0,1-10.12-10.12l12.47-37.39h0A96,96,0,1,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-4-1.08,7.85,7.85,0,0,0-2.53.42L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Zm12-88a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm-44,0a12,12,0,1,1-12-12A12,12,0,0,1,96,128Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,184,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-post-notification: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M120,128a16,16,0,1,1-16-16A16,16,0,0,1,120,128Zm32-16a16,16,0,1,0,16,16A16,16,0,0,0,152,112Zm84,16A108,108,0,0,1,78.77,224.15L46.34,235A20,20,0,0,1,21,209.66l10.81-32.43A108,108,0,1,1,236,128Zm-24,0A84,84,0,1,0,55.27,170.06a12,12,0,0,1,1,9.81l-9.93,29.79,29.79-9.93a12.1,12.1,0,0,1,3.8-.62,12,12,0,0,1,6,1.62A84,84,0,0,0,212,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-post-notification-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M224,128A96,96,0,0,1,79.93,211.11h0L42.54,223.58a8,8,0,0,1-10.12-10.12l12.47-37.39h0A96,96,0,1,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-4-1.08,7.85,7.85,0,0,0-2.53.42L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Zm12-88a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm-44,0a12,12,0,1,1-12-12A12,12,0,0,1,96,128Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,184,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M136,108A52,52,0,1,1,84,56,52,52,0,0,1,136,108Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z'%3E%3C/path%3E%3C/svg%3E"); @@ -308,70 +286,54 @@ --icon-home-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-direct-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bookmark-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-accent: var(--icon-star-accent); --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-dot-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-dot-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); --icon-settings-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-moderation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-moderation-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-administration-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-ellipsis-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); --icon-ellipsis-column-link-active-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); --icon-hashtag-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); @@ -414,7 +376,7 @@ --icon-edited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M230.15,70.54,185.46,25.86a20,20,0,0,0-28.28,0L33.86,149.17A19.86,19.86,0,0,0,28,163.31V208a20,20,0,0,0,20,20H216a12,12,0,0,0,0-24H125L230.15,98.83A20,20,0,0,0,230.15,70.54ZM91,204H52V165l84-84,39,39ZM192,103,153,64l18.34-18.34,39,39Z'%3E%3C/path%3E%3C/svg%3E"); --icon-edited-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,90.34,192,120,136,64l29.66-29.66a8,8,0,0,1,11.31,0L221.66,79A8,8,0,0,1,221.66,90.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H216a8,8,0,0,0,0-16H115.32l112-112A16,16,0,0,0,227.32,73.37ZM48,163.31l88-88L180.69,120l-88,88H48Zm144-54.62L147.32,64l24-24L216,84.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-timer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M128,44a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,44Zm0,168a72,72,0,1,1,72-72A72.08,72.08,0,0,1,128,212ZM164.49,99.51a12,12,0,0,1,0,17l-28,28a12,12,0,0,1-17-17l28-28A12,12,0,0,1,164.49,99.51ZM92,16A12,12,0,0,1,104,4h48a12,12,0,0,1,0,24H104A12,12,0,0,1,92,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-check-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'%3E%3C/path%3E%3C/svg%3E");; + --icon-check-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-check-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0ZM228,48V208a20,20,0,0,1-20,20H48a20,20,0,0,1-20-20V48A20,20,0,0,1,48,28H208A20,20,0,0,1,228,48Zm-24,4H52V204H204Z'%3E%3C/path%3E%3C/svg%3E"); --icon-broom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M192.8,165.12,43.93,105.57A110.88,110.88,0,0,1,61.47,82.38a8,8,0,0,1,8.67-1.81L95.52,90.85a16,16,0,0,0,20.82-9l21-53.1c4.15-10,15.47-15.33,25.63-11.53a20,20,0,0,1,11.51,26.39L153.13,96.71a16,16,0,0,0,8.93,20.75L187,127.3a8,8,0,0,1,5,7.43V152A104.58,104.58,0,0,0,192.8,165.12Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M235.5,216.81c-22.56-11-35.5-34.58-35.5-64.8V134.73a15.94,15.94,0,0,0-10.09-14.87L165,110a8,8,0,0,1-4.48-10.34l21.32-53a28,28,0,0,0-16.1-37,28.14,28.14,0,0,0-35.82,16,.61.61,0,0,0,0,.12L108.9,79a8,8,0,0,1-10.37,4.49L73.11,73.14A15.89,15.89,0,0,0,55.74,76.8C34.68,98.45,24,123.75,24,152a111.45,111.45,0,0,0,31.18,77.53A8,8,0,0,0,61,232H232a8,8,0,0,0,3.5-15.19ZM67.14,88l25.41,10.3a24,24,0,0,0,31.23-13.45l21-53c2.56-6.11,9.47-9.27,15.43-7a12,12,0,0,1,6.88,15.92L145.69,93.76a24,24,0,0,0,13.43,31.14L184,134.73V152c0,.33,0,.66,0,1L55.77,101.71A108.84,108.84,0,0,1,67.14,88Zm48,128a87.53,87.53,0,0,1-24.34-42,8,8,0,0,0-15.49,4,105.16,105.16,0,0,0,18.36,38H64.44A95.54,95.54,0,0,1,40,152a85.9,85.9,0,0,1,7.73-36.29l137.8,55.12c3,18,10.56,33.48,21.89,45.16Z'%3E%3C/path%3E%3C/svg%3E"); @@ -447,14 +409,34 @@ } } -body.app-body { +body.app-body { background-color: var(--color-bg); color: var(--color-fg); - font-family: "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-family: + 'Pretendard JP Variable', + 'Pretendard JP', + Pretendard, + -apple-system, + BlinkMacSystemFont, + system-ui, + Roboto, + 'Helvetica Neue', + 'Segoe UI', + 'Hiragino Sans', + 'Apple SD Gothic Neo', + Meiryo, + 'Noto Sans JP', + 'Noto Sans KR', + 'Malgun Gothic', + Osaka, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + sans-serif; } .layout-single-column .ui::before { - content: " "; + content: ' '; display: block; height: 16px; position: fixed; @@ -465,6 +447,7 @@ body.app-body { background-color: var(--color-bg); background-image: var(--gradient-bg); } + .app-body .columns-area__panels__pane { z-index: 1; } @@ -479,24 +462,28 @@ body.app-body { background-color: var(--color-bg); padding: 2px; } + :root:has(.app-body) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 8px; - opacity: .4; + opacity: 0.4; box-shadow: none; } + :root:has(.app-body) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } + :root:has(.app-body) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); - opacity: .7; + opacity: 0.7; } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { :root:has(.app-body) *::-webkit-scrollbar { display: none; } } + :root, * { scrollbar-color: var(--color-accent) var(--color-bg); @@ -504,9 +491,8 @@ body.app-body { } .app-body { - --dropdown-shadow: - 0 20px 25px -5px rgba(0, 0, 0, .15), - 0 8px 10px -6px rgba(0, 0, 0, .15); + --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 15%), + 0 8px 10px -6px rgba(0, 0, 0, 15%); --safe-area-bottom: env(safe-area-inset-bottom); } @media (display-mode: standalone) { @@ -518,6 +504,7 @@ body.app-body { .app-body .loading-bar { background-color: var(--color-accent); } + .app-body .circular-progress { color: var(--color-accent); } @@ -528,9 +515,11 @@ body.app-body { background-position: center; background-repeat: no-repeat; } + .app-body .redirect__logo img { opacity: 0; } + .app-body .redirect__message a { color: var(--color-accent); } @@ -541,7 +530,7 @@ body.app-body { .app-body .compose-form .spoiler-input__input, .app-body .compose-form__autosuggest-wrapper, .app-body .compose-form__poll-wrapper select, -.app-body .poll__option input[type=text], +.app-body .poll__option input[type='text'], .app-body .report-dialog-modal__textarea, .app-body .search__input, .app-body .setting-text, @@ -549,8 +538,9 @@ body.app-body { .app-body .about__section__body { border: 0; } + .app-body .column-inline-form, -.app-body .column>.scrollable, +.app-body .column > .scrollable, .app-body .getting-started, .app-body .regeneration-indicator { background: transparent; @@ -564,6 +554,7 @@ body.app-body { background-color: var(--color-content-secondary-bg); border-radius: 50%; } + .app-body .account__avatar img { border-radius: 50%; } @@ -573,12 +564,15 @@ body.app-body { 0% { transform: scale(1); } + 50% { transform: scale(1.6); } + 75% { - transform: scale(.8); + transform: scale(0.8); } + 100% { transform: scale(1); } @@ -587,9 +581,11 @@ body.app-body { 0% { transform: scale(1); } + 50% { transform: scale(1.25); } + 100% { transform: scale(1); } @@ -598,12 +594,15 @@ body.app-body { 0% { transform: translateY(0); } + 50% { transform: translateY(-30%); } + 75% { transform: translateY(20%); } + 100% { transform: translate(0); } @@ -613,22 +612,27 @@ body.app-body { transform: translate(0); opacity: 0; } + 5% { transform: translate(0); opacity: 1; } + 50% { transform: translate(200%, -200%); opacity: 0; } + 80% { transform: translate(200%, -200%); opacity: 0; } + 85% { transform: translate(-20%, 20%); opacity: 0; } + 100% { transform: translate(0); opacity: 1; @@ -639,6 +643,7 @@ body.app-body { opacity: 0; transform: translateY(-10%); } + to { opacity: 1; transform: translateY(0); @@ -649,6 +654,7 @@ body.app-body { transform: translate(0, -10px); opacity: 0; } + to { transform: translate(0, 0); opacity: 1; @@ -658,9 +664,11 @@ body.app-body { 0% { opacity: 0; } + 20% { opacity: 0; } + 100% { opacity: 1; } @@ -669,9 +677,11 @@ body.app-body { 0% { transform: rotate(0) scale(1); } + 60% { transform: rotate(80deg) scale(1.2); } + 100% { transform: rotate(60deg) scale(1.1); } @@ -680,35 +690,42 @@ body.app-body { 0% { transform: rotate(0); } + 40% { transform: rotate(15deg); } + 70% { transform: rotate(-15deg); } + 100% { transform: rotate(0); } } - /* Rordered layout */ .app-body .columns-area__panels__pane--navigational { order: 1; } + .app-body .columns-area__panels__main { contain: inline-size; order: 2; } + .app-body .columns-area__panels__pane--compositional { order: 3; } + .app-body .columns-area--mobile .column { flex: unset; } + .app-body .columns-area--mobile .column:focus-within { overflow: visible; } + .app-body .scrollable, .app-body .column > .scrollable { background-color: var(--color-content-bg); @@ -719,30 +736,33 @@ body.app-body { border-radius: 0; padding-bottom: 20px; } + .app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } + .app-body .columns-area--mobile { padding: 0; } + .app-body .columns-area__panels { gap: 10px; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body:not(.layout-multiple-columns) .scrollable, .app-body:not(.layout-multiple-columns) .column > .scrollable { border-right: 0; border-left: 0; } } -@media screen and (min-width:1175px) { +@media screen and (width >= 1175px) { .app-body .columns-area__panels__main { max-width: 580px; padding: 0; } } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body .columns-area__panels { gap: 0; } @@ -754,164 +774,170 @@ body.app-body { height: 20px; width: 20px; } + .app-body .verified-badge .icon { width: 18px; height: 18px; } + .app-body .account__header__tabs__buttons .icon-button .icon { height: 24px; width: 24px; } + .app-body .status__visibility-icon .icon { height: 1em; width: 1em; } + .app-body .detailed-status__meta .icon, .app-body .dropdown-button .icon { height: 15px; width: 15px; } + .app-body .icon-button { padding: 2px; } + .app-body -:is( - .icon-bookmark, - .icon-star, - .icon-retweet, - .icon-repeat, - .icon-reply, - .icon-reply-all, - .icon-tasks, - .icon-quote-right, - .icon-home, - .icon-notifications-active, - .icon-hashtag, - .icon-explore, - .icon-search, - .icon-times-circle, - .icon-bell, - .icon-at, - .icon-bookmarks, - .icon-list-ul, - .column-link .icon-cog, - .drawer__tab .icon-cog, - .icon-flag, - .icon-tachometer, - .icon-bars, - .icon-bar-chart-4-bars, - .navigation-bar .icon-close, - .icon-user-plus, - .icon-person-add, - .icon-user, - .icon-users, - .icon-bullhorn, - .icon-sliders, - .icon-globe, - .icon-unlock, - .icon-lock, - .icon-paperclip, - .edit-indicator__attachments > .icon, - .icon-photo-library, - .compose-form__buttons .icon-button:nth-child(3) .icon, - .emoji-picker-dropdown > .icon-button .icon, - .icon-bell-o, - .icon-thumb-tack, - .icon-file-text, - .account--panel .icon-times, - .follow-request-banner .icon-times, - .account__relationship .icon-times, - .icon-ellipsis-h, - .icon-ellipsis-v, - .icon-check:is(.verified__mark, .verified-badge__mark), - .follow-request-banner .button .icon-check, - .account--panel button .icon-check, - .account__relationship .icon-check, - .status__action-bar .icon-close, - .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close, - .icon-sign-out, - .account__header__tabs__buttons .icon-undefined, - .icon-eye-slash, - .icon-eye, - .icon-eraser, - .icon-pencil, - .icon-edit, - .app-form__header-input .icon, - .account__domain-pill__popout__parts__icon .icon, - .safety-action-modal__bullet-points__icon .icon - ) -path { + :is( + .icon-bookmark, + .icon-star, + .icon-retweet, + .icon-repeat, + .icon-reply, + .icon-reply-all, + .icon-tasks, + .icon-quote-right, + .icon-home, + .icon-notifications-active, + .icon-hashtag, + .icon-explore, + .icon-search, + .icon-times-circle, + .icon-bell, + .icon-at, + .icon-bookmarks, + .icon-list-ul, + .column-link .icon-cog, + .drawer__tab .icon-cog, + .icon-flag, + .icon-tachometer, + .icon-bars, + .icon-bar-chart-4-bars, + .navigation-bar .icon-close, + .icon-user-plus, + .icon-person-add, + .icon-user, + .icon-users, + .icon-bullhorn, + .icon-sliders, + .icon-globe, + .icon-unlock, + .icon-lock, + .icon-paperclip, + .edit-indicator__attachments > .icon, + .icon-photo-library, + .compose-form__buttons .icon-button:nth-child(3) .icon, + .emoji-picker-dropdown > .icon-button .icon, + .icon-bell-o, + .icon-thumb-tack, + .icon-file-text, + .account--panel .icon-times, + .follow-request-banner .icon-times, + .account__relationship .icon-times, + .icon-ellipsis-h, + .icon-ellipsis-v, + .icon-check:is(.verified__mark, .verified-badge__mark), + .follow-request-banner .button .icon-check, + .account--panel button .icon-check, + .account__relationship .icon-check, + .status__action-bar .icon-close, + .detailed-status__action-bar .icon-close, + .account__header__tabs__buttons .icon-close, + .icon-sign-out, + .account__header__tabs__buttons .icon-undefined, + .icon-eye-slash, + .icon-eye, + .icon-eraser, + .icon-pencil, + .icon-edit, + .app-form__header-input .icon, + .account__domain-pill__popout__parts__icon .icon, + .safety-action-modal__bullet-points__icon .icon + ) + path { display: none; } .app-body -:is( - .icon-bookmark, - .icon-star, - .icon-retweet, - .icon-repeat, - .icon-reply, - .icon-reply-all, - .icon-tasks, - .icon-quote-right, - .icon-home, - .icon-notifications-active, - .icon-hashtag, - .icon-explore, - .icon-search, - .icon-times-circle, - .icon-bell, - .icon-at, - .icon-bookmarks, - .icon-list-ul, - .column-link .icon-cog, - .drawer__tab .icon-cog, - .icon-flag, - .icon-tachometer, - .icon-bars, - .icon-bar-chart-4-bars, - .navigation-bar .icon-close, - .icon-user-plus, - .icon-person-add, - .icon-user, - .icon-users, - .icon-bullhorn, - .icon-sliders, - .icon-globe, - .icon-unlock, - .icon-lock, - .icon-paperclip, - .edit-indicator__attachments > .icon, - .icon-photo-library, - .compose-form__buttons .icon-button:nth-child(3) .icon, - .emoji-picker-dropdown > .icon-button .icon, - .icon-bell-o, - .icon-thumb-tack, - .icon-file-text, - .account--panel .icon-times, - .follow-request-banner .icon-times, - .account__relationship .icon-times, - .icon-ellipsis-h, - .icon-ellipsis-v, - .icon-check:is(.verified__mark, .verified-badge__mark), - .follow-request-banner .button .icon-check, - .account--panel button .icon-check, - .account__relationship .icon-check, - .status__action-bar .icon-close, - .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close, - .icon-sign-out, - .account__header__tabs__buttons .icon-undefined, - .icon-eye-slash, - .icon-eye, - .icon-eraser, - .icon-pencil, - .icon-edit, - .app-form__header-input .icon, - .account__domain-pill__popout__parts__icon .icon, - .safety-action-modal__bullet-points__icon .icon - ) { + :is( + .icon-bookmark, + .icon-star, + .icon-retweet, + .icon-repeat, + .icon-reply, + .icon-reply-all, + .icon-tasks, + .icon-quote-right, + .icon-home, + .icon-notifications-active, + .icon-hashtag, + .icon-explore, + .icon-search, + .icon-times-circle, + .icon-bell, + .icon-at, + .icon-bookmarks, + .icon-list-ul, + .column-link .icon-cog, + .drawer__tab .icon-cog, + .icon-flag, + .icon-tachometer, + .icon-bars, + .icon-bar-chart-4-bars, + .navigation-bar .icon-close, + .icon-user-plus, + .icon-person-add, + .icon-user, + .icon-users, + .icon-bullhorn, + .icon-sliders, + .icon-globe, + .icon-unlock, + .icon-lock, + .icon-paperclip, + .edit-indicator__attachments > .icon, + .icon-photo-library, + .compose-form__buttons .icon-button:nth-child(3) .icon, + .emoji-picker-dropdown > .icon-button .icon, + .icon-bell-o, + .icon-thumb-tack, + .icon-file-text, + .account--panel .icon-times, + .follow-request-banner .icon-times, + .account__relationship .icon-times, + .icon-ellipsis-h, + .icon-ellipsis-v, + .icon-check:is(.verified__mark, .verified-badge__mark), + .follow-request-banner .button .icon-check, + .account--panel button .icon-check, + .account__relationship .icon-check, + .status__action-bar .icon-close, + .detailed-status__action-bar .icon-close, + .account__header__tabs__buttons .icon-close, + .icon-sign-out, + .account__header__tabs__buttons .icon-undefined, + .icon-eye-slash, + .icon-eye, + .icon-eraser, + .icon-pencil, + .icon-edit, + .app-form__header-input .icon, + .account__domain-pill__popout__parts__icon .icon, + .safety-action-modal__bullet-points__icon .icon + ) { background-repeat: no-repeat; background-size: 100%; background-position: center; @@ -921,103 +947,137 @@ path { .app-body .icon-bookmark { background-image: var(--icon-bookmark-accent); } + .app-body .detailed-status__button .icon-bookmark { background-image: var(--icon-bookmark-accent); } + .app-body .icon-button.active .icon-bookmark { background-image: var(--icon-bookmark-active); } + /* Favorite */ .app-body .icon-star { background-image: var(--icon-star-accent); } + .app-body button.icon-button.active .icon-star, .app-body .notification__message .icon-star, .app-body .notification-group--favourite .icon-star { background-image: var(--icon-star-active); } + .app-body .detailed-status__link .icon-star { background-image: var(--icon-star); margin: 0; } + .app-body .media-modal__overlay .icon-star { background-image: var(--icon-star-accent); } + /* Boost */ .app-body .icon-retweet { background-image: var(--icon-boost-accent); } + .app-body button.icon-button.active .icon-retweet, -.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { +.app-body + .detailed-status__button + button.icon-button.active:hover + .icon-retweet { background-image: var(--icon-boost-accent-active); } + .app-body .status__prepend__icon .icon-retweet, .app-body .notification-group--reblog .icon-repeat { background-image: var(--icon-boost-accent-active); } + .app-body .notification__message .icon-retweet { background-image: var(--icon-boost-active); } + .app-body .detailed-status__link .icon-retweet { background-image: var(--icon-boost); margin: 0; } + .app-body -button.icon-button:is( - .reblogPrivate:where(.disabled, [disabled]), - .reblogPrivate:where(.disabled, [disabled]):hover, - .disabled, - .disabled:hover - ) -.icon-retweet { + button.icon-button:is( + .reblogPrivate:where(.disabled, [disabled]), + .reblogPrivate:where(.disabled, [disabled]):hover, + .disabled, + .disabled:hover + ) + .icon-retweet { background-image: var(--icon-boost-accent); - opacity: .2; + opacity: 0.2; pointer-events: none; } + .app-body .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost-accent); vertical-align: middle; } + .app-body .media-modal__overlay .icon-retweet { background-image: var(--icon-boost-accent); } + /* Reply */ .app-body .icon-reply, .app-body .icon-reply-all { background-image: var(--icon-reply-accent); } + .app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } + .app-body .media-modal__overlay :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } + .app-body .status__prepend__icon .icon-reply, .app-body .notification-ungrouped__header__icon .icon-reply { background-image: var(--icon-reply-accent-active); } + /* Ellipsis */ .app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) { background-image: var(--icon-ellipsis-accent); } + .app-body .detailed-status__action-bar .icon-ellipsis-h { background-image: var(--icon-ellipsis-accent); } -.app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { + +.app-body + :is( + .status__action-bar, + .detailed-status__action-bar, + .account__header__tabs__buttons + ) + .icon-close { background-image: var(--icon-ellipsis-active); } + /* Poll icon */ .app-body .icon-tasks, .app-body .icon-bar-chart-4-bars { background-image: var(--icon-poll); } + .app-body .notification__message .icon-tasks, .app-body .notification-ungrouped .icon-bar-chart-4-bars { background-image: var(--icon-poll-accent); } + .app-body .compose-form .icon-tasks { background-image: var(--icon-poll-accent); } + /* Post icon */ .app-body .icon-quote-right { background-image: var(--icon-post); @@ -1029,228 +1089,292 @@ button.icon-button:is( margin-right: 7px; margin-left: 3px; } + /* Home icon */ .app-body .icon-home { background-image: var(--icon-home); } + .app-body .column-link.active .icon-home { background-image: var(--icon-home-active); } + .layout-multiple-columns .column-link .icon-home { background-image: var(--icon-home-accent); } + .app-body .notification__message .icon-home, .app-body .notification-ungrouped .icon-notifications-active { background-image: var(--icon-post-notification-accent); } + /* Globe icon */ .app-body .column-link .icon-globe, .app-body .column-header__icon.icon-globe { background-image: var(--icon-globe); } + .app-body .column-link.active .icon-globe { background-image: var(--icon-globe-active); } + .layout-multiple-columns .column-link .icon-globe { background-image: var(--icon-globe-accent); } + /* Hashtag icon */ .app-body .icon-hashtag { background-image: var(--icon-hashtag); } + /* Explore icon */ .app-body .icon-explore, .app-body .column-link .icon-explore { background-image: var(--icon-explore); } + .app-body .column-link.active .icon-explore { background-image: var(--icon-explore-active); } + .layout-multiple-columns .column-link .icon-explore { background-image: var(--icon-explore-accent); } + /* Search icon */ .app-body .icon-search { background-image: var(--icon-search); } + .app-body .ui__header__links .icon-search, .app-body .search__icon .icon-search { background-image: var(--icon-search-active); } + .app-body .column-link .icon-search { background-image: var(--icon-search-column-link); } + .app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link-active); } + .app-body .column-header__icon.icon-search { background-image: var(--icon-search-column-link); } + .app-body .icon-times-circle { background-image: var(--icon-erase); } + /* Notifications icon */ .app-body .column-link .icon-bell, .app-body .column-header__icon.icon-bell { background-image: var(--icon-bell); } + .app-body .column-link.active .icon-bell { background-image: var(--icon-bell-active); } + /* Direct messages icon */ .app-body .column-link .icon-at, .app-body .column-header__icon.icon-at { background-image: var(--icon-direct-messages); } + .app-body .column-link.active .icon-at { background-image: var(--icon-direct-messages-active); } + .layout-multiple-columns .column-link .icon-at { background-image: var(--icon-direct-messages-accent); } + /* Bookmarks icon */ .app-body .icon-bookmarks, .app-body .column-header__icon.icon-bookmarks { background-image: var(--icon-bookmark-column-link); } + .app-body .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } + .layout-multiple-columns .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent); } + /* Favorites icon */ .app-body .column-link .icon-star, .app-body .column-header__icon.icon-star { background-image: var(--icon-star-column-link); } + .app-body .column-link.active .icon-star { background-image: var(--icon-star-column-link-active); } + .layout-multiple-columns .column-link .icon-star { background-image: var(--icon-star-column-link-accent); } + /* Lists icon */ .app-body .icon-list-ul, .app-body .column-header__icon.icon-list-ul { background-image: var(--icon-list); } + .app-body .column-link.active .icon-list-ul { background-image: var(--icon-list-active); } + .layout-multiple-columns .column-link .icon-list-ul { background-image: var(--icon-list-accent); } + .app-body .navigation-panel .list-panel .column-link .icon-list-ul { background-image: var(--icon-dot-accent); transform: scale(1.8); } + .app-body .navigation-panel .list-panel .column-link.active .icon-list-ul { background-image: var(--icon-dot-accent-active); } + /* Settings icon */ .app-body .column-link .icon-cog { background-image: var(--icon-settings); } + .layout-multiple-columns .column-link .icon-cog { background-image: var(--icon-settings-accent); } + /* About page icon */ .app-body .navigation-panel .column-link .icon-ellipsis-h { background-image: var(--icon-ellipsis); } + .app-body .navigation-panel .column-link.active .icon-ellipsis-h { background-image: var(--icon-ellipsis-column-link-active); } + /* Moderation icon */ .app-body .icon-flag { background-image: var(--icon-moderation); } + .app-body .icon-tachometer { background-image: var(--icon-administration); } + /* Profile settings */ .app-body .navigation-bar .icon-button .icon-bars { background-image: var(--icon-gear); } + .app-body .navigation-bar .icon-button.active .icon-close { background-image: var(--icon-gear-active); } + .app-body .navigation-bar .icon-button:is(:active, :focus, :hover) { background-color: transparent; } + .app-body .navigation-bar .icon-button.active { transform: rotate(60deg) scale(1.1); - animation: rotate-bounce .4s 1; + animation: rotate-bounce 0.4s 1; } + /* Follow user icon */ .app-body .icon-user-plus, .app-body .icon-user, .app-body .icon-person-add { background-image: var(--icon-user-plus-accent); } + .app-body .active .icon-user-plus { background-image: var(--icon-user-plus); } + .app-body .column-header__icon.icon-user-plus, .app-body .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link); } + .app-body .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-column-link-active); } + .layout-multiple-columns .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent); } + /* Users icon */ .app-body .icon-users { background-image: var(--icon-users); } + .app-body .column-link .icon-users { background-image: var(--icon-users-accent); } + /* Announcement icon */ .app-body .icon-bullhorn { background-image: var(--icon-megaphone); } + /* Column settings icon */ .app-body .icon-sliders { background-image: var(--icon-sliders); } + /* Post visibility icons */ .app-body .icon-globe { background-image: var(--icon-globe-visibility); } + .app-body .dropdown-button .icon-globe { background-image: var(--icon-globe-visibility-accent); } + .app-body .dropdown-button.active .icon-globe { background-image: var(--icon-globe-visibility-inv); } + .app-body .icon-unlock { background-image: var(--icon-unlock); } + .app-body .dropdown-button .icon-unlock { background-image: var(--icon-unlock-accent); } + .app-body .dropdown-button.active .icon-unlock { background-image: var(--icon-unlock-inv); } + .app-body .icon-lock { background-image: var(--icon-lock); } + .app-body .dropdown-button .icon-lock { background-image: var(--icon-lock-accent); } + .app-body .dropdown-button.active .icon-lock { background-image: var(--icon-lock-inv); } + .app-body .icon-at { background-image: var(--icon-at); } + .app-body .dropdown-button .icon-at { background-image: var(--icon-at-accent); } + .app-body .dropdown-button.active .icon-at { background-image: var(--icon-at-inv); } @@ -1259,162 +1383,213 @@ button.icon-button:is( .app-body .icon-paperclip { background-image: var(--icon-paperclip-accent); } + .app-body .icon-photo-library, .app-body .edit-indicator__attachments > .icon { background-image: var(--icon-paperclip); } + .app-body .compose-form__buttons .icon-button:nth-child(3) .icon { background-image: var(--icon-warning); } -.app-body .compose-form__buttons .icon-button:nth-child(3):is(.active, .active:hover) .icon { + +.app-body + .compose-form__buttons + .icon-button:nth-child(3):is(.active, .active:hover) + .icon { background-image: var(--icon-warning-inv); } + .app-body .icon-check:is(.verified__mark, .verified-badge__mark) { background-image: var(--icon-verified); } -.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { + +.app-body + .follow-request-banner + .button:is(:active, :focus, :hover) + .icon-check { background-image: var(--icon-check-inv); } + .app-body .account__relationship .icon-check, .app-body .follow-request-banner .button .icon-check { background-image: var(--icon-check); } + .app-body .icon-bell { background-image: var(--icon-bell-ringing); } + .app-body .icon-bell-o { background-image: var(--icon-bell-accent); } + .app-body .icon-thumb-tack { background-image: var(--icon-pin); } + .app-body .icon-file-text { background-image: var(--icon-link); } + .app-body -:is( - .account--panel, - .follow-request-banner, - .account__relationship - ) -.icon-times { + :is(.account--panel, .follow-request-banner, .account__relationship) + .icon-times { background-image: var(--icon-reject); } + .app-body .account--panel .icon-times, -.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { +.app-body + .follow-request-banner + .button:is(:active, :focus, :hover) + .icon-times { background-image: var(--icon-reject-inv); } + .app-body .account__relationship .icon-times, .app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } + .app-body .account__header__tabs__buttons .icon-undefined { background-image: var(--icon-share); } + .app-body .account__header__tabs__buttons .copyable .icon-undefined { background-image: var(--icon-copy); } + .app-body .account__header__tabs__buttons .copied .icon-undefined { background-image: var(--icon-copied); } + .app-body .icon-eye-slash { background-image: var(--icon-eye-shut); } + .app-body .icon-button.overlayed .icon-eye-slash, .app-body .media-gallery__item__overlay .icon-eye-slash { background-image: var(--icon-eye-shut-inv); } + .app-body .player-button .icon-eye-slash { filter: brightness(100); } + .app-body .icon-eye { background-image: var(--icon-eye-open); } + .app-body .icon-eraser { background-image: var(--icon-broom); } + .app-body .icon-pencil { background-image: var(--icon-edited-accent); } + .app-body .icon-edit { background-image: var(--icon-edited-accent); } -@media screen and (min-width:1173px) { +@media screen and (width >= 1173px) { .app-body .navigation-panel .column-link .icon-home { background-image: var(--icon-home-accent); } + .app-body .navigation-panel .column-link.active .icon-home { background-image: var(--icon-home-accent-active); } + .app-body .navigation-panel .column-link .icon-bell { background-image: var(--icon-bell-accent); } + .app-body .navigation-panel .column-link.active .icon-bell { background-image: var(--icon-bell-accent-active); } + .app-body .navigation-panel .column-link .icon-explore { background-image: var(--icon-explore-accent); } + .app-body .navigation-panel .column-link.active .icon-explore { background-image: var(--icon-explore-accent-active); } + .app-body .navigation-panel .column-link .icon-search { background-image: var(--icon-search-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-search { background-image: var(--icon-search-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-globe { background-image: var(--icon-globe-accent); } + .app-body .navigation-panel .column-link.active .icon-globe { background-image: var(--icon-globe-accent-active); } + .app-body .navigation-panel .column-link .icon-at { background-image: var(--icon-direct-messages-accent); } + .app-body .navigation-panel .column-link.active .icon-at { background-image: var(--icon-direct-messages-accent-active); } + .app-body .navigation-panel .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-star { background-image: var(--icon-star-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-star { background-image: var(--icon-star-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-list-ul { background-image: var(--icon-list-accent); } + .app-body .navigation-panel .column-link.active .icon-list-ul, - .app-body .navigation-panel .column-link:has(+ .list-panel > .column-link.active) .icon-list-ul { + .app-body + .navigation-panel + .column-link:has(+ .list-panel > .column-link.active) + .icon-list-ul { background-image: var(--icon-list-accent-active); } + .app-body .navigation-panel .column-link .icon-cog { background-image: var(--icon-settings-accent); } + .app-body .navigation-panel .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent-active); } + .app-body .icon-flag { background-image: var(--icon-moderation-accent); } + .app-body .icon-tachometer { background-image: var(--icon-administration-accent); } } - - /* Links */ .app-body a.status-link:not(.mention, .hashtag), .app-body a:is(.status-link, .mention, .navigation-bar__profile-edit) span, @@ -1424,41 +1599,63 @@ button.icon-button:is( text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body a.status-link:not(.mention, .hashtag):is(:active, :focus, :hover), -.app-body a:is(.status-link, .mention, .navigation-bar__profile-edit):is(:active, :focus, :hover) span, -.app-body :is(.account__header__fields, .account__header__content, .trends__item__name) a:is(:active, :focus, :hover) span, .app-body -:is( - .detailed-status__display-name, - .reply-indicator__display-name, - .status__display-name, - a.account__display-name - ):is(:active, :focus, :hover) -.display-name strong, + a:is(.status-link, .mention, .navigation-bar__profile-edit):is( + :active, + :focus, + :hover + ) + span, +.app-body + :is(.account__header__fields, .account__header__content, .trends__item__name) + a:is(:active, :focus, :hover) + span, +.app-body + :is( + .detailed-status__display-name, + .reply-indicator__display-name, + .status__display-name, + a.account__display-name + ):is(:active, :focus, :hover) + .display-name + strong, .app-body .status__prepend a:is(:active, :focus, :hover) bdi, -.app-body a.notification-request__link:is(:active, :focus, :hover) .notification-request__name__display-name strong, +.app-body + a.notification-request__link:is(:active, :focus, :hover) + .notification-request__name__display-name + strong, .app-body .more-from-author a:is(:active, :focus, :hover) bdi { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body a.mention:is(:active, :focus, :hover), -.app-body :is(.account__header__fields, .account__header__content) a:is(:active, :focus, :hover), -.app-body :is(.detailed-status__datetime, .status__relative-time):is(:active, :focus, :hover) { +.app-body + :is(.account__header__fields, .account__header__content) + a:is(:active, :focus, :hover), +.app-body + :is(.detailed-status__datetime, .status__relative-time):is( + :active, + :focus, + :hover + ) { text-decoration: none !important; } + .app-body .account__header__fields .verified a span { display: inline; } - - /* 📝 Compose panel ---------------- */ .app-body .compose-form { gap: 0; } + .app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 23px 15px 15px 18px; @@ -1468,12 +1665,14 @@ button.icon-button:is( border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); transition: - background-color .2s, - border-color .2s; + background-color 0.2s, + border-color 0.2s; } + .app-body .navigation-bar strong { color: var(--color-content-fg); } + .app-body .navigation-bar .account { background-color: transparent; padding-left: 0; @@ -1482,18 +1681,22 @@ button.icon-button:is( border-right: 0; border-bottom: 0; } + .app-body .navigation-bar .account__display-name { line-height: 1.25; } + .app-body :is(.navigation-bar, .reply-indicator) .account__avatar { outline: 6px solid var(--color-content-bg); border-radius: 8px; position: relative; z-index: 2; } + .app-body .reply-indicator__line { z-index: 1; } + .app-body .compose-form__highlightable { border-top: 0; border-left: 1px solid var(--color-lines); @@ -1504,93 +1707,134 @@ button.icon-button:is( border-top-left-radius: 0; border-top-right-radius: 0; background-color: var(--color-content-bg); - transition: all .2s; + transition: all 0.2s; } -.app-body .compose-form .reply-indicator:has(~ .compose-form__highlightable:focus-within), -.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within), -.app-body .compose-form .compose-form__warning:has(~ .compose-form__highlightable:focus-within), + +.app-body + .compose-form + .reply-indicator:has(~ .compose-form__highlightable:focus-within), +.app-body + .compose-form + .navigation-bar:has(~ .compose-form__highlightable:focus-within), +.app-body + .compose-form + .compose-form__warning:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form__highlightable:focus-within { border-color: var(--color-accent); } + .app-body .compose-form .reply-indicator + .navigation-bar, -.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within), +.app-body + .compose-form + .navigation-bar:has(~ .compose-form__highlightable:focus-within), .app-body .reply-indicator { background-color: var(--color-content-bg); } + .app-body .compose-form__highlightable.active { box-shadow: none; } -.app-body .compose-form -:is( - .autosuggest-textarea__suggestions, - .autosuggest-textarea__textarea, - .autosuggest-textarea__suggestions__item, - .compose-form__modifiers - ) { + +.app-body + .compose-form + :is( + .autosuggest-textarea__suggestions, + .autosuggest-textarea__textarea, + .autosuggest-textarea__suggestions__item, + .compose-form__modifiers + ) { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; border-top: 0; border-radius: 0; } + .app-body .compose-form .autosuggest-textarea__textarea { padding-inline-start: 20px; } + .app-body .compose-form .autosuggest-textarea__textarea::placeholder { font-size: 130%; - opacity: .5; + opacity: 0.5; } + .app-body .autosuggest-textarea__textarea::placeholder, .app-body .autosuggest-account .display-name__html { color: var(--color-content-fg); } + .app-body .autosuggest-account .display-name__account, .app-body .hover-card .display-name__account, .app-body .hover-card .account-fields dl dt { color: var(--color-content-fg-muted); } + .app-body .autosuggest-textarea__suggestions { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, .25), - 0 8px 10px -6px rgba(0, 0, 0, .25); + 0 20px 25px -5px rgba(0, 0, 0, 25%), + 0 8px 10px -6px rgba(0, 0, 0, 25%); } + .app-body .autosuggest-textarea__suggestions__item { color: var(--color-content-fg); } -.app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), -.app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { + +.app-body + .autosuggest-textarea__suggestions__item:is( + .selected, + :active, + :focus, + :hover + ), +.app-body + .autosuggest-textarea__suggestions__item:is( + .selected, + :active, + :focus, + :hover + ) + .autosuggest-account + :is(.display-name__account, .display-name__html) { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .autosuggest-textarea__suggestions, .app-body .autosuggest-textarea__suggestions__item:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .autosuggest-account .account__avatar { border: 0; } + .app-body .dropdown-button { border-radius: 8px; border-color: var(--color-accent-bg); color: var(--color-accent); padding: 5px 8px; - transition: border-color .2s; + transition: border-color 0.2s; } + .app-body .dropdown-button:hover { border-color: var(--color-accent); } + .app-body .dropdown-button.active, .app-body .column-settings .dropdown-button.active { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .column-settings .dropdown-button { background-color: var(--color-accent-bg); } + .app-body .reply-indicator { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -1600,27 +1844,32 @@ button.icon-button:is( box-shadow: none; margin: 0; padding: 18px 15px 0 18px; - transition: all .2s; + transition: all 0.2s; } + .app-body .reply-indicator p { overflow: hidden; } -.app-body .reply-indicator__line:before { + +.app-body .reply-indicator__line::before { background-color: var(--color-accent); z-index: 1; - opacity: .6; + opacity: 0.6; } + .app-body .reply-indicator + .navigation-bar { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 16px; } + .app-body .reply-indicator .display-name__account, .app-body .reply-indicator__attachments { color: var(--color-content-fg); - opacity: .7; + opacity: 0.7; } + .app-body .reply-indicator__attachments { margin-top: 8px; } @@ -1632,36 +1881,42 @@ button.icon-button:is( padding-inline-start: 20px; padding-bottom: 17px; } + .app-body .edit-indicator__header { color: var(--color-content-fg); } + .app-body .edit-indicator__header > *:not(.edit-indicator__cancel) { - opacity: .7; + opacity: 0.7; } + .app-body .edit-indicator__content { color: var(--color-content-fg); } + .app-body .edit-indicator__content a { color: var(--color-accent); } + .app-body .edit-indicator__attachments { color: var(--color-content-fg); - opacity: .7; + opacity: 0.7; } -.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active) { +.app-body .navigation-bar .icon-button:not(:has(.icon-bars), .active) { border: 1px solid var(--color-accent-bg); color: var(--color-accent); border-radius: 8px; - transition: all .2s; -} -.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover { - border-color: var(--color-accent); -} -.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):active { - background-color: var(--color-accent-bg); + transition: all 0.2s; } +.app-body .navigation-bar .icon-button:not(:has(.icon-bars), .active):hover { + border-color: var(--color-accent); +} + +.app-body .navigation-bar .icon-button:not(:has(.icon-bars), .active):active { + background-color: var(--color-accent-bg); +} .app-body .compose-form .compose-form__warning { background-color: var(--color-accent-bg); @@ -1669,8 +1924,9 @@ button.icon-button:is( border-right: 1px solid var(--color-lines); border-radius: 0; box-shadow: none; - transition: border-color .2s; + transition: border-color 0.2s; } + .app-body .compose-form .compose-form__warning, .app-body .simple_form .recommended, .app-body .compose-form .compose-form__warning, @@ -1679,32 +1935,40 @@ button.icon-button:is( .app-body .navigation-bar__profile-edit { color: var(--color-accent); } + .app-body .simple_form .recommended { border-color: var(--color-lines); } + .app-body .compose-form__sensitive-button .icon-button:hover { background-color: transparent; } -.app-body .compose-form__sensitive-button input[type=checkbox]:checked { + +.app-body .compose-form__sensitive-button input[type='checkbox']:checked { background-color: var(--color-accent); border-color: var(--color-accent); } + .app-body .spoiler-input__border { display: none; } + .app-body .compose-form .autosuggest-input { box-sizing: border-box; } + .app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } + .app-body .compose-form .spoiler-input .autosuggest-input { background-color: var(--color-content-bg); border-bottom: 0; padding: 5px; } + .app-body .compose-form .spoiler-input__input { background-image: var(--icon-warning); background-position: 10px center; @@ -1717,26 +1981,42 @@ button.icon-button:is( border-radius: 8px; padding: 8px 15px 8px 36px; font-weight: 500; - transition: all .2s; + transition: all 0.2s; } + .app-body .compose-form .spoiler-input__input:focus { border-color: var(--color-accent); background-color: var(--color-content-bg); } + .app-body .display-name { color: var(--color-content-fg); } -.app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon { + +.app-body + .compose-form__upload + .icon-button.compose-form__upload__delete + .icon { width: 15px; height: 15px; } -.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { + +.app-body + .compose-form + .compose-form__modifiers + .compose-form__upload + .icon-button { color: #ffffff; } -.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { - background-color: rgba(0, 0, 0, .4); + +.app-body + .compose-form + .compose-form__modifiers + .compose-form__upload + .icon-button:is(:active, :focus, :hover) { + background-color: rgba(0, 0, 0, 40%); } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .compose-form { padding: 15px; } @@ -1747,59 +2027,70 @@ button.icon-button:is( vertical-align: bottom; } - .app-body .character-counter { color: var(--color-content-fg); opacity: 0; font-size: 15px; font-weight: 500; transition: - opacity .3s, - margin-right .3s; + opacity 0.3s, + margin-right 0.3s; transform-origin: right center; margin-right: -10px; } -.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter { + +.app-body + .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) + .character-counter { opacity: 1; margin-right: 0; } + .app-body .character-counter--over { color: #df405a; font-weight: 500; - animation: bounce .3s 1; + animation: bounce 0.3s 1; } .compose-form__footer { gap: 10px; padding: 0; } + .app-body .compose-form__dropdowns { gap: 6px; padding: 0 12px; } + .app-body .compose-form__actions { border-radius: 0 0 8px 8px; padding: 10px 12px; background-color: var(--color-content-secondary-bg); } + .app-body .compose-form__buttons { gap: 1px; } + .app-body .compose-form__buttons .icon-button { padding: 6px; border-radius: 8px; - transition: all .2s; + transition: all 0.2s; } + .app-body .compose-form__buttons .icon { transform: scale(1.2); width: 20px; } + .app-body .compose-form__buttons .icon-button:is(.active, .active:hover) { background-color: var(--color-accent); } + .app-body .compose-form__submit { max-width: 40px; } + .app-body .compose-form__submit .button { height: 40px; max-width: 40px; @@ -1810,50 +2101,65 @@ button.icon-button:is( background-image: var(--icon-send-inv); background-color: var(--color-accent); transition: - transform .2s, - background-color .2s, - border-color .2s; + transform 0.2s, + background-color 0.2s, + border-color 0.2s; } + .app-body .compose-form__submit .button:active { - transform: scale(.95); + transform: scale(0.95); } -.app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button { + +.app-body + .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) + .compose-form__submit + .button { background-image: var(--icon-send); background-color: var(--color-accent-bg); } -.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit { - animation: bounce-sml .2s ease-out 1; + +.app-body + .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) + .compose-form__submit { + animation: bounce-sml 0.2s ease-out 1; } .app-body .upload-area__background { background-color: var(--color-secondary-bg); border-radius: 8px; } + .app-body .upload-area__content { border-color: var(--color-accent-focus); border-radius: 8px; } + .app-body .upload-progress__tracker { background-color: var(--color-accent); } + .app-body .upload-progress__backdrop { background-color: var(--color-accent-bg); } + .app-body .upload-progress .icon { - color: var(--color-accent) + color: var(--color-accent); } + .app-body .upload-progress__message, .app-body .upload-progress__message span { color: var(--color-content-fg); } + .app-body .compose-form__upload .icon-button { - background-color: rgba(0, 0, 0, .75); + background-color: rgba(0, 0, 0, 75%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--color-accent-fg); border-radius: 8px; padding: 6px; } + .app-body .compose-form__upload .icon-button:hover { background-color: #444; color: var(--color-accent-fg); @@ -1863,29 +2169,35 @@ button.icon-button:is( .app-body .compose-form__poll { gap: 3px; } + .app-body .compose-form__poll .poll__option { margin-bottom: 2px; } -.app-body .poll__option input[type=text] { + +.app-body .poll__option input[type='text'] { border-radius: 8px; padding: 7px 12px; border: 1px solid var(--color-lines); background-color: var(--color-content-bg); color: var(--color-content-fg); - transition: all .2s; + transition: all 0.2s; } -.app-body .poll__option input[type=text]:focus { + +.app-body .poll__option input[type='text']:focus { border-color: var(--color-accent); } + .app-body .compose-form__poll__footer { margin-top: 5px; padding-inline-start: 12px; gap: 6px; margin-bottom: -10px; } + .app-body .compose-form__poll__select__label { display: none; } + .app-body .compose-form__poll__select__value { background-position: 8px center; background-size: 15px; @@ -1897,38 +2209,71 @@ button.icon-button:is( font-size: 12px; line-height: 1.33; transition: - background-color .2s, - border-color .2s; + background-color 0.2s, + border-color 0.2s; cursor: pointer; } + .app-body .compose-form__poll__select__value:is(:active, :hover, :focus) { border-color: var(--color-accent); outline: 0; } + .app-body .compose-form__poll__select__value:active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value { + +.app-body + .compose-form__poll__footer + .compose-form__poll__select:first-child + .compose-form__poll__select__value { background-image: var(--icon-timer); } -.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value:active { + +.app-body + .compose-form__poll__footer + .compose-form__poll__select:first-child + .compose-form__poll__select__value:active { background-image: var(--icon-timer-inv); } -.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value { + +.app-body + .compose-form__poll__footer + .compose-form__poll__select:last-child + .compose-form__poll__select__value { background-image: var(--icon-check-radio); } -.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:active, -.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked):active { + +.app-body + .compose-form__poll__footer + .compose-form__poll__select:last-child + .compose-form__poll__select__value:active, +.app-body + .compose-form__poll__footer + .compose-form__poll__select:last-child + .compose-form__poll__select__value:has(option:first-child:checked):active { background-image: var(--icon-check-radio-inv); } -.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked) { + +.app-body + .compose-form__poll__footer + .compose-form__poll__select:last-child + .compose-form__poll__select__value:has(option:first-child:checked) { background-image: var(--icon-check-radio); } -.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked) { + +.app-body + .compose-form__poll__footer + .compose-form__poll__select:last-child + .compose-form__poll__select__value:has(option:last-child:checked) { background-image: var(--icon-check-box); } -.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked):active { + +.app-body + .compose-form__poll__footer + .compose-form__poll__select:last-child + .compose-form__poll__select__value:has(option:last-child:checked):active { background-image: var(--icon-check-box-inv); } @@ -1937,16 +2282,18 @@ button.icon-button:is( } .app-body .compose-form__poll .poll__option.empty:not(:focus-within) { - opacity: .8; + opacity: 0.8; } .app-body .compose-form__poll-wrapper, .app-body .compose-form__poll-wrapper .poll__footer { border-top: 0; } + .app-body .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } + .app-body .compose-form__poll-wrapper .autosuggest-input input, .app-body .compose-form__poll-wrapper select { background-color: var(--color-content-bg); @@ -1954,20 +2301,25 @@ button.icon-button:is( border-radius: 8px; color: var(--color-content-fg); } + .app-body .compose-form__poll-wrapper .autosuggest-input input:focus, .app-body .compose-form__poll-wrapper select:focus { border-color: var(--color-accent); } + .app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } + .app-body .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } + .app-body .compose-form__poll-button .icon-button.active { background-color: var(--color-accent); } + .app-body .compose-form__poll-button .icon-button.active .icon-tasks { background-image: var(--icon-poll-active); } @@ -1976,6 +2328,7 @@ button.icon-button:is( .app-body .muted .poll { color: var(--color-content-fg-muted); } + .app-body .poll__footer { color: var(--color-content-fg-muted); display: flex; @@ -1986,6 +2339,7 @@ button.icon-button:is( font-size: 12px; padding: 0; } + .app-body .poll__link { color: var(--color-accent); text-decoration: none; @@ -1996,64 +2350,76 @@ button.icon-button:is( font-size: 12px; font-weight: 500; height: 32px; - transition: all .3s; + transition: all 0.3s; } + .app-body .poll__link:hover { border-color: var(--color-accent); } + .app-body .poll__link:active { background-color: var(--color-accent-bg); } + .app-body .poll__option.editable .poll__input { display: none; } + .app-body .poll li { margin-bottom: 4px; position: relative; border-radius: 8px; overflow: hidden; } + .app-body :is(.status, .detailed-status) .poll__option { border: 1px solid var(--color-lines-translucent); color: var(--color-content-fg); font-weight: 500; padding: 8px; border-radius: 8px; - transition: all .2s; + transition: all 0.2s; position: relative; z-index: 1; align-items: center; } + .app-body .poll__option.selectable { cursor: pointer; } + .app-body .poll__option.selectable:active { - transform: scale(.98); + transform: scale(0.98); } + .app-body .poll__option.selectable:hover { border-color: var(--color-accent); color: var(--color-accent); } + .app-body .poll__option.selectable:has(.poll__input.active) { border-color: var(--color-accent); background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .poll__option.selectable .poll__input:not(.active) { border-width: 0; outline-width: 0 !important; background-color: var(--color-lines); - transition: - background .2s; + transition: background 0.2s; } + .app-body .poll__option.selectable:hover .poll__input:not(.active) { background-color: var(--color-accent-bg); } + .app-body .poll__option.selectable .poll__input.active { border-width: 3px; border-color: var(--color-accent-bg); outline-width: 1px !important; } + .app-body .poll__footer .button.button-secondary { box-sizing: border-box; padding: 0 16px; @@ -2063,35 +2429,42 @@ button.icon-button:is( color: var(--color-accent-fg); float: inline-end; } + .app-body .poll__footer .button.button-secondary:hover { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } + .app-body .poll__footer .button.button-secondary:disabled { opacity: 1; background-color: var(--color-content-secondary-bg); color: var(--color-accent); display: none; } + .app-body .poll__footer .button.button-secondary:not(:disabled) { - animation: bounce-sml .3s ease-out 1; + animation: bounce-sml 0.3s ease-out 1; } + .app-body .poll__footer .button.button-secondary:active { - transform: scale(.95); + transform: scale(0.95); } + .app-body .poll__voted { position: absolute; right: 3px; height: 20px; color: var(--color-accent); } + .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted { right: 28px; color: var(--color-confirm-fg); } + .app-body .poll__chart { background: var(--color-lines); - opacity: .8; + opacity: 0.8; height: auto; border-radius: 8px 0 0 8px; position: absolute; @@ -2104,20 +2477,24 @@ button.icon-button:is( opacity: 1; } } + .app-body .poll__chart.leading, .app-body .muted .poll__chart.leading, .app-body .poll__option:has(.poll__voted) + .poll__chart.leading { background: var(--color-confirm); - opacity: .5; + opacity: 0.5; } + .app-body .poll__option:has(.poll__voted) { border-color: var(--color-accent); background-color: transparent; } + .app-body .poll__option:has(.poll__voted) + .poll__chart { background-color: color-mix(in srgb, var(--color-accent), transparent 70%); opacity: 1; } + .app-body .poll__option:has(+ .poll__chart.leading), .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { border-color: color-mix(in srgb, var(--color-confirm), transparent 30%); @@ -2128,6 +2505,7 @@ button.icon-button:is( background-repeat: no-repeat; background-image: var(--icon-trophy); } + .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { border-color: var(--color-confirm); } @@ -2136,9 +2514,11 @@ button.icon-button:is( .app-body .emoji-picker-dropdown > .icon-button .icon { background-image: var(--icon-emoji-accent); } + .app-body .emoji-picker-dropdown > .icon-button.active .icon { background-image: var(--icon-emoji-accent-inv); } + .app-body .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; @@ -2146,109 +2526,124 @@ button.icon-button:is( border: 1px solid var(--color-lines); box-shadow: var(--dropdown-shadow); } + .app-body .emoji-mart { display: block; } + .app-body .emoji-mart-bar:first-child { background-color: var(--color-content-secondary-bg); border-color: var(--color-lines); padding-top: 2px; } + .app-body .emoji-mart-anchor-bar { background-color: var(--color-accent); } + .app-body .emoji-mart-anchor-selected { color: var(--color-accent); } + .app-body .emoji-mart-anchor-icon svg path, .app-body .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } + .app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, .app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, .app-body .emoji-mart-search-icon svg path { fill: var(--color-accent); } + .app-body .emoji-mart-search-icon, .app-body .emoji-mart-search-icon:disabled, .app-body .emoji-mart-search-icon svg { opacity: 1; } + .app-body .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } + .app-body .emoji-mart-search, .app-body .emoji-mart-scroll, .app-body .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } + .app-body .emoji-mart-search input:focus { border-color: var(--color-accent); outline: 0; } + .app-body .emoji-mart-search input::placeholder { color: var(--color-accent); } - - /* Zoom on emojis on hover (in post content only */ -.app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ +.app-body .status__content:not(.status__content--collapsed) { + /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } + .app-body .status__content .emojione { - transition: transform .8s .8s; + transition: transform 0.8s 0.8s; } + .app-body .status__content .emojione:hover { transform: scale(2.5); } - - - /* 💬 Posts -------- */ .app-body .reply-indicator__content, .app-body .status__content { color: var(--color-content-fg); } + .app-body .account__display-name strong, .app-body .status__display-name strong, .app-body .status__info .status__display-name .display-name__account, .app-body .status__prepend a bdi { color: var(--color-content-fg); } + .app-body .translate-button { color: var(--color-content-fg-muted); } + .app-body .translate-button__meta, .app-body .translate-button button, .app-body .status__content__translate-button { font-size: 85%; } + .app-body .status__content__translate-button, .app-body .translate-button .link-button { width: 32px; height: 32px; bottom: 13px; right: 52px; - padding: 0px; + padding: 0; position: absolute; background-size: 20px; background-repeat: no-repeat; background-position: center; background-image: var(--icon-translate-accent); border-radius: 8px; - transition: all .3s; + transition: all 0.3s; background-color: transparent; } + .app-body .detailed-status .status__content__translate-button, .app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); @@ -2258,78 +2653,98 @@ button.icon-button:is( right: 60px; bottom: 20px; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .status__content__translate-button, .app-body .translate-button .link-button { bottom: 10px; } } -.app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child -:is( - .translate-button .link-button, - .status__content__translate-button - ) { + +.app-body + .scrollable + > div:is(:last-child, :only-child) + .detailed-status__wrapper:last-child + :is(.translate-button .link-button, .status__content__translate-button) { bottom: 12px; } + .app-body .status__content__translate-button:hover, .app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } + .app-body .translate-button .link-button, .app-body .detailed-status .translate-button .link-button, .app-body .translate-button .link-button:hover, .app-body .detailed-status .translate-button .link-button:hover { background-image: var(--icon-translate-active); background-color: var(--color-accent); - transform: scale(.8); + transform: scale(0.8); } + .app-body .status__content__translate-button > span, .app-body .translate-button .link-button > span, .app-body .notification .status__content__translate-button { display: none; } + .app-body .account__display-name strong, .app-body .status__display-name strong, .app-body .notification-request__name__display-name strong, .app-body .status__prepend a bdi { font-weight: bold; } + .app-body .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } + .app-body .status__wrapper { - transition: background .3s; + transition: background 0.3s; } + .app-body .status__wrapper, .app-body .detailed-status__wrapper { --color-post-bg: var(--color-content-bg); + background-color: var(--color-post-bg); padding: 13px 12px; position: relative; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .status__wrapper { padding: 10px 8px; } + .app-body .notification-ungrouped .status__wrapper { padding: 13px 12px; } } + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper, .app-body .scrollable > div:first-child > .status__wrapper, .app-body .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } + .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, .app-body .scrollable > div > article:last-child > div > .status__wrapper, -.app-body .search-results__section > div:last-child >.status__wrapper { +.app-body .search-results__section > div:last-child > .status__wrapper { border-bottom: 1px solid var(--color-lines); } -.app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + +.app-body + .dismissable-banner + + .scrollable + > div + > article:first-child + > div + > .status__wrapper { border-top: 0; } + .app-body .status__info { height: 22px; width: calc(100% + 56px); @@ -2340,19 +2755,23 @@ button.icon-button:is( line-height: 0.625; align-items: start; } + .app-body .status__info .status__display-name { overflow: visible; align-items: start; max-height: 22px; } + .app-body .status__info .status__display-name .display-name bdi, .app-body .status__info .status__display-name .display-name__account { vertical-align: top; } + .app-body .status__info .status__display-name .display-name__account { display: inline; - opacity: .6; + opacity: 0.6; } + .app-body .status__relative-time { height: 22px; color: var(--color-content-fg); @@ -2361,29 +2780,34 @@ button.icon-button:is( inset-inline-end: 20px; z-index: 1; } + .app-body .status__relative-time > * { - opacity: .6; + opacity: 0.6; } + .app-body .status__relative-time::before, .app-body .status__relative-time::after { position: absolute; - content: " "; + content: ' '; display: block; height: 100%; z-index: -1; - transition: all .3s; + transition: all 0.3s; } + .app-body .status__relative-time::before { width: 20px; inset-inline-start: -20px; background: linear-gradient(90deg, transparent, var(--color-post-bg)); - transition: all .2s; + transition: all 0.2s; } + .app-body .status__relative-time::after { inset-inline-start: 0; inset-inline-end: 0; background-color: var(--color-post-bg); } + .app-body .status__relative-time time + abbr { display: inline-block; width: 18px; @@ -2396,37 +2820,59 @@ button.icon-button:is( background-image: var(--icon-edited); color: transparent; } + .app-body .status__relative-time .status__visibility-icon { order: 1; } + .app-body .status__relative-time time { order: 3; } + .app-body .status__relative-time time + abbr { order: 2; } + .app-body .status__avatar { margin-bottom: -10px; z-index: 2; border-radius: 50%; outline: 6px solid var(--color-post-bg); background-color: var(--color-post-bg); - transition: outline .3s; + transition: outline 0.3s; } -.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-base .account__avatar { + +.app-body + .status__prepend + + .status + .status__avatar + .account__avatar-overlay-base + .account__avatar { width: 46px !important; height: 46px !important; } -.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay { + +.app-body + .status__prepend + + .status + .status__avatar + .account__avatar-overlay-overlay { position: absolute; top: -34px; right: -38px; pointer-events: none; } -.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay .account__avatar { + +.app-body + .status__prepend + + .status + .status__avatar + .account__avatar-overlay-overlay + .account__avatar { width: 29px !important; height: 29px !important; } + .app-body .reply-indicator__content, .app-body .status__content { line-height: 1.4; @@ -2441,8 +2887,8 @@ button.icon-button:is( font-style: italic; } - /* 📏 Post dividers */ + /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ .app-body .status::before, .app-body .notification__message::before { @@ -2452,10 +2898,10 @@ button.icon-button:is( width: calc(100% - 78px); right: 0; top: -1px; - content: ""; - opacity: .7; + content: ''; + opacity: 0.7; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .status::before, .app-body .notification__message::before { width: calc(100% - 73px); @@ -2478,9 +2924,21 @@ button.icon-button:is( .app-body .dismissable-banner + article .status::before { display: none; } -@media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ - .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, - .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{ +@media screen and (width >= 890px) and (width <= 1174px) { + /* no divider above first post in a column thread on medium-size devices */ + .app-body + .scrollable + > div:first-child + > div:first-child + > .status__wrapper + .status::before, + .app-body + .scrollable + > div + > article:first-child + > div + > .status__wrapper + .status::before { display: none; } } @@ -2489,104 +2947,152 @@ button.icon-button:is( .app-body .status--first-in-thread { border-top: 0; } + .app-body .status--first-in-thread::before { width: 100%; right: 0; } -.app-body .status--in-thread -:is( - .attachment-list, - .audio-player, - .hashtag-bar, - .media-gallery, - .picture-in-picture-placeholder, - .status-card, - .status__action-bar, - .status__content, - .video-player - ) { + +.app-body + .status--in-thread + :is( + .attachment-list, + .audio-player, + .hashtag-bar, + .media-gallery, + .picture-in-picture-placeholder, + .status-card, + .status__action-bar, + .status__content, + .video-player + ) { margin-left: 0; width: auto; } + .app-body .status__line--first { height: 100%; } + .app-body .status__line--full { height: calc(100% + 32px); } + /* Default lines when replying in real time */ -.app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { +.app-body + div[tabindex='-1']:has(.status--in-thread) + .status--in-thread:not(.status--first-in-thread) + > .status__line:not(.status__line--full) { height: 0; } + /* Hide line before first in thread */ -.app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), -.app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { +.app-body + div[tabindex='-1']:has(.status--in-thread) + + div[tabindex='-1'] + > .status--in-thread.status--first-in-thread + > .status__line:not(.status__line--full), +.app-body + div[tabindex='-1']:has(.detailed-status__wrapper) + + div[tabindex='-1'] + > .status__wrapper + .status__line:not(.status__line--full) { height: 0; } -.app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { + +.app-body + div[tabindex='-1']:has(+ div[tabindex='-1'] > .detailed-status__wrapper) + .status--in-thread + .status__line { height: calc(100% - 32px) !important; } -.app-body div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, +.app-body + div[tabindex='-1'] + + div[tabindex='-1'] + > .status__wrapper + > .status-reply.status--in-thread + > .status__line.status__line--full, .app-body .status__line--full.status__line--first { top: 32px; height: 100%; z-index: 1; } + .app-body .detailed-status { background-color: transparent; border-top: 0; } + /* Threaded line, actually */ .app-body .status__line { margin-inline-start: 6px; border-inline-start: 2px solid var(--color-accent); -webkit-border-start: 2px solid var(--color-accent); - opacity: .6; + opacity: 0.6; } + .app-body .status__line--full::before { background-color: var(--color-accent); } + /* Hide the "stub" from the first status line */ -div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line, -.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { +div[tabindex='-1'] + + div[tabindex='-1'] + > .status__wrapper + > .status-reply.status--in-thread + > .status__line.status__line--full, +.app-body + .status-reply.status--in-thread.status--first-in-thread + > .status__line, +.app-body + .status-reply.status--in-thread.status--first-in-thread + > .status__line--full::before { top: 32px; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .status__line { inset-inline-start: 35px; } } - /* ⏺️ Posts when in focus */ .app-body -:is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus, + :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus, .app-body -:is(.focusable, .status__wrapper.focusable):focus -:is(.detailed-status, .detailed-status__action-bar), + :is(.focusable, .status__wrapper.focusable):focus + :is(.detailed-status, .detailed-status__action-bar), .app-body .focusable:focus .notification-ungrouped__header, .app-body .focusable:focus .status__wrapper, .app-body .focusable:focus { outline: 0; + --color-post-bg: var(--color-content-bg-focus); + background-color: var(--color-post-bg); } -@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ +@media screen and (width >= 1175px) { + /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ .app-body .status__wrapper:has(.status__content:hover), - .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover), + .app-body + .notification__message:has(+ div > .status__wrapper .status__content:hover), .app-body .status__wrapper:has(.status__content:hover) .status__avatar, - .app-body .notification-ungrouped:has(.status__wrapper .status__content:hover) .notification-ungrouped__header { + .app-body + .notification-ungrouped:has(.status__wrapper .status__content:hover) + .notification-ungrouped__header { --color-post-bg: var(--color-content-bg-focus); } } -.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar { + +.app-body + :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus + .status__avatar { outline: 6px solid var(--color-post-bg); } /* 👁️ Post detailed view */ -.app-body .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ +.app-body .detailed-status__wrapper { + /* Set full-width divider above and below a detailed post */ background-color: var(--color-post-bg); border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); @@ -2596,44 +3102,60 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu inset 0 -5px var(--color-content-secondary-bg), inset 0 -6px var(--color-lines); } -.app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child { + +.app-body + .scrollable + > div:is(:last-child, :only-child) + .detailed-status__wrapper:last-child { padding-bottom: 12px; box-shadow: none; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .detailed-status { padding: 8px 8px 14px; } } + .app-body .detailed-status .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } + .app-body .detailed-status .status__content { line-height: 1.27; } + .app-body .detailed-status { padding-bottom: 8px; } + .app-body .detailed-status, .app-body .detailed-status__action-bar { background-color: var(--color-content-bg); border: 0; } + .app-body .detailed-status__display-name strong, .app-body .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } + .app-body .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } -.app-body :is(.compose-panel, .compose-form) .detailed-status__display-name strong { + +.app-body + :is(.compose-panel, .compose-form) + .detailed-status__display-name + strong { font-size: 14px; } + .app-body .detailed-status__display-name .display-name__account { - opacity: .7; + opacity: 0.7; } + .app-body .detailed-status__meta { color: var(--color-content-fg); display: flex; @@ -2647,9 +3169,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu overflow: hidden; position: relative; } + .app-body .detailed-status__meta::before { position: absolute; - content: " "; + content: ' '; display: block; height: 100%; z-index: 1; @@ -2657,6 +3180,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu inset-inline-end: 0; background: linear-gradient(90deg, transparent, var(--color-post-bg)); } + .app-body .detailed-status__meta__line { border-top: 0; border-bottom: 0; @@ -2664,44 +3188,53 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding-bottom: 0; gap: 6px; position: relative; - opacity: .6; + opacity: 0.6; } + .app-body .detailed-status__meta__line:first-child { color: transparent; padding-left: 20px; padding-right: 5px; gap: 0; } + .app-body .detailed-status__meta__line:first-child svg { position: absolute; left: 0; } + .app-body .detailed-status__meta__line:first-child > * { color: var(--color-content-fg); white-space: nowrap; } + .app-body .detailed-status__meta__line:last-child { flex: 100%; - opacity: .9; + opacity: 0.9; } + .app-body .detailed-status__application::before { - content: "\00B7\00A0"; + content: '\00B7\00A0'; margin-left: -3px; } -.app-body .detailed-status__link:is([href$="/reblogs"], [href$="/favourites"]) { + +.app-body .detailed-status__link:is([href$='/reblogs'], [href$='/favourites']) { padding-left: 20px; border-radius: 8px; background-position: left center; background-repeat: no-repeat; background-size: 15px; - transition: all .2s; + transition: all 0.2s; } -.app-body .detailed-status__link[href$="/reblogs"] { + +.app-body .detailed-status__link[href$='/reblogs'] { background-image: var(--icon-boost); } -.app-body .detailed-status__link[href$="/favourites"] { + +.app-body .detailed-status__link[href$='/favourites'] { background-image: var(--icon-star); } + .app-body .detailed-status__meta__line .dropdown-menu__text-button { overflow: hidden; padding-left: 20px; @@ -2711,66 +3244,90 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-size: 15px; text-align: start; } + .app-body .detailed-status__meta__line .dropdown-menu__text-button:is(:hover) { text-decoration: none; } + .app-body .detailed-status__action-bar { padding: 0 12px; justify-content: left; gap: 8px; width: auto; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .detailed-status__action-bar { padding-left: 0; padding-right: 0; } } + .app-body .detailed-status__button { width: 40px; height: 40px; flex: unset; } + .app-body .detailed-status__action-bar-dropdown { position: absolute; right: 18px; } + .app-body .detailed-status__meta .animated-number { color: var(--color-content-fg); font-weight: 700; } + .app-body .detailed-status__meta .dropdown-menu__text-button .animated-number { font-weight: 500; } + .app-body .status__action-bar .animated-number { color: var(--color-accent); font-weight: 500; } -.app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) { + +.app-body + .status__action-bar__button:has(.icon-button__counter > .animated-number) { padding-left: 4px; padding-right: 4px; margin-right: 2px; } + .app-body -:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) -.active -.icon-retweet + .icon-button__counter > .animated-number { + :is( + .status__action-bar, + .detailed-status__action-bar, + .picture-in-picture__footer + ) + .active + .icon-retweet + + .icon-button__counter + > .animated-number { color: var(--color-accent); } + .app-body -:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) -.active -.icon-star + .icon-button__counter -> .animated-number { - color: #FFBF00; + :is( + .status__action-bar, + .detailed-status__action-bar, + .picture-in-picture__footer + ) + .active + .icon-star + + .icon-button__counter + > .animated-number { + color: #ffbf00; } .app-body article > .account { padding: 16px; } + .app-body .account-timeline__header + article > .account { border-top: 1px solid var(--color-lines); } + .app-body .detailed-status__link { display: inline-flex; position: static; @@ -2781,37 +3338,43 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .hashtag-bar a, .app-body .hashtag-bar .link-button { color: var(--color-content-fg-muted); - transition: all .1s; + transition: all 0.1s; } + .app-body .hashtag-bar a { font-weight: 500; } + .app-body .hashtag-bar .link-button { margin-left: 3px; } + .app-body .hashtag-bar a { - background-color: - color-mix( - in srgb, - var(--color-content-fg), - transparent 92% - ); - transition: all .3s; + background-color: color-mix( + in srgb, + var(--color-content-fg), + transparent 92% + ); + transition: all 0.3s; padding: 3px 8px; border-radius: 8px; } + .app-body .hashtag-bar a:hover, .app-body .hashtag-bar .link-button:hover { color: var(--color-accent); } + .app-body .hashtag-bar a:hover { background-color: var(--color-accent-bg); } + .app-body .hashtag-bar a:active, .app-body .hashtag-bar a:focus { color: var(--color-accent-fg); background-color: var(--color-accent); } + .app-body .hashtag-bar a:hover span { text-decoration: none; } @@ -2822,14 +3385,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu margin-top: 8px; gap: 9px; } + .app-body .status__action-bar .status__action-bar__button-wrapper { flex-grow: 0; } + .app-body -:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) -:is(button, .status__action-bar__dropdown) { - transition: all .3s; + :is( + .status__action-bar, + .detailed-status__action-bar, + .picture-in-picture__footer + ) + :is(button, .status__action-bar__dropdown) { + transition: all 0.3s; } + .app-body .status__action-bar__button-wrapper:last-child { position: absolute; right: 18px; @@ -2838,45 +3408,70 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar .icon-button.disabled { pointer-events: none; } + .app-body -:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) -.icon-button:is( - :active, - .active:active, - :focus, - .active:focus - ) { + :is( + .status__action-bar, + .detailed-status__action-bar, + .picture-in-picture__footer + ) + .icon-button:is(:active, .active:active, :focus, .active:focus) { background-color: transparent; } -.app-body .status__action-bar__button-wrapper:last-child .icon-button:is(.active, .active:active, .active:focus), -.app-body :is(.detailed-status__action-bar-dropdown, .status__action-bar-dropdown) .icon-button:is(.active, .active:active, .active:focus) { +.app-body + .status__action-bar__button-wrapper:last-child + .icon-button:is(.active, .active:active, .active:focus), +.app-body + :is(.detailed-status__action-bar-dropdown, .status__action-bar-dropdown) + .icon-button:is(.active, .active:active, .active:focus) { background-color: var(--color-accent); - transform: scale(.9); + transform: scale(0.9); } .app-body .icon-button.star-icon.deactivate > .icon-star, -.app-body .icon-button.star-icon.activate > .icon-star { /* Disable default star spinning animation */ +.app-body .icon-button.star-icon.activate > .icon-star { + /* Disable default star spinning animation */ animation: none; } + .app-body -:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) -.icon-button.star-icon.active -> .icon-star { - animation: bounce .4s ease-out !important; + :is( + .status__action-bar, + .detailed-status__action-bar, + .picture-in-picture__footer + ) + .icon-button.star-icon.active + > .icon-star { + animation: bounce 0.4s ease-out !important; } -.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet { + +.app-body .status__action-bar .icon-button.reblogPrivate > .icon-retweet { opacity: 1; } + .app-body -:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) -.icon-button.active>.icon-retweet { + :is( + .status__action-bar, + .detailed-status__action-bar, + .picture-in-picture__footer + ) + .icon-button.active + > .icon-retweet { animation: launch 1.2s ease-in 1 !important; } -.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, -.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { - animation: bounce-vertical .4s ease-out !important; + +.app-body + .status__action-bar + .icon-button.bookmark-icon.active + > .icon-bookmark, +.app-body + .detailed-status__action-bar + .icon-button.bookmark-icon.active + > .icon-bookmark { + animation: bounce-vertical 0.4s ease-out !important; } + .app-body .status__action-bar .icon-button, .app-body .detailed-status__action-bar .icon-button { min-width: 32px; @@ -2884,19 +3479,26 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 8px; position: relative; } + .app-body .detailed-status__action-bar .icon-button { min-width: 40px; height: 40px; } + .app-body .detailed-status__action-bar .icon-button > .icon { width: 25px; height: 25px; } -.app-body .detailed-status__action-bar .icon-button -.app-body .icon-button.star-icon.active, + +.app-body + .detailed-status__action-bar + .icon-button + .app-body + .icon-button.star-icon.active, .app-body .notification__favourite-icon-wrapper .star-icon { color: #ffb609; } + .app-body .status__prepend { display: inline-flex; padding: 0 10px; @@ -2913,75 +3515,95 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline-offset: -1px; font-size: 13px; } + .app-body .status__prepend:has(.status__prepend__icon .icon-retweet) { padding-left: 35px; } + .app-body .status__prepend__icon { height: 20px; text-align: right; } + .app-body .status__prepend .status__prepend__icon:has(.icon-retweet) { order: 2; } + .app-body .status__prepend__icon .icon { - transform: scale(.9); + transform: scale(0.9); } + .app-body .detailed-status__wrapper .status__prepend__icon { width: 46px; } + .app-body .status__prepend > span { color: var(--color-fg-muted); white-space: nowrap; } -.app-body .status__prepend:has(.status__prepend__icon > .icon-thumb-tack) > span { + +.app-body + .status__prepend:has(.status__prepend__icon > .icon-thumb-tack) + > span { color: var(--color-content-fg); font-weight: 600; } + .app-body .status__prepend .muted .emojione { opacity: 1; } + .app-body .status-card, .app-body .status-card.compact { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: none; - transition: all .3s; + transition: all 0.3s; border-radius: 8px; } + .app-body .status-card:hover, .app-body .status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } + .app-body .status-card:active, .app-body .status-card.compact:active { - transform: scale(.98); + transform: scale(0.98); } + .app-body .status-card__image { background: var(--color-content-secondary-bg); } + .app-body .status-card__image .icon { width: 32px; height: 32px; } -.app-body .status-card[href*="/@" i] { + +.app-body .status-card[href*='/@' i] { align-items: start; } -.app-body .status-card[href*="/@" i] .status-card__description { + +.app-body .status-card[href*='/@' i] .status-card__description { margin-top: 2px; white-space: normal; } -.app-body .status-card[href*="/@" i] .status-card__image { + +.app-body .status-card[href*='/@' i] .status-card__image { order: 2; background-color: transparent; padding: 8px; box-sizing: border-box; } -.app-body .status-card[href*="/@" i]:not(.expanded) .status-card__image { + +.app-body .status-card[href*='/@' i]:not(.expanded) .status-card__image { height: 120px; width: 120px; } -.app-body .status-card[href*="/@" i] .status-card__image-image { + +.app-body .status-card[href*='/@' i] .status-card__image-image { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; @@ -2989,41 +3611,50 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline: 1px solid var(--color-lines-translucent); outline-offset: -1px; } -.app-body .status-card[href*="/@" i] .status-card__content { + +.app-body .status-card[href*='/@' i] .status-card__content { display: flex; flex-flow: column; } + .app-body .status-card__title { order: 1; line-height: 1.3; font-size: 18px; margin-bottom: 3px; } + .app-body .status-card__host { order: 2; } + .app-body .status-card__description { order: 3; } + .app-body .status-card__image:has(.icon-file-text:only-child), -.app-body .status-card__description:empty { +.app-body .status-card__description:empty { display: none; } + .app-body .status-card__title, .app-body .status-card__description, .app-body .status-card__author, .app-body .status-card__host { color: var(--color-content-fg); - transition: all .2s; + transition: all 0.2s; } + .app-body .status-card__host { color: var(--color-content-fg-muted); } + .app-body .status-card:active .status-card__host, .app-body .status-card:focus .status-card__host, .app-body .status-card:hover .status-card__host { color: var(--color-accent); } + .app-body .status-card:active .status-card__author, .app-body .status-card:active .status-card__description, .app-body .status-card:active .status-card__title, @@ -3035,71 +3666,93 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status-card:hover .status-card__title { color: var(--color-content-fg); } + .app-body .status-card__author strong { font-weight: 500; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .status-card:not(.expanded) .status-card__image { width: 80px; } - .app-body .status-card:not(.expanded,:has(.icon-file-text)) .status-card__content { + + .app-body + .status-card:not(.expanded, :has(.icon-file-text)) + .status-card__content { padding-top: 0; padding-bottom: 0; } - .app-body .status-card[href*="/@" i]:not(.expanded,:has(.icon-file-text)) .status-card__content { + + .app-body + .status-card[href*='/@' i]:not(.expanded, :has(.icon-file-text)) + .status-card__content { padding-top: 12px; padding-bottom: 12px; } + .app-body .status-card:not(.expanded) .status-card__host { margin-bottom: 2px; font-size: 12px; } + .app-body .status-card:not(.expanded) .status-card__title { font-size: 16px; } + .app-body .status-card:not(.expanded) .status-card__description { margin-top: 2px; font-size: 12px; } } + .layout-multiple-columns .status-card:not(.expanded) .status-card__image { width: 80px; } -.layout-multiple-columns .status-card:not(.expanded,:has(.icon-file-text),[href*="/@" i]) .status-card__content { + +.layout-multiple-columns + .status-card:not(.expanded, :has(.icon-file-text), [href*='/@' i]) + .status-card__content { padding-top: 0; padding-bottom: 0; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__host { margin-bottom: 2px; font-size: 12px; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__title { font-size: 16px; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__description { margin-top: 2px; font-size: 12px; } + .app-body .status-card:has(+ .more-from-author) { box-sizing: border-box; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } + .app-body .status-card + .more-from-author { background-color: var(--color-content-secondary-bg); border: 1px solid var(--color-lines); border-top: 0; } + .app-body .more-from-author { color: var(--color-content-fg); overflow: hidden; } + .app-body .more-from-author .logo { color: var(--color-content-fg); min-width: 16px; height: 16px; } + .app-body .more-from-author > span { flex-grow: 1; overflow: hidden; @@ -3107,23 +3760,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu text-overflow: ellipsis; mask-image: linear-gradient(90deg, black 80%, transparent 96%); } -.app-body .notification-ungrouped .more-from-author :is(.account__avatar) { + +.app-body .notification-ungrouped .more-from-author :is(.account__avatar) { width: 16px !important; height: 16px !important; } + .app-body .more-from-author a:is(:active, :hover, :focus) { color: var(--color-accent); } + .app-body .more-from-author a { color: var(--color-content-fg); font-weight: 700; } + .app-body .status__content p { margin-bottom: 12px; } + .app-body .status__content p:last-child { margin-bottom: 0; } + .app-body .content-warning { background: none; color: var(--color-content-fg); @@ -3137,14 +3796,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu line-height: 1.26; position: relative; } + .app-body .detailed-status .content-warning { font-size: 19px; line-height: 1.26; } + .app-body .content-warning::before, .app-body .content-warning::after { display: none; } + .app-body .content-warning .link-button { background-color: transparent; width: 100%; @@ -3156,6 +3818,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: end; text-decoration: none; } + .app-body .content-warning .link-button span { background-color: transparent; background-image: var(--icon-eye-shut); @@ -3175,43 +3838,55 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: inline-block; transform-origin: center left; transition: - border-color .3s, - outline-color .3s, - transform .3s, - background-color .3s; + border-color 0.3s, + outline-color 0.3s, + transform 0.3s, + background-color 0.3s; position: relative; z-index: 1; } + .app-body .content-warning .link-button:hover span { - border-color: rgba(68, 74, 90, .6); + border-color: rgba(68, 74, 90, 60%); } @media (prefers-color-scheme: dark) { .app-body .content-warning .link-button:hover span { - border-color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, 30%); } } + .app-body .content-warning .link-button:active span { - transform: scale(.95); + transform: scale(0.95); } -.app-body .content-warning:has(+ .status__content > .status__content__text--visible) .link-button span { + +.app-body + .content-warning:has(+ .status__content > .status__content__text--visible) + .link-button + span { background-image: var(--icon-eye-open); } @media (prefers-color-scheme: dark) { - .app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span { - border-color: rgba(255, 255, 255, .3); + .app-body + :is(.reply-indicator__content, .status__content) + .status__content__spoiler-link:hover + span { + border-color: rgba(255, 255, 255, 30%); } } .app-body .icon-button.overlayed { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); border-radius: 7px; } + .app-body .icon-button.overlayed:hover { - background-color: rgba(0, 0, 0, .4); + background-color: rgba(0, 0, 0, 40%); } + .app-body .status__wrapper--filtered__button { color: var(--color-accent); } + .app-body .status__wrapper--filtered { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); @@ -3229,101 +3904,139 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .audio-player, .app-body .media-gallery, .app-body .video-player { - transition: transform .3s; + transition: transform 0.3s; } + .app-body .media-gallery__item { border-radius: 8px !important; outline: 1px solid var(--color-lines-translucent); outline-offset: -1px; } -.app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone), -.app-body .status > *:not(.status__info, .status__content, .status__action-bar, .status__line, .status-card) { +.app-body + div:not(.detailed-status) + > .media-gallery:has(.media-gallery__item.standalone), +.app-body + .status + > *:not( + .status__info, + .status__content, + .status__action-bar, + .status__line, + .status-card + ) { max-height: 450px; min-height: unset; width: auto; } + .app-body .status--in-thread .more-from-author { margin-inline-start: 0; } + .app-body .account-gallery__container { gap: 4px; padding: 4px; } + .app-body .media-gallery__item, .app-body .media-gallery__item-thumbnail, .app-body .media-gallery__item-gifv-thumbnail { cursor: pointer; - transition: .2s transform; + transition: 0.2s transform; } + .app-body .media-gallery__item:active { - transform: scale(.98); + transform: scale(0.98); } + .app-body .media-gallery__item-thumbnail img, .app-body .media-gallery__alt__popover { border-radius: 8px; } + .app-body .media-gallery__gifv:is(:active, :hover)::after { display: none; } + .app-body .picture-in-picture .video-player::after { border-radius: 0; } + .app-body .media-gallery__preview, .app-body .video-player { background-color: var(--color-content-secondary-bg); } + .app-body .media-gallery__preview { - outline: 1px solid rgba(0, 0, 0, 0.05); + outline: 1px solid rgba(0, 0, 0, 5%); outline-offset: -1px; height: calc(100% - 1px); border-radius: 8px; - transition: all .2s; + transition: all 0.2s; } -.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { + +.app-body + .spoiler-button:hover + ~ .media-gallery__item + > .media-gallery__preview { outline: 1px solid var(--color-lines-translucent); } + .app-body .media-gallery__actions__pill { border-radius: 6px; padding: 3px 8px; font-weight: 500; - background-color: rgba(0, 0, 0, .1); - transition: all .2s; + background-color: rgba(0, 0, 0, 10%); + transition: all 0.2s; } + .app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label:is(:focus, :hover), -.app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label { +.app-body + .spoiler-button__overlay:is(:focus, :hover) + .spoiler-button__overlay__label { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-content-bg); - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, 10%); color: var(--color-content-fg); border-radius: 8px; } + .app-body .spoiler-button__overlay__label > span:first-child { font-weight: bold; } .app-body :is(.media-gallery__alt__label, .media-gallery__gifv__label) { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); border-radius: 6px; } -.app-body .spoiler-button:not(.spoiler-button--minified) ~ .media-gallery__item :is(.media-gallery__alt__label, .media-gallery__gifv__label) { + +.app-body + .spoiler-button:not(.spoiler-button--minified) + ~ .media-gallery__item + :is(.media-gallery__alt__label, .media-gallery__gifv__label) { display: none; } .app-body .media-gallery__alt__popover { - background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%); + background-color: color-mix( + in srgb, + var(--color-content-bg), + transparent 15% + ); border: 1px solid var(--color-lines-translucent); } + .app-body .media-gallery__alt__popover :is(p, h4) { color: var(--color-content-fg); } + .app-body .media-gallery__alt__popover h4 { font-weight: bold; } - /* Empty columns */ .app-body .empty-column-indicator { background-color: var(--color-content-secondary-bg); @@ -3331,14 +4044,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 0 0 8px 8px; contain: content; } + .app-body .empty-column-indicator a { color: var(--color-accent); } + .app-body .explore__links > .empty-column-indicator { border: 0; } - /* Timeline hint */ .app-body .timeline-hint { background-color: var(--color-content-bg); @@ -3351,14 +4065,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu font-size: 95%; line-height: 1.5; } + .app-body .timeline-hint a { color: var(--color-accent); } + .app-body .timeline-hint p { - opacity: .7; + opacity: 0.7; } + .app-body .timeline-hint::before { - content: " "; + content: ' '; display: block; background-color: var(--color-content-secondary-bg); position: absolute; @@ -3369,24 +4086,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: 0; border-radius: 8px; } + .app-body .timeline-hint::after { - content: " "; + content: ' '; background-image: var(--icon-reply-all); background-repeat: no-repeat; background-position: center; - opacity: .55; + opacity: 0.55; position: absolute; top: 26px; left: 25px; width: 40px; height: 40px; } + .app-body .timeline-hint > :is(p, a) { position: relative; z-index: 0; } - /* 📤 DMs */ .app-body .follow_requests-unlocked_explanation { background-color: var(--color-content-secondary-bg); @@ -3394,18 +4112,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .follow_requests-unlocked_explanation a { color: var(--color-accent); } + .app-body .conversation__unread { background-color: var(--color-accent); } + .app-body .conversation__unread { color: var(--color-accent-fg); } + .app-body .conversation__content__names a strong { font-weight: bold; } + .app-body .conversation__content__names, .app-body .conversation__content__names a, .app-body .conversation__content__relative-time, @@ -3413,52 +4136,81 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .conversation .status__content p { color: var(--color-content-fg); } + .app-body .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } -.app-body .conversation.unread:before { + +.app-body .conversation.unread::before { border-color: var(--color-accent); } + .app-body .conversation__content__relative-time { - opacity: .7; + opacity: 0.7; } + .app-body .conversation__content { position: relative; } + .app-body .account__avatar-composite { border-radius: 0; padding: 1px; } + .app-body .account__avatar-composite .account__avatar { height: auto !important; } + .app-body .account__avatar-composite__label { display: none; } .app-body .status__wrapper.status__wrapper-direct, -.app-body .notification__message:has(+ div > .status__wrapper.status__wrapper-direct), +.app-body + .notification__message:has(+ div > .status__wrapper.status__wrapper-direct), .app-body .notification-ungrouped--direct .notification-ungrouped__header { - --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%); -} -.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover), -.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar, -.app-body .status__wrapper.status__wrapper-direct.focusable:focus, -.app-body .notification__message:has(+ div > .status__wrapper.status__wrapper-direct .status__content:hover), -.app-body .notification-ungrouped--direct:has(.status__wrapper.status__wrapper-direct .status__content:hover) .notification-ungrouped__header { - --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 88%); + --color-post-bg: color-mix( + in srgb, + var(--color-accent), + var(--color-content-bg) 92% + ); } -.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { +.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover), +.app-body + .status__wrapper.status__wrapper-direct:has(.status__content:hover) + .status__avatar, +.app-body .status__wrapper.status__wrapper-direct.focusable:focus, +.app-body + .notification__message:has( + + div > .status__wrapper.status__wrapper-direct .status__content:hover + ), +.app-body + .notification-ungrouped--direct:has( + .status__wrapper.status__wrapper-direct .status__content:hover + ) + .notification-ungrouped__header { + --color-post-bg: color-mix( + in srgb, + var(--color-accent), + var(--color-content-bg) 88% + ); +} + +.app-body + :is(.status__wrapper-direct, .detailed-status__wrapper-direct) + .status__prepend { background-color: var(--color-accent); margin-inline-start: 10px; z-index: 3; position: relative; outline: 5px solid var(--color-post-bg); border-radius: 50px 50px 50px 10px; - transition: all .2s; + transition: all 0.2s; } + .app-body :is(.detailed-status__wrapper-direct) .status__prepend { margin-inline-start: 0; margin-block-end: 0; @@ -3470,32 +4222,60 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline: 0; font-size: 13px; } + .app-body :is(.detailed-status__wrapper-direct):has(.status__prepend) { padding-top: 40px; } -.app-body :is(.status__wrapper-direct):not(:has(.status__line)) .status__prepend { + +.app-body + :is(.status__wrapper-direct):not(:has(.status__line)) + .status__prepend { margin-inline-start: 66px; } -.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon-wrapper { + +.app-body + :is(.status__wrapper-direct, .detailed-status__wrapper-direct) + .status__prepend + .status__prepend-icon-wrapper { height: 20px; } -.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .icon-at { + +.app-body + :is(.status__wrapper-direct, .detailed-status__wrapper-direct) + .status__prepend + .icon-at { background-image: var(--icon-at-inv); } -.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon { + +.app-body + :is(.status__wrapper-direct, .detailed-status__wrapper-direct) + .status__prepend + .status__prepend-icon { width: 20px; height: 20px; - transform: scale(.85); + transform: scale(0.85); } -.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend > span { + +.app-body + :is(.status__wrapper-direct, .detailed-status__wrapper-direct) + .status__prepend + > span { color: var(--color-accent-fg); margin-top: -1px; } -.app-body .notification-ungrouped--direct .notification-ungrouped__header > .notification-ungrouped__header__icon > svg { +.app-body + .notification-ungrouped--direct + .notification-ungrouped__header + > .notification-ungrouped__header__icon + > svg { display: none; } -.app-body .notification-ungrouped--direct .notification-ungrouped__header > span { + +.app-body + .notification-ungrouped--direct + .notification-ungrouped__header + > span { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 50px 50px 50px 10px; @@ -3504,41 +4284,48 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu font-size: 90%; } - - /* ⏺️ Column headers ----------------- */ .app-body .tabs-bar__wrapper { background-color: transparent; box-shadow: inset 0 20px var(--color-bg); } -.app-body .column-header__wrapper.active:before { + +.app-body .column-header__wrapper.active::before { top: -17px; bottom: unset; - opacity: 30%; + opacity: 0.3; height: 35px; width: 100%; background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%); } + .app-body .column-header__wrapper.active { box-shadow: none; } -@media screen and (min-width:1175px) { - .app-body .column-header__wrapper.active:before { +@media screen and (width >= 1175px) { + .app-body .column-header__wrapper.active::before { top: unset; bottom: -15px; border-top: 1px solid var(--color-lines-translucent); } + .app-body .column-header__wrapper.active { box-shadow: 0 1px 0 var(--color-lines-translucent); } } + .app-body .column-header { border-radius: 8px; } + .app-body .column-header, .app-body .column-back-button { - background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%); + background-color: color-mix( + in srgb, + var(--color-content-bg), + transparent 15% + ); color: var(--color-content-fg); border-right: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines); @@ -3552,58 +4339,73 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .column-back-button { padding-left: 15px; } + .app-body .column-header__button, .app-body .column-header__back-button { background-color: transparent; border: 0; } + .app-body .column-header__button { color: var(--color-content-fg); - transition: all .2s; + transition: all 0.2s; border-radius: 6px; height: 42px; margin: 4px 4px 4px 0; } + .app-body .column-header__button:active { - transform: scale(.8); + transform: scale(0.8); } + .app-body .column-header__icon { transform: scale(1.1); margin-right: 4px; } -.app-body .column-header__buttons .column-header__button:has(> .icon:only-child) { + +.app-body + .column-header__buttons + .column-header__button:has(> .icon:only-child) { width: 42px; } + .app-body .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; } + .app-body .column-header__button:is(.active, .active:hover, :hover) { color: var(--color-accent); background-color: var(--color-accent-bg); } + .app-body .column-header__button.active .icon { transform: none; } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .column-header__wrapper::after, .app-body:not(.layout-multiple-columns) .column-back-button::after { display: none; } + .app-body .column-header__buttons { height: 55px; } + .app-body:not(.layout-multiple-columns) .column-header, .app-body:not(.layout-multiple-columns) .column-back-button { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } + .app-body:not(.layout-multiple-columns) .column-header__button, - .app-body:not(.layout-multiple-columns) .column-header__button:is(.active, .active:hover, :hover) { + .app-body:not(.layout-multiple-columns) + .column-header__button:is(.active, .active:hover, :hover) { padding: 0 12px; height: 35px !important; align-self: center; @@ -3613,35 +4415,41 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-back-button--slim-button::after { display: none; } + .app-body .column-back-button--slim-button { - top: -50px + top: -50px; } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .column-back-button--slim-button { height: 50px; } } -@media screen and (min-width:1175px) { +@media screen and (width >= 1175px) { .app-body:not(.layout-multiple-columns) .column-back-button--slim-button { display: none; } } + .app-body :is(.column-header__back-button, .column-back-button) { gap: 5px; } + .app-body .column-back-button__icon { margin-inline-end: 0; } + .app-body :is(.column-header__back-button, .column-back-button) span, .app-body .column-header__back-button { position: relative; } + .app-body :is(.column-header__back-button, .column-back-button):hover { text-decoration: none; } + .app-body :is(.column-header__back-button, .column-back-button) span::before, .app-body .column-header__back-button:has(> svg:last-child)::before { - content: " "; + content: ' '; position: absolute; left: 4px; right: 4px; @@ -3650,21 +4458,28 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: -1; border-radius: 8px; background-color: transparent; - transition: all .3s; + transition: all 0.3s; } + .app-body :is(.column-header__back-button, .column-back-button) span::before { left: -35px; right: -12px; bottom: -11px; top: -10px; } -.app-body :is(.column-header__back-button, .column-back-button):hover span::before, + +.app-body + :is(.column-header__back-button, .column-back-button):hover + span::before, .app-body .column-header__back-button:has(> svg:last-child):hover::before { background-color: var(--color-accent-bg); } -.app-body :is(.column-header__back-button, .column-back-button):active span::before, + +.app-body + :is(.column-header__back-button, .column-back-button):active + span::before, .app-body .column-header__back-button:has(> svg:last-child):active::before { - transform: scale(.9); + transform: scale(0.9); } .app-body :is(.load-gap, .load-more) { @@ -3673,12 +4488,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-bottom: 0; display: flex; justify-content: center; - transition: background .3s; + transition: background 0.3s; padding: 8px; } + .app-body :is(.load-gap, .load-more):is(:active, :hover) { background-color: var(--color-accent-lines); } + .app-body :is(.load-gap, .load-more) .icon-ellipsis-h { background-image: var(--icon-ellipsis-column-link-active-accent); } @@ -3689,32 +4506,39 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-right: 1px solid var(--color-lines); border-bottom: 0; } + .app-body .column-header__collapsible:is(:not(.collapsed), .animating) { border-bottom: 1px solid var(--color-lines); } + .app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } + .app-body .column-header__select-row { border-color: var(--color-lines); } + .app-body .column-header__select-row__actions button { background-color: var(--color-accent-bg); color: var(--color-accent); border-color: var(--color-accent-bg); } + .app-body .column-header__select-row__actions button:hover { border-color: var(--color-accent); } + .app-body .column-header__select-row__actions button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible { box-shadow: none; border-radius: 0; } + .app-body .column-header__select-row { border-color: var(--color-lines); background-color: var(--color-content-secondary-bg); @@ -3724,32 +4548,40 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-width: 0 0 1px; } } + .app-body .column-header__collapsible-inner { border: 0; } + .app-body .column-settings__section { color: var(--color-content-fg-bold); } + .app-body .setting-toggle__label { color: var(--color-content-fg); } + .app-body .column-header > button { padding: 0 0 0 15px; } + .app-body .column-header > button:nth-child(2) { padding-left: 0; } + .app-body .column-header .column-header__back-button { padding-right: 15px; } + .app-body .column-header > button, .app-body .column-header .column-header__back-button { font-weight: bold; } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .ui { padding-top: 55px; } + .app-body:not(.layout-multiple-columns) .ui__header { background-color: transparent; border-bottom: 0; @@ -3759,9 +4591,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: none; backdrop-filter: none; } + .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo { margin-left: 3px; } + .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { box-shadow: none; display: block; @@ -3770,6 +4604,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 45px; border-bottom: 0; } + .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { display: block; top: 0; @@ -3778,33 +4613,48 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 55px; position: fixed; } - .app-body:not(.layout-multiple-columns):not(:has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { + + .app-body:not(.layout-multiple-columns, :has(.ui .ui__header__links > .button[href='/auth/sign_in'])) + .tabs-bar__wrapper { z-index: 3; } - .app-body:not(.layout-multiple-columns):has(.ui .ui__header__links > .button[href="/auth/sign_in"]) .tabs-bar__wrapper :is(.column-back-button, .column-header > *) { + + .app-body:not(.layout-multiple-columns):has( + .ui .ui__header__links > .button[href='/auth/sign_in'] + ) + .tabs-bar__wrapper + :is(.column-back-button, .column-header > *) { display: none; } + .app-body:not(.layout-multiple-columns) - :is( - .column-header, - .column-back-button, - .column-header__button, - .column-header__back-button - ) { + :is( + .column-header, + .column-back-button, + .column-header__button, + .column-header__back-button + ) { background-color: transparent; height: 55px; border: 0; margin: 0; } + .app-body .column-header__icon { display: none; } - .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */ + + .app-body:not(.layout-multiple-columns) .ui::after { + /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); - background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%); + background-color: color-mix( + in srgb, + var(--color-content-bg), + transparent 25% + ); border-bottom: 1px solid var(--color-lines-translucent); - content: ""; + content: ''; height: 55px; left: 0; position: fixed; @@ -3830,114 +4680,124 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } } + .app-body:not(.layout-multiple-columns) .column-header__collapsible { margin-top: 1px; position: absolute; left: -45px; right: -55px; } - .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { + + .app-body:not(.layout-multiple-columns) + .column-header__collapsible:not(.collapsed) { border-bottom: 1px solid var(--color-lines); } } -@media screen and (max-width:885px) { - .app-body:not(.layout-multiple-columns) .column-header__collapsible:is(:not(.collapsed), .animating) { +@media screen and (width <= 885px) { + .app-body:not(.layout-multiple-columns) + .column-header__collapsible:is(:not(.collapsed), .animating) { border-left-color: var(--color-content-secondary-bg); border-right-color: var(--color-content-secondary-bg); } } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >= 890px) and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { border-color: transparent; } + .app-body:not(.layout-multiple-columns) .ui::after { border-bottom: 1px solid var(--color-lines); } } @media (prefers-color-scheme: dark) { - @media screen and (max-width:1174px) { + @media screen and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { border-color: var(--color-lines); } } } - - /* ⏺️ Horizontal selectors (used to navigate subsections on the Explore, Live Feeds and Account pages) */ -.app-body -:is(.account__section-headline, .notification__filter-bar) { +.app-body :is(.account__section-headline, .notification__filter-bar) { background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); } + .app-body .account__header + .account__section-headline { border-left: 0; border-right: 0; } -@media screen and (min-width:890px) and (max-width:1174px) { - .app-body:not(.layout-multiple-columns) .explore__search-header + .account__section-headline { +@media screen and (width >= 890px) and (width <= 1174px) { + .app-body:not(.layout-multiple-columns) + .explore__search-header + + .account__section-headline { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .app-body:not(.layout-multiple-columns) .notification__filter-bar { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 10px; } } -@media screen and (max-width:889px) { - .app-body:not(.layout-multiple-columns) :is(.account__section-headline, .notification__filter-bar) { +@media screen and (width <= 889px) { + .app-body:not(.layout-multiple-columns) + :is(.account__section-headline, .notification__filter-bar) { border-left: 0; border-right: 0; } } + .app-body -:is(.account__section-headline, .notification__filter-bar) -:is(a, button) { + :is(.account__section-headline, .notification__filter-bar) + :is(a, button) { background-color: var(--color-accent-bg); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; border-radius: 9px; - transition: all .2s; + transition: all 0.2s; max-height: 45px; padding: 14px 10px; } -.app-body -:is(.account__section-headline, .notification__filter-bar) -.icon { + +.app-body :is(.account__section-headline, .notification__filter-bar) .icon { margin-top: -1.5px; } + .app-body -:is(.account__section-headline, .notification__filter-bar) -:is(a, button):hover { + :is(.account__section-headline, .notification__filter-bar) + :is(a, button):hover { background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } + .app-body -:is(.account__section-headline, .notification__filter-bar) -:is(a, button).active { + :is(.account__section-headline, .notification__filter-bar) + :is(a, button).active { background-color: var(--color-content-bg); color: var(--color-content-fg); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } + .app-body -:is(.account__section-headline, .notification__filter-bar) -:is(a, button).active::before { + :is(.account__section-headline, .notification__filter-bar) + :is(a, button).active::before { display: none; } -.app-body -:is(.account__section-headline, .notification__filter-bar) -button { + +.app-body :is(.account__section-headline, .notification__filter-bar) button { background-color: transparent; } + .app-body -:is(.account__section-headline, .notification__filter-bar) -:is(a, button, a.active, button.active)::after { + :is(.account__section-headline, .notification__filter-bar) + :is(a, button, a.active, button.active)::after { display: block; position: absolute; - content: " "; + content: ' '; width: 2px; height: auto; background-color: var(--color-accent-lines); @@ -3950,15 +4810,16 @@ button { transform: unset; border: 0; } + .app-body -:is(.account__section-headline, .notification__filter-bar) -:is(a, button):last-child::after { + :is(.account__section-headline, .notification__filter-bar) + :is(a, button):last-child::after { display: none; } @media (prefers-color-scheme: dark) { .app-body - :is(.account__section-headline, .notification__filter-bar) - :is(a, button).active { + :is(.account__section-headline, .notification__filter-bar) + :is(a, button).active { background-color: var(--color-bg); } } @@ -3966,60 +4827,73 @@ button { .app-body .notification__filter-bar .icon-reply-all { background-image: var(--icon-reply-accent); } + .app-body .notification__filter-bar .active .icon-reply-all { background-image: var(--icon-reply); } + .app-body .notification__filter-bar .icon-star { background-image: var(--icon-star-accent); } + .app-body .notification__filter-bar .active .icon-star { background-image: var(--icon-star); } + .app-body .notification__filter-bar .icon-retweet { background-image: var(--icon-boost-accent); } + .app-body .notification__filter-bar .active .icon-retweet { background-image: var(--icon-boost); } + .app-body .notification__filter-bar .icon-tasks { background-image: var(--icon-poll-accent); } + .app-body .notification__filter-bar .active .icon-tasks { background-image: var(--icon-poll); } + .app-body .notification__filter-bar .icon-home { background-image: var(--icon-post-notification-accent); } + .app-body .notification__filter-bar .active .icon-home { background-image: var(--icon-post-notification); } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .account__header + .account__section-headline { border-radius: 0; } } - /* 📍 Navigation panel ------------------- */ .app-body .navigation-panel__menu { display: flex; flex-flow: column; } + .app-body .column-link--transparent { color: var(--color-fg); } + .app-body .ui__header__logo .logo--icon { display: none; } + .app-body .ui__header__links .button.button-secondary { padding: 8px 15px; } -.app-body .ui__header__links .button.button-secondary[href="/search"] { + +.app-body .ui__header__links .button.button-secondary[href='/search'] { display: none; } -.app-body .ui__header__links .button.button-secondary[href="/publish"] { + +.app-body .ui__header__links .button.button-secondary[href='/publish'] { background-color: var(--color-accent); color: var(--color-accent-fg); width: 50px; @@ -4034,18 +4908,22 @@ button { background-size: 22px; border-radius: 50%; box-shadow: - 0 1px 1px rgba(0, 0, 0, .2), - 0 2px 10px rgba(0, 0, 0, .2); + 0 1px 1px rgba(0, 0, 0, 20%), + 0 2px 10px rgba(0, 0, 0, 20%); } -.app-body .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { + +.app-body + .ui__header__links + .button.button-secondary[href='/publish']:is(:hover, :focus, :active) { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } -.app-body .ui__header__links .button.button-secondary[href="/publish"] span { + +.app-body .ui__header__links .button.button-secondary[href='/publish'] span { color: transparent; } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .layout-single-column .ui__header__links { padding-left: 12px; } @@ -4068,6 +4946,7 @@ button { background-position: center; background-size: 32px auto; } + .app-body .column-link.column-link--logo svg, .app-body .ui__header__logo svg { display: none; @@ -4076,6 +4955,7 @@ button { .app-body .navigation-panel__logo { margin-bottom: 5px; } + .app-body .column-link:not(.column-link--logo) { padding: 15px 20px 16px 13px; gap: 7px; @@ -4086,26 +4966,30 @@ button { overflow: visible; transform-origin: 60px center; } + .app-body .column-link--transparent:is(.active, .active:hover) { color: var(--color-content-fg); font-weight: bold; } + .app-body .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } + .app-body .column-link--transparent span { position: relative; } -@media screen and (min-width:1175px) { +@media screen and (width >= 1175px) { .app-body .column-link:not(.column-link--logo) { - transition: all .3s; + transition: all 0.3s; } + .app-body .column-link--transparent span::before { - content: " "; + content: ' '; left: -52px; background-color: transparent; - transition: .3s background-color; + transition: 0.3s background-color; top: -14px; right: -16px; position: absolute; @@ -4113,16 +4997,20 @@ button { z-index: -1; bottom: -14px; } + .app-body .column-link--transparent:hover span::before { background-color: color-mix(in srgb, var(--color-accent), transparent 85%); } + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: transparent; } + .app-body .column-link--transparent:active { - transform: scale(.95); + transform: scale(0.95); } } + .app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -4132,47 +5020,60 @@ button { border: 0; z-index: 1; } + .app-body .compose-panel hr, .app-body .navigation-panel .list-panel hr { display: none; } -@media screen and (min-width:1175px) { - .app-body .navigation-panel hr:has(+ .column-link[href="/settings/preferences"]) { +@media screen and (width >= 1175px) { + .app-body + .navigation-panel + hr:has(+ .column-link[href='/settings/preferences']) { margin-right: 25px; margin-left: 10px; margin-bottom: 12px; border-color: var(--color-lines); } } + .app-body .column-link span { vertical-align: middle; } -@media screen and (max-width:1174px) { - .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { +@media screen and (width <= 1174px) { + .app-body + .columns-area__panels__pane--navigational + .columns-area__panels__pane__inner { width: 100vw; height: calc(4.2em + var(--safe-area-bottom)); bottom: 0; left: 0; z-index: 3; } + .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; padding-bottom: var(--safe-area-bottom); flex-direction: row; overflow-x: auto; - background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%); + background-color: color-mix( + in srgb, + var(--color-content-bg), + transparent 25% + ); border-top: 1px solid var(--color-lines-translucent); border-left: 0; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { flex-flow: row; overflow-x: auto; mask-image: linear-gradient(90deg, black 80%, transparent 96%); } + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), .app-body .navigation-panel .column-link:is(.active, .active:hover, :active), .app-body .navigation-panel .navigation-panel__menu::after { @@ -4187,101 +5088,151 @@ button { box-sizing: border-box; background-color: transparent; transform-origin: center; - transition: .3s transform; + transition: 0.3s transform; } + .app-body .navigation-panel .navigation-panel__menu::after { - content: " "; + content: ' '; } - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { + + .app-body + .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), + .app-body + .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), + .app-body + .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), + .app-body + .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { mask-image: none; } + .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3), - .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *, + .app-body + .navigation-panel__menu + .column-link:first-child:nth-last-child(3) + ~ *, .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4), - .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4) ~ *, + .app-body + .navigation-panel__menu + .column-link:first-child:nth-last-child(4) + ~ *, .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5), - .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5) ~ *, + .app-body + .navigation-panel__menu + .column-link:first-child:nth-last-child(5) + ~ *, .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6), - .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * { + .app-body + .navigation-panel__menu + .column-link:first-child:nth-last-child(6) + ~ * { flex: 50vw; } - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::after { + + .app-body + .navigation-panel__menu:has( + .column-link:first-child:nth-last-child(3) + )::after, + .app-body + .navigation-panel__menu:has( + .column-link:first-child:nth-last-child(4) + )::after, + .app-body + .navigation-panel__menu:has( + .column-link:first-child:nth-last-child(5) + )::after, + .app-body + .navigation-panel__menu:has( + .column-link:first-child:nth-last-child(6) + )::after { display: none; } - .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active { - transform: scale(.85); + + .app-body + .navigation-panel__menu + :is(.column-link, .navigation-panel__legal):active { + transform: scale(0.85); } + .app-body .column-link__icon { margin: 0; transform: scale(1.3); } + .app-body .column-link span { - padding-left: .5em; + padding-left: 0.5em; } + .app-body .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; } + .app-body .columns-area__panels { padding-bottom: 4em; } + .app-body .columns-area__panels .navigation-panel__legal { margin: 0; padding: 0; } - .app-body .columns-area__panels .navigation-panel__legal .column-link--transparent { + + .app-body + .columns-area__panels + .navigation-panel__legal + .column-link--transparent { height: calc(100% - 13px); box-sizing: border-box; border: 0; } + .app-body .navigation-panel .flex-spacer { display: none; } } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .columns-area__panels__main { width: 100%; margin-left: -55px; } } - /* 👤 Account view --------------- */ .app-body .account__header { padding-bottom: 5px; background-color: var(--color-content-bg); } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .account__header { border-left: 0; border-right: 0; } } + .app-body .account__header__image { height: 200px; background-color: var(--color-content-bg); border-bottom: 0; margin: 0; } + .app-body .account__header__image img { background-color: var(--color-content-secondary-bg); } + .app-body .account__header__bar { border: 0; } + .app-body .account__header__bar .avatar { - transition: transform .3s; + transition: transform 0.3s; } + .app-body .account__header__bar .avatar:active { - transform: scale(.92); + transform: scale(0.92); } + .app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; margin: 0; @@ -4291,41 +5242,51 @@ button { height: 100px !important; background-color: var(--color-content-bg); } + .app-body .account__header__tabs__name h1, .app-body .account__header__tabs__name h1 small { color: var(--color-content-fg); } + .app-body .account__header__tabs__name h1 > span { font-size: 18px; } + .app-body .account__header__tabs__name h1 small > span:first-child { - opacity: .7; + opacity: 0.7; } + .app-body .account__header__tabs__name .icon-lock { height: 20px; width: 16px; top: unset; vertical-align: bottom; } + .app-body .account__header__content a { color: var(--color-accent); text-decoration: none; } + .app-body .account__header__content a:hover { text-decoration: underline; } + .app-body .account__header__extra__links a strong { color: var(--color-content-fg-bold); } + .app-body .account__header__account-note label { margin-bottom: 0; } + .app-body .account__header__account-note label, .app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); - opacity: .5; + opacity: 0.5; font-style: normal; } + .app-body .account__header__account-note textarea { color: var(--color-content-fg); border-radius: 8px; @@ -4334,25 +5295,34 @@ button { width: 100%; outline: 1px solid transparent; outline-offset: -1px; - transition: all .2s; + transition: all 0.2s; } + .app-body .account__header__account-note textarea:placeholder-shown { padding-left: 0; padding-right: 0; } + .app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); padding-left: 10px; padding-right: 10px; } -.app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) { + +.app-body + .account__header__account-note + textarea:not(:placeholder-shown, :focus) { outline-color: var(--color-lines); box-shadow: 2px 3px var(--color-content-secondary-bg); } -.app-body .account__header__account-note textarea:not(:placeholder-shown):focus { + +.app-body + .account__header__account-note + textarea:not(:placeholder-shown):focus { outline-color: var(--color-accent); box-shadow: 2px 3px var(--color-accent-bg); } + .app-body .account__header__badges .account-role { color: var(--color-content-fg); border: 0; @@ -4362,18 +5332,25 @@ button { background-color: var(--color-content-secondary-bg); gap: 5px; } -.app-body .account__header__badges .account-role span:not(.account-role__domain) { + +.app-body + .account__header__badges + .account-role + span:not(.account-role__domain) { font-weight: 500; } + .app-body .account-role svg { opacity: 1; color: var(--color-accent); } + .app-body .account__header__extra__links a, .app-body .account__header__bio .account__header__content, .app-body .account__header__bio .account__header__fields dd { color: var(--color-content-fg); } + .app-body .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; @@ -4384,20 +5361,27 @@ button { background-color: var(--color-secondary-bg); } } + .app-body .account__header__bio .account__header__fields:has(dl:only-child) { display: none; } + .app-body .account__header__bio .account__header__fields dt { font-weight: bold; font-size: 12px; } + .app-body .account__header__bio .account__header__fields :is(dl, .verified) { border-bottom: 0; position: relative; } -.app-body .account__header__bio .account__header__fields dl:not(:last-child):after { + +.app-body + .account__header__bio + .account__header__fields + dl:not(:last-child)::after { display: block; - content: " "; + content: ' '; height: 1px; bottom: -1px; right: 15px; @@ -4407,47 +5391,68 @@ button { border-radius: 50px; } @media (prefers-color-scheme: dark) { - .app-body .account__header__bio .account__header__fields dl:not(:last-child):after { + .app-body + .account__header__bio + .account__header__fields + dl:not(:last-child)::after { background-color: var(--color-accent-bg); } } -.app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ + +.app-body .account__header__bio .account__header__fields dl:nth-child(2) { + /* Add a corner radius to the second profile field because we're hiding the Joined field */ border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } -.app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ + +.app-body .account__header__bio .account__header__fields .verified + .verified { + /* Fix double border between 2 successive verified fields */ margin-top: 0; border-top-width: 0; } + .app-body .account__header__bio .account__header__fields .verified :is(a, dd), .app-body .hover-card .account-fields dl.verified dd a { color: var(--color-accent); gap: 5px; } + .app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); } -.app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ + +.app-body .account__header__bio .account__header__fields .verified { + /* Verified field tweak: restore default background and border */ border-top: 0; border-right: 0; border-left: 0; background: none; } -.app-body .account__header__extra .account__header__fields .verified dd > span:first-child { + +.app-body + .account__header__extra + .account__header__fields + .verified + dd + > span:first-child { vertical-align: bottom; } + .app-body .account__header__extra .account__header__fields .verified__mark { float: left; transform: scale(1.1); } + .app-body .account__header__bio .account__header__fields .verified:last-child { border-bottom: 0; } .app-body .account__header__tabs__buttons .icon-button.copied, -.app-body .account__header__tabs__buttons .icon-button.copied:is(:active, :focus, :hover) { - background-color: rgba(121, 189, 154, 0.3); +.app-body + .account__header__tabs__buttons + .icon-button.copied:is(:active, :focus, :hover) { + background-color: rgba(121, 189, 154, 30%); } .app-body .follow-request-banner, @@ -4455,16 +5460,18 @@ button { background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); } + .app-body .follow-request-banner__message, .app-body .moved-account-banner__message { color: var(--color-content-fg); } + .app-body .moved-account-banner__message { font-weight: bold; } .app-body .account__header__tabs__buttons > button:first-child:active { - transform: scale(.95); + transform: scale(0.95); } .app-body .account__domain-pill, @@ -4474,89 +5481,134 @@ button { border-color: var(--color-accent); border-radius: 8px; font-weight: 500; - transition: all .2s; + transition: all 0.2s; } + .app-body .account__domain-pill:hover { background-color: var(--color-accent-bg); } + .app-body .account__domain-pill.active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .dropdown-animation.account__domain-pill__popout { animation: none; } + .app-body .account__domain-pill__popout { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 8px; } + .app-body .account__domain-pill__popout__header__icon { background-color: var(--color-accent); } + .app-body .account__domain-pill__popout__handle { padding: 12px; } -.app-body :where(.account__domain-pill__popout__header, .account__domain-pill__popout__parts) :is(h3, h6) { + +.app-body + :where( + .account__domain-pill__popout__header, + .account__domain-pill__popout__parts + ) + :is(h3, h6) { color: var(--color-content-fg); font-weight: 600; } -.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon { + +.app-body + .account__domain-pill__popout__parts + > div + .account__domain-pill__popout__parts__icon { align-items: start; padding-top: 2px; } -.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon .icon { + +.app-body + .account__domain-pill__popout__parts + > div + .account__domain-pill__popout__parts__icon + .icon { width: 28px; height: 28px; } -.app-body .account__domain-pill__popout__parts > div:first-child .account__domain-pill__popout__parts__icon .icon { + +.app-body + .account__domain-pill__popout__parts + > div:first-child + .account__domain-pill__popout__parts__icon + .icon { background-image: var(--icon-direct-messages-accent); } -.app-body .account__domain-pill__popout__parts > div:last-child .account__domain-pill__popout__parts__icon .icon { + +.app-body + .account__domain-pill__popout__parts + > div:last-child + .account__domain-pill__popout__parts__icon + .icon { background-image: var(--icon-globe-accent); } + .app-body .hover-card { - background-color: color-mix(in srgb, var(--color-content-bg), transparent 10%); + background-color: color-mix( + in srgb, + var(--color-content-bg), + transparent 10% + ); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--color-lines); } + .app-body .hover-card__bio, .app-body .hover-card .display-name bdi, .app-body .account-fields, .app-body .hover-card__number { color: var(--color-content-fg); } + .app-body .hover-card .display-name__html { font-weight: 600; } + .app-body .account-fields { font-size: 95%; } + .app-body .hover-card .account-fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; padding: 8px; } + .app-body .hover-card .account-fields dl:not(:first-child:last-child) { gap: 10px; padding-bottom: 6px; - border-bottom: 1px solid color-mix(in srgb, var(--color-lines) 70%, transparent); + border-bottom: 1px solid + color-mix(in srgb, var(--color-lines) 70%, transparent); } @media (prefers-color-scheme: dark) { .app-body .hover-card .account-fields { background-color: var(--color-secondary-bg); } + .app-body .hover-card .account-fields dl { border-color: var(--color-accent-bg); } } + .app-body .hover-card .account-fields dl:last-child:not(:first-child) { padding-top: 6px; padding-bottom: 0; border-bottom: 0; } + .app-body .hover-card .account-fields dl dt { width: 30%; min-width: 30%; @@ -4566,6 +5618,7 @@ button { text-transform: uppercase; font-size: 80%; } + .app-body .hover-card .account-fields dl dd { text-align: left; justify-content: flex-start; @@ -4579,11 +5632,12 @@ button { bottom: 0; height: 6px; width: 100%; - content: ""; + content: ''; border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); background-color: var(--color-content-secondary-bg); } + .app-body .status__wrapper:has(.icon-thumb-tack)::before { position: absolute; left: 0; @@ -4591,58 +5645,77 @@ button { top: -8px; height: 8px; width: 100%; - content: ""; + content: ''; background-color: var(--color-content-bg); } + .app-body .status__wrapper:has(.icon-thumb-tack) { padding-bottom: 20px; margin-top: -8px; } -.app-body .status__wrapper:has(.icon-thumb-tack) :is(.status__content__translate-button, .translate-button .link-button) { + +.app-body + .status__wrapper:has(.icon-thumb-tack) + :is(.status__content__translate-button, .translate-button .link-button) { bottom: 20px; } -.app-body .account-timeline__header + article .status__wrapper:has(.icon-thumb-tack) { + +.app-body + .account-timeline__header + + article + .status__wrapper:has(.icon-thumb-tack) { margin-top: 0; } -.app-body .account-timeline__header + article .status__wrapper:has(.icon-thumb-tack)::before { + +.app-body + .account-timeline__header + + article + .status__wrapper:has(.icon-thumb-tack)::before { display: none; } - /* ✨ Explore tab -------------- */ .app-body .explore__links { background-color: var(--color-content-bg); overflow: hidden; } + .layout-multiple-columns .explore__links.scrollable { background-color: var(--color-content-bg); overflow-y: auto; } + .app-body .explore__links .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); padding: 15px 18px; } + .app-body .explore__links .trends__item:last-child { border-bottom: 0; } + .app-body .trends__item__name, .app-body .trends__item__current { color: var(--color-fg-muted); } + .app-body .trends__item__name a { color: var(--color-fg); } + .app-body .getting-started__trends { padding: 0; display: flex; flex-flow: column; } + .app-body .getting-started__trends h4 { border-bottom: 0; padding: 0; } + .app-body .getting-started__trends h4 > :is(a, span) { padding: 15px 20px 6px 47px; margin-left: 3px; @@ -4650,20 +5723,24 @@ button { color: var(--color-fg-muted); border-left: 4px solid transparent; display: block; - transition: all .3s; + transition: all 0.3s; } + .app-body .getting-started__trends h4 a:hover { color: var(--color-accent); } + .app-body .getting-started__trends h4 a:active { - transform: scale(.95); + transform: scale(0.95); } + .app-body .getting-started__trends h4 a::after { content: '\2192'; margin-left: 0; opacity: 0; - transition: all .2s; + transition: all 0.2s; } + .app-body .getting-started__trends:hover h4 a::after { opacity: 1; margin-left: 5px; @@ -4672,7 +5749,7 @@ button { .app-body .getting-started__trends .trends__item { padding-left: 19px; } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body .getting-started__trends { display: none; } @@ -4687,12 +5764,14 @@ button { width: 20px; height: 20px; transform: scale(1.45); - content: " "; + content: ' '; display: block; } + .app-body .trends__item__name span { white-space: pre-wrap; } + .app-body .trends__item__sparkline { flex: 0 0 auto; position: relative; @@ -4703,8 +5782,9 @@ button { background-color: var(--color-content-secondary-bg); box-shadow: inset 0 -2px var(--color-accent-bg); transform: scale(1.25); - transition: all .3s; + transition: all 0.3s; } + .app-body .getting-started__trends .trends__item__sparkline { background-color: var(--color-secondary-bg); } @@ -4713,34 +5793,36 @@ button { background-color: var(--color-content-secondary-bg); } } + .app-body .trends__item__sparkline svg { width: 50px; height: 30px; position: absolute; right: -2px; } + .app-body .trends__item__sparkline::after { position: absolute; display: block; - content: " "; + content: ' '; left: 0; right: 0; height: 2px; bottom: 0; background-color: var(--color-accent); - opacity: .4; + opacity: 0.4; } .app-body .trends__item__sparkline path:last-child { stroke: var(--color-accent) !important; } + .app-body .trends__item__sparkline path:first-child { fill: var(--color-accent) !important; - fill-opacity: .4 !important; - transform: translate(0px, 0.2px); + fill-opacity: 0.4 !important; + transform: translate(0, 0.2px); } - /* Hashtag header */ .app-body .hashtag-header { font-size: 15px; @@ -4751,47 +5833,52 @@ button { background-color: var(--color-content-secondary-bg); border: 0; } + .app-body .hashtag-header__header { margin-bottom: 0; } + .app-body .hashtag-header__header h1 { color: var(--color-content-fg); } + .app-body .hashtag-header .hashtag-header__header + div { color: var(--color-content-fg); font-size: 85%; - opacity: .8; + opacity: 0.8; margin-top: -5px; width: max-content; } -@media screen and (max-width:460px) { +@media screen and (width <= 460px) { .app-body .hashtag-header .hashtag-header__header + div { max-width: 55%; line-height: 1.5; margin-top: -2px; } + .app-body .hashtag-header .hashtag-header__header + div > span { display: inline-block; margin-right: 5px; } } + .layout-multiple-columns .hashtag-header .hashtag-header__header + div { max-width: 55%; line-height: 1.5; margin-top: -2px; } + .layout-multiple-columns .hashtag-header .hashtag-header__header + div > span { display: inline-block; margin-right: 5px; } -@media screen and (min-width:890px) { +@media screen and (width >= 890px) { .app-body .hashtag-header .hashtag-header__header button { transform: translate(0, 8px); } } - /* Account recommendations (For You Tab + User directory */ .app-body .scrollable .account-card { margin: 0; @@ -4800,46 +5887,57 @@ button { border: 0; border-bottom: 1px solid var(--color-lines); } + .app-body .account-card__header { padding: 0; border-radius: 0; height: 128px; overflow: hidden; } -.app-body .scrollable .account-card__bio:after { + +.app-body .scrollable .account-card__bio::after { background: linear-gradient(270deg, var(--color-content-bg), transparent); } + .app-body .account-card__header img { background-color: var(--color-content-secondary-bg); } + .app-body .account-card__title__avatar .account__avatar { border: 0; border-radius: 50%; overflow: visible; } + .app-body .account-card__title__avatar img { border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-content-bg); } + .app-body .account-card__title .display-name bdi, .app-body .account-card__counters__item, .app-body .account-card__counters__item small { color: var(--color-content-fg); } + .app-body .account-card__counters__item small { - opacity: .7; + opacity: 0.7; } + .account-card__title .display-name bdi .display-name__html { font-weight: bold; } + .app-body .account-card__bio a { color: var(--color-accent); } + .app-body .filter-form { background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); } + .app-body .filter-form__column { padding: 10px 15px; } @@ -4849,6 +5947,7 @@ button { gap: 2px; padding-bottom: 14px; } + .app-body .explore__suggestions__card__source span { background-color: var(--color-content-secondary-bg); padding: 6px 12px; @@ -4857,257 +5956,335 @@ button { color: var(--color-fg-muted); font-weight: 500; } -.app-body .explore__suggestions__card__body__main__name-button .display-name__account { + +.app-body + .explore__suggestions__card__body__main__name-button + .display-name__account { color: var(--color-content-fg); - opacity: .75; + opacity: 0.75; } + .app-body .explore__suggestions__card .icon-button { background-color: var(--color-content-secondary-bg); color: var(--color-fg-muted); padding: 6px; border: 0; } + .app-body .explore__suggestions__card .icon-button:is(:active, :hover) { background-color: var(--color-accent-bg); } -@media screen and (min-width:1173px) { +@media screen and (width >= 1173px) { .app-body .explore__suggestions__card .icon-button { opacity: 0; transform: translateX(50%); - transition: all .3s; + transition: all 0.3s; } + .app-body .explore__suggestions__card:hover .icon-button { opacity: 1; transform: translateX(0); } } - /* 📰 Trending stories */ .app-body .story { background-color: var(--color-content-bg); - transition: all .3s; + transition: all 0.3s; } + .app-body .story:not(:last-child) { border-bottom: 2px solid var(--color-content-secondary-separator); } + .app-body .story, .app-body .story__details__title { color: var(--color-content-fg); } + .app-body .story__details__title { font-weight: bold; - transition: all .3s; + transition: all 0.3s; } + .app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) { background-color: var(--color-content-bg-focus); } + .app-body .story__details__publisher { color: var(--color-fg); } + .app-body .story .story__details__publisher { - opacity: .7; - transition: all .3s; + opacity: 0.7; + transition: all 0.3s; } -.app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) :is(.story__details__publisher, .story__details__title) { + +.app-body + .story:has(:is(.story__thumbnail, .story__details__title):hover) + :is(.story__details__publisher, .story__details__title) { color: var(--color-accent); opacity: 1; } + .app-body .story__details__shared { color: var(--color-fg-muted); } + .app-body .story__details__shared__pill { - background-color: - color-mix( - in srgb, - var(--color-accent), - transparent 92% - ); + background-color: color-mix(in srgb, var(--color-accent), transparent 92%); color: var(--color-accent); border-radius: 8px; - transition: all .3s; + transition: all 0.3s; } + .app-body .story__details__shared__pill:hover { background-color: var(--color-accent-bg); } + .app-body .story__details__shared__pill:active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .story.expanded { gap: 20px; padding-bottom: 20px; } + .app-body .story.expanded .story__thumbnail { margin: 0; } + .app-body .story.expanded .story__thumbnail img { border-radius: 8px; } + .app-body .story__details__shared__author-link { color: var(--color-content-fg); } + .app-body .story__details__shared__author-link:hover { color: var(--color-accent); } - /* 🔍 Search field and search results */ .app-body .search { margin-bottom: 10px; - transition: transform .3s; + transition: transform 0.3s; } + .app-body .search:has(.search__icon:active) { - transform: scale(.95); + transform: scale(0.95); } + .app-body .search__input { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); - font-weight: 500; + font-weight: 400; + text-indent: 22px; padding-inline-end: 45px; padding-inline-start: 16px; outline-offset: 0; outline: 0 solid var(--color-accent-bg); transition: - border-color .2s, - background-color .2s, - outline .2s; + border-color 0.2s, + background-color 0.2s, + outline 0.2s; } + .app-body .search__input::placeholder, .app-body .compose-form .spoiler-input__input::placeholder { font-weight: 500; color: var(--color-accent); } + .app-body .search__input:focus { border-color: var(--color-accent); background-color: var(--color-content-bg); outline: 3px solid var(--color-accent-bg); border-radius: 8px; } + .app-body .search__input:focus::placeholder, .app-body .compose-form .spoiler-input__input:focus::placeholder { color: var(--color-content-fg); - opacity: .4; + opacity: 0.4; } + .app-body .search__icon .icon { padding: 5px; transform: scale(1) translateY(-50%); background-size: 24px !important; - top: 50%; + top: 12px; inset-inline-start: unset; inset-inline-end: 12px; + margin-left: 30px; } + .app-body .search__input:not(:placeholder-shown) + .search__icon:hover .icon { background-image: var(--icon-erase-active); } + .app-body .compose-panel .icon-search, .app-body .compose-panel .icon-search.active, .app-body .explore__search-header .icon-search { background-image: var(--icon-search-active); } + .app-body .compose-panel .icon-search.active, .app-body .search__icon .icon-search.active { opacity: 1; z-index: 1; } + .app-body .explore__search-results { border-radius: 0; border: 0; background-color: transparent; overflow: hidden; } + .app-body .explore__search-header { background-color: transparent; } + .app-body .explore__search-results .account { padding-top: 16px; } + .app-body .explore__search-results article:last-child > .account { border-bottom: 1px solid var(--color-lines); } -.app-body :is(.explore__search-results, .search-results__section) .trends__item { + +.app-body + :is(.explore__search-results, .search-results__section) + .trends__item { border-bottom: 2px solid var(--color-content-secondary-bg); } -.app-body :is(.explore__search-results, .search-results__section) article:first-child > .trends__item, -.app-body :is(.explore__search-results, .search-results__section) > .trends__item:first-child, -.app-body :is(.explore__search-results, .search-results__section) > .account:first-child { + +.app-body + :is(.explore__search-results, .search-results__section) + article:first-child + > .trends__item, +.app-body + :is(.explore__search-results, .search-results__section) + > .trends__item:first-child, +.app-body + :is(.explore__search-results, .search-results__section) + > .account:first-child { border-top: 1px solid var(--color-lines); } -.app-body :is(.explore__search-results, .search-results__section) article:last-child > .trends__item, -.app-body :is(.explore__search-results, .search-results__section) > .trends__item:last-child, -.app-body :is(.explore__search-results, .search-results__section) > .account:last-child { + +.app-body + :is(.explore__search-results, .search-results__section) + article:last-child + > .trends__item, +.app-body + :is(.explore__search-results, .search-results__section) + > .trends__item:last-child, +.app-body + :is(.explore__search-results, .search-results__section) + > .account:last-child { border-bottom: 1px solid var(--color-lines); } + .app-body .search-results__section { background-color: var(--color-content-bg); border-bottom: 0; } + .app-body .search-results__section__header { background-color: var(--color-content-secondary-bg); border-bottom: 0; color: var(--color-content-fg); } + .app-body .search-results__section__header button { color: var(--color-accent); } + .app-body .account .account__details > span { color: var(--color-content-fg); } + .app-body .account .account__details .verified-badge { color: var(--color-accent); } + .app-body .account .account__details .verified-badge span { font-weight: 500; } + .app-body .compose-panel:has(> .search.active) { overflow: visible; } + .app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; margin-top: 10px; border: 1px solid var(--color-lines); - animation: fadein-short .2s 1; + animation: fadein-short 0.2s 1; } + .app-body .search__popout h4 { font-weight: bold; } + .app-body .search__popout h4, .app-body .search__popout__menu__message, .app-body .search__popout__menu__item { color: var(--color-content-fg); } + .app-body .search__popout__menu__item { align-items: center; border-radius: 6px; } + .app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } + .app-body .search__popout__menu__item :is(.icon-button, .icon-button .icon) { border-radius: 6px; transition: none; } -.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) :is(.icon-button, .icon-button .icon) { + +.app-body + .search__popout__menu__item:is(.selected, :active, :focus, :hover) + :is(.icon-button, .icon-button .icon) { color: var(--color-accent-fg); } + .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover), -.app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) .icon { +.app-body + .search__popout__menu__item + .icon-button:is(:active, :focus, :hover) + .icon { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } + .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover), -.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { +.app-body + .search__popout__menu__item:is(.selected, :active, :focus, :hover) + mark { background-color: var(--color-accent); color: var(--color-accent-fg); } -.app-body .search__popout__menu:nth-child(2):not(:has(.search__popout__menu__message)) { +.app-body + .search__popout__menu:nth-child(2):not(:has(.search__popout__menu__message)) { margin-bottom: 10px; } -.app-body .search__popout h4:has(+ .search__popout__menu:last-child, + .search__popout__menu__message) { + +.app-body + .search__popout + h4:has(+ .search__popout__menu:last-child, + .search__popout__menu__message) { background-color: var(--color-content-secondary-bg); padding-top: 15px; padding-left: 15px; @@ -5116,6 +6293,7 @@ button { border-radius: 6px 6px 0 0; color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child, .app-body .search__popout > .search__popout__menu__message:last-child { margin: 0 0 -10px; @@ -5123,32 +6301,43 @@ button { border-radius: 0 0 6px 6px; padding: 5px; } + .app-body .search__popout > .search__popout__menu__message:last-child { padding: 5px 15px 15px; color: var(--color-fg-muted); } -.app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) { + +.app-body + .search__popout__menu:last-child + .search__popout__menu__item:not(.selected, :active, :hover, :focus) { color: var(--color-fg-muted); } -.app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) mark { + +.app-body + .search__popout__menu:last-child + .search__popout__menu__item:not(.selected, :active, :hover, :focus) + mark { color: var(--color-content-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .search { margin-bottom: 0; } + .app-body:not(.layout-multiple-columns) .explore__search-header { padding-top: 2px; } + .app-body:not(.layout-multiple-columns) .search__input { padding: 13px; } + .app-body:not(.layout-multiple-columns) .explore__search-header { padding: 10px 0; } } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body:not(.layout-multiple-columns) .explore__search-header { padding: 10px; } @@ -5158,13 +6347,15 @@ button { 0% { transform: scale(120%) translate(0, 0) rotate(0deg); } + 100% { transform: scale(200%) translate(100vw, 100vh) rotate(600deg); } } -.app-body:has(.search__input[value="Tangerine UI"])::after, -.app-body:has(.search__input[value="tangerine ui"])::after { - content: "\1F34A"; + +.app-body:has(.search__input[value='Tangerine UI'])::after, +.app-body:has(.search__input[value='tangerine ui'])::after { + content: '\1F34A'; position: fixed; display: block; text-align: center; @@ -5177,8 +6368,6 @@ button { animation: 10s linear 0s makeawish; } - - /* Dismissable banners */ .app-body .dismissable-banner { background-color: var(--color-accent); @@ -5187,22 +6376,28 @@ button { border: 0; margin: 10px 10px 5px; } + .app-body .dismissable-banner__message h1 { color: var(--color-content-fg); margin-bottom: 8px; } + .app-body .dismissable-banner__message, .app-body .dismissable-banner .dismissable-banner__action .icon-button { color: var(--color-accent-fg); font-weight: normal; } + .app-body .dismissable-banner .dismissable-banner__action .icon-button:hover { color: var(--color-accent); } + .app-body .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } -.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + +.app-body + .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: var(--color-content-bg); margin: 0; padding-top: 10px; @@ -5213,42 +6408,52 @@ button { border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__action .icon-button { + +.app-body + .dismissable-banner:has(.dismissable-banner__message > img:first-child) + .dismissable-banner__action + .icon-button { color: var(--color-accent); } -.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__message { + +.app-body + .dismissable-banner:has(.dismissable-banner__message > img:first-child) + .dismissable-banner__message { color: var(--color-content-fg); } + .app-body .dismissable-banner__background-image { display: none; } + .app-body .dismissable-banner__message__actions .button, .app-body .dismissable-banner__message__actions .button.button-tertiary { line-height: 1.75; padding: 6px 17px; } + .app-body .dismissable-banner__message__actions { gap: 5px; } - - /* 🔔 Notifications ---------------- */ -.app-body .status.muted -:is( - .status__content, - .status__content a, - .status__content p, - .status__display-name strong - ), +.app-body + .status.muted + :is( + .status__content, + .status__content a, + .status__content p, + .status__display-name strong + ), .app-body .attachment-list__list a { color: var(--color-content-fg-muted); } + .app-body .notification.unread::before, .app-body .status__wrapper.unread::before, -.app-body .notification-group--unread:before, -.app-body .notification-ungrouped--unread:before { +.app-body .notification-group--unread::before, +.app-body .notification-ungrouped--unread::before { background-color: var(--color-accent); width: 8px; border: 0; @@ -5259,25 +6464,30 @@ button { left: 5px; z-index: 2; } + .app-body .notification__message { padding: 12px 12px 5px; background-color: var(--color-post-bg); color: var(--color-content-fg-bold); - transition: all .3s; + transition: all 0.3s; } + .app-body .notification__display-name { font-weight: bold; color: var(--color-content-fg); } + .app-body .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } + .app-body .notification__report__details { color: var(--color-content-fg); } + .app-body .notification__message .icon { color: var(--color-accent); width: 18px; @@ -5285,24 +6495,27 @@ button { text-align: right; background-position: center right; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .notification__message .icon { margin-left: 34px; } } + .app-body .notification .status__wrapper { padding-top: 0; } + .app-body -:is( - .notification-favourite, - .notification-reblog, - .notification-poll, - .notification-status - ) -.status__action-bar { + :is( + .notification-favourite, + .notification-reblog, + .notification-poll, + .notification-status + ) + .status__action-bar { display: none; } + .app-body .account, .app-body .notification-request { background-color: var(--color-content-bg); @@ -5310,81 +6523,121 @@ button { padding-left: 22px; padding-top: 12px; } + .app-body .notification .account { border-bottom: 0; } + .app-body .explore__search-results .account { padding-top: 16px; } + .app-body -.notification -.account:has(.account__wrapper > .account__relationship > button:nth-child(2)) -.display-name__account { + .notification + .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) + .display-name__account { display: block; } + .app-body -.notification -.account:has(.account__wrapper > .account__relationship > button:nth-child(2)) -.display-name { + .notification + .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) + .display-name { margin-bottom: 0; } -@media screen and (min-width:890px) { - .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { +@media screen and (width >= 890px) { + .app-body + .notification + .account:has( + .account__wrapper > .account__relationship > button:nth-child(2) + ) { padding-left: 32px; padding-right: 22px; } } -@media screen and (max-width:889px) { - .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { +@media screen and (width <= 889px) { + .app-body + .notification + .account:has( + .account__wrapper > .account__relationship > button:nth-child(2) + ) { padding-left: 27px; } } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body .account { padding-left: 18px; } } + .app-body .notification .account__relationship .icon-button { padding: 5px; border-radius: 8px; - transition: background-color .2s; + transition: background-color 0.2s; } + .app-body .notification .account__relationship .icon-button:first-child { background-color: var(--color-confirm-bg); } -.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { + +.app-body + .notification + .account__relationship + .icon-button:first-child:is(:active, :focus, :hover) { background-color: var(--color-confirm); } -.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { + +.app-body + .notification + .account__relationship + .icon-button:first-child:is(:active, :focus, :hover) + .icon-check { background-image: var(--icon-check-inv); } + .app-body .notification .account__relationship .icon-button:last-child { background-color: var(--color-reject-bg); } -.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { + +.app-body + .notification + .account__relationship + .icon-button:last-child:is(:active, :focus, :hover) { background-color: var(--color-reject); } -.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { + +.app-body + .notification + .account__relationship + .icon-button:last-child:is(:active, :focus, :hover) + .icon-times { background-image: var(--icon-reject-inv); } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body .notification-list { bottom: calc(5rem + var(--safe-area-bottom)); } } + .app-body .notification-bar { - background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%); + background-color: color-mix( + in srgb, + var(--color-content-bg), + transparent 25% + ); color: var(--color-content-fg); border: 1px solid var(--color-lines-translucent); box-shadow: var(--dropdown-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } + .app-body .notification-bar-action { - transition: all .2s; + transition: all 0.2s; } + .app-body .notification-bar-action:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); @@ -5395,21 +6648,26 @@ button { .app-body .app-form__toggle__label .hint { color: var(--color-content-fg-bold); } + .app-body .column-header__setting-btn { font-weight: 600; } + .app-body .column-settings h3 { margin-bottom: 12px; font-weight: 500; } + .app-body .column-settings section { border-color: var(--color-lines); } + .app-body .column-settings section:not(:first-child) { padding-bottom: 25px; } + .app-body .app-form__toggle__label .hint { - opacity: .5; + opacity: 0.5; } .app-body .filtered-notifications-banner { @@ -5419,6 +6677,7 @@ button { position: relative; padding: 25px; } + .app-body .filtered-notifications-banner::before { position: absolute; display: block; @@ -5426,69 +6685,85 @@ button { right: 10px; top: 10px; bottom: 10px; - content: " "; + content: ' '; background-color: var(--color-content-secondary-bg); border-radius: 8px; - transition: all .2s; + transition: all 0.2s; } + .app-body .filtered-notifications-banner:is(:active, :hover, :focus)::before { background-color: color-mix(in srgb, var(--color-accent), transparent 88%); } + .app-body .filtered-notifications-banner:hover::before { left: 6px; right: 6px; top: 8px; bottom: 8px; } + .app-body .filtered-notifications-banner:active::before { - transform: scale(.98); + transform: scale(0.98); } + .app-body .filtered-notifications-banner > * { z-index: 1; } + .app-body .filtered-notifications-banner .filtered-notifications-banner__badge, -.app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge, +.app-body + .filtered-notifications-banner:is(:active, :focus, :hover) + .filtered-notifications-banner__badge, .app-body .notification-request__name .filtered-notifications-banner__badge, .app-body .notification-request .account__avatar__counter { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 50px; } + .app-body .notification-request .account__avatar__counter { width: 19px; height: 19px; box-sizing: border-box; } + .app-body .filtered-notifications-banner__badge__badge { background-color: var(--color-content-bg); color: var(--color-content-fg); font-weight: 600; } + .app-body .filtered-notifications-banner__text { color: var(--color-content-fg); } + .app-body .filtered-notifications-banner__text strong { font-weight: 600; } + .app-body .filtered-notifications-banner .notification-group__icon { justify-content: center; } + .app-body .notification-request__name__display-name, .app-body .notification-request__name { color: var(--color-content-fg); letter-spacing: unset; } + .app-body .notification-request { padding-top: 15px; } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body .notification-request { margin-top: 60px; } } + .app-body .notification-group { padding: 16px 23px; } + .app-body .notification-group, .app-body .notification-ungrouped { border: none; @@ -5504,32 +6779,37 @@ button { width: calc(100% - 78px); right: 0; bottom: 0; - content: " "; - opacity: .7; + content: ' '; + opacity: 0.7; } + .app-body .notification-ungrouped { padding: 0; } + .app-body .notification-ungrouped :is(.status__avatar, .account__avatar) { height: 46px !important; width: 46px !important; } -.app-body .notification-ungrouped -:is( - .attachment-list, - .audio-player, - .hashtag-bar, - .media-gallery, - .more-from-author, - .picture-in-picture-placeholder, - .status-card, - .status__action-bar, - .status__content, - .video-player - ) { + +.app-body + .notification-ungrouped + :is( + .attachment-list, + .audio-player, + .hashtag-bar, + .media-gallery, + .more-from-author, + .picture-in-picture-placeholder, + .status-card, + .status__action-bar, + .status__content, + .video-player + ) { margin-left: 0; width: 100%; } + .app-body .notification-ungrouped__header { margin-bottom: -6px; padding-top: 16px; @@ -5538,123 +6818,147 @@ button { font-weight: 500; color: var(--color-content-fg-muted); background-color: var(--color-post-bg); - transition: background .3s; + transition: background 0.3s; } + .app-body .notification-ungrouped--direct .notification-ungrouped__header { background-color: var(--color-post-bg); - transition: background .3s; + transition: background 0.3s; } -.app-body .notification-ungrouped--mention:not(.notification-ungrouped--direct) .notification-ungrouped__header { + +.app-body + .notification-ungrouped--mention:not(.notification-ungrouped--direct) + .notification-ungrouped__header { display: none; } -.app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) { + +.app-body + :is(.notification-group__icon, .notification-ungrouped__header__icon) { width: 46px; height: 28px; justify-content: end; } -.app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) svg { + +.app-body + :is(.notification-group__icon, .notification-ungrouped__header__icon) + svg { width: 22px; height: 22px; } + .app-body .notification-ungrouped .status::before { display: none; } + .app-body .notification-group__main__status { border: 0; background-color: var(--color-content-secondary-bg); padding: 10px 12px 12px; transition: - background .3s, - transform .3s; + background 0.3s, + transform 0.3s; } + .app-body .notification-group__main__status:hover { background-color: color-mix(in srgb, var(--color-accent), transparent 88%); } + .app-body .notification-group__main__status:active { - transform: scale(.98); + transform: scale(0.98); } + .app-body -:is( - .notification-group__main__header__label, - .notification-group__embedded-status__account, - .notification-ungrouped__header - ) -:is( - bdi, - bdi > strong - ) { + :is( + .notification-group__main__header__label, + .notification-group__embedded-status__account, + .notification-ungrouped__header + ) + :is(bdi, bdi > strong) { color: var(--color-content-fg); font-weight: 700; } + .app-body .notification-group__main__header__label { color: var(--color-content-fg); justify-content: space-between; } + .app-body .notification-group__main__header__label time { color: var(--color-content-fg-muted); } + .app-body .notification-group__embedded-status__account { color: var(--color-content-fg); } + .app-body .notification-group__main__additional-content { color: var(--color-fg-muted); } + .app-body .notification-group__embedded-status .account__avatar { opacity: 1; } - /* 📋 Lists tab */ .app-body .column-inline-form { background-color: var(--color-content-secondary-bg); border: 1px solid var(--color-lines); border-bottom: 0; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .column-inline-form { border-left: 0; border-right: 0; } } + .app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; border: 1px solid var(--color-lines); } + .app-body .column-inline-form label input:focus { border-color: var(--color-accent); } + .app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); color: var(--color-fg); } + .app-body .item-list .column-subheading { color: var(--color-fg-muted); border-top: 0; border-bottom: 0; } + .app-body .getting-started .column-subheading { color: var(--color-fg-muted); } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .item-list .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } + .app-body .list-editor { background-color: var(--color-content-bg); } + .app-body .list-editor .drawer__inner { background-color: var(--color-content-bg); border-radius: 0; } + .app-body .list-editor__search { margin: 10px; background-color: var(--color-content-bg); } + .app-body .list-editor .column-inline-form { background-color: var(--color-content-secondary-bg); border-top: 0; @@ -5662,17 +6966,21 @@ button { border-left: 0; border-color: var(--color-lines); } + .app-body .list-editor .column-inline-form .icon-button { color: var(--color-accent); } + .app-body .list-editor .column-inline-form .icon-button.disabled { - opacity: .5; + opacity: 0.5; pointer-events: none; } + .app-body .list-editor .account { border-right: 0 !important; border-left: 0 !important; } + .app-body .list-editor .setting-text { width: 100%; background-color: var(--color-accent-bg); @@ -5680,6 +6988,7 @@ button { border-radius: 8px; color: var(--color-content-fg); } + .app-body .list-editor .setting-text:is(:active, :focus) { border-color: var(--color-accent); background-color: var(--color-content-bg); @@ -5693,18 +7002,21 @@ button { color: var(--color-content-fg); box-sizing: border-box; } + .app-body .item-list .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } + .app-body .item-list article:last-child .column-link { border-bottom: 0; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .item-list .column-link { border-left: 0; border-right: 0; } + .app-body .item-list article:last-child .column-link { border-radius: 0; } @@ -5715,28 +7027,35 @@ button { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .list-adder__account { margin-top: 12px; } + .app-body .list-adder .column-inline-form { border-radius: 0; } + .app-body .list-adder .list { border-bottom: 2px solid var(--color-content-secondary-separator); } + .app-body .list-editor .drawer__pager { border: none; border-radius: 0; } + .app-body .list-editor .account__relationship .icon-button { border-color: var(--color-accent); color: var(--color-accent); } + .app-body .list-editor .search .search__input { border-top: 1px solid; border-bottom: 1px solid; border-color: var(--color-accent-lines); } + .app-body .list-editor .search .search__input:focus { border-color: var(--color-accent); } @@ -5746,69 +7065,88 @@ button { margin-bottom: 0; z-index: 0; } + .app-body .account-authorize__wrapper { margin: 0; border-bottom: 1px solid var(--color-lines); } + .app-body .account-authorize { background-color: var(--color-content-bg); - padding: 20px + padding: 20px; } + .app-body .account--panel { background-color: var(--color-content-bg); border: 0; padding: 0 5px; } + .app-body .account__header__content { color: var(--color-content-fg); } + .app-body .account--panel__button { - padding: 0 5px 12px 5px; + padding: 0 5px 12px; } + .app-body .account--panel__button .icon-button { width: 100%; } + .app-body .account--panel__button .icon-button, .app-body .notification-request__actions .icon-button { padding: 10px; box-sizing: border-box; border-radius: 8px; - transition: all .3s; + transition: all 0.3s; border: 0; } + .app-body .account--panel button .icon-check { background-image: var(--icon-check); } + .app-body .account--panel button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .account--panel__button:first-child .icon-button, .app-body .notification-request__actions .icon-button:last-child { background-color: var(--color-confirm-bg); color: var(--color-confirm-fg); } + .app-body .account--panel__button:first-child .icon-button:is(:hover, :active), -.app-body .notification-request__actions .icon-button:last-child:is(:hover, :active) { +.app-body + .notification-request__actions + .icon-button:last-child:is(:hover, :active) { background-color: var(--color-confirm); color: var(--color-accent-fg); } + .app-body .account--panel button .icon-times { background-image: var(--icon-reject); } + .app-body .account--panel button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } + .app-body .account--panel__button:nth-child(2) .icon-button, .app-body .notification-request__actions .icon-button:first-child { background-color: var(--color-reject-bg); color: var(--color-reject); } + .app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active), -.app-body .notification-request__actions .icon-button:first-child:is(:hover, :active) { +.app-body + .notification-request__actions + .icon-button:first-child:is(:hover, :active) { background-color: var(--color-reject); color: var(--color-accent-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; @@ -5817,7 +7155,6 @@ button { } } - /* Inline Follow Suggesitons */ .app-body .inline-follow-suggestions { background-color: var(--color-content-bg); @@ -5825,58 +7162,83 @@ button { border-bottom: 1px solid var(--color-lines); position: relative; } + .app-body .inline-follow-suggestions__header h3 { font-weight: bold; color: var(--color-content-fg); } + .app-body .inline-follow-suggestions__body__scrollable { scroll-padding: 60px; } + .app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar { height: 5px; } -.app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar-thumb { + +.app-body + .inline-follow-suggestions__body__scrollable::-webkit-scrollbar-thumb { opacity: 1; border-radius: 0; } + .app-body .inline-follow-suggestions__body__scrollable__card { border-radius: 8px; background-color: var(--color-content-secondary-bg); border: 0; } -.app-body .inline-follow-suggestions__body__scrollable__card :is(.display-name__html, .display-name__account), -.app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source { + +.app-body + .inline-follow-suggestions__body__scrollable__card + :is(.display-name__html, .display-name__account), +.app-body + .inline-follow-suggestions__body__scrollable__card__text-stack__source { color: var(--color-content-fg); } -.app-body .inline-follow-suggestions__body__scrollable__card .display-name__account { - opacity: .6; + +.app-body + .inline-follow-suggestions__body__scrollable__card + .display-name__account { + opacity: 0.6; } + .app-body .inline-follow-suggestions__body__scrollable__card .verified-badge { color: var(--color-accent); } + .app-body .inline-follow-suggestions__body__scrollable__card button:active { - transform: scale(.95); + transform: scale(0.95); } + .app-body .inline-follow-suggestions__body__scroll-button__icon { background-color: var(--color-accent); border-radius: 8px; padding: 6px; - transition: all .3s; + transition: all 0.3s; } + .app-body .inline-follow-suggestions__body__scroll-button { opacity: 1; } -.app-body .inline-follow-suggestions__body__scroll-button:is(:active) .inline-follow-suggestions__body__scroll-button__icon { - transform: scale(.9); + +.app-body + .inline-follow-suggestions__body__scroll-button:is(:active) + .inline-follow-suggestions__body__scroll-button__icon { + transform: scale(0.9); } -.app-body .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) .inline-follow-suggestions__body__scroll-button__icon { + +.app-body + .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) + .inline-follow-suggestions__body__scroll-button__icon { background-color: var(--color-accent-focus); } + .app-body .inline-follow-suggestions__body__scroll-button.left { background: linear-gradient(to right, var(--color-content-bg), transparent); margin-left: -15px; padding-left: 21px; } + .app-body .inline-follow-suggestions__body__scroll-button.right { background: linear-gradient(to left, var(--color-content-bg), transparent); margin-right: -15px; @@ -5887,35 +7249,42 @@ button { border-radius: 50px; background-color: var(--color-content-bg); border: 3px solid var(--color-content-bg); - box-shadow: 0 2px 5px rgba(0, 0, 0, .1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 10%); transform: translateY(3px); } -.app-body .inline-follow-suggestions .button:is(.button-secondary, .button-tertiary) { +.app-body + .inline-follow-suggestions + .button:is(.button-secondary, .button-tertiary) { padding: 7px 18px; } -.app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source .icon { + +.app-body + .inline-follow-suggestions__body__scrollable__card__text-stack__source + .icon { width: 17px; height: 17px; } - .app-body .button, .app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; } + .app-body .button, .app-body .button.logo-button, -.app-body .rules-list li:before, +.app-body .rules-list li::before, .app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); - transition: all .2s; + transition: all 0.2s; } + .app-body .button:disabled, .app-body .button.disabled { - opacity: .7; + opacity: 0.7; } + .app-body .text-icon-button.active, .app-body .button.button-tertiary, .app-body .account__header__fields a, @@ -5944,38 +7313,51 @@ button { .app-body .notification-bar-action { color: var(--color-accent); } + .app-body .icon-button, .app-body .icon-button.inverted { color: var(--color-content-fg); } + .app-body .account__header__tabs__buttons .icon-button { padding: 6px; border: 0; color: var(--color-content-fg); background-color: var(--color-content-secondary-bg); } + .app-body .account__header__tabs__buttons .icon-button:hover { background-color: var(--color-accent-bg); color: var(--color-accent); } -.app-body .account__header__tabs__buttons .icon-button:has(.icon-ellipsis-v, .icon-close).active { + +.app-body + .account__header__tabs__buttons + .icon-button:has(.icon-ellipsis-v, .icon-close).active { background-color: var(--color-accent); } + .app-body .icon-button { border-radius: 8px; - transition: all .2s; + transition: all 0.2s; } + .app-body .icon-button:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .account__header__tabs__buttons .icon-button.active .icon-bell { - animation: bell-ring .4s ease-in 1; + animation: bell-ring 0.4s ease-in 1; transform-origin: top center; } -.app-body .account__header__tabs__buttons .icon-button.active:has(.icon-bell):is(:active, :focus) { + +.app-body + .account__header__tabs__buttons + .icon-button.active:has(.icon-bell):is(:active, :focus) { background-color: var(--color-content-secondary-bg); } + .app-body .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; @@ -5983,40 +7365,56 @@ button { box-shadow: var(--dropdown-shadow); padding: 0; } + .app-body .language-dropdown__dropdown__results__item { border-radius: 8px; } + .app-body .language-dropdown__dropdown__results__item.active, .app-body .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } -.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { + +.app-body + .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .app-body .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } + .app-body .language-dropdown__dropdown__results__item__common-name { - opacity: .7; + opacity: 0.7; } + .app-body -:is(.language-dropdown__dropdown__results__item__common-name, - .language-dropdown__dropdown__results__item__native-name) { + :is( + .language-dropdown__dropdown__results__item__common-name, + .language-dropdown__dropdown__results__item__native-name + ) { color: var(--color-content-fg); } + .app-body -.language-dropdown__dropdown__results__item:is(.active, .active:hover) -:is(.language-dropdown__dropdown__results__item__common-name, - .language-dropdown__dropdown__results__item__native-name) { + .language-dropdown__dropdown__results__item:is(.active, .active:hover) + :is( + .language-dropdown__dropdown__results__item__common-name, + .language-dropdown__dropdown__results__item__native-name + ) { color: var(--color-accent-fg); } + .app-body -.language-dropdown__dropdown__results__item:is(:active, :focus, :hover) -:is(.language-dropdown__dropdown__results__item__native-name, - .language-dropdown__dropdown__results__item__common-name) { + .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) + :is( + .language-dropdown__dropdown__results__item__native-name, + .language-dropdown__dropdown__results__item__common-name + ) { color: var(--color-accent); } + .app-body .button:not(.button-secondary):is(:active, :hover), .app-body .button.button-tertiary:is(:active, :hover), .app-body .button.logo-button:is(:active, :hover) { @@ -6024,28 +7422,40 @@ button { } .app-body .react-toggle { - transition: transform .3s; + transition: transform 0.3s; } + .app-body .react-toggle:active { - transform: scale(.9); + transform: scale(0.9); } + .app-body .react-toggle-track, .app-body .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-fg-muted); - transition: all .2s; + transition: all 0.2s; } + .app-body .react-toggle-thumb { border: 0; background-color: #ffffff; } + .app-body .react-toggle.react-toggle--checked .react-toggle-track, -.app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, -.app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { +.app-body + .react-toggle.react-toggle--checked:is(:hover, :focus-within):not( + .react-toggle--disabled + ) + .react-toggle-track, +.app-body + .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) + .react-toggle-track { background-color: var(--color-accent); } + .app-body .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } + .app-body .react-toggle--focus { outline: 0; } @@ -6053,6 +7463,7 @@ button { .app-body .radio-button { color: var(--color-content-fg); } + .app-body .radio-button__input, .app-body .poll__input, .app-body .check-box__input { @@ -6061,35 +7472,41 @@ button { background-color: var(--color-accent-bg); outline: 1px solid var(--color-accent) !important; outline-offset: -1px; - transition: transform .3s; + transition: transform 0.3s; width: 20px; height: 20px; } + .app-body .radio-button:active .radio-button__input, .app-body .poll__option:active .poll__input, .app-body .check-box:active .check-box__input { - transform: scale(.9); + transform: scale(0.9); } + .app-body .radio-button__input.checked, .app-body .poll__input.active { background-color: var(--color-accent); } -.app-body .check-box__input.checked:before, -.app-body .radio-button__input.checked:before { + +.app-body .check-box__input.checked::before, +.app-body .radio-button__input.checked::before { display: none; } + .app-body .check-box__input.checked, .app-body .radio-button__input.checked { background-color: var(--color-accent); } + .app-body .check-box__input.checked .icon-check { - transform: scale(.5); + transform: scale(0.5); } .app-body .dropdown-menu { border: 1px solid var(--color-lines); border-radius: 8px; } + .app-body .dropdown-menu, .app-body .dropdown-menu__container__header, .app-body .dropdown-menu__item.edited-timestamp__history__item, @@ -6100,16 +7517,18 @@ button { } .app-body .dropdown-menu__item a, -.app-body .dropdown-menu__arrow:before { +.app-body .dropdown-menu__arrow::before { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; } + .app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { background: var(--color-accent); color: var(--color-accent-fg); outline: 0; } + .app-body .dropdown-menu__separator { border-color: var(--color-content-secondary-separator); } @@ -6125,74 +7544,115 @@ button { box-shadow: var(--dropdown-shadow); padding: 8px; } -.app-body .privacy-dropdown :is(.privacy-dropdown__value, .privacy-dropdown__value), + +.app-body + .privacy-dropdown + :is(.privacy-dropdown__value, .privacy-dropdown__value), .app-body .privacy-dropdown__option { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 6px; margin-bottom: 2px; } -.app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), + +.app-body + .privacy-dropdown.active + :is(.privacy-dropdown__value, .privacy-dropdown__value.active), .app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.app-body .privacy-dropdown.active .privacy-dropdown__value:has(.text-icon-button.active) { + +.app-body + .privacy-dropdown.active + .privacy-dropdown__value:has(.text-icon-button.active) { border-radius: 6px 6px 0 0; } + .app-body .privacy-dropdown__option .privacy-dropdown__option__content, .app-body .privacy-dropdown__option .privacy-dropdown__option__content strong { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .privacy-dropdown__option.active .privacy-dropdown__option__content, -.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.app-body + .privacy-dropdown__option.active + .privacy-dropdown__option__content + strong, .app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content, -.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.app-body + .privacy-dropdown__option:hover + .privacy-dropdown__option__content + strong, .app-body .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, .app-body .privacy-dropdown .icon-button.inverted.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { + +.app-body + .privacy-dropdown__option:is(:hover, .active, .active:hover) + .icon-globe { background-image: var(--icon-globe-visibility-inv); } -.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { + +.app-body + .privacy-dropdown__option:is(:hover, .active, .active:hover) + .icon-unlock { background-image: var(--icon-unlock-inv); } -.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { + +.app-body + .privacy-dropdown__option:is(:hover, .active, .active:hover) + .icon-lock { background-image: var(--icon-lock-inv); } -.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { + +.app-body + .privacy-dropdown__option:is(:hover, .active, .active:hover) + .icon-at { background-image: var(--icon-at-inv); } + .app-body .privacy-dropdown__option .icon-info-circle path { fill: var(--color-content-fg); } -.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-info-circle path { + +.app-body + .privacy-dropdown__option:is(:hover, .active, .active:hover) + .icon-info-circle + path { fill: var(--color-accent-fg); } .app-body .dropdown-animation { - animation: fadein-short .2s 1; + animation: fadein-short 0.2s 1; } -.app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { +.app-body + .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } + .app-body .button.button-tertiary.button--confirmation { color: #4e8a6b; - background-color: rgba(121, 189, 154, 0.3); + background-color: rgba(121, 189, 154, 30%); } + .app-body .button.button-tertiary.button--destructive { color: #df405a; - background-color: rgba(223, 64, 90, 0.3); + background-color: rgba(223, 64, 90, 30%); } -.app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { + +.app-body + .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { background-color: #79bd9a; color: #ffffff; } -.app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { + +.app-body + .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { background-color: #df405a; color: #ffffff; } @@ -6200,162 +7660,215 @@ button { .app-body .button.button-tertiary.button--confirmation { color: #72cb9d; } + .app-body .button.button-tertiary.button--destructive { color: #f3637b; } } + .app-body -:is( - .block-modal__cancel-button, - .confirmation-modal__cancel-button, - .confirmation-modal__secondary-button, - .mute-modal__cancel-button - ):not(:hover) { + :is( + .block-modal__cancel-button, + .confirmation-modal__cancel-button, + .confirmation-modal__secondary-button, + .mute-modal__cancel-button + ):not(:hover) { background-color: color-mix(in srgb, var(--color-accent), transparent 90%); color: var(--color-accent); } + .app-body -:is( - .block-modal__cancel-button, - .confirmation-modal__cancel-button, - .confirmation-modal__secondary-button, - .mute-modal__cancel-button - ):is(:active, :hover) { - background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important; + :is( + .block-modal__cancel-button, + .confirmation-modal__cancel-button, + .confirmation-modal__secondary-button, + .mute-modal__cancel-button + ):is(:active, :hover) { + background-color: color-mix( + in srgb, + var(--color-accent), + transparent 70% + ) !important; color: var(--color-accent); } + .app-body + :is( + .block-modal__cancel-button, + .confirmation-modal__cancel-button, + .confirmation-modal__secondary-button, + .mute-modal__cancel-button + ):active, :is( - .block-modal__cancel-button, - .confirmation-modal__cancel-button, - .confirmation-modal__secondary-button, - .mute-modal__cancel-button - ):active, -:is( - .block-modal__cancel-button, - .confirmation-modal__cancel-button, - .confirmation-modal__secondary-button, - .mute-modal__cancel-button - ) -+ button:active { - transform: scale(.95); + .block-modal__cancel-button, + .confirmation-modal__cancel-button, + .confirmation-modal__secondary-button, + .mute-modal__cancel-button + ) + + button:active { + transform: scale(0.95); } + .app-body .status__content a.hashtag { color: var(--color-accent); } - - /* 🖱️ Interaction modals --------------------- */ .app-body .modal-root__modal:not(.media-modal) { border: 0; outline: 1px solid var(--color-lines-translucent); } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body .modal-root__modal:not(.media-modal) { margin-top: unset; } } + .app-body .compare-history-modal { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .compare-history-modal .report-modal__target { border-color: var(--color-lines); } + .app-body .safety-action-modal { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); border-radius: 8px; } + .app-body .safety-action-modal__confirmation, .app-body .safety-action-modal__confirmation strong, .app-body .safety-action-modal__confirmation h1 { color: var(--color-content-fg); } + .app-body .safety-action-modal__header__icon { background-color: var(--color-accent); } + .app-body .safety-action-modal__header, .app-body .safety-action-modal__header h1, .app-body .safety-action-modal__caveats, .app-body .safety-action-modal__bullet-points { color: var(--color-content-fg); } -.app-body :is(.safety-action-modal__header, .safety-action-modal__confirmation) h1 { + +.app-body + :is(.safety-action-modal__header, .safety-action-modal__confirmation) + h1 { font-weight: 600; } + .app-body .safety-action-modal__confirmation h1 { font-size: 150%; padding-top: 20px; } + .app-body .safety-action-modal__header h1 + div { - opacity: .6; + opacity: 0.6; } + .app-body .safety-action-modal__top { background-color: transparent; border: 0; } + .app-body .safety-action-modal__bottom { background-color: var(--color-content-secondary-bg); padding-top: 24px; border: 0; border-radius: 0 0 8px 8px; } + .app-body .safety-action-modal__bullet-points__icon .icon { transform: scale(1.3); } -.app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon { + +.app-body + .safety-action-modal__bullet-points + > div:first-child + .safety-action-modal__bullet-points__icon + .icon { background-image: var(--icon-megaphone); } -.app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon { + +.app-body + .safety-action-modal__bullet-points + > div:nth-child(2) + .safety-action-modal__bullet-points__icon + .icon { background-image: var(--icon-eye-shut); } -.app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon { + +.app-body + .safety-action-modal__bullet-points + > div:nth-child(3) + .safety-action-modal__bullet-points__icon + .icon { background-image: var(--icon-direct-messages); } -.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon { + +.app-body + .safety-action-modal__bullet-points + > div:nth-child(4) + .safety-action-modal__bullet-points__icon + .icon { background-image: var(--icon-reply); transform: scale(1); } + .app-body .safety-action-modal__field-group label { color: var(--color-content-fg); } + .app-body .report-modal { background-color: var(--color-content-bg); } + .app-body .actions-modal { background-color: var(--color-content-bg); } + .app-body .interaction-modal { background-color: var(--color-content-bg); border-radius: 10px; box-shadow: var(--dropdown-shadow); } + .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { color: var(--color-content-fg); } + .app-body .interaction-modal__lead p, .app-body .interaction-modal__choices__choice p { color: var(--color-fg); } + .app-body .interaction-modal__icon { transform: scale(1.4) translateX(-2px); } + .app-body .interaction-modal :is(p, strong) { color: var(--color-content-fg); } + .app-body .interaction-modal p.hint { color: var(--color-content-fg-muted); } + .app-body .interaction-modal :is(.button, .button.button-tertiary) { padding: 10px 18px; } + .app-body .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } + .app-body .copypaste input, .app-body .interaction-modal__login__input { border-color: var(--color-lines); @@ -6363,28 +7876,34 @@ button { color: var(--color-content-fg); border-radius: 8px; outline: 0 solid var(--color-accent-bg); - transition: all .2s; + transition: all 0.2s; } + .app-body .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .interaction-modal__login__input input::placeholder { color: var(--color-content-fg-muted); } + .app-body .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); outline: 3px solid var(--color-accent-bg); } + .app-body .interaction-modal__login .search__popout { border-color: var(--color-lines); } + .app-body .interaction-modal .copypaste button { padding: 8px 18px; } + .app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, @@ -6392,21 +7911,25 @@ button { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .boost-modal__container { margin-bottom: -11px; } + .app-body .confirmation-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .block-modal__action-bar, .app-body .boost-modal__action-bar, .app-body .confirmation-modal__action-bar, .app-body .mute-modal__action-bar { background-color: var(--color-accent-bg); } + .app-body .block-modal__action-bar > div, .app-body .boost-modal__action-bar > div, .app-body .confirmation-modal__action-bar > div, @@ -6418,35 +7941,43 @@ button { .app-body .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } + .app-body .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } -.app-body .actions-modal ul li:not(:empty) -a:is(.active, + +.app-body + .actions-modal + ul + li:not(:empty) + a:is( + .active, .active button, :active, :active button, :focus, :focus button, :hover, - :hover button) { + :hover button + ) { background-color: var(--color-accent); color: var(--color-accent-fg); } - /* Media modals */ .app-body .modal-root__overlay:has(+ div > .media-modal) { background-color: #030303 !important; } + .app-body .modal-root__overlay { - background-color: rgb(0, 0, 0, .4); + background-color: rgb(0, 0, 0, 40%); } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: rgb(0, 0, 0, .9); + background-color: rgb(0, 0, 0, 90%); } } + .app-body .media-modal__buttons .icon-button, .app-body .media-modal__nav { background-color: #1e1e1e; @@ -6457,29 +7988,33 @@ a:is(.active, align-items: center; justify-content: center; padding: 0; - transition: .2s all; - + transition: 0.2s all; } + .app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover), .app-body .media-modal__nav:is(:active, :focus, :hover) { background-color: #343434; color: #ffffff; } + .app-body .media-modal__close { top: 24px; left: 24px; } + .app-body .media-modal__zoom-button { top: 24px; right: 24px; } + .app-body .media-modal__nav--left { left: 24px; } + .app-body .media-modal__nav--right { right: 24px; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .media-modal__nav { display: none; } @@ -6488,36 +8023,44 @@ a:is(.active, .app-body .media-modal__overlay .picture-in-picture__footer { display: none; } + .app-body .media-modal__overlay .picture-in-picture__footer .icon-button > svg { width: 25px; height: 25px; } -.app-body .media-modal__overlay .picture-in-picture__footer .icon-button:is(:active, :hover, :focus) { + +.app-body + .media-modal__overlay + .picture-in-picture__footer + .icon-button:is(:active, :hover, :focus) { background-color: transparent !important; } + .app-body .picture-in-picture__footer .animated-number { color: var(--color-accent); } + .app-body .media-modal__page-dot { background-color: #858585; } + .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } .app-body .modal-root > div { - animation: slowin .3s 1; + animation: slowin 0.3s 1; } - - /* Report modals */ .app-body .report-dialog-modal__lead { color: var(--color-content-fg-muted); } + .app-body .report-dialog-modal { background-color: var(--color-content-bg); } + .app-body .report-dialog-modal .dialog-option, .app-body .report-dialog-modal .poll__option.dialog-option:last-child { border-top: 1px solid var(--color-lines); @@ -6527,8 +8070,9 @@ a:is(.active, padding: 15px; margin-bottom: 5px; border-radius: 8px; - transition: all .2s; + transition: all 0.2s; } + .app-body .report-dialog-modal .dialog-option:hover, .app-body .report-dialog-modal .poll__option.dialog-option:hover, .app-body .report-dialog-modal .dialog-option:has(.poll__input.active) { @@ -6542,15 +8086,25 @@ a:is(.active, .app-body .report-dialog-modal__textarea:focus { border-color: var(--color-accent); } + .app-body .report-dialog-modal .dialog-option .poll__input.active { background-color: var(--color-accent); } + .app-body .report-dialog-modal .dialog-option .poll__input svg { display: none; } -.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text, + +.app-body + .report-dialog-modal + .poll__option.dialog-option + > .poll__option__text, .app-body .report-dialog-modal .dialog-option time, -.app-body .report-dialog-modal .status__content > p:first-child:has(.status__content__spoiler-link) > span, +.app-body + .report-dialog-modal + .status__content + > p:first-child:has(.status__content__spoiler-link) + > span, .app-body .report-dialog-modal__toggle, .app-body .report-dialog-modal__subtitle, .app-body .report-modal__comment .setting-text-label, @@ -6559,65 +8113,80 @@ a:is(.active, .app-body .report-modal__target { color: var(--color-content-fg); } -.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { - color: var(--color-content-fg-bold) + +.app-body + .report-dialog-modal + .poll__option.dialog-option + > .poll__option__text + strong { + color: var(--color-content-fg-bold); } + .app-body .report-modal__comment, .app-body .report-modal__container, .app-body .report-dialog-modal__container { border-color: var(--color-lines); } + .app-body .report-modal__comment { color: var(--color-content-fg-muted); } + .app-body #upload-modal__description { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } + .app-body #upload-modal__description:focus { border-color: var(--color-accent); } + .app-body .setting-text__wrapper { background-color: var(--color-content-bg); border: 0; } + .app-body .report-dialog-modal__textarea { background-color: var(--color-secondary-bg); border: 1px solid var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } + .app-body .report-dialog-modal__textarea::placeholder { color: var(--color-content-fg); - opacity: .5; + opacity: 0.5; } - - /* 🖼️ Picture in Picture */ .app-body .picture-in-picture { z-index: 3; - box-shadow: 0 0 5px rgba(0, 0, 0, .2); + box-shadow: 0 0 5px rgba(0, 0, 0, 20%); border-radius: 8px; border: 1px solid var(--color-lines); } + .app-body .picture-in-picture__header { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .app-body .picture-in-picture__footer { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .picture-in-picture .video-player { border: 0; } + .app-body .picture-in-picture__footer, .app-body .picture-in-picture__header { background-color: var(--color-content-bg); } + .app-body .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } @@ -6637,7 +8206,6 @@ a:is(.active, background-color: var(--color-accent); } - /* 📄 Meta footer */ .app-body .link-footer { margin-bottom: 20px; @@ -6647,10 +8215,12 @@ a:is(.active, flex-flow: column; padding: 20px 0 0; } + .app-body .link-footer p, .app-body .link-footer a { color: var(--color-fg-muted); } + .app-body .link-footer::after { content: var(--meta); color: var(--color-fg-muted); @@ -6661,9 +8231,11 @@ a:is(.active, .app-body .server-banner__introduction { display: none; } + .app-body .server-banner { padding: 0 0 20px; } + .app-body .server-banner__hero { border-radius: 8px 8px 0 0; margin-bottom: 0; @@ -6672,14 +8244,16 @@ a:is(.active, background-color: var(--color-content-bg); box-sizing: border-box; } + .app-body .server-banner__description { - padding: 20px 15px 20px; + padding: 20px 15px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); color: var(--color-content-fg); } + .app-body .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); @@ -6691,17 +8265,21 @@ a:is(.active, border-radius: 0 0 8px 8px; align-items: end; } + .app-body .server-banner h4 { color: var(--color-fg); font-size: 80%; } + .app-body .server-banner__number { color: var(--color-content-fg); font-size: 15px; } + .app-body .server-banner__number-label { color: var(--color-content-fg); } + .app-body .server-banner .account { background-color: transparent; box-shadow: none; @@ -6710,99 +8288,119 @@ a:is(.active, border-right: 0; border-bottom: 0; } + .app-body .server-banner .account .display-name__account { - opacity: .7; + opacity: 0.7; } + .app-body .server-banner__meta__column:first-child { width: calc(60% - 5px); } + .app-body .server-banner__meta__column:nth-child(2) { width: calc(40% - 5px); } + .app-body .server-banner .button.button-secondary { padding: 10px; margin: 10px 0; } + .app-body .button.button-secondary, .app-body .button.button-tertiary { border: 0; background-color: color-mix(in srgb, var(--color-accent), transparent 82%); color: var(--color-accent); } + .app-body .hover-card .button:not(.button--destructive) { background-color: var(--color-accent); color: var(--color-accent-fg); line-height: 1.375; padding: 10px 18px; } + .app-body .hover-card .button:not(.button--destructive):hover { background-color: var(--color-accent-focus); } + .app-body .button:is(.button-secondary, .button-tertiary):hover { background-color: color-mix(in srgb, var(--color-accent), transparent 70%); } + .app-body .button.button--destructive:is(:active, :hover, :focus) { background-color: var(--color-reject); color: var(--color-accent-fg); } + .app-body .sign-in-banner .button, .app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } + .app-body .sign-in-banner .button:active, .app-body .button:is(.button-secondary, .button-tertiary):active { - transform: scale(.95); + transform: scale(0.95); } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body .button.button-tertiary { padding: 7px 18px; } } + .app-body .sign-in-banner { padding: 10px; } + .app-body .navigation-panel__sign-in-banner hr { display: block; border-color: var(--color-lines-translucent); margin: 12px 15px; - opacity: .5; + opacity: 0.5; } + .app-body .sign-in-banner p { color: var(--color-fg-muted); padding: 0 5px 5px; } + .app-body .sign-in-banner p strong { color: var(--color-fg); font-weight: 500; } + .app-body .sign-in-banner p:nth-child(2) { font-size: 85%; line-height: 1.325; } + .app-body .sign-in-banner p { margin-bottom: 25px; } + .app-body .sign-in-banner p:first-child { margin-bottom: 5px; } - - /* 🤗 Onboarding */ .app-body .scrollable.follow-recommendations-container, .app-body .column-list { background-color: var(--color-content-bg); } + .app-body .column-title .logo { display: none; } + .app-body .column-title h3, .app-body .column-title p { color: var(--color-content-fg); } + .app-body .column-list { border: 0; } + .app-body .account__note { color: var(--color-content-fg-muted); } @@ -6811,38 +8409,46 @@ a:is(.active, .app-body .onboarding__link { background-color: var(--color-content-secondary-bg); margin-bottom: 8px; - transition: all .2s; + transition: all 0.2s; } + .app-body .onboarding__steps__item:is(:active, :focus, :hover), .app-body .onboarding__link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .app-body .onboarding__steps__item__icon, .app-body .onboarding__link { color: var(--color-accent); } + .app-body .onboarding__steps__item__description h6, .app-body .onboarding__steps__item__description p, .app-body .onboarding__lead, .app-body .onboarding__lead strong { color: var(--color-content-fg); } + .app-body .onboarding__steps__item__go svg path, .app-body .onboarding__link svg path { fill: var(--color-accent); } + .app-body .app-form__avatar-input, .app-body .app-form__header-input { background-color: var(--color-accent-bg); - transition: all .2s; + transition: all 0.2s; } + .app-body .app-form__avatar-input:hover, .app-body .app-form__header-input:hover { background-color: color-mix(in srgb, var(--color-accent), transparent 75%); } + .app-body .app-form__header-input { border-top: 1px solid var(--color-lines); } + .app-body .app-form__header-input .icon { background-image: var(--icon-paperclip); transform: scale(1.4) translateX(-50%) translateY(-25%); @@ -6850,81 +8456,98 @@ a:is(.active, inset-inline-start: 50%; top: 50%; } + .app-body .onboarding__profile .app-form__avatar-input { border-color: var(--color-content-bg); border-radius: 50%; border-width: 5px; } + .app-body .onboarding__profile .app-form__avatar-input img { border-radius: 50%; background: var(--color-content-secondary-bg); } + .app-body .onboarding__profile .app-form__header-input img { background: var(--color-accent-bg); } + .app-body .simple_form .input.with_block_label > label, .app-body .simple_form .input.with_block_label .hint, .app-body .app-form__toggle__label strong, .app-body .simple_form .hint { color: var(--color-fg); } + .app-body .app-form__toggle__toggle > div { border-color: var(--color-lines); } + .app-form__avatar-input.selected .icon, .app-form__header-input.selected .icon { color: var(--color-accent); } -.app-body .simple_form -:is( - input[type=datetime-local], - input[type=email], - input[type=number], - input[type=password], - input[type=text], - input[type=url], - textarea - ) { + +.app-body + .simple_form + :is( + input[type='datetime-local'], + input[type='email'], + input[type='number'], + input[type='password'], + input[type='text'], + input[type='url'], + textarea + ) { background-color: var(--color-content-secondary-bg); border-color: var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } -.app-body .simple_form -:is( - input[type=datetime-local], - input[type=email], - input[type=number], - input[type=password], - input[type=text], - input[type=url], - textarea - ):is(:active, :focus) { + +.app-body + .simple_form + :is( + input[type='datetime-local'], + input[type='email'], + input[type='number'], + input[type='password'], + input[type='text'], + input[type='url'], + textarea + ):is(:active, :focus) { border-color: var(--color-accent); } + .app-body .column-title { margin: -20px -20px 30px; padding: 50px 40px 40px; } + .app-body .column-title:not(:has(.onboarding__illustration)) { background-color: var(--color-content-secondary-bg); } + .app-body .column-title:has(+ .simple_form) { margin-bottom: 0; background-color: var(--color-content-secondary-bg); } + .app-body .follow-recommendations { background-color: var(--color-content-bg); } + .app-body .follow-recommendations .account { border-left: 0; border-right: 0; margin-bottom: 15px; } + .app-body .follow-recommendations .account__note { color: var(--color-content-fg); - opacity: .7; + opacity: 0.7; } + .app-body .follow-recommendations .account__note p { overflow: hidden; } @@ -6934,10 +8557,12 @@ a:is(.active, border-color: var(--color-accent-lines); color: var(--color-content-fg); } + .app-body .copy-paste-text:is(:focus, :active), .app-body .tip-carousel:focus { border-color: var(--color-accent); } + .app-body .copy-paste-text:has(textarea:focus) { border-color: var(--color-accent); } @@ -6948,6 +8573,7 @@ a:is(.active, background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); } + .app-body .announcements { overflow: visible; z-index: 0; @@ -6956,55 +8582,74 @@ a:is(.active, border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } + .app-body .announcements__item__unread { color: var(--color-accent); background-color: var(--color-accent); } + .app-body .announcements__pagination, .app-body .announcements__pagination .icon-button { color: var(--color-content-fg); } + .app-body .announcements__pagination > * { vertical-align: middle; } + .app-body .reactions-bar__item { background-color: var(--color-accent-bg); border-radius: 8px; padding: 2px 8px; } + .app-body .reactions-bar .emoji-picker-dropdown .icon-button { padding: 3px; } + .app-body .reactions-bar__item:is(:active, :hover, :focus) { background-color: var(--color-content-bg); } + .app-body .reactions-bar__item.active, .app-body .reactions-bar .emoji-picker-dropdown .icon-button.active.inverted { background-color: var(--color-accent); } + .app-body .reactions-bar__item__count, .app-body .reactions-bar__item__count .animated-number { color: var(--color-accent); } -.app-body .reactions-bar__item:is(:active, :hover, :focus) .reactions-bar__item__count .animated-number { + +.app-body + .reactions-bar__item:is(:active, :hover, :focus) + .reactions-bar__item__count + .animated-number { color: var(--color-content-fg); } -.app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number { + +.app-body + .reactions-bar__item.active + .reactions-bar__item__count + .animated-number { color: var(--color-accent-fg); } + .app-body .reactions-bar .emoji-button, .app-body .announcements__item__content a.unhandled-link, .app-body .announcements__item__content a { color: var(--color-accent); } + .app-body .announcements .emoji-button { margin: 0; } -@media screen and (max-width:1174px) { +@media screen and (width <= 1174px) { .app-body .announcements { box-shadow: none; margin-top: 1px; @@ -7013,38 +8658,38 @@ a:is(.active, margin-inline-start: -45px; margin-inline-end: -55px; } + .app-body .announcements__mastodon { border-radius: 0; } } - - /* 404 */ .app-body .empty-column-indicator, .app-body .error-column { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .error-column__message h1, .app-body .error-column__message { color: var(--color-content-fg); } + .app-body .error-column__image { margin-top: 0; } + .app-body .regeneration-indicator { background-color: var(--color-content-bg); } -@media screen and (min-width:890px) { +@media screen and (width >= 890px) { .app-body .regeneration-indicator { padding-top: 50px; padding-bottom: 40px; } } - - /* 📜 About page ------------- */ .app-body .scrollable.about { @@ -7056,89 +8701,118 @@ a:is(.active, padding-bottom: 20px; z-index: 1; } -@media screen and (max-width:889px) { +@media screen and (width <= 889px) { .app-body .scrollable.about { border-left: 0; border-right: 0; } } + .app-body .about__header { order: 1; margin-bottom: 5px; } + .app-body .about__section:nth-child(3) { order: 3; } + .app-body .about__section:nth-child(2) { order: 2; } + .app-body .about__section:nth-child(4) { order: 4; } + .app-body .about__section:nth-child(5) { order: 5; } + .app-body .about .link-footer { order: 6; } + .app-body .about__footer { order: 7; } -.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(2) > div.about__section__title { + +.app-body + #mastodon + > div + > div + > div.columns-area__panels + > div.columns-area__panels__main + > div.columns-area.columns-area--mobile + > div + > div + > div.about__section.active:nth-of-type(2) + > div.about__section__title { display: none; } + .app-body .about__header p, .app-body .about__meta h4 { color: var(--color-fg); } + .app-body .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); border-radius: 0; background-color: var(--color-content-bg); } + .app-body .about__header__hero { margin-bottom: 10px; } + .app-body .about__meta { margin-top: 20px; margin-bottom: 0; } + .app-body .about__header > h1 { color: var(--color-content-fg); margin: 30px 0 0 20px; text-align: left; font-size: 24px; } + .app-body .about__header > h1 + p { color: var(--color-content-fg); - opacity: .8; + opacity: 0.8; text-align: left; margin-left: 20px; -// margin-bottom: 15px; + + // margin-bottom: 15px; font-size: 14px; } -@media screen and (min-width:890px) { +@media screen and (width >= 890px) { .app-body .scrollable.about { border-radius: 8px 8px 0 0 !important; } + .app-body .about__header__hero { border-radius: 6px 6px 0 0; } } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >= 890px) and (width <= 1174px) { .app-body .scrollable.about { margin-top: 10px; } } + .app-body .about__mail { color: var(--color-content-fg); } + .app-body .about__meta h4 { font-size: 12px; font-weight: bold; margin-bottom: 8px; } + .app-body .about__meta .account { background: none; box-shadow: none; @@ -7146,18 +8820,21 @@ a:is(.active, border-left: 0; border-right: 0; } + .app-body .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); } -@media screen and (max-width:600px) { +@media screen and (width <= 600px) { .app-body .about__meta__divider { border-top: 3px solid var(--color-content-secondary-separator); width: 90%; } } + .app-body .about__section:nth-child(3) .about__section__body { padding-bottom: 3em; } + .app-body .about__meta, .app-body .about__section__title { color: var(--color-accent); @@ -7165,9 +8842,11 @@ a:is(.active, border: 0; border-radius: 8px; } + .app-body .about__section.active .about__section__title { border-radius: 8px 8px 0 0; } + .app-body .about__section.active:not(:nth-of-type(2)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); @@ -7189,24 +8868,28 @@ a:is(.active, .app-body .about__domain-blocks__domain__type { color: var(--color-content-fg); } -.app-body .prose ul > li:before { + +.app-body .prose ul > li::before { background-color: var(--color-content-fg); - opacity: .3; - top: .55em; + opacity: 0.3; + top: 0.55em; width: 7px; height: 7px; } + .app-body .about__section__body .prose hr { border-color: var(--color-content-secondary-separator); margin-top: 2em; margin-bottom: 2em; border-width: 3px; } + .app-body .hover-card__bio a, .app-body .hover-card .account-fields a { text-decoration: none; color: var(--color-accent); } + .app-body .about__section__body .prose a, .app-body .about__section__body .prose a:hover, .app-body .prose a strong, @@ -7217,10 +8900,12 @@ a:is(.active, text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body .about__section__body .prose a:hover :is(span, strong), .app-body .hover-card__bio a:hover { text-decoration-color: var(--color-accent); } + .app-body .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; @@ -7230,46 +8915,54 @@ a:is(.active, font-size: 80%; float: left; } + .about__section.active .about__section__title { background-color: var(--color-accent-bg); } + .app-body .rules-list__text, .app-body .rules-list__hint { color: var(--color-content-fg); } + .app-body .rules-list__text { font-weight: 600; } + .app-body .rules-list__hint { - opacity: .7; + opacity: 0.7; padding-top: 4px; } + .app-body .rules-list li { border-bottom: 1px solid var(--color-lines); padding: 1em 1.75em 1em 3.4em; } + .app-body .rules-list li:last-child { border-bottom: 0; } + .about__domain-blocks { background-color: var(--color-content-bg); border: 0; } + .about__domain-blocks__domain { color: var(--color-content-fg); border-bottom: 0; } + .about__domain-blocks__domain:nth-child(2n) { background-color: var(--color-content-secondary-bg); } -@media screen and (min-width:1175px) { +@media screen and (width >= 1175px) { .app-body .about :is(.link-footer, .about__footer) { display: none; } } - /* Keyboard shortcuts page */ .keyboard-shortcuts kbd { background-color: var(--color-content-secondary-bg); @@ -7282,7 +8975,6 @@ a:is(.active, font-weight: 500; } - /* Privacy Policy page */ .app-body .column > .scrollable.privacy-policy { border: 1px solid var(--color-lines); @@ -7290,15 +8982,15 @@ a:is(.active, padding-bottom: 20px; z-index: 1; } -@media screen and (min-width:1175px) { - .app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy { +@media screen and (width >= 1175px) { + .app-body:not(:has(#tabs-bar__portal > *)) + .column + > .scrollable.privacy-policy { border-top-left-radius: 8px; border-top-right-radius: 8px; } } - - /* 👋 Hide superfluous UI */ .app-body div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, .app-body .navigation-panel__legal > hr, @@ -7309,45 +9001,52 @@ a:is(.active, display: none; } - - /* Multi-column layout ------------------- */ :root:has(.layout-multiple-columns) *::-webkit-scrollbar { width: 4px; } + :root:has(.layout-multiple-columns) *::-webkit-scrollbar-track { background-color: var(--color-accent-bg); } + :root:has(.layout-multiple-columns) *::-webkit-scrollbar-thumb { - opacity: .8; + opacity: 0.8; } + .layout-multiple-columns .scrollable, .layout-multiple-columns .column > .scrollable { max-height: 100%; } + .layout-multiple-columns .column { width: 400px; padding-bottom: 0; } + .layout-multiple-columns .drawer__inner__mastodon { display: none; } + .layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) { background: transparent; } + .layout-multiple-columns .drawer__header { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); border-radius: 8px; margin-bottom: 0; } + .layout-multiple-columns .drawer .search { margin-top: 10px; } + .layout-multiple-columns .drawer__tab { - transition: all .3s; + transition: all 0.3s; border-radius: 6px; height: 40px; padding: 5px; @@ -7355,30 +9054,39 @@ a:is(.active, box-sizing: border-box; border: 0; } + .layout-multiple-columns .drawer__tab .icon { transform: scale(1.2); } + .layout-multiple-columns .drawer__tab:active { - transform: scale(.9); + transform: scale(0.9); } + .layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .layout-multiple-columns .drawer__tab .icon-cog { background-image: var(--icon-gear); } + .layout-multiple-columns .drawer__tab .icon-globe { background-image: var(--icon-globe); } + .layout-multiple-columns .drawer__tab .icon-users { background-image: var(--icon-users); } + .layout-multiple-columns .drawer__tab .icon-bars { background-image: var(--logo); } + .layout-multiple-columns .drawer__tab .icon-sign-out { background-image: var(--icon-logout); } + .layout-multiple-columns .column-header__icon.icon-bars { background-image: var(--icon-globe-active); } @@ -7390,29 +9098,37 @@ a:is(.active, .layout-multiple-columns .getting-started .column-subheading { background-color: var(--color-bg); } + .layout-multiple-columns .scrollable.getting-started { border-left: 0; border-right: 0; background-color: var(--color-bg); } + .layout-multiple-columns .getting-started__wrapper { padding-bottom: 10px; border-radius: 0 0 8px 8px; } + .layout-multiple-columns .getting-started .column-link { color: var(--color-content-fg); margin: 0 5px 2px; border-radius: 8px; } + .app-body .getting-started .column-link { margin-left: 0; font-weight: 500; color: var(--color-fg); } -.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) { + +.layout-multiple-columns + .getting-started + .column-link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-fg); } + .layout-multiple-columns .getting-started .column-link__icon { transform: scale(1.4); } @@ -7430,6 +9146,7 @@ a:is(.active, .layout-multiple-columns .getting-started__trends .trends__item { padding-left: 16px; } + .layout-multiple-columns .getting-started__trends h4 > :is(a, span) { padding-left: 45px; } @@ -7445,9 +9162,10 @@ a:is(.active, .layout-multiple-columns .column:has(> .getting-started) { width: 330px; } + .layout-multiple-columns -.column:has(> .getting-started) -:is(.column-header, .column-back-button), + .column:has(> .getting-started) + :is(.column-header, .column-back-button), .layout-single-column .navigation-bar:has(+ .getting-started) { display: none; } @@ -7463,13 +9181,21 @@ a:is(.active, .layout-multiple-columns .drawer { width: 280px; - transition: width .3s; + transition: width 0.3s; } + .layout-multiple-columns -.drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) { + .drawer:has( + > .drawer__pager + > .drawer__inner + > .search-results + > .search-results__section + ) { width: 400px; } -.layout-multiple-columns .drawer__inner:has(> .search-results > .search-results__section) { + +.layout-multiple-columns + .drawer__inner:has(> .search-results > .search-results__section) { z-index: 2; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); @@ -7477,14 +9203,25 @@ a:is(.active, } .layout-multiple-columns -.drawer -> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) { + .drawer + > .search:has( + + .drawer__pager + > .drawer__inner + > .search-results + > .search-results__section + ) { margin-bottom: 0; } + .layout-multiple-columns -.drawer -> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) -> .search__input { + .drawer + > .search:has( + + .drawer__pager + > .drawer__inner + > .search-results + > .search-results__section + ) + > .search__input { border-radius: 8px 8px 0 0; } @@ -7492,17 +9229,25 @@ a:is(.active, border-radius: 0; border: 0; } + .layout-multiple-columns -.drawer -> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) -> .search__popout { + .drawer + > .search:has( + + .drawer__pager + > .drawer__inner + > .search-results + > .search-results__section + ) + > .search__popout { border-radius: 0 0 8px 8px; margin-top: 0; } -.layout-multiple-columns .drawer__inner:has(.search-results .empty-column-indicator) { +.layout-multiple-columns + .drawer__inner:has(.search-results .empty-column-indicator) { z-index: 3; } + .layout-multiple-columns .search-results .empty-column-indicator { border: 1px solid var(--color-lines); border-radius: 8px; @@ -7512,7 +9257,10 @@ a:is(.active, padding: 0; } -.layout-multiple-columns .search + .drawer__pager .drawer__inner:has(.compose-form):not(:has(> .search-results))::after { +.layout-multiple-columns + .search + + .drawer__pager + .drawer__inner:has(.compose-form):not(:has(> .search-results))::after { content: var(--meta); color: var(--color-fg-muted); padding: 12px; @@ -7520,6 +9268,7 @@ a:is(.active, bottom: 0; z-index: -1; } + .layout-multiple-columns .link-footer::before, .layout-multiple-columns .link-footer::after { display: none; @@ -7529,12 +9278,8 @@ a:is(.active, background-color: var(--color-content-bg); } -@media screen and (min-width:630px) and (max-width:1174px) { - .layout-multiple-columns - :is( - .column-header, - .column-back-button - ) { +@media screen and (width >= 630px) and (width <= 1174px) { + .layout-multiple-columns :is(.column-header, .column-back-button) { border-top: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines); @@ -7548,371 +9293,381 @@ a:is(.active, border-radius: 8px; color: var(--color-content-fg); } + .app-body .switch-to-advanced .switch-to-advanced__toggle { color: var(--color-accent); } - /* Popular hashtag icons --------------------- */ .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="tangerine" i] - ) -)::before { + .trends__item:has(.trends__item__name a:is([href*='tangerine' i]))::before { background-image: var(--icon-tangerine-slice); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="day" i], - [href$="tag" i], - [href*="monday" i], - [href*="tuesday" i], - [href*="wednesday" i], - [href*="thursday" i], - [href*="friday" i], - [href*="saturday" i], - [href*="sunday" i], - [href*="montag" i], - [href*="dienstag" i], - [href*="mittwoch" i], - [href*="donnerstag" i], - [href*="freitag" i], - [href*="samstag" i], - [href*="sonntag" i], - [href*="lundi" i], - [href*="mardi" i], - [href*="mercredi" i], - [href*="jeudi" i], - [href*="vendredi" i], - [href*="samedi" i], - [href*="dimanche" i], - [href*="lunes" i], - [href*="martes" i], - [href*="miercoles" i], - [href*="jueves" i], - [href*="viernes" i], - [href*="sabado" i], - [href*="domingo" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='day' i], + [href$='tag' i], + [href*='monday' i], + [href*='tuesday' i], + [href*='wednesday' i], + [href*='thursday' i], + [href*='friday' i], + [href*='saturday' i], + [href*='sunday' i], + [href*='montag' i], + [href*='dienstag' i], + [href*='mittwoch' i], + [href*='donnerstag' i], + [href*='freitag' i], + [href*='samstag' i], + [href*='sonntag' i], + [href*='lundi' i], + [href*='mardi' i], + [href*='mercredi' i], + [href*='jeudi' i], + [href*='vendredi' i], + [href*='samedi' i], + [href*='dimanche' i], + [href*='lunes' i], + [href*='martes' i], + [href*='miercoles' i], + [href*='jueves' i], + [href*='viernes' i], + [href*='sabado' i], + [href*='domingo' i] + ) + )::before { background-image: var(--icon-calendar); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="tune" i], - [href$="/np" i], - [href*="nowplaying" i], - [href*="singit" i], - [href*="music" i], - [href*="eurovision" i], - [href*="song" i], - [href$="synth" i], - [href$="jazz" i], - [href$="rock" i], - [href$="rap" i], - [href$="BandcampFriday" i], - [href*="Jukebox" i], - [href*="/kpop" i], - [href*="/rock" i], - [href$="/pop" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href*='tune' i], + [href$='/np' i], + [href*='nowplaying' i], + [href*='singit' i], + [href*='music' i], + [href*='eurovision' i], + [href*='song' i], + [href$='synth' i], + [href$='jazz' i], + [href$='rock' i], + [href$='rap' i], + [href$='BandcampFriday' i], + [href*='Jukebox' i], + [href*='/kpop' i], + [href*='/rock' i], + [href$='/pop' i] + ) + )::before { background-image: var(--icon-music); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="eurovision" i] - ) -)::before { + .trends__item:has(.trends__item__name a:is([href*='eurovision' i]))::before { background-image: var(--icon-microphone); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="birthday" i] - ) -)::before { + .trends__item:has(.trends__item__name a:is([href*='birthday' i]))::before { background-image: var(--icon-cake); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="letterboxd" i], - [href$="trakt" i], - [href$="TV" i], - [href$="cinema" i], - [href*="nowwatching" i], - [href*="WatchingNow" i], - [href*="movie" i], - [href*="/cinema" i], - [href*="/oscars" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href*='letterboxd' i], + [href$='trakt' i], + [href$='TV' i], + [href$='cinema' i], + [href*='nowwatching' i], + [href*='WatchingNow' i], + [href*='movie' i], + [href*='/cinema' i], + [href*='/oscars' i] + ) + )::before { background-image: var(--icon-popcorn); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="photography" i], - [href*="photo" i], - [href*="foto" i], - [href*="pics" i], - [href*="selfie" i], - [href*="/ShotWith" i], - [href*="WindowFriday" i], - [href*="FensterFreitag" i], - [href$="/instagram" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href*='photography' i], + [href*='photo' i], + [href*='foto' i], + [href*='pics' i], + [href*='selfie' i], + [href*='/ShotWith' i], + [href*='WindowFriday' i], + [href*='FensterFreitag' i], + [href$='/instagram' i] + ) + )::before { background-image: var(--icon-camera); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="SilentSunday" i], - [href*="sunset" i], - [href*="sunrise" i], - [href$="/sky" i], - [href*="skyblue" i], - [href*="ocean" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href*='SilentSunday' i], + [href*='sunset' i], + [href*='sunrise' i], + [href$='/sky' i], + [href*='skyblue' i], + [href*='ocean' i] + ) + )::before { background-image: var(--icon-sunset); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="christmas" i], - [href*="weihnachten" i], - [href*="noel" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is([href*='christmas' i], [href*='weihnachten' i], [href*='noel' i]) + )::before { background-image: var(--icon-pine); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="tree" i], - [href*="trunk" i], - [href*="ecology" i], - [href*="klima" i], - [href*="climat" i], - [href*="environment" i], - [href*="/garden" i], - [href*="mosstodon" i], - [href*="/vegan" i], - [href*="/plants" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href*='tree' i], + [href*='trunk' i], + [href*='ecology' i], + [href*='klima' i], + [href*='climat' i], + [href*='environment' i], + [href*='/garden' i], + [href*='mosstodon' i], + [href*='/vegan' i], + [href*='/plants' i] + ) + )::before { background-image: var(--icon-tree); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="/cat" i], - [href*="/cats" i], - [href*="catloaf" i], - [href*="Caturday" i], - [href*="catsofmastodon" i], - [href*="WhiskersWednesday" i] - ):not( - [href*="cath" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='/cat' i], + [href*='/cats' i], + [href*='catloaf' i], + [href*='Caturday' i], + [href*='catsofmastodon' i], + [href*='WhiskersWednesday' i] + ):not([href*='cath' i]) + )::before { background-image: var(--icon-cat); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="dog" i], - [href$="dogs" i], - [href*="/dog" i], - [href*="DogLovers" i], - [href*="dogsofmastodon" i], - [href*="DogsOfFedi" i], - [href*="dogstadon" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='dog' i], + [href$='dogs' i], + [href*='/dog' i], + [href*='DogLovers' i], + [href*='dogsofmastodon' i], + [href*='DogsOfFedi' i], + [href*='dogstadon' i] + ) + )::before { background-image: var(--icon-dog); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="art" i], - [href*="artmatters" i], - [href*="DigitalArt" i], - [href*="PixelArt" i], - [href*="artwork" i], - [href*="artist" i], - [href$="design" i], - [href*="designer" i], - [href*="watercolo" i], - [href*="painting" i] - ):not( - [href*="aiart" i], - [href*="artificial" i], - [href*="aidesign" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='art' i], + [href*='artmatters' i], + [href*='DigitalArt' i], + [href*='PixelArt' i], + [href*='artwork' i], + [href*='artist' i], + [href$='design' i], + [href*='designer' i], + [href*='watercolo' i], + [href*='painting' i] + ):not([href*='aiart' i], [href*='artificial' i], [href*='aidesign' i]) + )::before { background-image: var(--icon-brush); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="apple" i], - [href$="macos" i], - [href$="/mac" i], - [href$="ios" i], - [href*="ipad" i], - [href*="iphone" i], - [href*="/wwdc" i], - [href*="/appleevent" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='apple' i], + [href$='macos' i], + [href$='/mac' i], + [href$='ios' i], + [href*='ipad' i], + [href*='iphone' i], + [href*='/wwdc' i], + [href*='/appleevent' i] + ) + )::before { background-image: var(--icon-apple); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="poem" i], - [href*="writing" i], - [href*="write" i], - [href*="article" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href*='poem' i], + [href*='writing' i], + [href*='write' i], + [href*='article' i] + ) + )::before { background-image: var(--icon-pencil); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="/book" i], - [href*="literature" i], - [href*="reading" i], - [href$="/history" i], - [href$="/histoire" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href*='/book' i], + [href*='literature' i], + [href*='reading' i], + [href$='/history' i], + [href$='/histoire' i] + ) + )::before { background-image: var(--icon-book); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="game" i], - [href*="gaming" i], - [href*="gamedev" i], - [href*="games" i], - [href*="gamer" i], - [href*="playstation" i], - [href*="arcade" i], - [href*="xbox" i], - [href*="nintendo" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='game' i], + [href*='gaming' i], + [href*='gamedev' i], + [href*='games' i], + [href*='gamer' i], + [href*='playstation' i], + [href*='arcade' i], + [href*='xbox' i], + [href*='nintendo' i] + ) + )::before { background-image: var(--icon-gaming); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="/minecraft" i], - [href*="/hermitcraft" i] - ) -)::before { + .trends__item:has( + .trends__item__name a:is([href*='/minecraft' i], [href*='/hermitcraft' i]) + )::before { background-image: var(--icon-cube); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="/fifa" i], - [href$="/fifaworldcup" i], - [href$="/soccer" i], - [href*="/euro202" i], - [href$="/mls" i], - [href*="/sport" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='/fifa' i], + [href$='/fifaworldcup' i], + [href$='/soccer' i], + [href*='/euro202' i], + [href$='/mls' i], + [href*='/sport' i] + ) + )::before { background-image: var(--icon-football); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="lgbt" i], - [href*="/lgbt" i], - [href*="/queer" i], - [href$="trans" i], - [href$="pride" i], - [href$="womensday" i], - [href*="internationalwomensday" i], - [href$="/IWD" i], - [href*="JourneeDesDroitsDesFemmes" i], - [href*="feministischerkampftag" i], - [href*="celebratewomen" i], - [href*="/8mars" i], - [href$="transdayofvisibility" i], - [href$="TDOV" i], - [href$="transdayofremembrance" i], - [href$="TDOR" i], - [href$="pridemonth" i], - [href$="blm" i], - [href$="blacklivesmatter" i], - [href$="blackmastodon" i], - [href$="blackfedi" i], - [href*="protest" i], - [href*="greve" i], - [href*="manif" i], - [href$="riot" i], - [href$="freepalestine" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='lgbt' i], + [href*='/lgbt' i], + [href*='/queer' i], + [href$='trans' i], + [href$='pride' i], + [href$='womensday' i], + [href*='internationalwomensday' i], + [href$='/IWD' i], + [href*='JourneeDesDroitsDesFemmes' i], + [href*='feministischerkampftag' i], + [href*='celebratewomen' i], + [href*='/8mars' i], + [href$='transdayofvisibility' i], + [href$='TDOV' i], + [href$='transdayofremembrance' i], + [href$='TDOR' i], + [href$='pridemonth' i], + [href$='blm' i], + [href$='blacklivesmatter' i], + [href$='blackmastodon' i], + [href$='blackfedi' i], + [href*='protest' i], + [href*='greve' i], + [href*='manif' i], + [href$='riot' i], + [href$='freepalestine' i] + ) + )::before { background-image: var(--icon-pride); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="electionday" i], - [href$="election" i], - [href$="/election" i], - [href*="presidentielle" i], - [href*="presidential" i], - [href*="legislativ" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href*='electionday' i], + [href$='election' i], + [href$='/election' i], + [href*='presidentielle' i], + [href*='presidential' i], + [href*='legislativ' i] + ) + )::before { background-image: var(--icon-vote); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href$="dev" i], - [href$="code" i], - [href*="development" i], - [href*="developer" i], - [href*="devops" i], - [href*="opensource" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is( + [href$='dev' i], + [href$='code' i], + [href*='development' i], + [href*='developer' i], + [href*='devops' i], + [href*='opensource' i] + ) + )::before { background-image: var(--icon-code); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="mutualaid" i], - [href*="crowdfund" i] - ) -)::before { + .trends__item:has( + .trends__item__name a:is([href*='mutualaid' i], [href*='crowdfund' i]) + )::before { background-image: var(--icon-handshake); } + .app-body -.trends__item:has( - .trends__item__name a:is( - [href*="olympics" i], - [href*="/Paris2024" i], - [href*="/LA2028" i] - ) -)::before { + .trends__item:has( + .trends__item__name + a:is([href*='olympics' i], [href*='/Paris2024' i], [href*='/LA2028' i]) + )::before { background-image: var(--icon-olympics); transform: scale(1.85); } diff --git a/app/javascript/styles/tangerine/grape.scss b/app/javascript/styles/tangerine/grape.scss index c72e233624..b9d04fabad 100644 --- a/app/javascript/styles/tangerine/grape.scss +++ b/app/javascript/styles/tangerine/grape.scss @@ -9,11 +9,9 @@ /* 📄 Meta */ :root { --version: "v2.4~"; - --variant-name: "Grape"; --variant-emoji: "\1FABB\00A0"; --variant: var(--variant-emoji) var(--variant-name); - --meta: 'Powered by OSCAR Node #4 ' var(--version) ' \00B7 ' var(--variant); } @@ -27,30 +25,25 @@ --color-fg-muted: #888494; --color-secondary-bg: #e8e4f2; --color-secondary-separator: #dfdbed; - --color-content-bg: #ffffff; --color-content-fg: #444a5a; --color-content-fg-bold: #000000; --color-content-fg-muted: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 40%); --color-content-secondary-bg: #f5f4f9; - --color-content-secondary-separator: rgba(223, 219, 237, 0.4); + --color-content-secondary-separator: rgba(223, 219, 237, 40%); --color-content-bg-focus: #fffcfa; - --color-accent: #6364ff; --color-accent-focus: #563acc; - --color-accent-lines: rgba(99, 100, 255, 0.12); + --color-accent-lines: rgba(99, 100, 255, 12%); --color-accent-bg: #e5ddf6; --color-accent-fg: #ffffff; - --color-lines: #e1dde4; - --color-lines-translucent: rgba(0, 0, 0, .15); - + --color-lines-translucent: rgba(0, 0, 0, 15%); --color-confirm: #79bd9a; - --color-confirm-bg: rgba(121, 189, 154, 0.3); + --color-confirm-bg: rgba(121, 189, 154, 30%); --color-confirm-fg: #4E8A6B; - --color-reject: #df405a; - --color-reject-bg: rgba(223, 64, 90, 0.3); + --color-reject-bg: rgba(223, 64, 90, 30%); } @media (prefers-color-scheme: dark) { :root { @@ -60,27 +53,24 @@ --color-fg-muted: #655e6e; --color-secondary-bg: #13111f; --color-secondary-separator: #26232e; - --color-content-bg: #030303; --color-content-fg: var(--color-fg); --color-content-fg-bold: #ffffff; --color-content-fg-muted: #737373; --color-content-secondary-bg: var(--color-secondary-bg); - --color-content-secondary-separator: rgba(64, 62, 89, 0.4); + --color-content-secondary-separator: rgba(64, 62, 89, 40%); --color-content-bg-focus: #0e0e0e; - --color-accent: #7a7af9; --color-accent-focus: #5a47ff; - --color-accent-lines: rgba(122, 122, 249, 0.3); + --color-accent-lines: rgba(122, 122, 249, 30%); --color-accent-bg: #261f3c; --color-accent-fg: #ffffff; - --color-lines: #343434; - --color-lines-translucent: rgba(255, 255, 255, .15); - + --color-lines-translucent: rgba(255, 255, 255, 15%); --color-confirm-fg: var(--color-confirm); } } + :root { /* Mastodon logo */ --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' class='mastodon-logo' viewBox='0 0 216.414 232.01'%3E%3Cdefs xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient xmlns='http://www.w3.org/2000/svg' id='a' x2='0%25' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%236364ff'/%3E%3Cstop offset='100%25' stop-color='%236364ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='url(%23a)' d='M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916'/%3E%3Cpath fill='%23fff' d='M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675'/%3E%3C/svg%3E"); @@ -121,71 +111,55 @@ --icon-home-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-direct-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bookmark-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-accent: var(--icon-star-accent); --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent: var(--icon-user-plus-accent); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-dot-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-dot-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); --icon-settings-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-moderation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-moderation-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-administration-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-ellipsis-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); --icon-ellipsis-column-link-active-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); --icon-hashtag-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); @@ -308,70 +282,54 @@ --icon-home-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-direct-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bookmark-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-accent: var(--icon-star-accent); --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-dot-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-dot-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); --icon-settings-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-moderation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-moderation-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-administration-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-ellipsis-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); --icon-ellipsis-column-link-active-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); --icon-hashtag-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); @@ -465,6 +423,7 @@ body.app-body { background-color: var(--color-bg); background-image: var(--gradient-bg); } + .app-body .columns-area__panels__pane { z-index: 1; } @@ -479,24 +438,28 @@ body.app-body { background-color: var(--color-bg); padding: 2px; } + :root:has(.app-body) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 8px; opacity: .4; box-shadow: none; } + :root:has(.app-body) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } + :root:has(.app-body) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); opacity: .7; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { :root:has(.app-body) *::-webkit-scrollbar { display: none; } } + :root, * { scrollbar-color: var(--color-accent) var(--color-bg); @@ -505,8 +468,8 @@ body.app-body { .app-body { --dropdown-shadow: - 0 20px 25px -5px rgba(0, 0, 0, .15), - 0 8px 10px -6px rgba(0, 0, 0, .15); + 0 20px 25px -5px rgba(0, 0, 0, 15%), + 0 8px 10px -6px rgba(0, 0, 0, 15%); --safe-area-bottom: env(safe-area-inset-bottom); } @media (display-mode: standalone) { @@ -518,6 +481,7 @@ body.app-body { .app-body .loading-bar { background-color: var(--color-accent); } + .app-body .circular-progress { color: var(--color-accent); } @@ -528,9 +492,11 @@ body.app-body { background-position: center; background-repeat: no-repeat; } + .app-body .redirect__logo img { opacity: 0; } + .app-body .redirect__message a { color: var(--color-accent); } @@ -541,7 +507,7 @@ body.app-body { .app-body .compose-form .spoiler-input__input, .app-body .compose-form__autosuggest-wrapper, .app-body .compose-form__poll-wrapper select, -.app-body .poll__option input[type=text], +.app-body .poll__option input[type="text"], .app-body .report-dialog-modal__textarea, .app-body .search__input, .app-body .setting-text, @@ -549,6 +515,7 @@ body.app-body { .app-body .about__section__body { border: 0; } + .app-body .column-inline-form, .app-body .column>.scrollable, .app-body .getting-started, @@ -564,6 +531,7 @@ body.app-body { background-color: var(--color-content-secondary-bg); border-radius: 50%; } + .app-body .account__avatar img { border-radius: 50%; } @@ -573,12 +541,15 @@ body.app-body { 0% { transform: scale(1); } + 50% { transform: scale(1.6); } + 75% { transform: scale(.8); } + 100% { transform: scale(1); } @@ -587,9 +558,11 @@ body.app-body { 0% { transform: scale(1); } + 50% { transform: scale(1.25); } + 100% { transform: scale(1); } @@ -598,12 +571,15 @@ body.app-body { 0% { transform: translateY(0); } + 50% { transform: translateY(-30%); } + 75% { transform: translateY(20%); } + 100% { transform: translate(0); } @@ -613,22 +589,27 @@ body.app-body { transform: translate(0); opacity: 0; } + 5% { transform: translate(0); opacity: 1; } + 50% { transform: translate(200%, -200%); opacity: 0; } + 80% { transform: translate(200%, -200%); opacity: 0; } + 85% { transform: translate(-20%, 20%); opacity: 0; } + 100% { transform: translate(0); opacity: 1; @@ -639,6 +620,7 @@ body.app-body { opacity: 0; transform: translateY(-10%); } + to { opacity: 1; transform: translateY(0); @@ -649,6 +631,7 @@ body.app-body { transform: translate(0, -10px); opacity: 0; } + to { transform: translate(0, 0); opacity: 1; @@ -658,9 +641,11 @@ body.app-body { 0% { opacity: 0; } + 20% { opacity: 0; } + 100% { opacity: 1; } @@ -669,9 +654,11 @@ body.app-body { 0% { transform: rotate(0) scale(1); } + 60% { transform: rotate(80deg) scale(1.2); } + 100% { transform: rotate(60deg) scale(1.1); } @@ -680,12 +667,15 @@ body.app-body { 0% { transform: rotate(0); } + 40% { transform: rotate(15deg); } + 70% { transform: rotate(-15deg); } + 100% { transform: rotate(0); } @@ -696,19 +686,24 @@ body.app-body { .app-body .columns-area__panels__pane--navigational { order: 1; } + .app-body .columns-area__panels__main { contain: inline-size; order: 2; } + .app-body .columns-area__panels__pane--compositional { order: 3; } + .app-body .columns-area--mobile .column { flex: unset; } + .app-body .columns-area--mobile .column:focus-within { overflow: visible; } + .app-body .scrollable, .app-body .column > .scrollable { background-color: var(--color-content-bg); @@ -719,30 +714,33 @@ body.app-body { border-radius: 0; padding-bottom: 20px; } + .app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } + .app-body .columns-area--mobile { padding: 0; } + .app-body .columns-area__panels { gap: 10px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) .scrollable, .app-body:not(.layout-multiple-columns) .column > .scrollable { border-right: 0; border-left: 0; } } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .columns-area__panels__main { max-width: 580px; padding: 0; } } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .columns-area__panels { gap: 0; } @@ -754,26 +752,32 @@ body.app-body { height: 20px; width: 20px; } + .app-body .verified-badge .icon { width: 18px; height: 18px; } + .app-body .account__header__tabs__buttons .icon-button .icon { height: 24px; width: 24px; } + .app-body .status__visibility-icon .icon { height: 1em; width: 1em; } + .app-body .detailed-status__meta .icon, .app-body .dropdown-button .icon { height: 15px; width: 15px; } + .app-body .icon-button { padding: 2px; } + .app-body :is( .icon-bookmark, @@ -921,47 +925,59 @@ path { .app-body .icon-bookmark { background-image: var(--icon-bookmark-accent); } + .app-body .detailed-status__button .icon-bookmark { background-image: var(--icon-bookmark-accent); } + .app-body .icon-button.active .icon-bookmark { background-image: var(--icon-bookmark-active); } + /* Favorite */ .app-body .icon-star { background-image: var(--icon-star-accent); } + .app-body button.icon-button.active .icon-star, .app-body .notification__message .icon-star, .app-body .notification-group--favourite .icon-star { background-image: var(--icon-star-active); } + .app-body .detailed-status__link .icon-star { background-image: var(--icon-star); margin: 0; } + .app-body .media-modal__overlay .icon-star { background-image: var(--icon-star-accent); } + /* Boost */ .app-body .icon-retweet { background-image: var(--icon-boost-accent); } + .app-body button.icon-button.active .icon-retweet, .app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-accent-active); } + .app-body .status__prepend__icon .icon-retweet, .app-body .notification-group--reblog .icon-repeat { background-image: var(--icon-boost-accent-active); } + .app-body .notification__message .icon-retweet { background-image: var(--icon-boost-active); } + .app-body .detailed-status__link .icon-retweet { background-image: var(--icon-boost); margin: 0; } + .app-body button.icon-button:is( .reblogPrivate:where(.disabled, [disabled]), @@ -974,50 +990,63 @@ button.icon-button:is( opacity: .2; pointer-events: none; } + .app-body .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost-accent); vertical-align: middle; } + .app-body .media-modal__overlay .icon-retweet { background-image: var(--icon-boost-accent); } + /* Reply */ .app-body .icon-reply, .app-body .icon-reply-all { background-image: var(--icon-reply-accent); } + .app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } + .app-body .media-modal__overlay :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } + .app-body .status__prepend__icon .icon-reply, .app-body .notification-ungrouped__header__icon .icon-reply { background-image: var(--icon-reply-accent-active); } + /* Ellipsis */ .app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) { background-image: var(--icon-ellipsis-accent); } + .app-body .detailed-status__action-bar .icon-ellipsis-h { background-image: var(--icon-ellipsis-accent); } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { background-image: var(--icon-ellipsis-active); } + /* Poll icon */ .app-body .icon-tasks, .app-body .icon-bar-chart-4-bars { background-image: var(--icon-poll); } + .app-body .notification__message .icon-tasks, .app-body .notification-ungrouped .icon-bar-chart-4-bars { background-image: var(--icon-poll-accent); } + .app-body .compose-form .icon-tasks { background-image: var(--icon-poll-accent); } + /* Post icon */ .app-body .icon-quote-right { background-image: var(--icon-post); @@ -1029,228 +1058,292 @@ button.icon-button:is( margin-right: 7px; margin-left: 3px; } + /* Home icon */ .app-body .icon-home { background-image: var(--icon-home); } + .app-body .column-link.active .icon-home { background-image: var(--icon-home-active); } + .layout-multiple-columns .column-link .icon-home { background-image: var(--icon-home-accent); } + .app-body .notification__message .icon-home, .app-body .notification-ungrouped .icon-notifications-active { background-image: var(--icon-post-notification-accent); } + /* Globe icon */ .app-body .column-link .icon-globe, .app-body .column-header__icon.icon-globe { background-image: var(--icon-globe); } + .app-body .column-link.active .icon-globe { background-image: var(--icon-globe-active); } + .layout-multiple-columns .column-link .icon-globe { background-image: var(--icon-globe-accent); } + /* Hashtag icon */ .app-body .icon-hashtag { background-image: var(--icon-hashtag); } + /* Explore icon */ .app-body .icon-explore, .app-body .column-link .icon-explore { background-image: var(--icon-explore); } + .app-body .column-link.active .icon-explore { background-image: var(--icon-explore-active); } + .layout-multiple-columns .column-link .icon-explore { background-image: var(--icon-explore-accent); } + /* Search icon */ .app-body .icon-search { background-image: var(--icon-search); } + .app-body .ui__header__links .icon-search, .app-body .search__icon .icon-search { background-image: var(--icon-search-active); } + .app-body .column-link .icon-search { background-image: var(--icon-search-column-link); } + .app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link-active); } + .app-body .column-header__icon.icon-search { background-image: var(--icon-search-column-link); } + .app-body .icon-times-circle { background-image: var(--icon-erase); } + /* Notifications icon */ .app-body .column-link .icon-bell, .app-body .column-header__icon.icon-bell { background-image: var(--icon-bell); } + .app-body .column-link.active .icon-bell { background-image: var(--icon-bell-active); } + /* Direct messages icon */ .app-body .column-link .icon-at, .app-body .column-header__icon.icon-at { background-image: var(--icon-direct-messages); } + .app-body .column-link.active .icon-at { background-image: var(--icon-direct-messages-active); } + .layout-multiple-columns .column-link .icon-at { background-image: var(--icon-direct-messages-accent); } + /* Bookmarks icon */ .app-body .icon-bookmarks, .app-body .column-header__icon.icon-bookmarks { background-image: var(--icon-bookmark-column-link); } + .app-body .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } + .layout-multiple-columns .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent); } + /* Favorites icon */ .app-body .column-link .icon-star, .app-body .column-header__icon.icon-star { background-image: var(--icon-star-column-link); } + .app-body .column-link.active .icon-star { background-image: var(--icon-star-column-link-active); } + .layout-multiple-columns .column-link .icon-star { background-image: var(--icon-star-column-link-accent); } + /* Lists icon */ .app-body .icon-list-ul, .app-body .column-header__icon.icon-list-ul { background-image: var(--icon-list); } + .app-body .column-link.active .icon-list-ul { background-image: var(--icon-list-active); } + .layout-multiple-columns .column-link .icon-list-ul { background-image: var(--icon-list-accent); } + .app-body .navigation-panel .list-panel .column-link .icon-list-ul { background-image: var(--icon-dot-accent); transform: scale(1.8); } + .app-body .navigation-panel .list-panel .column-link.active .icon-list-ul { background-image: var(--icon-dot-accent-active); } + /* Settings icon */ .app-body .column-link .icon-cog { background-image: var(--icon-settings); } + .layout-multiple-columns .column-link .icon-cog { background-image: var(--icon-settings-accent); } + /* About page icon */ .app-body .navigation-panel .column-link .icon-ellipsis-h { background-image: var(--icon-ellipsis); } + .app-body .navigation-panel .column-link.active .icon-ellipsis-h { background-image: var(--icon-ellipsis-column-link-active); } + /* Moderation icon */ .app-body .icon-flag { background-image: var(--icon-moderation); } + .app-body .icon-tachometer { background-image: var(--icon-administration); } + /* Profile settings */ .app-body .navigation-bar .icon-button .icon-bars { background-image: var(--icon-gear); } + .app-body .navigation-bar .icon-button.active .icon-close { background-image: var(--icon-gear-active); } + .app-body .navigation-bar .icon-button:is(:active, :focus, :hover) { background-color: transparent; } + .app-body .navigation-bar .icon-button.active { transform: rotate(60deg) scale(1.1); animation: rotate-bounce .4s 1; } + /* Follow user icon */ .app-body .icon-user-plus, .app-body .icon-user, .app-body .icon-person-add { background-image: var(--icon-user-plus-accent); } + .app-body .active .icon-user-plus { background-image: var(--icon-user-plus); } + .app-body .column-header__icon.icon-user-plus, .app-body .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link); } + .app-body .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-column-link-active); } + .layout-multiple-columns .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent); } + /* Users icon */ .app-body .icon-users { background-image: var(--icon-users); } + .app-body .column-link .icon-users { background-image: var(--icon-users-accent); } + /* Announcement icon */ .app-body .icon-bullhorn { background-image: var(--icon-megaphone); } + /* Column settings icon */ .app-body .icon-sliders { background-image: var(--icon-sliders); } + /* Post visibility icons */ .app-body .icon-globe { background-image: var(--icon-globe-visibility); } + .app-body .dropdown-button .icon-globe { background-image: var(--icon-globe-visibility-accent); } + .app-body .dropdown-button.active .icon-globe { background-image: var(--icon-globe-visibility-inv); } + .app-body .icon-unlock { background-image: var(--icon-unlock); } + .app-body .dropdown-button .icon-unlock { background-image: var(--icon-unlock-accent); } + .app-body .dropdown-button.active .icon-unlock { background-image: var(--icon-unlock-inv); } + .app-body .icon-lock { background-image: var(--icon-lock); } + .app-body .dropdown-button .icon-lock { background-image: var(--icon-lock-accent); } + .app-body .dropdown-button.active .icon-lock { background-image: var(--icon-lock-inv); } + .app-body .icon-at { background-image: var(--icon-at); } + .app-body .dropdown-button .icon-at { background-image: var(--icon-at-accent); } + .app-body .dropdown-button.active .icon-at { background-image: var(--icon-at-inv); } @@ -1259,38 +1352,49 @@ button.icon-button:is( .app-body .icon-paperclip { background-image: var(--icon-paperclip-accent); } + .app-body .icon-photo-library, .app-body .edit-indicator__attachments > .icon { background-image: var(--icon-paperclip); } + .app-body .compose-form__buttons .icon-button:nth-child(3) .icon { background-image: var(--icon-warning); } + .app-body .compose-form__buttons .icon-button:nth-child(3):is(.active, .active:hover) .icon { background-image: var(--icon-warning-inv); } + .app-body .icon-check:is(.verified__mark, .verified-badge__mark) { background-image: var(--icon-verified); } + .app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .account__relationship .icon-check, .app-body .follow-request-banner .button .icon-check { background-image: var(--icon-check); } + .app-body .icon-bell { background-image: var(--icon-bell-ringing); } + .app-body .icon-bell-o { background-image: var(--icon-bell-accent); } + .app-body .icon-thumb-tack { background-image: var(--icon-pin); } + .app-body .icon-file-text { background-image: var(--icon-link); } + .app-body :is( .account--panel, @@ -1300,114 +1404,148 @@ button.icon-button:is( .icon-times { background-image: var(--icon-reject); } + .app-body .account--panel .icon-times, .app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } + .app-body .account__relationship .icon-times, .app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } + .app-body .account__header__tabs__buttons .icon-undefined { background-image: var(--icon-share); } + .app-body .account__header__tabs__buttons .copyable .icon-undefined { background-image: var(--icon-copy); } + .app-body .account__header__tabs__buttons .copied .icon-undefined { background-image: var(--icon-copied); } + .app-body .icon-eye-slash { background-image: var(--icon-eye-shut); } + .app-body .icon-button.overlayed .icon-eye-slash, .app-body .media-gallery__item__overlay .icon-eye-slash { background-image: var(--icon-eye-shut-inv); } + .app-body .player-button .icon-eye-slash { filter: brightness(100); } + .app-body .icon-eye { background-image: var(--icon-eye-open); } + .app-body .icon-eraser { background-image: var(--icon-broom); } + .app-body .icon-pencil { background-image: var(--icon-edited-accent); } + .app-body .icon-edit { background-image: var(--icon-edited-accent); } -@media screen and (min-width:1173px) { +@media screen and (width >=1173px) { .app-body .navigation-panel .column-link .icon-home { background-image: var(--icon-home-accent); } + .app-body .navigation-panel .column-link.active .icon-home { background-image: var(--icon-home-accent-active); } + .app-body .navigation-panel .column-link .icon-bell { background-image: var(--icon-bell-accent); } + .app-body .navigation-panel .column-link.active .icon-bell { background-image: var(--icon-bell-accent-active); } + .app-body .navigation-panel .column-link .icon-explore { background-image: var(--icon-explore-accent); } + .app-body .navigation-panel .column-link.active .icon-explore { background-image: var(--icon-explore-accent-active); } + .app-body .navigation-panel .column-link .icon-search { background-image: var(--icon-search-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-search { background-image: var(--icon-search-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-globe { background-image: var(--icon-globe-accent); } + .app-body .navigation-panel .column-link.active .icon-globe { background-image: var(--icon-globe-accent-active); } + .app-body .navigation-panel .column-link .icon-at { background-image: var(--icon-direct-messages-accent); } + .app-body .navigation-panel .column-link.active .icon-at { background-image: var(--icon-direct-messages-accent-active); } + .app-body .navigation-panel .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-star { background-image: var(--icon-star-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-star { background-image: var(--icon-star-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-list-ul { background-image: var(--icon-list-accent); } + .app-body .navigation-panel .column-link.active .icon-list-ul, .app-body .navigation-panel .column-link:has(+ .list-panel > .column-link.active) .icon-list-ul { background-image: var(--icon-list-accent-active); } + .app-body .navigation-panel .column-link .icon-cog { background-image: var(--icon-settings-accent); } + .app-body .navigation-panel .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent-active); } + .app-body .icon-flag { background-image: var(--icon-moderation-accent); } + .app-body .icon-tachometer { background-image: var(--icon-administration-accent); } @@ -1424,6 +1562,7 @@ button.icon-button:is( text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body a.status-link:not(.mention, .hashtag):is(:active, :focus, :hover), .app-body a:is(.status-link, .mention, .navigation-bar__profile-edit):is(:active, :focus, :hover) span, .app-body :is(.account__header__fields, .account__header__content, .trends__item__name) a:is(:active, :focus, :hover) span, @@ -1443,11 +1582,13 @@ button.icon-button:is( text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body a.mention:is(:active, :focus, :hover), .app-body :is(.account__header__fields, .account__header__content) a:is(:active, :focus, :hover), .app-body :is(.detailed-status__datetime, .status__relative-time):is(:active, :focus, :hover) { text-decoration: none !important; } + .app-body .account__header__fields .verified a span { display: inline; } @@ -1459,6 +1600,7 @@ button.icon-button:is( .app-body .compose-form { gap: 0; } + .app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 23px 15px 15px 18px; @@ -1471,9 +1613,11 @@ button.icon-button:is( background-color .2s, border-color .2s; } + .app-body .navigation-bar strong { color: var(--color-content-fg); } + .app-body .navigation-bar .account { background-color: transparent; padding-left: 0; @@ -1482,18 +1626,22 @@ button.icon-button:is( border-right: 0; border-bottom: 0; } + .app-body .navigation-bar .account__display-name { line-height: 1.25; } + .app-body :is(.navigation-bar, .reply-indicator) .account__avatar { outline: 6px solid var(--color-content-bg); border-radius: 8px; position: relative; z-index: 2; } + .app-body .reply-indicator__line { z-index: 1; } + .app-body .compose-form__highlightable { border-top: 0; border-left: 1px solid var(--color-lines); @@ -1506,20 +1654,24 @@ button.icon-button:is( background-color: var(--color-content-bg); transition: all .2s; } + .app-body .compose-form .reply-indicator:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form .compose-form__warning:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form__highlightable:focus-within { border-color: var(--color-accent); } + .app-body .compose-form .reply-indicator + .navigation-bar, .app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within), .app-body .reply-indicator { background-color: var(--color-content-bg); } + .app-body .compose-form__highlightable.active { box-shadow: none; } + .app-body .compose-form :is( .autosuggest-textarea__suggestions, @@ -1533,45 +1685,55 @@ button.icon-button:is( border-top: 0; border-radius: 0; } + .app-body .compose-form .autosuggest-textarea__textarea { padding-inline-start: 20px; } + .app-body .compose-form .autosuggest-textarea__textarea::placeholder { font-size: 130%; opacity: .5; } + .app-body .autosuggest-textarea__textarea::placeholder, .app-body .autosuggest-account .display-name__html { color: var(--color-content-fg); } + .app-body .autosuggest-account .display-name__account, .app-body .hover-card .display-name__account, .app-body .hover-card .account-fields dl dt { color: var(--color-content-fg-muted); } + .app-body .autosuggest-textarea__suggestions { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, .25), - 0 8px 10px -6px rgba(0, 0, 0, .25); + 0 20px 25px -5px rgba(0, 0, 0, 25%), + 0 8px 10px -6px rgba(0, 0, 0, 25%); } + .app-body .autosuggest-textarea__suggestions__item { color: var(--color-content-fg); } + .app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), .app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .autosuggest-textarea__suggestions, .app-body .autosuggest-textarea__suggestions__item:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .autosuggest-account .account__avatar { border: 0; } + .app-body .dropdown-button { border-radius: 8px; border-color: var(--color-accent-bg); @@ -1579,18 +1741,22 @@ button.icon-button:is( padding: 5px 8px; transition: border-color .2s; } + .app-body .dropdown-button:hover { border-color: var(--color-accent); } + .app-body .dropdown-button.active, .app-body .column-settings .dropdown-button.active { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .column-settings .dropdown-button { background-color: var(--color-accent-bg); } + .app-body .reply-indicator { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -1602,25 +1768,30 @@ button.icon-button:is( padding: 18px 15px 0 18px; transition: all .2s; } + .app-body .reply-indicator p { overflow: hidden; } -.app-body .reply-indicator__line:before { + +.app-body .reply-indicator__line::before { background-color: var(--color-accent); z-index: 1; opacity: .6; } + .app-body .reply-indicator + .navigation-bar { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 16px; } + .app-body .reply-indicator .display-name__account, .app-body .reply-indicator__attachments { color: var(--color-content-fg); opacity: .7; } + .app-body .reply-indicator__attachments { margin-top: 8px; } @@ -1632,18 +1803,23 @@ button.icon-button:is( padding-inline-start: 20px; padding-bottom: 17px; } + .app-body .edit-indicator__header { color: var(--color-content-fg); } + .app-body .edit-indicator__header > *:not(.edit-indicator__cancel) { opacity: .7; } + .app-body .edit-indicator__content { color: var(--color-content-fg); } + .app-body .edit-indicator__content a { color: var(--color-accent); } + .app-body .edit-indicator__attachments { color: var(--color-content-fg); opacity: .7; @@ -1655,9 +1831,11 @@ button.icon-button:is( border-radius: 8px; transition: all .2s; } + .app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover { border-color: var(--color-accent); } + .app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):active { background-color: var(--color-accent-bg); } @@ -1671,6 +1849,7 @@ button.icon-button:is( box-shadow: none; transition: border-color .2s; } + .app-body .compose-form .compose-form__warning, .app-body .simple_form .recommended, .app-body .compose-form .compose-form__warning, @@ -1679,32 +1858,40 @@ button.icon-button:is( .app-body .navigation-bar__profile-edit { color: var(--color-accent); } + .app-body .simple_form .recommended { border-color: var(--color-lines); } + .app-body .compose-form__sensitive-button .icon-button:hover { background-color: transparent; } -.app-body .compose-form__sensitive-button input[type=checkbox]:checked { + +.app-body .compose-form__sensitive-button input[type="checkbox"]:checked { background-color: var(--color-accent); border-color: var(--color-accent); } + .app-body .spoiler-input__border { display: none; } + .app-body .compose-form .autosuggest-input { box-sizing: border-box; } + .app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } + .app-body .compose-form .spoiler-input .autosuggest-input { background-color: var(--color-content-bg); border-bottom: 0; padding: 5px; } + .app-body .compose-form .spoiler-input__input { background-image: var(--icon-warning); background-position: 10px center; @@ -1719,24 +1906,29 @@ button.icon-button:is( font-weight: 500; transition: all .2s; } + .app-body .compose-form .spoiler-input__input:focus { border-color: var(--color-accent); background-color: var(--color-content-bg); } + .app-body .display-name { color: var(--color-content-fg); } + .app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon { width: 15px; height: 15px; } + .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } + .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { - background-color: rgba(0, 0, 0, .4); + background-color: rgba(0, 0, 0, 40%); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .compose-form { padding: 15px; } @@ -1759,10 +1951,12 @@ button.icon-button:is( transform-origin: right center; margin-right: -10px; } + .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter { opacity: 1; margin-right: 0; } + .app-body .character-counter--over { color: #df405a; font-weight: 500; @@ -1773,33 +1967,41 @@ button.icon-button:is( gap: 10px; padding: 0; } + .app-body .compose-form__dropdowns { gap: 6px; padding: 0 12px; } + .app-body .compose-form__actions { border-radius: 0 0 8px 8px; padding: 10px 12px; background-color: var(--color-content-secondary-bg); } + .app-body .compose-form__buttons { gap: 1px; } + .app-body .compose-form__buttons .icon-button { padding: 6px; border-radius: 8px; transition: all .2s; } + .app-body .compose-form__buttons .icon { transform: scale(1.2); width: 20px; } + .app-body .compose-form__buttons .icon-button:is(.active, .active:hover) { background-color: var(--color-accent); } + .app-body .compose-form__submit { max-width: 40px; } + .app-body .compose-form__submit .button { height: 40px; max-width: 40px; @@ -1814,13 +2016,16 @@ button.icon-button:is( background-color .2s, border-color .2s; } + .app-body .compose-form__submit .button:active { transform: scale(.95); } + .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button { background-image: var(--icon-send); background-color: var(--color-accent-bg); } + .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit { animation: bounce-sml .2s ease-out 1; } @@ -1829,31 +2034,38 @@ button.icon-button:is( background-color: var(--color-secondary-bg); border-radius: 8px; } + .app-body .upload-area__content { border-color: var(--color-accent-focus); border-radius: 8px; } + .app-body .upload-progress__tracker { background-color: var(--color-accent); } + .app-body .upload-progress__backdrop { background-color: var(--color-accent-bg); } + .app-body .upload-progress .icon { color: var(--color-accent) } + .app-body .upload-progress__message, .app-body .upload-progress__message span { color: var(--color-content-fg); } + .app-body .compose-form__upload .icon-button { - background-color: rgba(0, 0, 0, .75); + background-color: rgba(0, 0, 0, 75%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--color-accent-fg); border-radius: 8px; padding: 6px; } + .app-body .compose-form__upload .icon-button:hover { background-color: #444; color: var(--color-accent-fg); @@ -1863,10 +2075,12 @@ button.icon-button:is( .app-body .compose-form__poll { gap: 3px; } + .app-body .compose-form__poll .poll__option { margin-bottom: 2px; } -.app-body .poll__option input[type=text] { + +.app-body .poll__option input[type="text"] { border-radius: 8px; padding: 7px 12px; border: 1px solid var(--color-lines); @@ -1874,18 +2088,22 @@ button.icon-button:is( color: var(--color-content-fg); transition: all .2s; } -.app-body .poll__option input[type=text]:focus { + +.app-body .poll__option input[type="text"]:focus { border-color: var(--color-accent); } + .app-body .compose-form__poll__footer { margin-top: 5px; padding-inline-start: 12px; gap: 6px; margin-bottom: -10px; } + .app-body .compose-form__poll__select__label { display: none; } + .app-body .compose-form__poll__select__value { background-position: 8px center; background-size: 15px; @@ -1901,33 +2119,42 @@ button.icon-button:is( border-color .2s; cursor: pointer; } + .app-body .compose-form__poll__select__value:is(:active, :hover, :focus) { border-color: var(--color-accent); outline: 0; } + .app-body .compose-form__poll__select__value:active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value { background-image: var(--icon-timer); } + .app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value:active { background-image: var(--icon-timer-inv); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value { background-image: var(--icon-check-radio); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:active, .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked):active { background-image: var(--icon-check-radio-inv); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked) { background-image: var(--icon-check-radio); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked) { background-image: var(--icon-check-box); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked):active { background-image: var(--icon-check-box-inv); } @@ -1944,9 +2171,11 @@ button.icon-button:is( .app-body .compose-form__poll-wrapper .poll__footer { border-top: 0; } + .app-body .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } + .app-body .compose-form__poll-wrapper .autosuggest-input input, .app-body .compose-form__poll-wrapper select { background-color: var(--color-content-bg); @@ -1954,20 +2183,25 @@ button.icon-button:is( border-radius: 8px; color: var(--color-content-fg); } + .app-body .compose-form__poll-wrapper .autosuggest-input input:focus, .app-body .compose-form__poll-wrapper select:focus { border-color: var(--color-accent); } + .app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } + .app-body .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } + .app-body .compose-form__poll-button .icon-button.active { background-color: var(--color-accent); } + .app-body .compose-form__poll-button .icon-button.active .icon-tasks { background-image: var(--icon-poll-active); } @@ -1976,6 +2210,7 @@ button.icon-button:is( .app-body .muted .poll { color: var(--color-content-fg-muted); } + .app-body .poll__footer { color: var(--color-content-fg-muted); display: flex; @@ -1986,6 +2221,7 @@ button.icon-button:is( font-size: 12px; padding: 0; } + .app-body .poll__link { color: var(--color-accent); text-decoration: none; @@ -1998,21 +2234,26 @@ button.icon-button:is( height: 32px; transition: all .3s; } + .app-body .poll__link:hover { border-color: var(--color-accent); } + .app-body .poll__link:active { background-color: var(--color-accent-bg); } + .app-body .poll__option.editable .poll__input { display: none; } + .app-body .poll li { margin-bottom: 4px; position: relative; border-radius: 8px; overflow: hidden; } + .app-body :is(.status, .detailed-status) .poll__option { border: 1px solid var(--color-lines-translucent); color: var(--color-content-fg); @@ -2024,21 +2265,26 @@ button.icon-button:is( z-index: 1; align-items: center; } + .app-body .poll__option.selectable { cursor: pointer; } + .app-body .poll__option.selectable:active { transform: scale(.98); } + .app-body .poll__option.selectable:hover { border-color: var(--color-accent); color: var(--color-accent); } + .app-body .poll__option.selectable:has(.poll__input.active) { border-color: var(--color-accent); background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .poll__option.selectable .poll__input:not(.active) { border-width: 0; outline-width: 0 !important; @@ -2046,14 +2292,17 @@ button.icon-button:is( transition: background .2s; } + .app-body .poll__option.selectable:hover .poll__input:not(.active) { background-color: var(--color-accent-bg); } + .app-body .poll__option.selectable .poll__input.active { border-width: 3px; border-color: var(--color-accent-bg); outline-width: 1px !important; } + .app-body .poll__footer .button.button-secondary { box-sizing: border-box; padding: 0 16px; @@ -2063,32 +2312,39 @@ button.icon-button:is( color: var(--color-accent-fg); float: inline-end; } + .app-body .poll__footer .button.button-secondary:hover { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } + .app-body .poll__footer .button.button-secondary:disabled { opacity: 1; background-color: var(--color-content-secondary-bg); color: var(--color-accent); display: none; } + .app-body .poll__footer .button.button-secondary:not(:disabled) { animation: bounce-sml .3s ease-out 1; } + .app-body .poll__footer .button.button-secondary:active { transform: scale(.95); } + .app-body .poll__voted { position: absolute; right: 3px; height: 20px; color: var(--color-accent); } + .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted { right: 28px; color: var(--color-confirm-fg); } + .app-body .poll__chart { background: var(--color-lines); opacity: .8; @@ -2104,20 +2360,24 @@ button.icon-button:is( opacity: 1; } } + .app-body .poll__chart.leading, .app-body .muted .poll__chart.leading, .app-body .poll__option:has(.poll__voted) + .poll__chart.leading { background: var(--color-confirm); opacity: .5; } + .app-body .poll__option:has(.poll__voted) { border-color: var(--color-accent); background-color: transparent; } + .app-body .poll__option:has(.poll__voted) + .poll__chart { background-color: color-mix(in srgb, var(--color-accent), transparent 70%); opacity: 1; } + .app-body .poll__option:has(+ .poll__chart.leading), .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { border-color: color-mix(in srgb, var(--color-confirm), transparent 30%); @@ -2128,6 +2388,7 @@ button.icon-button:is( background-repeat: no-repeat; background-image: var(--icon-trophy); } + .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { border-color: var(--color-confirm); } @@ -2136,9 +2397,11 @@ button.icon-button:is( .app-body .emoji-picker-dropdown > .icon-button .icon { background-image: var(--icon-emoji-accent); } + .app-body .emoji-picker-dropdown > .icon-button.active .icon { background-image: var(--icon-emoji-accent-inv); } + .app-body .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; @@ -2146,53 +2409,65 @@ button.icon-button:is( border: 1px solid var(--color-lines); box-shadow: var(--dropdown-shadow); } + .app-body .emoji-mart { display: block; } + .app-body .emoji-mart-bar:first-child { background-color: var(--color-content-secondary-bg); border-color: var(--color-lines); padding-top: 2px; } + .app-body .emoji-mart-anchor-bar { background-color: var(--color-accent); } + .app-body .emoji-mart-anchor-selected { color: var(--color-accent); } + .app-body .emoji-mart-anchor-icon svg path, .app-body .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } + .app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, .app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, .app-body .emoji-mart-search-icon svg path { fill: var(--color-accent); } + .app-body .emoji-mart-search-icon, .app-body .emoji-mart-search-icon:disabled, .app-body .emoji-mart-search-icon svg { opacity: 1; } + .app-body .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } + .app-body .emoji-mart-search, .app-body .emoji-mart-scroll, .app-body .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } + .app-body .emoji-mart-search input:focus { border-color: var(--color-accent); outline: 0; } + .app-body .emoji-mart-search input::placeholder { color: var(--color-accent); } @@ -2203,9 +2478,11 @@ button.icon-button:is( .app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } + .app-body .status__content .emojione { transition: transform .8s .8s; } + .app-body .status__content .emojione:hover { transform: scale(2.5); } @@ -2219,27 +2496,31 @@ button.icon-button:is( .app-body .status__content { color: var(--color-content-fg); } + .app-body .account__display-name strong, .app-body .status__display-name strong, .app-body .status__info .status__display-name .display-name__account, .app-body .status__prepend a bdi { color: var(--color-content-fg); } + .app-body .translate-button { color: var(--color-content-fg-muted); } + .app-body .translate-button__meta, .app-body .translate-button button, .app-body .status__content__translate-button { font-size: 85%; } + .app-body .status__content__translate-button, .app-body .translate-button .link-button { width: 32px; height: 32px; bottom: 13px; right: 52px; - padding: 0px; + padding: 0; position: absolute; background-size: 20px; background-repeat: no-repeat; @@ -2249,6 +2530,7 @@ button.icon-button:is( transition: all .3s; background-color: transparent; } + .app-body .detailed-status .status__content__translate-button, .app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); @@ -2258,12 +2540,13 @@ button.icon-button:is( right: 60px; bottom: 20px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__content__translate-button, .app-body .translate-button .link-button { bottom: 10px; } } + .app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child :is( .translate-button .link-button, @@ -2271,10 +2554,12 @@ button.icon-button:is( ) { bottom: 12px; } + .app-body .status__content__translate-button:hover, .app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } + .app-body .translate-button .link-button, .app-body .detailed-status .translate-button .link-button, .app-body .translate-button .link-button:hover, @@ -2283,53 +2568,64 @@ button.icon-button:is( background-color: var(--color-accent); transform: scale(.8); } + .app-body .status__content__translate-button > span, .app-body .translate-button .link-button > span, .app-body .notification .status__content__translate-button { display: none; } + .app-body .account__display-name strong, .app-body .status__display-name strong, .app-body .notification-request__name__display-name strong, .app-body .status__prepend a bdi { font-weight: bold; } + .app-body .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } + .app-body .status__wrapper { transition: background .3s; } + .app-body .status__wrapper, .app-body .detailed-status__wrapper { --color-post-bg: var(--color-content-bg); + background-color: var(--color-post-bg); padding: 13px 12px; position: relative; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__wrapper { padding: 10px 8px; } + .app-body .notification-ungrouped .status__wrapper { padding: 13px 12px; } } + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper, .app-body .scrollable > div:first-child > .status__wrapper, .app-body .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } + .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, .app-body .scrollable > div > article:last-child > div > .status__wrapper, .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } + .app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top: 0; } + .app-body .status__info { height: 22px; width: calc(100% + 56px); @@ -2340,19 +2636,23 @@ button.icon-button:is( line-height: 0.625; align-items: start; } + .app-body .status__info .status__display-name { overflow: visible; align-items: start; max-height: 22px; } + .app-body .status__info .status__display-name .display-name bdi, .app-body .status__info .status__display-name .display-name__account { vertical-align: top; } + .app-body .status__info .status__display-name .display-name__account { display: inline; opacity: .6; } + .app-body .status__relative-time { height: 22px; color: var(--color-content-fg); @@ -2361,9 +2661,11 @@ button.icon-button:is( inset-inline-end: 20px; z-index: 1; } + .app-body .status__relative-time > * { opacity: .6; } + .app-body .status__relative-time::before, .app-body .status__relative-time::after { position: absolute; @@ -2373,17 +2675,20 @@ button.icon-button:is( z-index: -1; transition: all .3s; } + .app-body .status__relative-time::before { width: 20px; inset-inline-start: -20px; background: linear-gradient(90deg, transparent, var(--color-post-bg)); transition: all .2s; } + .app-body .status__relative-time::after { inset-inline-start: 0; inset-inline-end: 0; background-color: var(--color-post-bg); } + .app-body .status__relative-time time + abbr { display: inline-block; width: 18px; @@ -2396,15 +2701,19 @@ button.icon-button:is( background-image: var(--icon-edited); color: transparent; } + .app-body .status__relative-time .status__visibility-icon { order: 1; } + .app-body .status__relative-time time { order: 3; } + .app-body .status__relative-time time + abbr { order: 2; } + .app-body .status__avatar { margin-bottom: -10px; z-index: 2; @@ -2413,20 +2722,24 @@ button.icon-button:is( background-color: var(--color-post-bg); transition: outline .3s; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-base .account__avatar { width: 46px !important; height: 46px !important; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay { position: absolute; top: -34px; right: -38px; pointer-events: none; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay .account__avatar { width: 29px !important; height: 29px !important; } + .app-body .reply-indicator__content, .app-body .status__content { line-height: 1.4; @@ -2443,6 +2756,7 @@ button.icon-button:is( /* 📏 Post dividers */ + /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ .app-body .status::before, .app-body .notification__message::before { @@ -2455,7 +2769,7 @@ button.icon-button:is( content: ""; opacity: .7; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status::before, .app-body .notification__message::before { width: calc(100% - 73px); @@ -2478,7 +2792,7 @@ button.icon-button:is( .app-body .dismissable-banner + article .status::before { display: none; } -@media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ +@media screen and (width >=890px) and (width <=1174px) { /* no divider above first post in a column thread on medium-size devices */ .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{ display: none; @@ -2489,10 +2803,12 @@ button.icon-button:is( .app-body .status--first-in-thread { border-top: 0; } + .app-body .status--first-in-thread::before { width: 100%; right: 0; } + .app-body .status--in-thread :is( .attachment-list, @@ -2508,21 +2824,26 @@ button.icon-button:is( margin-left: 0; width: auto; } + .app-body .status__line--first { height: 100%; } + .app-body .status__line--full { height: calc(100% + 32px); } + /* Default lines when replying in real time */ .app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { height: 0; } + /* Hide line before first in thread */ .app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), .app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { height: 0; } + .app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { height: calc(100% - 32px) !important; } @@ -2533,10 +2854,12 @@ button.icon-button:is( height: 100%; z-index: 1; } + .app-body .detailed-status { background-color: transparent; border-top: 0; } + /* Threaded line, actually */ .app-body .status__line { margin-inline-start: 6px; @@ -2544,16 +2867,18 @@ button.icon-button:is( -webkit-border-start: 2px solid var(--color-accent); opacity: .6; } + .app-body .status__line--full::before { background-color: var(--color-accent); } + /* Hide the "stub" from the first status line */ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, .app-body .status-reply.status--in-thread.status--first-in-thread > .status__line, .app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { top: 32px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__line { inset-inline-start: 35px; } @@ -2570,10 +2895,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .focusable:focus .status__wrapper, .app-body .focusable:focus { outline: 0; + --color-post-bg: var(--color-content-bg-focus); + background-color: var(--color-post-bg); } -@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ +@media screen and (width >=1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ .app-body .status__wrapper:has(.status__content:hover), .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover), .app-body .status__wrapper:has(.status__content:hover) .status__avatar, @@ -2581,6 +2908,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu --color-post-bg: var(--color-content-bg-focus); } } + .app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar { outline: 6px solid var(--color-post-bg); } @@ -2596,44 +2924,54 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu inset 0 -5px var(--color-content-secondary-bg), inset 0 -6px var(--color-lines); } + .app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child { padding-bottom: 12px; box-shadow: none; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .detailed-status { padding: 8px 8px 14px; } } + .app-body .detailed-status .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } + .app-body .detailed-status .status__content { line-height: 1.27; } + .app-body .detailed-status { padding-bottom: 8px; } + .app-body .detailed-status, .app-body .detailed-status__action-bar { background-color: var(--color-content-bg); border: 0; } + .app-body .detailed-status__display-name strong, .app-body .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } + .app-body .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } + .app-body :is(.compose-panel, .compose-form) .detailed-status__display-name strong { font-size: 14px; } + .app-body .detailed-status__display-name .display-name__account { opacity: .7; } + .app-body .detailed-status__meta { color: var(--color-content-fg); display: flex; @@ -2647,6 +2985,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu overflow: hidden; position: relative; } + .app-body .detailed-status__meta::before { position: absolute; content: " "; @@ -2657,6 +2996,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu inset-inline-end: 0; background: linear-gradient(90deg, transparent, var(--color-post-bg)); } + .app-body .detailed-status__meta__line { border-top: 0; border-bottom: 0; @@ -2666,28 +3006,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: relative; opacity: .6; } + .app-body .detailed-status__meta__line:first-child { color: transparent; padding-left: 20px; padding-right: 5px; gap: 0; } + .app-body .detailed-status__meta__line:first-child svg { position: absolute; left: 0; } + .app-body .detailed-status__meta__line:first-child > * { color: var(--color-content-fg); white-space: nowrap; } + .app-body .detailed-status__meta__line:last-child { flex: 100%; opacity: .9; } + .app-body .detailed-status__application::before { content: "\00B7\00A0"; margin-left: -3px; } + .app-body .detailed-status__link:is([href$="/reblogs"], [href$="/favourites"]) { padding-left: 20px; border-radius: 8px; @@ -2696,12 +3042,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-size: 15px; transition: all .2s; } + .app-body .detailed-status__link[href$="/reblogs"] { background-image: var(--icon-boost); } + .app-body .detailed-status__link[href$="/favourites"] { background-image: var(--icon-star); } + .app-body .detailed-status__meta__line .dropdown-menu__text-button { overflow: hidden; padding-left: 20px; @@ -2711,52 +3060,62 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-size: 15px; text-align: start; } + .app-body .detailed-status__meta__line .dropdown-menu__text-button:is(:hover) { text-decoration: none; } + .app-body .detailed-status__action-bar { padding: 0 12px; justify-content: left; gap: 8px; width: auto; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .detailed-status__action-bar { padding-left: 0; padding-right: 0; } } + .app-body .detailed-status__button { width: 40px; height: 40px; flex: unset; } + .app-body .detailed-status__action-bar-dropdown { position: absolute; right: 18px; } + .app-body .detailed-status__meta .animated-number { color: var(--color-content-fg); font-weight: 700; } + .app-body .detailed-status__meta .dropdown-menu__text-button .animated-number { font-weight: 500; } + .app-body .status__action-bar .animated-number { color: var(--color-accent); font-weight: 500; } + .app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) { padding-left: 4px; padding-right: 4px; margin-right: 2px; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .active .icon-retweet + .icon-button__counter > .animated-number { color: var(--color-accent); } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .active @@ -2768,9 +3127,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body article > .account { padding: 16px; } + .app-body .account-timeline__header + article > .account { border-top: 1px solid var(--color-lines); } + .app-body .detailed-status__link { display: inline-flex; position: static; @@ -2783,12 +3144,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg-muted); transition: all .1s; } + .app-body .hashtag-bar a { font-weight: 500; } + .app-body .hashtag-bar .link-button { margin-left: 3px; } + .app-body .hashtag-bar a { background-color: color-mix( @@ -2800,18 +3164,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 3px 8px; border-radius: 8px; } + .app-body .hashtag-bar a:hover, .app-body .hashtag-bar .link-button:hover { color: var(--color-accent); } + .app-body .hashtag-bar a:hover { background-color: var(--color-accent-bg); } + .app-body .hashtag-bar a:active, .app-body .hashtag-bar a:focus { color: var(--color-accent-fg); background-color: var(--color-accent); } + .app-body .hashtag-bar a:hover span { text-decoration: none; } @@ -2822,14 +3190,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu margin-top: 8px; gap: 9px; } + .app-body .status__action-bar .status__action-bar__button-wrapper { flex-grow: 0; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) :is(button, .status__action-bar__dropdown) { transition: all .3s; } + .app-body .status__action-bar__button-wrapper:last-child { position: absolute; right: 18px; @@ -2838,6 +3209,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar .icon-button.disabled { pointer-events: none; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button:is( @@ -2859,24 +3231,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .icon-button.star-icon.activate > .icon-star { /* Disable default star spinning animation */ animation: none; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button.star-icon.active > .icon-star { animation: bounce .4s ease-out !important; } + .app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet { opacity: 1; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button.active>.icon-retweet { animation: launch 1.2s ease-in 1 !important; } + .app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, .app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { animation: bounce-vertical .4s ease-out !important; } + .app-body .status__action-bar .icon-button, .app-body .detailed-status__action-bar .icon-button { min-width: 32px; @@ -2884,19 +3261,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 8px; position: relative; } + .app-body .detailed-status__action-bar .icon-button { min-width: 40px; height: 40px; } + .app-body .detailed-status__action-bar .icon-button > .icon { width: 25px; height: 25px; } + .app-body .detailed-status__action-bar .icon-button .app-body .icon-button.star-icon.active, .app-body .notification__favourite-icon-wrapper .star-icon { color: #ffb609; } + .app-body .status__prepend { display: inline-flex; padding: 0 10px; @@ -2913,33 +3294,42 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline-offset: -1px; font-size: 13px; } + .app-body .status__prepend:has(.status__prepend__icon .icon-retweet) { padding-left: 35px; } + .app-body .status__prepend__icon { height: 20px; text-align: right; } + .app-body .status__prepend .status__prepend__icon:has(.icon-retweet) { order: 2; } + .app-body .status__prepend__icon .icon { transform: scale(.9); } + .app-body .detailed-status__wrapper .status__prepend__icon { width: 46px; } + .app-body .status__prepend > span { color: var(--color-fg-muted); white-space: nowrap; } + .app-body .status__prepend:has(.status__prepend__icon > .icon-thumb-tack) > span { color: var(--color-content-fg); font-weight: 600; } + .app-body .status__prepend .muted .emojione { opacity: 1; } + .app-body .status-card, .app-body .status-card.compact { background-color: var(--color-content-bg); @@ -2948,39 +3338,48 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: all .3s; border-radius: 8px; } + .app-body .status-card:hover, .app-body .status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } + .app-body .status-card:active, .app-body .status-card.compact:active { transform: scale(.98); } + .app-body .status-card__image { background: var(--color-content-secondary-bg); } + .app-body .status-card__image .icon { width: 32px; height: 32px; } + .app-body .status-card[href*="/@" i] { align-items: start; } + .app-body .status-card[href*="/@" i] .status-card__description { margin-top: 2px; white-space: normal; } + .app-body .status-card[href*="/@" i] .status-card__image { order: 2; background-color: transparent; padding: 8px; box-sizing: border-box; } + .app-body .status-card[href*="/@" i]:not(.expanded) .status-card__image { height: 120px; width: 120px; } + .app-body .status-card[href*="/@" i] .status-card__image-image { border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -2989,26 +3388,32 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline: 1px solid var(--color-lines-translucent); outline-offset: -1px; } + .app-body .status-card[href*="/@" i] .status-card__content { display: flex; flex-flow: column; } + .app-body .status-card__title { order: 1; line-height: 1.3; font-size: 18px; margin-bottom: 3px; } + .app-body .status-card__host { order: 2; } + .app-body .status-card__description { order: 3; } + .app-body .status-card__image:has(.icon-file-text:only-child), .app-body .status-card__description:empty { display: none; } + .app-body .status-card__title, .app-body .status-card__description, .app-body .status-card__author, @@ -3016,14 +3421,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); transition: all .2s; } + .app-body .status-card__host { color: var(--color-content-fg-muted); } + .app-body .status-card:active .status-card__host, .app-body .status-card:focus .status-card__host, .app-body .status-card:hover .status-card__host { color: var(--color-accent); } + .app-body .status-card:active .status-card__author, .app-body .status-card:active .status-card__description, .app-body .status-card:active .status-card__title, @@ -3035,71 +3443,87 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status-card:hover .status-card__title { color: var(--color-content-fg); } + .app-body .status-card__author strong { font-weight: 500; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status-card:not(.expanded) .status-card__image { width: 80px; } + .app-body .status-card:not(.expanded,:has(.icon-file-text)) .status-card__content { padding-top: 0; padding-bottom: 0; } + .app-body .status-card[href*="/@" i]:not(.expanded,:has(.icon-file-text)) .status-card__content { padding-top: 12px; padding-bottom: 12px; } + .app-body .status-card:not(.expanded) .status-card__host { margin-bottom: 2px; font-size: 12px; } + .app-body .status-card:not(.expanded) .status-card__title { font-size: 16px; } + .app-body .status-card:not(.expanded) .status-card__description { margin-top: 2px; font-size: 12px; } } + .layout-multiple-columns .status-card:not(.expanded) .status-card__image { width: 80px; } + .layout-multiple-columns .status-card:not(.expanded,:has(.icon-file-text),[href*="/@" i]) .status-card__content { padding-top: 0; padding-bottom: 0; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__host { margin-bottom: 2px; font-size: 12px; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__title { font-size: 16px; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__description { margin-top: 2px; font-size: 12px; } + .app-body .status-card:has(+ .more-from-author) { box-sizing: border-box; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } + .app-body .status-card + .more-from-author { background-color: var(--color-content-secondary-bg); border: 1px solid var(--color-lines); border-top: 0; } + .app-body .more-from-author { color: var(--color-content-fg); overflow: hidden; } + .app-body .more-from-author .logo { color: var(--color-content-fg); min-width: 16px; height: 16px; } + .app-body .more-from-author > span { flex-grow: 1; overflow: hidden; @@ -3107,23 +3531,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu text-overflow: ellipsis; mask-image: linear-gradient(90deg, black 80%, transparent 96%); } + .app-body .notification-ungrouped .more-from-author :is(.account__avatar) { width: 16px !important; height: 16px !important; } + .app-body .more-from-author a:is(:active, :hover, :focus) { color: var(--color-accent); } + .app-body .more-from-author a { color: var(--color-content-fg); font-weight: 700; } + .app-body .status__content p { margin-bottom: 12px; } + .app-body .status__content p:last-child { margin-bottom: 0; } + .app-body .content-warning { background: none; color: var(--color-content-fg); @@ -3137,14 +3567,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu line-height: 1.26; position: relative; } + .app-body .detailed-status .content-warning { font-size: 19px; line-height: 1.26; } + .app-body .content-warning::before, .app-body .content-warning::after { display: none; } + .app-body .content-warning .link-button { background-color: transparent; width: 100%; @@ -3156,6 +3589,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: end; text-decoration: none; } + .app-body .content-warning .link-button span { background-color: transparent; background-image: var(--icon-eye-shut); @@ -3182,36 +3616,42 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: relative; z-index: 1; } + .app-body .content-warning .link-button:hover span { - border-color: rgba(68, 74, 90, .6); + border-color: rgba(68, 74, 90, 60%); } @media (prefers-color-scheme: dark) { .app-body .content-warning .link-button:hover span { - border-color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, 30%); } } + .app-body .content-warning .link-button:active span { transform: scale(.95); } + .app-body .content-warning:has(+ .status__content > .status__content__text--visible) .link-button span { background-image: var(--icon-eye-open); } @media (prefers-color-scheme: dark) { .app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span { - border-color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, 30%); } } .app-body .icon-button.overlayed { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); border-radius: 7px; } + .app-body .icon-button.overlayed:hover { - background-color: rgba(0, 0, 0, .4); + background-color: rgba(0, 0, 0, 40%); } + .app-body .status__wrapper--filtered__button { color: var(--color-accent); } + .app-body .status__wrapper--filtered { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); @@ -3231,6 +3671,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .video-player { transition: transform .3s; } + .app-body .media-gallery__item { border-radius: 8px !important; outline: 1px solid var(--color-lines-translucent); @@ -3243,71 +3684,85 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu min-height: unset; width: auto; } + .app-body .status--in-thread .more-from-author { margin-inline-start: 0; } + .app-body .account-gallery__container { gap: 4px; padding: 4px; } + .app-body .media-gallery__item, .app-body .media-gallery__item-thumbnail, .app-body .media-gallery__item-gifv-thumbnail { cursor: pointer; transition: .2s transform; } + .app-body .media-gallery__item:active { transform: scale(.98); } + .app-body .media-gallery__item-thumbnail img, .app-body .media-gallery__alt__popover { border-radius: 8px; } + .app-body .media-gallery__gifv:is(:active, :hover)::after { display: none; } + .app-body .picture-in-picture .video-player::after { border-radius: 0; } + .app-body .media-gallery__preview, .app-body .video-player { background-color: var(--color-content-secondary-bg); } + .app-body .media-gallery__preview { - outline: 1px solid rgba(0, 0, 0, 0.05); + outline: 1px solid rgba(0, 0, 0, 5%); outline-offset: -1px; height: calc(100% - 1px); border-radius: 8px; transition: all .2s; } + .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { outline: 1px solid var(--color-lines-translucent); } + .app-body .media-gallery__actions__pill { border-radius: 6px; padding: 3px 8px; font-weight: 500; - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); transition: all .2s; } + .app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-content-bg); - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, 10%); color: var(--color-content-fg); border-radius: 8px; } + .app-body .spoiler-button__overlay__label > span:first-child { font-weight: bold; } .app-body :is(.media-gallery__alt__label, .media-gallery__gifv__label) { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); border-radius: 6px; } + .app-body .spoiler-button:not(.spoiler-button--minified) ~ .media-gallery__item :is(.media-gallery__alt__label, .media-gallery__gifv__label) { display: none; } @@ -3316,9 +3771,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%); border: 1px solid var(--color-lines-translucent); } + .app-body .media-gallery__alt__popover :is(p, h4) { color: var(--color-content-fg); } + .app-body .media-gallery__alt__popover h4 { font-weight: bold; } @@ -3331,9 +3788,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 0 0 8px 8px; contain: content; } + .app-body .empty-column-indicator a { color: var(--color-accent); } + .app-body .explore__links > .empty-column-indicator { border: 0; } @@ -3351,12 +3810,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu font-size: 95%; line-height: 1.5; } + .app-body .timeline-hint a { color: var(--color-accent); } + .app-body .timeline-hint p { opacity: .7; } + .app-body .timeline-hint::before { content: " "; display: block; @@ -3369,6 +3831,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: 0; border-radius: 8px; } + .app-body .timeline-hint::after { content: " "; background-image: var(--icon-reply-all); @@ -3381,6 +3844,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 40px; height: 40px; } + .app-body .timeline-hint > :is(p, a) { position: relative; z-index: 0; @@ -3394,18 +3858,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .follow_requests-unlocked_explanation a { color: var(--color-accent); } + .app-body .conversation__unread { background-color: var(--color-accent); } + .app-body .conversation__unread { color: var(--color-accent-fg); } + .app-body .conversation__content__names a strong { font-weight: bold; } + .app-body .conversation__content__names, .app-body .conversation__content__names a, .app-body .conversation__content__relative-time, @@ -3413,26 +3882,33 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .conversation .status__content p { color: var(--color-content-fg); } + .app-body .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } -.app-body .conversation.unread:before { + +.app-body .conversation.unread::before { border-color: var(--color-accent); } + .app-body .conversation__content__relative-time { opacity: .7; } + .app-body .conversation__content { position: relative; } + .app-body .account__avatar-composite { border-radius: 0; padding: 1px; } + .app-body .account__avatar-composite .account__avatar { height: auto !important; } + .app-body .account__avatar-composite__label { display: none; } @@ -3442,6 +3918,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-ungrouped--direct .notification-ungrouped__header { --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%); } + .app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover), .app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar, .app-body .status__wrapper.status__wrapper-direct.focusable:focus, @@ -3459,6 +3936,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 50px 50px 50px 10px; transition: all .2s; } + .app-body :is(.detailed-status__wrapper-direct) .status__prepend { margin-inline-start: 0; margin-block-end: 0; @@ -3470,23 +3948,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline: 0; font-size: 13px; } + .app-body :is(.detailed-status__wrapper-direct):has(.status__prepend) { padding-top: 40px; } + .app-body :is(.status__wrapper-direct):not(:has(.status__line)) .status__prepend { margin-inline-start: 66px; } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon-wrapper { height: 20px; } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .icon-at { background-image: var(--icon-at-inv); } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon { width: 20px; height: 20px; transform: scale(.85); } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend > span { color: var(--color-accent-fg); margin-top: -1px; @@ -3495,6 +3979,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-ungrouped--direct .notification-ungrouped__header > .notification-ungrouped__header__icon > svg { display: none; } + .app-body .notification-ungrouped--direct .notification-ungrouped__header > span { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -3512,30 +3997,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; box-shadow: inset 0 20px var(--color-bg); } -.app-body .column-header__wrapper.active:before { + +.app-body .column-header__wrapper.active::before { top: -17px; bottom: unset; - opacity: 30%; + opacity: 0.3; height: 35px; width: 100%; background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%); } + .app-body .column-header__wrapper.active { box-shadow: none; } -@media screen and (min-width:1175px) { - .app-body .column-header__wrapper.active:before { +@media screen and (width >=1175px) { + .app-body .column-header__wrapper.active::before { top: unset; bottom: -15px; border-top: 1px solid var(--color-lines-translucent); } + .app-body .column-header__wrapper.active { box-shadow: 0 1px 0 var(--color-lines-translucent); } } + .app-body .column-header { border-radius: 8px; } + .app-body .column-header, .app-body .column-back-button { background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%); @@ -3552,14 +4042,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .column-back-button { padding-left: 15px; } + .app-body .column-header__button, .app-body .column-header__back-button { background-color: transparent; border: 0; } + .app-body .column-header__button { color: var(--color-content-fg); transition: all .2s; @@ -3567,41 +4060,50 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 42px; margin: 4px 4px 4px 0; } + .app-body .column-header__button:active { transform: scale(.8); } + .app-body .column-header__icon { transform: scale(1.1); margin-right: 4px; } + .app-body .column-header__buttons .column-header__button:has(> .icon:only-child) { width: 42px; } + .app-body .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; } + .app-body .column-header__button:is(.active, .active:hover, :hover) { color: var(--color-accent); background-color: var(--color-accent-bg); } + .app-body .column-header__button.active .icon { transform: none; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-header__wrapper::after, .app-body:not(.layout-multiple-columns) .column-back-button::after { display: none; } + .app-body .column-header__buttons { height: 55px; } + .app-body:not(.layout-multiple-columns) .column-header, .app-body:not(.layout-multiple-columns) .column-back-button { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } + .app-body:not(.layout-multiple-columns) .column-header__button, .app-body:not(.layout-multiple-columns) .column-header__button:is(.active, .active:hover, :hover) { padding: 0 12px; @@ -3613,32 +4115,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-back-button--slim-button::after { display: none; } + .app-body .column-back-button--slim-button { top: -50px } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-back-button--slim-button { height: 50px; } } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body:not(.layout-multiple-columns) .column-back-button--slim-button { display: none; } } + .app-body :is(.column-header__back-button, .column-back-button) { gap: 5px; } + .app-body .column-back-button__icon { margin-inline-end: 0; } + .app-body :is(.column-header__back-button, .column-back-button) span, .app-body .column-header__back-button { position: relative; } + .app-body :is(.column-header__back-button, .column-back-button):hover { text-decoration: none; } + .app-body :is(.column-header__back-button, .column-back-button) span::before, .app-body .column-header__back-button:has(> svg:last-child)::before { content: " "; @@ -3652,16 +4160,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; transition: all .3s; } + .app-body :is(.column-header__back-button, .column-back-button) span::before { left: -35px; right: -12px; bottom: -11px; top: -10px; } + .app-body :is(.column-header__back-button, .column-back-button):hover span::before, .app-body .column-header__back-button:has(> svg:last-child):hover::before { background-color: var(--color-accent-bg); } + .app-body :is(.column-header__back-button, .column-back-button):active span::before, .app-body .column-header__back-button:has(> svg:last-child):active::before { transform: scale(.9); @@ -3676,9 +4187,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: background .3s; padding: 8px; } + .app-body :is(.load-gap, .load-more):is(:active, :hover) { background-color: var(--color-accent-lines); } + .app-body :is(.load-gap, .load-more) .icon-ellipsis-h { background-image: var(--icon-ellipsis-column-link-active-accent); } @@ -3689,32 +4202,39 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-right: 1px solid var(--color-lines); border-bottom: 0; } + .app-body .column-header__collapsible:is(:not(.collapsed), .animating) { border-bottom: 1px solid var(--color-lines); } + .app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } + .app-body .column-header__select-row { border-color: var(--color-lines); } + .app-body .column-header__select-row__actions button { background-color: var(--color-accent-bg); color: var(--color-accent); border-color: var(--color-accent-bg); } + .app-body .column-header__select-row__actions button:hover { border-color: var(--color-accent); } + .app-body .column-header__select-row__actions button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible { box-shadow: none; border-radius: 0; } + .app-body .column-header__select-row { border-color: var(--color-lines); background-color: var(--color-content-secondary-bg); @@ -3724,32 +4244,40 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-width: 0 0 1px; } } + .app-body .column-header__collapsible-inner { border: 0; } + .app-body .column-settings__section { color: var(--color-content-fg-bold); } + .app-body .setting-toggle__label { color: var(--color-content-fg); } + .app-body .column-header > button { padding: 0 0 0 15px; } + .app-body .column-header > button:nth-child(2) { padding-left: 0; } + .app-body .column-header .column-header__back-button { padding-right: 15px; } + .app-body .column-header > button, .app-body .column-header .column-header__back-button { font-weight: bold; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .ui { padding-top: 55px; } + .app-body:not(.layout-multiple-columns) .ui__header { background-color: transparent; border-bottom: 0; @@ -3759,9 +4287,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: none; backdrop-filter: none; } + .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo { margin-left: 3px; } + .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { box-shadow: none; display: block; @@ -3770,6 +4300,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 45px; border-bottom: 0; } + .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { display: block; top: 0; @@ -3778,12 +4309,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 55px; position: fixed; } - .app-body:not(.layout-multiple-columns):not(:has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { + + .app-body:not(.layout-multiple-columns, :has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { z-index: 3; } + .app-body:not(.layout-multiple-columns):has(.ui .ui__header__links > .button[href="/auth/sign_in"]) .tabs-bar__wrapper :is(.column-back-button, .column-header > *) { display: none; } + .app-body:not(.layout-multiple-columns) :is( .column-header, @@ -3796,9 +4330,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 0; margin: 0; } + .app-body .column-header__icon { display: none; } + .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); @@ -3830,32 +4366,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } } + .app-body:not(.layout-multiple-columns) .column-header__collapsible { margin-top: 1px; position: absolute; left: -45px; right: -55px; } + .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { border-bottom: 1px solid var(--color-lines); } } -@media screen and (max-width:885px) { +@media screen and (width <=885px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible:is(:not(.collapsed), .animating) { border-left-color: var(--color-content-secondary-bg); border-right-color: var(--color-content-secondary-bg); } } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { border-color: transparent; } + .app-body:not(.layout-multiple-columns) .ui::after { border-bottom: 1px solid var(--color-lines); } } @media (prefers-color-scheme: dark) { - @media screen and (max-width:1174px) { + @media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { border-color: var(--color-lines); } @@ -3871,27 +4410,30 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); } + .app-body .account__header + .account__section-headline { border-left: 0; border-right: 0; } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body:not(.layout-multiple-columns) .explore__search-header + .account__section-headline { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .app-body:not(.layout-multiple-columns) .notification__filter-bar { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 10px; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) :is(.account__section-headline, .notification__filter-bar) { border-left: 0; border-right: 0; } } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button) { @@ -3903,11 +4445,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu max-height: 45px; padding: 14px 10px; } + .app-body :is(.account__section-headline, .notification__filter-bar) .icon { margin-top: -1.5px; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { @@ -3915,6 +4459,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { @@ -3922,16 +4467,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { display: none; } + .app-body :is(.account__section-headline, .notification__filter-bar) button { background-color: transparent; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { @@ -3950,6 +4498,7 @@ button { transform: unset; border: 0; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { @@ -3966,35 +4515,44 @@ button { .app-body .notification__filter-bar .icon-reply-all { background-image: var(--icon-reply-accent); } + .app-body .notification__filter-bar .active .icon-reply-all { background-image: var(--icon-reply); } + .app-body .notification__filter-bar .icon-star { background-image: var(--icon-star-accent); } + .app-body .notification__filter-bar .active .icon-star { background-image: var(--icon-star); } + .app-body .notification__filter-bar .icon-retweet { background-image: var(--icon-boost-accent); } + .app-body .notification__filter-bar .active .icon-retweet { background-image: var(--icon-boost); } + .app-body .notification__filter-bar .icon-tasks { background-image: var(--icon-poll-accent); } + .app-body .notification__filter-bar .active .icon-tasks { background-image: var(--icon-poll); } + .app-body .notification__filter-bar .icon-home { background-image: var(--icon-post-notification-accent); } + .app-body .notification__filter-bar .active .icon-home { background-image: var(--icon-post-notification); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .account__header + .account__section-headline { border-radius: 0; } @@ -4007,18 +4565,23 @@ button { display: flex; flex-flow: column; } + .app-body .column-link--transparent { color: var(--color-fg); } + .app-body .ui__header__logo .logo--icon { display: none; } + .app-body .ui__header__links .button.button-secondary { padding: 8px 15px; } + .app-body .ui__header__links .button.button-secondary[href="/search"] { display: none; } + .app-body .ui__header__links .button.button-secondary[href="/publish"] { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -4034,18 +4597,20 @@ button { background-size: 22px; border-radius: 50%; box-shadow: - 0 1px 1px rgba(0, 0, 0, .2), - 0 2px 10px rgba(0, 0, 0, .2); + 0 1px 1px rgba(0, 0, 0, 20%), + 0 2px 10px rgba(0, 0, 0, 20%); } + .app-body .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } + .app-body .ui__header__links .button.button-secondary[href="/publish"] span { color: transparent; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .layout-single-column .ui__header__links { padding-left: 12px; } @@ -4068,6 +4633,7 @@ button { background-position: center; background-size: 32px auto; } + .app-body .column-link.column-link--logo svg, .app-body .ui__header__logo svg { display: none; @@ -4076,6 +4642,7 @@ button { .app-body .navigation-panel__logo { margin-bottom: 5px; } + .app-body .column-link:not(.column-link--logo) { padding: 15px 20px 16px 13px; gap: 7px; @@ -4086,21 +4653,25 @@ button { overflow: visible; transform-origin: 60px center; } + .app-body .column-link--transparent:is(.active, .active:hover) { color: var(--color-content-fg); font-weight: bold; } + .app-body .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } + .app-body .column-link--transparent span { position: relative; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .column-link:not(.column-link--logo) { transition: all .3s; } + .app-body .column-link--transparent span::before { content: " "; left: -52px; @@ -4113,16 +4684,20 @@ button { z-index: -1; bottom: -14px; } + .app-body .column-link--transparent:hover span::before { background-color: color-mix(in srgb, var(--color-accent), transparent 85%); } + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: transparent; } + .app-body .column-link--transparent:active { transform: scale(.95); } } + .app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -4132,12 +4707,13 @@ button { border: 0; z-index: 1; } + .app-body .compose-panel hr, .app-body .navigation-panel .list-panel hr { display: none; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .navigation-panel hr:has(+ .column-link[href="/settings/preferences"]) { margin-right: 25px; margin-left: 10px; @@ -4145,10 +4721,11 @@ button { border-color: var(--color-lines); } } + .app-body .column-link span { vertical-align: middle; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; height: calc(4.2em + var(--safe-area-bottom)); @@ -4156,6 +4733,7 @@ button { left: 0; z-index: 3; } + .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; @@ -4168,11 +4746,13 @@ button { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { flex-flow: row; overflow-x: auto; mask-image: linear-gradient(90deg, black 80%, transparent 96%); } + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), .app-body .navigation-panel .column-link:is(.active, .active:hover, :active), .app-body .navigation-panel .navigation-panel__menu::after { @@ -4189,15 +4769,18 @@ button { transform-origin: center; transition: .3s transform; } + .app-body .navigation-panel .navigation-panel__menu::after { content: " "; } + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { mask-image: none; } + .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3), .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *, .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4), @@ -4208,43 +4791,52 @@ button { .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * { flex: 50vw; } + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::after { display: none; } + .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active { transform: scale(.85); } + .app-body .column-link__icon { margin: 0; transform: scale(1.3); } + .app-body .column-link span { padding-left: .5em; } + .app-body .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; } + .app-body .columns-area__panels { padding-bottom: 4em; } + .app-body .columns-area__panels .navigation-panel__legal { margin: 0; padding: 0; } + .app-body .columns-area__panels .navigation-panel__legal .column-link--transparent { height: calc(100% - 13px); box-sizing: border-box; border: 0; } + .app-body .navigation-panel .flex-spacer { display: none; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .columns-area__panels__main { width: 100%; margin-left: -55px; @@ -4258,30 +4850,36 @@ button { padding-bottom: 5px; background-color: var(--color-content-bg); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .account__header { border-left: 0; border-right: 0; } } + .app-body .account__header__image { height: 200px; background-color: var(--color-content-bg); border-bottom: 0; margin: 0; } + .app-body .account__header__image img { background-color: var(--color-content-secondary-bg); } + .app-body .account__header__bar { border: 0; } + .app-body .account__header__bar .avatar { transition: transform .3s; } + .app-body .account__header__bar .avatar:active { transform: scale(.92); } + .app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; margin: 0; @@ -4291,41 +4889,51 @@ button { height: 100px !important; background-color: var(--color-content-bg); } + .app-body .account__header__tabs__name h1, .app-body .account__header__tabs__name h1 small { color: var(--color-content-fg); } + .app-body .account__header__tabs__name h1 > span { font-size: 18px; } + .app-body .account__header__tabs__name h1 small > span:first-child { opacity: .7; } + .app-body .account__header__tabs__name .icon-lock { height: 20px; width: 16px; top: unset; vertical-align: bottom; } + .app-body .account__header__content a { color: var(--color-accent); text-decoration: none; } + .app-body .account__header__content a:hover { text-decoration: underline; } + .app-body .account__header__extra__links a strong { color: var(--color-content-fg-bold); } + .app-body .account__header__account-note label { margin-bottom: 0; } + .app-body .account__header__account-note label, .app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; font-style: normal; } + .app-body .account__header__account-note textarea { color: var(--color-content-fg); border-radius: 8px; @@ -4336,23 +4944,28 @@ button { outline-offset: -1px; transition: all .2s; } + .app-body .account__header__account-note textarea:placeholder-shown { padding-left: 0; padding-right: 0; } + .app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); padding-left: 10px; padding-right: 10px; } -.app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) { + +.app-body .account__header__account-note textarea:not(:placeholder-shown, :focus) { outline-color: var(--color-lines); box-shadow: 2px 3px var(--color-content-secondary-bg); } + .app-body .account__header__account-note textarea:not(:placeholder-shown):focus { outline-color: var(--color-accent); box-shadow: 2px 3px var(--color-accent-bg); } + .app-body .account__header__badges .account-role { color: var(--color-content-fg); border: 0; @@ -4362,18 +4975,22 @@ button { background-color: var(--color-content-secondary-bg); gap: 5px; } + .app-body .account__header__badges .account-role span:not(.account-role__domain) { font-weight: 500; } + .app-body .account-role svg { opacity: 1; color: var(--color-accent); } + .app-body .account__header__extra__links a, .app-body .account__header__bio .account__header__content, .app-body .account__header__bio .account__header__fields dd { color: var(--color-content-fg); } + .app-body .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; @@ -4384,18 +5001,22 @@ button { background-color: var(--color-secondary-bg); } } + .app-body .account__header__bio .account__header__fields:has(dl:only-child) { display: none; } + .app-body .account__header__bio .account__header__fields dt { font-weight: bold; font-size: 12px; } + .app-body .account__header__bio .account__header__fields :is(dl, .verified) { border-bottom: 0; position: relative; } -.app-body .account__header__bio .account__header__fields dl:not(:last-child):after { + +.app-body .account__header__bio .account__header__fields dl:not(:last-child)::after { display: block; content: " "; height: 1px; @@ -4407,47 +5028,55 @@ button { border-radius: 50px; } @media (prefers-color-scheme: dark) { - .app-body .account__header__bio .account__header__fields dl:not(:last-child):after { + .app-body .account__header__bio .account__header__fields dl:not(:last-child)::after { background-color: var(--color-accent-bg); } } + .app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } + .app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ margin-top: 0; border-top-width: 0; } + .app-body .account__header__bio .account__header__fields .verified :is(a, dd), .app-body .hover-card .account-fields dl.verified dd a { color: var(--color-accent); gap: 5px; } + .app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); } + .app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ border-top: 0; border-right: 0; border-left: 0; background: none; } + .app-body .account__header__extra .account__header__fields .verified dd > span:first-child { vertical-align: bottom; } + .app-body .account__header__extra .account__header__fields .verified__mark { float: left; transform: scale(1.1); } + .app-body .account__header__bio .account__header__fields .verified:last-child { border-bottom: 0; } .app-body .account__header__tabs__buttons .icon-button.copied, .app-body .account__header__tabs__buttons .icon-button.copied:is(:active, :focus, :hover) { - background-color: rgba(121, 189, 154, 0.3); + background-color: rgba(121, 189, 154, 30%); } .app-body .follow-request-banner, @@ -4455,10 +5084,12 @@ button { background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); } + .app-body .follow-request-banner__message, .app-body .moved-account-banner__message { color: var(--color-content-fg); } + .app-body .moved-account-banner__message { font-weight: bold; } @@ -4476,69 +5107,86 @@ button { font-weight: 500; transition: all .2s; } + .app-body .account__domain-pill:hover { background-color: var(--color-accent-bg); } + .app-body .account__domain-pill.active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .dropdown-animation.account__domain-pill__popout { animation: none; } + .app-body .account__domain-pill__popout { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 8px; } + .app-body .account__domain-pill__popout__header__icon { background-color: var(--color-accent); } + .app-body .account__domain-pill__popout__handle { padding: 12px; } + .app-body :where(.account__domain-pill__popout__header, .account__domain-pill__popout__parts) :is(h3, h6) { color: var(--color-content-fg); font-weight: 600; } + .app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon { align-items: start; padding-top: 2px; } + .app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon .icon { width: 28px; height: 28px; } + .app-body .account__domain-pill__popout__parts > div:first-child .account__domain-pill__popout__parts__icon .icon { background-image: var(--icon-direct-messages-accent); } + .app-body .account__domain-pill__popout__parts > div:last-child .account__domain-pill__popout__parts__icon .icon { background-image: var(--icon-globe-accent); } + .app-body .hover-card { background-color: color-mix(in srgb, var(--color-content-bg), transparent 10%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--color-lines); } + .app-body .hover-card__bio, .app-body .hover-card .display-name bdi, .app-body .account-fields, .app-body .hover-card__number { color: var(--color-content-fg); } + .app-body .hover-card .display-name__html { font-weight: 600; } + .app-body .account-fields { font-size: 95%; } + .app-body .hover-card .account-fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; padding: 8px; } + .app-body .hover-card .account-fields dl:not(:first-child:last-child) { gap: 10px; padding-bottom: 6px; @@ -4548,15 +5196,18 @@ button { .app-body .hover-card .account-fields { background-color: var(--color-secondary-bg); } + .app-body .hover-card .account-fields dl { border-color: var(--color-accent-bg); } } + .app-body .hover-card .account-fields dl:last-child:not(:first-child) { padding-top: 6px; padding-bottom: 0; border-bottom: 0; } + .app-body .hover-card .account-fields dl dt { width: 30%; min-width: 30%; @@ -4566,6 +5217,7 @@ button { text-transform: uppercase; font-size: 80%; } + .app-body .hover-card .account-fields dl dd { text-align: left; justify-content: flex-start; @@ -4584,6 +5236,7 @@ button { border-bottom: 1px solid var(--color-lines); background-color: var(--color-content-secondary-bg); } + .app-body .status__wrapper:has(.icon-thumb-tack)::before { position: absolute; left: 0; @@ -4594,16 +5247,20 @@ button { content: ""; background-color: var(--color-content-bg); } + .app-body .status__wrapper:has(.icon-thumb-tack) { padding-bottom: 20px; margin-top: -8px; } + .app-body .status__wrapper:has(.icon-thumb-tack) :is(.status__content__translate-button, .translate-button .link-button) { bottom: 20px; } + .app-body .account-timeline__header + article .status__wrapper:has(.icon-thumb-tack) { margin-top: 0; } + .app-body .account-timeline__header + article .status__wrapper:has(.icon-thumb-tack)::before { display: none; } @@ -4615,34 +5272,42 @@ button { background-color: var(--color-content-bg); overflow: hidden; } + .layout-multiple-columns .explore__links.scrollable { background-color: var(--color-content-bg); overflow-y: auto; } + .app-body .explore__links .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); padding: 15px 18px; } + .app-body .explore__links .trends__item:last-child { border-bottom: 0; } + .app-body .trends__item__name, .app-body .trends__item__current { color: var(--color-fg-muted); } + .app-body .trends__item__name a { color: var(--color-fg); } + .app-body .getting-started__trends { padding: 0; display: flex; flex-flow: column; } + .app-body .getting-started__trends h4 { border-bottom: 0; padding: 0; } + .app-body .getting-started__trends h4 > :is(a, span) { padding: 15px 20px 6px 47px; margin-left: 3px; @@ -4652,18 +5317,22 @@ button { display: block; transition: all .3s; } + .app-body .getting-started__trends h4 a:hover { color: var(--color-accent); } + .app-body .getting-started__trends h4 a:active { transform: scale(.95); } + .app-body .getting-started__trends h4 a::after { content: '\2192'; margin-left: 0; opacity: 0; transition: all .2s; } + .app-body .getting-started__trends:hover h4 a::after { opacity: 1; margin-left: 5px; @@ -4672,7 +5341,7 @@ button { .app-body .getting-started__trends .trends__item { padding-left: 19px; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .getting-started__trends { display: none; } @@ -4690,9 +5359,11 @@ button { content: " "; display: block; } + .app-body .trends__item__name span { white-space: pre-wrap; } + .app-body .trends__item__sparkline { flex: 0 0 auto; position: relative; @@ -4705,6 +5376,7 @@ button { transform: scale(1.25); transition: all .3s; } + .app-body .getting-started__trends .trends__item__sparkline { background-color: var(--color-secondary-bg); } @@ -4713,12 +5385,14 @@ button { background-color: var(--color-content-secondary-bg); } } + .app-body .trends__item__sparkline svg { width: 50px; height: 30px; position: absolute; right: -2px; } + .app-body .trends__item__sparkline::after { position: absolute; display: block; @@ -4734,10 +5408,11 @@ button { .app-body .trends__item__sparkline path:last-child { stroke: var(--color-accent) !important; } + .app-body .trends__item__sparkline path:first-child { fill: var(--color-accent) !important; fill-opacity: .4 !important; - transform: translate(0px, 0.2px); + transform: translate(0, 0.2px); } @@ -4751,12 +5426,15 @@ button { background-color: var(--color-content-secondary-bg); border: 0; } + .app-body .hashtag-header__header { margin-bottom: 0; } + .app-body .hashtag-header__header h1 { color: var(--color-content-fg); } + .app-body .hashtag-header .hashtag-header__header + div { color: var(--color-content-fg); font-size: 85%; @@ -4764,28 +5442,31 @@ button { margin-top: -5px; width: max-content; } -@media screen and (max-width:460px) { +@media screen and (width <=460px) { .app-body .hashtag-header .hashtag-header__header + div { max-width: 55%; line-height: 1.5; margin-top: -2px; } + .app-body .hashtag-header .hashtag-header__header + div > span { display: inline-block; margin-right: 5px; } } + .layout-multiple-columns .hashtag-header .hashtag-header__header + div { max-width: 55%; line-height: 1.5; margin-top: -2px; } + .layout-multiple-columns .hashtag-header .hashtag-header__header + div > span { display: inline-block; margin-right: 5px; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .hashtag-header .hashtag-header__header button { transform: translate(0, 8px); } @@ -4800,46 +5481,57 @@ button { border: 0; border-bottom: 1px solid var(--color-lines); } + .app-body .account-card__header { padding: 0; border-radius: 0; height: 128px; overflow: hidden; } -.app-body .scrollable .account-card__bio:after { + +.app-body .scrollable .account-card__bio::after { background: linear-gradient(270deg, var(--color-content-bg), transparent); } + .app-body .account-card__header img { background-color: var(--color-content-secondary-bg); } + .app-body .account-card__title__avatar .account__avatar { border: 0; border-radius: 50%; overflow: visible; } + .app-body .account-card__title__avatar img { border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-content-bg); } + .app-body .account-card__title .display-name bdi, .app-body .account-card__counters__item, .app-body .account-card__counters__item small { color: var(--color-content-fg); } + .app-body .account-card__counters__item small { opacity: .7; } + .account-card__title .display-name bdi .display-name__html { font-weight: bold; } + .app-body .account-card__bio a { color: var(--color-accent); } + .app-body .filter-form { background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); } + .app-body .filter-form__column { padding: 10px 15px; } @@ -4849,6 +5541,7 @@ button { gap: 2px; padding-bottom: 14px; } + .app-body .explore__suggestions__card__source span { background-color: var(--color-content-secondary-bg); padding: 6px 12px; @@ -4857,25 +5550,29 @@ button { color: var(--color-fg-muted); font-weight: 500; } + .app-body .explore__suggestions__card__body__main__name-button .display-name__account { color: var(--color-content-fg); opacity: .75; } + .app-body .explore__suggestions__card .icon-button { background-color: var(--color-content-secondary-bg); color: var(--color-fg-muted); padding: 6px; border: 0; } + .app-body .explore__suggestions__card .icon-button:is(:active, :hover) { background-color: var(--color-accent-bg); } -@media screen and (min-width:1173px) { +@media screen and (width >=1173px) { .app-body .explore__suggestions__card .icon-button { opacity: 0; transform: translateX(50%); transition: all .3s; } + .app-body .explore__suggestions__card:hover .icon-button { opacity: 1; transform: translateX(0); @@ -4888,34 +5585,43 @@ button { background-color: var(--color-content-bg); transition: all .3s; } + .app-body .story:not(:last-child) { border-bottom: 2px solid var(--color-content-secondary-separator); } + .app-body .story, .app-body .story__details__title { color: var(--color-content-fg); } + .app-body .story__details__title { font-weight: bold; transition: all .3s; } + .app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) { background-color: var(--color-content-bg-focus); } + .app-body .story__details__publisher { color: var(--color-fg); } + .app-body .story .story__details__publisher { opacity: .7; transition: all .3s; } + .app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) :is(.story__details__publisher, .story__details__title) { color: var(--color-accent); opacity: 1; } + .app-body .story__details__shared { color: var(--color-fg-muted); } + .app-body .story__details__shared__pill { background-color: color-mix( @@ -4927,26 +5633,33 @@ button { border-radius: 8px; transition: all .3s; } + .app-body .story__details__shared__pill:hover { background-color: var(--color-accent-bg); } + .app-body .story__details__shared__pill:active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .story.expanded { gap: 20px; padding-bottom: 20px; } + .app-body .story.expanded .story__thumbnail { margin: 0; } + .app-body .story.expanded .story__thumbnail img { border-radius: 8px; } + .app-body .story__details__shared__author-link { color: var(--color-content-fg); } + .app-body .story__details__shared__author-link:hover { color: var(--color-accent); } @@ -4957,15 +5670,18 @@ button { margin-bottom: 10px; transition: transform .3s; } + .app-body .search:has(.search__icon:active) { transform: scale(.95); } + .app-body .search__input { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); - font-weight: 500; + font-weight: 400; + text-indent: 22px; padding-inline-end: 45px; padding-inline-start: 16px; outline-offset: 0; @@ -4975,95 +5691,118 @@ button { background-color .2s, outline .2s; } + .app-body .search__input::placeholder, .app-body .compose-form .spoiler-input__input::placeholder { font-weight: 500; color: var(--color-accent); } + .app-body .search__input:focus { border-color: var(--color-accent); background-color: var(--color-content-bg); outline: 3px solid var(--color-accent-bg); border-radius: 8px; } + .app-body .search__input:focus::placeholder, .app-body .compose-form .spoiler-input__input:focus::placeholder { color: var(--color-content-fg); opacity: .4; } + .app-body .search__icon .icon { padding: 5px; transform: scale(1) translateY(-50%); background-size: 24px !important; - top: 50%; + top: 12px; inset-inline-start: unset; inset-inline-end: 12px; + margin-left: 30px; } + .app-body .search__input:not(:placeholder-shown) + .search__icon:hover .icon { background-image: var(--icon-erase-active); } + .app-body .compose-panel .icon-search, .app-body .compose-panel .icon-search.active, .app-body .explore__search-header .icon-search { background-image: var(--icon-search-active); } + .app-body .compose-panel .icon-search.active, .app-body .search__icon .icon-search.active { opacity: 1; z-index: 1; } + .app-body .explore__search-results { border-radius: 0; border: 0; background-color: transparent; overflow: hidden; } + .app-body .explore__search-header { background-color: transparent; } + .app-body .explore__search-results .account { padding-top: 16px; } + .app-body .explore__search-results article:last-child > .account { border-bottom: 1px solid var(--color-lines); } + .app-body :is(.explore__search-results, .search-results__section) .trends__item { border-bottom: 2px solid var(--color-content-secondary-bg); } + .app-body :is(.explore__search-results, .search-results__section) article:first-child > .trends__item, .app-body :is(.explore__search-results, .search-results__section) > .trends__item:first-child, .app-body :is(.explore__search-results, .search-results__section) > .account:first-child { border-top: 1px solid var(--color-lines); } + .app-body :is(.explore__search-results, .search-results__section) article:last-child > .trends__item, .app-body :is(.explore__search-results, .search-results__section) > .trends__item:last-child, .app-body :is(.explore__search-results, .search-results__section) > .account:last-child { border-bottom: 1px solid var(--color-lines); } + .app-body .search-results__section { background-color: var(--color-content-bg); border-bottom: 0; } + .app-body .search-results__section__header { background-color: var(--color-content-secondary-bg); border-bottom: 0; color: var(--color-content-fg); } + .app-body .search-results__section__header button { color: var(--color-accent); } + .app-body .account .account__details > span { color: var(--color-content-fg); } + .app-body .account .account__details .verified-badge { color: var(--color-accent); } + .app-body .account .account__details .verified-badge span { font-weight: 500; } + .app-body .compose-panel:has(> .search.active) { overflow: visible; } + .app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; @@ -5071,33 +5810,41 @@ button { border: 1px solid var(--color-lines); animation: fadein-short .2s 1; } + .app-body .search__popout h4 { font-weight: bold; } + .app-body .search__popout h4, .app-body .search__popout__menu__message, .app-body .search__popout__menu__item { color: var(--color-content-fg); } + .app-body .search__popout__menu__item { align-items: center; border-radius: 6px; } + .app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } + .app-body .search__popout__menu__item :is(.icon-button, .icon-button .icon) { border-radius: 6px; transition: none; } + .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) :is(.icon-button, .icon-button .icon) { color: var(--color-accent-fg); } + .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover), .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) .icon { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } + .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover), .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { background-color: var(--color-accent); @@ -5107,6 +5854,7 @@ button { .app-body .search__popout__menu:nth-child(2):not(:has(.search__popout__menu__message)) { margin-bottom: 10px; } + .app-body .search__popout h4:has(+ .search__popout__menu:last-child, + .search__popout__menu__message) { background-color: var(--color-content-secondary-bg); padding-top: 15px; @@ -5116,6 +5864,7 @@ button { border-radius: 6px 6px 0 0; color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child, .app-body .search__popout > .search__popout__menu__message:last-child { margin: 0 0 -10px; @@ -5123,32 +5872,38 @@ button { border-radius: 0 0 6px 6px; padding: 5px; } + .app-body .search__popout > .search__popout__menu__message:last-child { padding: 5px 15px 15px; color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) { color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) mark { color: var(--color-content-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .search { margin-bottom: 0; } + .app-body:not(.layout-multiple-columns) .explore__search-header { padding-top: 2px; } + .app-body:not(.layout-multiple-columns) .search__input { padding: 13px; } + .app-body:not(.layout-multiple-columns) .explore__search-header { padding: 10px 0; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) .explore__search-header { padding: 10px; } @@ -5158,10 +5913,12 @@ button { 0% { transform: scale(120%) translate(0, 0) rotate(0deg); } + 100% { transform: scale(200%) translate(100vw, 100vh) rotate(600deg); } } + .app-body:has(.search__input[value="Tangerine UI"])::after, .app-body:has(.search__input[value="tangerine ui"])::after { content: "\1F34A"; @@ -5187,21 +5944,26 @@ button { border: 0; margin: 10px 10px 5px; } + .app-body .dismissable-banner__message h1 { color: var(--color-content-fg); margin-bottom: 8px; } + .app-body .dismissable-banner__message, .app-body .dismissable-banner .dismissable-banner__action .icon-button { color: var(--color-accent-fg); font-weight: normal; } + .app-body .dismissable-banner .dismissable-banner__action .icon-button:hover { color: var(--color-accent); } + .app-body .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: var(--color-content-bg); margin: 0; @@ -5213,20 +5975,25 @@ button { border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__action .icon-button { color: var(--color-accent); } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__message { color: var(--color-content-fg); } + .app-body .dismissable-banner__background-image { display: none; } + .app-body .dismissable-banner__message__actions .button, .app-body .dismissable-banner__message__actions .button.button-tertiary { line-height: 1.75; padding: 6px 17px; } + .app-body .dismissable-banner__message__actions { gap: 5px; } @@ -5245,10 +6012,11 @@ button { .app-body .attachment-list__list a { color: var(--color-content-fg-muted); } + .app-body .notification.unread::before, .app-body .status__wrapper.unread::before, -.app-body .notification-group--unread:before, -.app-body .notification-ungrouped--unread:before { +.app-body .notification-group--unread::before, +.app-body .notification-ungrouped--unread::before { background-color: var(--color-accent); width: 8px; border: 0; @@ -5259,25 +6027,30 @@ button { left: 5px; z-index: 2; } + .app-body .notification__message { padding: 12px 12px 5px; background-color: var(--color-post-bg); color: var(--color-content-fg-bold); transition: all .3s; } + .app-body .notification__display-name { font-weight: bold; color: var(--color-content-fg); } + .app-body .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } + .app-body .notification__report__details { color: var(--color-content-fg); } + .app-body .notification__message .icon { color: var(--color-accent); width: 18px; @@ -5285,14 +6058,16 @@ button { text-align: right; background-position: center right; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .notification__message .icon { margin-left: 34px; } } + .app-body .notification .status__wrapper { padding-top: 0; } + .app-body :is( .notification-favourite, @@ -5303,6 +6078,7 @@ button { .status__action-bar { display: none; } + .app-body .account, .app-body .notification-request { background-color: var(--color-content-bg); @@ -5310,18 +6086,22 @@ button { padding-left: 22px; padding-top: 12px; } + .app-body .notification .account { border-bottom: 0; } + .app-body .explore__search-results .account { padding-top: 16px; } + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name__account { display: block; } + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) @@ -5329,51 +6109,59 @@ button { margin-bottom: 0; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 32px; padding-right: 22px; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 27px; } } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .account { padding-left: 18px; } } + .app-body .notification .account__relationship .icon-button { padding: 5px; border-radius: 8px; transition: background-color .2s; } + .app-body .notification .account__relationship .icon-button:first-child { background-color: var(--color-confirm-bg); } + .app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { background-color: var(--color-confirm); } + .app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .notification .account__relationship .icon-button:last-child { background-color: var(--color-reject-bg); } + .app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { background-color: var(--color-reject); } + .app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .notification-list { bottom: calc(5rem + var(--safe-area-bottom)); } } + .app-body .notification-bar { background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%); color: var(--color-content-fg); @@ -5382,9 +6170,11 @@ button { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } + .app-body .notification-bar-action { transition: all .2s; } + .app-body .notification-bar-action:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); @@ -5395,19 +6185,24 @@ button { .app-body .app-form__toggle__label .hint { color: var(--color-content-fg-bold); } + .app-body .column-header__setting-btn { font-weight: 600; } + .app-body .column-settings h3 { margin-bottom: 12px; font-weight: 500; } + .app-body .column-settings section { border-color: var(--color-lines); } + .app-body .column-settings section:not(:first-child) { padding-bottom: 25px; } + .app-body .app-form__toggle__label .hint { opacity: .5; } @@ -5419,6 +6214,7 @@ button { position: relative; padding: 25px; } + .app-body .filtered-notifications-banner::before { position: absolute; display: block; @@ -5431,21 +6227,26 @@ button { border-radius: 8px; transition: all .2s; } + .app-body .filtered-notifications-banner:is(:active, :hover, :focus)::before { background-color: color-mix(in srgb, var(--color-accent), transparent 88%); } + .app-body .filtered-notifications-banner:hover::before { left: 6px; right: 6px; top: 8px; bottom: 8px; } + .app-body .filtered-notifications-banner:active::before { transform: scale(.98); } + .app-body .filtered-notifications-banner > * { z-index: 1; } + .app-body .filtered-notifications-banner .filtered-notifications-banner__badge, .app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge, .app-body .notification-request__name .filtered-notifications-banner__badge, @@ -5454,41 +6255,50 @@ button { color: var(--color-accent-fg); border-radius: 50px; } + .app-body .notification-request .account__avatar__counter { width: 19px; height: 19px; box-sizing: border-box; } + .app-body .filtered-notifications-banner__badge__badge { background-color: var(--color-content-bg); color: var(--color-content-fg); font-weight: 600; } + .app-body .filtered-notifications-banner__text { color: var(--color-content-fg); } + .app-body .filtered-notifications-banner__text strong { font-weight: 600; } + .app-body .filtered-notifications-banner .notification-group__icon { justify-content: center; } + .app-body .notification-request__name__display-name, .app-body .notification-request__name { color: var(--color-content-fg); letter-spacing: unset; } + .app-body .notification-request { padding-top: 15px; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .notification-request { margin-top: 60px; } } + .app-body .notification-group { padding: 16px 23px; } + .app-body .notification-group, .app-body .notification-ungrouped { border: none; @@ -5507,13 +6317,16 @@ button { content: " "; opacity: .7; } + .app-body .notification-ungrouped { padding: 0; } + .app-body .notification-ungrouped :is(.status__avatar, .account__avatar) { height: 46px !important; width: 46px !important; } + .app-body .notification-ungrouped :is( .attachment-list, @@ -5530,6 +6343,7 @@ button { margin-left: 0; width: 100%; } + .app-body .notification-ungrouped__header { margin-bottom: -6px; padding-top: 16px; @@ -5540,25 +6354,31 @@ button { background-color: var(--color-post-bg); transition: background .3s; } + .app-body .notification-ungrouped--direct .notification-ungrouped__header { background-color: var(--color-post-bg); transition: background .3s; } + .app-body .notification-ungrouped--mention:not(.notification-ungrouped--direct) .notification-ungrouped__header { display: none; } + .app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) { width: 46px; height: 28px; justify-content: end; } + .app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) svg { width: 22px; height: 22px; } + .app-body .notification-ungrouped .status::before { display: none; } + .app-body .notification-group__main__status { border: 0; background-color: var(--color-content-secondary-bg); @@ -5567,12 +6387,15 @@ button { background .3s, transform .3s; } + .app-body .notification-group__main__status:hover { background-color: color-mix(in srgb, var(--color-accent), transparent 88%); } + .app-body .notification-group__main__status:active { transform: scale(.98); } + .app-body :is( .notification-group__main__header__label, @@ -5586,19 +6409,24 @@ button { color: var(--color-content-fg); font-weight: 700; } + .app-body .notification-group__main__header__label { color: var(--color-content-fg); justify-content: space-between; } + .app-body .notification-group__main__header__label time { color: var(--color-content-fg-muted); } + .app-body .notification-group__embedded-status__account { color: var(--color-content-fg); } + .app-body .notification-group__main__additional-content { color: var(--color-fg-muted); } + .app-body .notification-group__embedded-status .account__avatar { opacity: 1; } @@ -5610,51 +6438,60 @@ button { border: 1px solid var(--color-lines); border-bottom: 0; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .column-inline-form { border-left: 0; border-right: 0; } } + .app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; border: 1px solid var(--color-lines); } + .app-body .column-inline-form label input:focus { border-color: var(--color-accent); } + .app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); color: var(--color-fg); } + .app-body .item-list .column-subheading { color: var(--color-fg-muted); border-top: 0; border-bottom: 0; } + .app-body .getting-started .column-subheading { color: var(--color-fg-muted); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .item-list .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } + .app-body .list-editor { background-color: var(--color-content-bg); } + .app-body .list-editor .drawer__inner { background-color: var(--color-content-bg); border-radius: 0; } + .app-body .list-editor__search { margin: 10px; background-color: var(--color-content-bg); } + .app-body .list-editor .column-inline-form { background-color: var(--color-content-secondary-bg); border-top: 0; @@ -5662,17 +6499,21 @@ button { border-left: 0; border-color: var(--color-lines); } + .app-body .list-editor .column-inline-form .icon-button { color: var(--color-accent); } + .app-body .list-editor .column-inline-form .icon-button.disabled { opacity: .5; pointer-events: none; } + .app-body .list-editor .account { border-right: 0 !important; border-left: 0 !important; } + .app-body .list-editor .setting-text { width: 100%; background-color: var(--color-accent-bg); @@ -5680,6 +6521,7 @@ button { border-radius: 8px; color: var(--color-content-fg); } + .app-body .list-editor .setting-text:is(:active, :focus) { border-color: var(--color-accent); background-color: var(--color-content-bg); @@ -5693,18 +6535,21 @@ button { color: var(--color-content-fg); box-sizing: border-box; } + .app-body .item-list .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } + .app-body .item-list article:last-child .column-link { border-bottom: 0; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .item-list .column-link { border-left: 0; border-right: 0; } + .app-body .item-list article:last-child .column-link { border-radius: 0; } @@ -5715,28 +6560,35 @@ button { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .list-adder__account { margin-top: 12px; } + .app-body .list-adder .column-inline-form { border-radius: 0; } + .app-body .list-adder .list { border-bottom: 2px solid var(--color-content-secondary-separator); } + .app-body .list-editor .drawer__pager { border: none; border-radius: 0; } + .app-body .list-editor .account__relationship .icon-button { border-color: var(--color-accent); color: var(--color-accent); } + .app-body .list-editor .search .search__input { border-top: 1px solid; border-bottom: 1px solid; border-color: var(--color-accent-lines); } + .app-body .list-editor .search .search__input:focus { border-color: var(--color-accent); } @@ -5746,28 +6598,35 @@ button { margin-bottom: 0; z-index: 0; } + .app-body .account-authorize__wrapper { margin: 0; border-bottom: 1px solid var(--color-lines); } + .app-body .account-authorize { background-color: var(--color-content-bg); padding: 20px } + .app-body .account--panel { background-color: var(--color-content-bg); border: 0; padding: 0 5px; } + .app-body .account__header__content { color: var(--color-content-fg); } + .app-body .account--panel__button { - padding: 0 5px 12px 5px; + padding: 0 5px 12px; } + .app-body .account--panel__button .icon-button { width: 100%; } + .app-body .account--panel__button .icon-button, .app-body .notification-request__actions .icon-button { padding: 10px; @@ -5776,39 +6635,47 @@ button { transition: all .3s; border: 0; } + .app-body .account--panel button .icon-check { background-image: var(--icon-check); } + .app-body .account--panel button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .account--panel__button:first-child .icon-button, .app-body .notification-request__actions .icon-button:last-child { background-color: var(--color-confirm-bg); color: var(--color-confirm-fg); } + .app-body .account--panel__button:first-child .icon-button:is(:hover, :active), .app-body .notification-request__actions .icon-button:last-child:is(:hover, :active) { background-color: var(--color-confirm); color: var(--color-accent-fg); } + .app-body .account--panel button .icon-times { background-image: var(--icon-reject); } + .app-body .account--panel button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } + .app-body .account--panel__button:nth-child(2) .icon-button, .app-body .notification-request__actions .icon-button:first-child { background-color: var(--color-reject-bg); color: var(--color-reject); } + .app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active), .app-body .notification-request__actions .icon-button:first-child:is(:hover, :active) { background-color: var(--color-reject); color: var(--color-accent-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; @@ -5825,58 +6692,73 @@ button { border-bottom: 1px solid var(--color-lines); position: relative; } + .app-body .inline-follow-suggestions__header h3 { font-weight: bold; color: var(--color-content-fg); } + .app-body .inline-follow-suggestions__body__scrollable { scroll-padding: 60px; } + .app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar { height: 5px; } + .app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar-thumb { opacity: 1; border-radius: 0; } + .app-body .inline-follow-suggestions__body__scrollable__card { border-radius: 8px; background-color: var(--color-content-secondary-bg); border: 0; } + .app-body .inline-follow-suggestions__body__scrollable__card :is(.display-name__html, .display-name__account), .app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source { color: var(--color-content-fg); } + .app-body .inline-follow-suggestions__body__scrollable__card .display-name__account { opacity: .6; } + .app-body .inline-follow-suggestions__body__scrollable__card .verified-badge { color: var(--color-accent); } + .app-body .inline-follow-suggestions__body__scrollable__card button:active { transform: scale(.95); } + .app-body .inline-follow-suggestions__body__scroll-button__icon { background-color: var(--color-accent); border-radius: 8px; padding: 6px; transition: all .3s; } + .app-body .inline-follow-suggestions__body__scroll-button { opacity: 1; } + .app-body .inline-follow-suggestions__body__scroll-button:is(:active) .inline-follow-suggestions__body__scroll-button__icon { transform: scale(.9); } + .app-body .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) .inline-follow-suggestions__body__scroll-button__icon { background-color: var(--color-accent-focus); } + .app-body .inline-follow-suggestions__body__scroll-button.left { background: linear-gradient(to right, var(--color-content-bg), transparent); margin-left: -15px; padding-left: 21px; } + .app-body .inline-follow-suggestions__body__scroll-button.right { background: linear-gradient(to left, var(--color-content-bg), transparent); margin-right: -15px; @@ -5887,13 +6769,14 @@ button { border-radius: 50px; background-color: var(--color-content-bg); border: 3px solid var(--color-content-bg); - box-shadow: 0 2px 5px rgba(0, 0, 0, .1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 10%); transform: translateY(3px); } .app-body .inline-follow-suggestions .button:is(.button-secondary, .button-tertiary) { padding: 7px 18px; } + .app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source .icon { width: 17px; height: 17px; @@ -5904,18 +6787,21 @@ button { .app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; } + .app-body .button, .app-body .button.logo-button, -.app-body .rules-list li:before, +.app-body .rules-list li::before, .app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); transition: all .2s; } + .app-body .button:disabled, .app-body .button.disabled { opacity: .7; } + .app-body .text-icon-button.active, .app-body .button.button-tertiary, .app-body .account__header__fields a, @@ -5944,38 +6830,47 @@ button { .app-body .notification-bar-action { color: var(--color-accent); } + .app-body .icon-button, .app-body .icon-button.inverted { color: var(--color-content-fg); } + .app-body .account__header__tabs__buttons .icon-button { padding: 6px; border: 0; color: var(--color-content-fg); background-color: var(--color-content-secondary-bg); } + .app-body .account__header__tabs__buttons .icon-button:hover { background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .account__header__tabs__buttons .icon-button:has(.icon-ellipsis-v, .icon-close).active { background-color: var(--color-accent); } + .app-body .icon-button { border-radius: 8px; transition: all .2s; } + .app-body .icon-button:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .account__header__tabs__buttons .icon-button.active .icon-bell { animation: bell-ring .4s ease-in 1; transform-origin: top center; } + .app-body .account__header__tabs__buttons .icon-button.active:has(.icon-bell):is(:active, :focus) { background-color: var(--color-content-secondary-bg); } + .app-body .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; @@ -5983,40 +6878,49 @@ button { box-shadow: var(--dropdown-shadow); padding: 0; } + .app-body .language-dropdown__dropdown__results__item { border-radius: 8px; } + .app-body .language-dropdown__dropdown__results__item.active, .app-body .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .app-body .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } + .app-body .language-dropdown__dropdown__results__item__common-name { opacity: .7; } + .app-body :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-content-fg); } + .app-body .language-dropdown__dropdown__results__item:is(.active, .active:hover) :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-accent-fg); } + .app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) :is(.language-dropdown__dropdown__results__item__native-name, .language-dropdown__dropdown__results__item__common-name) { color: var(--color-accent); } + .app-body .button:not(.button-secondary):is(:active, :hover), .app-body .button.button-tertiary:is(:active, :hover), .app-body .button.logo-button:is(:active, :hover) { @@ -6026,26 +6930,32 @@ button { .app-body .react-toggle { transition: transform .3s; } + .app-body .react-toggle:active { transform: scale(.9); } + .app-body .react-toggle-track, .app-body .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-fg-muted); transition: all .2s; } + .app-body .react-toggle-thumb { border: 0; background-color: #ffffff; } + .app-body .react-toggle.react-toggle--checked .react-toggle-track, .app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, .app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent); } + .app-body .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } + .app-body .react-toggle--focus { outline: 0; } @@ -6053,6 +6963,7 @@ button { .app-body .radio-button { color: var(--color-content-fg); } + .app-body .radio-button__input, .app-body .poll__input, .app-body .check-box__input { @@ -6065,23 +6976,28 @@ button { width: 20px; height: 20px; } + .app-body .radio-button:active .radio-button__input, .app-body .poll__option:active .poll__input, .app-body .check-box:active .check-box__input { transform: scale(.9); } + .app-body .radio-button__input.checked, .app-body .poll__input.active { background-color: var(--color-accent); } -.app-body .check-box__input.checked:before, -.app-body .radio-button__input.checked:before { + +.app-body .check-box__input.checked::before, +.app-body .radio-button__input.checked::before { display: none; } + .app-body .check-box__input.checked, .app-body .radio-button__input.checked { background-color: var(--color-accent); } + .app-body .check-box__input.checked .icon-check { transform: scale(.5); } @@ -6090,6 +7006,7 @@ button { border: 1px solid var(--color-lines); border-radius: 8px; } + .app-body .dropdown-menu, .app-body .dropdown-menu__container__header, .app-body .dropdown-menu__item.edited-timestamp__history__item, @@ -6100,16 +7017,18 @@ button { } .app-body .dropdown-menu__item a, -.app-body .dropdown-menu__arrow:before { +.app-body .dropdown-menu__arrow::before { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; } + .app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { background: var(--color-accent); color: var(--color-accent-fg); outline: 0; } + .app-body .dropdown-menu__separator { border-color: var(--color-content-secondary-separator); } @@ -6125,6 +7044,7 @@ button { box-shadow: var(--dropdown-shadow); padding: 8px; } + .app-body .privacy-dropdown :is(.privacy-dropdown__value, .privacy-dropdown__value), .app-body .privacy-dropdown__option { background-color: var(--color-content-bg); @@ -6132,19 +7052,23 @@ button { border-radius: 6px; margin-bottom: 2px; } + .app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), .app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .privacy-dropdown.active .privacy-dropdown__value:has(.text-icon-button.active) { border-radius: 6px 6px 0 0; } + .app-body .privacy-dropdown__option .privacy-dropdown__option__content, .app-body .privacy-dropdown__option .privacy-dropdown__option__content strong { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .privacy-dropdown__option.active .privacy-dropdown__option__content, .app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content, @@ -6154,21 +7078,27 @@ button { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { background-image: var(--icon-globe-visibility-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { background-image: var(--icon-unlock-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { background-image: var(--icon-lock-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } + .app-body .privacy-dropdown__option .icon-info-circle path { fill: var(--color-content-fg); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-info-circle path { fill: var(--color-accent-fg); } @@ -6180,18 +7110,22 @@ button { .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } + .app-body .button.button-tertiary.button--confirmation { color: #4e8a6b; - background-color: rgba(121, 189, 154, 0.3); + background-color: rgba(121, 189, 154, 30%); } + .app-body .button.button-tertiary.button--destructive { color: #df405a; - background-color: rgba(223, 64, 90, 0.3); + background-color: rgba(223, 64, 90, 30%); } + .app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { background-color: #79bd9a; color: #ffffff; } + .app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { background-color: #df405a; color: #ffffff; @@ -6200,10 +7134,12 @@ button { .app-body .button.button-tertiary.button--confirmation { color: #72cb9d; } + .app-body .button.button-tertiary.button--destructive { color: #f3637b; } } + .app-body :is( .block-modal__cancel-button, @@ -6214,6 +7150,7 @@ button { background-color: color-mix(in srgb, var(--color-accent), transparent 90%); color: var(--color-accent); } + .app-body :is( .block-modal__cancel-button, @@ -6224,6 +7161,7 @@ button { background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important; color: var(--color-accent); } + .app-body :is( .block-modal__cancel-button, @@ -6240,6 +7178,7 @@ button { + button:active { transform: scale(.95); } + .app-body .status__content a.hashtag { color: var(--color-accent); } @@ -6252,110 +7191,138 @@ button { border: 0; outline: 1px solid var(--color-lines-translucent); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .modal-root__modal:not(.media-modal) { margin-top: unset; } } + .app-body .compare-history-modal { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .compare-history-modal .report-modal__target { border-color: var(--color-lines); } + .app-body .safety-action-modal { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); border-radius: 8px; } + .app-body .safety-action-modal__confirmation, .app-body .safety-action-modal__confirmation strong, .app-body .safety-action-modal__confirmation h1 { color: var(--color-content-fg); } + .app-body .safety-action-modal__header__icon { background-color: var(--color-accent); } + .app-body .safety-action-modal__header, .app-body .safety-action-modal__header h1, .app-body .safety-action-modal__caveats, .app-body .safety-action-modal__bullet-points { color: var(--color-content-fg); } + .app-body :is(.safety-action-modal__header, .safety-action-modal__confirmation) h1 { font-weight: 600; } + .app-body .safety-action-modal__confirmation h1 { font-size: 150%; padding-top: 20px; } + .app-body .safety-action-modal__header h1 + div { opacity: .6; } + .app-body .safety-action-modal__top { background-color: transparent; border: 0; } + .app-body .safety-action-modal__bottom { background-color: var(--color-content-secondary-bg); padding-top: 24px; border: 0; border-radius: 0 0 8px 8px; } + .app-body .safety-action-modal__bullet-points__icon .icon { transform: scale(1.3); } + .app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-megaphone); } + .app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-eye-shut); } + .app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-direct-messages); } + .app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-reply); transform: scale(1); } + .app-body .safety-action-modal__field-group label { color: var(--color-content-fg); } + .app-body .report-modal { background-color: var(--color-content-bg); } + .app-body .actions-modal { background-color: var(--color-content-bg); } + .app-body .interaction-modal { background-color: var(--color-content-bg); border-radius: 10px; box-shadow: var(--dropdown-shadow); } + .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { color: var(--color-content-fg); } + .app-body .interaction-modal__lead p, .app-body .interaction-modal__choices__choice p { color: var(--color-fg); } + .app-body .interaction-modal__icon { transform: scale(1.4) translateX(-2px); } + .app-body .interaction-modal :is(p, strong) { color: var(--color-content-fg); } + .app-body .interaction-modal p.hint { color: var(--color-content-fg-muted); } + .app-body .interaction-modal :is(.button, .button.button-tertiary) { padding: 10px 18px; } + .app-body .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } + .app-body .copypaste input, .app-body .interaction-modal__login__input { border-color: var(--color-lines); @@ -6365,26 +7332,32 @@ button { outline: 0 solid var(--color-accent-bg); transition: all .2s; } + .app-body .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .interaction-modal__login__input input::placeholder { color: var(--color-content-fg-muted); } + .app-body .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); outline: 3px solid var(--color-accent-bg); } + .app-body .interaction-modal__login .search__popout { border-color: var(--color-lines); } + .app-body .interaction-modal .copypaste button { padding: 8px 18px; } + .app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, @@ -6392,21 +7365,25 @@ button { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .boost-modal__container { margin-bottom: -11px; } + .app-body .confirmation-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .block-modal__action-bar, .app-body .boost-modal__action-bar, .app-body .confirmation-modal__action-bar, .app-body .mute-modal__action-bar { background-color: var(--color-accent-bg); } + .app-body .block-modal__action-bar > div, .app-body .boost-modal__action-bar > div, .app-body .confirmation-modal__action-bar > div, @@ -6418,9 +7395,11 @@ button { .app-body .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } + .app-body .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } + .app-body .actions-modal ul li:not(:empty) a:is(.active, .active button, @@ -6439,14 +7418,16 @@ a:is(.active, .app-body .modal-root__overlay:has(+ div > .media-modal) { background-color: #030303 !important; } + .app-body .modal-root__overlay { - background-color: rgb(0, 0, 0, .4); + background-color: rgb(0, 0, 0, 40%); } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: rgb(0, 0, 0, .9); + background-color: rgb(0, 0, 0, 90%); } } + .app-body .media-modal__buttons .icon-button, .app-body .media-modal__nav { background-color: #1e1e1e; @@ -6460,26 +7441,31 @@ a:is(.active, transition: .2s all; } + .app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover), .app-body .media-modal__nav:is(:active, :focus, :hover) { background-color: #343434; color: #ffffff; } + .app-body .media-modal__close { top: 24px; left: 24px; } + .app-body .media-modal__zoom-button { top: 24px; right: 24px; } + .app-body .media-modal__nav--left { left: 24px; } + .app-body .media-modal__nav--right { right: 24px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .media-modal__nav { display: none; } @@ -6488,19 +7474,24 @@ a:is(.active, .app-body .media-modal__overlay .picture-in-picture__footer { display: none; } + .app-body .media-modal__overlay .picture-in-picture__footer .icon-button > svg { width: 25px; height: 25px; } + .app-body .media-modal__overlay .picture-in-picture__footer .icon-button:is(:active, :hover, :focus) { background-color: transparent !important; } + .app-body .picture-in-picture__footer .animated-number { color: var(--color-accent); } + .app-body .media-modal__page-dot { background-color: #858585; } + .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -6515,9 +7506,11 @@ a:is(.active, .app-body .report-dialog-modal__lead { color: var(--color-content-fg-muted); } + .app-body .report-dialog-modal { background-color: var(--color-content-bg); } + .app-body .report-dialog-modal .dialog-option, .app-body .report-dialog-modal .poll__option.dialog-option:last-child { border-top: 1px solid var(--color-lines); @@ -6529,6 +7522,7 @@ a:is(.active, border-radius: 8px; transition: all .2s; } + .app-body .report-dialog-modal .dialog-option:hover, .app-body .report-dialog-modal .poll__option.dialog-option:hover, .app-body .report-dialog-modal .dialog-option:has(.poll__input.active) { @@ -6542,12 +7536,15 @@ a:is(.active, .app-body .report-dialog-modal__textarea:focus { border-color: var(--color-accent); } + .app-body .report-dialog-modal .dialog-option .poll__input.active { background-color: var(--color-accent); } + .app-body .report-dialog-modal .dialog-option .poll__input svg { display: none; } + .app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text, .app-body .report-dialog-modal .dialog-option time, .app-body .report-dialog-modal .status__content > p:first-child:has(.status__content__spoiler-link) > span, @@ -6559,36 +7556,44 @@ a:is(.active, .app-body .report-modal__target { color: var(--color-content-fg); } + .app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { color: var(--color-content-fg-bold) } + .app-body .report-modal__comment, .app-body .report-modal__container, .app-body .report-dialog-modal__container { border-color: var(--color-lines); } + .app-body .report-modal__comment { color: var(--color-content-fg-muted); } + .app-body #upload-modal__description { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } + .app-body #upload-modal__description:focus { border-color: var(--color-accent); } + .app-body .setting-text__wrapper { background-color: var(--color-content-bg); border: 0; } + .app-body .report-dialog-modal__textarea { background-color: var(--color-secondary-bg); border: 1px solid var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } + .app-body .report-dialog-modal__textarea::placeholder { color: var(--color-content-fg); opacity: .5; @@ -6599,25 +7604,30 @@ a:is(.active, /* 🖼️ Picture in Picture */ .app-body .picture-in-picture { z-index: 3; - box-shadow: 0 0 5px rgba(0, 0, 0, .2); + box-shadow: 0 0 5px rgba(0, 0, 0, 20%); border-radius: 8px; border: 1px solid var(--color-lines); } + .app-body .picture-in-picture__header { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .app-body .picture-in-picture__footer { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .picture-in-picture .video-player { border: 0; } + .app-body .picture-in-picture__footer, .app-body .picture-in-picture__header { background-color: var(--color-content-bg); } + .app-body .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } @@ -6647,10 +7657,12 @@ a:is(.active, flex-flow: column; padding: 20px 0 0; } + .app-body .link-footer p, .app-body .link-footer a { color: var(--color-fg-muted); } + .app-body .link-footer::after { content: var(--meta); color: var(--color-fg-muted); @@ -6661,9 +7673,11 @@ a:is(.active, .app-body .server-banner__introduction { display: none; } + .app-body .server-banner { padding: 0 0 20px; } + .app-body .server-banner__hero { border-radius: 8px 8px 0 0; margin-bottom: 0; @@ -6672,14 +7686,16 @@ a:is(.active, background-color: var(--color-content-bg); box-sizing: border-box; } + .app-body .server-banner__description { - padding: 20px 15px 20px; + padding: 20px 15px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); color: var(--color-content-fg); } + .app-body .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); @@ -6691,17 +7707,21 @@ a:is(.active, border-radius: 0 0 8px 8px; align-items: end; } + .app-body .server-banner h4 { color: var(--color-fg); font-size: 80%; } + .app-body .server-banner__number { color: var(--color-content-fg); font-size: 15px; } + .app-body .server-banner__number-label { color: var(--color-content-fg); } + .app-body .server-banner .account { background-color: transparent; box-shadow: none; @@ -6710,78 +7730,96 @@ a:is(.active, border-right: 0; border-bottom: 0; } + .app-body .server-banner .account .display-name__account { opacity: .7; } + .app-body .server-banner__meta__column:first-child { width: calc(60% - 5px); } + .app-body .server-banner__meta__column:nth-child(2) { width: calc(40% - 5px); } + .app-body .server-banner .button.button-secondary { padding: 10px; margin: 10px 0; } + .app-body .button.button-secondary, .app-body .button.button-tertiary { border: 0; background-color: color-mix(in srgb, var(--color-accent), transparent 82%); color: var(--color-accent); } + .app-body .hover-card .button:not(.button--destructive) { background-color: var(--color-accent); color: var(--color-accent-fg); line-height: 1.375; padding: 10px 18px; } + .app-body .hover-card .button:not(.button--destructive):hover { background-color: var(--color-accent-focus); } + .app-body .button:is(.button-secondary, .button-tertiary):hover { background-color: color-mix(in srgb, var(--color-accent), transparent 70%); } + .app-body .button.button--destructive:is(:active, :hover, :focus) { background-color: var(--color-reject); color: var(--color-accent-fg); } + .app-body .sign-in-banner .button, .app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } + .app-body .sign-in-banner .button:active, .app-body .button:is(.button-secondary, .button-tertiary):active { transform: scale(.95); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .button.button-tertiary { padding: 7px 18px; } } + .app-body .sign-in-banner { padding: 10px; } + .app-body .navigation-panel__sign-in-banner hr { display: block; border-color: var(--color-lines-translucent); margin: 12px 15px; opacity: .5; } + .app-body .sign-in-banner p { color: var(--color-fg-muted); padding: 0 5px 5px; } + .app-body .sign-in-banner p strong { color: var(--color-fg); font-weight: 500; } + .app-body .sign-in-banner p:nth-child(2) { font-size: 85%; line-height: 1.325; } + .app-body .sign-in-banner p { margin-bottom: 25px; } + .app-body .sign-in-banner p:first-child { margin-bottom: 5px; } @@ -6793,16 +7831,20 @@ a:is(.active, .app-body .column-list { background-color: var(--color-content-bg); } + .app-body .column-title .logo { display: none; } + .app-body .column-title h3, .app-body .column-title p { color: var(--color-content-fg); } + .app-body .column-list { border: 0; } + .app-body .account__note { color: var(--color-content-fg-muted); } @@ -6813,36 +7855,44 @@ a:is(.active, margin-bottom: 8px; transition: all .2s; } + .app-body .onboarding__steps__item:is(:active, :focus, :hover), .app-body .onboarding__link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .app-body .onboarding__steps__item__icon, .app-body .onboarding__link { color: var(--color-accent); } + .app-body .onboarding__steps__item__description h6, .app-body .onboarding__steps__item__description p, .app-body .onboarding__lead, .app-body .onboarding__lead strong { color: var(--color-content-fg); } + .app-body .onboarding__steps__item__go svg path, .app-body .onboarding__link svg path { fill: var(--color-accent); } + .app-body .app-form__avatar-input, .app-body .app-form__header-input { background-color: var(--color-accent-bg); transition: all .2s; } + .app-body .app-form__avatar-input:hover, .app-body .app-form__header-input:hover { background-color: color-mix(in srgb, var(--color-accent), transparent 75%); } + .app-body .app-form__header-input { border-top: 1px solid var(--color-lines); } + .app-body .app-form__header-input .icon { background-image: var(--icon-paperclip); transform: scale(1.4) translateX(-50%) translateY(-25%); @@ -6850,39 +7900,46 @@ a:is(.active, inset-inline-start: 50%; top: 50%; } + .app-body .onboarding__profile .app-form__avatar-input { border-color: var(--color-content-bg); border-radius: 50%; border-width: 5px; } + .app-body .onboarding__profile .app-form__avatar-input img { border-radius: 50%; background: var(--color-content-secondary-bg); } + .app-body .onboarding__profile .app-form__header-input img { background: var(--color-accent-bg); } + .app-body .simple_form .input.with_block_label > label, .app-body .simple_form .input.with_block_label .hint, .app-body .app-form__toggle__label strong, .app-body .simple_form .hint { color: var(--color-fg); } + .app-body .app-form__toggle__toggle > div { border-color: var(--color-lines); } + .app-form__avatar-input.selected .icon, .app-form__header-input.selected .icon { color: var(--color-accent); } + .app-body .simple_form :is( - input[type=datetime-local], - input[type=email], - input[type=number], - input[type=password], - input[type=text], - input[type=url], + input[type="datetime-local"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="text"], + input[type="url"], textarea ) { background-color: var(--color-content-secondary-bg); @@ -6890,41 +7947,49 @@ a:is(.active, border-radius: 8px; color: var(--color-content-fg); } + .app-body .simple_form :is( - input[type=datetime-local], - input[type=email], - input[type=number], - input[type=password], - input[type=text], - input[type=url], + input[type="datetime-local"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="text"], + input[type="url"], textarea ):is(:active, :focus) { border-color: var(--color-accent); } + .app-body .column-title { margin: -20px -20px 30px; padding: 50px 40px 40px; } + .app-body .column-title:not(:has(.onboarding__illustration)) { background-color: var(--color-content-secondary-bg); } + .app-body .column-title:has(+ .simple_form) { margin-bottom: 0; background-color: var(--color-content-secondary-bg); } + .app-body .follow-recommendations { background-color: var(--color-content-bg); } + .app-body .follow-recommendations .account { border-left: 0; border-right: 0; margin-bottom: 15px; } + .app-body .follow-recommendations .account__note { color: var(--color-content-fg); opacity: .7; } + .app-body .follow-recommendations .account__note p { overflow: hidden; } @@ -6934,10 +7999,12 @@ a:is(.active, border-color: var(--color-accent-lines); color: var(--color-content-fg); } + .app-body .copy-paste-text:is(:focus, :active), .app-body .tip-carousel:focus { border-color: var(--color-accent); } + .app-body .copy-paste-text:has(textarea:focus) { border-color: var(--color-accent); } @@ -6948,6 +8015,7 @@ a:is(.active, background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); } + .app-body .announcements { overflow: visible; z-index: 0; @@ -6956,55 +8024,68 @@ a:is(.active, border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } + .app-body .announcements__item__unread { color: var(--color-accent); background-color: var(--color-accent); } + .app-body .announcements__pagination, .app-body .announcements__pagination .icon-button { color: var(--color-content-fg); } + .app-body .announcements__pagination > * { vertical-align: middle; } + .app-body .reactions-bar__item { background-color: var(--color-accent-bg); border-radius: 8px; padding: 2px 8px; } + .app-body .reactions-bar .emoji-picker-dropdown .icon-button { padding: 3px; } + .app-body .reactions-bar__item:is(:active, :hover, :focus) { background-color: var(--color-content-bg); } + .app-body .reactions-bar__item.active, .app-body .reactions-bar .emoji-picker-dropdown .icon-button.active.inverted { background-color: var(--color-accent); } + .app-body .reactions-bar__item__count, .app-body .reactions-bar__item__count .animated-number { color: var(--color-accent); } + .app-body .reactions-bar__item:is(:active, :hover, :focus) .reactions-bar__item__count .animated-number { color: var(--color-content-fg); } + .app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number { color: var(--color-accent-fg); } + .app-body .reactions-bar .emoji-button, .app-body .announcements__item__content a.unhandled-link, .app-body .announcements__item__content a { color: var(--color-accent); } + .app-body .announcements .emoji-button { margin: 0; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .announcements { box-shadow: none; margin-top: 1px; @@ -7013,6 +8094,7 @@ a:is(.active, margin-inline-start: -45px; margin-inline-end: -55px; } + .app-body .announcements__mastodon { border-radius: 0; } @@ -7026,17 +8108,20 @@ a:is(.active, background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .error-column__message h1, .app-body .error-column__message { color: var(--color-content-fg); } + .app-body .error-column__image { margin-top: 0; } + .app-body .regeneration-indicator { background-color: var(--color-content-bg); } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .regeneration-indicator { padding-top: 50px; padding-bottom: 40px; @@ -7056,89 +8141,108 @@ a:is(.active, padding-bottom: 20px; z-index: 1; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .scrollable.about { border-left: 0; border-right: 0; } } + .app-body .about__header { order: 1; margin-bottom: 5px; } + .app-body .about__section:nth-child(3) { order: 3; } + .app-body .about__section:nth-child(2) { order: 2; } + .app-body .about__section:nth-child(4) { order: 4; } + .app-body .about__section:nth-child(5) { order: 5; } + .app-body .about .link-footer { order: 6; } + .app-body .about__footer { order: 7; } + .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(2) > div.about__section__title { display: none; } + .app-body .about__header p, .app-body .about__meta h4 { color: var(--color-fg); } + .app-body .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); border-radius: 0; background-color: var(--color-content-bg); } + .app-body .about__header__hero { margin-bottom: 10px; } + .app-body .about__meta { margin-top: 20px; margin-bottom: 0; } + .app-body .about__header > h1 { color: var(--color-content-fg); margin: 30px 0 0 20px; text-align: left; font-size: 24px; } + .app-body .about__header > h1 + p { color: var(--color-content-fg); opacity: .8; text-align: left; margin-left: 20px; + // margin-bottom: 15px; font-size: 14px; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .scrollable.about { border-radius: 8px 8px 0 0 !important; } + .app-body .about__header__hero { border-radius: 6px 6px 0 0; } } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body .scrollable.about { margin-top: 10px; } } + .app-body .about__mail { color: var(--color-content-fg); } + .app-body .about__meta h4 { font-size: 12px; font-weight: bold; margin-bottom: 8px; } + .app-body .about__meta .account { background: none; box-shadow: none; @@ -7146,18 +8250,21 @@ a:is(.active, border-left: 0; border-right: 0; } + .app-body .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); } -@media screen and (max-width:600px) { +@media screen and (width <=600px) { .app-body .about__meta__divider { border-top: 3px solid var(--color-content-secondary-separator); width: 90%; } } + .app-body .about__section:nth-child(3) .about__section__body { padding-bottom: 3em; } + .app-body .about__meta, .app-body .about__section__title { color: var(--color-accent); @@ -7165,9 +8272,11 @@ a:is(.active, border: 0; border-radius: 8px; } + .app-body .about__section.active .about__section__title { border-radius: 8px 8px 0 0; } + .app-body .about__section.active:not(:nth-of-type(2)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); @@ -7189,24 +8298,28 @@ a:is(.active, .app-body .about__domain-blocks__domain__type { color: var(--color-content-fg); } -.app-body .prose ul > li:before { + +.app-body .prose ul > li::before { background-color: var(--color-content-fg); opacity: .3; top: .55em; width: 7px; height: 7px; } + .app-body .about__section__body .prose hr { border-color: var(--color-content-secondary-separator); margin-top: 2em; margin-bottom: 2em; border-width: 3px; } + .app-body .hover-card__bio a, .app-body .hover-card .account-fields a { text-decoration: none; color: var(--color-accent); } + .app-body .about__section__body .prose a, .app-body .about__section__body .prose a:hover, .app-body .prose a strong, @@ -7217,10 +8330,12 @@ a:is(.active, text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body .about__section__body .prose a:hover :is(span, strong), .app-body .hover-card__bio a:hover { text-decoration-color: var(--color-accent); } + .app-body .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; @@ -7230,40 +8345,49 @@ a:is(.active, font-size: 80%; float: left; } + .about__section.active .about__section__title { background-color: var(--color-accent-bg); } + .app-body .rules-list__text, .app-body .rules-list__hint { color: var(--color-content-fg); } + .app-body .rules-list__text { font-weight: 600; } + .app-body .rules-list__hint { opacity: .7; padding-top: 4px; } + .app-body .rules-list li { border-bottom: 1px solid var(--color-lines); padding: 1em 1.75em 1em 3.4em; } + .app-body .rules-list li:last-child { border-bottom: 0; } + .about__domain-blocks { background-color: var(--color-content-bg); border: 0; } + .about__domain-blocks__domain { color: var(--color-content-fg); border-bottom: 0; } + .about__domain-blocks__domain:nth-child(2n) { background-color: var(--color-content-secondary-bg); } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .about :is(.link-footer, .about__footer) { display: none; } @@ -7290,7 +8414,7 @@ a:is(.active, padding-bottom: 20px; z-index: 1; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy { border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -7317,35 +8441,44 @@ a:is(.active, :root:has(.layout-multiple-columns) *::-webkit-scrollbar { width: 4px; } + :root:has(.layout-multiple-columns) *::-webkit-scrollbar-track { background-color: var(--color-accent-bg); } + :root:has(.layout-multiple-columns) *::-webkit-scrollbar-thumb { opacity: .8; } + .layout-multiple-columns .scrollable, .layout-multiple-columns .column > .scrollable { max-height: 100%; } + .layout-multiple-columns .column { width: 400px; padding-bottom: 0; } + .layout-multiple-columns .drawer__inner__mastodon { display: none; } + .layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) { background: transparent; } + .layout-multiple-columns .drawer__header { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); border-radius: 8px; margin-bottom: 0; } + .layout-multiple-columns .drawer .search { margin-top: 10px; } + .layout-multiple-columns .drawer__tab { transition: all .3s; border-radius: 6px; @@ -7355,30 +8488,39 @@ a:is(.active, box-sizing: border-box; border: 0; } + .layout-multiple-columns .drawer__tab .icon { transform: scale(1.2); } + .layout-multiple-columns .drawer__tab:active { transform: scale(.9); } + .layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .layout-multiple-columns .drawer__tab .icon-cog { background-image: var(--icon-gear); } + .layout-multiple-columns .drawer__tab .icon-globe { background-image: var(--icon-globe); } + .layout-multiple-columns .drawer__tab .icon-users { background-image: var(--icon-users); } + .layout-multiple-columns .drawer__tab .icon-bars { background-image: var(--logo); } + .layout-multiple-columns .drawer__tab .icon-sign-out { background-image: var(--icon-logout); } + .layout-multiple-columns .column-header__icon.icon-bars { background-image: var(--icon-globe-active); } @@ -7390,29 +8532,35 @@ a:is(.active, .layout-multiple-columns .getting-started .column-subheading { background-color: var(--color-bg); } + .layout-multiple-columns .scrollable.getting-started { border-left: 0; border-right: 0; background-color: var(--color-bg); } + .layout-multiple-columns .getting-started__wrapper { padding-bottom: 10px; border-radius: 0 0 8px 8px; } + .layout-multiple-columns .getting-started .column-link { color: var(--color-content-fg); margin: 0 5px 2px; border-radius: 8px; } + .app-body .getting-started .column-link { margin-left: 0; font-weight: 500; color: var(--color-fg); } + .layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-fg); } + .layout-multiple-columns .getting-started .column-link__icon { transform: scale(1.4); } @@ -7430,6 +8578,7 @@ a:is(.active, .layout-multiple-columns .getting-started__trends .trends__item { padding-left: 16px; } + .layout-multiple-columns .getting-started__trends h4 > :is(a, span) { padding-left: 45px; } @@ -7445,6 +8594,7 @@ a:is(.active, .layout-multiple-columns .column:has(> .getting-started) { width: 330px; } + .layout-multiple-columns .column:has(> .getting-started) :is(.column-header, .column-back-button), @@ -7465,10 +8615,12 @@ a:is(.active, width: 280px; transition: width .3s; } + .layout-multiple-columns .drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) { width: 400px; } + .layout-multiple-columns .drawer__inner:has(> .search-results > .search-results__section) { z-index: 2; background-color: var(--color-content-bg); @@ -7481,6 +8633,7 @@ a:is(.active, > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) { margin-bottom: 0; } + .layout-multiple-columns .drawer > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) @@ -7492,6 +8645,7 @@ a:is(.active, border-radius: 0; border: 0; } + .layout-multiple-columns .drawer > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) @@ -7503,6 +8657,7 @@ a:is(.active, .layout-multiple-columns .drawer__inner:has(.search-results .empty-column-indicator) { z-index: 3; } + .layout-multiple-columns .search-results .empty-column-indicator { border: 1px solid var(--color-lines); border-radius: 8px; @@ -7520,6 +8675,7 @@ a:is(.active, bottom: 0; z-index: -1; } + .layout-multiple-columns .link-footer::before, .layout-multiple-columns .link-footer::after { display: none; @@ -7529,7 +8685,7 @@ a:is(.active, background-color: var(--color-content-bg); } -@media screen and (min-width:630px) and (max-width:1174px) { +@media screen and (width >=630px) and (width <=1174px) { .layout-multiple-columns :is( .column-header, @@ -7548,6 +8704,7 @@ a:is(.active, border-radius: 8px; color: var(--color-content-fg); } + .app-body .switch-to-advanced .switch-to-advanced__toggle { color: var(--color-accent); } @@ -7563,6 +8720,7 @@ a:is(.active, )::before { background-image: var(--icon-tangerine-slice); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7600,6 +8758,7 @@ a:is(.active, )::before { background-image: var(--icon-calendar); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7623,6 +8782,7 @@ a:is(.active, )::before { background-image: var(--icon-music); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7631,6 +8791,7 @@ a:is(.active, )::before { background-image: var(--icon-microphone); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7639,6 +8800,7 @@ a:is(.active, )::before { background-image: var(--icon-cake); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7655,6 +8817,7 @@ a:is(.active, )::before { background-image: var(--icon-popcorn); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7671,6 +8834,7 @@ a:is(.active, )::before { background-image: var(--icon-camera); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7684,6 +8848,7 @@ a:is(.active, )::before { background-image: var(--icon-sunset); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7694,6 +8859,7 @@ a:is(.active, )::before { background-image: var(--icon-pine); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7711,6 +8877,7 @@ a:is(.active, )::before { background-image: var(--icon-tree); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7726,6 +8893,7 @@ a:is(.active, )::before { background-image: var(--icon-cat); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7740,6 +8908,7 @@ a:is(.active, )::before { background-image: var(--icon-dog); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7761,6 +8930,7 @@ a:is(.active, )::before { background-image: var(--icon-brush); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7776,6 +8946,7 @@ a:is(.active, )::before { background-image: var(--icon-apple); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7787,6 +8958,7 @@ a:is(.active, )::before { background-image: var(--icon-pencil); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7799,6 +8971,7 @@ a:is(.active, )::before { background-image: var(--icon-book); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7815,6 +8988,7 @@ a:is(.active, )::before { background-image: var(--icon-gaming); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7824,6 +8998,7 @@ a:is(.active, )::before { background-image: var(--icon-cube); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7837,6 +9012,7 @@ a:is(.active, )::before { background-image: var(--icon-football); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7870,6 +9046,7 @@ a:is(.active, )::before { background-image: var(--icon-pride); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7883,6 +9060,7 @@ a:is(.active, )::before { background-image: var(--icon-vote); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7896,6 +9074,7 @@ a:is(.active, )::before { background-image: var(--icon-code); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7905,6 +9084,7 @@ a:is(.active, )::before { background-image: var(--icon-handshake); } + .app-body .trends__item:has( .trends__item__name a:is( diff --git a/app/javascript/styles/tangerine/lagoon.scss b/app/javascript/styles/tangerine/lagoon.scss index 7ecd5e22db..1fd47ef24b 100644 --- a/app/javascript/styles/tangerine/lagoon.scss +++ b/app/javascript/styles/tangerine/lagoon.scss @@ -9,11 +9,9 @@ /* 📄 Meta */ :root { --version: "v2.4~"; - --variant-name: "Lagoon"; --variant-emoji: "\1F420\00A0"; --variant: var(--variant-emoji) var(--variant-name); - --meta: 'Powered by OSCAR Node #4 \00B7 ' var(--variant); } @@ -27,30 +25,25 @@ --color-fg-muted: #888494; --color-secondary-bg: #E4EEF2; --color-secondary-separator: #DBE8ED; - --color-content-bg: #ffffff; --color-content-fg: #444a5a; --color-content-fg-bold: #000000; --color-content-fg-muted: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 40%); --color-content-secondary-bg: #F4F8F9; - --color-content-secondary-separator: rgba(223, 219, 237, 0.4); + --color-content-secondary-separator: rgba(223, 219, 237, 40%); --color-content-bg-focus: #fffcfa; - --color-accent: #008CB4; --color-accent-focus: #009AC6; - --color-accent-lines: rgba(99, 207, 255, 0.52); + --color-accent-lines: rgba(99, 207, 255, 52%); --color-accent-bg: #DDF1F6; --color-accent-fg: #ffffff; - --color-lines: #e1dde4; - --color-lines-translucent: rgba(0, 0, 0, .15); - + --color-lines-translucent: rgba(0, 0, 0, 15%); --color-confirm: #79bd9a; - --color-confirm-bg: rgba(121, 189, 154, 0.3); + --color-confirm-bg: rgba(121, 189, 154, 30%); --color-confirm-fg: #4E8A6B; - --color-reject: #df405a; - --color-reject-bg: rgba(223, 64, 90, 0.3); + --color-reject-bg: rgba(223, 64, 90, 30%); } @media (prefers-color-scheme: dark) { :root { @@ -60,27 +53,24 @@ --color-fg-muted: #655e6e; --color-secondary-bg: #11191F; --color-secondary-separator: #26232e; - --color-content-bg: #030303; --color-content-fg: var(--color-fg); --color-content-fg-bold: #ffffff; --color-content-fg-muted: #737373; --color-content-secondary-bg: var(--color-secondary-bg); - --color-content-secondary-separator: rgba(64, 62, 89, 0.4); + --color-content-secondary-separator: rgba(64, 62, 89, 40%); --color-content-bg-focus: #0e0e0e; - --color-accent: #08A6B7; --color-accent-focus: #09C1D4; - --color-accent-lines: rgba(27, 181, 245, 0.3); + --color-accent-lines: rgba(27, 181, 245, 30%); --color-accent-bg: #1F313C; --color-accent-fg: #ffffff; - --color-lines: #343434; - --color-lines-translucent: rgba(255, 255, 255, .15); - + --color-lines-translucent: rgba(255, 255, 255, 15%); --color-confirm-fg: var(--color-confirm); } } + :root { /* Mastodon logo */ --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' class='mastodon-logo' viewBox='0 0 216.414 232.01'%3E%3Cdefs xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient xmlns='http://www.w3.org/2000/svg' id='a' x2='0%25' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23008CB4'/%3E%3Cstop offset='100%25' stop-color='%23008CB4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='url(%23a)' d='M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916'/%3E%3Cpath fill='%23fff' d='M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675'/%3E%3C/svg%3E"); @@ -121,71 +111,55 @@ --icon-home-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-direct-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bookmark-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-accent: var(--icon-star-accent); --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent: var(--icon-user-plus-accent); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-dot-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-dot-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); --icon-settings-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-moderation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-moderation-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-administration-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-ellipsis-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); --icon-ellipsis-column-link-active-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); --icon-hashtag-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); @@ -308,70 +282,54 @@ --icon-home-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-direct-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bookmark-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-accent: var(--icon-star-accent); --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-dot-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-dot-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); --icon-settings-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-moderation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-moderation-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-administration-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-ellipsis-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); --icon-ellipsis-column-link-active-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); --icon-hashtag-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); @@ -465,6 +423,7 @@ body.app-body { background-color: var(--color-bg); background-image: var(--gradient-bg); } + .app-body .columns-area__panels__pane { z-index: 1; } @@ -479,24 +438,28 @@ body.app-body { background-color: var(--color-bg); padding: 2px; } + :root:has(.app-body) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 8px; opacity: .4; box-shadow: none; } + :root:has(.app-body) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } + :root:has(.app-body) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); opacity: .7; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { :root:has(.app-body) *::-webkit-scrollbar { display: none; } } + :root, * { scrollbar-color: var(--color-accent) var(--color-bg); @@ -505,8 +468,8 @@ body.app-body { .app-body { --dropdown-shadow: - 0 20px 25px -5px rgba(0, 0, 0, .15), - 0 8px 10px -6px rgba(0, 0, 0, .15); + 0 20px 25px -5px rgba(0, 0, 0, 15%), + 0 8px 10px -6px rgba(0, 0, 0, 15%); --safe-area-bottom: env(safe-area-inset-bottom); } @media (display-mode: standalone) { @@ -518,6 +481,7 @@ body.app-body { .app-body .loading-bar { background-color: var(--color-accent); } + .app-body .circular-progress { color: var(--color-accent); } @@ -528,9 +492,11 @@ body.app-body { background-position: center; background-repeat: no-repeat; } + .app-body .redirect__logo img { opacity: 0; } + .app-body .redirect__message a { color: var(--color-accent); } @@ -541,7 +507,7 @@ body.app-body { .app-body .compose-form .spoiler-input__input, .app-body .compose-form__autosuggest-wrapper, .app-body .compose-form__poll-wrapper select, -.app-body .poll__option input[type=text], +.app-body .poll__option input[type="text"], .app-body .report-dialog-modal__textarea, .app-body .search__input, .app-body .setting-text, @@ -549,6 +515,7 @@ body.app-body { .app-body .about__section__body { border: 0; } + .app-body .column-inline-form, .app-body .column>.scrollable, .app-body .getting-started, @@ -564,6 +531,7 @@ body.app-body { background-color: var(--color-content-secondary-bg); border-radius: 50%; } + .app-body .account__avatar img { border-radius: 50%; } @@ -573,12 +541,15 @@ body.app-body { 0% { transform: scale(1); } + 50% { transform: scale(1.6); } + 75% { transform: scale(.8); } + 100% { transform: scale(1); } @@ -587,9 +558,11 @@ body.app-body { 0% { transform: scale(1); } + 50% { transform: scale(1.25); } + 100% { transform: scale(1); } @@ -598,12 +571,15 @@ body.app-body { 0% { transform: translateY(0); } + 50% { transform: translateY(-30%); } + 75% { transform: translateY(20%); } + 100% { transform: translate(0); } @@ -613,22 +589,27 @@ body.app-body { transform: translate(0); opacity: 0; } + 5% { transform: translate(0); opacity: 1; } + 50% { transform: translate(200%, -200%); opacity: 0; } + 80% { transform: translate(200%, -200%); opacity: 0; } + 85% { transform: translate(-20%, 20%); opacity: 0; } + 100% { transform: translate(0); opacity: 1; @@ -639,6 +620,7 @@ body.app-body { opacity: 0; transform: translateY(-10%); } + to { opacity: 1; transform: translateY(0); @@ -649,6 +631,7 @@ body.app-body { transform: translate(0, -10px); opacity: 0; } + to { transform: translate(0, 0); opacity: 1; @@ -658,9 +641,11 @@ body.app-body { 0% { opacity: 0; } + 20% { opacity: 0; } + 100% { opacity: 1; } @@ -669,9 +654,11 @@ body.app-body { 0% { transform: rotate(0) scale(1); } + 60% { transform: rotate(80deg) scale(1.2); } + 100% { transform: rotate(60deg) scale(1.1); } @@ -680,12 +667,15 @@ body.app-body { 0% { transform: rotate(0); } + 40% { transform: rotate(15deg); } + 70% { transform: rotate(-15deg); } + 100% { transform: rotate(0); } @@ -696,19 +686,24 @@ body.app-body { .app-body .columns-area__panels__pane--navigational { order: 1; } + .app-body .columns-area__panels__main { contain: inline-size; order: 2; } + .app-body .columns-area__panels__pane--compositional { order: 3; } + .app-body .columns-area--mobile .column { flex: unset; } + .app-body .columns-area--mobile .column:focus-within { overflow: visible; } + .app-body .scrollable, .app-body .column > .scrollable { background-color: var(--color-content-bg); @@ -719,30 +714,33 @@ body.app-body { border-radius: 0; padding-bottom: 20px; } + .app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } + .app-body .columns-area--mobile { padding: 0; } + .app-body .columns-area__panels { gap: 10px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) .scrollable, .app-body:not(.layout-multiple-columns) .column > .scrollable { border-right: 0; border-left: 0; } } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .columns-area__panels__main { max-width: 580px; padding: 0; } } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .columns-area__panels { gap: 0; } @@ -754,26 +752,32 @@ body.app-body { height: 20px; width: 20px; } + .app-body .verified-badge .icon { width: 18px; height: 18px; } + .app-body .account__header__tabs__buttons .icon-button .icon { height: 24px; width: 24px; } + .app-body .status__visibility-icon .icon { height: 1em; width: 1em; } + .app-body .detailed-status__meta .icon, .app-body .dropdown-button .icon { height: 15px; width: 15px; } + .app-body .icon-button { padding: 2px; } + .app-body :is( .icon-bookmark, @@ -921,47 +925,59 @@ path { .app-body .icon-bookmark { background-image: var(--icon-bookmark-accent); } + .app-body .detailed-status__button .icon-bookmark { background-image: var(--icon-bookmark-accent); } + .app-body .icon-button.active .icon-bookmark { background-image: var(--icon-bookmark-active); } + /* Favorite */ .app-body .icon-star { background-image: var(--icon-star-accent); } + .app-body button.icon-button.active .icon-star, .app-body .notification__message .icon-star, .app-body .notification-group--favourite .icon-star { background-image: var(--icon-star-active); } + .app-body .detailed-status__link .icon-star { background-image: var(--icon-star); margin: 0; } + .app-body .media-modal__overlay .icon-star { background-image: var(--icon-star-accent); } + /* Boost */ .app-body .icon-retweet { background-image: var(--icon-boost-accent); } + .app-body button.icon-button.active .icon-retweet, .app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-accent-active); } + .app-body .status__prepend__icon .icon-retweet, .app-body .notification-group--reblog .icon-repeat { background-image: var(--icon-boost-accent-active); } + .app-body .notification__message .icon-retweet { background-image: var(--icon-boost-active); } + .app-body .detailed-status__link .icon-retweet { background-image: var(--icon-boost); margin: 0; } + .app-body button.icon-button:is( .reblogPrivate:where(.disabled, [disabled]), @@ -974,50 +990,63 @@ button.icon-button:is( opacity: .2; pointer-events: none; } + .app-body .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost-accent); vertical-align: middle; } + .app-body .media-modal__overlay .icon-retweet { background-image: var(--icon-boost-accent); } + /* Reply */ .app-body .icon-reply, .app-body .icon-reply-all { background-image: var(--icon-reply-accent); } + .app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } + .app-body .media-modal__overlay :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } + .app-body .status__prepend__icon .icon-reply, .app-body .notification-ungrouped__header__icon .icon-reply { background-image: var(--icon-reply-accent-active); } + /* Ellipsis */ .app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) { background-image: var(--icon-ellipsis-accent); } + .app-body .detailed-status__action-bar .icon-ellipsis-h { background-image: var(--icon-ellipsis-accent); } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { background-image: var(--icon-ellipsis-active); } + /* Poll icon */ .app-body .icon-tasks, .app-body .icon-bar-chart-4-bars { background-image: var(--icon-poll); } + .app-body .notification__message .icon-tasks, .app-body .notification-ungrouped .icon-bar-chart-4-bars { background-image: var(--icon-poll-accent); } + .app-body .compose-form .icon-tasks { background-image: var(--icon-poll-accent); } + /* Post icon */ .app-body .icon-quote-right { background-image: var(--icon-post); @@ -1029,228 +1058,292 @@ button.icon-button:is( margin-right: 7px; margin-left: 3px; } + /* Home icon */ .app-body .icon-home { background-image: var(--icon-home); } + .app-body .column-link.active .icon-home { background-image: var(--icon-home-active); } + .layout-multiple-columns .column-link .icon-home { background-image: var(--icon-home-accent); } + .app-body .notification__message .icon-home, .app-body .notification-ungrouped .icon-notifications-active { background-image: var(--icon-post-notification-accent); } + /* Globe icon */ .app-body .column-link .icon-globe, .app-body .column-header__icon.icon-globe { background-image: var(--icon-globe); } + .app-body .column-link.active .icon-globe { background-image: var(--icon-globe-active); } + .layout-multiple-columns .column-link .icon-globe { background-image: var(--icon-globe-accent); } + /* Hashtag icon */ .app-body .icon-hashtag { background-image: var(--icon-hashtag); } + /* Explore icon */ .app-body .icon-explore, .app-body .column-link .icon-explore { background-image: var(--icon-explore); } + .app-body .column-link.active .icon-explore { background-image: var(--icon-explore-active); } + .layout-multiple-columns .column-link .icon-explore { background-image: var(--icon-explore-accent); } + /* Search icon */ .app-body .icon-search { background-image: var(--icon-search); } + .app-body .ui__header__links .icon-search, .app-body .search__icon .icon-search { background-image: var(--icon-search-active); } + .app-body .column-link .icon-search { background-image: var(--icon-search-column-link); } + .app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link-active); } + .app-body .column-header__icon.icon-search { background-image: var(--icon-search-column-link); } + .app-body .icon-times-circle { background-image: var(--icon-erase); } + /* Notifications icon */ .app-body .column-link .icon-bell, .app-body .column-header__icon.icon-bell { background-image: var(--icon-bell); } + .app-body .column-link.active .icon-bell { background-image: var(--icon-bell-active); } + /* Direct messages icon */ .app-body .column-link .icon-at, .app-body .column-header__icon.icon-at { background-image: var(--icon-direct-messages); } + .app-body .column-link.active .icon-at { background-image: var(--icon-direct-messages-active); } + .layout-multiple-columns .column-link .icon-at { background-image: var(--icon-direct-messages-accent); } + /* Bookmarks icon */ .app-body .icon-bookmarks, .app-body .column-header__icon.icon-bookmarks { background-image: var(--icon-bookmark-column-link); } + .app-body .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } + .layout-multiple-columns .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent); } + /* Favorites icon */ .app-body .column-link .icon-star, .app-body .column-header__icon.icon-star { background-image: var(--icon-star-column-link); } + .app-body .column-link.active .icon-star { background-image: var(--icon-star-column-link-active); } + .layout-multiple-columns .column-link .icon-star { background-image: var(--icon-star-column-link-accent); } + /* Lists icon */ .app-body .icon-list-ul, .app-body .column-header__icon.icon-list-ul { background-image: var(--icon-list); } + .app-body .column-link.active .icon-list-ul { background-image: var(--icon-list-active); } + .layout-multiple-columns .column-link .icon-list-ul { background-image: var(--icon-list-accent); } + .app-body .navigation-panel .list-panel .column-link .icon-list-ul { background-image: var(--icon-dot-accent); transform: scale(1.8); } + .app-body .navigation-panel .list-panel .column-link.active .icon-list-ul { background-image: var(--icon-dot-accent-active); } + /* Settings icon */ .app-body .column-link .icon-cog { background-image: var(--icon-settings); } + .layout-multiple-columns .column-link .icon-cog { background-image: var(--icon-settings-accent); } + /* About page icon */ .app-body .navigation-panel .column-link .icon-ellipsis-h { background-image: var(--icon-ellipsis); } + .app-body .navigation-panel .column-link.active .icon-ellipsis-h { background-image: var(--icon-ellipsis-column-link-active); } + /* Moderation icon */ .app-body .icon-flag { background-image: var(--icon-moderation); } + .app-body .icon-tachometer { background-image: var(--icon-administration); } + /* Profile settings */ .app-body .navigation-bar .icon-button .icon-bars { background-image: var(--icon-gear); } + .app-body .navigation-bar .icon-button.active .icon-close { background-image: var(--icon-gear-active); } + .app-body .navigation-bar .icon-button:is(:active, :focus, :hover) { background-color: transparent; } + .app-body .navigation-bar .icon-button.active { transform: rotate(60deg) scale(1.1); animation: rotate-bounce .4s 1; } + /* Follow user icon */ .app-body .icon-user-plus, .app-body .icon-user, .app-body .icon-person-add { background-image: var(--icon-user-plus-accent); } + .app-body .active .icon-user-plus { background-image: var(--icon-user-plus); } + .app-body .column-header__icon.icon-user-plus, .app-body .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link); } + .app-body .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-column-link-active); } + .layout-multiple-columns .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent); } + /* Users icon */ .app-body .icon-users { background-image: var(--icon-users); } + .app-body .column-link .icon-users { background-image: var(--icon-users-accent); } + /* Announcement icon */ .app-body .icon-bullhorn { background-image: var(--icon-megaphone); } + /* Column settings icon */ .app-body .icon-sliders { background-image: var(--icon-sliders); } + /* Post visibility icons */ .app-body .icon-globe { background-image: var(--icon-globe-visibility); } + .app-body .dropdown-button .icon-globe { background-image: var(--icon-globe-visibility-accent); } + .app-body .dropdown-button.active .icon-globe { background-image: var(--icon-globe-visibility-inv); } + .app-body .icon-unlock { background-image: var(--icon-unlock); } + .app-body .dropdown-button .icon-unlock { background-image: var(--icon-unlock-accent); } + .app-body .dropdown-button.active .icon-unlock { background-image: var(--icon-unlock-inv); } + .app-body .icon-lock { background-image: var(--icon-lock); } + .app-body .dropdown-button .icon-lock { background-image: var(--icon-lock-accent); } + .app-body .dropdown-button.active .icon-lock { background-image: var(--icon-lock-inv); } + .app-body .icon-at { background-image: var(--icon-at); } + .app-body .dropdown-button .icon-at { background-image: var(--icon-at-accent); } + .app-body .dropdown-button.active .icon-at { background-image: var(--icon-at-inv); } @@ -1259,38 +1352,49 @@ button.icon-button:is( .app-body .icon-paperclip { background-image: var(--icon-paperclip-accent); } + .app-body .icon-photo-library, .app-body .edit-indicator__attachments > .icon { background-image: var(--icon-paperclip); } + .app-body .compose-form__buttons .icon-button:nth-child(3) .icon { background-image: var(--icon-warning); } + .app-body .compose-form__buttons .icon-button:nth-child(3):is(.active, .active:hover) .icon { background-image: var(--icon-warning-inv); } + .app-body .icon-check:is(.verified__mark, .verified-badge__mark) { background-image: var(--icon-verified); } + .app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .account__relationship .icon-check, .app-body .follow-request-banner .button .icon-check { background-image: var(--icon-check); } + .app-body .icon-bell { background-image: var(--icon-bell-ringing); } + .app-body .icon-bell-o { background-image: var(--icon-bell-accent); } + .app-body .icon-thumb-tack { background-image: var(--icon-pin); } + .app-body .icon-file-text { background-image: var(--icon-link); } + .app-body :is( .account--panel, @@ -1300,114 +1404,148 @@ button.icon-button:is( .icon-times { background-image: var(--icon-reject); } + .app-body .account--panel .icon-times, .app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } + .app-body .account__relationship .icon-times, .app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } + .app-body .account__header__tabs__buttons .icon-undefined { background-image: var(--icon-share); } + .app-body .account__header__tabs__buttons .copyable .icon-undefined { background-image: var(--icon-copy); } + .app-body .account__header__tabs__buttons .copied .icon-undefined { background-image: var(--icon-copied); } + .app-body .icon-eye-slash { background-image: var(--icon-eye-shut); } + .app-body .icon-button.overlayed .icon-eye-slash, .app-body .media-gallery__item__overlay .icon-eye-slash { background-image: var(--icon-eye-shut-inv); } + .app-body .player-button .icon-eye-slash { filter: brightness(100); } + .app-body .icon-eye { background-image: var(--icon-eye-open); } + .app-body .icon-eraser { background-image: var(--icon-broom); } + .app-body .icon-pencil { background-image: var(--icon-edited-accent); } + .app-body .icon-edit { background-image: var(--icon-edited-accent); } -@media screen and (min-width:1173px) { +@media screen and (width >=1173px) { .app-body .navigation-panel .column-link .icon-home { background-image: var(--icon-home-accent); } + .app-body .navigation-panel .column-link.active .icon-home { background-image: var(--icon-home-accent-active); } + .app-body .navigation-panel .column-link .icon-bell { background-image: var(--icon-bell-accent); } + .app-body .navigation-panel .column-link.active .icon-bell { background-image: var(--icon-bell-accent-active); } + .app-body .navigation-panel .column-link .icon-explore { background-image: var(--icon-explore-accent); } + .app-body .navigation-panel .column-link.active .icon-explore { background-image: var(--icon-explore-accent-active); } + .app-body .navigation-panel .column-link .icon-search { background-image: var(--icon-search-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-search { background-image: var(--icon-search-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-globe { background-image: var(--icon-globe-accent); } + .app-body .navigation-panel .column-link.active .icon-globe { background-image: var(--icon-globe-accent-active); } + .app-body .navigation-panel .column-link .icon-at { background-image: var(--icon-direct-messages-accent); } + .app-body .navigation-panel .column-link.active .icon-at { background-image: var(--icon-direct-messages-accent-active); } + .app-body .navigation-panel .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-star { background-image: var(--icon-star-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-star { background-image: var(--icon-star-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-list-ul { background-image: var(--icon-list-accent); } + .app-body .navigation-panel .column-link.active .icon-list-ul, .app-body .navigation-panel .column-link:has(+ .list-panel > .column-link.active) .icon-list-ul { background-image: var(--icon-list-accent-active); } + .app-body .navigation-panel .column-link .icon-cog { background-image: var(--icon-settings-accent); } + .app-body .navigation-panel .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent-active); } + .app-body .icon-flag { background-image: var(--icon-moderation-accent); } + .app-body .icon-tachometer { background-image: var(--icon-administration-accent); } @@ -1424,6 +1562,7 @@ button.icon-button:is( text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body a.status-link:not(.mention, .hashtag):is(:active, :focus, :hover), .app-body a:is(.status-link, .mention, .navigation-bar__profile-edit):is(:active, :focus, :hover) span, .app-body :is(.account__header__fields, .account__header__content, .trends__item__name) a:is(:active, :focus, :hover) span, @@ -1443,11 +1582,13 @@ button.icon-button:is( text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body a.mention:is(:active, :focus, :hover), .app-body :is(.account__header__fields, .account__header__content) a:is(:active, :focus, :hover), .app-body :is(.detailed-status__datetime, .status__relative-time):is(:active, :focus, :hover) { text-decoration: none !important; } + .app-body .account__header__fields .verified a span { display: inline; } @@ -1459,6 +1600,7 @@ button.icon-button:is( .app-body .compose-form { gap: 0; } + .app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 23px 15px 15px 18px; @@ -1471,9 +1613,11 @@ button.icon-button:is( background-color .2s, border-color .2s; } + .app-body .navigation-bar strong { color: var(--color-content-fg); } + .app-body .navigation-bar .account { background-color: transparent; padding-left: 0; @@ -1482,18 +1626,22 @@ button.icon-button:is( border-right: 0; border-bottom: 0; } + .app-body .navigation-bar .account__display-name { line-height: 1.25; } + .app-body :is(.navigation-bar, .reply-indicator) .account__avatar { outline: 6px solid var(--color-content-bg); border-radius: 8px; position: relative; z-index: 2; } + .app-body .reply-indicator__line { z-index: 1; } + .app-body .compose-form__highlightable { border-top: 0; border-left: 1px solid var(--color-lines); @@ -1506,20 +1654,24 @@ button.icon-button:is( background-color: var(--color-content-bg); transition: all .2s; } + .app-body .compose-form .reply-indicator:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form .compose-form__warning:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form__highlightable:focus-within { border-color: var(--color-accent); } + .app-body .compose-form .reply-indicator + .navigation-bar, .app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within), .app-body .reply-indicator { background-color: var(--color-content-bg); } + .app-body .compose-form__highlightable.active { box-shadow: none; } + .app-body .compose-form :is( .autosuggest-textarea__suggestions, @@ -1533,45 +1685,55 @@ button.icon-button:is( border-top: 0; border-radius: 0; } + .app-body .compose-form .autosuggest-textarea__textarea { padding-inline-start: 20px; } + .app-body .compose-form .autosuggest-textarea__textarea::placeholder { font-size: 130%; opacity: .5; } + .app-body .autosuggest-textarea__textarea::placeholder, .app-body .autosuggest-account .display-name__html { color: var(--color-content-fg); } + .app-body .autosuggest-account .display-name__account, .app-body .hover-card .display-name__account, .app-body .hover-card .account-fields dl dt { color: var(--color-content-fg-muted); } + .app-body .autosuggest-textarea__suggestions { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, .25), - 0 8px 10px -6px rgba(0, 0, 0, .25); + 0 20px 25px -5px rgba(0, 0, 0, 25%), + 0 8px 10px -6px rgba(0, 0, 0, 25%); } + .app-body .autosuggest-textarea__suggestions__item { color: var(--color-content-fg); } + .app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), .app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .autosuggest-textarea__suggestions, .app-body .autosuggest-textarea__suggestions__item:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .autosuggest-account .account__avatar { border: 0; } + .app-body .dropdown-button { border-radius: 8px; border-color: var(--color-accent-bg); @@ -1579,18 +1741,22 @@ button.icon-button:is( padding: 5px 8px; transition: border-color .2s; } + .app-body .dropdown-button:hover { border-color: var(--color-accent); } + .app-body .dropdown-button.active, .app-body .column-settings .dropdown-button.active { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .column-settings .dropdown-button { background-color: var(--color-accent-bg); } + .app-body .reply-indicator { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -1602,25 +1768,30 @@ button.icon-button:is( padding: 18px 15px 0 18px; transition: all .2s; } + .app-body .reply-indicator p { overflow: hidden; } -.app-body .reply-indicator__line:before { + +.app-body .reply-indicator__line::before { background-color: var(--color-accent); z-index: 1; opacity: .6; } + .app-body .reply-indicator + .navigation-bar { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 16px; } + .app-body .reply-indicator .display-name__account, .app-body .reply-indicator__attachments { color: var(--color-content-fg); opacity: .7; } + .app-body .reply-indicator__attachments { margin-top: 8px; } @@ -1632,18 +1803,23 @@ button.icon-button:is( padding-inline-start: 20px; padding-bottom: 17px; } + .app-body .edit-indicator__header { color: var(--color-content-fg); } + .app-body .edit-indicator__header > *:not(.edit-indicator__cancel) { opacity: .7; } + .app-body .edit-indicator__content { color: var(--color-content-fg); } + .app-body .edit-indicator__content a { color: var(--color-accent); } + .app-body .edit-indicator__attachments { color: var(--color-content-fg); opacity: .7; @@ -1655,9 +1831,11 @@ button.icon-button:is( border-radius: 8px; transition: all .2s; } + .app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover { border-color: var(--color-accent); } + .app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):active { background-color: var(--color-accent-bg); } @@ -1671,6 +1849,7 @@ button.icon-button:is( box-shadow: none; transition: border-color .2s; } + .app-body .compose-form .compose-form__warning, .app-body .simple_form .recommended, .app-body .compose-form .compose-form__warning, @@ -1679,32 +1858,40 @@ button.icon-button:is( .app-body .navigation-bar__profile-edit { color: var(--color-accent); } + .app-body .simple_form .recommended { border-color: var(--color-lines); } + .app-body .compose-form__sensitive-button .icon-button:hover { background-color: transparent; } -.app-body .compose-form__sensitive-button input[type=checkbox]:checked { + +.app-body .compose-form__sensitive-button input[type="checkbox"]:checked { background-color: var(--color-accent); border-color: var(--color-accent); } + .app-body .spoiler-input__border { display: none; } + .app-body .compose-form .autosuggest-input { box-sizing: border-box; } + .app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } + .app-body .compose-form .spoiler-input .autosuggest-input { background-color: var(--color-content-bg); border-bottom: 0; padding: 5px; } + .app-body .compose-form .spoiler-input__input { background-image: var(--icon-warning); background-position: 10px center; @@ -1719,24 +1906,29 @@ button.icon-button:is( font-weight: 500; transition: all .2s; } + .app-body .compose-form .spoiler-input__input:focus { border-color: var(--color-accent); background-color: var(--color-content-bg); } + .app-body .display-name { color: var(--color-content-fg); } + .app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon { width: 15px; height: 15px; } + .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } + .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { - background-color: rgba(0, 0, 0, .4); + background-color: rgba(0, 0, 0, 40%); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .compose-form { padding: 15px; } @@ -1759,10 +1951,12 @@ button.icon-button:is( transform-origin: right center; margin-right: -10px; } + .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter { opacity: 1; margin-right: 0; } + .app-body .character-counter--over { color: #df405a; font-weight: 500; @@ -1773,33 +1967,41 @@ button.icon-button:is( gap: 10px; padding: 0; } + .app-body .compose-form__dropdowns { gap: 6px; padding: 0 12px; } + .app-body .compose-form__actions { border-radius: 0 0 8px 8px; padding: 10px 12px; background-color: var(--color-content-secondary-bg); } + .app-body .compose-form__buttons { gap: 1px; } + .app-body .compose-form__buttons .icon-button { padding: 6px; border-radius: 8px; transition: all .2s; } + .app-body .compose-form__buttons .icon { transform: scale(1.2); width: 20px; } + .app-body .compose-form__buttons .icon-button:is(.active, .active:hover) { background-color: var(--color-accent); } + .app-body .compose-form__submit { max-width: 40px; } + .app-body .compose-form__submit .button { height: 40px; max-width: 40px; @@ -1814,13 +2016,16 @@ button.icon-button:is( background-color .2s, border-color .2s; } + .app-body .compose-form__submit .button:active { transform: scale(.95); } + .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button { background-image: var(--icon-send); background-color: var(--color-accent-bg); } + .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit { animation: bounce-sml .2s ease-out 1; } @@ -1829,31 +2034,38 @@ button.icon-button:is( background-color: var(--color-secondary-bg); border-radius: 8px; } + .app-body .upload-area__content { border-color: var(--color-accent-focus); border-radius: 8px; } + .app-body .upload-progress__tracker { background-color: var(--color-accent); } + .app-body .upload-progress__backdrop { background-color: var(--color-accent-bg); } + .app-body .upload-progress .icon { color: var(--color-accent) } + .app-body .upload-progress__message, .app-body .upload-progress__message span { color: var(--color-content-fg); } + .app-body .compose-form__upload .icon-button { - background-color: rgba(0, 0, 0, .75); + background-color: rgba(0, 0, 0, 75%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--color-accent-fg); border-radius: 8px; padding: 6px; } + .app-body .compose-form__upload .icon-button:hover { background-color: #444; color: var(--color-accent-fg); @@ -1863,10 +2075,12 @@ button.icon-button:is( .app-body .compose-form__poll { gap: 3px; } + .app-body .compose-form__poll .poll__option { margin-bottom: 2px; } -.app-body .poll__option input[type=text] { + +.app-body .poll__option input[type="text"] { border-radius: 8px; padding: 7px 12px; border: 1px solid var(--color-lines); @@ -1874,18 +2088,22 @@ button.icon-button:is( color: var(--color-content-fg); transition: all .2s; } -.app-body .poll__option input[type=text]:focus { + +.app-body .poll__option input[type="text"]:focus { border-color: var(--color-accent); } + .app-body .compose-form__poll__footer { margin-top: 5px; padding-inline-start: 12px; gap: 6px; margin-bottom: -10px; } + .app-body .compose-form__poll__select__label { display: none; } + .app-body .compose-form__poll__select__value { background-position: 8px center; background-size: 15px; @@ -1901,33 +2119,42 @@ button.icon-button:is( border-color .2s; cursor: pointer; } + .app-body .compose-form__poll__select__value:is(:active, :hover, :focus) { border-color: var(--color-accent); outline: 0; } + .app-body .compose-form__poll__select__value:active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value { background-image: var(--icon-timer); } + .app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value:active { background-image: var(--icon-timer-inv); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value { background-image: var(--icon-check-radio); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:active, .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked):active { background-image: var(--icon-check-radio-inv); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked) { background-image: var(--icon-check-radio); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked) { background-image: var(--icon-check-box); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked):active { background-image: var(--icon-check-box-inv); } @@ -1944,9 +2171,11 @@ button.icon-button:is( .app-body .compose-form__poll-wrapper .poll__footer { border-top: 0; } + .app-body .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } + .app-body .compose-form__poll-wrapper .autosuggest-input input, .app-body .compose-form__poll-wrapper select { background-color: var(--color-content-bg); @@ -1954,20 +2183,25 @@ button.icon-button:is( border-radius: 8px; color: var(--color-content-fg); } + .app-body .compose-form__poll-wrapper .autosuggest-input input:focus, .app-body .compose-form__poll-wrapper select:focus { border-color: var(--color-accent); } + .app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } + .app-body .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } + .app-body .compose-form__poll-button .icon-button.active { background-color: var(--color-accent); } + .app-body .compose-form__poll-button .icon-button.active .icon-tasks { background-image: var(--icon-poll-active); } @@ -1976,6 +2210,7 @@ button.icon-button:is( .app-body .muted .poll { color: var(--color-content-fg-muted); } + .app-body .poll__footer { color: var(--color-content-fg-muted); display: flex; @@ -1986,6 +2221,7 @@ button.icon-button:is( font-size: 12px; padding: 0; } + .app-body .poll__link { color: var(--color-accent); text-decoration: none; @@ -1998,21 +2234,26 @@ button.icon-button:is( height: 32px; transition: all .3s; } + .app-body .poll__link:hover { border-color: var(--color-accent); } + .app-body .poll__link:active { background-color: var(--color-accent-bg); } + .app-body .poll__option.editable .poll__input { display: none; } + .app-body .poll li { margin-bottom: 4px; position: relative; border-radius: 8px; overflow: hidden; } + .app-body :is(.status, .detailed-status) .poll__option { border: 1px solid var(--color-lines-translucent); color: var(--color-content-fg); @@ -2024,21 +2265,26 @@ button.icon-button:is( z-index: 1; align-items: center; } + .app-body .poll__option.selectable { cursor: pointer; } + .app-body .poll__option.selectable:active { transform: scale(.98); } + .app-body .poll__option.selectable:hover { border-color: var(--color-accent); color: var(--color-accent); } + .app-body .poll__option.selectable:has(.poll__input.active) { border-color: var(--color-accent); background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .poll__option.selectable .poll__input:not(.active) { border-width: 0; outline-width: 0 !important; @@ -2046,14 +2292,17 @@ button.icon-button:is( transition: background .2s; } + .app-body .poll__option.selectable:hover .poll__input:not(.active) { background-color: var(--color-accent-bg); } + .app-body .poll__option.selectable .poll__input.active { border-width: 3px; border-color: var(--color-accent-bg); outline-width: 1px !important; } + .app-body .poll__footer .button.button-secondary { box-sizing: border-box; padding: 0 16px; @@ -2063,32 +2312,39 @@ button.icon-button:is( color: var(--color-accent-fg); float: inline-end; } + .app-body .poll__footer .button.button-secondary:hover { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } + .app-body .poll__footer .button.button-secondary:disabled { opacity: 1; background-color: var(--color-content-secondary-bg); color: var(--color-accent); display: none; } + .app-body .poll__footer .button.button-secondary:not(:disabled) { animation: bounce-sml .3s ease-out 1; } + .app-body .poll__footer .button.button-secondary:active { transform: scale(.95); } + .app-body .poll__voted { position: absolute; right: 3px; height: 20px; color: var(--color-accent); } + .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted { right: 28px; color: var(--color-confirm-fg); } + .app-body .poll__chart { background: var(--color-lines); opacity: .8; @@ -2104,20 +2360,24 @@ button.icon-button:is( opacity: 1; } } + .app-body .poll__chart.leading, .app-body .muted .poll__chart.leading, .app-body .poll__option:has(.poll__voted) + .poll__chart.leading { background: var(--color-confirm); opacity: .5; } + .app-body .poll__option:has(.poll__voted) { border-color: var(--color-accent); background-color: transparent; } + .app-body .poll__option:has(.poll__voted) + .poll__chart { background-color: color-mix(in srgb, var(--color-accent), transparent 70%); opacity: 1; } + .app-body .poll__option:has(+ .poll__chart.leading), .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { border-color: color-mix(in srgb, var(--color-confirm), transparent 30%); @@ -2128,6 +2388,7 @@ button.icon-button:is( background-repeat: no-repeat; background-image: var(--icon-trophy); } + .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { border-color: var(--color-confirm); } @@ -2136,9 +2397,11 @@ button.icon-button:is( .app-body .emoji-picker-dropdown > .icon-button .icon { background-image: var(--icon-emoji-accent); } + .app-body .emoji-picker-dropdown > .icon-button.active .icon { background-image: var(--icon-emoji-accent-inv); } + .app-body .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; @@ -2146,53 +2409,65 @@ button.icon-button:is( border: 1px solid var(--color-lines); box-shadow: var(--dropdown-shadow); } + .app-body .emoji-mart { display: block; } + .app-body .emoji-mart-bar:first-child { background-color: var(--color-content-secondary-bg); border-color: var(--color-lines); padding-top: 2px; } + .app-body .emoji-mart-anchor-bar { background-color: var(--color-accent); } + .app-body .emoji-mart-anchor-selected { color: var(--color-accent); } + .app-body .emoji-mart-anchor-icon svg path, .app-body .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } + .app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, .app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, .app-body .emoji-mart-search-icon svg path { fill: var(--color-accent); } + .app-body .emoji-mart-search-icon, .app-body .emoji-mart-search-icon:disabled, .app-body .emoji-mart-search-icon svg { opacity: 1; } + .app-body .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } + .app-body .emoji-mart-search, .app-body .emoji-mart-scroll, .app-body .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } + .app-body .emoji-mart-search input:focus { border-color: var(--color-accent); outline: 0; } + .app-body .emoji-mart-search input::placeholder { color: var(--color-accent); } @@ -2203,9 +2478,11 @@ button.icon-button:is( .app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } + .app-body .status__content .emojione { transition: transform .8s .8s; } + .app-body .status__content .emojione:hover { transform: scale(2.5); } @@ -2219,27 +2496,31 @@ button.icon-button:is( .app-body .status__content { color: var(--color-content-fg); } + .app-body .account__display-name strong, .app-body .status__display-name strong, .app-body .status__info .status__display-name .display-name__account, .app-body .status__prepend a bdi { color: var(--color-content-fg); } + .app-body .translate-button { color: var(--color-content-fg-muted); } + .app-body .translate-button__meta, .app-body .translate-button button, .app-body .status__content__translate-button { font-size: 85%; } + .app-body .status__content__translate-button, .app-body .translate-button .link-button { width: 32px; height: 32px; bottom: 13px; right: 52px; - padding: 0px; + padding: 0; position: absolute; background-size: 20px; background-repeat: no-repeat; @@ -2249,6 +2530,7 @@ button.icon-button:is( transition: all .3s; background-color: transparent; } + .app-body .detailed-status .status__content__translate-button, .app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); @@ -2258,12 +2540,13 @@ button.icon-button:is( right: 60px; bottom: 20px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__content__translate-button, .app-body .translate-button .link-button { bottom: 10px; } } + .app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child :is( .translate-button .link-button, @@ -2271,10 +2554,12 @@ button.icon-button:is( ) { bottom: 12px; } + .app-body .status__content__translate-button:hover, .app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } + .app-body .translate-button .link-button, .app-body .detailed-status .translate-button .link-button, .app-body .translate-button .link-button:hover, @@ -2283,53 +2568,64 @@ button.icon-button:is( background-color: var(--color-accent); transform: scale(.8); } + .app-body .status__content__translate-button > span, .app-body .translate-button .link-button > span, .app-body .notification .status__content__translate-button { display: none; } + .app-body .account__display-name strong, .app-body .status__display-name strong, .app-body .notification-request__name__display-name strong, .app-body .status__prepend a bdi { font-weight: bold; } + .app-body .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } + .app-body .status__wrapper { transition: background .3s; } + .app-body .status__wrapper, .app-body .detailed-status__wrapper { --color-post-bg: var(--color-content-bg); + background-color: var(--color-post-bg); padding: 13px 12px; position: relative; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__wrapper { padding: 10px 8px; } + .app-body .notification-ungrouped .status__wrapper { padding: 13px 12px; } } + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper, .app-body .scrollable > div:first-child > .status__wrapper, .app-body .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } + .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, .app-body .scrollable > div > article:last-child > div > .status__wrapper, .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } + .app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top: 0; } + .app-body .status__info { height: 22px; width: calc(100% + 56px); @@ -2340,19 +2636,23 @@ button.icon-button:is( line-height: 0.625; align-items: start; } + .app-body .status__info .status__display-name { overflow: visible; align-items: start; max-height: 22px; } + .app-body .status__info .status__display-name .display-name bdi, .app-body .status__info .status__display-name .display-name__account { vertical-align: top; } + .app-body .status__info .status__display-name .display-name__account { display: inline; opacity: .6; } + .app-body .status__relative-time { height: 22px; color: var(--color-content-fg); @@ -2361,9 +2661,11 @@ button.icon-button:is( inset-inline-end: 20px; z-index: 1; } + .app-body .status__relative-time > * { opacity: .6; } + .app-body .status__relative-time::before, .app-body .status__relative-time::after { position: absolute; @@ -2373,17 +2675,20 @@ button.icon-button:is( z-index: -1; transition: all .3s; } + .app-body .status__relative-time::before { width: 20px; inset-inline-start: -20px; background: linear-gradient(90deg, transparent, var(--color-post-bg)); transition: all .2s; } + .app-body .status__relative-time::after { inset-inline-start: 0; inset-inline-end: 0; background-color: var(--color-post-bg); } + .app-body .status__relative-time time + abbr { display: inline-block; width: 18px; @@ -2396,15 +2701,19 @@ button.icon-button:is( background-image: var(--icon-edited); color: transparent; } + .app-body .status__relative-time .status__visibility-icon { order: 1; } + .app-body .status__relative-time time { order: 3; } + .app-body .status__relative-time time + abbr { order: 2; } + .app-body .status__avatar { margin-bottom: -10px; z-index: 2; @@ -2413,20 +2722,24 @@ button.icon-button:is( background-color: var(--color-post-bg); transition: outline .3s; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-base .account__avatar { width: 46px !important; height: 46px !important; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay { position: absolute; top: -34px; right: -38px; pointer-events: none; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay .account__avatar { width: 29px !important; height: 29px !important; } + .app-body .reply-indicator__content, .app-body .status__content { line-height: 1.4; @@ -2443,6 +2756,7 @@ button.icon-button:is( /* 📏 Post dividers */ + /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ .app-body .status::before, .app-body .notification__message::before { @@ -2455,7 +2769,7 @@ button.icon-button:is( content: ""; opacity: .7; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status::before, .app-body .notification__message::before { width: calc(100% - 73px); @@ -2478,7 +2792,7 @@ button.icon-button:is( .app-body .dismissable-banner + article .status::before { display: none; } -@media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ +@media screen and (width >=890px) and (width <=1174px) { /* no divider above first post in a column thread on medium-size devices */ .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{ display: none; @@ -2489,10 +2803,12 @@ button.icon-button:is( .app-body .status--first-in-thread { border-top: 0; } + .app-body .status--first-in-thread::before { width: 100%; right: 0; } + .app-body .status--in-thread :is( .attachment-list, @@ -2508,21 +2824,26 @@ button.icon-button:is( margin-left: 0; width: auto; } + .app-body .status__line--first { height: 100%; } + .app-body .status__line--full { height: calc(100% + 32px); } + /* Default lines when replying in real time */ .app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { height: 0; } + /* Hide line before first in thread */ .app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), .app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { height: 0; } + .app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { height: calc(100% - 32px) !important; } @@ -2533,10 +2854,12 @@ button.icon-button:is( height: 100%; z-index: 1; } + .app-body .detailed-status { background-color: transparent; border-top: 0; } + /* Threaded line, actually */ .app-body .status__line { margin-inline-start: 6px; @@ -2544,16 +2867,18 @@ button.icon-button:is( -webkit-border-start: 2px solid var(--color-accent); opacity: .6; } + .app-body .status__line--full::before { background-color: var(--color-accent); } + /* Hide the "stub" from the first status line */ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, .app-body .status-reply.status--in-thread.status--first-in-thread > .status__line, .app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { top: 32px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__line { inset-inline-start: 35px; } @@ -2570,10 +2895,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .focusable:focus .status__wrapper, .app-body .focusable:focus { outline: 0; + --color-post-bg: var(--color-content-bg-focus); + background-color: var(--color-post-bg); } -@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ +@media screen and (width >=1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ .app-body .status__wrapper:has(.status__content:hover), .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover), .app-body .status__wrapper:has(.status__content:hover) .status__avatar, @@ -2581,6 +2908,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu --color-post-bg: var(--color-content-bg-focus); } } + .app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar { outline: 6px solid var(--color-post-bg); } @@ -2596,44 +2924,54 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu inset 0 -5px var(--color-content-secondary-bg), inset 0 -6px var(--color-lines); } + .app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child { padding-bottom: 12px; box-shadow: none; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .detailed-status { padding: 8px 8px 14px; } } + .app-body .detailed-status .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } + .app-body .detailed-status .status__content { line-height: 1.27; } + .app-body .detailed-status { padding-bottom: 8px; } + .app-body .detailed-status, .app-body .detailed-status__action-bar { background-color: var(--color-content-bg); border: 0; } + .app-body .detailed-status__display-name strong, .app-body .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } + .app-body .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } + .app-body :is(.compose-panel, .compose-form) .detailed-status__display-name strong { font-size: 14px; } + .app-body .detailed-status__display-name .display-name__account { opacity: .7; } + .app-body .detailed-status__meta { color: var(--color-content-fg); display: flex; @@ -2647,6 +2985,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu overflow: hidden; position: relative; } + .app-body .detailed-status__meta::before { position: absolute; content: " "; @@ -2657,6 +2996,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu inset-inline-end: 0; background: linear-gradient(90deg, transparent, var(--color-post-bg)); } + .app-body .detailed-status__meta__line { border-top: 0; border-bottom: 0; @@ -2666,28 +3006,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: relative; opacity: .6; } + .app-body .detailed-status__meta__line:first-child { color: transparent; padding-left: 20px; padding-right: 5px; gap: 0; } + .app-body .detailed-status__meta__line:first-child svg { position: absolute; left: 0; } + .app-body .detailed-status__meta__line:first-child > * { color: var(--color-content-fg); white-space: nowrap; } + .app-body .detailed-status__meta__line:last-child { flex: 100%; opacity: .9; } + .app-body .detailed-status__application::before { content: "\00B7\00A0"; margin-left: -3px; } + .app-body .detailed-status__link:is([href$="/reblogs"], [href$="/favourites"]) { padding-left: 20px; border-radius: 8px; @@ -2696,12 +3042,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-size: 15px; transition: all .2s; } + .app-body .detailed-status__link[href$="/reblogs"] { background-image: var(--icon-boost); } + .app-body .detailed-status__link[href$="/favourites"] { background-image: var(--icon-star); } + .app-body .detailed-status__meta__line .dropdown-menu__text-button { overflow: hidden; padding-left: 20px; @@ -2711,52 +3060,62 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-size: 15px; text-align: start; } + .app-body .detailed-status__meta__line .dropdown-menu__text-button:is(:hover) { text-decoration: none; } + .app-body .detailed-status__action-bar { padding: 0 12px; justify-content: left; gap: 8px; width: auto; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .detailed-status__action-bar { padding-left: 0; padding-right: 0; } } + .app-body .detailed-status__button { width: 40px; height: 40px; flex: unset; } + .app-body .detailed-status__action-bar-dropdown { position: absolute; right: 18px; } + .app-body .detailed-status__meta .animated-number { color: var(--color-content-fg); font-weight: 700; } + .app-body .detailed-status__meta .dropdown-menu__text-button .animated-number { font-weight: 500; } + .app-body .status__action-bar .animated-number { color: var(--color-accent); font-weight: 500; } + .app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) { padding-left: 4px; padding-right: 4px; margin-right: 2px; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .active .icon-retweet + .icon-button__counter > .animated-number { color: var(--color-accent); } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .active @@ -2768,9 +3127,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body article > .account { padding: 16px; } + .app-body .account-timeline__header + article > .account { border-top: 1px solid var(--color-lines); } + .app-body .detailed-status__link { display: inline-flex; position: static; @@ -2783,12 +3144,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg-muted); transition: all .1s; } + .app-body .hashtag-bar a { font-weight: 500; } + .app-body .hashtag-bar .link-button { margin-left: 3px; } + .app-body .hashtag-bar a { background-color: color-mix( @@ -2800,18 +3164,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 3px 8px; border-radius: 8px; } + .app-body .hashtag-bar a:hover, .app-body .hashtag-bar .link-button:hover { color: var(--color-accent); } + .app-body .hashtag-bar a:hover { background-color: var(--color-accent-bg); } + .app-body .hashtag-bar a:active, .app-body .hashtag-bar a:focus { color: var(--color-accent-fg); background-color: var(--color-accent); } + .app-body .hashtag-bar a:hover span { text-decoration: none; } @@ -2822,14 +3190,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu margin-top: 8px; gap: 9px; } + .app-body .status__action-bar .status__action-bar__button-wrapper { flex-grow: 0; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) :is(button, .status__action-bar__dropdown) { transition: all .3s; } + .app-body .status__action-bar__button-wrapper:last-child { position: absolute; right: 18px; @@ -2838,6 +3209,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar .icon-button.disabled { pointer-events: none; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button:is( @@ -2859,24 +3231,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .icon-button.star-icon.activate > .icon-star { /* Disable default star spinning animation */ animation: none; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button.star-icon.active > .icon-star { animation: bounce .4s ease-out !important; } + .app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet { opacity: 1; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button.active>.icon-retweet { animation: launch 1.2s ease-in 1 !important; } + .app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, .app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { animation: bounce-vertical .4s ease-out !important; } + .app-body .status__action-bar .icon-button, .app-body .detailed-status__action-bar .icon-button { min-width: 32px; @@ -2884,19 +3261,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 8px; position: relative; } + .app-body .detailed-status__action-bar .icon-button { min-width: 40px; height: 40px; } + .app-body .detailed-status__action-bar .icon-button > .icon { width: 25px; height: 25px; } + .app-body .detailed-status__action-bar .icon-button .app-body .icon-button.star-icon.active, .app-body .notification__favourite-icon-wrapper .star-icon { color: #ffb609; } + .app-body .status__prepend { display: inline-flex; padding: 0 10px; @@ -2913,33 +3294,42 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline-offset: -1px; font-size: 13px; } + .app-body .status__prepend:has(.status__prepend__icon .icon-retweet) { padding-left: 35px; } + .app-body .status__prepend__icon { height: 20px; text-align: right; } + .app-body .status__prepend .status__prepend__icon:has(.icon-retweet) { order: 2; } + .app-body .status__prepend__icon .icon { transform: scale(.9); } + .app-body .detailed-status__wrapper .status__prepend__icon { width: 46px; } + .app-body .status__prepend > span { color: var(--color-fg-muted); white-space: nowrap; } + .app-body .status__prepend:has(.status__prepend__icon > .icon-thumb-tack) > span { color: var(--color-content-fg); font-weight: 600; } + .app-body .status__prepend .muted .emojione { opacity: 1; } + .app-body .status-card, .app-body .status-card.compact { background-color: var(--color-content-bg); @@ -2948,39 +3338,48 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: all .3s; border-radius: 8px; } + .app-body .status-card:hover, .app-body .status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } + .app-body .status-card:active, .app-body .status-card.compact:active { transform: scale(.98); } + .app-body .status-card__image { background: var(--color-content-secondary-bg); } + .app-body .status-card__image .icon { width: 32px; height: 32px; } + .app-body .status-card[href*="/@" i] { align-items: start; } + .app-body .status-card[href*="/@" i] .status-card__description { margin-top: 2px; white-space: normal; } + .app-body .status-card[href*="/@" i] .status-card__image { order: 2; background-color: transparent; padding: 8px; box-sizing: border-box; } + .app-body .status-card[href*="/@" i]:not(.expanded) .status-card__image { height: 120px; width: 120px; } + .app-body .status-card[href*="/@" i] .status-card__image-image { border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -2989,26 +3388,32 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline: 1px solid var(--color-lines-translucent); outline-offset: -1px; } + .app-body .status-card[href*="/@" i] .status-card__content { display: flex; flex-flow: column; } + .app-body .status-card__title { order: 1; line-height: 1.3; font-size: 18px; margin-bottom: 3px; } + .app-body .status-card__host { order: 2; } + .app-body .status-card__description { order: 3; } + .app-body .status-card__image:has(.icon-file-text:only-child), .app-body .status-card__description:empty { display: none; } + .app-body .status-card__title, .app-body .status-card__description, .app-body .status-card__author, @@ -3016,14 +3421,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); transition: all .2s; } + .app-body .status-card__host { color: var(--color-content-fg-muted); } + .app-body .status-card:active .status-card__host, .app-body .status-card:focus .status-card__host, .app-body .status-card:hover .status-card__host { color: var(--color-accent); } + .app-body .status-card:active .status-card__author, .app-body .status-card:active .status-card__description, .app-body .status-card:active .status-card__title, @@ -3035,71 +3443,87 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status-card:hover .status-card__title { color: var(--color-content-fg); } + .app-body .status-card__author strong { font-weight: 500; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status-card:not(.expanded) .status-card__image { width: 80px; } + .app-body .status-card:not(.expanded,:has(.icon-file-text)) .status-card__content { padding-top: 0; padding-bottom: 0; } + .app-body .status-card[href*="/@" i]:not(.expanded,:has(.icon-file-text)) .status-card__content { padding-top: 12px; padding-bottom: 12px; } + .app-body .status-card:not(.expanded) .status-card__host { margin-bottom: 2px; font-size: 12px; } + .app-body .status-card:not(.expanded) .status-card__title { font-size: 16px; } + .app-body .status-card:not(.expanded) .status-card__description { margin-top: 2px; font-size: 12px; } } + .layout-multiple-columns .status-card:not(.expanded) .status-card__image { width: 80px; } + .layout-multiple-columns .status-card:not(.expanded,:has(.icon-file-text),[href*="/@" i]) .status-card__content { padding-top: 0; padding-bottom: 0; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__host { margin-bottom: 2px; font-size: 12px; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__title { font-size: 16px; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__description { margin-top: 2px; font-size: 12px; } + .app-body .status-card:has(+ .more-from-author) { box-sizing: border-box; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } + .app-body .status-card + .more-from-author { background-color: var(--color-content-secondary-bg); border: 1px solid var(--color-lines); border-top: 0; } + .app-body .more-from-author { color: var(--color-content-fg); overflow: hidden; } + .app-body .more-from-author .logo { color: var(--color-content-fg); min-width: 16px; height: 16px; } + .app-body .more-from-author > span { flex-grow: 1; overflow: hidden; @@ -3107,23 +3531,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu text-overflow: ellipsis; mask-image: linear-gradient(90deg, black 80%, transparent 96%); } + .app-body .notification-ungrouped .more-from-author :is(.account__avatar) { width: 16px !important; height: 16px !important; } + .app-body .more-from-author a:is(:active, :hover, :focus) { color: var(--color-accent); } + .app-body .more-from-author a { color: var(--color-content-fg); font-weight: 700; } + .app-body .status__content p { margin-bottom: 12px; } + .app-body .status__content p:last-child { margin-bottom: 0; } + .app-body .content-warning { background: none; color: var(--color-content-fg); @@ -3137,14 +3567,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu line-height: 1.26; position: relative; } + .app-body .detailed-status .content-warning { font-size: 19px; line-height: 1.26; } + .app-body .content-warning::before, .app-body .content-warning::after { display: none; } + .app-body .content-warning .link-button { background-color: transparent; width: 100%; @@ -3156,6 +3589,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: end; text-decoration: none; } + .app-body .content-warning .link-button span { background-color: transparent; background-image: var(--icon-eye-shut); @@ -3182,36 +3616,42 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: relative; z-index: 1; } + .app-body .content-warning .link-button:hover span { - border-color: rgba(68, 74, 90, .6); + border-color: rgba(68, 74, 90, 60%); } @media (prefers-color-scheme: dark) { .app-body .content-warning .link-button:hover span { - border-color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, 30%); } } + .app-body .content-warning .link-button:active span { transform: scale(.95); } + .app-body .content-warning:has(+ .status__content > .status__content__text--visible) .link-button span { background-image: var(--icon-eye-open); } @media (prefers-color-scheme: dark) { .app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span { - border-color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, 30%); } } .app-body .icon-button.overlayed { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); border-radius: 7px; } + .app-body .icon-button.overlayed:hover { - background-color: rgba(0, 0, 0, .4); + background-color: rgba(0, 0, 0, 40%); } + .app-body .status__wrapper--filtered__button { color: var(--color-accent); } + .app-body .status__wrapper--filtered { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); @@ -3231,6 +3671,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .video-player { transition: transform .3s; } + .app-body .media-gallery__item { border-radius: 8px !important; outline: 1px solid var(--color-lines-translucent); @@ -3243,71 +3684,85 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu min-height: unset; width: auto; } + .app-body .status--in-thread .more-from-author { margin-inline-start: 0; } + .app-body .account-gallery__container { gap: 4px; padding: 4px; } + .app-body .media-gallery__item, .app-body .media-gallery__item-thumbnail, .app-body .media-gallery__item-gifv-thumbnail { cursor: pointer; transition: .2s transform; } + .app-body .media-gallery__item:active { transform: scale(.98); } + .app-body .media-gallery__item-thumbnail img, .app-body .media-gallery__alt__popover { border-radius: 8px; } + .app-body .media-gallery__gifv:is(:active, :hover)::after { display: none; } + .app-body .picture-in-picture .video-player::after { border-radius: 0; } + .app-body .media-gallery__preview, .app-body .video-player { background-color: var(--color-content-secondary-bg); } + .app-body .media-gallery__preview { - outline: 1px solid rgba(0, 0, 0, 0.05); + outline: 1px solid rgba(0, 0, 0, 5%); outline-offset: -1px; height: calc(100% - 1px); border-radius: 8px; transition: all .2s; } + .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { outline: 1px solid var(--color-lines-translucent); } + .app-body .media-gallery__actions__pill { border-radius: 6px; padding: 3px 8px; font-weight: 500; - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); transition: all .2s; } + .app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-content-bg); - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, 10%); color: var(--color-content-fg); border-radius: 8px; } + .app-body .spoiler-button__overlay__label > span:first-child { font-weight: bold; } .app-body :is(.media-gallery__alt__label, .media-gallery__gifv__label) { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); border-radius: 6px; } + .app-body .spoiler-button:not(.spoiler-button--minified) ~ .media-gallery__item :is(.media-gallery__alt__label, .media-gallery__gifv__label) { display: none; } @@ -3316,9 +3771,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%); border: 1px solid var(--color-lines-translucent); } + .app-body .media-gallery__alt__popover :is(p, h4) { color: var(--color-content-fg); } + .app-body .media-gallery__alt__popover h4 { font-weight: bold; } @@ -3331,9 +3788,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 0 0 8px 8px; contain: content; } + .app-body .empty-column-indicator a { color: var(--color-accent); } + .app-body .explore__links > .empty-column-indicator { border: 0; } @@ -3351,12 +3810,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu font-size: 95%; line-height: 1.5; } + .app-body .timeline-hint a { color: var(--color-accent); } + .app-body .timeline-hint p { opacity: .7; } + .app-body .timeline-hint::before { content: " "; display: block; @@ -3369,6 +3831,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: 0; border-radius: 8px; } + .app-body .timeline-hint::after { content: " "; background-image: var(--icon-reply-all); @@ -3381,6 +3844,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 40px; height: 40px; } + .app-body .timeline-hint > :is(p, a) { position: relative; z-index: 0; @@ -3394,18 +3858,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .follow_requests-unlocked_explanation a { color: var(--color-accent); } + .app-body .conversation__unread { background-color: var(--color-accent); } + .app-body .conversation__unread { color: var(--color-accent-fg); } + .app-body .conversation__content__names a strong { font-weight: bold; } + .app-body .conversation__content__names, .app-body .conversation__content__names a, .app-body .conversation__content__relative-time, @@ -3413,26 +3882,33 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .conversation .status__content p { color: var(--color-content-fg); } + .app-body .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } -.app-body .conversation.unread:before { + +.app-body .conversation.unread::before { border-color: var(--color-accent); } + .app-body .conversation__content__relative-time { opacity: .7; } + .app-body .conversation__content { position: relative; } + .app-body .account__avatar-composite { border-radius: 0; padding: 1px; } + .app-body .account__avatar-composite .account__avatar { height: auto !important; } + .app-body .account__avatar-composite__label { display: none; } @@ -3442,6 +3918,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-ungrouped--direct .notification-ungrouped__header { --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%); } + .app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover), .app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar, .app-body .status__wrapper.status__wrapper-direct.focusable:focus, @@ -3459,6 +3936,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 50px 50px 50px 10px; transition: all .2s; } + .app-body :is(.detailed-status__wrapper-direct) .status__prepend { margin-inline-start: 0; margin-block-end: 0; @@ -3470,23 +3948,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline: 0; font-size: 13px; } + .app-body :is(.detailed-status__wrapper-direct):has(.status__prepend) { padding-top: 40px; } + .app-body :is(.status__wrapper-direct):not(:has(.status__line)) .status__prepend { margin-inline-start: 66px; } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon-wrapper { height: 20px; } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .icon-at { background-image: var(--icon-at-inv); } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon { width: 20px; height: 20px; transform: scale(.85); } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend > span { color: var(--color-accent-fg); margin-top: -1px; @@ -3495,6 +3979,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-ungrouped--direct .notification-ungrouped__header > .notification-ungrouped__header__icon > svg { display: none; } + .app-body .notification-ungrouped--direct .notification-ungrouped__header > span { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -3512,30 +3997,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; box-shadow: inset 0 20px var(--color-bg); } -.app-body .column-header__wrapper.active:before { + +.app-body .column-header__wrapper.active::before { top: -17px; bottom: unset; - opacity: 30%; + opacity: 0.3; height: 35px; width: 100%; background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%); } + .app-body .column-header__wrapper.active { box-shadow: none; } -@media screen and (min-width:1175px) { - .app-body .column-header__wrapper.active:before { +@media screen and (width >=1175px) { + .app-body .column-header__wrapper.active::before { top: unset; bottom: -15px; border-top: 1px solid var(--color-lines-translucent); } + .app-body .column-header__wrapper.active { box-shadow: 0 1px 0 var(--color-lines-translucent); } } + .app-body .column-header { border-radius: 8px; } + .app-body .column-header, .app-body .column-back-button { background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%); @@ -3552,14 +4042,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .column-back-button { padding-left: 15px; } + .app-body .column-header__button, .app-body .column-header__back-button { background-color: transparent; border: 0; } + .app-body .column-header__button { color: var(--color-content-fg); transition: all .2s; @@ -3567,41 +4060,50 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 42px; margin: 4px 4px 4px 0; } + .app-body .column-header__button:active { transform: scale(.8); } + .app-body .column-header__icon { transform: scale(1.1); margin-right: 4px; } + .app-body .column-header__buttons .column-header__button:has(> .icon:only-child) { width: 42px; } + .app-body .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; } + .app-body .column-header__button:is(.active, .active:hover, :hover) { color: var(--color-accent); background-color: var(--color-accent-bg); } + .app-body .column-header__button.active .icon { transform: none; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-header__wrapper::after, .app-body:not(.layout-multiple-columns) .column-back-button::after { display: none; } + .app-body .column-header__buttons { height: 55px; } + .app-body:not(.layout-multiple-columns) .column-header, .app-body:not(.layout-multiple-columns) .column-back-button { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } + .app-body:not(.layout-multiple-columns) .column-header__button, .app-body:not(.layout-multiple-columns) .column-header__button:is(.active, .active:hover, :hover) { padding: 0 12px; @@ -3613,32 +4115,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-back-button--slim-button::after { display: none; } + .app-body .column-back-button--slim-button { top: -50px } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-back-button--slim-button { height: 50px; } } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body:not(.layout-multiple-columns) .column-back-button--slim-button { display: none; } } + .app-body :is(.column-header__back-button, .column-back-button) { gap: 5px; } + .app-body .column-back-button__icon { margin-inline-end: 0; } + .app-body :is(.column-header__back-button, .column-back-button) span, .app-body .column-header__back-button { position: relative; } + .app-body :is(.column-header__back-button, .column-back-button):hover { text-decoration: none; } + .app-body :is(.column-header__back-button, .column-back-button) span::before, .app-body .column-header__back-button:has(> svg:last-child)::before { content: " "; @@ -3652,16 +4160,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; transition: all .3s; } + .app-body :is(.column-header__back-button, .column-back-button) span::before { left: -35px; right: -12px; bottom: -11px; top: -10px; } + .app-body :is(.column-header__back-button, .column-back-button):hover span::before, .app-body .column-header__back-button:has(> svg:last-child):hover::before { background-color: var(--color-accent-bg); } + .app-body :is(.column-header__back-button, .column-back-button):active span::before, .app-body .column-header__back-button:has(> svg:last-child):active::before { transform: scale(.9); @@ -3676,9 +4187,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: background .3s; padding: 8px; } + .app-body :is(.load-gap, .load-more):is(:active, :hover) { background-color: var(--color-accent-lines); } + .app-body :is(.load-gap, .load-more) .icon-ellipsis-h { background-image: var(--icon-ellipsis-column-link-active-accent); } @@ -3689,32 +4202,39 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-right: 1px solid var(--color-lines); border-bottom: 0; } + .app-body .column-header__collapsible:is(:not(.collapsed), .animating) { border-bottom: 1px solid var(--color-lines); } + .app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } + .app-body .column-header__select-row { border-color: var(--color-lines); } + .app-body .column-header__select-row__actions button { background-color: var(--color-accent-bg); color: var(--color-accent); border-color: var(--color-accent-bg); } + .app-body .column-header__select-row__actions button:hover { border-color: var(--color-accent); } + .app-body .column-header__select-row__actions button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible { box-shadow: none; border-radius: 0; } + .app-body .column-header__select-row { border-color: var(--color-lines); background-color: var(--color-content-secondary-bg); @@ -3724,32 +4244,40 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-width: 0 0 1px; } } + .app-body .column-header__collapsible-inner { border: 0; } + .app-body .column-settings__section { color: var(--color-content-fg-bold); } + .app-body .setting-toggle__label { color: var(--color-content-fg); } + .app-body .column-header > button { padding: 0 0 0 15px; } + .app-body .column-header > button:nth-child(2) { padding-left: 0; } + .app-body .column-header .column-header__back-button { padding-right: 15px; } + .app-body .column-header > button, .app-body .column-header .column-header__back-button { font-weight: bold; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .ui { padding-top: 55px; } + .app-body:not(.layout-multiple-columns) .ui__header { background-color: transparent; border-bottom: 0; @@ -3759,9 +4287,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: none; backdrop-filter: none; } + .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo { margin-left: 3px; } + .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { box-shadow: none; display: block; @@ -3770,6 +4300,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 45px; border-bottom: 0; } + .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { display: block; top: 0; @@ -3778,12 +4309,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 55px; position: fixed; } - .app-body:not(.layout-multiple-columns):not(:has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { + + .app-body:not(.layout-multiple-columns, :has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { z-index: 3; } + .app-body:not(.layout-multiple-columns):has(.ui .ui__header__links > .button[href="/auth/sign_in"]) .tabs-bar__wrapper :is(.column-back-button, .column-header > *) { display: none; } + .app-body:not(.layout-multiple-columns) :is( .column-header, @@ -3796,9 +4330,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 0; margin: 0; } + .app-body .column-header__icon { display: none; } + .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); @@ -3830,32 +4366,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } } + .app-body:not(.layout-multiple-columns) .column-header__collapsible { margin-top: 1px; position: absolute; left: -45px; right: -55px; } + .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { border-bottom: 1px solid var(--color-lines); } } -@media screen and (max-width:885px) { +@media screen and (width <=885px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible:is(:not(.collapsed), .animating) { border-left-color: var(--color-content-secondary-bg); border-right-color: var(--color-content-secondary-bg); } } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { border-color: transparent; } + .app-body:not(.layout-multiple-columns) .ui::after { border-bottom: 1px solid var(--color-lines); } } @media (prefers-color-scheme: dark) { - @media screen and (max-width:1174px) { + @media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { border-color: var(--color-lines); } @@ -3871,27 +4410,30 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); } + .app-body .account__header + .account__section-headline { border-left: 0; border-right: 0; } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body:not(.layout-multiple-columns) .explore__search-header + .account__section-headline { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .app-body:not(.layout-multiple-columns) .notification__filter-bar { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 10px; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) :is(.account__section-headline, .notification__filter-bar) { border-left: 0; border-right: 0; } } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button) { @@ -3903,11 +4445,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu max-height: 45px; padding: 14px 10px; } + .app-body :is(.account__section-headline, .notification__filter-bar) .icon { margin-top: -1.5px; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { @@ -3915,6 +4459,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { @@ -3922,16 +4467,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { display: none; } + .app-body :is(.account__section-headline, .notification__filter-bar) button { background-color: transparent; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { @@ -3950,6 +4498,7 @@ button { transform: unset; border: 0; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { @@ -3966,35 +4515,44 @@ button { .app-body .notification__filter-bar .icon-reply-all { background-image: var(--icon-reply-accent); } + .app-body .notification__filter-bar .active .icon-reply-all { background-image: var(--icon-reply); } + .app-body .notification__filter-bar .icon-star { background-image: var(--icon-star-accent); } + .app-body .notification__filter-bar .active .icon-star { background-image: var(--icon-star); } + .app-body .notification__filter-bar .icon-retweet { background-image: var(--icon-boost-accent); } + .app-body .notification__filter-bar .active .icon-retweet { background-image: var(--icon-boost); } + .app-body .notification__filter-bar .icon-tasks { background-image: var(--icon-poll-accent); } + .app-body .notification__filter-bar .active .icon-tasks { background-image: var(--icon-poll); } + .app-body .notification__filter-bar .icon-home { background-image: var(--icon-post-notification-accent); } + .app-body .notification__filter-bar .active .icon-home { background-image: var(--icon-post-notification); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .account__header + .account__section-headline { border-radius: 0; } @@ -4007,18 +4565,23 @@ button { display: flex; flex-flow: column; } + .app-body .column-link--transparent { color: var(--color-fg); } + .app-body .ui__header__logo .logo--icon { display: none; } + .app-body .ui__header__links .button.button-secondary { padding: 8px 15px; } + .app-body .ui__header__links .button.button-secondary[href="/search"] { display: none; } + .app-body .ui__header__links .button.button-secondary[href="/publish"] { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -4034,18 +4597,20 @@ button { background-size: 22px; border-radius: 50%; box-shadow: - 0 1px 1px rgba(0, 0, 0, .2), - 0 2px 10px rgba(0, 0, 0, .2); + 0 1px 1px rgba(0, 0, 0, 20%), + 0 2px 10px rgba(0, 0, 0, 20%); } + .app-body .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } + .app-body .ui__header__links .button.button-secondary[href="/publish"] span { color: transparent; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .layout-single-column .ui__header__links { padding-left: 12px; } @@ -4068,6 +4633,7 @@ button { background-position: center; background-size: 32px auto; } + .app-body .column-link.column-link--logo svg, .app-body .ui__header__logo svg { display: none; @@ -4076,6 +4642,7 @@ button { .app-body .navigation-panel__logo { margin-bottom: 5px; } + .app-body .column-link:not(.column-link--logo) { padding: 15px 20px 16px 13px; gap: 7px; @@ -4086,21 +4653,25 @@ button { overflow: visible; transform-origin: 60px center; } + .app-body .column-link--transparent:is(.active, .active:hover) { color: var(--color-content-fg); font-weight: bold; } + .app-body .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } + .app-body .column-link--transparent span { position: relative; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .column-link:not(.column-link--logo) { transition: all .3s; } + .app-body .column-link--transparent span::before { content: " "; left: -52px; @@ -4113,16 +4684,20 @@ button { z-index: -1; bottom: -14px; } + .app-body .column-link--transparent:hover span::before { background-color: color-mix(in srgb, var(--color-accent), transparent 85%); } + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: transparent; } + .app-body .column-link--transparent:active { transform: scale(.95); } } + .app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -4132,12 +4707,13 @@ button { border: 0; z-index: 1; } + .app-body .compose-panel hr, .app-body .navigation-panel .list-panel hr { display: none; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .navigation-panel hr:has(+ .column-link[href="/settings/preferences"]) { margin-right: 25px; margin-left: 10px; @@ -4145,10 +4721,11 @@ button { border-color: var(--color-lines); } } + .app-body .column-link span { vertical-align: middle; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; height: calc(4.2em + var(--safe-area-bottom)); @@ -4156,6 +4733,7 @@ button { left: 0; z-index: 3; } + .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; @@ -4168,11 +4746,13 @@ button { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { flex-flow: row; overflow-x: auto; mask-image: linear-gradient(90deg, black 80%, transparent 96%); } + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), .app-body .navigation-panel .column-link:is(.active, .active:hover, :active), .app-body .navigation-panel .navigation-panel__menu::after { @@ -4189,15 +4769,18 @@ button { transform-origin: center; transition: .3s transform; } + .app-body .navigation-panel .navigation-panel__menu::after { content: " "; } + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { mask-image: none; } + .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3), .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *, .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4), @@ -4208,43 +4791,52 @@ button { .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * { flex: 50vw; } + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::after { display: none; } + .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active { transform: scale(.85); } + .app-body .column-link__icon { margin: 0; transform: scale(1.3); } + .app-body .column-link span { padding-left: .5em; } + .app-body .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; } + .app-body .columns-area__panels { padding-bottom: 4em; } + .app-body .columns-area__panels .navigation-panel__legal { margin: 0; padding: 0; } + .app-body .columns-area__panels .navigation-panel__legal .column-link--transparent { height: calc(100% - 13px); box-sizing: border-box; border: 0; } + .app-body .navigation-panel .flex-spacer { display: none; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .columns-area__panels__main { width: 100%; margin-left: -55px; @@ -4258,30 +4850,36 @@ button { padding-bottom: 5px; background-color: var(--color-content-bg); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .account__header { border-left: 0; border-right: 0; } } + .app-body .account__header__image { height: 200px; background-color: var(--color-content-bg); border-bottom: 0; margin: 0; } + .app-body .account__header__image img { background-color: var(--color-content-secondary-bg); } + .app-body .account__header__bar { border: 0; } + .app-body .account__header__bar .avatar { transition: transform .3s; } + .app-body .account__header__bar .avatar:active { transform: scale(.92); } + .app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; margin: 0; @@ -4291,41 +4889,51 @@ button { height: 100px !important; background-color: var(--color-content-bg); } + .app-body .account__header__tabs__name h1, .app-body .account__header__tabs__name h1 small { color: var(--color-content-fg); } + .app-body .account__header__tabs__name h1 > span { font-size: 18px; } + .app-body .account__header__tabs__name h1 small > span:first-child { opacity: .7; } + .app-body .account__header__tabs__name .icon-lock { height: 20px; width: 16px; top: unset; vertical-align: bottom; } + .app-body .account__header__content a { color: var(--color-accent); text-decoration: none; } + .app-body .account__header__content a:hover { text-decoration: underline; } + .app-body .account__header__extra__links a strong { color: var(--color-content-fg-bold); } + .app-body .account__header__account-note label { margin-bottom: 0; } + .app-body .account__header__account-note label, .app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; font-style: normal; } + .app-body .account__header__account-note textarea { color: var(--color-content-fg); border-radius: 8px; @@ -4336,23 +4944,28 @@ button { outline-offset: -1px; transition: all .2s; } + .app-body .account__header__account-note textarea:placeholder-shown { padding-left: 0; padding-right: 0; } + .app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); padding-left: 10px; padding-right: 10px; } -.app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) { + +.app-body .account__header__account-note textarea:not(:placeholder-shown, :focus) { outline-color: var(--color-lines); box-shadow: 2px 3px var(--color-content-secondary-bg); } + .app-body .account__header__account-note textarea:not(:placeholder-shown):focus { outline-color: var(--color-accent); box-shadow: 2px 3px var(--color-accent-bg); } + .app-body .account__header__badges .account-role { color: var(--color-content-fg); border: 0; @@ -4362,18 +4975,22 @@ button { background-color: var(--color-content-secondary-bg); gap: 5px; } + .app-body .account__header__badges .account-role span:not(.account-role__domain) { font-weight: 500; } + .app-body .account-role svg { opacity: 1; color: var(--color-accent); } + .app-body .account__header__extra__links a, .app-body .account__header__bio .account__header__content, .app-body .account__header__bio .account__header__fields dd { color: var(--color-content-fg); } + .app-body .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; @@ -4384,18 +5001,22 @@ button { background-color: var(--color-secondary-bg); } } + .app-body .account__header__bio .account__header__fields:has(dl:only-child) { display: none; } + .app-body .account__header__bio .account__header__fields dt { font-weight: bold; font-size: 12px; } + .app-body .account__header__bio .account__header__fields :is(dl, .verified) { border-bottom: 0; position: relative; } -.app-body .account__header__bio .account__header__fields dl:not(:last-child):after { + +.app-body .account__header__bio .account__header__fields dl:not(:last-child)::after { display: block; content: " "; height: 1px; @@ -4407,47 +5028,55 @@ button { border-radius: 50px; } @media (prefers-color-scheme: dark) { - .app-body .account__header__bio .account__header__fields dl:not(:last-child):after { + .app-body .account__header__bio .account__header__fields dl:not(:last-child)::after { background-color: var(--color-accent-bg); } } + .app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } + .app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ margin-top: 0; border-top-width: 0; } + .app-body .account__header__bio .account__header__fields .verified :is(a, dd), .app-body .hover-card .account-fields dl.verified dd a { color: var(--color-accent); gap: 5px; } + .app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); } + .app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ border-top: 0; border-right: 0; border-left: 0; background: none; } + .app-body .account__header__extra .account__header__fields .verified dd > span:first-child { vertical-align: bottom; } + .app-body .account__header__extra .account__header__fields .verified__mark { float: left; transform: scale(1.1); } + .app-body .account__header__bio .account__header__fields .verified:last-child { border-bottom: 0; } .app-body .account__header__tabs__buttons .icon-button.copied, .app-body .account__header__tabs__buttons .icon-button.copied:is(:active, :focus, :hover) { - background-color: rgba(121, 189, 154, 0.3); + background-color: rgba(121, 189, 154, 30%); } .app-body .follow-request-banner, @@ -4455,10 +5084,12 @@ button { background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); } + .app-body .follow-request-banner__message, .app-body .moved-account-banner__message { color: var(--color-content-fg); } + .app-body .moved-account-banner__message { font-weight: bold; } @@ -4476,69 +5107,86 @@ button { font-weight: 500; transition: all .2s; } + .app-body .account__domain-pill:hover { background-color: var(--color-accent-bg); } + .app-body .account__domain-pill.active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .dropdown-animation.account__domain-pill__popout { animation: none; } + .app-body .account__domain-pill__popout { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 8px; } + .app-body .account__domain-pill__popout__header__icon { background-color: var(--color-accent); } + .app-body .account__domain-pill__popout__handle { padding: 12px; } + .app-body :where(.account__domain-pill__popout__header, .account__domain-pill__popout__parts) :is(h3, h6) { color: var(--color-content-fg); font-weight: 600; } + .app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon { align-items: start; padding-top: 2px; } + .app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon .icon { width: 28px; height: 28px; } + .app-body .account__domain-pill__popout__parts > div:first-child .account__domain-pill__popout__parts__icon .icon { background-image: var(--icon-direct-messages-accent); } + .app-body .account__domain-pill__popout__parts > div:last-child .account__domain-pill__popout__parts__icon .icon { background-image: var(--icon-globe-accent); } + .app-body .hover-card { background-color: color-mix(in srgb, var(--color-content-bg), transparent 10%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--color-lines); } + .app-body .hover-card__bio, .app-body .hover-card .display-name bdi, .app-body .account-fields, .app-body .hover-card__number { color: var(--color-content-fg); } + .app-body .hover-card .display-name__html { font-weight: 600; } + .app-body .account-fields { font-size: 95%; } + .app-body .hover-card .account-fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; padding: 8px; } + .app-body .hover-card .account-fields dl:not(:first-child:last-child) { gap: 10px; padding-bottom: 6px; @@ -4548,15 +5196,18 @@ button { .app-body .hover-card .account-fields { background-color: var(--color-secondary-bg); } + .app-body .hover-card .account-fields dl { border-color: var(--color-accent-bg); } } + .app-body .hover-card .account-fields dl:last-child:not(:first-child) { padding-top: 6px; padding-bottom: 0; border-bottom: 0; } + .app-body .hover-card .account-fields dl dt { width: 30%; min-width: 30%; @@ -4566,6 +5217,7 @@ button { text-transform: uppercase; font-size: 80%; } + .app-body .hover-card .account-fields dl dd { text-align: left; justify-content: flex-start; @@ -4584,6 +5236,7 @@ button { border-bottom: 1px solid var(--color-lines); background-color: var(--color-content-secondary-bg); } + .app-body .status__wrapper:has(.icon-thumb-tack)::before { position: absolute; left: 0; @@ -4594,16 +5247,20 @@ button { content: ""; background-color: var(--color-content-bg); } + .app-body .status__wrapper:has(.icon-thumb-tack) { padding-bottom: 20px; margin-top: -8px; } + .app-body .status__wrapper:has(.icon-thumb-tack) :is(.status__content__translate-button, .translate-button .link-button) { bottom: 20px; } + .app-body .account-timeline__header + article .status__wrapper:has(.icon-thumb-tack) { margin-top: 0; } + .app-body .account-timeline__header + article .status__wrapper:has(.icon-thumb-tack)::before { display: none; } @@ -4615,34 +5272,42 @@ button { background-color: var(--color-content-bg); overflow: hidden; } + .layout-multiple-columns .explore__links.scrollable { background-color: var(--color-content-bg); overflow-y: auto; } + .app-body .explore__links .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); padding: 15px 18px; } + .app-body .explore__links .trends__item:last-child { border-bottom: 0; } + .app-body .trends__item__name, .app-body .trends__item__current { color: var(--color-fg-muted); } + .app-body .trends__item__name a { color: var(--color-fg); } + .app-body .getting-started__trends { padding: 0; display: flex; flex-flow: column; } + .app-body .getting-started__trends h4 { border-bottom: 0; padding: 0; } + .app-body .getting-started__trends h4 > :is(a, span) { padding: 15px 20px 6px 47px; margin-left: 3px; @@ -4652,18 +5317,22 @@ button { display: block; transition: all .3s; } + .app-body .getting-started__trends h4 a:hover { color: var(--color-accent); } + .app-body .getting-started__trends h4 a:active { transform: scale(.95); } + .app-body .getting-started__trends h4 a::after { content: '\2192'; margin-left: 0; opacity: 0; transition: all .2s; } + .app-body .getting-started__trends:hover h4 a::after { opacity: 1; margin-left: 5px; @@ -4672,7 +5341,7 @@ button { .app-body .getting-started__trends .trends__item { padding-left: 19px; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .getting-started__trends { display: none; } @@ -4690,9 +5359,11 @@ button { content: " "; display: block; } + .app-body .trends__item__name span { white-space: pre-wrap; } + .app-body .trends__item__sparkline { flex: 0 0 auto; position: relative; @@ -4705,6 +5376,7 @@ button { transform: scale(1.25); transition: all .3s; } + .app-body .getting-started__trends .trends__item__sparkline { background-color: var(--color-secondary-bg); } @@ -4713,12 +5385,14 @@ button { background-color: var(--color-content-secondary-bg); } } + .app-body .trends__item__sparkline svg { width: 50px; height: 30px; position: absolute; right: -2px; } + .app-body .trends__item__sparkline::after { position: absolute; display: block; @@ -4734,10 +5408,11 @@ button { .app-body .trends__item__sparkline path:last-child { stroke: var(--color-accent) !important; } + .app-body .trends__item__sparkline path:first-child { fill: var(--color-accent) !important; fill-opacity: .4 !important; - transform: translate(0px, 0.2px); + transform: translate(0, 0.2px); } @@ -4751,12 +5426,15 @@ button { background-color: var(--color-content-secondary-bg); border: 0; } + .app-body .hashtag-header__header { margin-bottom: 0; } + .app-body .hashtag-header__header h1 { color: var(--color-content-fg); } + .app-body .hashtag-header .hashtag-header__header + div { color: var(--color-content-fg); font-size: 85%; @@ -4764,28 +5442,31 @@ button { margin-top: -5px; width: max-content; } -@media screen and (max-width:460px) { +@media screen and (width <=460px) { .app-body .hashtag-header .hashtag-header__header + div { max-width: 55%; line-height: 1.5; margin-top: -2px; } + .app-body .hashtag-header .hashtag-header__header + div > span { display: inline-block; margin-right: 5px; } } + .layout-multiple-columns .hashtag-header .hashtag-header__header + div { max-width: 55%; line-height: 1.5; margin-top: -2px; } + .layout-multiple-columns .hashtag-header .hashtag-header__header + div > span { display: inline-block; margin-right: 5px; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .hashtag-header .hashtag-header__header button { transform: translate(0, 8px); } @@ -4800,46 +5481,57 @@ button { border: 0; border-bottom: 1px solid var(--color-lines); } + .app-body .account-card__header { padding: 0; border-radius: 0; height: 128px; overflow: hidden; } -.app-body .scrollable .account-card__bio:after { + +.app-body .scrollable .account-card__bio::after { background: linear-gradient(270deg, var(--color-content-bg), transparent); } + .app-body .account-card__header img { background-color: var(--color-content-secondary-bg); } + .app-body .account-card__title__avatar .account__avatar { border: 0; border-radius: 50%; overflow: visible; } + .app-body .account-card__title__avatar img { border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-content-bg); } + .app-body .account-card__title .display-name bdi, .app-body .account-card__counters__item, .app-body .account-card__counters__item small { color: var(--color-content-fg); } + .app-body .account-card__counters__item small { opacity: .7; } + .account-card__title .display-name bdi .display-name__html { font-weight: bold; } + .app-body .account-card__bio a { color: var(--color-accent); } + .app-body .filter-form { background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); } + .app-body .filter-form__column { padding: 10px 15px; } @@ -4849,6 +5541,7 @@ button { gap: 2px; padding-bottom: 14px; } + .app-body .explore__suggestions__card__source span { background-color: var(--color-content-secondary-bg); padding: 6px 12px; @@ -4857,25 +5550,29 @@ button { color: var(--color-fg-muted); font-weight: 500; } + .app-body .explore__suggestions__card__body__main__name-button .display-name__account { color: var(--color-content-fg); opacity: .75; } + .app-body .explore__suggestions__card .icon-button { background-color: var(--color-content-secondary-bg); color: var(--color-fg-muted); padding: 6px; border: 0; } + .app-body .explore__suggestions__card .icon-button:is(:active, :hover) { background-color: var(--color-accent-bg); } -@media screen and (min-width:1173px) { +@media screen and (width >=1173px) { .app-body .explore__suggestions__card .icon-button { opacity: 0; transform: translateX(50%); transition: all .3s; } + .app-body .explore__suggestions__card:hover .icon-button { opacity: 1; transform: translateX(0); @@ -4888,34 +5585,43 @@ button { background-color: var(--color-content-bg); transition: all .3s; } + .app-body .story:not(:last-child) { border-bottom: 2px solid var(--color-content-secondary-separator); } + .app-body .story, .app-body .story__details__title { color: var(--color-content-fg); } + .app-body .story__details__title { font-weight: bold; transition: all .3s; } + .app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) { background-color: var(--color-content-bg-focus); } + .app-body .story__details__publisher { color: var(--color-fg); } + .app-body .story .story__details__publisher { opacity: .7; transition: all .3s; } + .app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) :is(.story__details__publisher, .story__details__title) { color: var(--color-accent); opacity: 1; } + .app-body .story__details__shared { color: var(--color-fg-muted); } + .app-body .story__details__shared__pill { background-color: color-mix( @@ -4927,26 +5633,33 @@ button { border-radius: 8px; transition: all .3s; } + .app-body .story__details__shared__pill:hover { background-color: var(--color-accent-bg); } + .app-body .story__details__shared__pill:active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .story.expanded { gap: 20px; padding-bottom: 20px; } + .app-body .story.expanded .story__thumbnail { margin: 0; } + .app-body .story.expanded .story__thumbnail img { border-radius: 8px; } + .app-body .story__details__shared__author-link { color: var(--color-content-fg); } + .app-body .story__details__shared__author-link:hover { color: var(--color-accent); } @@ -4957,15 +5670,18 @@ button { margin-bottom: 10px; transition: transform .3s; } + .app-body .search:has(.search__icon:active) { transform: scale(.95); } + .app-body .search__input { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); - font-weight: 500; + font-weight: 400; + text-indent: 22px; padding-inline-end: 45px; padding-inline-start: 16px; outline-offset: 0; @@ -4975,95 +5691,118 @@ button { background-color .2s, outline .2s; } + .app-body .search__input::placeholder, .app-body .compose-form .spoiler-input__input::placeholder { font-weight: 500; color: var(--color-accent); } + .app-body .search__input:focus { border-color: var(--color-accent); background-color: var(--color-content-bg); outline: 3px solid var(--color-accent-bg); border-radius: 8px; } + .app-body .search__input:focus::placeholder, .app-body .compose-form .spoiler-input__input:focus::placeholder { color: var(--color-content-fg); opacity: .4; } + .app-body .search__icon .icon { padding: 5px; transform: scale(1) translateY(-50%); background-size: 24px !important; - top: 50%; + top: 12px; inset-inline-start: unset; inset-inline-end: 12px; + margin-left: 30px; } + .app-body .search__input:not(:placeholder-shown) + .search__icon:hover .icon { background-image: var(--icon-erase-active); } + .app-body .compose-panel .icon-search, .app-body .compose-panel .icon-search.active, .app-body .explore__search-header .icon-search { background-image: var(--icon-search-active); } + .app-body .compose-panel .icon-search.active, .app-body .search__icon .icon-search.active { opacity: 1; z-index: 1; } + .app-body .explore__search-results { border-radius: 0; border: 0; background-color: transparent; overflow: hidden; } + .app-body .explore__search-header { background-color: transparent; } + .app-body .explore__search-results .account { padding-top: 16px; } + .app-body .explore__search-results article:last-child > .account { border-bottom: 1px solid var(--color-lines); } + .app-body :is(.explore__search-results, .search-results__section) .trends__item { border-bottom: 2px solid var(--color-content-secondary-bg); } + .app-body :is(.explore__search-results, .search-results__section) article:first-child > .trends__item, .app-body :is(.explore__search-results, .search-results__section) > .trends__item:first-child, .app-body :is(.explore__search-results, .search-results__section) > .account:first-child { border-top: 1px solid var(--color-lines); } + .app-body :is(.explore__search-results, .search-results__section) article:last-child > .trends__item, .app-body :is(.explore__search-results, .search-results__section) > .trends__item:last-child, .app-body :is(.explore__search-results, .search-results__section) > .account:last-child { border-bottom: 1px solid var(--color-lines); } + .app-body .search-results__section { background-color: var(--color-content-bg); border-bottom: 0; } + .app-body .search-results__section__header { background-color: var(--color-content-secondary-bg); border-bottom: 0; color: var(--color-content-fg); } + .app-body .search-results__section__header button { color: var(--color-accent); } + .app-body .account .account__details > span { color: var(--color-content-fg); } + .app-body .account .account__details .verified-badge { color: var(--color-accent); } + .app-body .account .account__details .verified-badge span { font-weight: 500; } + .app-body .compose-panel:has(> .search.active) { overflow: visible; } + .app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; @@ -5071,33 +5810,41 @@ button { border: 1px solid var(--color-lines); animation: fadein-short .2s 1; } + .app-body .search__popout h4 { font-weight: bold; } + .app-body .search__popout h4, .app-body .search__popout__menu__message, .app-body .search__popout__menu__item { color: var(--color-content-fg); } + .app-body .search__popout__menu__item { align-items: center; border-radius: 6px; } + .app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } + .app-body .search__popout__menu__item :is(.icon-button, .icon-button .icon) { border-radius: 6px; transition: none; } + .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) :is(.icon-button, .icon-button .icon) { color: var(--color-accent-fg); } + .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover), .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) .icon { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } + .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover), .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { background-color: var(--color-accent); @@ -5107,6 +5854,7 @@ button { .app-body .search__popout__menu:nth-child(2):not(:has(.search__popout__menu__message)) { margin-bottom: 10px; } + .app-body .search__popout h4:has(+ .search__popout__menu:last-child, + .search__popout__menu__message) { background-color: var(--color-content-secondary-bg); padding-top: 15px; @@ -5116,6 +5864,7 @@ button { border-radius: 6px 6px 0 0; color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child, .app-body .search__popout > .search__popout__menu__message:last-child { margin: 0 0 -10px; @@ -5123,32 +5872,38 @@ button { border-radius: 0 0 6px 6px; padding: 5px; } + .app-body .search__popout > .search__popout__menu__message:last-child { padding: 5px 15px 15px; color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) { color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) mark { color: var(--color-content-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .search { margin-bottom: 0; } + .app-body:not(.layout-multiple-columns) .explore__search-header { padding-top: 2px; } + .app-body:not(.layout-multiple-columns) .search__input { padding: 13px; } + .app-body:not(.layout-multiple-columns) .explore__search-header { padding: 10px 0; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) .explore__search-header { padding: 10px; } @@ -5158,10 +5913,12 @@ button { 0% { transform: scale(120%) translate(0, 0) rotate(0deg); } + 100% { transform: scale(200%) translate(100vw, 100vh) rotate(600deg); } } + .app-body:has(.search__input[value="Tangerine UI"])::after, .app-body:has(.search__input[value="tangerine ui"])::after { content: "\1F34A"; @@ -5187,21 +5944,26 @@ button { border: 0; margin: 10px 10px 5px; } + .app-body .dismissable-banner__message h1 { color: var(--color-content-fg); margin-bottom: 8px; } + .app-body .dismissable-banner__message, .app-body .dismissable-banner .dismissable-banner__action .icon-button { color: var(--color-accent-fg); font-weight: normal; } + .app-body .dismissable-banner .dismissable-banner__action .icon-button:hover { color: var(--color-accent); } + .app-body .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: var(--color-content-bg); margin: 0; @@ -5213,20 +5975,25 @@ button { border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__action .icon-button { color: var(--color-accent); } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__message { color: var(--color-content-fg); } + .app-body .dismissable-banner__background-image { display: none; } + .app-body .dismissable-banner__message__actions .button, .app-body .dismissable-banner__message__actions .button.button-tertiary { line-height: 1.75; padding: 6px 17px; } + .app-body .dismissable-banner__message__actions { gap: 5px; } @@ -5245,10 +6012,11 @@ button { .app-body .attachment-list__list a { color: var(--color-content-fg-muted); } + .app-body .notification.unread::before, .app-body .status__wrapper.unread::before, -.app-body .notification-group--unread:before, -.app-body .notification-ungrouped--unread:before { +.app-body .notification-group--unread::before, +.app-body .notification-ungrouped--unread::before { background-color: var(--color-accent); width: 8px; border: 0; @@ -5259,25 +6027,30 @@ button { left: 5px; z-index: 2; } + .app-body .notification__message { padding: 12px 12px 5px; background-color: var(--color-post-bg); color: var(--color-content-fg-bold); transition: all .3s; } + .app-body .notification__display-name { font-weight: bold; color: var(--color-content-fg); } + .app-body .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } + .app-body .notification__report__details { color: var(--color-content-fg); } + .app-body .notification__message .icon { color: var(--color-accent); width: 18px; @@ -5285,14 +6058,16 @@ button { text-align: right; background-position: center right; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .notification__message .icon { margin-left: 34px; } } + .app-body .notification .status__wrapper { padding-top: 0; } + .app-body :is( .notification-favourite, @@ -5303,6 +6078,7 @@ button { .status__action-bar { display: none; } + .app-body .account, .app-body .notification-request { background-color: var(--color-content-bg); @@ -5310,18 +6086,22 @@ button { padding-left: 22px; padding-top: 12px; } + .app-body .notification .account { border-bottom: 0; } + .app-body .explore__search-results .account { padding-top: 16px; } + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name__account { display: block; } + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) @@ -5329,51 +6109,59 @@ button { margin-bottom: 0; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 32px; padding-right: 22px; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 27px; } } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .account { padding-left: 18px; } } + .app-body .notification .account__relationship .icon-button { padding: 5px; border-radius: 8px; transition: background-color .2s; } + .app-body .notification .account__relationship .icon-button:first-child { background-color: var(--color-confirm-bg); } + .app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { background-color: var(--color-confirm); } + .app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .notification .account__relationship .icon-button:last-child { background-color: var(--color-reject-bg); } + .app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { background-color: var(--color-reject); } + .app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .notification-list { bottom: calc(5rem + var(--safe-area-bottom)); } } + .app-body .notification-bar { background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%); color: var(--color-content-fg); @@ -5382,9 +6170,11 @@ button { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } + .app-body .notification-bar-action { transition: all .2s; } + .app-body .notification-bar-action:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); @@ -5395,19 +6185,24 @@ button { .app-body .app-form__toggle__label .hint { color: var(--color-content-fg-bold); } + .app-body .column-header__setting-btn { font-weight: 600; } + .app-body .column-settings h3 { margin-bottom: 12px; font-weight: 500; } + .app-body .column-settings section { border-color: var(--color-lines); } + .app-body .column-settings section:not(:first-child) { padding-bottom: 25px; } + .app-body .app-form__toggle__label .hint { opacity: .5; } @@ -5419,6 +6214,7 @@ button { position: relative; padding: 25px; } + .app-body .filtered-notifications-banner::before { position: absolute; display: block; @@ -5431,21 +6227,26 @@ button { border-radius: 8px; transition: all .2s; } + .app-body .filtered-notifications-banner:is(:active, :hover, :focus)::before { background-color: color-mix(in srgb, var(--color-accent), transparent 88%); } + .app-body .filtered-notifications-banner:hover::before { left: 6px; right: 6px; top: 8px; bottom: 8px; } + .app-body .filtered-notifications-banner:active::before { transform: scale(.98); } + .app-body .filtered-notifications-banner > * { z-index: 1; } + .app-body .filtered-notifications-banner .filtered-notifications-banner__badge, .app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge, .app-body .notification-request__name .filtered-notifications-banner__badge, @@ -5454,41 +6255,50 @@ button { color: var(--color-accent-fg); border-radius: 50px; } + .app-body .notification-request .account__avatar__counter { width: 19px; height: 19px; box-sizing: border-box; } + .app-body .filtered-notifications-banner__badge__badge { background-color: var(--color-content-bg); color: var(--color-content-fg); font-weight: 600; } + .app-body .filtered-notifications-banner__text { color: var(--color-content-fg); } + .app-body .filtered-notifications-banner__text strong { font-weight: 600; } + .app-body .filtered-notifications-banner .notification-group__icon { justify-content: center; } + .app-body .notification-request__name__display-name, .app-body .notification-request__name { color: var(--color-content-fg); letter-spacing: unset; } + .app-body .notification-request { padding-top: 15px; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .notification-request { margin-top: 60px; } } + .app-body .notification-group { padding: 16px 23px; } + .app-body .notification-group, .app-body .notification-ungrouped { border: none; @@ -5507,13 +6317,16 @@ button { content: " "; opacity: .7; } + .app-body .notification-ungrouped { padding: 0; } + .app-body .notification-ungrouped :is(.status__avatar, .account__avatar) { height: 46px !important; width: 46px !important; } + .app-body .notification-ungrouped :is( .attachment-list, @@ -5530,6 +6343,7 @@ button { margin-left: 0; width: 100%; } + .app-body .notification-ungrouped__header { margin-bottom: -6px; padding-top: 16px; @@ -5540,25 +6354,31 @@ button { background-color: var(--color-post-bg); transition: background .3s; } + .app-body .notification-ungrouped--direct .notification-ungrouped__header { background-color: var(--color-post-bg); transition: background .3s; } + .app-body .notification-ungrouped--mention:not(.notification-ungrouped--direct) .notification-ungrouped__header { display: none; } + .app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) { width: 46px; height: 28px; justify-content: end; } + .app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) svg { width: 22px; height: 22px; } + .app-body .notification-ungrouped .status::before { display: none; } + .app-body .notification-group__main__status { border: 0; background-color: var(--color-content-secondary-bg); @@ -5567,12 +6387,15 @@ button { background .3s, transform .3s; } + .app-body .notification-group__main__status:hover { background-color: color-mix(in srgb, var(--color-accent), transparent 88%); } + .app-body .notification-group__main__status:active { transform: scale(.98); } + .app-body :is( .notification-group__main__header__label, @@ -5586,19 +6409,24 @@ button { color: var(--color-content-fg); font-weight: 700; } + .app-body .notification-group__main__header__label { color: var(--color-content-fg); justify-content: space-between; } + .app-body .notification-group__main__header__label time { color: var(--color-content-fg-muted); } + .app-body .notification-group__embedded-status__account { color: var(--color-content-fg); } + .app-body .notification-group__main__additional-content { color: var(--color-fg-muted); } + .app-body .notification-group__embedded-status .account__avatar { opacity: 1; } @@ -5610,51 +6438,60 @@ button { border: 1px solid var(--color-lines); border-bottom: 0; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .column-inline-form { border-left: 0; border-right: 0; } } + .app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; border: 1px solid var(--color-lines); } + .app-body .column-inline-form label input:focus { border-color: var(--color-accent); } + .app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); color: var(--color-fg); } + .app-body .item-list .column-subheading { color: var(--color-fg-muted); border-top: 0; border-bottom: 0; } + .app-body .getting-started .column-subheading { color: var(--color-fg-muted); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .item-list .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } + .app-body .list-editor { background-color: var(--color-content-bg); } + .app-body .list-editor .drawer__inner { background-color: var(--color-content-bg); border-radius: 0; } + .app-body .list-editor__search { margin: 10px; background-color: var(--color-content-bg); } + .app-body .list-editor .column-inline-form { background-color: var(--color-content-secondary-bg); border-top: 0; @@ -5662,17 +6499,21 @@ button { border-left: 0; border-color: var(--color-lines); } + .app-body .list-editor .column-inline-form .icon-button { color: var(--color-accent); } + .app-body .list-editor .column-inline-form .icon-button.disabled { opacity: .5; pointer-events: none; } + .app-body .list-editor .account { border-right: 0 !important; border-left: 0 !important; } + .app-body .list-editor .setting-text { width: 100%; background-color: var(--color-accent-bg); @@ -5680,6 +6521,7 @@ button { border-radius: 8px; color: var(--color-content-fg); } + .app-body .list-editor .setting-text:is(:active, :focus) { border-color: var(--color-accent); background-color: var(--color-content-bg); @@ -5693,18 +6535,21 @@ button { color: var(--color-content-fg); box-sizing: border-box; } + .app-body .item-list .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } + .app-body .item-list article:last-child .column-link { border-bottom: 0; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .item-list .column-link { border-left: 0; border-right: 0; } + .app-body .item-list article:last-child .column-link { border-radius: 0; } @@ -5715,28 +6560,35 @@ button { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .list-adder__account { margin-top: 12px; } + .app-body .list-adder .column-inline-form { border-radius: 0; } + .app-body .list-adder .list { border-bottom: 2px solid var(--color-content-secondary-separator); } + .app-body .list-editor .drawer__pager { border: none; border-radius: 0; } + .app-body .list-editor .account__relationship .icon-button { border-color: var(--color-accent); color: var(--color-accent); } + .app-body .list-editor .search .search__input { border-top: 1px solid; border-bottom: 1px solid; border-color: var(--color-accent-lines); } + .app-body .list-editor .search .search__input:focus { border-color: var(--color-accent); } @@ -5746,28 +6598,35 @@ button { margin-bottom: 0; z-index: 0; } + .app-body .account-authorize__wrapper { margin: 0; border-bottom: 1px solid var(--color-lines); } + .app-body .account-authorize { background-color: var(--color-content-bg); padding: 20px } + .app-body .account--panel { background-color: var(--color-content-bg); border: 0; padding: 0 5px; } + .app-body .account__header__content { color: var(--color-content-fg); } + .app-body .account--panel__button { - padding: 0 5px 12px 5px; + padding: 0 5px 12px; } + .app-body .account--panel__button .icon-button { width: 100%; } + .app-body .account--panel__button .icon-button, .app-body .notification-request__actions .icon-button { padding: 10px; @@ -5776,39 +6635,47 @@ button { transition: all .3s; border: 0; } + .app-body .account--panel button .icon-check { background-image: var(--icon-check); } + .app-body .account--panel button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .account--panel__button:first-child .icon-button, .app-body .notification-request__actions .icon-button:last-child { background-color: var(--color-confirm-bg); color: var(--color-confirm-fg); } + .app-body .account--panel__button:first-child .icon-button:is(:hover, :active), .app-body .notification-request__actions .icon-button:last-child:is(:hover, :active) { background-color: var(--color-confirm); color: var(--color-accent-fg); } + .app-body .account--panel button .icon-times { background-image: var(--icon-reject); } + .app-body .account--panel button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } + .app-body .account--panel__button:nth-child(2) .icon-button, .app-body .notification-request__actions .icon-button:first-child { background-color: var(--color-reject-bg); color: var(--color-reject); } + .app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active), .app-body .notification-request__actions .icon-button:first-child:is(:hover, :active) { background-color: var(--color-reject); color: var(--color-accent-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; @@ -5825,58 +6692,73 @@ button { border-bottom: 1px solid var(--color-lines); position: relative; } + .app-body .inline-follow-suggestions__header h3 { font-weight: bold; color: var(--color-content-fg); } + .app-body .inline-follow-suggestions__body__scrollable { scroll-padding: 60px; } + .app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar { height: 5px; } + .app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar-thumb { opacity: 1; border-radius: 0; } + .app-body .inline-follow-suggestions__body__scrollable__card { border-radius: 8px; background-color: var(--color-content-secondary-bg); border: 0; } + .app-body .inline-follow-suggestions__body__scrollable__card :is(.display-name__html, .display-name__account), .app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source { color: var(--color-content-fg); } + .app-body .inline-follow-suggestions__body__scrollable__card .display-name__account { opacity: .6; } + .app-body .inline-follow-suggestions__body__scrollable__card .verified-badge { color: var(--color-accent); } + .app-body .inline-follow-suggestions__body__scrollable__card button:active { transform: scale(.95); } + .app-body .inline-follow-suggestions__body__scroll-button__icon { background-color: var(--color-accent); border-radius: 8px; padding: 6px; transition: all .3s; } + .app-body .inline-follow-suggestions__body__scroll-button { opacity: 1; } + .app-body .inline-follow-suggestions__body__scroll-button:is(:active) .inline-follow-suggestions__body__scroll-button__icon { transform: scale(.9); } + .app-body .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) .inline-follow-suggestions__body__scroll-button__icon { background-color: var(--color-accent-focus); } + .app-body .inline-follow-suggestions__body__scroll-button.left { background: linear-gradient(to right, var(--color-content-bg), transparent); margin-left: -15px; padding-left: 21px; } + .app-body .inline-follow-suggestions__body__scroll-button.right { background: linear-gradient(to left, var(--color-content-bg), transparent); margin-right: -15px; @@ -5887,13 +6769,14 @@ button { border-radius: 50px; background-color: var(--color-content-bg); border: 3px solid var(--color-content-bg); - box-shadow: 0 2px 5px rgba(0, 0, 0, .1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 10%); transform: translateY(3px); } .app-body .inline-follow-suggestions .button:is(.button-secondary, .button-tertiary) { padding: 7px 18px; } + .app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source .icon { width: 17px; height: 17px; @@ -5904,18 +6787,21 @@ button { .app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; } + .app-body .button, .app-body .button.logo-button, -.app-body .rules-list li:before, +.app-body .rules-list li::before, .app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); transition: all .2s; } + .app-body .button:disabled, .app-body .button.disabled { opacity: .7; } + .app-body .text-icon-button.active, .app-body .button.button-tertiary, .app-body .account__header__fields a, @@ -5944,38 +6830,47 @@ button { .app-body .notification-bar-action { color: var(--color-accent); } + .app-body .icon-button, .app-body .icon-button.inverted { color: var(--color-content-fg); } + .app-body .account__header__tabs__buttons .icon-button { padding: 6px; border: 0; color: var(--color-content-fg); background-color: var(--color-content-secondary-bg); } + .app-body .account__header__tabs__buttons .icon-button:hover { background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .account__header__tabs__buttons .icon-button:has(.icon-ellipsis-v, .icon-close).active { background-color: var(--color-accent); } + .app-body .icon-button { border-radius: 8px; transition: all .2s; } + .app-body .icon-button:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .account__header__tabs__buttons .icon-button.active .icon-bell { animation: bell-ring .4s ease-in 1; transform-origin: top center; } + .app-body .account__header__tabs__buttons .icon-button.active:has(.icon-bell):is(:active, :focus) { background-color: var(--color-content-secondary-bg); } + .app-body .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; @@ -5983,40 +6878,49 @@ button { box-shadow: var(--dropdown-shadow); padding: 0; } + .app-body .language-dropdown__dropdown__results__item { border-radius: 8px; } + .app-body .language-dropdown__dropdown__results__item.active, .app-body .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .app-body .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } + .app-body .language-dropdown__dropdown__results__item__common-name { opacity: .7; } + .app-body :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-content-fg); } + .app-body .language-dropdown__dropdown__results__item:is(.active, .active:hover) :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-accent-fg); } + .app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) :is(.language-dropdown__dropdown__results__item__native-name, .language-dropdown__dropdown__results__item__common-name) { color: var(--color-accent); } + .app-body .button:not(.button-secondary):is(:active, :hover), .app-body .button.button-tertiary:is(:active, :hover), .app-body .button.logo-button:is(:active, :hover) { @@ -6026,26 +6930,32 @@ button { .app-body .react-toggle { transition: transform .3s; } + .app-body .react-toggle:active { transform: scale(.9); } + .app-body .react-toggle-track, .app-body .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-fg-muted); transition: all .2s; } + .app-body .react-toggle-thumb { border: 0; background-color: #ffffff; } + .app-body .react-toggle.react-toggle--checked .react-toggle-track, .app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, .app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent); } + .app-body .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } + .app-body .react-toggle--focus { outline: 0; } @@ -6053,6 +6963,7 @@ button { .app-body .radio-button { color: var(--color-content-fg); } + .app-body .radio-button__input, .app-body .poll__input, .app-body .check-box__input { @@ -6065,23 +6976,28 @@ button { width: 20px; height: 20px; } + .app-body .radio-button:active .radio-button__input, .app-body .poll__option:active .poll__input, .app-body .check-box:active .check-box__input { transform: scale(.9); } + .app-body .radio-button__input.checked, .app-body .poll__input.active { background-color: var(--color-accent); } -.app-body .check-box__input.checked:before, -.app-body .radio-button__input.checked:before { + +.app-body .check-box__input.checked::before, +.app-body .radio-button__input.checked::before { display: none; } + .app-body .check-box__input.checked, .app-body .radio-button__input.checked { background-color: var(--color-accent); } + .app-body .check-box__input.checked .icon-check { transform: scale(.5); } @@ -6090,6 +7006,7 @@ button { border: 1px solid var(--color-lines); border-radius: 8px; } + .app-body .dropdown-menu, .app-body .dropdown-menu__container__header, .app-body .dropdown-menu__item.edited-timestamp__history__item, @@ -6100,16 +7017,18 @@ button { } .app-body .dropdown-menu__item a, -.app-body .dropdown-menu__arrow:before { +.app-body .dropdown-menu__arrow::before { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; } + .app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { background: var(--color-accent); color: var(--color-accent-fg); outline: 0; } + .app-body .dropdown-menu__separator { border-color: var(--color-content-secondary-separator); } @@ -6125,6 +7044,7 @@ button { box-shadow: var(--dropdown-shadow); padding: 8px; } + .app-body .privacy-dropdown :is(.privacy-dropdown__value, .privacy-dropdown__value), .app-body .privacy-dropdown__option { background-color: var(--color-content-bg); @@ -6132,19 +7052,23 @@ button { border-radius: 6px; margin-bottom: 2px; } + .app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), .app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .privacy-dropdown.active .privacy-dropdown__value:has(.text-icon-button.active) { border-radius: 6px 6px 0 0; } + .app-body .privacy-dropdown__option .privacy-dropdown__option__content, .app-body .privacy-dropdown__option .privacy-dropdown__option__content strong { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .privacy-dropdown__option.active .privacy-dropdown__option__content, .app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content, @@ -6154,21 +7078,27 @@ button { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { background-image: var(--icon-globe-visibility-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { background-image: var(--icon-unlock-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { background-image: var(--icon-lock-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } + .app-body .privacy-dropdown__option .icon-info-circle path { fill: var(--color-content-fg); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-info-circle path { fill: var(--color-accent-fg); } @@ -6180,18 +7110,22 @@ button { .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } + .app-body .button.button-tertiary.button--confirmation { color: #4e8a6b; - background-color: rgba(121, 189, 154, 0.3); + background-color: rgba(121, 189, 154, 30%); } + .app-body .button.button-tertiary.button--destructive { color: #df405a; - background-color: rgba(223, 64, 90, 0.3); + background-color: rgba(223, 64, 90, 30%); } + .app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { background-color: #79bd9a; color: #ffffff; } + .app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { background-color: #df405a; color: #ffffff; @@ -6200,10 +7134,12 @@ button { .app-body .button.button-tertiary.button--confirmation { color: #72cb9d; } + .app-body .button.button-tertiary.button--destructive { color: #f3637b; } } + .app-body :is( .block-modal__cancel-button, @@ -6214,6 +7150,7 @@ button { background-color: color-mix(in srgb, var(--color-accent), transparent 90%); color: var(--color-accent); } + .app-body :is( .block-modal__cancel-button, @@ -6224,6 +7161,7 @@ button { background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important; color: var(--color-accent); } + .app-body :is( .block-modal__cancel-button, @@ -6240,6 +7178,7 @@ button { + button:active { transform: scale(.95); } + .app-body .status__content a.hashtag { color: var(--color-accent); } @@ -6252,110 +7191,138 @@ button { border: 0; outline: 1px solid var(--color-lines-translucent); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .modal-root__modal:not(.media-modal) { margin-top: unset; } } + .app-body .compare-history-modal { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .compare-history-modal .report-modal__target { border-color: var(--color-lines); } + .app-body .safety-action-modal { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); border-radius: 8px; } + .app-body .safety-action-modal__confirmation, .app-body .safety-action-modal__confirmation strong, .app-body .safety-action-modal__confirmation h1 { color: var(--color-content-fg); } + .app-body .safety-action-modal__header__icon { background-color: var(--color-accent); } + .app-body .safety-action-modal__header, .app-body .safety-action-modal__header h1, .app-body .safety-action-modal__caveats, .app-body .safety-action-modal__bullet-points { color: var(--color-content-fg); } + .app-body :is(.safety-action-modal__header, .safety-action-modal__confirmation) h1 { font-weight: 600; } + .app-body .safety-action-modal__confirmation h1 { font-size: 150%; padding-top: 20px; } + .app-body .safety-action-modal__header h1 + div { opacity: .6; } + .app-body .safety-action-modal__top { background-color: transparent; border: 0; } + .app-body .safety-action-modal__bottom { background-color: var(--color-content-secondary-bg); padding-top: 24px; border: 0; border-radius: 0 0 8px 8px; } + .app-body .safety-action-modal__bullet-points__icon .icon { transform: scale(1.3); } + .app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-megaphone); } + .app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-eye-shut); } + .app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-direct-messages); } + .app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-reply); transform: scale(1); } + .app-body .safety-action-modal__field-group label { color: var(--color-content-fg); } + .app-body .report-modal { background-color: var(--color-content-bg); } + .app-body .actions-modal { background-color: var(--color-content-bg); } + .app-body .interaction-modal { background-color: var(--color-content-bg); border-radius: 10px; box-shadow: var(--dropdown-shadow); } + .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { color: var(--color-content-fg); } + .app-body .interaction-modal__lead p, .app-body .interaction-modal__choices__choice p { color: var(--color-fg); } + .app-body .interaction-modal__icon { transform: scale(1.4) translateX(-2px); } + .app-body .interaction-modal :is(p, strong) { color: var(--color-content-fg); } + .app-body .interaction-modal p.hint { color: var(--color-content-fg-muted); } + .app-body .interaction-modal :is(.button, .button.button-tertiary) { padding: 10px 18px; } + .app-body .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } + .app-body .copypaste input, .app-body .interaction-modal__login__input { border-color: var(--color-lines); @@ -6365,26 +7332,32 @@ button { outline: 0 solid var(--color-accent-bg); transition: all .2s; } + .app-body .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .interaction-modal__login__input input::placeholder { color: var(--color-content-fg-muted); } + .app-body .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); outline: 3px solid var(--color-accent-bg); } + .app-body .interaction-modal__login .search__popout { border-color: var(--color-lines); } + .app-body .interaction-modal .copypaste button { padding: 8px 18px; } + .app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, @@ -6392,21 +7365,25 @@ button { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .boost-modal__container { margin-bottom: -11px; } + .app-body .confirmation-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .block-modal__action-bar, .app-body .boost-modal__action-bar, .app-body .confirmation-modal__action-bar, .app-body .mute-modal__action-bar { background-color: var(--color-accent-bg); } + .app-body .block-modal__action-bar > div, .app-body .boost-modal__action-bar > div, .app-body .confirmation-modal__action-bar > div, @@ -6418,9 +7395,11 @@ button { .app-body .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } + .app-body .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } + .app-body .actions-modal ul li:not(:empty) a:is(.active, .active button, @@ -6439,14 +7418,16 @@ a:is(.active, .app-body .modal-root__overlay:has(+ div > .media-modal) { background-color: #030303 !important; } + .app-body .modal-root__overlay { - background-color: rgb(0, 0, 0, .4); + background-color: rgb(0, 0, 0, 40%); } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: rgb(0, 0, 0, .9); + background-color: rgb(0, 0, 0, 90%); } } + .app-body .media-modal__buttons .icon-button, .app-body .media-modal__nav { background-color: #1e1e1e; @@ -6460,26 +7441,31 @@ a:is(.active, transition: .2s all; } + .app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover), .app-body .media-modal__nav:is(:active, :focus, :hover) { background-color: #343434; color: #ffffff; } + .app-body .media-modal__close { top: 24px; left: 24px; } + .app-body .media-modal__zoom-button { top: 24px; right: 24px; } + .app-body .media-modal__nav--left { left: 24px; } + .app-body .media-modal__nav--right { right: 24px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .media-modal__nav { display: none; } @@ -6488,19 +7474,24 @@ a:is(.active, .app-body .media-modal__overlay .picture-in-picture__footer { display: none; } + .app-body .media-modal__overlay .picture-in-picture__footer .icon-button > svg { width: 25px; height: 25px; } + .app-body .media-modal__overlay .picture-in-picture__footer .icon-button:is(:active, :hover, :focus) { background-color: transparent !important; } + .app-body .picture-in-picture__footer .animated-number { color: var(--color-accent); } + .app-body .media-modal__page-dot { background-color: #858585; } + .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -6515,9 +7506,11 @@ a:is(.active, .app-body .report-dialog-modal__lead { color: var(--color-content-fg-muted); } + .app-body .report-dialog-modal { background-color: var(--color-content-bg); } + .app-body .report-dialog-modal .dialog-option, .app-body .report-dialog-modal .poll__option.dialog-option:last-child { border-top: 1px solid var(--color-lines); @@ -6529,6 +7522,7 @@ a:is(.active, border-radius: 8px; transition: all .2s; } + .app-body .report-dialog-modal .dialog-option:hover, .app-body .report-dialog-modal .poll__option.dialog-option:hover, .app-body .report-dialog-modal .dialog-option:has(.poll__input.active) { @@ -6542,12 +7536,15 @@ a:is(.active, .app-body .report-dialog-modal__textarea:focus { border-color: var(--color-accent); } + .app-body .report-dialog-modal .dialog-option .poll__input.active { background-color: var(--color-accent); } + .app-body .report-dialog-modal .dialog-option .poll__input svg { display: none; } + .app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text, .app-body .report-dialog-modal .dialog-option time, .app-body .report-dialog-modal .status__content > p:first-child:has(.status__content__spoiler-link) > span, @@ -6559,36 +7556,44 @@ a:is(.active, .app-body .report-modal__target { color: var(--color-content-fg); } + .app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { color: var(--color-content-fg-bold) } + .app-body .report-modal__comment, .app-body .report-modal__container, .app-body .report-dialog-modal__container { border-color: var(--color-lines); } + .app-body .report-modal__comment { color: var(--color-content-fg-muted); } + .app-body #upload-modal__description { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } + .app-body #upload-modal__description:focus { border-color: var(--color-accent); } + .app-body .setting-text__wrapper { background-color: var(--color-content-bg); border: 0; } + .app-body .report-dialog-modal__textarea { background-color: var(--color-secondary-bg); border: 1px solid var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } + .app-body .report-dialog-modal__textarea::placeholder { color: var(--color-content-fg); opacity: .5; @@ -6599,25 +7604,30 @@ a:is(.active, /* 🖼️ Picture in Picture */ .app-body .picture-in-picture { z-index: 3; - box-shadow: 0 0 5px rgba(0, 0, 0, .2); + box-shadow: 0 0 5px rgba(0, 0, 0, 20%); border-radius: 8px; border: 1px solid var(--color-lines); } + .app-body .picture-in-picture__header { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .app-body .picture-in-picture__footer { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .picture-in-picture .video-player { border: 0; } + .app-body .picture-in-picture__footer, .app-body .picture-in-picture__header { background-color: var(--color-content-bg); } + .app-body .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } @@ -6647,10 +7657,12 @@ a:is(.active, flex-flow: column; padding: 20px 0 0; } + .app-body .link-footer p, .app-body .link-footer a { color: var(--color-fg-muted); } + .app-body .link-footer::after { content: var(--meta); color: var(--color-fg-muted); @@ -6661,9 +7673,11 @@ a:is(.active, .app-body .server-banner__introduction { display: none; } + .app-body .server-banner { padding: 0 0 20px; } + .app-body .server-banner__hero { border-radius: 8px 8px 0 0; margin-bottom: 0; @@ -6672,14 +7686,16 @@ a:is(.active, background-color: var(--color-content-bg); box-sizing: border-box; } + .app-body .server-banner__description { - padding: 20px 15px 20px; + padding: 20px 15px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); color: var(--color-content-fg); } + .app-body .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); @@ -6691,17 +7707,21 @@ a:is(.active, border-radius: 0 0 8px 8px; align-items: end; } + .app-body .server-banner h4 { color: var(--color-fg); font-size: 80%; } + .app-body .server-banner__number { color: var(--color-content-fg); font-size: 15px; } + .app-body .server-banner__number-label { color: var(--color-content-fg); } + .app-body .server-banner .account { background-color: transparent; box-shadow: none; @@ -6710,78 +7730,96 @@ a:is(.active, border-right: 0; border-bottom: 0; } + .app-body .server-banner .account .display-name__account { opacity: .7; } + .app-body .server-banner__meta__column:first-child { width: calc(60% - 5px); } + .app-body .server-banner__meta__column:nth-child(2) { width: calc(40% - 5px); } + .app-body .server-banner .button.button-secondary { padding: 10px; margin: 10px 0; } + .app-body .button.button-secondary, .app-body .button.button-tertiary { border: 0; background-color: color-mix(in srgb, var(--color-accent), transparent 82%); color: var(--color-accent); } + .app-body .hover-card .button:not(.button--destructive) { background-color: var(--color-accent); color: var(--color-accent-fg); line-height: 1.375; padding: 10px 18px; } + .app-body .hover-card .button:not(.button--destructive):hover { background-color: var(--color-accent-focus); } + .app-body .button:is(.button-secondary, .button-tertiary):hover { background-color: color-mix(in srgb, var(--color-accent), transparent 70%); } + .app-body .button.button--destructive:is(:active, :hover, :focus) { background-color: var(--color-reject); color: var(--color-accent-fg); } + .app-body .sign-in-banner .button, .app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } + .app-body .sign-in-banner .button:active, .app-body .button:is(.button-secondary, .button-tertiary):active { transform: scale(.95); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .button.button-tertiary { padding: 7px 18px; } } + .app-body .sign-in-banner { padding: 10px; } + .app-body .navigation-panel__sign-in-banner hr { display: block; border-color: var(--color-lines-translucent); margin: 12px 15px; opacity: .5; } + .app-body .sign-in-banner p { color: var(--color-fg-muted); padding: 0 5px 5px; } + .app-body .sign-in-banner p strong { color: var(--color-fg); font-weight: 500; } + .app-body .sign-in-banner p:nth-child(2) { font-size: 85%; line-height: 1.325; } + .app-body .sign-in-banner p { margin-bottom: 25px; } + .app-body .sign-in-banner p:first-child { margin-bottom: 5px; } @@ -6793,16 +7831,20 @@ a:is(.active, .app-body .column-list { background-color: var(--color-content-bg); } + .app-body .column-title .logo { display: none; } + .app-body .column-title h3, .app-body .column-title p { color: var(--color-content-fg); } + .app-body .column-list { border: 0; } + .app-body .account__note { color: var(--color-content-fg-muted); } @@ -6813,36 +7855,44 @@ a:is(.active, margin-bottom: 8px; transition: all .2s; } + .app-body .onboarding__steps__item:is(:active, :focus, :hover), .app-body .onboarding__link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .app-body .onboarding__steps__item__icon, .app-body .onboarding__link { color: var(--color-accent); } + .app-body .onboarding__steps__item__description h6, .app-body .onboarding__steps__item__description p, .app-body .onboarding__lead, .app-body .onboarding__lead strong { color: var(--color-content-fg); } + .app-body .onboarding__steps__item__go svg path, .app-body .onboarding__link svg path { fill: var(--color-accent); } + .app-body .app-form__avatar-input, .app-body .app-form__header-input { background-color: var(--color-accent-bg); transition: all .2s; } + .app-body .app-form__avatar-input:hover, .app-body .app-form__header-input:hover { background-color: color-mix(in srgb, var(--color-accent), transparent 75%); } + .app-body .app-form__header-input { border-top: 1px solid var(--color-lines); } + .app-body .app-form__header-input .icon { background-image: var(--icon-paperclip); transform: scale(1.4) translateX(-50%) translateY(-25%); @@ -6850,39 +7900,46 @@ a:is(.active, inset-inline-start: 50%; top: 50%; } + .app-body .onboarding__profile .app-form__avatar-input { border-color: var(--color-content-bg); border-radius: 50%; border-width: 5px; } + .app-body .onboarding__profile .app-form__avatar-input img { border-radius: 50%; background: var(--color-content-secondary-bg); } + .app-body .onboarding__profile .app-form__header-input img { background: var(--color-accent-bg); } + .app-body .simple_form .input.with_block_label > label, .app-body .simple_form .input.with_block_label .hint, .app-body .app-form__toggle__label strong, .app-body .simple_form .hint { color: var(--color-fg); } + .app-body .app-form__toggle__toggle > div { border-color: var(--color-lines); } + .app-form__avatar-input.selected .icon, .app-form__header-input.selected .icon { color: var(--color-accent); } + .app-body .simple_form :is( - input[type=datetime-local], - input[type=email], - input[type=number], - input[type=password], - input[type=text], - input[type=url], + input[type="datetime-local"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="text"], + input[type="url"], textarea ) { background-color: var(--color-content-secondary-bg); @@ -6890,41 +7947,49 @@ a:is(.active, border-radius: 8px; color: var(--color-content-fg); } + .app-body .simple_form :is( - input[type=datetime-local], - input[type=email], - input[type=number], - input[type=password], - input[type=text], - input[type=url], + input[type="datetime-local"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="text"], + input[type="url"], textarea ):is(:active, :focus) { border-color: var(--color-accent); } + .app-body .column-title { margin: -20px -20px 30px; padding: 50px 40px 40px; } + .app-body .column-title:not(:has(.onboarding__illustration)) { background-color: var(--color-content-secondary-bg); } + .app-body .column-title:has(+ .simple_form) { margin-bottom: 0; background-color: var(--color-content-secondary-bg); } + .app-body .follow-recommendations { background-color: var(--color-content-bg); } + .app-body .follow-recommendations .account { border-left: 0; border-right: 0; margin-bottom: 15px; } + .app-body .follow-recommendations .account__note { color: var(--color-content-fg); opacity: .7; } + .app-body .follow-recommendations .account__note p { overflow: hidden; } @@ -6934,10 +7999,12 @@ a:is(.active, border-color: var(--color-accent-lines); color: var(--color-content-fg); } + .app-body .copy-paste-text:is(:focus, :active), .app-body .tip-carousel:focus { border-color: var(--color-accent); } + .app-body .copy-paste-text:has(textarea:focus) { border-color: var(--color-accent); } @@ -6948,6 +8015,7 @@ a:is(.active, background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); } + .app-body .announcements { overflow: visible; z-index: 0; @@ -6956,55 +8024,68 @@ a:is(.active, border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } + .app-body .announcements__item__unread { color: var(--color-accent); background-color: var(--color-accent); } + .app-body .announcements__pagination, .app-body .announcements__pagination .icon-button { color: var(--color-content-fg); } + .app-body .announcements__pagination > * { vertical-align: middle; } + .app-body .reactions-bar__item { background-color: var(--color-accent-bg); border-radius: 8px; padding: 2px 8px; } + .app-body .reactions-bar .emoji-picker-dropdown .icon-button { padding: 3px; } + .app-body .reactions-bar__item:is(:active, :hover, :focus) { background-color: var(--color-content-bg); } + .app-body .reactions-bar__item.active, .app-body .reactions-bar .emoji-picker-dropdown .icon-button.active.inverted { background-color: var(--color-accent); } + .app-body .reactions-bar__item__count, .app-body .reactions-bar__item__count .animated-number { color: var(--color-accent); } + .app-body .reactions-bar__item:is(:active, :hover, :focus) .reactions-bar__item__count .animated-number { color: var(--color-content-fg); } + .app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number { color: var(--color-accent-fg); } + .app-body .reactions-bar .emoji-button, .app-body .announcements__item__content a.unhandled-link, .app-body .announcements__item__content a { color: var(--color-accent); } + .app-body .announcements .emoji-button { margin: 0; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .announcements { box-shadow: none; margin-top: 1px; @@ -7013,6 +8094,7 @@ a:is(.active, margin-inline-start: -45px; margin-inline-end: -55px; } + .app-body .announcements__mastodon { border-radius: 0; } @@ -7026,17 +8108,20 @@ a:is(.active, background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .error-column__message h1, .app-body .error-column__message { color: var(--color-content-fg); } + .app-body .error-column__image { margin-top: 0; } + .app-body .regeneration-indicator { background-color: var(--color-content-bg); } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .regeneration-indicator { padding-top: 50px; padding-bottom: 40px; @@ -7056,89 +8141,108 @@ a:is(.active, padding-bottom: 20px; z-index: 1; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .scrollable.about { border-left: 0; border-right: 0; } } + .app-body .about__header { order: 1; margin-bottom: 5px; } + .app-body .about__section:nth-child(3) { order: 3; } + .app-body .about__section:nth-child(2) { order: 2; } + .app-body .about__section:nth-child(4) { order: 4; } + .app-body .about__section:nth-child(5) { order: 5; } + .app-body .about .link-footer { order: 6; } + .app-body .about__footer { order: 7; } + .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(2) > div.about__section__title { display: none; } + .app-body .about__header p, .app-body .about__meta h4 { color: var(--color-fg); } + .app-body .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); border-radius: 0; background-color: var(--color-content-bg); } + .app-body .about__header__hero { margin-bottom: 10px; } + .app-body .about__meta { margin-top: 20px; margin-bottom: 0; } + .app-body .about__header > h1 { color: var(--color-content-fg); margin: 30px 0 0 20px; text-align: left; font-size: 24px; } + .app-body .about__header > h1 + p { color: var(--color-content-fg); opacity: .8; text-align: left; margin-left: 20px; + // margin-bottom: 15px; font-size: 14px; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .scrollable.about { border-radius: 8px 8px 0 0 !important; } + .app-body .about__header__hero { border-radius: 6px 6px 0 0; } } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body .scrollable.about { margin-top: 10px; } } + .app-body .about__mail { color: var(--color-content-fg); } + .app-body .about__meta h4 { font-size: 12px; font-weight: bold; margin-bottom: 8px; } + .app-body .about__meta .account { background: none; box-shadow: none; @@ -7146,18 +8250,21 @@ a:is(.active, border-left: 0; border-right: 0; } + .app-body .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); } -@media screen and (max-width:600px) { +@media screen and (width <=600px) { .app-body .about__meta__divider { border-top: 3px solid var(--color-content-secondary-separator); width: 90%; } } + .app-body .about__section:nth-child(3) .about__section__body { padding-bottom: 3em; } + .app-body .about__meta, .app-body .about__section__title { color: var(--color-accent); @@ -7165,9 +8272,11 @@ a:is(.active, border: 0; border-radius: 8px; } + .app-body .about__section.active .about__section__title { border-radius: 8px 8px 0 0; } + .app-body .about__section.active:not(:nth-of-type(2)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); @@ -7189,24 +8298,28 @@ a:is(.active, .app-body .about__domain-blocks__domain__type { color: var(--color-content-fg); } -.app-body .prose ul > li:before { + +.app-body .prose ul > li::before { background-color: var(--color-content-fg); opacity: .3; top: .55em; width: 7px; height: 7px; } + .app-body .about__section__body .prose hr { border-color: var(--color-content-secondary-separator); margin-top: 2em; margin-bottom: 2em; border-width: 3px; } + .app-body .hover-card__bio a, .app-body .hover-card .account-fields a { text-decoration: none; color: var(--color-accent); } + .app-body .about__section__body .prose a, .app-body .about__section__body .prose a:hover, .app-body .prose a strong, @@ -7217,10 +8330,12 @@ a:is(.active, text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body .about__section__body .prose a:hover :is(span, strong), .app-body .hover-card__bio a:hover { text-decoration-color: var(--color-accent); } + .app-body .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; @@ -7230,40 +8345,49 @@ a:is(.active, font-size: 80%; float: left; } + .about__section.active .about__section__title { background-color: var(--color-accent-bg); } + .app-body .rules-list__text, .app-body .rules-list__hint { color: var(--color-content-fg); } + .app-body .rules-list__text { font-weight: 600; } + .app-body .rules-list__hint { opacity: .7; padding-top: 4px; } + .app-body .rules-list li { border-bottom: 1px solid var(--color-lines); padding: 1em 1.75em 1em 3.4em; } + .app-body .rules-list li:last-child { border-bottom: 0; } + .about__domain-blocks { background-color: var(--color-content-bg); border: 0; } + .about__domain-blocks__domain { color: var(--color-content-fg); border-bottom: 0; } + .about__domain-blocks__domain:nth-child(2n) { background-color: var(--color-content-secondary-bg); } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .about :is(.link-footer, .about__footer) { display: none; } @@ -7290,7 +8414,7 @@ a:is(.active, padding-bottom: 20px; z-index: 1; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy { border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -7317,35 +8441,44 @@ a:is(.active, :root:has(.layout-multiple-columns) *::-webkit-scrollbar { width: 4px; } + :root:has(.layout-multiple-columns) *::-webkit-scrollbar-track { background-color: var(--color-accent-bg); } + :root:has(.layout-multiple-columns) *::-webkit-scrollbar-thumb { opacity: .8; } + .layout-multiple-columns .scrollable, .layout-multiple-columns .column > .scrollable { max-height: 100%; } + .layout-multiple-columns .column { width: 400px; padding-bottom: 0; } + .layout-multiple-columns .drawer__inner__mastodon { display: none; } + .layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) { background: transparent; } + .layout-multiple-columns .drawer__header { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); border-radius: 8px; margin-bottom: 0; } + .layout-multiple-columns .drawer .search { margin-top: 10px; } + .layout-multiple-columns .drawer__tab { transition: all .3s; border-radius: 6px; @@ -7355,30 +8488,39 @@ a:is(.active, box-sizing: border-box; border: 0; } + .layout-multiple-columns .drawer__tab .icon { transform: scale(1.2); } + .layout-multiple-columns .drawer__tab:active { transform: scale(.9); } + .layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .layout-multiple-columns .drawer__tab .icon-cog { background-image: var(--icon-gear); } + .layout-multiple-columns .drawer__tab .icon-globe { background-image: var(--icon-globe); } + .layout-multiple-columns .drawer__tab .icon-users { background-image: var(--icon-users); } + .layout-multiple-columns .drawer__tab .icon-bars { background-image: var(--logo); } + .layout-multiple-columns .drawer__tab .icon-sign-out { background-image: var(--icon-logout); } + .layout-multiple-columns .column-header__icon.icon-bars { background-image: var(--icon-globe-active); } @@ -7390,29 +8532,35 @@ a:is(.active, .layout-multiple-columns .getting-started .column-subheading { background-color: var(--color-bg); } + .layout-multiple-columns .scrollable.getting-started { border-left: 0; border-right: 0; background-color: var(--color-bg); } + .layout-multiple-columns .getting-started__wrapper { padding-bottom: 10px; border-radius: 0 0 8px 8px; } + .layout-multiple-columns .getting-started .column-link { color: var(--color-content-fg); margin: 0 5px 2px; border-radius: 8px; } + .app-body .getting-started .column-link { margin-left: 0; font-weight: 500; color: var(--color-fg); } + .layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-fg); } + .layout-multiple-columns .getting-started .column-link__icon { transform: scale(1.4); } @@ -7430,6 +8578,7 @@ a:is(.active, .layout-multiple-columns .getting-started__trends .trends__item { padding-left: 16px; } + .layout-multiple-columns .getting-started__trends h4 > :is(a, span) { padding-left: 45px; } @@ -7445,6 +8594,7 @@ a:is(.active, .layout-multiple-columns .column:has(> .getting-started) { width: 330px; } + .layout-multiple-columns .column:has(> .getting-started) :is(.column-header, .column-back-button), @@ -7465,10 +8615,12 @@ a:is(.active, width: 280px; transition: width .3s; } + .layout-multiple-columns .drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) { width: 400px; } + .layout-multiple-columns .drawer__inner:has(> .search-results > .search-results__section) { z-index: 2; background-color: var(--color-content-bg); @@ -7481,6 +8633,7 @@ a:is(.active, > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) { margin-bottom: 0; } + .layout-multiple-columns .drawer > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) @@ -7492,6 +8645,7 @@ a:is(.active, border-radius: 0; border: 0; } + .layout-multiple-columns .drawer > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) @@ -7503,6 +8657,7 @@ a:is(.active, .layout-multiple-columns .drawer__inner:has(.search-results .empty-column-indicator) { z-index: 3; } + .layout-multiple-columns .search-results .empty-column-indicator { border: 1px solid var(--color-lines); border-radius: 8px; @@ -7520,6 +8675,7 @@ a:is(.active, bottom: 0; z-index: -1; } + .layout-multiple-columns .link-footer::before, .layout-multiple-columns .link-footer::after { display: none; @@ -7529,7 +8685,7 @@ a:is(.active, background-color: var(--color-content-bg); } -@media screen and (min-width:630px) and (max-width:1174px) { +@media screen and (width >=630px) and (width <=1174px) { .layout-multiple-columns :is( .column-header, @@ -7548,6 +8704,7 @@ a:is(.active, border-radius: 8px; color: var(--color-content-fg); } + .app-body .switch-to-advanced .switch-to-advanced__toggle { color: var(--color-accent); } @@ -7563,6 +8720,7 @@ a:is(.active, )::before { background-image: var(--icon-tangerine-slice); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7600,6 +8758,7 @@ a:is(.active, )::before { background-image: var(--icon-calendar); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7623,6 +8782,7 @@ a:is(.active, )::before { background-image: var(--icon-music); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7631,6 +8791,7 @@ a:is(.active, )::before { background-image: var(--icon-microphone); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7639,6 +8800,7 @@ a:is(.active, )::before { background-image: var(--icon-cake); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7655,6 +8817,7 @@ a:is(.active, )::before { background-image: var(--icon-popcorn); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7671,6 +8834,7 @@ a:is(.active, )::before { background-image: var(--icon-camera); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7684,6 +8848,7 @@ a:is(.active, )::before { background-image: var(--icon-sunset); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7694,6 +8859,7 @@ a:is(.active, )::before { background-image: var(--icon-pine); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7711,6 +8877,7 @@ a:is(.active, )::before { background-image: var(--icon-tree); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7726,6 +8893,7 @@ a:is(.active, )::before { background-image: var(--icon-cat); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7740,6 +8908,7 @@ a:is(.active, )::before { background-image: var(--icon-dog); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7761,6 +8930,7 @@ a:is(.active, )::before { background-image: var(--icon-brush); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7776,6 +8946,7 @@ a:is(.active, )::before { background-image: var(--icon-apple); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7787,6 +8958,7 @@ a:is(.active, )::before { background-image: var(--icon-pencil); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7799,6 +8971,7 @@ a:is(.active, )::before { background-image: var(--icon-book); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7815,6 +8988,7 @@ a:is(.active, )::before { background-image: var(--icon-gaming); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7824,6 +8998,7 @@ a:is(.active, )::before { background-image: var(--icon-cube); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7837,6 +9012,7 @@ a:is(.active, )::before { background-image: var(--icon-football); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7870,6 +9046,7 @@ a:is(.active, )::before { background-image: var(--icon-pride); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7883,6 +9060,7 @@ a:is(.active, )::before { background-image: var(--icon-vote); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7896,6 +9074,7 @@ a:is(.active, )::before { background-image: var(--icon-code); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7905,6 +9084,7 @@ a:is(.active, )::before { background-image: var(--icon-handshake); } + .app-body .trends__item:has( .trends__item__name a:is( diff --git a/app/javascript/styles/tangerine/orange.scss b/app/javascript/styles/tangerine/orange.scss index f0ded178df..0abc8abc9c 100644 --- a/app/javascript/styles/tangerine/orange.scss +++ b/app/javascript/styles/tangerine/orange.scss @@ -9,11 +9,9 @@ /* 📄 Meta */ :root { --version: "v2.4~"; - --variant-name: "Orange"; --variant-emoji: "\1F34A\00A0"; --variant: var(--variant-emoji) var(--variant-name); - --meta: 'Powered by OSCAR Node #4 ' var(--version) ' \00B7 ' var(--variant); } @@ -27,30 +25,25 @@ --color-fg-muted: #948c84; --color-secondary-bg: #f2eae4; --color-secondary-separator: #ede3db; - --color-content-bg: #ffffff; --color-content-fg: #444a5a; --color-content-fg-bold: #000000; --color-content-fg-muted: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 40%); --color-content-secondary-bg: #f9f6f4; - --color-content-secondary-separator: rgba(237, 227, 219, 0.4); + --color-content-secondary-separator: rgba(237, 227, 219, 40%); --color-content-bg-focus: #fffcfa; - --color-accent: #f76902; --color-accent-focus: #ff9447; - --color-accent-lines: rgba(247, 105, 2, 0.12); + --color-accent-lines: rgba(247, 105, 2, 12%); --color-accent-bg: #f6e5dd; --color-accent-fg: #ffffff; - --color-lines: #e1dde4; - --color-lines-translucent: rgba(0, 0, 0, .15); - + --color-lines-translucent: rgba(0, 0, 0, 15%); --color-confirm: #79bd9a; - --color-confirm-bg: rgba(121, 189, 154, 0.3); + --color-confirm-bg: rgba(121, 189, 154, 30%); --color-confirm-fg: #4E8A6B; - --color-reject: #df405a; - --color-reject-bg: rgba(223, 64, 90, 0.3); + --color-reject-bg: rgba(223, 64, 90, 30%); } @media (prefers-color-scheme: dark) { :root { @@ -60,27 +53,24 @@ --color-fg-muted: #6e635e; --color-secondary-bg: #1e1810; --color-secondary-separator: #25201c; - --color-content-bg: #030303; --color-content-fg: var(--color-fg); --color-content-fg-bold: #ffffff; --color-content-fg-muted: #737373; --color-content-secondary-bg: var(--color-secondary-bg); - --color-content-secondary-separator: rgba(77, 73, 70, 0.4); + --color-content-secondary-separator: rgba(77, 73, 70, 40%); --color-content-bg-focus: #0e0e0e; - --color-accent: #e68933; --color-accent-focus: #ffa047; - --color-accent-lines: rgb(230, 137, 51, 0.3); + --color-accent-lines: rgb(230, 137, 51, 30%); --color-accent-bg: #3c2a1f; --color-accent-fg: #ffffff; - --color-lines: #343434; - --color-lines-translucent: rgba(255, 255, 255, .15); - + --color-lines-translucent: rgba(255, 255, 255, 15%); --color-confirm-fg: var(--color-confirm); } } + :root { /* Mastodon logo */ --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' class='mastodon-logo' viewBox='0 0 216.414 232.01'%3E%3Cdefs xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient xmlns='http://www.w3.org/2000/svg' id='a' x2='0%25' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23f76902'/%3E%3Cstop offset='100%25' stop-color='%23f76902'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='url(%23a)' d='M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916'/%3E%3Cpath fill='%23fff' d='M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675'/%3E%3C/svg%3E"); @@ -121,71 +111,55 @@ --icon-home-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-direct-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bookmark-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-accent: var(--icon-star-accent); --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent: var(--icon-user-plus-accent); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-dot-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-dot-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); --icon-settings-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-moderation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-moderation-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-administration-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-ellipsis-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); --icon-ellipsis-column-link-active-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); --icon-hashtag-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); @@ -308,70 +282,54 @@ --icon-home-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-home-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bell-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M104,168a40,40,0,1,1-40-40A40,40,0,0,1,104,168Zm88-40a40,40,0,1,0,40,40A40,40,0,0,0,192,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z'%3E%3C/path%3E%3C/svg%3E"); --icon-explore-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M237.22,151.9l0-.1a1.42,1.42,0,0,0-.07-.22,48.46,48.46,0,0,0-2.31-5.3L193.27,51.8a8,8,0,0,0-1.67-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,8,8,0,0,0-1.67,2.44L21.2,146.28a48.46,48.46,0,0,0-2.31,5.3,1.72,1.72,0,0,0-.07.21s0,.08,0,.11a48,48,0,0,0,90.32,32.51,47.49,47.49,0,0,0,2.9-16.59V96h32v71.83a47.49,47.49,0,0,0,2.9,16.59,48,48,0,0,0,90.32-32.51Zm-143.15,27a32,32,0,0,1-60.2-21.71l1.81-4.13A32,32,0,0,1,96,167.88V168h0A32,32,0,0,1,94.07,178.94ZM203,198.07A32,32,0,0,1,160,168h0v-.11a32,32,0,0,1,60.32-14.78l1.81,4.13A32,32,0,0,1,203,198.07Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); --icon-globe-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-direct-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24a104,104,0,0,0,0,208c21.51,0,44.1-6.48,60.43-17.33a8,8,0,0,0-8.86-13.33C166,210.38,146.21,216,128,216a88,88,0,1,1,88-88c0,26.45-10.88,32-20,32s-20-5.55-20-32V88a8,8,0,0,0-16,0v4.26a48,48,0,1,0,5.93,65.1c6,12,16.35,18.64,30.07,18.64,22.54,0,36-17.94,36-48A104.11,104.11,0,0,0,128,24Zm0,136a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E"); --icon-direct-messages-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M232,128c0,.51,0,1,0,1.52-.34,14.26-5.63,30.48-28,30.48-23.14,0-28-17.4-28-32V88a8,8,0,0,0-8.53-8A8.17,8.17,0,0,0,160,88.27v4a48,48,0,1,0,6.73,64.05,40.19,40.19,0,0,0,3.38,5C175.48,168,185.71,176,204,176a54.81,54.81,0,0,0,9.22-.75,4,4,0,0,1,4.09,6A104.05,104.05,0,0,1,125.91,232C71.13,230.9,26.2,186.86,24.08,132.11A104,104,0,1,1,232,128ZM96,128a32,32,0,1,0,32-32A32,32,0,0,0,96,128Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-bookmark-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E"); --icon-bookmark-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Z'%3E%3C/path%3E%3Cpath d='M192,24H88a8,8,0,0,0,0,16H192V192a8,8,0,0,0,16,0V40A16,16,0,0,0,192,24Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); --icon-star-column-link-accent: var(--icon-star-accent); --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM192,184H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-dot-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E"); --icon-dot-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); --icon-settings-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M230.1,108.76,198.25,90.62c-.64-1.16-1.31-2.29-2-3.41l-.12-36A104.61,104.61,0,0,0,162,32L130,49.89c-1.34,0-2.69,0-4,0L94,32A104.58,104.58,0,0,0,59.89,51.25l-.16,36c-.7,1.12-1.37,2.26-2,3.41l-31.84,18.1a99.15,99.15,0,0,0,0,38.46l31.85,18.14c.64,1.16,1.31,2.29,2,3.41l.12,36A104.61,104.61,0,0,0,94,224l32-17.87c1.34,0,2.69,0,4,0L162,224a104.58,104.58,0,0,0,34.08-19.25l.16-36c.7-1.12,1.37-2.26,2-3.41l31.84-18.1A99.15,99.15,0,0,0,230.1,108.76ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.1,8.1,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8,8,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-moderation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); --icon-moderation-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M149.66,45.66l-64,64a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,0-11.32l64-64a8,8,0,0,1,11.32,0l16,16A8,8,0,0,1,149.66,45.66Zm88,76.68-16-16a8,8,0,0,0-11.32,0l-64,64a8,8,0,0,0,0,11.32l16,16a8,8,0,0,0,11.32,0l64-64A8,8,0,0,0,237.66,122.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); --icon-administration-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M224,96a64,64,0,0,1-94.94,56L73,217A24,24,0,0,1,39,183L104,126.94a64,64,0,0,1,80-90.29L144,80l5.66,26.34L176,112l43.35-40A63.8,63.8,0,0,1,224,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a16,16,0,0,1-16,16H48V40H208A16,16,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-ellipsis-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); --icon-ellipsis-column-link-active-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); --icon-hashtag-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z'%3E%3C/path%3E%3C/svg%3E"); @@ -465,6 +423,7 @@ body.app-body { background-color: var(--color-bg); background-image: var(--gradient-bg); } + .app-body .columns-area__panels__pane { z-index: 1; } @@ -479,24 +438,28 @@ body.app-body { background-color: var(--color-bg); padding: 2px; } + :root:has(.app-body) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 8px; opacity: .4; box-shadow: none; } + :root:has(.app-body) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } + :root:has(.app-body) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); opacity: .7; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { :root:has(.app-body) *::-webkit-scrollbar { display: none; } } + :root, * { scrollbar-color: var(--color-accent) var(--color-bg); @@ -505,8 +468,8 @@ body.app-body { .app-body { --dropdown-shadow: - 0 20px 25px -5px rgba(0, 0, 0, .15), - 0 8px 10px -6px rgba(0, 0, 0, .15); + 0 20px 25px -5px rgba(0, 0, 0, 15%), + 0 8px 10px -6px rgba(0, 0, 0, 15%); --safe-area-bottom: env(safe-area-inset-bottom); } @media (display-mode: standalone) { @@ -518,6 +481,7 @@ body.app-body { .app-body .loading-bar { background-color: var(--color-accent); } + .app-body .circular-progress { color: var(--color-accent); } @@ -528,9 +492,11 @@ body.app-body { background-position: center; background-repeat: no-repeat; } + .app-body .redirect__logo img { opacity: 0; } + .app-body .redirect__message a { color: var(--color-accent); } @@ -541,7 +507,7 @@ body.app-body { .app-body .compose-form .spoiler-input__input, .app-body .compose-form__autosuggest-wrapper, .app-body .compose-form__poll-wrapper select, -.app-body .poll__option input[type=text], +.app-body .poll__option input[type="text"], .app-body .report-dialog-modal__textarea, .app-body .search__input, .app-body .setting-text, @@ -549,6 +515,7 @@ body.app-body { .app-body .about__section__body { border: 0; } + .app-body .column-inline-form, .app-body .column>.scrollable, .app-body .getting-started, @@ -564,6 +531,7 @@ body.app-body { background-color: var(--color-content-secondary-bg); border-radius: 50%; } + .app-body .account__avatar img { border-radius: 50%; } @@ -573,12 +541,15 @@ body.app-body { 0% { transform: scale(1); } + 50% { transform: scale(1.6); } + 75% { transform: scale(.8); } + 100% { transform: scale(1); } @@ -587,9 +558,11 @@ body.app-body { 0% { transform: scale(1); } + 50% { transform: scale(1.25); } + 100% { transform: scale(1); } @@ -598,12 +571,15 @@ body.app-body { 0% { transform: translateY(0); } + 50% { transform: translateY(-30%); } + 75% { transform: translateY(20%); } + 100% { transform: translate(0); } @@ -613,22 +589,27 @@ body.app-body { transform: translate(0); opacity: 0; } + 5% { transform: translate(0); opacity: 1; } + 50% { transform: translate(200%, -200%); opacity: 0; } + 80% { transform: translate(200%, -200%); opacity: 0; } + 85% { transform: translate(-20%, 20%); opacity: 0; } + 100% { transform: translate(0); opacity: 1; @@ -639,6 +620,7 @@ body.app-body { opacity: 0; transform: translateY(-10%); } + to { opacity: 1; transform: translateY(0); @@ -649,6 +631,7 @@ body.app-body { transform: translate(0, -10px); opacity: 0; } + to { transform: translate(0, 0); opacity: 1; @@ -658,9 +641,11 @@ body.app-body { 0% { opacity: 0; } + 20% { opacity: 0; } + 100% { opacity: 1; } @@ -669,9 +654,11 @@ body.app-body { 0% { transform: rotate(0) scale(1); } + 60% { transform: rotate(80deg) scale(1.2); } + 100% { transform: rotate(60deg) scale(1.1); } @@ -680,12 +667,15 @@ body.app-body { 0% { transform: rotate(0); } + 40% { transform: rotate(15deg); } + 70% { transform: rotate(-15deg); } + 100% { transform: rotate(0); } @@ -696,19 +686,24 @@ body.app-body { .app-body .columns-area__panels__pane--navigational { order: 1; } + .app-body .columns-area__panels__main { contain: inline-size; order: 2; } + .app-body .columns-area__panels__pane--compositional { order: 3; } + .app-body .columns-area--mobile .column { flex: unset; } + .app-body .columns-area--mobile .column:focus-within { overflow: visible; } + .app-body .scrollable, .app-body .column > .scrollable { background-color: var(--color-content-bg); @@ -719,30 +714,33 @@ body.app-body { border-radius: 0; padding-bottom: 20px; } + .app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } + .app-body .columns-area--mobile { padding: 0; } + .app-body .columns-area__panels { gap: 10px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) .scrollable, .app-body:not(.layout-multiple-columns) .column > .scrollable { border-right: 0; border-left: 0; } } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .columns-area__panels__main { max-width: 580px; padding: 0; } } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .columns-area__panels { gap: 0; } @@ -754,26 +752,32 @@ body.app-body { height: 20px; width: 20px; } + .app-body .verified-badge .icon { width: 18px; height: 18px; } + .app-body .account__header__tabs__buttons .icon-button .icon { height: 24px; width: 24px; } + .app-body .status__visibility-icon .icon { height: 1em; width: 1em; } + .app-body .detailed-status__meta .icon, .app-body .dropdown-button .icon { height: 15px; width: 15px; } + .app-body .icon-button { padding: 2px; } + .app-body :is( .icon-bookmark, @@ -921,47 +925,59 @@ path { .app-body .icon-bookmark { background-image: var(--icon-bookmark-accent); } + .app-body .detailed-status__button .icon-bookmark { background-image: var(--icon-bookmark-accent); } + .app-body .icon-button.active .icon-bookmark { background-image: var(--icon-bookmark-active); } + /* Favorite */ .app-body .icon-star { background-image: var(--icon-star-accent); } + .app-body button.icon-button.active .icon-star, .app-body .notification__message .icon-star, .app-body .notification-group--favourite .icon-star { background-image: var(--icon-star-active); } + .app-body .detailed-status__link .icon-star { background-image: var(--icon-star); margin: 0; } + .app-body .media-modal__overlay .icon-star { background-image: var(--icon-star-accent); } + /* Boost */ .app-body .icon-retweet { background-image: var(--icon-boost-accent); } + .app-body button.icon-button.active .icon-retweet, .app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-accent-active); } + .app-body .status__prepend__icon .icon-retweet, .app-body .notification-group--reblog .icon-repeat { background-image: var(--icon-boost-accent-active); } + .app-body .notification__message .icon-retweet { background-image: var(--icon-boost-active); } + .app-body .detailed-status__link .icon-retweet { background-image: var(--icon-boost); margin: 0; } + .app-body button.icon-button:is( .reblogPrivate:where(.disabled, [disabled]), @@ -974,50 +990,63 @@ button.icon-button:is( opacity: .2; pointer-events: none; } + .app-body .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost-accent); vertical-align: middle; } + .app-body .media-modal__overlay .icon-retweet { background-image: var(--icon-boost-accent); } + /* Reply */ .app-body .icon-reply, .app-body .icon-reply-all { background-image: var(--icon-reply-accent); } + .app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } + .app-body .media-modal__overlay :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } + .app-body .status__prepend__icon .icon-reply, .app-body .notification-ungrouped__header__icon .icon-reply { background-image: var(--icon-reply-accent-active); } + /* Ellipsis */ .app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) { background-image: var(--icon-ellipsis-accent); } + .app-body .detailed-status__action-bar .icon-ellipsis-h { background-image: var(--icon-ellipsis-accent); } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { background-image: var(--icon-ellipsis-active); } + /* Poll icon */ .app-body .icon-tasks, .app-body .icon-bar-chart-4-bars { background-image: var(--icon-poll); } + .app-body .notification__message .icon-tasks, .app-body .notification-ungrouped .icon-bar-chart-4-bars { background-image: var(--icon-poll-accent); } + .app-body .compose-form .icon-tasks { background-image: var(--icon-poll-accent); } + /* Post icon */ .app-body .icon-quote-right { background-image: var(--icon-post); @@ -1029,228 +1058,292 @@ button.icon-button:is( margin-right: 7px; margin-left: 3px; } + /* Home icon */ .app-body .icon-home { background-image: var(--icon-home); } + .app-body .column-link.active .icon-home { background-image: var(--icon-home-active); } + .layout-multiple-columns .column-link .icon-home { background-image: var(--icon-home-accent); } + .app-body .notification__message .icon-home, .app-body .notification-ungrouped .icon-notifications-active { background-image: var(--icon-post-notification-accent); } + /* Globe icon */ .app-body .column-link .icon-globe, .app-body .column-header__icon.icon-globe { background-image: var(--icon-globe); } + .app-body .column-link.active .icon-globe { background-image: var(--icon-globe-active); } + .layout-multiple-columns .column-link .icon-globe { background-image: var(--icon-globe-accent); } + /* Hashtag icon */ .app-body .icon-hashtag { background-image: var(--icon-hashtag); } + /* Explore icon */ .app-body .icon-explore, .app-body .column-link .icon-explore { background-image: var(--icon-explore); } + .app-body .column-link.active .icon-explore { background-image: var(--icon-explore-active); } + .layout-multiple-columns .column-link .icon-explore { background-image: var(--icon-explore-accent); } + /* Search icon */ .app-body .icon-search { background-image: var(--icon-search); } + .app-body .ui__header__links .icon-search, .app-body .search__icon .icon-search { background-image: var(--icon-search-active); } + .app-body .column-link .icon-search { background-image: var(--icon-search-column-link); } + .app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link-active); } + .app-body .column-header__icon.icon-search { background-image: var(--icon-search-column-link); } + .app-body .icon-times-circle { background-image: var(--icon-erase); } + /* Notifications icon */ .app-body .column-link .icon-bell, .app-body .column-header__icon.icon-bell { background-image: var(--icon-bell); } + .app-body .column-link.active .icon-bell { background-image: var(--icon-bell-active); } + /* Direct messages icon */ .app-body .column-link .icon-at, .app-body .column-header__icon.icon-at { background-image: var(--icon-direct-messages); } + .app-body .column-link.active .icon-at { background-image: var(--icon-direct-messages-active); } + .layout-multiple-columns .column-link .icon-at { background-image: var(--icon-direct-messages-accent); } + /* Bookmarks icon */ .app-body .icon-bookmarks, .app-body .column-header__icon.icon-bookmarks { background-image: var(--icon-bookmark-column-link); } + .app-body .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } + .layout-multiple-columns .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent); } + /* Favorites icon */ .app-body .column-link .icon-star, .app-body .column-header__icon.icon-star { background-image: var(--icon-star-column-link); } + .app-body .column-link.active .icon-star { background-image: var(--icon-star-column-link-active); } + .layout-multiple-columns .column-link .icon-star { background-image: var(--icon-star-column-link-accent); } + /* Lists icon */ .app-body .icon-list-ul, .app-body .column-header__icon.icon-list-ul { background-image: var(--icon-list); } + .app-body .column-link.active .icon-list-ul { background-image: var(--icon-list-active); } + .layout-multiple-columns .column-link .icon-list-ul { background-image: var(--icon-list-accent); } + .app-body .navigation-panel .list-panel .column-link .icon-list-ul { background-image: var(--icon-dot-accent); transform: scale(1.8); } + .app-body .navigation-panel .list-panel .column-link.active .icon-list-ul { background-image: var(--icon-dot-accent-active); } + /* Settings icon */ .app-body .column-link .icon-cog { background-image: var(--icon-settings); } + .layout-multiple-columns .column-link .icon-cog { background-image: var(--icon-settings-accent); } + /* About page icon */ .app-body .navigation-panel .column-link .icon-ellipsis-h { background-image: var(--icon-ellipsis); } + .app-body .navigation-panel .column-link.active .icon-ellipsis-h { background-image: var(--icon-ellipsis-column-link-active); } + /* Moderation icon */ .app-body .icon-flag { background-image: var(--icon-moderation); } + .app-body .icon-tachometer { background-image: var(--icon-administration); } + /* Profile settings */ .app-body .navigation-bar .icon-button .icon-bars { background-image: var(--icon-gear); } + .app-body .navigation-bar .icon-button.active .icon-close { background-image: var(--icon-gear-active); } + .app-body .navigation-bar .icon-button:is(:active, :focus, :hover) { background-color: transparent; } + .app-body .navigation-bar .icon-button.active { transform: rotate(60deg) scale(1.1); animation: rotate-bounce .4s 1; } + /* Follow user icon */ .app-body .icon-user-plus, .app-body .icon-user, .app-body .icon-person-add { background-image: var(--icon-user-plus-accent); } + .app-body .active .icon-user-plus { background-image: var(--icon-user-plus); } + .app-body .column-header__icon.icon-user-plus, .app-body .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link); } + .app-body .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-column-link-active); } + .layout-multiple-columns .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent); } + /* Users icon */ .app-body .icon-users { background-image: var(--icon-users); } + .app-body .column-link .icon-users { background-image: var(--icon-users-accent); } + /* Announcement icon */ .app-body .icon-bullhorn { background-image: var(--icon-megaphone); } + /* Column settings icon */ .app-body .icon-sliders { background-image: var(--icon-sliders); } + /* Post visibility icons */ .app-body .icon-globe { background-image: var(--icon-globe-visibility); } + .app-body .dropdown-button .icon-globe { background-image: var(--icon-globe-visibility-accent); } + .app-body .dropdown-button.active .icon-globe { background-image: var(--icon-globe-visibility-inv); } + .app-body .icon-unlock { background-image: var(--icon-unlock); } + .app-body .dropdown-button .icon-unlock { background-image: var(--icon-unlock-accent); } + .app-body .dropdown-button.active .icon-unlock { background-image: var(--icon-unlock-inv); } + .app-body .icon-lock { background-image: var(--icon-lock); } + .app-body .dropdown-button .icon-lock { background-image: var(--icon-lock-accent); } + .app-body .dropdown-button.active .icon-lock { background-image: var(--icon-lock-inv); } + .app-body .icon-at { background-image: var(--icon-at); } + .app-body .dropdown-button .icon-at { background-image: var(--icon-at-accent); } + .app-body .dropdown-button.active .icon-at { background-image: var(--icon-at-inv); } @@ -1259,38 +1352,49 @@ button.icon-button:is( .app-body .icon-paperclip { background-image: var(--icon-paperclip-accent); } + .app-body .icon-photo-library, .app-body .edit-indicator__attachments > .icon { background-image: var(--icon-paperclip); } + .app-body .compose-form__buttons .icon-button:nth-child(3) .icon { background-image: var(--icon-warning); } + .app-body .compose-form__buttons .icon-button:nth-child(3):is(.active, .active:hover) .icon { background-image: var(--icon-warning-inv); } + .app-body .icon-check:is(.verified__mark, .verified-badge__mark) { background-image: var(--icon-verified); } + .app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .account__relationship .icon-check, .app-body .follow-request-banner .button .icon-check { background-image: var(--icon-check); } + .app-body .icon-bell { background-image: var(--icon-bell-ringing); } + .app-body .icon-bell-o { background-image: var(--icon-bell-accent); } + .app-body .icon-thumb-tack { background-image: var(--icon-pin); } + .app-body .icon-file-text { background-image: var(--icon-link); } + .app-body :is( .account--panel, @@ -1300,114 +1404,148 @@ button.icon-button:is( .icon-times { background-image: var(--icon-reject); } + .app-body .account--panel .icon-times, .app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } + .app-body .account__relationship .icon-times, .app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } + .app-body .account__header__tabs__buttons .icon-undefined { background-image: var(--icon-share); } + .app-body .account__header__tabs__buttons .copyable .icon-undefined { background-image: var(--icon-copy); } + .app-body .account__header__tabs__buttons .copied .icon-undefined { background-image: var(--icon-copied); } + .app-body .icon-eye-slash { background-image: var(--icon-eye-shut); } + .app-body .icon-button.overlayed .icon-eye-slash, .app-body .media-gallery__item__overlay .icon-eye-slash { background-image: var(--icon-eye-shut-inv); } + .app-body .player-button .icon-eye-slash { filter: brightness(100); } + .app-body .icon-eye { background-image: var(--icon-eye-open); } + .app-body .icon-eraser { background-image: var(--icon-broom); } + .app-body .icon-pencil { background-image: var(--icon-edited-accent); } + .app-body .icon-edit { background-image: var(--icon-edited-accent); } -@media screen and (min-width:1173px) { +@media screen and (width >=1173px) { .app-body .navigation-panel .column-link .icon-home { background-image: var(--icon-home-accent); } + .app-body .navigation-panel .column-link.active .icon-home { background-image: var(--icon-home-accent-active); } + .app-body .navigation-panel .column-link .icon-bell { background-image: var(--icon-bell-accent); } + .app-body .navigation-panel .column-link.active .icon-bell { background-image: var(--icon-bell-accent-active); } + .app-body .navigation-panel .column-link .icon-explore { background-image: var(--icon-explore-accent); } + .app-body .navigation-panel .column-link.active .icon-explore { background-image: var(--icon-explore-accent-active); } + .app-body .navigation-panel .column-link .icon-search { background-image: var(--icon-search-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-search { background-image: var(--icon-search-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-globe { background-image: var(--icon-globe-accent); } + .app-body .navigation-panel .column-link.active .icon-globe { background-image: var(--icon-globe-accent-active); } + .app-body .navigation-panel .column-link .icon-at { background-image: var(--icon-direct-messages-accent); } + .app-body .navigation-panel .column-link.active .icon-at { background-image: var(--icon-direct-messages-accent-active); } + .app-body .navigation-panel .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-star { background-image: var(--icon-star-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-star { background-image: var(--icon-star-column-link-accent-active); } + .app-body .navigation-panel .column-link .icon-list-ul { background-image: var(--icon-list-accent); } + .app-body .navigation-panel .column-link.active .icon-list-ul, .app-body .navigation-panel .column-link:has(+ .list-panel > .column-link.active) .icon-list-ul { background-image: var(--icon-list-accent-active); } + .app-body .navigation-panel .column-link .icon-cog { background-image: var(--icon-settings-accent); } + .app-body .navigation-panel .column-link .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent); } + .app-body .navigation-panel .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-column-link-accent-active); } + .app-body .icon-flag { background-image: var(--icon-moderation-accent); } + .app-body .icon-tachometer { background-image: var(--icon-administration-accent); } @@ -1424,6 +1562,7 @@ button.icon-button:is( text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body a.status-link:not(.mention, .hashtag):is(:active, :focus, :hover), .app-body a:is(.status-link, .mention, .navigation-bar__profile-edit):is(:active, :focus, :hover) span, .app-body :is(.account__header__fields, .account__header__content, .trends__item__name) a:is(:active, :focus, :hover) span, @@ -1443,11 +1582,13 @@ button.icon-button:is( text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body a.mention:is(:active, :focus, :hover), .app-body :is(.account__header__fields, .account__header__content) a:is(:active, :focus, :hover), .app-body :is(.detailed-status__datetime, .status__relative-time):is(:active, :focus, :hover) { text-decoration: none !important; } + .app-body .account__header__fields .verified a span { display: inline; } @@ -1459,6 +1600,7 @@ button.icon-button:is( .app-body .compose-form { gap: 0; } + .app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 23px 15px 15px 18px; @@ -1471,9 +1613,11 @@ button.icon-button:is( background-color .2s, border-color .2s; } + .app-body .navigation-bar strong { color: var(--color-content-fg); } + .app-body .navigation-bar .account { background-color: transparent; padding-left: 0; @@ -1482,18 +1626,22 @@ button.icon-button:is( border-right: 0; border-bottom: 0; } + .app-body .navigation-bar .account__display-name { line-height: 1.25; } + .app-body :is(.navigation-bar, .reply-indicator) .account__avatar { outline: 6px solid var(--color-content-bg); border-radius: 8px; position: relative; z-index: 2; } + .app-body .reply-indicator__line { z-index: 1; } + .app-body .compose-form__highlightable { border-top: 0; border-left: 1px solid var(--color-lines); @@ -1506,20 +1654,24 @@ button.icon-button:is( background-color: var(--color-content-bg); transition: all .2s; } + .app-body .compose-form .reply-indicator:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form .compose-form__warning:has(~ .compose-form__highlightable:focus-within), .app-body .compose-form__highlightable:focus-within { border-color: var(--color-accent); } + .app-body .compose-form .reply-indicator + .navigation-bar, .app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within), .app-body .reply-indicator { background-color: var(--color-content-bg); } + .app-body .compose-form__highlightable.active { box-shadow: none; } + .app-body .compose-form :is( .autosuggest-textarea__suggestions, @@ -1533,45 +1685,55 @@ button.icon-button:is( border-top: 0; border-radius: 0; } + .app-body .compose-form .autosuggest-textarea__textarea { padding-inline-start: 20px; } + .app-body .compose-form .autosuggest-textarea__textarea::placeholder { font-size: 130%; opacity: .5; } + .app-body .autosuggest-textarea__textarea::placeholder, .app-body .autosuggest-account .display-name__html { color: var(--color-content-fg); } + .app-body .autosuggest-account .display-name__account, .app-body .hover-card .display-name__account, .app-body .hover-card .account-fields dl dt { color: var(--color-content-fg-muted); } + .app-body .autosuggest-textarea__suggestions { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, .25), - 0 8px 10px -6px rgba(0, 0, 0, .25); + 0 20px 25px -5px rgba(0, 0, 0, 25%), + 0 8px 10px -6px rgba(0, 0, 0, 25%); } + .app-body .autosuggest-textarea__suggestions__item { color: var(--color-content-fg); } + .app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), .app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .autosuggest-textarea__suggestions, .app-body .autosuggest-textarea__suggestions__item:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .autosuggest-account .account__avatar { border: 0; } + .app-body .dropdown-button { border-radius: 8px; border-color: var(--color-accent-bg); @@ -1579,18 +1741,22 @@ button.icon-button:is( padding: 5px 8px; transition: border-color .2s; } + .app-body .dropdown-button:hover { border-color: var(--color-accent); } + .app-body .dropdown-button.active, .app-body .column-settings .dropdown-button.active { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .column-settings .dropdown-button { background-color: var(--color-accent-bg); } + .app-body .reply-indicator { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -1602,25 +1768,30 @@ button.icon-button:is( padding: 18px 15px 0 18px; transition: all .2s; } + .app-body .reply-indicator p { overflow: hidden; } -.app-body .reply-indicator__line:before { + +.app-body .reply-indicator__line::before { background-color: var(--color-accent); z-index: 1; opacity: .6; } + .app-body .reply-indicator + .navigation-bar { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 16px; } + .app-body .reply-indicator .display-name__account, .app-body .reply-indicator__attachments { color: var(--color-content-fg); opacity: .7; } + .app-body .reply-indicator__attachments { margin-top: 8px; } @@ -1632,18 +1803,23 @@ button.icon-button:is( padding-inline-start: 20px; padding-bottom: 17px; } + .app-body .edit-indicator__header { color: var(--color-content-fg); } + .app-body .edit-indicator__header > *:not(.edit-indicator__cancel) { opacity: .7; } + .app-body .edit-indicator__content { color: var(--color-content-fg); } + .app-body .edit-indicator__content a { color: var(--color-accent); } + .app-body .edit-indicator__attachments { color: var(--color-content-fg); opacity: .7; @@ -1655,9 +1831,11 @@ button.icon-button:is( border-radius: 8px; transition: all .2s; } + .app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover { border-color: var(--color-accent); } + .app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):active { background-color: var(--color-accent-bg); } @@ -1671,6 +1849,7 @@ button.icon-button:is( box-shadow: none; transition: border-color .2s; } + .app-body .compose-form .compose-form__warning, .app-body .simple_form .recommended, .app-body .compose-form .compose-form__warning, @@ -1679,32 +1858,40 @@ button.icon-button:is( .app-body .navigation-bar__profile-edit { color: var(--color-accent); } + .app-body .simple_form .recommended { border-color: var(--color-lines); } + .app-body .compose-form__sensitive-button .icon-button:hover { background-color: transparent; } -.app-body .compose-form__sensitive-button input[type=checkbox]:checked { + +.app-body .compose-form__sensitive-button input[type="checkbox"]:checked { background-color: var(--color-accent); border-color: var(--color-accent); } + .app-body .spoiler-input__border { display: none; } + .app-body .compose-form .autosuggest-input { box-sizing: border-box; } + .app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } + .app-body .compose-form .spoiler-input .autosuggest-input { background-color: var(--color-content-bg); border-bottom: 0; padding: 5px; } + .app-body .compose-form .spoiler-input__input { background-image: var(--icon-warning); background-position: 10px center; @@ -1719,24 +1906,29 @@ button.icon-button:is( font-weight: 500; transition: all .2s; } + .app-body .compose-form .spoiler-input__input:focus { border-color: var(--color-accent); background-color: var(--color-content-bg); } + .app-body .display-name { color: var(--color-content-fg); } + .app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon { width: 15px; height: 15px; } + .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } + .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { - background-color: rgba(0, 0, 0, .4); + background-color: rgba(0, 0, 0, 40%); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .compose-form { padding: 15px; } @@ -1759,10 +1951,12 @@ button.icon-button:is( transform-origin: right center; margin-right: -10px; } + .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter { opacity: 1; margin-right: 0; } + .app-body .character-counter--over { color: #df405a; font-weight: 500; @@ -1773,33 +1967,41 @@ button.icon-button:is( gap: 10px; padding: 0; } + .app-body .compose-form__dropdowns { gap: 6px; padding: 0 12px; } + .app-body .compose-form__actions { border-radius: 0 0 8px 8px; padding: 10px 12px; background-color: var(--color-content-secondary-bg); } + .app-body .compose-form__buttons { gap: 1px; } + .app-body .compose-form__buttons .icon-button { padding: 6px; border-radius: 8px; transition: all .2s; } + .app-body .compose-form__buttons .icon { transform: scale(1.2); width: 20px; } + .app-body .compose-form__buttons .icon-button:is(.active, .active:hover) { background-color: var(--color-accent); } + .app-body .compose-form__submit { max-width: 40px; } + .app-body .compose-form__submit .button { height: 40px; max-width: 40px; @@ -1814,13 +2016,16 @@ button.icon-button:is( background-color .2s, border-color .2s; } + .app-body .compose-form__submit .button:active { transform: scale(.95); } + .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button { background-image: var(--icon-send); background-color: var(--color-accent-bg); } + .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit { animation: bounce-sml .2s ease-out 1; } @@ -1829,31 +2034,38 @@ button.icon-button:is( background-color: var(--color-secondary-bg); border-radius: 8px; } + .app-body .upload-area__content { border-color: var(--color-accent-focus); border-radius: 8px; } + .app-body .upload-progress__tracker { background-color: var(--color-accent); } + .app-body .upload-progress__backdrop { background-color: var(--color-accent-bg); } + .app-body .upload-progress .icon { color: var(--color-accent) } + .app-body .upload-progress__message, .app-body .upload-progress__message span { color: var(--color-content-fg); } + .app-body .compose-form__upload .icon-button { - background-color: rgba(0, 0, 0, .75); + background-color: rgba(0, 0, 0, 75%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--color-accent-fg); border-radius: 8px; padding: 6px; } + .app-body .compose-form__upload .icon-button:hover { background-color: #444; color: var(--color-accent-fg); @@ -1863,10 +2075,12 @@ button.icon-button:is( .app-body .compose-form__poll { gap: 3px; } + .app-body .compose-form__poll .poll__option { margin-bottom: 2px; } -.app-body .poll__option input[type=text] { + +.app-body .poll__option input[type="text"] { border-radius: 8px; padding: 7px 12px; border: 1px solid var(--color-lines); @@ -1874,18 +2088,22 @@ button.icon-button:is( color: var(--color-content-fg); transition: all .2s; } -.app-body .poll__option input[type=text]:focus { + +.app-body .poll__option input[type="text"]:focus { border-color: var(--color-accent); } + .app-body .compose-form__poll__footer { margin-top: 5px; padding-inline-start: 12px; gap: 6px; margin-bottom: -10px; } + .app-body .compose-form__poll__select__label { display: none; } + .app-body .compose-form__poll__select__value { background-position: 8px center; background-size: 15px; @@ -1901,33 +2119,42 @@ button.icon-button:is( border-color .2s; cursor: pointer; } + .app-body .compose-form__poll__select__value:is(:active, :hover, :focus) { border-color: var(--color-accent); outline: 0; } + .app-body .compose-form__poll__select__value:active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value { background-image: var(--icon-timer); } + .app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value:active { background-image: var(--icon-timer-inv); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value { background-image: var(--icon-check-radio); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:active, .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked):active { background-image: var(--icon-check-radio-inv); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked) { background-image: var(--icon-check-radio); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked) { background-image: var(--icon-check-box); } + .app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked):active { background-image: var(--icon-check-box-inv); } @@ -1944,9 +2171,11 @@ button.icon-button:is( .app-body .compose-form__poll-wrapper .poll__footer { border-top: 0; } + .app-body .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } + .app-body .compose-form__poll-wrapper .autosuggest-input input, .app-body .compose-form__poll-wrapper select { background-color: var(--color-content-bg); @@ -1954,20 +2183,25 @@ button.icon-button:is( border-radius: 8px; color: var(--color-content-fg); } + .app-body .compose-form__poll-wrapper .autosuggest-input input:focus, .app-body .compose-form__poll-wrapper select:focus { border-color: var(--color-accent); } + .app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } + .app-body .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } + .app-body .compose-form__poll-button .icon-button.active { background-color: var(--color-accent); } + .app-body .compose-form__poll-button .icon-button.active .icon-tasks { background-image: var(--icon-poll-active); } @@ -1976,6 +2210,7 @@ button.icon-button:is( .app-body .muted .poll { color: var(--color-content-fg-muted); } + .app-body .poll__footer { color: var(--color-content-fg-muted); display: flex; @@ -1986,6 +2221,7 @@ button.icon-button:is( font-size: 12px; padding: 0; } + .app-body .poll__link { color: var(--color-accent); text-decoration: none; @@ -1998,21 +2234,26 @@ button.icon-button:is( height: 32px; transition: all .3s; } + .app-body .poll__link:hover { border-color: var(--color-accent); } + .app-body .poll__link:active { background-color: var(--color-accent-bg); } + .app-body .poll__option.editable .poll__input { display: none; } + .app-body .poll li { margin-bottom: 4px; position: relative; border-radius: 8px; overflow: hidden; } + .app-body :is(.status, .detailed-status) .poll__option { border: 1px solid var(--color-lines-translucent); color: var(--color-content-fg); @@ -2024,21 +2265,26 @@ button.icon-button:is( z-index: 1; align-items: center; } + .app-body .poll__option.selectable { cursor: pointer; } + .app-body .poll__option.selectable:active { transform: scale(.98); } + .app-body .poll__option.selectable:hover { border-color: var(--color-accent); color: var(--color-accent); } + .app-body .poll__option.selectable:has(.poll__input.active) { border-color: var(--color-accent); background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .poll__option.selectable .poll__input:not(.active) { border-width: 0; outline-width: 0 !important; @@ -2046,14 +2292,17 @@ button.icon-button:is( transition: background .2s; } + .app-body .poll__option.selectable:hover .poll__input:not(.active) { background-color: var(--color-accent-bg); } + .app-body .poll__option.selectable .poll__input.active { border-width: 3px; border-color: var(--color-accent-bg); outline-width: 1px !important; } + .app-body .poll__footer .button.button-secondary { box-sizing: border-box; padding: 0 16px; @@ -2063,32 +2312,39 @@ button.icon-button:is( color: var(--color-accent-fg); float: inline-end; } + .app-body .poll__footer .button.button-secondary:hover { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } + .app-body .poll__footer .button.button-secondary:disabled { opacity: 1; background-color: var(--color-content-secondary-bg); color: var(--color-accent); display: none; } + .app-body .poll__footer .button.button-secondary:not(:disabled) { animation: bounce-sml .3s ease-out 1; } + .app-body .poll__footer .button.button-secondary:active { transform: scale(.95); } + .app-body .poll__voted { position: absolute; right: 3px; height: 20px; color: var(--color-accent); } + .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted { right: 28px; color: var(--color-confirm-fg); } + .app-body .poll__chart { background: var(--color-lines); opacity: .8; @@ -2104,20 +2360,24 @@ button.icon-button:is( opacity: 1; } } + .app-body .poll__chart.leading, .app-body .muted .poll__chart.leading, .app-body .poll__option:has(.poll__voted) + .poll__chart.leading { background: var(--color-confirm); opacity: .5; } + .app-body .poll__option:has(.poll__voted) { border-color: var(--color-accent); background-color: transparent; } + .app-body .poll__option:has(.poll__voted) + .poll__chart { background-color: color-mix(in srgb, var(--color-accent), transparent 70%); opacity: 1; } + .app-body .poll__option:has(+ .poll__chart.leading), .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { border-color: color-mix(in srgb, var(--color-confirm), transparent 30%); @@ -2128,6 +2388,7 @@ button.icon-button:is( background-repeat: no-repeat; background-image: var(--icon-trophy); } + .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { border-color: var(--color-confirm); } @@ -2136,9 +2397,11 @@ button.icon-button:is( .app-body .emoji-picker-dropdown > .icon-button .icon { background-image: var(--icon-emoji-accent); } + .app-body .emoji-picker-dropdown > .icon-button.active .icon { background-image: var(--icon-emoji-accent-inv); } + .app-body .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; @@ -2146,53 +2409,65 @@ button.icon-button:is( border: 1px solid var(--color-lines); box-shadow: var(--dropdown-shadow); } + .app-body .emoji-mart { display: block; } + .app-body .emoji-mart-bar:first-child { background-color: var(--color-content-secondary-bg); border-color: var(--color-lines); padding-top: 2px; } + .app-body .emoji-mart-anchor-bar { background-color: var(--color-accent); } + .app-body .emoji-mart-anchor-selected { color: var(--color-accent); } + .app-body .emoji-mart-anchor-icon svg path, .app-body .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } + .app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, .app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, .app-body .emoji-mart-search-icon svg path { fill: var(--color-accent); } + .app-body .emoji-mart-search-icon, .app-body .emoji-mart-search-icon:disabled, .app-body .emoji-mart-search-icon svg { opacity: 1; } + .app-body .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } + .app-body .emoji-mart-search, .app-body .emoji-mart-scroll, .app-body .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } + .app-body .emoji-mart-search input:focus { border-color: var(--color-accent); outline: 0; } + .app-body .emoji-mart-search input::placeholder { color: var(--color-accent); } @@ -2203,9 +2478,11 @@ button.icon-button:is( .app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } + .app-body .status__content .emojione { transition: transform .8s .8s; } + .app-body .status__content .emojione:hover { transform: scale(2.5); } @@ -2219,27 +2496,31 @@ button.icon-button:is( .app-body .status__content { color: var(--color-content-fg); } + .app-body .account__display-name strong, .app-body .status__display-name strong, .app-body .status__info .status__display-name .display-name__account, .app-body .status__prepend a bdi { color: var(--color-content-fg); } + .app-body .translate-button { color: var(--color-content-fg-muted); } + .app-body .translate-button__meta, .app-body .translate-button button, .app-body .status__content__translate-button { font-size: 85%; } + .app-body .status__content__translate-button, .app-body .translate-button .link-button { width: 32px; height: 32px; bottom: 13px; right: 52px; - padding: 0px; + padding: 0; position: absolute; background-size: 20px; background-repeat: no-repeat; @@ -2249,6 +2530,7 @@ button.icon-button:is( transition: all .3s; background-color: transparent; } + .app-body .detailed-status .status__content__translate-button, .app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); @@ -2258,12 +2540,13 @@ button.icon-button:is( right: 60px; bottom: 20px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__content__translate-button, .app-body .translate-button .link-button { bottom: 10px; } } + .app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child :is( .translate-button .link-button, @@ -2271,10 +2554,12 @@ button.icon-button:is( ) { bottom: 12px; } + .app-body .status__content__translate-button:hover, .app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } + .app-body .translate-button .link-button, .app-body .detailed-status .translate-button .link-button, .app-body .translate-button .link-button:hover, @@ -2283,53 +2568,64 @@ button.icon-button:is( background-color: var(--color-accent); transform: scale(.8); } + .app-body .status__content__translate-button > span, .app-body .translate-button .link-button > span, .app-body .notification .status__content__translate-button { display: none; } + .app-body .account__display-name strong, .app-body .status__display-name strong, .app-body .notification-request__name__display-name strong, .app-body .status__prepend a bdi { font-weight: bold; } + .app-body .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } + .app-body .status__wrapper { transition: background .3s; } + .app-body .status__wrapper, .app-body .detailed-status__wrapper { --color-post-bg: var(--color-content-bg); + background-color: var(--color-post-bg); padding: 13px 12px; position: relative; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__wrapper { padding: 10px 8px; } + .app-body .notification-ungrouped .status__wrapper { padding: 13px 12px; } } + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper, .app-body .scrollable > div:first-child > .status__wrapper, .app-body .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } + .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, .app-body .scrollable > div > article:last-child > div > .status__wrapper, .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } + .app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top: 0; } + .app-body .status__info { height: 22px; width: calc(100% + 56px); @@ -2340,19 +2636,23 @@ button.icon-button:is( line-height: 0.625; align-items: start; } + .app-body .status__info .status__display-name { overflow: visible; align-items: start; max-height: 22px; } + .app-body .status__info .status__display-name .display-name bdi, .app-body .status__info .status__display-name .display-name__account { vertical-align: top; } + .app-body .status__info .status__display-name .display-name__account { display: inline; opacity: .6; } + .app-body .status__relative-time { height: 22px; color: var(--color-content-fg); @@ -2361,9 +2661,11 @@ button.icon-button:is( inset-inline-end: 20px; z-index: 1; } + .app-body .status__relative-time > * { opacity: .6; } + .app-body .status__relative-time::before, .app-body .status__relative-time::after { position: absolute; @@ -2373,17 +2675,20 @@ button.icon-button:is( z-index: -1; transition: all .3s; } + .app-body .status__relative-time::before { width: 20px; inset-inline-start: -20px; background: linear-gradient(90deg, transparent, var(--color-post-bg)); transition: all .2s; } + .app-body .status__relative-time::after { inset-inline-start: 0; inset-inline-end: 0; background-color: var(--color-post-bg); } + .app-body .status__relative-time time + abbr { display: inline-block; width: 18px; @@ -2396,15 +2701,19 @@ button.icon-button:is( background-image: var(--icon-edited); color: transparent; } + .app-body .status__relative-time .status__visibility-icon { order: 1; } + .app-body .status__relative-time time { order: 3; } + .app-body .status__relative-time time + abbr { order: 2; } + .app-body .status__avatar { margin-bottom: -10px; z-index: 2; @@ -2413,20 +2722,24 @@ button.icon-button:is( background-color: var(--color-post-bg); transition: outline .3s; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-base .account__avatar { width: 46px !important; height: 46px !important; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay { position: absolute; top: -34px; right: -38px; pointer-events: none; } + .app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay .account__avatar { width: 29px !important; height: 29px !important; } + .app-body .reply-indicator__content, .app-body .status__content { line-height: 1.4; @@ -2443,6 +2756,7 @@ button.icon-button:is( /* 📏 Post dividers */ + /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ .app-body .status::before, .app-body .notification__message::before { @@ -2455,7 +2769,7 @@ button.icon-button:is( content: ""; opacity: .7; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status::before, .app-body .notification__message::before { width: calc(100% - 73px); @@ -2478,7 +2792,7 @@ button.icon-button:is( .app-body .dismissable-banner + article .status::before { display: none; } -@media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ +@media screen and (width >=890px) and (width <=1174px) { /* no divider above first post in a column thread on medium-size devices */ .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{ display: none; @@ -2489,10 +2803,12 @@ button.icon-button:is( .app-body .status--first-in-thread { border-top: 0; } + .app-body .status--first-in-thread::before { width: 100%; right: 0; } + .app-body .status--in-thread :is( .attachment-list, @@ -2508,21 +2824,26 @@ button.icon-button:is( margin-left: 0; width: auto; } + .app-body .status__line--first { height: 100%; } + .app-body .status__line--full { height: calc(100% + 32px); } + /* Default lines when replying in real time */ .app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { height: 0; } + /* Hide line before first in thread */ .app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), .app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { height: 0; } + .app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { height: calc(100% - 32px) !important; } @@ -2533,10 +2854,12 @@ button.icon-button:is( height: 100%; z-index: 1; } + .app-body .detailed-status { background-color: transparent; border-top: 0; } + /* Threaded line, actually */ .app-body .status__line { margin-inline-start: 6px; @@ -2544,16 +2867,18 @@ button.icon-button:is( -webkit-border-start: 2px solid var(--color-accent); opacity: .6; } + .app-body .status__line--full::before { background-color: var(--color-accent); } + /* Hide the "stub" from the first status line */ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, .app-body .status-reply.status--in-thread.status--first-in-thread > .status__line, .app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { top: 32px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status__line { inset-inline-start: 35px; } @@ -2570,10 +2895,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .focusable:focus .status__wrapper, .app-body .focusable:focus { outline: 0; + --color-post-bg: var(--color-content-bg-focus); + background-color: var(--color-post-bg); } -@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ +@media screen and (width >=1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ .app-body .status__wrapper:has(.status__content:hover), .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover), .app-body .status__wrapper:has(.status__content:hover) .status__avatar, @@ -2581,6 +2908,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu --color-post-bg: var(--color-content-bg-focus); } } + .app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar { outline: 6px solid var(--color-post-bg); } @@ -2596,44 +2924,54 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu inset 0 -5px var(--color-content-secondary-bg), inset 0 -6px var(--color-lines); } + .app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child { padding-bottom: 12px; box-shadow: none; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .detailed-status { padding: 8px 8px 14px; } } + .app-body .detailed-status .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } + .app-body .detailed-status .status__content { line-height: 1.27; } + .app-body .detailed-status { padding-bottom: 8px; } + .app-body .detailed-status, .app-body .detailed-status__action-bar { background-color: var(--color-content-bg); border: 0; } + .app-body .detailed-status__display-name strong, .app-body .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } + .app-body .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } + .app-body :is(.compose-panel, .compose-form) .detailed-status__display-name strong { font-size: 14px; } + .app-body .detailed-status__display-name .display-name__account { opacity: .7; } + .app-body .detailed-status__meta { color: var(--color-content-fg); display: flex; @@ -2647,6 +2985,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu overflow: hidden; position: relative; } + .app-body .detailed-status__meta::before { position: absolute; content: " "; @@ -2657,6 +2996,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu inset-inline-end: 0; background: linear-gradient(90deg, transparent, var(--color-post-bg)); } + .app-body .detailed-status__meta__line { border-top: 0; border-bottom: 0; @@ -2666,28 +3006,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: relative; opacity: .6; } + .app-body .detailed-status__meta__line:first-child { color: transparent; padding-left: 20px; padding-right: 5px; gap: 0; } + .app-body .detailed-status__meta__line:first-child svg { position: absolute; left: 0; } + .app-body .detailed-status__meta__line:first-child > * { color: var(--color-content-fg); white-space: nowrap; } + .app-body .detailed-status__meta__line:last-child { flex: 100%; opacity: .9; } + .app-body .detailed-status__application::before { content: "\00B7\00A0"; margin-left: -3px; } + .app-body .detailed-status__link:is([href$="/reblogs"], [href$="/favourites"]) { padding-left: 20px; border-radius: 8px; @@ -2696,12 +3042,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-size: 15px; transition: all .2s; } + .app-body .detailed-status__link[href$="/reblogs"] { background-image: var(--icon-boost); } + .app-body .detailed-status__link[href$="/favourites"] { background-image: var(--icon-star); } + .app-body .detailed-status__meta__line .dropdown-menu__text-button { overflow: hidden; padding-left: 20px; @@ -2711,52 +3060,62 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-size: 15px; text-align: start; } + .app-body .detailed-status__meta__line .dropdown-menu__text-button:is(:hover) { text-decoration: none; } + .app-body .detailed-status__action-bar { padding: 0 12px; justify-content: left; gap: 8px; width: auto; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .detailed-status__action-bar { padding-left: 0; padding-right: 0; } } + .app-body .detailed-status__button { width: 40px; height: 40px; flex: unset; } + .app-body .detailed-status__action-bar-dropdown { position: absolute; right: 18px; } + .app-body .detailed-status__meta .animated-number { color: var(--color-content-fg); font-weight: 700; } + .app-body .detailed-status__meta .dropdown-menu__text-button .animated-number { font-weight: 500; } + .app-body .status__action-bar .animated-number { color: var(--color-accent); font-weight: 500; } + .app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) { padding-left: 4px; padding-right: 4px; margin-right: 2px; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .active .icon-retweet + .icon-button__counter > .animated-number { color: var(--color-accent); } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .active @@ -2768,9 +3127,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body article > .account { padding: 16px; } + .app-body .account-timeline__header + article > .account { border-top: 1px solid var(--color-lines); } + .app-body .detailed-status__link { display: inline-flex; position: static; @@ -2783,12 +3144,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg-muted); transition: all .1s; } + .app-body .hashtag-bar a { font-weight: 500; } + .app-body .hashtag-bar .link-button { margin-left: 3px; } + .app-body .hashtag-bar a { background-color: color-mix( @@ -2800,18 +3164,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 3px 8px; border-radius: 8px; } + .app-body .hashtag-bar a:hover, .app-body .hashtag-bar .link-button:hover { color: var(--color-accent); } + .app-body .hashtag-bar a:hover { background-color: var(--color-accent-bg); } + .app-body .hashtag-bar a:active, .app-body .hashtag-bar a:focus { color: var(--color-accent-fg); background-color: var(--color-accent); } + .app-body .hashtag-bar a:hover span { text-decoration: none; } @@ -2822,14 +3190,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu margin-top: 8px; gap: 9px; } + .app-body .status__action-bar .status__action-bar__button-wrapper { flex-grow: 0; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) :is(button, .status__action-bar__dropdown) { transition: all .3s; } + .app-body .status__action-bar__button-wrapper:last-child { position: absolute; right: 18px; @@ -2838,6 +3209,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar .icon-button.disabled { pointer-events: none; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button:is( @@ -2859,24 +3231,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .icon-button.star-icon.activate > .icon-star { /* Disable default star spinning animation */ animation: none; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button.star-icon.active > .icon-star { animation: bounce .4s ease-out !important; } + .app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet { opacity: 1; } + .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .icon-button.active>.icon-retweet { animation: launch 1.2s ease-in 1 !important; } + .app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, .app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { animation: bounce-vertical .4s ease-out !important; } + .app-body .status__action-bar .icon-button, .app-body .detailed-status__action-bar .icon-button { min-width: 32px; @@ -2884,19 +3261,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 8px; position: relative; } + .app-body .detailed-status__action-bar .icon-button { min-width: 40px; height: 40px; } + .app-body .detailed-status__action-bar .icon-button > .icon { width: 25px; height: 25px; } + .app-body .detailed-status__action-bar .icon-button .app-body .icon-button.star-icon.active, .app-body .notification__favourite-icon-wrapper .star-icon { color: #ffb609; } + .app-body .status__prepend { display: inline-flex; padding: 0 10px; @@ -2913,33 +3294,42 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline-offset: -1px; font-size: 13px; } + .app-body .status__prepend:has(.status__prepend__icon .icon-retweet) { padding-left: 35px; } + .app-body .status__prepend__icon { height: 20px; text-align: right; } + .app-body .status__prepend .status__prepend__icon:has(.icon-retweet) { order: 2; } + .app-body .status__prepend__icon .icon { transform: scale(.9); } + .app-body .detailed-status__wrapper .status__prepend__icon { width: 46px; } + .app-body .status__prepend > span { color: var(--color-fg-muted); white-space: nowrap; } + .app-body .status__prepend:has(.status__prepend__icon > .icon-thumb-tack) > span { color: var(--color-content-fg); font-weight: 600; } + .app-body .status__prepend .muted .emojione { opacity: 1; } + .app-body .status-card, .app-body .status-card.compact { background-color: var(--color-content-bg); @@ -2948,39 +3338,48 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: all .3s; border-radius: 8px; } + .app-body .status-card:hover, .app-body .status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } + .app-body .status-card:active, .app-body .status-card.compact:active { transform: scale(.98); } + .app-body .status-card__image { background: var(--color-content-secondary-bg); } + .app-body .status-card__image .icon { width: 32px; height: 32px; } + .app-body .status-card[href*="/@" i] { align-items: start; } + .app-body .status-card[href*="/@" i] .status-card__description { margin-top: 2px; white-space: normal; } + .app-body .status-card[href*="/@" i] .status-card__image { order: 2; background-color: transparent; padding: 8px; box-sizing: border-box; } + .app-body .status-card[href*="/@" i]:not(.expanded) .status-card__image { height: 120px; width: 120px; } + .app-body .status-card[href*="/@" i] .status-card__image-image { border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -2989,26 +3388,32 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline: 1px solid var(--color-lines-translucent); outline-offset: -1px; } + .app-body .status-card[href*="/@" i] .status-card__content { display: flex; flex-flow: column; } + .app-body .status-card__title { order: 1; line-height: 1.3; font-size: 18px; margin-bottom: 3px; } + .app-body .status-card__host { order: 2; } + .app-body .status-card__description { order: 3; } + .app-body .status-card__image:has(.icon-file-text:only-child), .app-body .status-card__description:empty { display: none; } + .app-body .status-card__title, .app-body .status-card__description, .app-body .status-card__author, @@ -3016,14 +3421,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); transition: all .2s; } + .app-body .status-card__host { color: var(--color-content-fg-muted); } + .app-body .status-card:active .status-card__host, .app-body .status-card:focus .status-card__host, .app-body .status-card:hover .status-card__host { color: var(--color-accent); } + .app-body .status-card:active .status-card__author, .app-body .status-card:active .status-card__description, .app-body .status-card:active .status-card__title, @@ -3035,71 +3443,87 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status-card:hover .status-card__title { color: var(--color-content-fg); } + .app-body .status-card__author strong { font-weight: 500; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .status-card:not(.expanded) .status-card__image { width: 80px; } + .app-body .status-card:not(.expanded,:has(.icon-file-text)) .status-card__content { padding-top: 0; padding-bottom: 0; } + .app-body .status-card[href*="/@" i]:not(.expanded,:has(.icon-file-text)) .status-card__content { padding-top: 12px; padding-bottom: 12px; } + .app-body .status-card:not(.expanded) .status-card__host { margin-bottom: 2px; font-size: 12px; } + .app-body .status-card:not(.expanded) .status-card__title { font-size: 16px; } + .app-body .status-card:not(.expanded) .status-card__description { margin-top: 2px; font-size: 12px; } } + .layout-multiple-columns .status-card:not(.expanded) .status-card__image { width: 80px; } + .layout-multiple-columns .status-card:not(.expanded,:has(.icon-file-text),[href*="/@" i]) .status-card__content { padding-top: 0; padding-bottom: 0; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__host { margin-bottom: 2px; font-size: 12px; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__title { font-size: 16px; } + .layout-multiple-columns .status-card:not(.expanded) .status-card__description { margin-top: 2px; font-size: 12px; } + .app-body .status-card:has(+ .more-from-author) { box-sizing: border-box; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } + .app-body .status-card + .more-from-author { background-color: var(--color-content-secondary-bg); border: 1px solid var(--color-lines); border-top: 0; } + .app-body .more-from-author { color: var(--color-content-fg); overflow: hidden; } + .app-body .more-from-author .logo { color: var(--color-content-fg); min-width: 16px; height: 16px; } + .app-body .more-from-author > span { flex-grow: 1; overflow: hidden; @@ -3107,23 +3531,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu text-overflow: ellipsis; mask-image: linear-gradient(90deg, black 80%, transparent 96%); } + .app-body .notification-ungrouped .more-from-author :is(.account__avatar) { width: 16px !important; height: 16px !important; } + .app-body .more-from-author a:is(:active, :hover, :focus) { color: var(--color-accent); } + .app-body .more-from-author a { color: var(--color-content-fg); font-weight: 700; } + .app-body .status__content p { margin-bottom: 12px; } + .app-body .status__content p:last-child { margin-bottom: 0; } + .app-body .content-warning { background: none; color: var(--color-content-fg); @@ -3137,14 +3567,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu line-height: 1.26; position: relative; } + .app-body .detailed-status .content-warning { font-size: 19px; line-height: 1.26; } + .app-body .content-warning::before, .app-body .content-warning::after { display: none; } + .app-body .content-warning .link-button { background-color: transparent; width: 100%; @@ -3156,6 +3589,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: end; text-decoration: none; } + .app-body .content-warning .link-button span { background-color: transparent; background-image: var(--icon-eye-shut); @@ -3182,36 +3616,42 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: relative; z-index: 1; } + .app-body .content-warning .link-button:hover span { - border-color: rgba(68, 74, 90, .6); + border-color: rgba(68, 74, 90, 60%); } @media (prefers-color-scheme: dark) { .app-body .content-warning .link-button:hover span { - border-color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, 30%); } } + .app-body .content-warning .link-button:active span { transform: scale(.95); } + .app-body .content-warning:has(+ .status__content > .status__content__text--visible) .link-button span { background-image: var(--icon-eye-open); } @media (prefers-color-scheme: dark) { .app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span { - border-color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, 30%); } } .app-body .icon-button.overlayed { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); border-radius: 7px; } + .app-body .icon-button.overlayed:hover { - background-color: rgba(0, 0, 0, .4); + background-color: rgba(0, 0, 0, 40%); } + .app-body .status__wrapper--filtered__button { color: var(--color-accent); } + .app-body .status__wrapper--filtered { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); @@ -3231,6 +3671,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .video-player { transition: transform .3s; } + .app-body .media-gallery__item { border-radius: 8px !important; outline: 1px solid var(--color-lines-translucent); @@ -3243,71 +3684,85 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu min-height: unset; width: auto; } + .app-body .status--in-thread .more-from-author { margin-inline-start: 0; } + .app-body .account-gallery__container { gap: 4px; padding: 4px; } + .app-body .media-gallery__item, .app-body .media-gallery__item-thumbnail, .app-body .media-gallery__item-gifv-thumbnail { cursor: pointer; transition: .2s transform; } + .app-body .media-gallery__item:active { transform: scale(.98); } + .app-body .media-gallery__item-thumbnail img, .app-body .media-gallery__alt__popover { border-radius: 8px; } + .app-body .media-gallery__gifv:is(:active, :hover)::after { display: none; } + .app-body .picture-in-picture .video-player::after { border-radius: 0; } + .app-body .media-gallery__preview, .app-body .video-player { background-color: var(--color-content-secondary-bg); } + .app-body .media-gallery__preview { - outline: 1px solid rgba(0, 0, 0, 0.05); + outline: 1px solid rgba(0, 0, 0, 5%); outline-offset: -1px; height: calc(100% - 1px); border-radius: 8px; transition: all .2s; } + .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { outline: 1px solid var(--color-lines-translucent); } + .app-body .media-gallery__actions__pill { border-radius: 6px; padding: 3px 8px; font-weight: 500; - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); transition: all .2s; } + .app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--color-content-bg); - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, 10%); color: var(--color-content-fg); border-radius: 8px; } + .app-body .spoiler-button__overlay__label > span:first-child { font-weight: bold; } .app-body :is(.media-gallery__alt__label, .media-gallery__gifv__label) { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 10%); border-radius: 6px; } + .app-body .spoiler-button:not(.spoiler-button--minified) ~ .media-gallery__item :is(.media-gallery__alt__label, .media-gallery__gifv__label) { display: none; } @@ -3316,9 +3771,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%); border: 1px solid var(--color-lines-translucent); } + .app-body .media-gallery__alt__popover :is(p, h4) { color: var(--color-content-fg); } + .app-body .media-gallery__alt__popover h4 { font-weight: bold; } @@ -3331,9 +3788,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 0 0 8px 8px; contain: content; } + .app-body .empty-column-indicator a { color: var(--color-accent); } + .app-body .explore__links > .empty-column-indicator { border: 0; } @@ -3351,12 +3810,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu font-size: 95%; line-height: 1.5; } + .app-body .timeline-hint a { color: var(--color-accent); } + .app-body .timeline-hint p { opacity: .7; } + .app-body .timeline-hint::before { content: " "; display: block; @@ -3369,6 +3831,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: 0; border-radius: 8px; } + .app-body .timeline-hint::after { content: " "; background-image: var(--icon-reply-all); @@ -3381,6 +3844,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 40px; height: 40px; } + .app-body .timeline-hint > :is(p, a) { position: relative; z-index: 0; @@ -3394,18 +3858,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .follow_requests-unlocked_explanation a { color: var(--color-accent); } + .app-body .conversation__unread { background-color: var(--color-accent); } + .app-body .conversation__unread { color: var(--color-accent-fg); } + .app-body .conversation__content__names a strong { font-weight: bold; } + .app-body .conversation__content__names, .app-body .conversation__content__names a, .app-body .conversation__content__relative-time, @@ -3413,26 +3882,33 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .conversation .status__content p { color: var(--color-content-fg); } + .app-body .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } -.app-body .conversation.unread:before { + +.app-body .conversation.unread::before { border-color: var(--color-accent); } + .app-body .conversation__content__relative-time { opacity: .7; } + .app-body .conversation__content { position: relative; } + .app-body .account__avatar-composite { border-radius: 0; padding: 1px; } + .app-body .account__avatar-composite .account__avatar { height: auto !important; } + .app-body .account__avatar-composite__label { display: none; } @@ -3442,6 +3918,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-ungrouped--direct .notification-ungrouped__header { --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%); } + .app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover), .app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar, .app-body .status__wrapper.status__wrapper-direct.focusable:focus, @@ -3459,6 +3936,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 50px 50px 50px 10px; transition: all .2s; } + .app-body :is(.detailed-status__wrapper-direct) .status__prepend { margin-inline-start: 0; margin-block-end: 0; @@ -3470,23 +3948,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu outline: 0; font-size: 13px; } + .app-body :is(.detailed-status__wrapper-direct):has(.status__prepend) { padding-top: 40px; } + .app-body :is(.status__wrapper-direct):not(:has(.status__line)) .status__prepend { margin-inline-start: 66px; } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon-wrapper { height: 20px; } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .icon-at { background-image: var(--icon-at-inv); } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon { width: 20px; height: 20px; transform: scale(.85); } + .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend > span { color: var(--color-accent-fg); margin-top: -1px; @@ -3495,6 +3979,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-ungrouped--direct .notification-ungrouped__header > .notification-ungrouped__header__icon > svg { display: none; } + .app-body .notification-ungrouped--direct .notification-ungrouped__header > span { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -3512,30 +3997,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; box-shadow: inset 0 20px var(--color-bg); } -.app-body .column-header__wrapper.active:before { + +.app-body .column-header__wrapper.active::before { top: -17px; bottom: unset; - opacity: 30%; + opacity: 0.3; height: 35px; width: 100%; background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%); } + .app-body .column-header__wrapper.active { box-shadow: none; } -@media screen and (min-width:1175px) { - .app-body .column-header__wrapper.active:before { +@media screen and (width >=1175px) { + .app-body .column-header__wrapper.active::before { top: unset; bottom: -15px; border-top: 1px solid var(--color-lines-translucent); } + .app-body .column-header__wrapper.active { box-shadow: 0 1px 0 var(--color-lines-translucent); } } + .app-body .column-header { border-radius: 8px; } + .app-body .column-header, .app-body .column-back-button { background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%); @@ -3552,14 +4042,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .column-back-button { padding-left: 15px; } + .app-body .column-header__button, .app-body .column-header__back-button { background-color: transparent; border: 0; } + .app-body .column-header__button { color: var(--color-content-fg); transition: all .2s; @@ -3567,41 +4060,50 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 42px; margin: 4px 4px 4px 0; } + .app-body .column-header__button:active { transform: scale(.8); } + .app-body .column-header__icon { transform: scale(1.1); margin-right: 4px; } + .app-body .column-header__buttons .column-header__button:has(> .icon:only-child) { width: 42px; } + .app-body .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; } + .app-body .column-header__button:is(.active, .active:hover, :hover) { color: var(--color-accent); background-color: var(--color-accent-bg); } + .app-body .column-header__button.active .icon { transform: none; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-header__wrapper::after, .app-body:not(.layout-multiple-columns) .column-back-button::after { display: none; } + .app-body .column-header__buttons { height: 55px; } + .app-body:not(.layout-multiple-columns) .column-header, .app-body:not(.layout-multiple-columns) .column-back-button { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } + .app-body:not(.layout-multiple-columns) .column-header__button, .app-body:not(.layout-multiple-columns) .column-header__button:is(.active, .active:hover, :hover) { padding: 0 12px; @@ -3613,32 +4115,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-back-button--slim-button::after { display: none; } + .app-body .column-back-button--slim-button { top: -50px } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-back-button--slim-button { height: 50px; } } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body:not(.layout-multiple-columns) .column-back-button--slim-button { display: none; } } + .app-body :is(.column-header__back-button, .column-back-button) { gap: 5px; } + .app-body .column-back-button__icon { margin-inline-end: 0; } + .app-body :is(.column-header__back-button, .column-back-button) span, .app-body .column-header__back-button { position: relative; } + .app-body :is(.column-header__back-button, .column-back-button):hover { text-decoration: none; } + .app-body :is(.column-header__back-button, .column-back-button) span::before, .app-body .column-header__back-button:has(> svg:last-child)::before { content: " "; @@ -3652,16 +4160,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; transition: all .3s; } + .app-body :is(.column-header__back-button, .column-back-button) span::before { left: -35px; right: -12px; bottom: -11px; top: -10px; } + .app-body :is(.column-header__back-button, .column-back-button):hover span::before, .app-body .column-header__back-button:has(> svg:last-child):hover::before { background-color: var(--color-accent-bg); } + .app-body :is(.column-header__back-button, .column-back-button):active span::before, .app-body .column-header__back-button:has(> svg:last-child):active::before { transform: scale(.9); @@ -3676,9 +4187,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: background .3s; padding: 8px; } + .app-body :is(.load-gap, .load-more):is(:active, :hover) { background-color: var(--color-accent-lines); } + .app-body :is(.load-gap, .load-more) .icon-ellipsis-h { background-image: var(--icon-ellipsis-column-link-active-accent); } @@ -3689,32 +4202,39 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-right: 1px solid var(--color-lines); border-bottom: 0; } + .app-body .column-header__collapsible:is(:not(.collapsed), .animating) { border-bottom: 1px solid var(--color-lines); } + .app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } + .app-body .column-header__select-row { border-color: var(--color-lines); } + .app-body .column-header__select-row__actions button { background-color: var(--color-accent-bg); color: var(--color-accent); border-color: var(--color-accent-bg); } + .app-body .column-header__select-row__actions button:hover { border-color: var(--color-accent); } + .app-body .column-header__select-row__actions button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible { box-shadow: none; border-radius: 0; } + .app-body .column-header__select-row { border-color: var(--color-lines); background-color: var(--color-content-secondary-bg); @@ -3724,32 +4244,40 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-width: 0 0 1px; } } + .app-body .column-header__collapsible-inner { border: 0; } + .app-body .column-settings__section { color: var(--color-content-fg-bold); } + .app-body .setting-toggle__label { color: var(--color-content-fg); } + .app-body .column-header > button { padding: 0 0 0 15px; } + .app-body .column-header > button:nth-child(2) { padding-left: 0; } + .app-body .column-header .column-header__back-button { padding-right: 15px; } + .app-body .column-header > button, .app-body .column-header .column-header__back-button { font-weight: bold; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .ui { padding-top: 55px; } + .app-body:not(.layout-multiple-columns) .ui__header { background-color: transparent; border-bottom: 0; @@ -3759,9 +4287,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: none; backdrop-filter: none; } + .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo { margin-left: 3px; } + .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { box-shadow: none; display: block; @@ -3770,6 +4300,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 45px; border-bottom: 0; } + .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { display: block; top: 0; @@ -3778,12 +4309,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 55px; position: fixed; } - .app-body:not(.layout-multiple-columns):not(:has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { + + .app-body:not(.layout-multiple-columns, :has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { z-index: 3; } + .app-body:not(.layout-multiple-columns):has(.ui .ui__header__links > .button[href="/auth/sign_in"]) .tabs-bar__wrapper :is(.column-back-button, .column-header > *) { display: none; } + .app-body:not(.layout-multiple-columns) :is( .column-header, @@ -3796,9 +4330,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 0; margin: 0; } + .app-body .column-header__icon { display: none; } + .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); @@ -3830,32 +4366,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } } + .app-body:not(.layout-multiple-columns) .column-header__collapsible { margin-top: 1px; position: absolute; left: -45px; right: -55px; } + .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { border-bottom: 1px solid var(--color-lines); } } -@media screen and (max-width:885px) { +@media screen and (width <=885px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible:is(:not(.collapsed), .animating) { border-left-color: var(--color-content-secondary-bg); border-right-color: var(--color-content-secondary-bg); } } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { border-color: transparent; } + .app-body:not(.layout-multiple-columns) .ui::after { border-bottom: 1px solid var(--color-lines); } } @media (prefers-color-scheme: dark) { - @media screen and (max-width:1174px) { + @media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { border-color: var(--color-lines); } @@ -3871,27 +4410,30 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); } + .app-body .account__header + .account__section-headline { border-left: 0; border-right: 0; } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body:not(.layout-multiple-columns) .explore__search-header + .account__section-headline { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .app-body:not(.layout-multiple-columns) .notification__filter-bar { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 10px; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) :is(.account__section-headline, .notification__filter-bar) { border-left: 0; border-right: 0; } } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button) { @@ -3903,11 +4445,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu max-height: 45px; padding: 14px 10px; } + .app-body :is(.account__section-headline, .notification__filter-bar) .icon { margin-top: -1.5px; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { @@ -3915,6 +4459,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { @@ -3922,16 +4467,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { display: none; } + .app-body :is(.account__section-headline, .notification__filter-bar) button { background-color: transparent; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { @@ -3950,6 +4498,7 @@ button { transform: unset; border: 0; } + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { @@ -3966,35 +4515,44 @@ button { .app-body .notification__filter-bar .icon-reply-all { background-image: var(--icon-reply-accent); } + .app-body .notification__filter-bar .active .icon-reply-all { background-image: var(--icon-reply); } + .app-body .notification__filter-bar .icon-star { background-image: var(--icon-star-accent); } + .app-body .notification__filter-bar .active .icon-star { background-image: var(--icon-star); } + .app-body .notification__filter-bar .icon-retweet { background-image: var(--icon-boost-accent); } + .app-body .notification__filter-bar .active .icon-retweet { background-image: var(--icon-boost); } + .app-body .notification__filter-bar .icon-tasks { background-image: var(--icon-poll-accent); } + .app-body .notification__filter-bar .active .icon-tasks { background-image: var(--icon-poll); } + .app-body .notification__filter-bar .icon-home { background-image: var(--icon-post-notification-accent); } + .app-body .notification__filter-bar .active .icon-home { background-image: var(--icon-post-notification); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .account__header + .account__section-headline { border-radius: 0; } @@ -4007,18 +4565,23 @@ button { display: flex; flex-flow: column; } + .app-body .column-link--transparent { color: var(--color-fg); } + .app-body .ui__header__logo .logo--icon { display: none; } + .app-body .ui__header__links .button.button-secondary { padding: 8px 15px; } + .app-body .ui__header__links .button.button-secondary[href="/search"] { display: none; } + .app-body .ui__header__links .button.button-secondary[href="/publish"] { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -4034,18 +4597,20 @@ button { background-size: 22px; border-radius: 50%; box-shadow: - 0 1px 1px rgba(0, 0, 0, .2), - 0 2px 10px rgba(0, 0, 0, .2); + 0 1px 1px rgba(0, 0, 0, 20%), + 0 2px 10px rgba(0, 0, 0, 20%); } + .app-body .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } + .app-body .ui__header__links .button.button-secondary[href="/publish"] span { color: transparent; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .layout-single-column .ui__header__links { padding-left: 12px; } @@ -4068,6 +4633,7 @@ button { background-position: center; background-size: 32px auto; } + .app-body .column-link.column-link--logo svg, .app-body .ui__header__logo svg { display: none; @@ -4076,6 +4642,7 @@ button { .app-body .navigation-panel__logo { margin-bottom: 5px; } + .app-body .column-link:not(.column-link--logo) { padding: 15px 20px 16px 13px; gap: 7px; @@ -4086,21 +4653,25 @@ button { overflow: visible; transform-origin: 60px center; } + .app-body .column-link--transparent:is(.active, .active:hover) { color: var(--color-content-fg); font-weight: bold; } + .app-body .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } + .app-body .column-link--transparent span { position: relative; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .column-link:not(.column-link--logo) { transition: all .3s; } + .app-body .column-link--transparent span::before { content: " "; left: -52px; @@ -4113,16 +4684,20 @@ button { z-index: -1; bottom: -14px; } + .app-body .column-link--transparent:hover span::before { background-color: color-mix(in srgb, var(--color-accent), transparent 85%); } + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: transparent; } + .app-body .column-link--transparent:active { transform: scale(.95); } } + .app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -4132,12 +4707,13 @@ button { border: 0; z-index: 1; } + .app-body .compose-panel hr, .app-body .navigation-panel .list-panel hr { display: none; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .navigation-panel hr:has(+ .column-link[href="/settings/preferences"]) { margin-right: 25px; margin-left: 10px; @@ -4145,10 +4721,11 @@ button { border-color: var(--color-lines); } } + .app-body .column-link span { vertical-align: middle; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; height: calc(4.2em + var(--safe-area-bottom)); @@ -4156,6 +4733,7 @@ button { left: 0; z-index: 3; } + .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; @@ -4168,11 +4746,13 @@ button { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { flex-flow: row; overflow-x: auto; mask-image: linear-gradient(90deg, black 80%, transparent 96%); } + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), .app-body .navigation-panel .column-link:is(.active, .active:hover, :active), .app-body .navigation-panel .navigation-panel__menu::after { @@ -4189,15 +4769,18 @@ button { transform-origin: center; transition: .3s transform; } + .app-body .navigation-panel .navigation-panel__menu::after { content: " "; } + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { mask-image: none; } + .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3), .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *, .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4), @@ -4208,43 +4791,52 @@ button { .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * { flex: 50vw; } + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::after { display: none; } + .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active { transform: scale(.85); } + .app-body .column-link__icon { margin: 0; transform: scale(1.3); } + .app-body .column-link span { padding-left: .5em; } + .app-body .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; } + .app-body .columns-area__panels { padding-bottom: 4em; } + .app-body .columns-area__panels .navigation-panel__legal { margin: 0; padding: 0; } + .app-body .columns-area__panels .navigation-panel__legal .column-link--transparent { height: calc(100% - 13px); box-sizing: border-box; border: 0; } + .app-body .navigation-panel .flex-spacer { display: none; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .columns-area__panels__main { width: 100%; margin-left: -55px; @@ -4258,30 +4850,36 @@ button { padding-bottom: 5px; background-color: var(--color-content-bg); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .account__header { border-left: 0; border-right: 0; } } + .app-body .account__header__image { height: 200px; background-color: var(--color-content-bg); border-bottom: 0; margin: 0; } + .app-body .account__header__image img { background-color: var(--color-content-secondary-bg); } + .app-body .account__header__bar { border: 0; } + .app-body .account__header__bar .avatar { transition: transform .3s; } + .app-body .account__header__bar .avatar:active { transform: scale(.92); } + .app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; margin: 0; @@ -4291,41 +4889,51 @@ button { height: 100px !important; background-color: var(--color-content-bg); } + .app-body .account__header__tabs__name h1, .app-body .account__header__tabs__name h1 small { color: var(--color-content-fg); } + .app-body .account__header__tabs__name h1 > span { font-size: 18px; } + .app-body .account__header__tabs__name h1 small > span:first-child { opacity: .7; } + .app-body .account__header__tabs__name .icon-lock { height: 20px; width: 16px; top: unset; vertical-align: bottom; } + .app-body .account__header__content a { color: var(--color-accent); text-decoration: none; } + .app-body .account__header__content a:hover { text-decoration: underline; } + .app-body .account__header__extra__links a strong { color: var(--color-content-fg-bold); } + .app-body .account__header__account-note label { margin-bottom: 0; } + .app-body .account__header__account-note label, .app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; font-style: normal; } + .app-body .account__header__account-note textarea { color: var(--color-content-fg); border-radius: 8px; @@ -4336,23 +4944,28 @@ button { outline-offset: -1px; transition: all .2s; } + .app-body .account__header__account-note textarea:placeholder-shown { padding-left: 0; padding-right: 0; } + .app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); padding-left: 10px; padding-right: 10px; } -.app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) { + +.app-body .account__header__account-note textarea:not(:placeholder-shown, :focus) { outline-color: var(--color-lines); box-shadow: 2px 3px var(--color-content-secondary-bg); } + .app-body .account__header__account-note textarea:not(:placeholder-shown):focus { outline-color: var(--color-accent); box-shadow: 2px 3px var(--color-accent-bg); } + .app-body .account__header__badges .account-role { color: var(--color-content-fg); border: 0; @@ -4362,18 +4975,22 @@ button { background-color: var(--color-content-secondary-bg); gap: 5px; } + .app-body .account__header__badges .account-role span:not(.account-role__domain) { font-weight: 500; } + .app-body .account-role svg { opacity: 1; color: var(--color-accent); } + .app-body .account__header__extra__links a, .app-body .account__header__bio .account__header__content, .app-body .account__header__bio .account__header__fields dd { color: var(--color-content-fg); } + .app-body .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; @@ -4384,18 +5001,22 @@ button { background-color: var(--color-secondary-bg); } } + .app-body .account__header__bio .account__header__fields:has(dl:only-child) { display: none; } + .app-body .account__header__bio .account__header__fields dt { font-weight: bold; font-size: 12px; } + .app-body .account__header__bio .account__header__fields :is(dl, .verified) { border-bottom: 0; position: relative; } -.app-body .account__header__bio .account__header__fields dl:not(:last-child):after { + +.app-body .account__header__bio .account__header__fields dl:not(:last-child)::after { display: block; content: " "; height: 1px; @@ -4407,47 +5028,55 @@ button { border-radius: 50px; } @media (prefers-color-scheme: dark) { - .app-body .account__header__bio .account__header__fields dl:not(:last-child):after { + .app-body .account__header__bio .account__header__fields dl:not(:last-child)::after { background-color: var(--color-accent-bg); } } + .app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } + .app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ margin-top: 0; border-top-width: 0; } + .app-body .account__header__bio .account__header__fields .verified :is(a, dd), .app-body .hover-card .account-fields dl.verified dd a { color: var(--color-accent); gap: 5px; } + .app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); } + .app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ border-top: 0; border-right: 0; border-left: 0; background: none; } + .app-body .account__header__extra .account__header__fields .verified dd > span:first-child { vertical-align: bottom; } + .app-body .account__header__extra .account__header__fields .verified__mark { float: left; transform: scale(1.1); } + .app-body .account__header__bio .account__header__fields .verified:last-child { border-bottom: 0; } .app-body .account__header__tabs__buttons .icon-button.copied, .app-body .account__header__tabs__buttons .icon-button.copied:is(:active, :focus, :hover) { - background-color: rgba(121, 189, 154, 0.3); + background-color: rgba(121, 189, 154, 30%); } .app-body .follow-request-banner, @@ -4455,10 +5084,12 @@ button { background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); } + .app-body .follow-request-banner__message, .app-body .moved-account-banner__message { color: var(--color-content-fg); } + .app-body .moved-account-banner__message { font-weight: bold; } @@ -4476,69 +5107,86 @@ button { font-weight: 500; transition: all .2s; } + .app-body .account__domain-pill:hover { background-color: var(--color-accent-bg); } + .app-body .account__domain-pill.active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .dropdown-animation.account__domain-pill__popout { animation: none; } + .app-body .account__domain-pill__popout { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 8px; } + .app-body .account__domain-pill__popout__header__icon { background-color: var(--color-accent); } + .app-body .account__domain-pill__popout__handle { padding: 12px; } + .app-body :where(.account__domain-pill__popout__header, .account__domain-pill__popout__parts) :is(h3, h6) { color: var(--color-content-fg); font-weight: 600; } + .app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon { align-items: start; padding-top: 2px; } + .app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon .icon { width: 28px; height: 28px; } + .app-body .account__domain-pill__popout__parts > div:first-child .account__domain-pill__popout__parts__icon .icon { background-image: var(--icon-direct-messages-accent); } + .app-body .account__domain-pill__popout__parts > div:last-child .account__domain-pill__popout__parts__icon .icon { background-image: var(--icon-globe-accent); } + .app-body .hover-card { background-color: color-mix(in srgb, var(--color-content-bg), transparent 10%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--color-lines); } + .app-body .hover-card__bio, .app-body .hover-card .display-name bdi, .app-body .account-fields, .app-body .hover-card__number { color: var(--color-content-fg); } + .app-body .hover-card .display-name__html { font-weight: 600; } + .app-body .account-fields { font-size: 95%; } + .app-body .hover-card .account-fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; padding: 8px; } + .app-body .hover-card .account-fields dl:not(:first-child:last-child) { gap: 10px; padding-bottom: 6px; @@ -4548,15 +5196,18 @@ button { .app-body .hover-card .account-fields { background-color: var(--color-secondary-bg); } + .app-body .hover-card .account-fields dl { border-color: var(--color-accent-bg); } } + .app-body .hover-card .account-fields dl:last-child:not(:first-child) { padding-top: 6px; padding-bottom: 0; border-bottom: 0; } + .app-body .hover-card .account-fields dl dt { width: 30%; min-width: 30%; @@ -4566,6 +5217,7 @@ button { text-transform: uppercase; font-size: 80%; } + .app-body .hover-card .account-fields dl dd { text-align: left; justify-content: flex-start; @@ -4584,6 +5236,7 @@ button { border-bottom: 1px solid var(--color-lines); background-color: var(--color-content-secondary-bg); } + .app-body .status__wrapper:has(.icon-thumb-tack)::before { position: absolute; left: 0; @@ -4594,16 +5247,20 @@ button { content: ""; background-color: var(--color-content-bg); } + .app-body .status__wrapper:has(.icon-thumb-tack) { padding-bottom: 20px; margin-top: -8px; } + .app-body .status__wrapper:has(.icon-thumb-tack) :is(.status__content__translate-button, .translate-button .link-button) { bottom: 20px; } + .app-body .account-timeline__header + article .status__wrapper:has(.icon-thumb-tack) { margin-top: 0; } + .app-body .account-timeline__header + article .status__wrapper:has(.icon-thumb-tack)::before { display: none; } @@ -4615,34 +5272,42 @@ button { background-color: var(--color-content-bg); overflow: hidden; } + .layout-multiple-columns .explore__links.scrollable { background-color: var(--color-content-bg); overflow-y: auto; } + .app-body .explore__links .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); padding: 15px 18px; } + .app-body .explore__links .trends__item:last-child { border-bottom: 0; } + .app-body .trends__item__name, .app-body .trends__item__current { color: var(--color-fg-muted); } + .app-body .trends__item__name a { color: var(--color-fg); } + .app-body .getting-started__trends { padding: 0; display: flex; flex-flow: column; } + .app-body .getting-started__trends h4 { border-bottom: 0; padding: 0; } + .app-body .getting-started__trends h4 > :is(a, span) { padding: 15px 20px 6px 47px; margin-left: 3px; @@ -4652,18 +5317,22 @@ button { display: block; transition: all .3s; } + .app-body .getting-started__trends h4 a:hover { color: var(--color-accent); } + .app-body .getting-started__trends h4 a:active { transform: scale(.95); } + .app-body .getting-started__trends h4 a::after { content: '\2192'; margin-left: 0; opacity: 0; transition: all .2s; } + .app-body .getting-started__trends:hover h4 a::after { opacity: 1; margin-left: 5px; @@ -4672,7 +5341,7 @@ button { .app-body .getting-started__trends .trends__item { padding-left: 19px; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .getting-started__trends { display: none; } @@ -4690,9 +5359,11 @@ button { content: " "; display: block; } + .app-body .trends__item__name span { white-space: pre-wrap; } + .app-body .trends__item__sparkline { flex: 0 0 auto; position: relative; @@ -4705,6 +5376,7 @@ button { transform: scale(1.25); transition: all .3s; } + .app-body .getting-started__trends .trends__item__sparkline { background-color: var(--color-secondary-bg); } @@ -4713,12 +5385,14 @@ button { background-color: var(--color-content-secondary-bg); } } + .app-body .trends__item__sparkline svg { width: 50px; height: 30px; position: absolute; right: -2px; } + .app-body .trends__item__sparkline::after { position: absolute; display: block; @@ -4734,10 +5408,11 @@ button { .app-body .trends__item__sparkline path:last-child { stroke: var(--color-accent) !important; } + .app-body .trends__item__sparkline path:first-child { fill: var(--color-accent) !important; fill-opacity: .4 !important; - transform: translate(0px, 0.2px); + transform: translate(0, 0.2px); } @@ -4751,12 +5426,15 @@ button { background-color: var(--color-content-secondary-bg); border: 0; } + .app-body .hashtag-header__header { margin-bottom: 0; } + .app-body .hashtag-header__header h1 { color: var(--color-content-fg); } + .app-body .hashtag-header .hashtag-header__header + div { color: var(--color-content-fg); font-size: 85%; @@ -4764,28 +5442,31 @@ button { margin-top: -5px; width: max-content; } -@media screen and (max-width:460px) { +@media screen and (width <=460px) { .app-body .hashtag-header .hashtag-header__header + div { max-width: 55%; line-height: 1.5; margin-top: -2px; } + .app-body .hashtag-header .hashtag-header__header + div > span { display: inline-block; margin-right: 5px; } } + .layout-multiple-columns .hashtag-header .hashtag-header__header + div { max-width: 55%; line-height: 1.5; margin-top: -2px; } + .layout-multiple-columns .hashtag-header .hashtag-header__header + div > span { display: inline-block; margin-right: 5px; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .hashtag-header .hashtag-header__header button { transform: translate(0, 8px); } @@ -4800,46 +5481,57 @@ button { border: 0; border-bottom: 1px solid var(--color-lines); } + .app-body .account-card__header { padding: 0; border-radius: 0; height: 128px; overflow: hidden; } -.app-body .scrollable .account-card__bio:after { + +.app-body .scrollable .account-card__bio::after { background: linear-gradient(270deg, var(--color-content-bg), transparent); } + .app-body .account-card__header img { background-color: var(--color-content-secondary-bg); } + .app-body .account-card__title__avatar .account__avatar { border: 0; border-radius: 50%; overflow: visible; } + .app-body .account-card__title__avatar img { border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-content-bg); } + .app-body .account-card__title .display-name bdi, .app-body .account-card__counters__item, .app-body .account-card__counters__item small { color: var(--color-content-fg); } + .app-body .account-card__counters__item small { opacity: .7; } + .account-card__title .display-name bdi .display-name__html { font-weight: bold; } + .app-body .account-card__bio a { color: var(--color-accent); } + .app-body .filter-form { background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); } + .app-body .filter-form__column { padding: 10px 15px; } @@ -4849,6 +5541,7 @@ button { gap: 2px; padding-bottom: 14px; } + .app-body .explore__suggestions__card__source span { background-color: var(--color-content-secondary-bg); padding: 6px 12px; @@ -4857,25 +5550,29 @@ button { color: var(--color-fg-muted); font-weight: 500; } + .app-body .explore__suggestions__card__body__main__name-button .display-name__account { color: var(--color-content-fg); opacity: .75; } + .app-body .explore__suggestions__card .icon-button { background-color: var(--color-content-secondary-bg); color: var(--color-fg-muted); padding: 6px; border: 0; } + .app-body .explore__suggestions__card .icon-button:is(:active, :hover) { background-color: var(--color-accent-bg); } -@media screen and (min-width:1173px) { +@media screen and (width >=1173px) { .app-body .explore__suggestions__card .icon-button { opacity: 0; transform: translateX(50%); transition: all .3s; } + .app-body .explore__suggestions__card:hover .icon-button { opacity: 1; transform: translateX(0); @@ -4888,34 +5585,43 @@ button { background-color: var(--color-content-bg); transition: all .3s; } + .app-body .story:not(:last-child) { border-bottom: 2px solid var(--color-content-secondary-separator); } + .app-body .story, .app-body .story__details__title { color: var(--color-content-fg); } + .app-body .story__details__title { font-weight: bold; transition: all .3s; } + .app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) { background-color: var(--color-content-bg-focus); } + .app-body .story__details__publisher { color: var(--color-fg); } + .app-body .story .story__details__publisher { opacity: .7; transition: all .3s; } + .app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) :is(.story__details__publisher, .story__details__title) { color: var(--color-accent); opacity: 1; } + .app-body .story__details__shared { color: var(--color-fg-muted); } + .app-body .story__details__shared__pill { background-color: color-mix( @@ -4927,26 +5633,33 @@ button { border-radius: 8px; transition: all .3s; } + .app-body .story__details__shared__pill:hover { background-color: var(--color-accent-bg); } + .app-body .story__details__shared__pill:active { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .story.expanded { gap: 20px; padding-bottom: 20px; } + .app-body .story.expanded .story__thumbnail { margin: 0; } + .app-body .story.expanded .story__thumbnail img { border-radius: 8px; } + .app-body .story__details__shared__author-link { color: var(--color-content-fg); } + .app-body .story__details__shared__author-link:hover { color: var(--color-accent); } @@ -4957,15 +5670,18 @@ button { margin-bottom: 10px; transition: transform .3s; } + .app-body .search:has(.search__icon:active) { transform: scale(.95); } + .app-body .search__input { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); - font-weight: 500; + font-weight: 400; + text-indent: 22px; padding-inline-end: 45px; padding-inline-start: 16px; outline-offset: 0; @@ -4975,95 +5691,118 @@ button { background-color .2s, outline .2s; } + .app-body .search__input::placeholder, .app-body .compose-form .spoiler-input__input::placeholder { font-weight: 500; color: var(--color-accent); } + .app-body .search__input:focus { border-color: var(--color-accent); background-color: var(--color-content-bg); outline: 3px solid var(--color-accent-bg); border-radius: 8px; } + .app-body .search__input:focus::placeholder, .app-body .compose-form .spoiler-input__input:focus::placeholder { color: var(--color-content-fg); opacity: .4; } + .app-body .search__icon .icon { padding: 5px; transform: scale(1) translateY(-50%); background-size: 24px !important; - top: 50%; + top: 12px; inset-inline-start: unset; inset-inline-end: 12px; + margin-left: 30px; } + .app-body .search__input:not(:placeholder-shown) + .search__icon:hover .icon { background-image: var(--icon-erase-active); } + .app-body .compose-panel .icon-search, .app-body .compose-panel .icon-search.active, .app-body .explore__search-header .icon-search { background-image: var(--icon-search-active); } + .app-body .compose-panel .icon-search.active, .app-body .search__icon .icon-search.active { opacity: 1; z-index: 1; } + .app-body .explore__search-results { border-radius: 0; border: 0; background-color: transparent; overflow: hidden; } + .app-body .explore__search-header { background-color: transparent; } + .app-body .explore__search-results .account { padding-top: 16px; } + .app-body .explore__search-results article:last-child > .account { border-bottom: 1px solid var(--color-lines); } + .app-body :is(.explore__search-results, .search-results__section) .trends__item { border-bottom: 2px solid var(--color-content-secondary-bg); } + .app-body :is(.explore__search-results, .search-results__section) article:first-child > .trends__item, .app-body :is(.explore__search-results, .search-results__section) > .trends__item:first-child, .app-body :is(.explore__search-results, .search-results__section) > .account:first-child { border-top: 1px solid var(--color-lines); } + .app-body :is(.explore__search-results, .search-results__section) article:last-child > .trends__item, .app-body :is(.explore__search-results, .search-results__section) > .trends__item:last-child, .app-body :is(.explore__search-results, .search-results__section) > .account:last-child { border-bottom: 1px solid var(--color-lines); } + .app-body .search-results__section { background-color: var(--color-content-bg); border-bottom: 0; } + .app-body .search-results__section__header { background-color: var(--color-content-secondary-bg); border-bottom: 0; color: var(--color-content-fg); } + .app-body .search-results__section__header button { color: var(--color-accent); } + .app-body .account .account__details > span { color: var(--color-content-fg); } + .app-body .account .account__details .verified-badge { color: var(--color-accent); } + .app-body .account .account__details .verified-badge span { font-weight: 500; } + .app-body .compose-panel:has(> .search.active) { overflow: visible; } + .app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; @@ -5071,33 +5810,41 @@ button { border: 1px solid var(--color-lines); animation: fadein-short .2s 1; } + .app-body .search__popout h4 { font-weight: bold; } + .app-body .search__popout h4, .app-body .search__popout__menu__message, .app-body .search__popout__menu__item { color: var(--color-content-fg); } + .app-body .search__popout__menu__item { align-items: center; border-radius: 6px; } + .app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } + .app-body .search__popout__menu__item :is(.icon-button, .icon-button .icon) { border-radius: 6px; transition: none; } + .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) :is(.icon-button, .icon-button .icon) { color: var(--color-accent-fg); } + .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover), .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) .icon { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } + .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover), .app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { background-color: var(--color-accent); @@ -5107,6 +5854,7 @@ button { .app-body .search__popout__menu:nth-child(2):not(:has(.search__popout__menu__message)) { margin-bottom: 10px; } + .app-body .search__popout h4:has(+ .search__popout__menu:last-child, + .search__popout__menu__message) { background-color: var(--color-content-secondary-bg); padding-top: 15px; @@ -5116,6 +5864,7 @@ button { border-radius: 6px 6px 0 0; color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child, .app-body .search__popout > .search__popout__menu__message:last-child { margin: 0 0 -10px; @@ -5123,32 +5872,38 @@ button { border-radius: 0 0 6px 6px; padding: 5px; } + .app-body .search__popout > .search__popout__menu__message:last-child { padding: 5px 15px 15px; color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) { color: var(--color-fg-muted); } + .app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) mark { color: var(--color-content-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body:not(.layout-multiple-columns) .search { margin-bottom: 0; } + .app-body:not(.layout-multiple-columns) .explore__search-header { padding-top: 2px; } + .app-body:not(.layout-multiple-columns) .search__input { padding: 13px; } + .app-body:not(.layout-multiple-columns) .explore__search-header { padding: 10px 0; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body:not(.layout-multiple-columns) .explore__search-header { padding: 10px; } @@ -5158,10 +5913,12 @@ button { 0% { transform: scale(120%) translate(0, 0) rotate(0deg); } + 100% { transform: scale(200%) translate(100vw, 100vh) rotate(600deg); } } + .app-body:has(.search__input[value="Tangerine UI"])::after, .app-body:has(.search__input[value="tangerine ui"])::after { content: "\1F34A"; @@ -5187,21 +5944,26 @@ button { border: 0; margin: 10px 10px 5px; } + .app-body .dismissable-banner__message h1 { color: var(--color-content-fg); margin-bottom: 8px; } + .app-body .dismissable-banner__message, .app-body .dismissable-banner .dismissable-banner__action .icon-button { color: var(--color-accent-fg); font-weight: normal; } + .app-body .dismissable-banner .dismissable-banner__action .icon-button:hover { color: var(--color-accent); } + .app-body .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: var(--color-content-bg); margin: 0; @@ -5213,20 +5975,25 @@ button { border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__action .icon-button { color: var(--color-accent); } + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__message { color: var(--color-content-fg); } + .app-body .dismissable-banner__background-image { display: none; } + .app-body .dismissable-banner__message__actions .button, .app-body .dismissable-banner__message__actions .button.button-tertiary { line-height: 1.75; padding: 6px 17px; } + .app-body .dismissable-banner__message__actions { gap: 5px; } @@ -5245,10 +6012,11 @@ button { .app-body .attachment-list__list a { color: var(--color-content-fg-muted); } + .app-body .notification.unread::before, .app-body .status__wrapper.unread::before, -.app-body .notification-group--unread:before, -.app-body .notification-ungrouped--unread:before { +.app-body .notification-group--unread::before, +.app-body .notification-ungrouped--unread::before { background-color: var(--color-accent); width: 8px; border: 0; @@ -5259,25 +6027,30 @@ button { left: 5px; z-index: 2; } + .app-body .notification__message { padding: 12px 12px 5px; background-color: var(--color-post-bg); color: var(--color-content-fg-bold); transition: all .3s; } + .app-body .notification__display-name { font-weight: bold; color: var(--color-content-fg); } + .app-body .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } + .app-body .notification__report__details { color: var(--color-content-fg); } + .app-body .notification__message .icon { color: var(--color-accent); width: 18px; @@ -5285,14 +6058,16 @@ button { text-align: right; background-position: center right; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .notification__message .icon { margin-left: 34px; } } + .app-body .notification .status__wrapper { padding-top: 0; } + .app-body :is( .notification-favourite, @@ -5303,6 +6078,7 @@ button { .status__action-bar { display: none; } + .app-body .account, .app-body .notification-request { background-color: var(--color-content-bg); @@ -5310,18 +6086,22 @@ button { padding-left: 22px; padding-top: 12px; } + .app-body .notification .account { border-bottom: 0; } + .app-body .explore__search-results .account { padding-top: 16px; } + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name__account { display: block; } + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) @@ -5329,51 +6109,59 @@ button { margin-bottom: 0; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 32px; padding-right: 22px; } } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 27px; } } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .account { padding-left: 18px; } } + .app-body .notification .account__relationship .icon-button { padding: 5px; border-radius: 8px; transition: background-color .2s; } + .app-body .notification .account__relationship .icon-button:first-child { background-color: var(--color-confirm-bg); } + .app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { background-color: var(--color-confirm); } + .app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .notification .account__relationship .icon-button:last-child { background-color: var(--color-reject-bg); } + .app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { background-color: var(--color-reject); } + .app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .notification-list { bottom: calc(5rem + var(--safe-area-bottom)); } } + .app-body .notification-bar { background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%); color: var(--color-content-fg); @@ -5382,9 +6170,11 @@ button { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } + .app-body .notification-bar-action { transition: all .2s; } + .app-body .notification-bar-action:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); @@ -5395,19 +6185,24 @@ button { .app-body .app-form__toggle__label .hint { color: var(--color-content-fg-bold); } + .app-body .column-header__setting-btn { font-weight: 600; } + .app-body .column-settings h3 { margin-bottom: 12px; font-weight: 500; } + .app-body .column-settings section { border-color: var(--color-lines); } + .app-body .column-settings section:not(:first-child) { padding-bottom: 25px; } + .app-body .app-form__toggle__label .hint { opacity: .5; } @@ -5419,6 +6214,7 @@ button { position: relative; padding: 25px; } + .app-body .filtered-notifications-banner::before { position: absolute; display: block; @@ -5431,21 +6227,26 @@ button { border-radius: 8px; transition: all .2s; } + .app-body .filtered-notifications-banner:is(:active, :hover, :focus)::before { background-color: color-mix(in srgb, var(--color-accent), transparent 88%); } + .app-body .filtered-notifications-banner:hover::before { left: 6px; right: 6px; top: 8px; bottom: 8px; } + .app-body .filtered-notifications-banner:active::before { transform: scale(.98); } + .app-body .filtered-notifications-banner > * { z-index: 1; } + .app-body .filtered-notifications-banner .filtered-notifications-banner__badge, .app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge, .app-body .notification-request__name .filtered-notifications-banner__badge, @@ -5454,41 +6255,50 @@ button { color: var(--color-accent-fg); border-radius: 50px; } + .app-body .notification-request .account__avatar__counter { width: 19px; height: 19px; box-sizing: border-box; } + .app-body .filtered-notifications-banner__badge__badge { background-color: var(--color-content-bg); color: var(--color-content-fg); font-weight: 600; } + .app-body .filtered-notifications-banner__text { color: var(--color-content-fg); } + .app-body .filtered-notifications-banner__text strong { font-weight: 600; } + .app-body .filtered-notifications-banner .notification-group__icon { justify-content: center; } + .app-body .notification-request__name__display-name, .app-body .notification-request__name { color: var(--color-content-fg); letter-spacing: unset; } + .app-body .notification-request { padding-top: 15px; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .notification-request { margin-top: 60px; } } + .app-body .notification-group { padding: 16px 23px; } + .app-body .notification-group, .app-body .notification-ungrouped { border: none; @@ -5507,13 +6317,16 @@ button { content: " "; opacity: .7; } + .app-body .notification-ungrouped { padding: 0; } + .app-body .notification-ungrouped :is(.status__avatar, .account__avatar) { height: 46px !important; width: 46px !important; } + .app-body .notification-ungrouped :is( .attachment-list, @@ -5530,6 +6343,7 @@ button { margin-left: 0; width: 100%; } + .app-body .notification-ungrouped__header { margin-bottom: -6px; padding-top: 16px; @@ -5540,25 +6354,31 @@ button { background-color: var(--color-post-bg); transition: background .3s; } + .app-body .notification-ungrouped--direct .notification-ungrouped__header { background-color: var(--color-post-bg); transition: background .3s; } + .app-body .notification-ungrouped--mention:not(.notification-ungrouped--direct) .notification-ungrouped__header { display: none; } + .app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) { width: 46px; height: 28px; justify-content: end; } + .app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) svg { width: 22px; height: 22px; } + .app-body .notification-ungrouped .status::before { display: none; } + .app-body .notification-group__main__status { border: 0; background-color: var(--color-content-secondary-bg); @@ -5567,12 +6387,15 @@ button { background .3s, transform .3s; } + .app-body .notification-group__main__status:hover { background-color: color-mix(in srgb, var(--color-accent), transparent 88%); } + .app-body .notification-group__main__status:active { transform: scale(.98); } + .app-body :is( .notification-group__main__header__label, @@ -5586,19 +6409,24 @@ button { color: var(--color-content-fg); font-weight: 700; } + .app-body .notification-group__main__header__label { color: var(--color-content-fg); justify-content: space-between; } + .app-body .notification-group__main__header__label time { color: var(--color-content-fg-muted); } + .app-body .notification-group__embedded-status__account { color: var(--color-content-fg); } + .app-body .notification-group__main__additional-content { color: var(--color-fg-muted); } + .app-body .notification-group__embedded-status .account__avatar { opacity: 1; } @@ -5610,51 +6438,60 @@ button { border: 1px solid var(--color-lines); border-bottom: 0; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .column-inline-form { border-left: 0; border-right: 0; } } + .app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; border: 1px solid var(--color-lines); } + .app-body .column-inline-form label input:focus { border-color: var(--color-accent); } + .app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); color: var(--color-fg); } + .app-body .item-list .column-subheading { color: var(--color-fg-muted); border-top: 0; border-bottom: 0; } + .app-body .getting-started .column-subheading { color: var(--color-fg-muted); } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .item-list .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } + .app-body .list-editor { background-color: var(--color-content-bg); } + .app-body .list-editor .drawer__inner { background-color: var(--color-content-bg); border-radius: 0; } + .app-body .list-editor__search { margin: 10px; background-color: var(--color-content-bg); } + .app-body .list-editor .column-inline-form { background-color: var(--color-content-secondary-bg); border-top: 0; @@ -5662,17 +6499,21 @@ button { border-left: 0; border-color: var(--color-lines); } + .app-body .list-editor .column-inline-form .icon-button { color: var(--color-accent); } + .app-body .list-editor .column-inline-form .icon-button.disabled { opacity: .5; pointer-events: none; } + .app-body .list-editor .account { border-right: 0 !important; border-left: 0 !important; } + .app-body .list-editor .setting-text { width: 100%; background-color: var(--color-accent-bg); @@ -5680,6 +6521,7 @@ button { border-radius: 8px; color: var(--color-content-fg); } + .app-body .list-editor .setting-text:is(:active, :focus) { border-color: var(--color-accent); background-color: var(--color-content-bg); @@ -5693,18 +6535,21 @@ button { color: var(--color-content-fg); box-sizing: border-box; } + .app-body .item-list .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } + .app-body .item-list article:last-child .column-link { border-bottom: 0; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .item-list .column-link { border-left: 0; border-right: 0; } + .app-body .item-list article:last-child .column-link { border-radius: 0; } @@ -5715,28 +6560,35 @@ button { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .list-adder__account { margin-top: 12px; } + .app-body .list-adder .column-inline-form { border-radius: 0; } + .app-body .list-adder .list { border-bottom: 2px solid var(--color-content-secondary-separator); } + .app-body .list-editor .drawer__pager { border: none; border-radius: 0; } + .app-body .list-editor .account__relationship .icon-button { border-color: var(--color-accent); color: var(--color-accent); } + .app-body .list-editor .search .search__input { border-top: 1px solid; border-bottom: 1px solid; border-color: var(--color-accent-lines); } + .app-body .list-editor .search .search__input:focus { border-color: var(--color-accent); } @@ -5746,28 +6598,35 @@ button { margin-bottom: 0; z-index: 0; } + .app-body .account-authorize__wrapper { margin: 0; border-bottom: 1px solid var(--color-lines); } + .app-body .account-authorize { background-color: var(--color-content-bg); padding: 20px } + .app-body .account--panel { background-color: var(--color-content-bg); border: 0; padding: 0 5px; } + .app-body .account__header__content { color: var(--color-content-fg); } + .app-body .account--panel__button { - padding: 0 5px 12px 5px; + padding: 0 5px 12px; } + .app-body .account--panel__button .icon-button { width: 100%; } + .app-body .account--panel__button .icon-button, .app-body .notification-request__actions .icon-button { padding: 10px; @@ -5776,39 +6635,47 @@ button { transition: all .3s; border: 0; } + .app-body .account--panel button .icon-check { background-image: var(--icon-check); } + .app-body .account--panel button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } + .app-body .account--panel__button:first-child .icon-button, .app-body .notification-request__actions .icon-button:last-child { background-color: var(--color-confirm-bg); color: var(--color-confirm-fg); } + .app-body .account--panel__button:first-child .icon-button:is(:hover, :active), .app-body .notification-request__actions .icon-button:last-child:is(:hover, :active) { background-color: var(--color-confirm); color: var(--color-accent-fg); } + .app-body .account--panel button .icon-times { background-image: var(--icon-reject); } + .app-body .account--panel button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } + .app-body .account--panel__button:nth-child(2) .icon-button, .app-body .notification-request__actions .icon-button:first-child { background-color: var(--color-reject-bg); color: var(--color-reject); } + .app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active), .app-body .notification-request__actions .icon-button:first-child:is(:hover, :active) { background-color: var(--color-reject); color: var(--color-accent-fg); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; @@ -5825,58 +6692,73 @@ button { border-bottom: 1px solid var(--color-lines); position: relative; } + .app-body .inline-follow-suggestions__header h3 { font-weight: bold; color: var(--color-content-fg); } + .app-body .inline-follow-suggestions__body__scrollable { scroll-padding: 60px; } + .app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar { height: 5px; } + .app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar-thumb { opacity: 1; border-radius: 0; } + .app-body .inline-follow-suggestions__body__scrollable__card { border-radius: 8px; background-color: var(--color-content-secondary-bg); border: 0; } + .app-body .inline-follow-suggestions__body__scrollable__card :is(.display-name__html, .display-name__account), .app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source { color: var(--color-content-fg); } + .app-body .inline-follow-suggestions__body__scrollable__card .display-name__account { opacity: .6; } + .app-body .inline-follow-suggestions__body__scrollable__card .verified-badge { color: var(--color-accent); } + .app-body .inline-follow-suggestions__body__scrollable__card button:active { transform: scale(.95); } + .app-body .inline-follow-suggestions__body__scroll-button__icon { background-color: var(--color-accent); border-radius: 8px; padding: 6px; transition: all .3s; } + .app-body .inline-follow-suggestions__body__scroll-button { opacity: 1; } + .app-body .inline-follow-suggestions__body__scroll-button:is(:active) .inline-follow-suggestions__body__scroll-button__icon { transform: scale(.9); } + .app-body .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) .inline-follow-suggestions__body__scroll-button__icon { background-color: var(--color-accent-focus); } + .app-body .inline-follow-suggestions__body__scroll-button.left { background: linear-gradient(to right, var(--color-content-bg), transparent); margin-left: -15px; padding-left: 21px; } + .app-body .inline-follow-suggestions__body__scroll-button.right { background: linear-gradient(to left, var(--color-content-bg), transparent); margin-right: -15px; @@ -5887,13 +6769,14 @@ button { border-radius: 50px; background-color: var(--color-content-bg); border: 3px solid var(--color-content-bg); - box-shadow: 0 2px 5px rgba(0, 0, 0, .1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 10%); transform: translateY(3px); } .app-body .inline-follow-suggestions .button:is(.button-secondary, .button-tertiary) { padding: 7px 18px; } + .app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source .icon { width: 17px; height: 17px; @@ -5904,18 +6787,21 @@ button { .app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; } + .app-body .button, .app-body .button.logo-button, -.app-body .rules-list li:before, +.app-body .rules-list li::before, .app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); transition: all .2s; } + .app-body .button:disabled, .app-body .button.disabled { opacity: .7; } + .app-body .text-icon-button.active, .app-body .button.button-tertiary, .app-body .account__header__fields a, @@ -5944,38 +6830,47 @@ button { .app-body .notification-bar-action { color: var(--color-accent); } + .app-body .icon-button, .app-body .icon-button.inverted { color: var(--color-content-fg); } + .app-body .account__header__tabs__buttons .icon-button { padding: 6px; border: 0; color: var(--color-content-fg); background-color: var(--color-content-secondary-bg); } + .app-body .account__header__tabs__buttons .icon-button:hover { background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .account__header__tabs__buttons .icon-button:has(.icon-ellipsis-v, .icon-close).active { background-color: var(--color-accent); } + .app-body .icon-button { border-radius: 8px; transition: all .2s; } + .app-body .icon-button:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); } + .app-body .account__header__tabs__buttons .icon-button.active .icon-bell { animation: bell-ring .4s ease-in 1; transform-origin: top center; } + .app-body .account__header__tabs__buttons .icon-button.active:has(.icon-bell):is(:active, :focus) { background-color: var(--color-content-secondary-bg); } + .app-body .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; @@ -5983,40 +6878,49 @@ button { box-shadow: var(--dropdown-shadow); padding: 0; } + .app-body .language-dropdown__dropdown__results__item { border-radius: 8px; } + .app-body .language-dropdown__dropdown__results__item.active, .app-body .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .app-body .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } + .app-body .language-dropdown__dropdown__results__item__common-name { opacity: .7; } + .app-body :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-content-fg); } + .app-body .language-dropdown__dropdown__results__item:is(.active, .active:hover) :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-accent-fg); } + .app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) :is(.language-dropdown__dropdown__results__item__native-name, .language-dropdown__dropdown__results__item__common-name) { color: var(--color-accent); } + .app-body .button:not(.button-secondary):is(:active, :hover), .app-body .button.button-tertiary:is(:active, :hover), .app-body .button.logo-button:is(:active, :hover) { @@ -6026,26 +6930,32 @@ button { .app-body .react-toggle { transition: transform .3s; } + .app-body .react-toggle:active { transform: scale(.9); } + .app-body .react-toggle-track, .app-body .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-fg-muted); transition: all .2s; } + .app-body .react-toggle-thumb { border: 0; background-color: #ffffff; } + .app-body .react-toggle.react-toggle--checked .react-toggle-track, .app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, .app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent); } + .app-body .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } + .app-body .react-toggle--focus { outline: 0; } @@ -6053,6 +6963,7 @@ button { .app-body .radio-button { color: var(--color-content-fg); } + .app-body .radio-button__input, .app-body .poll__input, .app-body .check-box__input { @@ -6065,23 +6976,28 @@ button { width: 20px; height: 20px; } + .app-body .radio-button:active .radio-button__input, .app-body .poll__option:active .poll__input, .app-body .check-box:active .check-box__input { transform: scale(.9); } + .app-body .radio-button__input.checked, .app-body .poll__input.active { background-color: var(--color-accent); } -.app-body .check-box__input.checked:before, -.app-body .radio-button__input.checked:before { + +.app-body .check-box__input.checked::before, +.app-body .radio-button__input.checked::before { display: none; } + .app-body .check-box__input.checked, .app-body .radio-button__input.checked { background-color: var(--color-accent); } + .app-body .check-box__input.checked .icon-check { transform: scale(.5); } @@ -6090,6 +7006,7 @@ button { border: 1px solid var(--color-lines); border-radius: 8px; } + .app-body .dropdown-menu, .app-body .dropdown-menu__container__header, .app-body .dropdown-menu__item.edited-timestamp__history__item, @@ -6100,16 +7017,18 @@ button { } .app-body .dropdown-menu__item a, -.app-body .dropdown-menu__arrow:before { +.app-body .dropdown-menu__arrow::before { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; } + .app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { background: var(--color-accent); color: var(--color-accent-fg); outline: 0; } + .app-body .dropdown-menu__separator { border-color: var(--color-content-secondary-separator); } @@ -6125,6 +7044,7 @@ button { box-shadow: var(--dropdown-shadow); padding: 8px; } + .app-body .privacy-dropdown :is(.privacy-dropdown__value, .privacy-dropdown__value), .app-body .privacy-dropdown__option { background-color: var(--color-content-bg); @@ -6132,19 +7052,23 @@ button { border-radius: 6px; margin-bottom: 2px; } + .app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), .app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .privacy-dropdown.active .privacy-dropdown__value:has(.text-icon-button.active) { border-radius: 6px 6px 0 0; } + .app-body .privacy-dropdown__option .privacy-dropdown__option__content, .app-body .privacy-dropdown__option .privacy-dropdown__option__content strong { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .privacy-dropdown__option.active .privacy-dropdown__option__content, .app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content, @@ -6154,21 +7078,27 @@ button { background-color: var(--color-accent); color: var(--color-accent-fg); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { background-image: var(--icon-globe-visibility-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { background-image: var(--icon-unlock-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { background-image: var(--icon-lock-inv); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } + .app-body .privacy-dropdown__option .icon-info-circle path { fill: var(--color-content-fg); } + .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-info-circle path { fill: var(--color-accent-fg); } @@ -6180,18 +7110,22 @@ button { .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } + .app-body .button.button-tertiary.button--confirmation { color: #4e8a6b; - background-color: rgba(121, 189, 154, 0.3); + background-color: rgba(121, 189, 154, 30%); } + .app-body .button.button-tertiary.button--destructive { color: #df405a; - background-color: rgba(223, 64, 90, 0.3); + background-color: rgba(223, 64, 90, 30%); } + .app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { background-color: #79bd9a; color: #ffffff; } + .app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { background-color: #df405a; color: #ffffff; @@ -6200,10 +7134,12 @@ button { .app-body .button.button-tertiary.button--confirmation { color: #72cb9d; } + .app-body .button.button-tertiary.button--destructive { color: #f3637b; } } + .app-body :is( .block-modal__cancel-button, @@ -6214,6 +7150,7 @@ button { background-color: color-mix(in srgb, var(--color-accent), transparent 90%); color: var(--color-accent); } + .app-body :is( .block-modal__cancel-button, @@ -6224,6 +7161,7 @@ button { background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important; color: var(--color-accent); } + .app-body :is( .block-modal__cancel-button, @@ -6240,6 +7178,7 @@ button { + button:active { transform: scale(.95); } + .app-body .status__content a.hashtag { color: var(--color-accent); } @@ -6252,110 +7191,138 @@ button { border: 0; outline: 1px solid var(--color-lines-translucent); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .modal-root__modal:not(.media-modal) { margin-top: unset; } } + .app-body .compare-history-modal { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .compare-history-modal .report-modal__target { border-color: var(--color-lines); } + .app-body .safety-action-modal { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); border-radius: 8px; } + .app-body .safety-action-modal__confirmation, .app-body .safety-action-modal__confirmation strong, .app-body .safety-action-modal__confirmation h1 { color: var(--color-content-fg); } + .app-body .safety-action-modal__header__icon { background-color: var(--color-accent); } + .app-body .safety-action-modal__header, .app-body .safety-action-modal__header h1, .app-body .safety-action-modal__caveats, .app-body .safety-action-modal__bullet-points { color: var(--color-content-fg); } + .app-body :is(.safety-action-modal__header, .safety-action-modal__confirmation) h1 { font-weight: 600; } + .app-body .safety-action-modal__confirmation h1 { font-size: 150%; padding-top: 20px; } + .app-body .safety-action-modal__header h1 + div { opacity: .6; } + .app-body .safety-action-modal__top { background-color: transparent; border: 0; } + .app-body .safety-action-modal__bottom { background-color: var(--color-content-secondary-bg); padding-top: 24px; border: 0; border-radius: 0 0 8px 8px; } + .app-body .safety-action-modal__bullet-points__icon .icon { transform: scale(1.3); } + .app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-megaphone); } + .app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-eye-shut); } + .app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-direct-messages); } + .app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon { background-image: var(--icon-reply); transform: scale(1); } + .app-body .safety-action-modal__field-group label { color: var(--color-content-fg); } + .app-body .report-modal { background-color: var(--color-content-bg); } + .app-body .actions-modal { background-color: var(--color-content-bg); } + .app-body .interaction-modal { background-color: var(--color-content-bg); border-radius: 10px; box-shadow: var(--dropdown-shadow); } + .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { color: var(--color-content-fg); } + .app-body .interaction-modal__lead p, .app-body .interaction-modal__choices__choice p { color: var(--color-fg); } + .app-body .interaction-modal__icon { transform: scale(1.4) translateX(-2px); } + .app-body .interaction-modal :is(p, strong) { color: var(--color-content-fg); } + .app-body .interaction-modal p.hint { color: var(--color-content-fg-muted); } + .app-body .interaction-modal :is(.button, .button.button-tertiary) { padding: 10px 18px; } + .app-body .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } + .app-body .copypaste input, .app-body .interaction-modal__login__input { border-color: var(--color-lines); @@ -6365,26 +7332,32 @@ button { outline: 0 solid var(--color-accent-bg); transition: all .2s; } + .app-body .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .interaction-modal__login__input input::placeholder { color: var(--color-content-fg-muted); } + .app-body .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); outline: 3px solid var(--color-accent-bg); } + .app-body .interaction-modal__login .search__popout { border-color: var(--color-lines); } + .app-body .interaction-modal .copypaste button { padding: 8px 18px; } + .app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, @@ -6392,21 +7365,25 @@ button { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .boost-modal__container { margin-bottom: -11px; } + .app-body .confirmation-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .block-modal__action-bar, .app-body .boost-modal__action-bar, .app-body .confirmation-modal__action-bar, .app-body .mute-modal__action-bar { background-color: var(--color-accent-bg); } + .app-body .block-modal__action-bar > div, .app-body .boost-modal__action-bar > div, .app-body .confirmation-modal__action-bar > div, @@ -6418,9 +7395,11 @@ button { .app-body .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } + .app-body .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } + .app-body .actions-modal ul li:not(:empty) a:is(.active, .active button, @@ -6439,14 +7418,16 @@ a:is(.active, .app-body .modal-root__overlay:has(+ div > .media-modal) { background-color: #030303 !important; } + .app-body .modal-root__overlay { - background-color: rgb(0, 0, 0, .4); + background-color: rgb(0, 0, 0, 40%); } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: rgb(0, 0, 0, .9); + background-color: rgb(0, 0, 0, 90%); } } + .app-body .media-modal__buttons .icon-button, .app-body .media-modal__nav { background-color: #1e1e1e; @@ -6460,26 +7441,31 @@ a:is(.active, transition: .2s all; } + .app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover), .app-body .media-modal__nav:is(:active, :focus, :hover) { background-color: #343434; color: #ffffff; } + .app-body .media-modal__close { top: 24px; left: 24px; } + .app-body .media-modal__zoom-button { top: 24px; right: 24px; } + .app-body .media-modal__nav--left { left: 24px; } + .app-body .media-modal__nav--right { right: 24px; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .media-modal__nav { display: none; } @@ -6488,19 +7474,24 @@ a:is(.active, .app-body .media-modal__overlay .picture-in-picture__footer { display: none; } + .app-body .media-modal__overlay .picture-in-picture__footer .icon-button > svg { width: 25px; height: 25px; } + .app-body .media-modal__overlay .picture-in-picture__footer .icon-button:is(:active, :hover, :focus) { background-color: transparent !important; } + .app-body .picture-in-picture__footer .animated-number { color: var(--color-accent); } + .app-body .media-modal__page-dot { background-color: #858585; } + .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -6515,9 +7506,11 @@ a:is(.active, .app-body .report-dialog-modal__lead { color: var(--color-content-fg-muted); } + .app-body .report-dialog-modal { background-color: var(--color-content-bg); } + .app-body .report-dialog-modal .dialog-option, .app-body .report-dialog-modal .poll__option.dialog-option:last-child { border-top: 1px solid var(--color-lines); @@ -6529,6 +7522,7 @@ a:is(.active, border-radius: 8px; transition: all .2s; } + .app-body .report-dialog-modal .dialog-option:hover, .app-body .report-dialog-modal .poll__option.dialog-option:hover, .app-body .report-dialog-modal .dialog-option:has(.poll__input.active) { @@ -6542,12 +7536,15 @@ a:is(.active, .app-body .report-dialog-modal__textarea:focus { border-color: var(--color-accent); } + .app-body .report-dialog-modal .dialog-option .poll__input.active { background-color: var(--color-accent); } + .app-body .report-dialog-modal .dialog-option .poll__input svg { display: none; } + .app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text, .app-body .report-dialog-modal .dialog-option time, .app-body .report-dialog-modal .status__content > p:first-child:has(.status__content__spoiler-link) > span, @@ -6559,36 +7556,44 @@ a:is(.active, .app-body .report-modal__target { color: var(--color-content-fg); } + .app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { color: var(--color-content-fg-bold) } + .app-body .report-modal__comment, .app-body .report-modal__container, .app-body .report-dialog-modal__container { border-color: var(--color-lines); } + .app-body .report-modal__comment { color: var(--color-content-fg-muted); } + .app-body #upload-modal__description { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } + .app-body #upload-modal__description:focus { border-color: var(--color-accent); } + .app-body .setting-text__wrapper { background-color: var(--color-content-bg); border: 0; } + .app-body .report-dialog-modal__textarea { background-color: var(--color-secondary-bg); border: 1px solid var(--color-lines); border-radius: 8px; color: var(--color-content-fg); } + .app-body .report-dialog-modal__textarea::placeholder { color: var(--color-content-fg); opacity: .5; @@ -6599,25 +7604,30 @@ a:is(.active, /* 🖼️ Picture in Picture */ .app-body .picture-in-picture { z-index: 3; - box-shadow: 0 0 5px rgba(0, 0, 0, .2); + box-shadow: 0 0 5px rgba(0, 0, 0, 20%); border-radius: 8px; border: 1px solid var(--color-lines); } + .app-body .picture-in-picture__header { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .app-body .picture-in-picture__footer { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } + .app-body .picture-in-picture .video-player { border: 0; } + .app-body .picture-in-picture__footer, .app-body .picture-in-picture__header { background-color: var(--color-content-bg); } + .app-body .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } @@ -6647,10 +7657,12 @@ a:is(.active, flex-flow: column; padding: 20px 0 0; } + .app-body .link-footer p, .app-body .link-footer a { color: var(--color-fg-muted); } + .app-body .link-footer::after { content: var(--meta); color: var(--color-fg-muted); @@ -6661,9 +7673,11 @@ a:is(.active, .app-body .server-banner__introduction { display: none; } + .app-body .server-banner { padding: 0 0 20px; } + .app-body .server-banner__hero { border-radius: 8px 8px 0 0; margin-bottom: 0; @@ -6672,14 +7686,16 @@ a:is(.active, background-color: var(--color-content-bg); box-sizing: border-box; } + .app-body .server-banner__description { - padding: 20px 15px 20px; + padding: 20px 15px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); color: var(--color-content-fg); } + .app-body .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); @@ -6691,17 +7707,21 @@ a:is(.active, border-radius: 0 0 8px 8px; align-items: end; } + .app-body .server-banner h4 { color: var(--color-fg); font-size: 80%; } + .app-body .server-banner__number { color: var(--color-content-fg); font-size: 15px; } + .app-body .server-banner__number-label { color: var(--color-content-fg); } + .app-body .server-banner .account { background-color: transparent; box-shadow: none; @@ -6710,78 +7730,96 @@ a:is(.active, border-right: 0; border-bottom: 0; } + .app-body .server-banner .account .display-name__account { opacity: .7; } + .app-body .server-banner__meta__column:first-child { width: calc(60% - 5px); } + .app-body .server-banner__meta__column:nth-child(2) { width: calc(40% - 5px); } + .app-body .server-banner .button.button-secondary { padding: 10px; margin: 10px 0; } + .app-body .button.button-secondary, .app-body .button.button-tertiary { border: 0; background-color: color-mix(in srgb, var(--color-accent), transparent 82%); color: var(--color-accent); } + .app-body .hover-card .button:not(.button--destructive) { background-color: var(--color-accent); color: var(--color-accent-fg); line-height: 1.375; padding: 10px 18px; } + .app-body .hover-card .button:not(.button--destructive):hover { background-color: var(--color-accent-focus); } + .app-body .button:is(.button-secondary, .button-tertiary):hover { background-color: color-mix(in srgb, var(--color-accent), transparent 70%); } + .app-body .button.button--destructive:is(:active, :hover, :focus) { background-color: var(--color-reject); color: var(--color-accent-fg); } + .app-body .sign-in-banner .button, .app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } + .app-body .sign-in-banner .button:active, .app-body .button:is(.button-secondary, .button-tertiary):active { transform: scale(.95); } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .button.button-tertiary { padding: 7px 18px; } } + .app-body .sign-in-banner { padding: 10px; } + .app-body .navigation-panel__sign-in-banner hr { display: block; border-color: var(--color-lines-translucent); margin: 12px 15px; opacity: .5; } + .app-body .sign-in-banner p { color: var(--color-fg-muted); padding: 0 5px 5px; } + .app-body .sign-in-banner p strong { color: var(--color-fg); font-weight: 500; } + .app-body .sign-in-banner p:nth-child(2) { font-size: 85%; line-height: 1.325; } + .app-body .sign-in-banner p { margin-bottom: 25px; } + .app-body .sign-in-banner p:first-child { margin-bottom: 5px; } @@ -6793,16 +7831,20 @@ a:is(.active, .app-body .column-list { background-color: var(--color-content-bg); } + .app-body .column-title .logo { display: none; } + .app-body .column-title h3, .app-body .column-title p { color: var(--color-content-fg); } + .app-body .column-list { border: 0; } + .app-body .account__note { color: var(--color-content-fg-muted); } @@ -6813,36 +7855,44 @@ a:is(.active, margin-bottom: 8px; transition: all .2s; } + .app-body .onboarding__steps__item:is(:active, :focus, :hover), .app-body .onboarding__link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .app-body .onboarding__steps__item__icon, .app-body .onboarding__link { color: var(--color-accent); } + .app-body .onboarding__steps__item__description h6, .app-body .onboarding__steps__item__description p, .app-body .onboarding__lead, .app-body .onboarding__lead strong { color: var(--color-content-fg); } + .app-body .onboarding__steps__item__go svg path, .app-body .onboarding__link svg path { fill: var(--color-accent); } + .app-body .app-form__avatar-input, .app-body .app-form__header-input { background-color: var(--color-accent-bg); transition: all .2s; } + .app-body .app-form__avatar-input:hover, .app-body .app-form__header-input:hover { background-color: color-mix(in srgb, var(--color-accent), transparent 75%); } + .app-body .app-form__header-input { border-top: 1px solid var(--color-lines); } + .app-body .app-form__header-input .icon { background-image: var(--icon-paperclip); transform: scale(1.4) translateX(-50%) translateY(-25%); @@ -6850,39 +7900,46 @@ a:is(.active, inset-inline-start: 50%; top: 50%; } + .app-body .onboarding__profile .app-form__avatar-input { border-color: var(--color-content-bg); border-radius: 50%; border-width: 5px; } + .app-body .onboarding__profile .app-form__avatar-input img { border-radius: 50%; background: var(--color-content-secondary-bg); } + .app-body .onboarding__profile .app-form__header-input img { background: var(--color-accent-bg); } + .app-body .simple_form .input.with_block_label > label, .app-body .simple_form .input.with_block_label .hint, .app-body .app-form__toggle__label strong, .app-body .simple_form .hint { color: var(--color-fg); } + .app-body .app-form__toggle__toggle > div { border-color: var(--color-lines); } + .app-form__avatar-input.selected .icon, .app-form__header-input.selected .icon { color: var(--color-accent); } + .app-body .simple_form :is( - input[type=datetime-local], - input[type=email], - input[type=number], - input[type=password], - input[type=text], - input[type=url], + input[type="datetime-local"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="text"], + input[type="url"], textarea ) { background-color: var(--color-content-secondary-bg); @@ -6890,41 +7947,49 @@ a:is(.active, border-radius: 8px; color: var(--color-content-fg); } + .app-body .simple_form :is( - input[type=datetime-local], - input[type=email], - input[type=number], - input[type=password], - input[type=text], - input[type=url], + input[type="datetime-local"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="text"], + input[type="url"], textarea ):is(:active, :focus) { border-color: var(--color-accent); } + .app-body .column-title { margin: -20px -20px 30px; padding: 50px 40px 40px; } + .app-body .column-title:not(:has(.onboarding__illustration)) { background-color: var(--color-content-secondary-bg); } + .app-body .column-title:has(+ .simple_form) { margin-bottom: 0; background-color: var(--color-content-secondary-bg); } + .app-body .follow-recommendations { background-color: var(--color-content-bg); } + .app-body .follow-recommendations .account { border-left: 0; border-right: 0; margin-bottom: 15px; } + .app-body .follow-recommendations .account__note { color: var(--color-content-fg); opacity: .7; } + .app-body .follow-recommendations .account__note p { overflow: hidden; } @@ -6934,10 +7999,12 @@ a:is(.active, border-color: var(--color-accent-lines); color: var(--color-content-fg); } + .app-body .copy-paste-text:is(:focus, :active), .app-body .tip-carousel:focus { border-color: var(--color-accent); } + .app-body .copy-paste-text:has(textarea:focus) { border-color: var(--color-accent); } @@ -6948,6 +8015,7 @@ a:is(.active, background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); } + .app-body .announcements { overflow: visible; z-index: 0; @@ -6956,55 +8024,68 @@ a:is(.active, border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } + .app-body .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } + .app-body .announcements__item__unread { color: var(--color-accent); background-color: var(--color-accent); } + .app-body .announcements__pagination, .app-body .announcements__pagination .icon-button { color: var(--color-content-fg); } + .app-body .announcements__pagination > * { vertical-align: middle; } + .app-body .reactions-bar__item { background-color: var(--color-accent-bg); border-radius: 8px; padding: 2px 8px; } + .app-body .reactions-bar .emoji-picker-dropdown .icon-button { padding: 3px; } + .app-body .reactions-bar__item:is(:active, :hover, :focus) { background-color: var(--color-content-bg); } + .app-body .reactions-bar__item.active, .app-body .reactions-bar .emoji-picker-dropdown .icon-button.active.inverted { background-color: var(--color-accent); } + .app-body .reactions-bar__item__count, .app-body .reactions-bar__item__count .animated-number { color: var(--color-accent); } + .app-body .reactions-bar__item:is(:active, :hover, :focus) .reactions-bar__item__count .animated-number { color: var(--color-content-fg); } + .app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number { color: var(--color-accent-fg); } + .app-body .reactions-bar .emoji-button, .app-body .announcements__item__content a.unhandled-link, .app-body .announcements__item__content a { color: var(--color-accent); } + .app-body .announcements .emoji-button { margin: 0; } -@media screen and (max-width:1174px) { +@media screen and (width <=1174px) { .app-body .announcements { box-shadow: none; margin-top: 1px; @@ -7013,6 +8094,7 @@ a:is(.active, margin-inline-start: -45px; margin-inline-end: -55px; } + .app-body .announcements__mastodon { border-radius: 0; } @@ -7026,17 +8108,20 @@ a:is(.active, background-color: var(--color-content-bg); color: var(--color-content-fg); } + .app-body .error-column__message h1, .app-body .error-column__message { color: var(--color-content-fg); } + .app-body .error-column__image { margin-top: 0; } + .app-body .regeneration-indicator { background-color: var(--color-content-bg); } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .regeneration-indicator { padding-top: 50px; padding-bottom: 40px; @@ -7056,89 +8141,108 @@ a:is(.active, padding-bottom: 20px; z-index: 1; } -@media screen and (max-width:889px) { +@media screen and (width <=889px) { .app-body .scrollable.about { border-left: 0; border-right: 0; } } + .app-body .about__header { order: 1; margin-bottom: 5px; } + .app-body .about__section:nth-child(3) { order: 3; } + .app-body .about__section:nth-child(2) { order: 2; } + .app-body .about__section:nth-child(4) { order: 4; } + .app-body .about__section:nth-child(5) { order: 5; } + .app-body .about .link-footer { order: 6; } + .app-body .about__footer { order: 7; } + .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(2) > div.about__section__title { display: none; } + .app-body .about__header p, .app-body .about__meta h4 { color: var(--color-fg); } + .app-body .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); border-radius: 0; background-color: var(--color-content-bg); } + .app-body .about__header__hero { margin-bottom: 10px; } + .app-body .about__meta { margin-top: 20px; margin-bottom: 0; } + .app-body .about__header > h1 { color: var(--color-content-fg); margin: 30px 0 0 20px; text-align: left; font-size: 24px; } + .app-body .about__header > h1 + p { color: var(--color-content-fg); opacity: .8; text-align: left; margin-left: 20px; + // margin-bottom: 15px; font-size: 14px; } -@media screen and (min-width:890px) { +@media screen and (width >=890px) { .app-body .scrollable.about { border-radius: 8px 8px 0 0 !important; } + .app-body .about__header__hero { border-radius: 6px 6px 0 0; } } -@media screen and (min-width:890px) and (max-width:1174px) { +@media screen and (width >=890px) and (width <=1174px) { .app-body .scrollable.about { margin-top: 10px; } } + .app-body .about__mail { color: var(--color-content-fg); } + .app-body .about__meta h4 { font-size: 12px; font-weight: bold; margin-bottom: 8px; } + .app-body .about__meta .account { background: none; box-shadow: none; @@ -7146,18 +8250,21 @@ a:is(.active, border-left: 0; border-right: 0; } + .app-body .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); } -@media screen and (max-width:600px) { +@media screen and (width <=600px) { .app-body .about__meta__divider { border-top: 3px solid var(--color-content-secondary-separator); width: 90%; } } + .app-body .about__section:nth-child(3) .about__section__body { padding-bottom: 3em; } + .app-body .about__meta, .app-body .about__section__title { color: var(--color-accent); @@ -7165,9 +8272,11 @@ a:is(.active, border: 0; border-radius: 8px; } + .app-body .about__section.active .about__section__title { border-radius: 8px 8px 0 0; } + .app-body .about__section.active:not(:nth-of-type(2)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); @@ -7189,24 +8298,28 @@ a:is(.active, .app-body .about__domain-blocks__domain__type { color: var(--color-content-fg); } -.app-body .prose ul > li:before { + +.app-body .prose ul > li::before { background-color: var(--color-content-fg); opacity: .3; top: .55em; width: 7px; height: 7px; } + .app-body .about__section__body .prose hr { border-color: var(--color-content-secondary-separator); margin-top: 2em; margin-bottom: 2em; border-width: 3px; } + .app-body .hover-card__bio a, .app-body .hover-card .account-fields a { text-decoration: none; color: var(--color-accent); } + .app-body .about__section__body .prose a, .app-body .about__section__body .prose a:hover, .app-body .prose a strong, @@ -7217,10 +8330,12 @@ a:is(.active, text-decoration-thickness: 2px; text-underline-offset: 2px; } + .app-body .about__section__body .prose a:hover :is(span, strong), .app-body .hover-card__bio a:hover { text-decoration-color: var(--color-accent); } + .app-body .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; @@ -7230,40 +8345,49 @@ a:is(.active, font-size: 80%; float: left; } + .about__section.active .about__section__title { background-color: var(--color-accent-bg); } + .app-body .rules-list__text, .app-body .rules-list__hint { color: var(--color-content-fg); } + .app-body .rules-list__text { font-weight: 600; } + .app-body .rules-list__hint { opacity: .7; padding-top: 4px; } + .app-body .rules-list li { border-bottom: 1px solid var(--color-lines); padding: 1em 1.75em 1em 3.4em; } + .app-body .rules-list li:last-child { border-bottom: 0; } + .about__domain-blocks { background-color: var(--color-content-bg); border: 0; } + .about__domain-blocks__domain { color: var(--color-content-fg); border-bottom: 0; } + .about__domain-blocks__domain:nth-child(2n) { background-color: var(--color-content-secondary-bg); } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body .about :is(.link-footer, .about__footer) { display: none; } @@ -7290,7 +8414,7 @@ a:is(.active, padding-bottom: 20px; z-index: 1; } -@media screen and (min-width:1175px) { +@media screen and (width >=1175px) { .app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy { border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -7317,35 +8441,44 @@ a:is(.active, :root:has(.layout-multiple-columns) *::-webkit-scrollbar { width: 4px; } + :root:has(.layout-multiple-columns) *::-webkit-scrollbar-track { background-color: var(--color-accent-bg); } + :root:has(.layout-multiple-columns) *::-webkit-scrollbar-thumb { opacity: .8; } + .layout-multiple-columns .scrollable, .layout-multiple-columns .column > .scrollable { max-height: 100%; } + .layout-multiple-columns .column { width: 400px; padding-bottom: 0; } + .layout-multiple-columns .drawer__inner__mastodon { display: none; } + .layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) { background: transparent; } + .layout-multiple-columns .drawer__header { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); border-radius: 8px; margin-bottom: 0; } + .layout-multiple-columns .drawer .search { margin-top: 10px; } + .layout-multiple-columns .drawer__tab { transition: all .3s; border-radius: 6px; @@ -7355,30 +8488,39 @@ a:is(.active, box-sizing: border-box; border: 0; } + .layout-multiple-columns .drawer__tab .icon { transform: scale(1.2); } + .layout-multiple-columns .drawer__tab:active { transform: scale(.9); } + .layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } + .layout-multiple-columns .drawer__tab .icon-cog { background-image: var(--icon-gear); } + .layout-multiple-columns .drawer__tab .icon-globe { background-image: var(--icon-globe); } + .layout-multiple-columns .drawer__tab .icon-users { background-image: var(--icon-users); } + .layout-multiple-columns .drawer__tab .icon-bars { background-image: var(--logo); } + .layout-multiple-columns .drawer__tab .icon-sign-out { background-image: var(--icon-logout); } + .layout-multiple-columns .column-header__icon.icon-bars { background-image: var(--icon-globe-active); } @@ -7390,29 +8532,35 @@ a:is(.active, .layout-multiple-columns .getting-started .column-subheading { background-color: var(--color-bg); } + .layout-multiple-columns .scrollable.getting-started { border-left: 0; border-right: 0; background-color: var(--color-bg); } + .layout-multiple-columns .getting-started__wrapper { padding-bottom: 10px; border-radius: 0 0 8px 8px; } + .layout-multiple-columns .getting-started .column-link { color: var(--color-content-fg); margin: 0 5px 2px; border-radius: 8px; } + .app-body .getting-started .column-link { margin-left: 0; font-weight: 500; color: var(--color-fg); } + .layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-fg); } + .layout-multiple-columns .getting-started .column-link__icon { transform: scale(1.4); } @@ -7430,6 +8578,7 @@ a:is(.active, .layout-multiple-columns .getting-started__trends .trends__item { padding-left: 16px; } + .layout-multiple-columns .getting-started__trends h4 > :is(a, span) { padding-left: 45px; } @@ -7445,6 +8594,7 @@ a:is(.active, .layout-multiple-columns .column:has(> .getting-started) { width: 330px; } + .layout-multiple-columns .column:has(> .getting-started) :is(.column-header, .column-back-button), @@ -7465,10 +8615,12 @@ a:is(.active, width: 280px; transition: width .3s; } + .layout-multiple-columns .drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) { width: 400px; } + .layout-multiple-columns .drawer__inner:has(> .search-results > .search-results__section) { z-index: 2; background-color: var(--color-content-bg); @@ -7481,6 +8633,7 @@ a:is(.active, > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) { margin-bottom: 0; } + .layout-multiple-columns .drawer > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) @@ -7492,6 +8645,7 @@ a:is(.active, border-radius: 0; border: 0; } + .layout-multiple-columns .drawer > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) @@ -7503,6 +8657,7 @@ a:is(.active, .layout-multiple-columns .drawer__inner:has(.search-results .empty-column-indicator) { z-index: 3; } + .layout-multiple-columns .search-results .empty-column-indicator { border: 1px solid var(--color-lines); border-radius: 8px; @@ -7520,6 +8675,7 @@ a:is(.active, bottom: 0; z-index: -1; } + .layout-multiple-columns .link-footer::before, .layout-multiple-columns .link-footer::after { display: none; @@ -7529,7 +8685,7 @@ a:is(.active, background-color: var(--color-content-bg); } -@media screen and (min-width:630px) and (max-width:1174px) { +@media screen and (width >=630px) and (width <=1174px) { .layout-multiple-columns :is( .column-header, @@ -7548,6 +8704,7 @@ a:is(.active, border-radius: 8px; color: var(--color-content-fg); } + .app-body .switch-to-advanced .switch-to-advanced__toggle { color: var(--color-accent); } @@ -7563,6 +8720,7 @@ a:is(.active, )::before { background-image: var(--icon-tangerine-slice); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7600,6 +8758,7 @@ a:is(.active, )::before { background-image: var(--icon-calendar); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7623,6 +8782,7 @@ a:is(.active, )::before { background-image: var(--icon-music); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7631,6 +8791,7 @@ a:is(.active, )::before { background-image: var(--icon-microphone); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7639,6 +8800,7 @@ a:is(.active, )::before { background-image: var(--icon-cake); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7655,6 +8817,7 @@ a:is(.active, )::before { background-image: var(--icon-popcorn); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7671,6 +8834,7 @@ a:is(.active, )::before { background-image: var(--icon-camera); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7684,6 +8848,7 @@ a:is(.active, )::before { background-image: var(--icon-sunset); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7694,6 +8859,7 @@ a:is(.active, )::before { background-image: var(--icon-pine); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7711,6 +8877,7 @@ a:is(.active, )::before { background-image: var(--icon-tree); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7726,6 +8893,7 @@ a:is(.active, )::before { background-image: var(--icon-cat); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7740,6 +8908,7 @@ a:is(.active, )::before { background-image: var(--icon-dog); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7761,6 +8930,7 @@ a:is(.active, )::before { background-image: var(--icon-brush); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7776,6 +8946,7 @@ a:is(.active, )::before { background-image: var(--icon-apple); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7787,6 +8958,7 @@ a:is(.active, )::before { background-image: var(--icon-pencil); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7799,6 +8971,7 @@ a:is(.active, )::before { background-image: var(--icon-book); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7815,6 +8988,7 @@ a:is(.active, )::before { background-image: var(--icon-gaming); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7824,6 +8998,7 @@ a:is(.active, )::before { background-image: var(--icon-cube); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7837,6 +9012,7 @@ a:is(.active, )::before { background-image: var(--icon-football); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7870,6 +9046,7 @@ a:is(.active, )::before { background-image: var(--icon-pride); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7883,6 +9060,7 @@ a:is(.active, )::before { background-image: var(--icon-vote); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7896,6 +9074,7 @@ a:is(.active, )::before { background-image: var(--icon-code); } + .app-body .trends__item:has( .trends__item__name a:is( @@ -7905,6 +9084,7 @@ a:is(.active, )::before { background-image: var(--icon-handshake); } + .app-body .trends__item:has( .trends__item__name a:is(