2023-12-02 02:30:32 +09:00
/ * Tangerine UI for Mastodon 🍊
2023-11-21 08:22:43 +09:00
A Tangerine redesign for Mastodon ' s Web UI .
https : / / github . com / nileane / TangerineUI-for-Mastodon /
by @ nileane @ nileane . fr
* /
2023-12-02 02:30:32 +09:00
/* 📄 Meta */
2023-12-02 02:03:24 +09:00
: root {
2024-07-24 03:51:30 +09:00
--version : "v2.0.0-pre7~" ;
2024-02-28 05:33:01 +09:00
--variant-name : "Cherry" ;
--variant-emoji : "\1F352\00A0" ;
--variant : var ( --variant-emoji ) var ( --variant-name ) ;
2024-03-02 21:19:39 +09:00
--meta : 'Tangerine UI for Mastodon: ' var ( --version ) ' \00B7 ' var ( --variant ) ;
2023-12-02 02:03:24 +09:00
}
2023-11-21 08:22:43 +09:00
/* 🎨 Colors */
: root {
2024-02-27 23:49:31 +09:00
color-scheme : light dark ;
2024-02-27 22:06:16 +09:00
--color-bg : # f5eff2 ;
2023-12-27 06:25:51 +09:00
--gradient-bg : linear-gradient ( 90deg , var ( --color-bg ) , var ( --color-bg ) ) ;
2023-11-21 08:22:43 +09:00
--color-fg : # 2a2d37 ;
--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 ;
2024-07-24 03:50:55 +09:00
--color-content-fg-muted : color-mix ( in srgb , var ( --color-content-fg ) , var ( --color-content-bg ) 40 % ) ;
2023-11-21 08:22:43 +09:00
--color-content-secondary-bg : # f9f4f7 ;
--color-content-secondary-separator : rgba ( 237 , 219 , 227 , 0 . 4 ) ;
--color-content-bg-focus : # fffcfa ;
2024-08-20 03:08:32 +09:00
--color-accent : # d3487f ;
2023-11-21 08:22:43 +09:00
--color-accent-focus : # eb5e96 ;
--color-accent-lines : rgba ( 230 , 90 , 146 , 0 . 2 ) ;
--color-accent-bg : # f7e7ed ;
--color-accent-fg : # ffffff ;
2023-12-26 04:38:04 +09:00
--color-lines : # e1dde4 ;
2024-01-30 08:31:32 +09:00
--color-lines-translucent : rgba ( 0 , 0 , 0 , . 15 ) ;
2023-12-26 04:38:04 +09:00
--color-confirm : # 79bd9a ;
--color-confirm-bg : rgba ( 121 , 189 , 154 , 0 . 3 ) ;
--color-confirm-fg : # 4E8A6B ;
2024-08-03 08:41:47 +09:00
2023-12-26 04:38:04 +09:00
--color-reject : # df405a ;
--color-reject-bg : rgba ( 223 , 64 , 90 , 0 . 3 ) ;
2023-11-21 08:22:43 +09:00
}
@ media ( prefers-color-scheme : dark ) {
: root {
2024-07-18 00:06:52 +09:00
--color-bg : # 111111 ;
2023-12-27 06:25:51 +09:00
--gradient-bg : linear-gradient ( 90deg , var ( --color-bg ) , var ( --color-bg ) ) ;
2023-11-21 08:22:43 +09:00
--color-fg : # d6d2e0 ;
--color-fg-muted : # 6e5e67 ;
--color-secondary-bg : # 1f1118 ;
--color-secondary-separator : # 2e2328 ;
2024-07-18 00:06:52 +09:00
--color-content-bg : # 030303 ;
2023-11-21 08:22:43 +09:00
--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 ) ;
2023-12-27 05:55:56 +09:00
--color-content-bg-focus : # 0e0e0e ;
2023-11-21 08:22:43 +09:00
--color-accent : # d05c8a ;
2023-12-27 06:51:46 +09:00
--color-accent-focus : # ad2862 ;
2023-11-21 08:22:43 +09:00
--color-accent-lines : rgba ( 249 , 122 , 194 , 0 . 3 ) ;
--color-accent-bg : # 3c1f2f ;
--color-accent-fg : # ffffff ;
--color-lines : # 343434 ;
2024-01-30 08:31:32 +09:00
--color-lines-translucent : rgba ( 255 , 255 , 255 , . 15 ) ;
2024-03-19 03:13:55 +09:00
--color-confirm-fg : var ( --color-confirm ) ;
2023-11-21 08:22:43 +09:00
}
}
: root {
/* Mastodon logo */
2024-08-20 03:08:32 +09:00
--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" ) ;
2023-11-21 08:22:43 +09:00
/* Post+Notifications icons */
2024-08-20 03:08:32 +09:00
--icon-reply : 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='M236,200a12,12,0,0,1-24,0,84.09,84.09,0,0,0-84-84H61l27.52,27.51a12,12,0,0,1-17,17l-48-48a12,12,0,0,1,0-17l48-48a12,12,0,0,1,17,17L61,92h67A108.12,108.12,0,0,1,236,200Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-reply-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='M80,56v96L32,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,96H88V56a8,8,0,0,0-13.66-5.66l-48,48a8,8,0,0,0,0,11.32l48,48A8,8,0,0,0,88,152V112h40a88.1,88.1,0,0,1,88,88,8,8,0,0,0,16,0A104.11,104.11,0,0,0,128,96ZM72,132.69,43.31,104,72,75.31Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-reply-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,200a8,8,0,0,1-16,0,88.1,88.1,0,0,0-88-88H88v40a8,8,0,0,1-13.66,5.66l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,88,56V96h40A104.11,104.11,0,0,1,232,200Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-boost : 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='M227.85,46.89a20,20,0,0,0-18.74-18.74c-13.13-.77-46.65.42-74.48,28.24L131,60H74.36a19.83,19.83,0,0,0-14.14,5.86L25.87,100.19a20,20,0,0,0,11.35,33.95l37.14,5.18,42.32,42.32,5.19,37.18A19.88,19.88,0,0,0,135.34,235a20.13,20.13,0,0,0,6.37,1,19.9,19.9,0,0,0,14.1-5.87l34.34-34.35A19.85,19.85,0,0,0,196,181.64V125l3.6-3.59C227.43,93.54,228.62,60,227.85,46.89ZM76,84h31L75.75,115.28l-27.23-3.8ZM151.6,73.37A72.27,72.27,0,0,1,204,52a72.17,72.17,0,0,1-21.38,52.41L128,159,97,128ZM172,180l-27.49,27.49-3.8-27.23L172,149Zm-72,22c-8.71,11.85-26.19,26-60,26a12,12,0,0,1-12-12c0-33.84,14.12-51.32,26-60A12,12,0,1,1,68.18,175.3C62.3,179.63,55.51,187.8,53,203c15.21-2.51,23.37-9.3,27.7-15.18A12,12,0,1,1,100,202Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-boost-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='M184,120v61.65a8,8,0,0,1-2.34,5.65l-34.35,34.35a8,8,0,0,1-13.57-4.53L128,176ZM136,72H74.35a8,8,0,0,0-5.65,2.34L34.35,108.69a8,8,0,0,0,4.53,13.57L80,128ZM40,216c37.65,0,50.69-19.69,54.56-28.18L68.18,161.44C59.69,165.31,40,178.35,40,216Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-boost-active : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ff4013' viewBox='0 0 256 256'%3E%3Cpath d='M101.85,191.14C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Zm122-144a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.4,27.07h0L88,108.7A8,8,0,0,1,76.67,97.39l26.56-26.57A4,4,0,0,0,100.41,64H74.35A15.9,15.9,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A16,16,0,0,0,192,181.65V155.59a4,4,0,0,0-6.83-2.82l-26.57,26.56a8,8,0,0,1-11.71-.42,8.2,8.2,0,0,1,.6-11.1l49.27-49.27h0C223.45,91.86,224.6,59.71,223.85,47.12Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-boost-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='M101.85,191.14C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Zm122-144a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.4,27.07h0L88,108.7A8,8,0,0,1,76.67,97.39l26.56-26.57A4,4,0,0,0,100.41,64H74.35A15.9,15.9,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A16,16,0,0,0,192,181.65V155.59a4,4,0,0,0-6.83-2.82l-26.57,26.56a8,8,0,0,1-11.71-.42,8.2,8.2,0,0,1,.6-11.1l49.27-49.27h0C223.45,91.86,224.6,59.71,223.85,47.12Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-star : 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='M243,96a20.33,20.33,0,0,0-17.74-14l-56.59-4.57L146.83,24.62a20.36,20.36,0,0,0-37.66,0L87.35,77.44,30.76,82A20.45,20.45,0,0,0,19.1,117.88l43.18,37.24-13.2,55.7A20.37,20.37,0,0,0,79.57,233L128,203.19,176.43,233a20.39,20.39,0,0,0,30.49-22.15l-13.2-55.7,43.18-37.24A20.43,20.43,0,0,0,243,96ZM172.53,141.7a12,12,0,0,0-3.84,11.86L181.58,208l-47.29-29.08a12,12,0,0,0-12.58,0L74.42,208l12.89-54.4a12,12,0,0,0-3.84-11.86L41.2,105.24l55.4-4.47a12,12,0,0,0,10.13-7.38L128,41.89l21.27,51.5a12,12,0,0,0,10.13,7.38l55.4,4.47Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-star-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='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-active : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fec700' 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-bookmark-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,176v48l-64-40L64,224V176l64-40Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,16V161.57l-51.77-32.35a8,8,0,0,0-8.48,0L72,161.56V48ZM132.23,177.22a8,8,0,0,0-8.48,0L72,209.57V180.43l56-35,56,35v29.14Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-bookmark-active : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2377bb41' viewBox='0 0 256 256'%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32ZM132.23,177.22a8,8,0,0,0-8.48,0L72,209.57V180.43l56-35,56,35v29.14Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-translate-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,184H144l40-80ZM96,127.56h0A95.78,95.78,0,0,0,128,56H64A95.78,95.78,0,0,0,96,127.56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M247.15,212.42l-56-112a8,8,0,0,0-14.31,0l-21.71,43.43A88,88,0,0,1,108,126.93,103.65,103.65,0,0,0,135.69,64H160a8,8,0,0,0,0-16H104V32a8,8,0,0,0-16,0V48H32a8,8,0,0,0,0,16h87.63A87.7,87.7,0,0,1,96,116.35a87.74,87.74,0,0,1-19-31,8,8,0,1,0-15.08,5.34A103.63,103.63,0,0,0,84,127a87.55,87.55,0,0,1-52,17,8,8,0,0,0,0,16,103.46,103.46,0,0,0,64-22.08,104.18,104.18,0,0,0,51.44,21.31l-26.6,53.19a8,8,0,0,0,14.31,7.16L148.94,192h70.11l13.79,27.58A8,8,0,0,0,240,224a8,8,0,0,0,7.15-11.58ZM156.94,176,184,121.89,211.05,176Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-translate-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,184H144l40-80ZM96,127.56h0A95.78,95.78,0,0,0,128,56H64A95.78,95.78,0,0,0,96,127.56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M247.15,212.42l-56-112a8,8,0,0,0-14.31,0l-21.71,43.43A88,88,0,0,1,108,126.93,103.65,103.65,0,0,0,135.69,64H160a8,8,0,0,0,0-16H104V32a8,8,0,0,0-16,0V48H32a8,8,0,0,0,0,16h87.63A87.7,87.7,0,0,1,96,116.35a87.74,87.74,0,0,1-19-31,8,8,0,1,0-15.08,5.34A103.63,103.63,0,0,0,84,127a87.55,87.55,0,0,1-52,17,8,8,0,0,0,0,16,103.46,103.46,0,0,0,64-22.08,104.18,104.18,0,0,0,51.44,21.31l-26.6,53.19a8,8,0,0,0,14.31,7.16L148.94,192h70.11l13.79,27.58A8,8,0,0,0,240,224a8,8,0,0,0,7.15-11.58ZM156.94,176,184,121.89,211.05,176Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-ellipsis : 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='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-ellipsis-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='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-ellipsis-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-poll : 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,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='%23d3487f' 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-poll-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,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='%232a2d37' 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='%232a2d37' 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='%23d3487f' 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='%232a2d37' 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" ) ;
--icon-users-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='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" ) ;
--icon-user-plus : 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,136a12,12,0,0,1-12,12h-8v8a12,12,0,0,1-24,0v-8h-8a12,12,0,0,1,0-24h8v-8a12,12,0,0,1,24,0v8h8A12,12,0,0,1,256,136Zm-54.81,56.28a12,12,0,1,1-18.38,15.44C169.12,191.42,145,172,108,172c-28.89,0-55.46,12.68-74.81,35.72a12,12,0,0,1-18.38-15.44A124.08,124.08,0,0,1,63.5,156.53a72,72,0,1,1,89,0A124,124,0,0,1,201.19,192.28ZM108,148a48,48,0,1,0-48-48A48.05,48.05,0,0,0,108,148Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-user-plus-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,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-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,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" ) ;
2023-11-21 08:22:43 +09:00
/* Navigation icons */
2024-08-20 03:08:32 +09:00
--icon-home : 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,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-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" ) ;
2024-02-19 21:47:04 +09:00
--icon-star-column-link-accent : var ( --icon-star-accent ) ;
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-02-19 21:47:04 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-08-03 08:41:47 +09:00
2024-08-20 03:08:32 +09:00
--icon-user-plus-column-link : var ( --icon-user-plus ) ;
--icon-user-plus-column-link-active : var ( --icon-user-plus-active ) ;
--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" ) ;
2024-02-19 21:47:04 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-02-19 21:47:04 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-03-12 21:41:09 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-08-03 08:41:47 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2023-11-21 08:22:43 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-02-28 05:33:01 +09:00
2023-11-21 08:22:43 +09:00
/* Post visibility icons */
2024-08-20 03:08:32 +09:00
--icon-globe-visibility : 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='M248.59,58.67c-6.31-10.87-23-21.06-66.16-9.71A95.94,95.94,0,0,0,32,128q0,3.6.26,7.14C.56,166.86,1.1,186.4,7.44,197.33,13.4,207.61,25.3,212,40.68,212c9.79,0,21-1.78,32.95-4.91A95.94,95.94,0,0,0,224,128c0-2.41-.09-4.79-.27-7.16,14.31-14.38,23.86-28.21,27-40C253.55,70.42,251.12,63,248.59,58.67ZM128,56a72.11,72.11,0,0,1,70.19,56C184,124.73,165,138.59,141.92,151.86c-21.74,12.49-43.55,22.36-63.09,28.65A72,72,0,0,1,128,56ZM28.19,185.29c-.61-1.07-.17-8.22,10.67-21.71A95.77,95.77,0,0,0,52.35,187C35.12,189.61,28.85,186.41,28.19,185.29ZM128,200a71.66,71.66,0,0,1-22.56-3.64,394.1,394.1,0,0,0,48.42-23.69A388.11,388.11,0,0,0,198.43,143,72.12,72.12,0,0,1,128,200ZM227.57,74.65c-1.28,4.78-4.81,10.87-10.39,17.8A95.74,95.74,0,0,0,203.68,69c15.83-2.37,23.17,0,24.15,1.71C228,71,228.21,72.28,227.57,74.65Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-globe-visibility-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='M248.59,58.67c-6.31-10.87-23-21.06-66.16-9.71A95.94,95.94,0,0,0,32,128q0,3.6.26,7.14C.56,166.86,1.1,186.4,7.44,197.33,13.4,207.61,25.3,212,40.68,212c9.79,0,21-1.78,32.95-4.91A95.94,95.94,0,0,0,224,128c0-2.41-.09-4.79-.27-7.16,14.31-14.38,23.86-28.21,27-40C253.55,70.42,251.12,63,248.59,58.67ZM128,56a72.11,72.11,0,0,1,70.19,56C184,124.73,165,138.59,141.92,151.86c-21.74,12.49-43.55,22.36-63.09,28.65A72,72,0,0,1,128,56ZM28.19,185.29c-.61-1.07-.17-8.22,10.67-21.71A95.77,95.77,0,0,0,52.35,187C35.12,189.61,28.85,186.41,28.19,185.29ZM128,200a71.66,71.66,0,0,1-22.56-3.64,394.1,394.1,0,0,0,48.42-23.69A388.11,388.11,0,0,0,198.43,143,72.12,72.12,0,0,1,128,200ZM227.57,74.65c-1.28,4.78-4.81,10.87-10.39,17.8A95.74,95.74,0,0,0,203.68,69c15.83-2.37,23.17,0,24.15,1.71C228,71,228.21,72.28,227.57,74.65Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-globe-visibility-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='M248.59,58.67c-6.31-10.87-23-21.06-66.16-9.71A95.94,95.94,0,0,0,32,128q0,3.6.26,7.14C.56,166.86,1.1,186.4,7.44,197.33,13.4,207.61,25.3,212,40.68,212c9.79,0,21-1.78,32.95-4.91A95.94,95.94,0,0,0,224,128c0-2.41-.09-4.79-.27-7.16,14.31-14.38,23.86-28.21,27-40C253.55,70.42,251.12,63,248.59,58.67ZM128,56a72.11,72.11,0,0,1,70.19,56C184,124.73,165,138.59,141.92,151.86c-21.74,12.49-43.55,22.36-63.09,28.65A72,72,0,0,1,128,56ZM28.19,185.29c-.61-1.07-.17-8.22,10.67-21.71A95.77,95.77,0,0,0,52.35,187C35.12,189.61,28.85,186.41,28.19,185.29ZM128,200a71.66,71.66,0,0,1-22.56-3.64,394.1,394.1,0,0,0,48.42-23.69A388.11,388.11,0,0,0,198.43,143,72.12,72.12,0,0,1,128,200ZM227.57,74.65c-1.28,4.78-4.81,10.87-10.39,17.8A95.74,95.74,0,0,0,203.68,69c15.83-2.37,23.17,0,24.15,1.71C228,71,228.21,72.28,227.57,74.65Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-unlock : 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='M236.37,139.4a12,12,0,0,0-12-3A84.07,84.07,0,0,1,119.6,31.59a12,12,0,0,0-15-15A108.86,108.86,0,0,0,49.69,55.07,108,108,0,0,0,136,228a107.09,107.09,0,0,0,64.93-21.69,108.86,108.86,0,0,0,38.44-54.94A12,12,0,0,0,236.37,139.4Zm-49.88,47.74A84,84,0,0,1,68.86,69.51,84.93,84.93,0,0,1,92.27,48.29Q92,52.13,92,56A108.12,108.12,0,0,0,200,164q3.87,0,7.71-.27A84.79,84.79,0,0,1,186.49,187.14Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-unlock-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='M236.37,139.4a12,12,0,0,0-12-3A84.07,84.07,0,0,1,119.6,31.59a12,12,0,0,0-15-15A108.86,108.86,0,0,0,49.69,55.07,108,108,0,0,0,136,228a107.09,107.09,0,0,0,64.93-21.69,108.86,108.86,0,0,0,38.44-54.94A12,12,0,0,0,236.37,139.4Zm-49.88,47.74A84,84,0,0,1,68.86,69.51,84.93,84.93,0,0,1,92.27,48.29Q92,52.13,92,56A108.12,108.12,0,0,0,200,164q3.87,0,7.71-.27A84.79,84.79,0,0,1,186.49,187.14Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-unlock-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='M236.37,139.4a12,12,0,0,0-12-3A84.07,84.07,0,0,1,119.6,31.59a12,12,0,0,0-15-15A108.86,108.86,0,0,0,49.69,55.07,108,108,0,0,0,136,228a107.09,107.09,0,0,0,64.93-21.69,108.86,108.86,0,0,0,38.44-54.94A12,12,0,0,0,236.37,139.4Zm-49.88,47.74A84,84,0,0,1,68.86,69.51,84.93,84.93,0,0,1,92.27,48.29Q92,52.13,92,56A108.12,108.12,0,0,0,200,164q3.87,0,7.71-.27A84.79,84.79,0,0,1,186.49,187.14Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-lock : 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,76H180V56A52,52,0,0,0,76,56V76H48A20,20,0,0,0,28,96V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V96A20,20,0,0,0,208,76ZM100,56a28,28,0,0,1,56,0V76H100ZM204,204H52V100H204Zm-76-92a32,32,0,0,0-12,61.66V180a12,12,0,0,0,24,0v-6.34A32,32,0,0,0,128,112Zm0,24a8,8,0,1,1-8,8A8,8,0,0,1,128,136Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-lock-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='M208,76H180V56A52,52,0,0,0,76,56V76H48A20,20,0,0,0,28,96V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V96A20,20,0,0,0,208,76ZM100,56a28,28,0,0,1,56,0V76H100ZM204,204H52V100H204Zm-76-92a32,32,0,0,0-12,61.66V180a12,12,0,0,0,24,0v-6.34A32,32,0,0,0,128,112Zm0,24a8,8,0,1,1-8,8A8,8,0,0,1,128,136Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-lock-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,76H180V56A52,52,0,0,0,76,56V76H48A20,20,0,0,0,28,96V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V96A20,20,0,0,0,208,76ZM100,56a28,28,0,0,1,56,0V76H100ZM204,204H52V100H204Zm-76-92a32,32,0,0,0-12,61.66V180a12,12,0,0,0,24,0v-6.34A32,32,0,0,0,128,112Zm0,24a8,8,0,1,1-8,8A8,8,0,0,1,128,136Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-at : 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='M128,20a108,108,0,0,0,0,216c22.27,0,45.69-6.73,62.64-18a12,12,0,1,0-13.29-20c-13,8.63-31.89,14-49.35,14a84,84,0,1,1,84-84c0,9.29-1.67,17.08-4.69,21.95-2.64,4.24-6,6.05-11.31,6.05s-8.67-1.81-11.31-6.05c-3-4.87-4.69-12.66-4.69-21.95V88a12,12,0,0,0-23.49-3.46,52,52,0,1,0,8.86,79.57C172.3,174.3,182.81,180,196,180c24.67,0,40-19.92,40-52A108.12,108.12,0,0,0,128,20Zm0,136a28,28,0,1,1,28-28A28,28,0,0,1,128,156Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-at-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,20a108,108,0,0,0,0,216c22.27,0,45.69-6.73,62.64-18a12,12,0,1,0-13.29-20c-13,8.63-31.89,14-49.35,14a84,84,0,1,1,84-84c0,9.29-1.67,17.08-4.69,21.95-2.64,4.24-6,6.05-11.31,6.05s-8.67-1.81-11.31-6.05c-3-4.87-4.69-12.66-4.69-21.95V88a12,12,0,0,0-23.49-3.46,52,52,0,1,0,8.86,79.57C172.3,174.3,182.81,180,196,180c24.67,0,40-19.92,40-52A108.12,108.12,0,0,0,128,20Zm0,136a28,28,0,1,1,28-28A28,28,0,0,1,128,156Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-at-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='M128,20a108,108,0,0,0,0,216c22.27,0,45.69-6.73,62.64-18a12,12,0,1,0-13.29-20c-13,8.63-31.89,14-49.35,14a84,84,0,1,1,84-84c0,9.29-1.67,17.08-4.69,21.95-2.64,4.24-6,6.05-11.31,6.05s-8.67-1.81-11.31-6.05c-3-4.87-4.69-12.66-4.69-21.95V88a12,12,0,0,0-23.49-3.46,52,52,0,1,0,8.86,79.57C172.3,174.3,182.81,180,196,180c24.67,0,40-19.92,40-52A108.12,108.12,0,0,0,128,20Zm0,136a28,28,0,1,1,28-28A28,28,0,0,1,128,156Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2023-11-21 08:22:43 +09:00
/* Other icons */
--icon-bell-still : var ( --icon-bell ) ;
2024-08-20 03:08:32 +09:00
--icon-bell-ringing : 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,71.1a8,8,0,0,1-10.78-3.42,94.13,94.13,0,0,0-33.46-36.91,8,8,0,1,1,8.54-13.54,111.46,111.46,0,0,1,39.12,43.09A8,8,0,0,1,224,71.1ZM35.71,72a8,8,0,0,0,7.1-4.32A94.13,94.13,0,0,1,76.27,30.77a8,8,0,1,0-8.54-13.54A111.46,111.46,0,0,0,28.61,60.32,8,8,0,0,0,35.71,72Zm186.1,103.94A16,16,0,0,1,208,200H167.2a40,40,0,0,1-78.4,0H48a16,16,0,0,1-13.79-24.06C43.22,160.39,48,138.28,48,112a80,80,0,0,1,160,0C208,138.27,212.78,160.38,221.81,175.94ZM150.62,200H105.38a24,24,0,0,0,45.24,0Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-erase : 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,168l-48,48H66.75L36.69,185.94a16,16,0,0,1,0-22.63L96,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-erase-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='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM213.67,103,160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-reject : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23df3f5a' viewBox='0 0 256 256'%3E%3Cpath d='M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-reject-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='M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-megaphone : 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='M144,69.09V170.91L50.24,199.67A8,8,0,0,1,40,192V48a8,8,0,0,1,10.24-7.67Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M228.54,86.66l-176.06-54A16,16,0,0,0,32,48V192a16,16,0,0,0,16,16,16,16,0,0,0,4.52-.65L136,181.73V192a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16v-29.9l28.54-8.75A16.09,16.09,0,0,0,240,138V102A16.09,16.09,0,0,0,228.54,86.66ZM136,165,48,192V48l88,27Zm48,27H152V176.82L184,167Zm40-54-.11,0L152,160.08V79.92l71.89,22,.11,0v36Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-sliders : 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='M128,80a24,24,0,1,1-24-24A24,24,0,0,1,128,80Zm40,72a24,24,0,1,0,24,24A24,24,0,0,0,168,152Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2024-08-24 05:19:07 +09:00
--icon-paperclip : 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,56V178.06l-39.72-39.72a8,8,0,0,0-11.31,0L147.31,164,97.66,114.34a8,8,0,0,0-11.32,0L32,168.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-paperclip-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,56V178.06l-39.72-39.72a8,8,0,0,0-11.31,0L147.31,164,97.66,114.34a8,8,0,0,0-11.32,0L32,168.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2024-08-20 03:08:32 +09:00
--icon-warning : 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='M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-warning-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='M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-check : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%234e8a6b' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-check-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='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-verified : 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='M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-52.2,6.84-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-gear : 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-gear-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.94,107.21a8,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.21ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-pin : 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='M229.66,98.34,172.39,155.8c11.46,22.93-1.72,45.86-10.11,57a8,8,0,0,1-12,.83L42.34,105.76A8,8,0,0,1,43,93.85c29.65-23.92,57.4-10,57.4-10l57.27-57.46a8,8,0,0,1,11.31,0L229.66,87A8,8,0,0,1,229.66,98.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M235.32,81.37,174.63,20.69a16,16,0,0,0-22.63,0L98.37,74.49c-10.66-3.34-35-7.37-60.4,13.14a16,16,0,0,0-1.29,23.78L85,159.71,42.34,202.34a8,8,0,0,0,11.32,11.32L96.29,171l48.29,48.29A16,16,0,0,0,155.9,224c.38,0,.75,0,1.13,0a15.93,15.93,0,0,0,11.64-6.33c19.64-26.1,17.75-47.32,13.19-60L235.33,104A16,16,0,0,0,235.32,81.37ZM224,92.69h0l-57.27,57.46a8,8,0,0,0-1.49,9.22c9.46,18.93-1.8,38.59-9.34,48.62L48,100.08c12.08-9.74,23.64-12.31,32.48-12.31A40.13,40.13,0,0,1,96.81,91a8,8,0,0,0,9.25-1.51L163.32,32,224,92.68Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-emoji : 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,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.08,48c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-emoji-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,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.08,48c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-emoji-accent-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='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,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.08,48c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-link : 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='M218.34,119.6,183.6,154.34a46.58,46.58,0,0,1-44.31,12.26c-.31.34-.62.67-.95,1L103.6,202.34A46.63,46.63,0,1,1,37.66,136.4L72.4,101.66A46.6,46.6,0,0,1,116.71,89.4c.31-.34.62-.67,1-1L152.4,53.66a46.63,46.63,0,0,1,65.94,65.94Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,7.78,8.22H152a8,8,0,0,0,8-7.78A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-share : 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,104V216H48V104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-compose : 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='M211.84,134.81l-59.79,60.47,0,0a15.75,15.75,0,0,1-11.2,4.68H75.32L45.66,229.66a8,8,0,0,1-11.32-11.32l22.59-22.58h0L124.7,128H209A4,4,0,0,1,211.84,134.81ZM216.7,30.57a64,64,0,0,0-85.9,4.14l-9.6,9.48A4,4,0,0,0,120,47v63l55-55a8,8,0,0,1,11.31,11.31L140.71,112h88.38a4,4,0,0,0,3.56-2.16A64.08,64.08,0,0,0,216.7,30.57ZM62.83,167.23,104,126.06V70.76a4,4,0,0,0-6.81-2.84L60.69,104A15.9,15.9,0,0,0,56,115.31V164.4A4,4,0,0,0,62.83,167.23Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-send : 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='M227.91,134.86,59.93,231a8,8,0,0,1-11.44-9.67L80,128,48.49,34.72a8,8,0,0,1,11.44-9.67l168,95.85A8,8,0,0,1,227.91,134.86Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M231.87,114l-168-95.89A16,16,0,0,0,40.92,37.34L71.55,128,40.92,218.67A16,16,0,0,0,56,240a16.15,16.15,0,0,0,7.93-2.1l167.92-96.05a16,16,0,0,0,.05-27.89ZM56,224a.56.56,0,0,0,0-.12L85.74,136H144a8,8,0,0,0,0-16H85.74L56.06,32.16A.46.46,0,0,0,56,32l168,95.83Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-send-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='M240,127.89a16,16,0,0,1-8.18,14L63.9,237.9A16.15,16.15,0,0,1,56,240a16,16,0,0,1-15-21.33l27-79.95A4,4,0,0,1,71.72,136H144a8,8,0,0,0,8-8.53,8.19,8.19,0,0,0-8.26-7.47h-72a4,4,0,0,1-3.79-2.72l-27-79.94A16,16,0,0,1,63.84,18.07l168,95.89A16,16,0,0,1,240,127.89Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-copy : 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,40V168H168V88H88V40Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-copied : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2379bd9a' viewBox='0 0 256 256'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32Zm-8,128H176V88a8,8,0,0,0-8-8H96V48H208Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-eye-shut : 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,104c-16.81,20.81-47.63,48-96,48s-79.19-27.19-96-48c16.81-20.81,47.63-48,96-48S207.19,83.19,224,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M228,175a8,8,0,0,1-10.92-3l-19-33.2A123.23,123.23,0,0,1,162,155.46l5.87,35.22a8,8,0,0,1-6.58,9.21A8.4,8.4,0,0,1,160,200a8,8,0,0,1-7.88-6.69l-5.77-34.58a133.06,133.06,0,0,1-36.68,0l-5.77,34.58A8,8,0,0,1,96,200a8.4,8.4,0,0,1-1.32-.11,8,8,0,0,1-6.58-9.21L94,155.46a123.23,123.23,0,0,1-36.06-16.69L39,172A8,8,0,1,1,25.06,164l20-35a153.47,153.47,0,0,1-19.3-20A8,8,0,1,1,38.22,99c16.6,20.54,45.64,45,89.78,45s73.18-24.49,89.78-45A8,8,0,1,1,230.22,109a153.47,153.47,0,0,1-19.3,20l20,35A8,8,0,0,1,228,175Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-eye-shut-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='M224,104c-16.81,20.81-47.63,48-96,48s-79.19-27.19-96-48c16.81-20.81,47.63-48,96-48S207.19,83.19,224,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M228,175a8,8,0,0,1-10.92-3l-19-33.2A123.23,123.23,0,0,1,162,155.46l5.87,35.22a8,8,0,0,1-6.58,9.21A8.4,8.4,0,0,1,160,200a8,8,0,0,1-7.88-6.69l-5.77-34.58a133.06,133.06,0,0,1-36.68,0l-5.77,34.58A8,8,0,0,1,96,200a8.4,8.4,0,0,1-1.32-.11,8,8,0,0,1-6.58-9.21L94,155.46a123.23,123.23,0,0,1-36.06-16.69L39,172A8,8,0,1,1,25.06,164l20-35a153.47,153.47,0,0,1-19.3-20A8,8,0,1,1,38.22,99c16.6,20.54,45.64,45,89.78,45s73.18-24.49,89.78-45A8,8,0,1,1,230.22,109a153.47,153.47,0,0,1-19.3,20l20,35A8,8,0,0,1,228,175Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-eye-open : 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='M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Zm0,112a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,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,160Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-edited : 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.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='%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-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" ) ;
--icon-trophy : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%234e8a6b' viewBox='0 0 256 256'%3E%3Cpath d='M200,48v63.1c0,39.7-31.75,72.6-71.45,72.9A72,72,0,0,1,56,112V48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M232,64H208V48a8,8,0,0,0-8-8H56a8,8,0,0,0-8,8V64H24A16,16,0,0,0,8,80V96a40,40,0,0,0,40,40h3.65A80.13,80.13,0,0,0,120,191.61V216H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16H136V191.58c31.94-3.23,58.44-25.64,68.08-55.58H208a40,40,0,0,0,40-40V80A16,16,0,0,0,232,64ZM48,120A24,24,0,0,1,24,96V80H48v32q0,4,.39,8Zm144-8.9c0,35.52-29,64.64-64,64.9a64,64,0,0,1-64-64V56H192ZM232,96a24,24,0,0,1-24,24h-.5a81.81,81.81,0,0,0,.5-8.9V80h24Z'%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='%23d3487f' 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" ) ;
2024-02-29 02:45:00 +09:00
/* Popular hashtag icons */
2024-08-20 03:08:32 +09:00
--icon-music : 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,164a28,28,0,1,1-28-28A28,28,0,0,1,208,164ZM52,168a28,28,0,1,0,28,28A28,28,0,0,0,52,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-microphone : 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.5,151,59,222.45a8,8,0,0,1-10.38-.79l-14.3-14.3A8,8,0,0,1,33.55,197L105,99.5l0,0A64,64,0,0,0,156.48,151Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M168,16A72.07,72.07,0,0,0,96,88a73.29,73.29,0,0,0,.63,9.42L27.12,192.22A15.93,15.93,0,0,0,28.71,213L43,227.29a15.93,15.93,0,0,0,20.78,1.59l94.81-69.53A73.29,73.29,0,0,0,168,160a72,72,0,1,0,0-144Zm56,72a55.72,55.72,0,0,1-11.16,33.52L134.49,43.16A56,56,0,0,1,224,88ZM54.32,216,40,201.68,102.14,117A72.37,72.37,0,0,0,139,153.86ZM112,88a55.67,55.67,0,0,1,11.16-33.51l78.34,78.34A56,56,0,0,1,112,88Zm-2.35,58.34a8,8,0,0,1,0,11.31l-8,8a8,8,0,1,1-11.31-11.31l8-8A8,8,0,0,1,109.67,146.33Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-cake : 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,48c0-24,24-40,24-40s24,16,24,40a24,24,0,0,1-48,0ZM208,96H48a16,16,0,0,0-16,16v23.33c0,17.44,13.67,32.18,31.1,32.66A32,32,0,0,0,96,136a32,32,0,0,0,64,0,32,32,0,0,0,32.9,32c17.43-.48,31.1-15.22,31.1-32.66V112A16,16,0,0,0,208,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M232,112a24,24,0,0,0-24-24H136V79a32.06,32.06,0,0,0,24-31c0-28-26.44-45.91-27.56-46.66a8,8,0,0,0-8.88,0C122.44,2.09,96,20,96,48a32.06,32.06,0,0,0,24,31v9H48a24,24,0,0,0-24,24v23.33a40.84,40.84,0,0,0,8,24.24V200a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V159.57a40.84,40.84,0,0,0,8-24.24ZM112,48c0-13.57,10-24.46,16-29.79,6,5.33,16,16.22,16,29.79a16,16,0,0,1-32,0ZM40,112a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v23.33c0,13.25-10.46,24.31-23.32,24.66A24,24,0,0,1,168,136a8,8,0,0,0-16,0,24,24,0,0,1-48,0,8,8,0,0,0-16,0,24,24,0,0,1-24.68,24C50.46,159.64,40,148.58,40,135.33Zm160,96H56a8,8,0,0,1-8-8V172.56A38.77,38.77,0,0,0,62.88,176a39.69,39.69,0,0,0,29-11.31A40.36,40.36,0,0,0,96,160a40,40,0,0,0,64,0,40.36,40.36,0,0,0,4.13,4.67A39.67,39.67,0,0,0,192,176c.38,0,.76,0,1.14,0A38.77,38.77,0,0,0,208,172.56V200A8,8,0,0,1,200,208Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-calendar : 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,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-popcorn : 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='M88,96l16,120H70.34a8,8,0,0,1-7.79-6.17L32,80Zm80,0L152,216h33.66a8,8,0,0,0,7.79-6.17L224,80Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.52,74.21a8,8,0,0,0-7.13-2A44,44,0,0,0,168,41.67a44,44,0,0,0-80,0,44,44,0,0,0-54.4,30.51,8,8,0,0,0-9.4,9.65L54.76,211.67A16,16,0,0,0,70.34,224H185.66a16,16,0,0,0,15.58-12.33L231.79,81.83A8,8,0,0,0,229.52,74.21ZM76,56a27.68,27.68,0,0,1,13.11,3.26,8,8,0,0,0,11.56-5.34,28,28,0,0,1,54.66,0,8,8,0,0,0,11.56,5.34A28,28,0,0,1,207,76.54l-38.56,11-34.49-13.8a16,16,0,0,0-11.88,0L87.57,87.56,49,76.54A28,28,0,0,1,76,56Zm83.25,45.11L145,208H111L96.75,101.11,128,88.62ZM42.91,91.44l37.85,10.81L94.86,208H70.34ZM185.66,208H161.14l14.1-105.75,37.85-10.81Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-tangerine-slice : 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,88A88,88,0,0,1,40,88Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M248,80H8a8,8,0,0,0-8,8,128,128,0,0,0,256,0A8,8,0,0,0,248,80ZM77.4,149.91l42.6-42.6V167.6A79.59,79.59,0,0,1,77.4,149.91ZM66.09,138.6A79.59,79.59,0,0,1,48.4,96h60.29ZM136,107.31l42.6,42.6A79.59,79.59,0,0,1,136,167.6Zm53.91,31.29L147.31,96H207.6A79.59,79.59,0,0,1,189.91,138.6ZM128,200A112.15,112.15,0,0,1,16.28,96H32.34a96,96,0,0,0,191.32,0h16.06A112.15,112.15,0,0,1,128,200Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-sunset : 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,144a64.33,64.33,0,0,1-2,16H66a64,64,0,1,1,126-16Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M240,152H199.55a73.54,73.54,0,0,0,.45-8,72,72,0,0,0-144,0,73.54,73.54,0,0,0,.45,8H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM72,144a56,56,0,1,1,111.41,8H72.59A56.13,56.13,0,0,1,72,144Zm144,56a8,8,0,0,1-8,8H48a8,8,0,0,1,0-16H208A8,8,0,0,1,216,200ZM72.84,43.58a8,8,0,0,1,14.32-7.16l8,16a8,8,0,0,1-14.32,7.16Zm-56,48.84a8,8,0,0,1,10.74-3.57l16,8a8,8,0,0,1-7.16,14.31l-16-8A8,8,0,0,1,16.84,92.42Zm192,15.16a8,8,0,0,1,3.58-10.73l16-8a8,8,0,1,1,7.16,14.31l-16,8a8,8,0,0,1-10.74-3.58Zm-48-55.16,8-16a8,8,0,0,1,14.32,7.16l-8,16a8,8,0,1,1-14.32-7.16Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-camera : 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,64H176L160,40H96L80,64H48A16,16,0,0,0,32,80V192a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V80A16,16,0,0,0,208,64ZM128,168a36,36,0,1,1,36-36A36,36,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M208,56H180.28L166.65,35.56A8,8,0,0,0,160,32H96a8,8,0,0,0-6.65,3.56L75.71,56H48A24,24,0,0,0,24,80V192a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V80A24,24,0,0,0,208,56Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H80a8,8,0,0,0,6.66-3.56L100.28,48h55.43l13.63,20.44A8,8,0,0,0,176,72h32a8,8,0,0,1,8,8ZM128,88a44,44,0,1,0,44,44A44.05,44.05,0,0,0,128,88Zm0,72a28,28,0,1,1,28-28A28,28,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-pine : 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='M32,192l56-72H48L128,16l80,104H168l56,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M230.31,187.09,184.36,128H208a8,8,0,0,0,6.34-12.88l-80-104a8,8,0,0,0-12.68,0l-80,104A8,8,0,0,0,48,128H71.64L25.69,187.09A8,8,0,0,0,32,200h88v40a8,8,0,0,0,16,0V200h88a8,8,0,0,0,6.31-12.91ZM48.36,184l46-59.09A8,8,0,0,0,88,112H64.25L128,29.12,191.75,112H168a8,8,0,0,0-6.31,12.91L207.64,184Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-tree : 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,127.82c.09,33.94-28.41,63.3-62.34,64.16a63.72,63.72,0,0,1-41.66-14,63.71,63.71,0,0,1-41.65,14c-33.93-.86-62.44-30.22-62.35-64.16a64,64,0,0,1,40.13-59.2,68,68,0,0,1,127.74,0A64,64,0,0,1,232,127.82Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M198.1,62.59a76,76,0,0,0-140.2,0A71.71,71.71,0,0,0,16,127.8C15.9,166,48,199,86.14,200A72.22,72.22,0,0,0,120,192.47V232a8,8,0,0,0,16,0V192.47A72.17,72.17,0,0,0,168,200l1.82,0C208,199,240.11,166,240,127.8A71.71,71.71,0,0,0,198.1,62.59ZM169.45,184a56.08,56.08,0,0,1-33.45-10v-41l43.58-21.78a8,8,0,1,0-7.16-14.32L136,115.06V88a8,8,0,0,0-16,0v51.06L83.58,120.84a8,8,0,1,0-7.16,14.32L120,156.94v17a56,56,0,0,1-33.45,10C56.9,183.23,31.92,157.52,32,127.84A55.79,55.79,0,0,1,67.11,76a8,8,0,0,0,4.53-4.67,60,60,0,0,1,112.72,0A8,8,0,0,0,188.89,76,55.79,55.79,0,0,1,224,127.84C224.08,157.52,199.1,183.23,169.45,184Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-cat : 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,48v88c0,48.6-43,88-96,88s-96-39.4-96-88V48a8,8,0,0,1,13.66-5.66L67.6,67.6h0a102.87,102.87,0,0,1,120.8,0h0l21.94-25.24A8,8,0,0,1,224,48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M96,140a12,12,0,1,1-12-12A12,12,0,0,1,96,140Zm76-12a12,12,0,1,0,12,12A12,12,0,0,0,172,128Zm60-80v88c0,52.93-46.65,96-104,96S24,188.93,24,136V48A16,16,0,0,1,51.31,36.69c.14.14.26.27.38.41L69,57a111.22,111.22,0,0,1,118.1,0L204.31,37.1c.12-.14.24-.27.38-.41A16,16,0,0,1,232,48Zm-16,0-21.56,24.8A8,8,0,0,1,183.63,74,88.86,88.86,0,0,0,168,64.75V88a8,8,0,1,1-16,0V59.05a97.43,97.43,0,0,0-16-2.72V88a8,8,0,1,1-16,0V56.33a97.43,97.43,0,0,0-16,2.72V88a8,8,0,1,1-16,0V64.75A88.86,88.86,0,0,0,72.37,74a8,8,0,0,1-10.81-1.17L40,48v88c0,41.66,35.21,76,80,79.67V195.31l-13.66-13.66a8,8,0,0,1,11.32-11.31L128,180.68l10.34-10.34a8,8,0,0,1,11.32,11.31L136,195.31v20.36c44.79-3.69,80-38,80-79.67Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-dog : 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,120.38V184a32,32,0,0,1-32,32H80a32,32,0,0,1-32-32V120.38L104,48h48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.71,125l-16.42-88a16,16,0,0,0-19.61-12.58l-.31.09L150.85,40h-45.7L52.63,24.56l-.31-.09A16,16,0,0,0,32.71,37.05L16.29,125a15.77,15.77,0,0,0,9.12,17.52A16.26,16.26,0,0,0,32.12,144,15.48,15.48,0,0,0,40,141.84V184a40,40,0,0,0,40,40h96a40,40,0,0,0,40-40V141.85a15.5,15.5,0,0,0,7.87,2.16,16.31,16.31,0,0,0,6.72-1.47A15.77,15.77,0,0,0,239.71,125ZM32,128h0L48.43,40,90.5,52.37Zm144,80H136V195.31l13.66-13.65a8,8,0,0,0-11.32-11.32L128,180.69l-10.34-10.35a8,8,0,0,0-11.32,11.32L120,195.31V208H80a24,24,0,0,1-24-24V123.11L107.93,56h40.14L200,123.11V184A24,24,0,0,1,176,208Zm48-80L165.5,52.37,207.57,40,224,128ZM104,140a12,12,0,1,1-12-12A12,12,0,0,1,104,140Zm72,0a12,12,0,1,1-12-12A12,12,0,0,1,176,140Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-brush : 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,32c0,32.81-31.64,67.43-58.64,91.05A84.39,84.39,0,0,0,133,90.64C156.57,63.64,191.19,32,224,32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-apple : 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,73.52Zm0,99.26c-16.79-11.53-24-30.87-24-52.78,0-18.3,11.68-34.81,24-46.48C204.53,62.66,185,56,168,56a63.72,63.72,0,0,0-40,14h0A63.71,63.71,0,0,0,88.88,56C52,55.5,23.06,86.3,24,123.19a119.62,119.62,0,0,0,37.65,84.12A32,32,0,0,0,83.6,216h87.7a31.75,31.75,0,0,0,23.26-10c15.85-17,21.44-33.2,21.44-33.2Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M223.3,169.59a8.07,8.07,0,0,0-2.8-3.4C203.53,154.53,200,134.64,200,120c0-17.67,13.47-33.06,21.5-40.67a8,8,0,0,0,0-11.62C208.82,55.74,187.82,48,168,48a72.23,72.23,0,0,0-40,12.13,71.56,71.56,0,0,0-90.71,9.09A74.63,74.63,0,0,0,16,123.4a127,127,0,0,0,40.14,89.73A39.8,39.8,0,0,0,83.59,224h87.68a39.84,39.84,0,0,0,29.12-12.57,125,125,0,0,0,17.82-24.6C225.23,174,224.33,172,223.3,169.59Zm-34.63,30.94a23.76,23.76,0,0,1-17.4,7.47H83.59a23.82,23.82,0,0,1-16.44-6.51A111.14,111.14,0,0,1,32,123,58.5,58.5,0,0,1,48.65,80.47,54.81,54.81,0,0,1,88,64h.78A55.45,55.45,0,0,1,123,76.28a8,8,0,0,0,10,0A55.39,55.39,0,0,1,168,64a70.64,70.64,0,0,1,36,10.35c-13,14.52-20,30.47-20,45.65,0,23.77,7.64,42.73,22.18,55.3A105.52,105.52,0,0,1,188.67,200.53ZM128.23,30A40,40,0,0,1,167,0h1a8,8,0,0,1,0,16h-1a24,24,0,0,0-23.24,18,8,8,0,1,1-15.5-4Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-pencil : 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.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-gaming : 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.86,207.57a28,28,0,0,1-24.66-7.77L150.09,152H172a51.94,51.94,0,0,0,51.2-61h0l16.36,84.17A28,28,0,0,1,216.86,207.57Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M176,112H152a8,8,0,0,1,0-16h24a8,8,0,0,1,0,16ZM104,96H96V88a8,8,0,0,0-16,0v8H72a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0v-8h8a8,8,0,0,0,0-16ZM241.48,200.65a36,36,0,0,1-54.94,4.81c-.12-.12-.24-.24-.35-.37L146.48,160h-37L69.81,205.09l-.35.37A36.08,36.08,0,0,1,44,216,36,36,0,0,1,8.56,173.75a.68.68,0,0,1,0-.14L24.93,89.52A59.88,59.88,0,0,1,83.89,40H172a60.08,60.08,0,0,1,59,49.25c0,.06,0,.12,0,.18l16.37,84.17a.68.68,0,0,1,0,.14A35.74,35.74,0,0,1,241.48,200.65ZM172,144a44,44,0,0,0,0-88H83.89A43.9,43.9,0,0,0,40.68,92.37l0,.13L24.3,176.59A20,20,0,0,0,58,194.3l41.92-47.59a8,8,0,0,1,6-2.71Zm59.7,32.59-8.74-45A60,60,0,0,1,172,160h-4.2L198,194.31a20.09,20.09,0,0,0,17.46,5.39,20,20,0,0,0,16.23-23.11Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-cube : 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,129.09V232a8,8,0,0,1-3.84-1l-88-48.16a8,8,0,0,1-4.16-7V80.2a8,8,0,0,1,.7-3.27Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-football : 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='M65.17,108.08l-33,25.34c-.1-1.8-.15-3.6-.15-5.42A95.61,95.61,0,0,1,53.23,67.78ZM46.92,179.42a96.12,96.12,0,0,0,57,41.52l-14.7-41.52Zm105.21,41.52a96.12,96.12,0,0,0,57-41.52H166.83ZM202.77,67.78l-11.94,40.3,33,25.34c.1-1.8.15-3.6.15-5.42A95.61,95.61,0,0,0,202.77,67.78Zm-38.52-28.7a96.34,96.34,0,0,0-72.5,0L128,64ZM152.72,160,168,115.5,128,88,88,115.5,103.28,160Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm76.52,147.42H170.9l-9.26-12.76,12.63-36.78,15-4.89,26.24,20.13A87.38,87.38,0,0,1,204.52,171.42Zm-164-34.3L66.71,117l15,4.89,12.63,36.78L85.1,171.42H51.48A87.38,87.38,0,0,1,40.47,137.12Zm10-50.64,5.51,18.6L40.71,116.77A87.33,87.33,0,0,1,50.43,86.48ZM109,152,97.54,118.65,128,97.71l30.46,20.94L147,152Zm91.07-46.92,5.51-18.6a87.33,87.33,0,0,1,9.72,30.29Zm-6.2-35.38-9.51,32.08-15.07,4.89L136,83.79V68.21l29.09-20A88.58,88.58,0,0,1,193.86,69.7ZM146.07,41.87,128,54.29,109.93,41.87a88.24,88.24,0,0,1,36.14,0ZM90.91,48.21l29.09,20V83.79L86.72,106.67l-15.07-4.89L62.14,69.7A88.58,88.58,0,0,1,90.91,48.21ZM63.15,187.42H83.52l7.17,20.27A88.4,88.4,0,0,1,63.15,187.42ZM110,214.13,98.12,180.71,107.35,168h41.3l9.23,12.71-11.83,33.42a88,88,0,0,1-36.1,0Zm55.36-6.44,7.17-20.27h20.37A88.4,88.4,0,0,1,165.31,207.69Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-pride : 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,112v16a96,96,0,0,1-192,0V88a24,24,0,0,1,48,0V64a24,24,0,0,1,48,0,24,24,0,0,1,48,0V88h24A24,24,0,0,1,224,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M200,80H184V64a32,32,0,0,0-56-21.13A32,32,0,0,0,72.21,60.42,32,32,0,0,0,24,88v40a104,104,0,0,0,208,0V112A32,32,0,0,0,200,80ZM152,48a16,16,0,0,1,16,16V80H136V64A16,16,0,0,1,152,48ZM88,64a16,16,0,0,1,32,0v40a16,16,0,0,1-32,0ZM40,88a16,16,0,0,1,32,0v16a16,16,0,0,1-32,0Zm176,40a88,88,0,0,1-175.92,3.75A31.93,31.93,0,0,0,80,125.13a31.93,31.93,0,0,0,44.58,3.35,32.21,32.21,0,0,0,11.8,11.44A47.88,47.88,0,0,0,120,176a8,8,0,0,0,16,0,32,32,0,0,1,32-32,8,8,0,0,0,0-16H152a16,16,0,0,1-16-16V96h64a16,16,0,0,1,16,16Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-vote : 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,48V208a8,8,0,0,1-8,8H64L40,192V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,48V208a16,16,0,0,1-16,16H136a8,8,0,0,1,0-16h72V48H48v96a8,8,0,0,1-16,0V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM125.66,154.34a8,8,0,0,0-11.32,0L64,204.69,45.66,186.34a8,8,0,0,0-11.32,11.32l24,24a8,8,0,0,0,11.32,0l56-56A8,8,0,0,0,125.66,154.34Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-code : 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='M240,128l-48,40H64L16,128,64,88H192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-handshake : 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='M200,152l-40,40L96,176,40,136,72.68,70.63,128,56l55.32,14.63L183.6,72H144L98.34,116.29a8,8,0,0,0,1.38,12.42C117.23,139.9,141,139.13,160,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l55.07-55.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41ZM41.53,64,62,74.22,36.43,125.27,16,115.06Zm116,119.13L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm62-57.87-25.52-51L214.47,64,240,115.06Zm-87.75,92.67a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-science : 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='M210.26,210.26c-17.23,17.23-68-5.63-113.46-51.06S28.51,63,45.74,45.74s68,5.63,113.46,51.06S227.49,193,210.26,210.26Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M196.12,128c24.65-34.61,37.22-70.38,19.74-87.86S162.61,35.23,128,59.88C93.39,35.23,57.62,22.66,40.14,40.14S35.23,93.39,59.88,128c-24.65,34.61-37.22,70.38-19.74,87.86h0c5.63,5.63,13.15,8.14,21.91,8.14,18.48,0,42.48-11.17,66-27.88C151.47,212.83,175.47,224,194,224c8.76,0,16.29-2.52,21.91-8.14h0C233.34,198.38,220.77,162.61,196.12,128Zm8.43-76.55c7.64,7.64,2.48,32.4-18.52,63.28a300.33,300.33,0,0,0-21.19-23.57A300.33,300.33,0,0,0,141.27,70C172.15,49,196.91,43.8,204.55,51.45ZM176.29,128a289.14,289.14,0,0,1-22.76,25.53A289.14,289.14,0,0,1,128,176.29a289.14,289.14,0,0,1-25.53-22.76A289.14,289.14,0,0,1,79.71,128,298.62,298.62,0,0,1,128,79.71a289.14,289.14,0,0,1,25.53,22.76A289.14,289.14,0,0,1,176.29,128ZM51.45,51.45c2.2-2.21,5.83-3.35,10.62-3.35C73.89,48.1,92.76,55,114.72,70A304,304,0,0,0,91.16,91.16,300.33,300.33,0,0,0,70,114.73C49,83.85,43.81,59.09,51.45,51.45Zm0,153.1C43.81,196.91,49,172.15,70,141.27a300.33,300.33,0,0,0,21.19,23.57A304.18,304.18,0,0,0,114.73,186C83.85,207,59.09,212.2,51.45,204.55Zm153.1,0c-7.64,7.65-32.4,2.48-63.28-18.52a304.18,304.18,0,0,0,23.57-21.19A300.33,300.33,0,0,0,186,141.27C207,172.15,212.19,196.91,204.55,204.55ZM140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-book : 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,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-olympics : url ( " data : image / svg + xml , % 3C % 3Fxml version = '1.0' encoding = 'UTF-8' standalone = 'no' % 3F % 3E % 3C ! -- Created with Inkscape ( http : / / www . inkscape . org / ) -- % 3E % 3Csvg xmlns : dc = 'http://purl.org/dc/elements/1.1/' xmlns : cc = 'http://creativecommons.org/ns%23' xmlns : rdf = 'http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns : svg = 'http://www.w3.org/2000/svg' xmlns = 'http://www.w3.org/2000/svg' version = '1.1' width = '1020' height = '495' id = 'svg2' % 3E % 3Cmetadata id = 'metadata28' % 3E % 3Crdf : RDF % 3E % 3Ccc : Work rdf : about = '' % 3E % 3Cdc : format % 3Eimage / svg + xml % 3C / dc : format % 3E % 3Cdc : type rdf : resource = 'http://purl.org/dc/dcmitype/StillImage' / % 3E % 3Cdc : title % 3E % 3C / dc : title % 3E % 3C / cc : Work % 3E % 3C / rdf : RDF % 3E % 3C / metadata % 3E % 3Cdefs id = 'defs4' / % 3E % 3Cg transform = 'matrix(5.7658033,0,0,5.7658033,-216.55705,-1629.403)' id = 'g3854' style = 'fill:%23000000;fill-opacity:1' % 3E % 3Cpath d = 'm 77.998457,338.04465 c 9.719843,-3.74035 16.634311,-13.17634 16.634311,-24.1989 0,-14.29201 -11.62467,-25.91668 -25.916678,-25.91668 -14.292008,0 -25.95413,11.62467 -25.95413,25.91668 0,14.29201 11.662122,25.91668 25.95413,25.91668 0.54665,0 1.089397,-0.017 1.627741,-0.0505 -0.212847,-1.56081 -0.14221,-4.09918 0.0472,-5.10887 -0.552337,0.0437 -1.110922,0.0659 -1.674938,0.0659 -11.526965,0 -20.823227,-9.29627 -20.823227,-20.82323 0,-11.52696 9.296262,-20.82323 20.823227,-20.82323 l 0,4e-5 c 11.526959,0 20.785775,9.29627 20.785775,20.82323 0,7.91769 -4.368408,14.78291 -10.83969,18.30588 -0.315166,1.3712 -0.711622,4.31209 -0.663721,5.893 z' id = 'path3016' style = 'fill:%23d3487f;fill-opacity:1' / % 3E % 3Cpath d = 'm 118.12057,340.00218 c -1.34862,10.20474 -10.02005,18.04148 -20.603518,18.04148 -11.52697,0 -20.82323,-9.29627 -20.82323,-20.82323 0,-7.8992 4.36561,-14.75085 10.82304,-18.28114 0.45237,-1.7753 0.72684,-3.69514 0.65576,-5.89574 -9.70007,3.75525 -16.6097,13.17589 -16.6097,24.17688 0,14.29201 11.66212,25.91668 25.95413,25.91668 13.026538,0 23.837178,-9.65722 25.649488,-22.18923 -1.32835,-0.0348 -4.11703,-0.60321 -5.04597,-0.9457 z m 4.98685,-6.89716 c -1.97707,-12.3428 -12.69857,-21.80127 -25.590368,-21.80127 -0.5666,0 -1.12907,0.0183 -1.68684,0.0542 0.31178,1.20255 0.3074,3.96583 -0.0166,5.10739 l 0,6e-5 c 0.5617,-0.0452 1.1298,-0.0682 1.70343,-0.0682 9.546428,0 17.537168,6.37619 20.001238,15.11504 1.68318,0.64085 3.49015,1.20604 5.58913,1.59278 z' id = 'path3790' style = 'fill:%23d3487f;fill-opacity:1' / % 3E % 3Cpath d = 'm 157.72746,317.82769 c 1.60373,10.29047 9.36704,19.0414 20.1411,21.36875 13.96979,3.01767 27.78686,-5.89044 30.80453,-19.86023 3.01768,-13.9698 -5.88253,-27.82347 -19.85233,-30.84115 -13.96979,-3.01767 -27.79477,5.92705 -30.81244,19.89685 -0.11542,0.53432 -0.2134,1.06841 -0.29433,1.6017 1.57057,0.12151 4.03679,0.72651 4.98373,1.12484 0.0739,-0.54911 0.17015,-1.09979 0.28924,-1.65109 2.43385,-11.26709 13.48338,-18.39092 24.75047,-15.95707 11.26708,2.43385 18.39092,13.48338 15.95706,24.75047 l -3e-5,-1e-5 c -2.43385,11.26709 -13.47548,18.35431 -24.74257,15.92046 -7.73918,-1.67178 -13.52726,-7.39124 -15.60443,-14.46049 -1.27374,-0.59757 -4.06462,-1.60605 -5.62,-1.89303 z' id = 'path3842' style = 'fill:%23d3487f;fill-opacity:1' / % 3E % 3Cpath d = 'm 105.40431,311.064 c 1.34862,-10.20474 10.02005,-18.04148 20.60351,-18.04148 11.52697,0 20.82323,9.29627 20.82323,20.82323 0,7.8992 -4.36561,14.75085 -10.82304,18.28114 -0.45237,1.7753 -0.72684,3.69514 -0.65576,5.89574 9.70007,-3.75525 16.6097,-13.17589 16.6097,-24.17688 0,-14.29201 -11.66212,-25.91668 -25.95413,-25.91668 -13.02653,0 -23.83717,9.65722 -25.64948,22.18923 1.32835,0.0348 4.11703,0.60321 5.04597,0.9457 z m -4.98685,6.89716 c 1.97707,12.3428 12.69857,21.80127 25.59036,21.80127 0.5666,0 1.12907,-0.0183 1.68684,-0.0542 -0.31178,-1.20255 -0.3074,-3.96583 0.0166,-5.10739 l 0,-6e-5 c -0.5617,0.0452 -1.1298,0.0682 -1.70343,0.0682 -9.54642,0 -17.53716,-6.37619 -20.00123,-15.11504 -1.68318,-0.64085 -3.49015,-1.20604 -5.58913,-1.59278 z' id = 'path3850' style = 'fill:%23d3487f;fill-opacity:1' / % 3E % 3Cpath d = ' m 175 . 43867 , 340 . 00219 c -1 . 34862 , 10 . 20474 -10 . 02005 , 18 . 04148 -20 . 60351 , 18 . 04148 -11 . 52697 , 0 -20 . 82323 , -9 . 29627 -20 . 82323 , -20 . 82323 0 , -
2023-11-21 08:22:43 +09:00
}
@ media ( prefers-color-scheme : dark ) {
: root {
/* Mastodon logo */
2024-08-20 03:08:32 +09:00
--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='%23d05c8a'/%3E%3Cstop offset='100%25' stop-color='%23d05c8a'/%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" ) ;
2024-08-03 08:41:47 +09:00
2023-11-21 08:22:43 +09:00
/* Post+Notifications icons */
2024-08-20 03:08:32 +09:00
--icon-reply : 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='M236,200a12,12,0,0,1-24,0,84.09,84.09,0,0,0-84-84H61l27.52,27.51a12,12,0,0,1-17,17l-48-48a12,12,0,0,1,0-17l48-48a12,12,0,0,1,17,17L61,92h67A108.12,108.12,0,0,1,236,200Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-reply-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='M80,56v96L32,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,96H88V56a8,8,0,0,0-13.66-5.66l-48,48a8,8,0,0,0,0,11.32l48,48A8,8,0,0,0,88,152V112h40a88.1,88.1,0,0,1,88,88,8,8,0,0,0,16,0A104.11,104.11,0,0,0,128,96ZM72,132.69,43.31,104,72,75.31Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-reply-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,200a8,8,0,0,1-16,0,88.1,88.1,0,0,0-88-88H88v40a8,8,0,0,1-13.66,5.66l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,88,56V96h40A104.11,104.11,0,0,1,232,200Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-boost : 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='M227.85,46.89a20,20,0,0,0-18.74-18.74c-13.13-.77-46.65.42-74.48,28.24L131,60H74.36a19.83,19.83,0,0,0-14.14,5.86L25.87,100.19a20,20,0,0,0,11.35,33.95l37.14,5.18,42.32,42.32,5.19,37.18A19.88,19.88,0,0,0,135.34,235a20.13,20.13,0,0,0,6.37,1,19.9,19.9,0,0,0,14.1-5.87l34.34-34.35A19.85,19.85,0,0,0,196,181.64V125l3.6-3.59C227.43,93.54,228.62,60,227.85,46.89ZM76,84h31L75.75,115.28l-27.23-3.8ZM151.6,73.37A72.27,72.27,0,0,1,204,52a72.17,72.17,0,0,1-21.38,52.41L128,159,97,128ZM172,180l-27.49,27.49-3.8-27.23L172,149Zm-72,22c-8.71,11.85-26.19,26-60,26a12,12,0,0,1-12-12c0-33.84,14.12-51.32,26-60A12,12,0,1,1,68.18,175.3C62.3,179.63,55.51,187.8,53,203c15.21-2.51,23.37-9.3,27.7-15.18A12,12,0,1,1,100,202Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-boost-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='M184,120v61.65a8,8,0,0,1-2.34,5.65l-34.35,34.35a8,8,0,0,1-13.57-4.53L128,176ZM136,72H74.35a8,8,0,0,0-5.65,2.34L34.35,108.69a8,8,0,0,0,4.53,13.57L80,128ZM40,216c37.65,0,50.69-19.69,54.56-28.18L68.18,161.44C59.69,165.31,40,178.35,40,216Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-boost-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='M101.85,191.14C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Zm122-144a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.4,27.07h0L88,108.7A8,8,0,0,1,76.67,97.39l26.56-26.57A4,4,0,0,0,100.41,64H74.35A15.9,15.9,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A16,16,0,0,0,192,181.65V155.59a4,4,0,0,0-6.83-2.82l-26.57,26.56a8,8,0,0,1-11.71-.42,8.2,8.2,0,0,1,.6-11.1l49.27-49.27h0C223.45,91.86,224.6,59.71,223.85,47.12Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-star : 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='M243,96a20.33,20.33,0,0,0-17.74-14l-56.59-4.57L146.83,24.62a20.36,20.36,0,0,0-37.66,0L87.35,77.44,30.76,82A20.45,20.45,0,0,0,19.1,117.88l43.18,37.24-13.2,55.7A20.37,20.37,0,0,0,79.57,233L128,203.19,176.43,233a20.39,20.39,0,0,0,30.49-22.15l-13.2-55.7,43.18-37.24A20.43,20.43,0,0,0,243,96ZM172.53,141.7a12,12,0,0,0-3.84,11.86L181.58,208l-47.29-29.08a12,12,0,0,0-12.58,0L74.42,208l12.89-54.4a12,12,0,0,0-3.84-11.86L41.2,105.24l55.4-4.47a12,12,0,0,0,10.13-7.38L128,41.89l21.27,51.5a12,12,0,0,0,10.13,7.38l55.4,4.47Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-star-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='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-bookmark-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,176v48l-64-40L64,224V176l64-40Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,16V161.57l-51.77-32.35a8,8,0,0,0-8.48,0L72,161.56V48ZM132.23,177.22a8,8,0,0,0-8.48,0L72,209.57V180.43l56-35,56,35v29.14Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-translate-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,184H144l40-80ZM96,127.56h0A95.78,95.78,0,0,0,128,56H64A95.78,95.78,0,0,0,96,127.56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M247.15,212.42l-56-112a8,8,0,0,0-14.31,0l-21.71,43.43A88,88,0,0,1,108,126.93,103.65,103.65,0,0,0,135.69,64H160a8,8,0,0,0,0-16H104V32a8,8,0,0,0-16,0V48H32a8,8,0,0,0,0,16h87.63A87.7,87.7,0,0,1,96,116.35a87.74,87.74,0,0,1-19-31,8,8,0,1,0-15.08,5.34A103.63,103.63,0,0,0,84,127a87.55,87.55,0,0,1-52,17,8,8,0,0,0,0,16,103.46,103.46,0,0,0,64-22.08,104.18,104.18,0,0,0,51.44,21.31l-26.6,53.19a8,8,0,0,0,14.31,7.16L148.94,192h70.11l13.79,27.58A8,8,0,0,0,240,224a8,8,0,0,0,7.15-11.58ZM156.94,176,184,121.89,211.05,176Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-ellipsis : 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='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-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-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" ) ;
--icon-users-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='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" ) ;
--icon-user-plus : 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,136a12,12,0,0,1-12,12h-8v8a12,12,0,0,1-24,0v-8h-8a12,12,0,0,1,0-24h8v-8a12,12,0,0,1,24,0v8h8A12,12,0,0,1,256,136Zm-54.81,56.28a12,12,0,1,1-18.38,15.44C169.12,191.42,145,172,108,172c-28.89,0-55.46,12.68-74.81,35.72a12,12,0,0,1-18.38-15.44A124.08,124.08,0,0,1,63.5,156.53a72,72,0,1,1,89,0A124,124,0,0,1,201.19,192.28ZM108,148a48,48,0,1,0-48-48A48.05,48.05,0,0,0,108,148Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-user-plus-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,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-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,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" ) ;
2023-11-21 08:22:43 +09:00
/* Navigation icons */
2024-08-20 03:08:32 +09:00
--icon-home : 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,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-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" ) ;
2024-02-19 21:47:04 +09:00
--icon-star-column-link-accent : var ( --icon-star-accent ) ;
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-02-19 21:47:04 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-08-03 08:41:47 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-02-19 21:47:04 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-02-19 21:47:04 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-08-03 08:41:47 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2023-11-21 08:22:43 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-02-28 05:33:01 +09:00
2024-08-20 03:08:32 +09:00
--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" ) ;
2024-08-03 08:41:47 +09:00
2023-11-21 08:22:43 +09:00
/* Post visibility icons */
2024-08-20 03:08:32 +09:00
--icon-globe-visibility : 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='M248.59,58.67c-6.31-10.87-23-21.06-66.16-9.71A95.94,95.94,0,0,0,32,128q0,3.6.26,7.14C.56,166.86,1.1,186.4,7.44,197.33,13.4,207.61,25.3,212,40.68,212c9.79,0,21-1.78,32.95-4.91A95.94,95.94,0,0,0,224,128c0-2.41-.09-4.79-.27-7.16,14.31-14.38,23.86-28.21,27-40C253.55,70.42,251.12,63,248.59,58.67ZM128,56a72.11,72.11,0,0,1,70.19,56C184,124.73,165,138.59,141.92,151.86c-21.74,12.49-43.55,22.36-63.09,28.65A72,72,0,0,1,128,56ZM28.19,185.29c-.61-1.07-.17-8.22,10.67-21.71A95.77,95.77,0,0,0,52.35,187C35.12,189.61,28.85,186.41,28.19,185.29ZM128,200a71.66,71.66,0,0,1-22.56-3.64,394.1,394.1,0,0,0,48.42-23.69A388.11,388.11,0,0,0,198.43,143,72.12,72.12,0,0,1,128,200ZM227.57,74.65c-1.28,4.78-4.81,10.87-10.39,17.8A95.74,95.74,0,0,0,203.68,69c15.83-2.37,23.17,0,24.15,1.71C228,71,228.21,72.28,227.57,74.65Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2023-11-21 08:22:43 +09:00
--icon-globe-visibility-inv : var ( --icon-globe-visibility ) ;
2024-08-20 03:08:32 +09:00
--icon-globe-visibility-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='M248.59,58.67c-6.31-10.87-23-21.06-66.16-9.71A95.94,95.94,0,0,0,32,128q0,3.6.26,7.14C.56,166.86,1.1,186.4,7.44,197.33,13.4,207.61,25.3,212,40.68,212c9.79,0,21-1.78,32.95-4.91A95.94,95.94,0,0,0,224,128c0-2.41-.09-4.79-.27-7.16,14.31-14.38,23.86-28.21,27-40C253.55,70.42,251.12,63,248.59,58.67ZM128,56a72.11,72.11,0,0,1,70.19,56C184,124.73,165,138.59,141.92,151.86c-21.74,12.49-43.55,22.36-63.09,28.65A72,72,0,0,1,128,56ZM28.19,185.29c-.61-1.07-.17-8.22,10.67-21.71A95.77,95.77,0,0,0,52.35,187C35.12,189.61,28.85,186.41,28.19,185.29ZM128,200a71.66,71.66,0,0,1-22.56-3.64,394.1,394.1,0,0,0,48.42-23.69A388.11,388.11,0,0,0,198.43,143,72.12,72.12,0,0,1,128,200ZM227.57,74.65c-1.28,4.78-4.81,10.87-10.39,17.8A95.74,95.74,0,0,0,203.68,69c15.83-2.37,23.17,0,24.15,1.71C228,71,228.21,72.28,227.57,74.65Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-unlock : 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='M236.37,139.4a12,12,0,0,0-12-3A84.07,84.07,0,0,1,119.6,31.59a12,12,0,0,0-15-15A108.86,108.86,0,0,0,49.69,55.07,108,108,0,0,0,136,228a107.09,107.09,0,0,0,64.93-21.69,108.86,108.86,0,0,0,38.44-54.94A12,12,0,0,0,236.37,139.4Zm-49.88,47.74A84,84,0,0,1,68.86,69.51,84.93,84.93,0,0,1,92.27,48.29Q92,52.13,92,56A108.12,108.12,0,0,0,200,164q3.87,0,7.71-.27A84.79,84.79,0,0,1,186.49,187.14Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2023-11-21 08:22:43 +09:00
--icon-unlock-inv : var ( --icon-unlock ) ;
2024-08-20 03:08:32 +09:00
--icon-unlock-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='M236.37,139.4a12,12,0,0,0-12-3A84.07,84.07,0,0,1,119.6,31.59a12,12,0,0,0-15-15A108.86,108.86,0,0,0,49.69,55.07,108,108,0,0,0,136,228a107.09,107.09,0,0,0,64.93-21.69,108.86,108.86,0,0,0,38.44-54.94A12,12,0,0,0,236.37,139.4Zm-49.88,47.74A84,84,0,0,1,68.86,69.51,84.93,84.93,0,0,1,92.27,48.29Q92,52.13,92,56A108.12,108.12,0,0,0,200,164q3.87,0,7.71-.27A84.79,84.79,0,0,1,186.49,187.14Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-lock : 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,76H180V56A52,52,0,0,0,76,56V76H48A20,20,0,0,0,28,96V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V96A20,20,0,0,0,208,76ZM100,56a28,28,0,0,1,56,0V76H100ZM204,204H52V100H204Zm-76-92a32,32,0,0,0-12,61.66V180a12,12,0,0,0,24,0v-6.34A32,32,0,0,0,128,112Zm0,24a8,8,0,1,1-8,8A8,8,0,0,1,128,136Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2023-11-21 08:22:43 +09:00
--icon-lock-inv : var ( --icon-lock ) ;
2024-08-20 03:08:32 +09:00
--icon-lock-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,76H180V56A52,52,0,0,0,76,56V76H48A20,20,0,0,0,28,96V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V96A20,20,0,0,0,208,76ZM100,56a28,28,0,0,1,56,0V76H100ZM204,204H52V100H204Zm-76-92a32,32,0,0,0-12,61.66V180a12,12,0,0,0,24,0v-6.34A32,32,0,0,0,128,112Zm0,24a8,8,0,1,1-8,8A8,8,0,0,1,128,136Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-at : 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,20a108,108,0,0,0,0,216c22.27,0,45.69-6.73,62.64-18a12,12,0,1,0-13.29-20c-13,8.63-31.89,14-49.35,14a84,84,0,1,1,84-84c0,9.29-1.67,17.08-4.69,21.95-2.64,4.24-6,6.05-11.31,6.05s-8.67-1.81-11.31-6.05c-3-4.87-4.69-12.66-4.69-21.95V88a12,12,0,0,0-23.49-3.46,52,52,0,1,0,8.86,79.57C172.3,174.3,182.81,180,196,180c24.67,0,40-19.92,40-52A108.12,108.12,0,0,0,128,20Zm0,136a28,28,0,1,1,28-28A28,28,0,0,1,128,156Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2023-11-21 08:22:43 +09:00
--icon-at-inv : var ( --icon-at ) ;
2024-08-20 03:08:32 +09:00
--icon-at-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='M128,20a108,108,0,0,0,0,216c22.27,0,45.69-6.73,62.64-18a12,12,0,1,0-13.29-20c-13,8.63-31.89,14-49.35,14a84,84,0,1,1,84-84c0,9.29-1.67,17.08-4.69,21.95-2.64,4.24-6,6.05-11.31,6.05s-8.67-1.81-11.31-6.05c-3-4.87-4.69-12.66-4.69-21.95V88a12,12,0,0,0-23.49-3.46,52,52,0,1,0,8.86,79.57C172.3,174.3,182.81,180,196,180c24.67,0,40-19.92,40-52A108.12,108.12,0,0,0,128,20Zm0,136a28,28,0,1,1,28-28A28,28,0,0,1,128,156Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2023-11-21 08:22:43 +09:00
/* Other icons */
--icon-bell-still : var ( --icon-bell ) ;
2024-08-20 03:08:32 +09:00
--icon-bell-ringing : 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,71.1a8,8,0,0,1-10.78-3.42,94.13,94.13,0,0,0-33.46-36.91,8,8,0,1,1,8.54-13.54,111.46,111.46,0,0,1,39.12,43.09A8,8,0,0,1,224,71.1ZM35.71,72a8,8,0,0,0,7.1-4.32A94.13,94.13,0,0,1,76.27,30.77a8,8,0,1,0-8.54-13.54A111.46,111.46,0,0,0,28.61,60.32,8,8,0,0,0,35.71,72Zm186.1,103.94A16,16,0,0,1,208,200H167.2a40,40,0,0,1-78.4,0H48a16,16,0,0,1-13.79-24.06C43.22,160.39,48,138.28,48,112a80,80,0,0,1,160,0C208,138.27,212.78,160.38,221.81,175.94ZM150.62,200H105.38a24,24,0,0,0,45.24,0Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-erase : 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,168l-48,48H66.75L36.69,185.94a16,16,0,0,1,0-22.63L96,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-erase-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='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM213.67,103,160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-megaphone : 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='M144,69.09V170.91L50.24,199.67A8,8,0,0,1,40,192V48a8,8,0,0,1,10.24-7.67Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M228.54,86.66l-176.06-54A16,16,0,0,0,32,48V192a16,16,0,0,0,16,16,16,16,0,0,0,4.52-.65L136,181.73V192a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16v-29.9l28.54-8.75A16.09,16.09,0,0,0,240,138V102A16.09,16.09,0,0,0,228.54,86.66ZM136,165,48,192V48l88,27Zm48,27H152V176.82L184,167Zm40-54-.11,0L152,160.08V79.92l71.89,22,.11,0v36Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-sliders : 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,80a24,24,0,1,1-24-24A24,24,0,0,1,128,80Zm40,72a24,24,0,1,0,24,24A24,24,0,0,0,168,152Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2024-08-24 05:19:07 +09:00
--icon-paperclip : 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,56V178.06l-39.72-39.72a8,8,0,0,0-11.31,0L147.31,164,97.66,114.34a8,8,0,0,0-11.32,0L32,168.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-paperclip-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,56V178.06l-39.72-39.72a8,8,0,0,0-11.31,0L147.31,164,97.66,114.34a8,8,0,0,0-11.32,0L32,168.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2024-08-20 03:08:32 +09:00
--icon-warning : 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='M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-verified : 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='M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-52.2,6.84-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-gear : 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-gear-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.94,107.21a8,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.21ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-pin : 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='M229.66,98.34,172.39,155.8c11.46,22.93-1.72,45.86-10.11,57a8,8,0,0,1-12,.83L42.34,105.76A8,8,0,0,1,43,93.85c29.65-23.92,57.4-10,57.4-10l57.27-57.46a8,8,0,0,1,11.31,0L229.66,87A8,8,0,0,1,229.66,98.34Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M235.32,81.37,174.63,20.69a16,16,0,0,0-22.63,0L98.37,74.49c-10.66-3.34-35-7.37-60.4,13.14a16,16,0,0,0-1.29,23.78L85,159.71,42.34,202.34a8,8,0,0,0,11.32,11.32L96.29,171l48.29,48.29A16,16,0,0,0,155.9,224c.38,0,.75,0,1.13,0a15.93,15.93,0,0,0,11.64-6.33c19.64-26.1,17.75-47.32,13.19-60L235.33,104A16,16,0,0,0,235.32,81.37ZM224,92.69h0l-57.27,57.46a8,8,0,0,0-1.49,9.22c9.46,18.93-1.8,38.59-9.34,48.62L48,100.08c12.08-9.74,23.64-12.31,32.48-12.31A40.13,40.13,0,0,1,96.81,91a8,8,0,0,0,9.25-1.51L163.32,32,224,92.68Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-emoji : 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,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.08,48c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-emoji-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,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.08,48c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-link : 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='M218.34,119.6,183.6,154.34a46.58,46.58,0,0,1-44.31,12.26c-.31.34-.62.67-.95,1L103.6,202.34A46.63,46.63,0,1,1,37.66,136.4L72.4,101.66A46.6,46.6,0,0,1,116.71,89.4c.31-.34.62-.67,1-1L152.4,53.66a46.63,46.63,0,0,1,65.94,65.94Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,7.78,8.22H152a8,8,0,0,0,8-7.78A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-share : 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,104V216H48V104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-send : 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='M227.91,134.86,59.93,231a8,8,0,0,1-11.44-9.67L80,128,48.49,34.72a8,8,0,0,1,11.44-9.67l168,95.85A8,8,0,0,1,227.91,134.86Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M231.87,114l-168-95.89A16,16,0,0,0,40.92,37.34L71.55,128,40.92,218.67A16,16,0,0,0,56,240a16.15,16.15,0,0,0,7.93-2.1l167.92-96.05a16,16,0,0,0,.05-27.89ZM56,224a.56.56,0,0,0,0-.12L85.74,136H144a8,8,0,0,0,0-16H85.74L56.06,32.16A.46.46,0,0,0,56,32l168,95.83Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-copy : 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,40V168H168V88H88V40Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-eye-shut : 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,104c-16.81,20.81-47.63,48-96,48s-79.19-27.19-96-48c16.81-20.81,47.63-48,96-48S207.19,83.19,224,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M228,175a8,8,0,0,1-10.92-3l-19-33.2A123.23,123.23,0,0,1,162,155.46l5.87,35.22a8,8,0,0,1-6.58,9.21A8.4,8.4,0,0,1,160,200a8,8,0,0,1-7.88-6.69l-5.77-34.58a133.06,133.06,0,0,1-36.68,0l-5.77,34.58A8,8,0,0,1,96,200a8.4,8.4,0,0,1-1.32-.11,8,8,0,0,1-6.58-9.21L94,155.46a123.23,123.23,0,0,1-36.06-16.69L39,172A8,8,0,1,1,25.06,164l20-35a153.47,153.47,0,0,1-19.3-20A8,8,0,1,1,38.22,99c16.6,20.54,45.64,45,89.78,45s73.18-24.49,89.78-45A8,8,0,1,1,230.22,109a153.47,153.47,0,0,1-19.3,20l20,35A8,8,0,0,1,228,175Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-eye-open : 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,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Zm0,112a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,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,160Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--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-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" ) ;
2024-02-29 02:45:00 +09:00
/* Popular hashtag icons */
2024-08-20 03:08:32 +09:00
--icon-music : 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,164a28,28,0,1,1-28-28A28,28,0,0,1,208,164ZM52,168a28,28,0,1,0,28,28A28,28,0,0,0,52,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-microphone : 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.5,151,59,222.45a8,8,0,0,1-10.38-.79l-14.3-14.3A8,8,0,0,1,33.55,197L105,99.5l0,0A64,64,0,0,0,156.48,151Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M168,16A72.07,72.07,0,0,0,96,88a73.29,73.29,0,0,0,.63,9.42L27.12,192.22A15.93,15.93,0,0,0,28.71,213L43,227.29a15.93,15.93,0,0,0,20.78,1.59l94.81-69.53A73.29,73.29,0,0,0,168,160a72,72,0,1,0,0-144Zm56,72a55.72,55.72,0,0,1-11.16,33.52L134.49,43.16A56,56,0,0,1,224,88ZM54.32,216,40,201.68,102.14,117A72.37,72.37,0,0,0,139,153.86ZM112,88a55.67,55.67,0,0,1,11.16-33.51l78.34,78.34A56,56,0,0,1,112,88Zm-2.35,58.34a8,8,0,0,1,0,11.31l-8,8a8,8,0,1,1-11.31-11.31l8-8A8,8,0,0,1,109.67,146.33Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-cake : 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,48c0-24,24-40,24-40s24,16,24,40a24,24,0,0,1-48,0ZM208,96H48a16,16,0,0,0-16,16v23.33c0,17.44,13.67,32.18,31.1,32.66A32,32,0,0,0,96,136a32,32,0,0,0,64,0,32,32,0,0,0,32.9,32c17.43-.48,31.1-15.22,31.1-32.66V112A16,16,0,0,0,208,96Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M232,112a24,24,0,0,0-24-24H136V79a32.06,32.06,0,0,0,24-31c0-28-26.44-45.91-27.56-46.66a8,8,0,0,0-8.88,0C122.44,2.09,96,20,96,48a32.06,32.06,0,0,0,24,31v9H48a24,24,0,0,0-24,24v23.33a40.84,40.84,0,0,0,8,24.24V200a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V159.57a40.84,40.84,0,0,0,8-24.24ZM112,48c0-13.57,10-24.46,16-29.79,6,5.33,16,16.22,16,29.79a16,16,0,0,1-32,0ZM40,112a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v23.33c0,13.25-10.46,24.31-23.32,24.66A24,24,0,0,1,168,136a8,8,0,0,0-16,0,24,24,0,0,1-48,0,8,8,0,0,0-16,0,24,24,0,0,1-24.68,24C50.46,159.64,40,148.58,40,135.33Zm160,96H56a8,8,0,0,1-8-8V172.56A38.77,38.77,0,0,0,62.88,176a39.69,39.69,0,0,0,29-11.31A40.36,40.36,0,0,0,96,160a40,40,0,0,0,64,0,40.36,40.36,0,0,0,4.13,4.67A39.67,39.67,0,0,0,192,176c.38,0,.76,0,1.14,0A38.77,38.77,0,0,0,208,172.56V200A8,8,0,0,1,200,208Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-calendar : 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,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-popcorn : 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='M88,96l16,120H70.34a8,8,0,0,1-7.79-6.17L32,80Zm80,0L152,216h33.66a8,8,0,0,0,7.79-6.17L224,80Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.52,74.21a8,8,0,0,0-7.13-2A44,44,0,0,0,168,41.67a44,44,0,0,0-80,0,44,44,0,0,0-54.4,30.51,8,8,0,0,0-9.4,9.65L54.76,211.67A16,16,0,0,0,70.34,224H185.66a16,16,0,0,0,15.58-12.33L231.79,81.83A8,8,0,0,0,229.52,74.21ZM76,56a27.68,27.68,0,0,1,13.11,3.26,8,8,0,0,0,11.56-5.34,28,28,0,0,1,54.66,0,8,8,0,0,0,11.56,5.34A28,28,0,0,1,207,76.54l-38.56,11-34.49-13.8a16,16,0,0,0-11.88,0L87.57,87.56,49,76.54A28,28,0,0,1,76,56Zm83.25,45.11L145,208H111L96.75,101.11,128,88.62ZM42.91,91.44l37.85,10.81L94.86,208H70.34ZM185.66,208H161.14l14.1-105.75,37.85-10.81Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-tangerine-slice : 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,88A88,88,0,0,1,40,88Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M248,80H8a8,8,0,0,0-8,8,128,128,0,0,0,256,0A8,8,0,0,0,248,80ZM77.4,149.91l42.6-42.6V167.6A79.59,79.59,0,0,1,77.4,149.91ZM66.09,138.6A79.59,79.59,0,0,1,48.4,96h60.29ZM136,107.31l42.6,42.6A79.59,79.59,0,0,1,136,167.6Zm53.91,31.29L147.31,96H207.6A79.59,79.59,0,0,1,189.91,138.6ZM128,200A112.15,112.15,0,0,1,16.28,96H32.34a96,96,0,0,0,191.32,0h16.06A112.15,112.15,0,0,1,128,200Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-sunset : 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,144a64.33,64.33,0,0,1-2,16H66a64,64,0,1,1,126-16Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M240,152H199.55a73.54,73.54,0,0,0,.45-8,72,72,0,0,0-144,0,73.54,73.54,0,0,0,.45,8H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM72,144a56,56,0,1,1,111.41,8H72.59A56.13,56.13,0,0,1,72,144Zm144,56a8,8,0,0,1-8,8H48a8,8,0,0,1,0-16H208A8,8,0,0,1,216,200ZM72.84,43.58a8,8,0,0,1,14.32-7.16l8,16a8,8,0,0,1-14.32,7.16Zm-56,48.84a8,8,0,0,1,10.74-3.57l16,8a8,8,0,0,1-7.16,14.31l-16-8A8,8,0,0,1,16.84,92.42Zm192,15.16a8,8,0,0,1,3.58-10.73l16-8a8,8,0,1,1,7.16,14.31l-16,8a8,8,0,0,1-10.74-3.58Zm-48-55.16,8-16a8,8,0,0,1,14.32,7.16l-8,16a8,8,0,1,1-14.32-7.16Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-camera : 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,64H176L160,40H96L80,64H48A16,16,0,0,0,32,80V192a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V80A16,16,0,0,0,208,64ZM128,168a36,36,0,1,1,36-36A36,36,0,0,1,128,168Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M208,56H180.28L166.65,35.56A8,8,0,0,0,160,32H96a8,8,0,0,0-6.65,3.56L75.71,56H48A24,24,0,0,0,24,80V192a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V80A24,24,0,0,0,208,56Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H80a8,8,0,0,0,6.66-3.56L100.28,48h55.43l13.63,20.44A8,8,0,0,0,176,72h32a8,8,0,0,1,8,8ZM128,88a44,44,0,1,0,44,44A44.05,44.05,0,0,0,128,88Zm0,72a28,28,0,1,1,28-28A28,28,0,0,1,128,160Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-pine : 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='M32,192l56-72H48L128,16l80,104H168l56,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M230.31,187.09,184.36,128H208a8,8,0,0,0,6.34-12.88l-80-104a8,8,0,0,0-12.68,0l-80,104A8,8,0,0,0,48,128H71.64L25.69,187.09A8,8,0,0,0,32,200h88v40a8,8,0,0,0,16,0V200h88a8,8,0,0,0,6.31-12.91ZM48.36,184l46-59.09A8,8,0,0,0,88,112H64.25L128,29.12,191.75,112H168a8,8,0,0,0-6.31,12.91L207.64,184Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-tree : 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,127.82c.09,33.94-28.41,63.3-62.34,64.16a63.72,63.72,0,0,1-41.66-14,63.71,63.71,0,0,1-41.65,14c-33.93-.86-62.44-30.22-62.35-64.16a64,64,0,0,1,40.13-59.2,68,68,0,0,1,127.74,0A64,64,0,0,1,232,127.82Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M198.1,62.59a76,76,0,0,0-140.2,0A71.71,71.71,0,0,0,16,127.8C15.9,166,48,199,86.14,200A72.22,72.22,0,0,0,120,192.47V232a8,8,0,0,0,16,0V192.47A72.17,72.17,0,0,0,168,200l1.82,0C208,199,240.11,166,240,127.8A71.71,71.71,0,0,0,198.1,62.59ZM169.45,184a56.08,56.08,0,0,1-33.45-10v-41l43.58-21.78a8,8,0,1,0-7.16-14.32L136,115.06V88a8,8,0,0,0-16,0v51.06L83.58,120.84a8,8,0,1,0-7.16,14.32L120,156.94v17a56,56,0,0,1-33.45,10C56.9,183.23,31.92,157.52,32,127.84A55.79,55.79,0,0,1,67.11,76a8,8,0,0,0,4.53-4.67,60,60,0,0,1,112.72,0A8,8,0,0,0,188.89,76,55.79,55.79,0,0,1,224,127.84C224.08,157.52,199.1,183.23,169.45,184Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-cat : 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,48v88c0,48.6-43,88-96,88s-96-39.4-96-88V48a8,8,0,0,1,13.66-5.66L67.6,67.6h0a102.87,102.87,0,0,1,120.8,0h0l21.94-25.24A8,8,0,0,1,224,48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M96,140a12,12,0,1,1-12-12A12,12,0,0,1,96,140Zm76-12a12,12,0,1,0,12,12A12,12,0,0,0,172,128Zm60-80v88c0,52.93-46.65,96-104,96S24,188.93,24,136V48A16,16,0,0,1,51.31,36.69c.14.14.26.27.38.41L69,57a111.22,111.22,0,0,1,118.1,0L204.31,37.1c.12-.14.24-.27.38-.41A16,16,0,0,1,232,48Zm-16,0-21.56,24.8A8,8,0,0,1,183.63,74,88.86,88.86,0,0,0,168,64.75V88a8,8,0,1,1-16,0V59.05a97.43,97.43,0,0,0-16-2.72V88a8,8,0,1,1-16,0V56.33a97.43,97.43,0,0,0-16,2.72V88a8,8,0,1,1-16,0V64.75A88.86,88.86,0,0,0,72.37,74a8,8,0,0,1-10.81-1.17L40,48v88c0,41.66,35.21,76,80,79.67V195.31l-13.66-13.66a8,8,0,0,1,11.32-11.31L128,180.68l10.34-10.34a8,8,0,0,1,11.32,11.31L136,195.31v20.36c44.79-3.69,80-38,80-79.67Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-dog : 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,120.38V184a32,32,0,0,1-32,32H80a32,32,0,0,1-32-32V120.38L104,48h48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.71,125l-16.42-88a16,16,0,0,0-19.61-12.58l-.31.09L150.85,40h-45.7L52.63,24.56l-.31-.09A16,16,0,0,0,32.71,37.05L16.29,125a15.77,15.77,0,0,0,9.12,17.52A16.26,16.26,0,0,0,32.12,144,15.48,15.48,0,0,0,40,141.84V184a40,40,0,0,0,40,40h96a40,40,0,0,0,40-40V141.85a15.5,15.5,0,0,0,7.87,2.16,16.31,16.31,0,0,0,6.72-1.47A15.77,15.77,0,0,0,239.71,125ZM32,128h0L48.43,40,90.5,52.37Zm144,80H136V195.31l13.66-13.65a8,8,0,0,0-11.32-11.32L128,180.69l-10.34-10.35a8,8,0,0,0-11.32,11.32L120,195.31V208H80a24,24,0,0,1-24-24V123.11L107.93,56h40.14L200,123.11V184A24,24,0,0,1,176,208Zm48-80L165.5,52.37,207.57,40,224,128ZM104,140a12,12,0,1,1-12-12A12,12,0,0,1,104,140Zm72,0a12,12,0,1,1-12-12A12,12,0,0,1,176,140Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-brush : 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,32c0,32.81-31.64,67.43-58.64,91.05A84.39,84.39,0,0,0,133,90.64C156.57,63.64,191.19,32,224,32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-apple : 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,73.52Zm0,99.26c-16.79-11.53-24-30.87-24-52.78,0-18.3,11.68-34.81,24-46.48C204.53,62.66,185,56,168,56a63.72,63.72,0,0,0-40,14h0A63.71,63.71,0,0,0,88.88,56C52,55.5,23.06,86.3,24,123.19a119.62,119.62,0,0,0,37.65,84.12A32,32,0,0,0,83.6,216h87.7a31.75,31.75,0,0,0,23.26-10c15.85-17,21.44-33.2,21.44-33.2Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M223.3,169.59a8.07,8.07,0,0,0-2.8-3.4C203.53,154.53,200,134.64,200,120c0-17.67,13.47-33.06,21.5-40.67a8,8,0,0,0,0-11.62C208.82,55.74,187.82,48,168,48a72.23,72.23,0,0,0-40,12.13,71.56,71.56,0,0,0-90.71,9.09A74.63,74.63,0,0,0,16,123.4a127,127,0,0,0,40.14,89.73A39.8,39.8,0,0,0,83.59,224h87.68a39.84,39.84,0,0,0,29.12-12.57,125,125,0,0,0,17.82-24.6C225.23,174,224.33,172,223.3,169.59Zm-34.63,30.94a23.76,23.76,0,0,1-17.4,7.47H83.59a23.82,23.82,0,0,1-16.44-6.51A111.14,111.14,0,0,1,32,123,58.5,58.5,0,0,1,48.65,80.47,54.81,54.81,0,0,1,88,64h.78A55.45,55.45,0,0,1,123,76.28a8,8,0,0,0,10,0A55.39,55.39,0,0,1,168,64a70.64,70.64,0,0,1,36,10.35c-13,14.52-20,30.47-20,45.65,0,23.77,7.64,42.73,22.18,55.3A105.52,105.52,0,0,1,188.67,200.53ZM128.23,30A40,40,0,0,1,167,0h1a8,8,0,0,1,0,16h-1a24,24,0,0,0-23.24,18,8,8,0,1,1-15.5-4Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-pencil : 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.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-gaming : 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.86,207.57a28,28,0,0,1-24.66-7.77L150.09,152H172a51.94,51.94,0,0,0,51.2-61h0l16.36,84.17A28,28,0,0,1,216.86,207.57Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M176,112H152a8,8,0,0,1,0-16h24a8,8,0,0,1,0,16ZM104,96H96V88a8,8,0,0,0-16,0v8H72a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0v-8h8a8,8,0,0,0,0-16ZM241.48,200.65a36,36,0,0,1-54.94,4.81c-.12-.12-.24-.24-.35-.37L146.48,160h-37L69.81,205.09l-.35.37A36.08,36.08,0,0,1,44,216,36,36,0,0,1,8.56,173.75a.68.68,0,0,1,0-.14L24.93,89.52A59.88,59.88,0,0,1,83.89,40H172a60.08,60.08,0,0,1,59,49.25c0,.06,0,.12,0,.18l16.37,84.17a.68.68,0,0,1,0,.14A35.74,35.74,0,0,1,241.48,200.65ZM172,144a44,44,0,0,0,0-88H83.89A43.9,43.9,0,0,0,40.68,92.37l0,.13L24.3,176.59A20,20,0,0,0,58,194.3l41.92-47.59a8,8,0,0,1,6-2.71Zm59.7,32.59-8.74-45A60,60,0,0,1,172,160h-4.2L198,194.31a20.09,20.09,0,0,0,17.46,5.39,20,20,0,0,0,16.23-23.11Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-cube : 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,129.09V232a8,8,0,0,1-3.84-1l-88-48.16a8,8,0,0,1-4.16-7V80.2a8,8,0,0,1,.7-3.27Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-football : 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='M65.17,108.08l-33,25.34c-.1-1.8-.15-3.6-.15-5.42A95.61,95.61,0,0,1,53.23,67.78ZM46.92,179.42a96.12,96.12,0,0,0,57,41.52l-14.7-41.52Zm105.21,41.52a96.12,96.12,0,0,0,57-41.52H166.83ZM202.77,67.78l-11.94,40.3,33,25.34c.1-1.8.15-3.6.15-5.42A95.61,95.61,0,0,0,202.77,67.78Zm-38.52-28.7a96.34,96.34,0,0,0-72.5,0L128,64ZM152.72,160,168,115.5,128,88,88,115.5,103.28,160Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm76.52,147.42H170.9l-9.26-12.76,12.63-36.78,15-4.89,26.24,20.13A87.38,87.38,0,0,1,204.52,171.42Zm-164-34.3L66.71,117l15,4.89,12.63,36.78L85.1,171.42H51.48A87.38,87.38,0,0,1,40.47,137.12Zm10-50.64,5.51,18.6L40.71,116.77A87.33,87.33,0,0,1,50.43,86.48ZM109,152,97.54,118.65,128,97.71l30.46,20.94L147,152Zm91.07-46.92,5.51-18.6a87.33,87.33,0,0,1,9.72,30.29Zm-6.2-35.38-9.51,32.08-15.07,4.89L136,83.79V68.21l29.09-20A88.58,88.58,0,0,1,193.86,69.7ZM146.07,41.87,128,54.29,109.93,41.87a88.24,88.24,0,0,1,36.14,0ZM90.91,48.21l29.09,20V83.79L86.72,106.67l-15.07-4.89L62.14,69.7A88.58,88.58,0,0,1,90.91,48.21ZM63.15,187.42H83.52l7.17,20.27A88.4,88.4,0,0,1,63.15,187.42ZM110,214.13,98.12,180.71,107.35,168h41.3l9.23,12.71-11.83,33.42a88,88,0,0,1-36.1,0Zm55.36-6.44,7.17-20.27h20.37A88.4,88.4,0,0,1,165.31,207.69Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-pride : 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,112v16a96,96,0,0,1-192,0V88a24,24,0,0,1,48,0V64a24,24,0,0,1,48,0,24,24,0,0,1,48,0V88h24A24,24,0,0,1,224,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M200,80H184V64a32,32,0,0,0-56-21.13A32,32,0,0,0,72.21,60.42,32,32,0,0,0,24,88v40a104,104,0,0,0,208,0V112A32,32,0,0,0,200,80ZM152,48a16,16,0,0,1,16,16V80H136V64A16,16,0,0,1,152,48ZM88,64a16,16,0,0,1,32,0v40a16,16,0,0,1-32,0ZM40,88a16,16,0,0,1,32,0v16a16,16,0,0,1-32,0Zm176,40a88,88,0,0,1-175.92,3.75A31.93,31.93,0,0,0,80,125.13a31.93,31.93,0,0,0,44.58,3.35,32.21,32.21,0,0,0,11.8,11.44A47.88,47.88,0,0,0,120,176a8,8,0,0,0,16,0,32,32,0,0,1,32-32,8,8,0,0,0,0-16H152a16,16,0,0,1-16-16V96h64a16,16,0,0,1,16,16Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-vote : 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,48V208a8,8,0,0,1-8,8H64L40,192V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,48V208a16,16,0,0,1-16,16H136a8,8,0,0,1,0-16h72V48H48v96a8,8,0,0,1-16,0V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM125.66,154.34a8,8,0,0,0-11.32,0L64,204.69,45.66,186.34a8,8,0,0,0-11.32,11.32l24,24a8,8,0,0,0,11.32,0l56-56A8,8,0,0,0,125.66,154.34Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-code : 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='M240,128l-48,40H64L16,128,64,88H192Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-handshake : 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='M200,152l-40,40L96,176,40,136,72.68,70.63,128,56l55.32,14.63L183.6,72H144L98.34,116.29a8,8,0,0,0,1.38,12.42C117.23,139.9,141,139.13,160,120Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l55.07-55.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41ZM41.53,64,62,74.22,36.43,125.27,16,115.06Zm116,119.13L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm62-57.87-25.52-51L214.47,64,240,115.06Zm-87.75,92.67a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-science : 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='M210.26,210.26c-17.23,17.23-68-5.63-113.46-51.06S28.51,63,45.74,45.74s68,5.63,113.46,51.06S227.49,193,210.26,210.26Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M196.12,128c24.65-34.61,37.22-70.38,19.74-87.86S162.61,35.23,128,59.88C93.39,35.23,57.62,22.66,40.14,40.14S35.23,93.39,59.88,128c-24.65,34.61-37.22,70.38-19.74,87.86h0c5.63,5.63,13.15,8.14,21.91,8.14,18.48,0,42.48-11.17,66-27.88C151.47,212.83,175.47,224,194,224c8.76,0,16.29-2.52,21.91-8.14h0C233.34,198.38,220.77,162.61,196.12,128Zm8.43-76.55c7.64,7.64,2.48,32.4-18.52,63.28a300.33,300.33,0,0,0-21.19-23.57A300.33,300.33,0,0,0,141.27,70C172.15,49,196.91,43.8,204.55,51.45ZM176.29,128a289.14,289.14,0,0,1-22.76,25.53A289.14,289.14,0,0,1,128,176.29a289.14,289.14,0,0,1-25.53-22.76A289.14,289.14,0,0,1,79.71,128,298.62,298.62,0,0,1,128,79.71a289.14,289.14,0,0,1,25.53,22.76A289.14,289.14,0,0,1,176.29,128ZM51.45,51.45c2.2-2.21,5.83-3.35,10.62-3.35C73.89,48.1,92.76,55,114.72,70A304,304,0,0,0,91.16,91.16,300.33,300.33,0,0,0,70,114.73C49,83.85,43.81,59.09,51.45,51.45Zm0,153.1C43.81,196.91,49,172.15,70,141.27a300.33,300.33,0,0,0,21.19,23.57A304.18,304.18,0,0,0,114.73,186C83.85,207,59.09,212.2,51.45,204.55Zm153.1,0c-7.64,7.65-32.4,2.48-63.28-18.52a304.18,304.18,0,0,0,23.57-21.19A300.33,300.33,0,0,0,186,141.27C207,172.15,212.19,196.91,204.55,204.55ZM140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z'%3E%3C/path%3E%3C/svg%3E" ) ;
--icon-book : 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,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z'%3E%3C/path%3E%3C/svg%3E" ) ;
2024-07-23 20:26:28 +09:00
--icon-olympics : url ( " data : image / svg + xml , % 3C % 3Fxml version = '1.0' encoding = 'UTF-8' standalone = 'no' % 3F % 3E % 3C ! -- Created with Inkscape ( http : / / www . inkscape . org / ) -- % 3E % 3Csvg xmlns : dc = 'http://purl.org/dc/elements/1.1/' xmlns : cc = 'http://creativecommons.org/ns%23' xmlns : rdf = 'http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns : svg = 'http://www.w3.org/2000/svg' xmlns = 'http://www.w3.org/2000/svg' version = '1.1' width = '1020' height = '495' id = 'svg2' % 3E % 3Cmetadata id = 'metadata28' % 3E % 3Crdf : RDF % 3E % 3Ccc : Work rdf : about = '' % 3E % 3Cdc : format % 3Eimage / svg + xml % 3C / dc : format % 3E % 3Cdc : type rdf : resource = 'http://purl.org/dc/dcmitype/StillImage' / % 3E % 3Cdc : title % 3E % 3C / dc : title % 3E % 3C / cc : Work % 3E % 3C / rdf : RDF % 3E % 3C / metadata % 3E % 3Cdefs id = 'defs4' / % 3E % 3Cg transform = 'matrix(5.7658033,0,0,5.7658033,-216.55705,-1629.403)' id = 'g3854' style = 'fill:%23d05c8a;fill-opacity:1' % 3E % 3Cpath d = 'm 77.998457,338.04465 c 9.719843,-3.74035 16.634311,-13.17634 16.634311,-24.1989 0,-14.29201 -11.62467,-25.91668 -25.916678,-25.91668 -14.292008,0 -25.95413,11.62467 -25.95413,25.91668 0,14.29201 11.662122,25.91668 25.95413,25.91668 0.54665,0 1.089397,-0.017 1.627741,-0.0505 -0.212847,-1.56081 -0.14221,-4.09918 0.0472,-5.10887 -0.552337,0.0437 -1.110922,0.0659 -1.674938,0.0659 -11.526965,0 -20.823227,-9.29627 -20.823227,-20.82323 0,-11.52696 9.296262,-20.82323 20.823227,-20.82323 l 0,4e-5 c 11.526959,0 20.785775,9.29627 20.785775,20.82323 0,7.91769 -4.368408,14.78291 -10.83969,18.30588 -0.315166,1.3712 -0.711622,4.31209 -0.663721,5.893 z' id = 'path3016' style = 'fill:%23d05c8a;fill-opacity:1' / % 3E % 3Cpath d = 'm 118.12057,340.00218 c -1.34862,10.20474 -10.02005,18.04148 -20.603518,18.04148 -11.52697,0 -20.82323,-9.29627 -20.82323,-20.82323 0,-7.8992 4.36561,-14.75085 10.82304,-18.28114 0.45237,-1.7753 0.72684,-3.69514 0.65576,-5.89574 -9.70007,3.75525 -16.6097,13.17589 -16.6097,24.17688 0,14.29201 11.66212,25.91668 25.95413,25.91668 13.026538,0 23.837178,-9.65722 25.649488,-22.18923 -1.32835,-0.0348 -4.11703,-0.60321 -5.04597,-0.9457 z m 4.98685,-6.89716 c -1.97707,-12.3428 -12.69857,-21.80127 -25.590368,-21.80127 -0.5666,0 -1.12907,0.0183 -1.68684,0.0542 0.31178,1.20255 0.3074,3.96583 -0.0166,5.10739 l 0,6e-5 c 0.5617,-0.0452 1.1298,-0.0682 1.70343,-0.0682 9.546428,0 17.537168,6.37619 20.001238,15.11504 1.68318,0.64085 3.49015,1.20604 5.58913,1.59278 z' id = 'path3790' style = 'fill:%23d05c8a;fill-opacity:1' / % 3E % 3Cpath d = 'm 157.72746,317.82769 c 1.60373,10.29047 9.36704,19.0414 20.1411,21.36875 13.96979,3.01767 27.78686,-5.89044 30.80453,-19.86023 3.01768,-13.9698 -5.88253,-27.82347 -19.85233,-30.84115 -13.96979,-3.01767 -27.79477,5.92705 -30.81244,19.89685 -0.11542,0.53432 -0.2134,1.06841 -0.29433,1.6017 1.57057,0.12151 4.03679,0.72651 4.98373,1.12484 0.0739,-0.54911 0.17015,-1.09979 0.28924,-1.65109 2.43385,-11.26709 13.48338,-18.39092 24.75047,-15.95707 11.26708,2.43385 18.39092,13.48338 15.95706,24.75047 l -3e-5,-1e-5 c -2.43385,11.26709 -13.47548,18.35431 -24.74257,15.92046 -7.73918,-1.67178 -13.52726,-7.39124 -15.60443,-14.46049 -1.27374,-0.59757 -4.06462,-1.60605 -5.62,-1.89303 z' id = 'path3842' style = 'fill:%23d05c8a;fill-opacity:1' / % 3E % 3Cpath d = 'm 105.40431,311.064 c 1.34862,-10.20474 10.02005,-18.04148 20.60351,-18.04148 11.52697,0 20.82323,9.29627 20.82323,20.82323 0,7.8992 -4.36561,14.75085 -10.82304,18.28114 -0.45237,1.7753 -0.72684,3.69514 -0.65576,5.89574 9.70007,-3.75525 16.6097,-13.17589 16.6097,-24.17688 0,-14.29201 -11.66212,-25.91668 -25.95413,-25.91668 -13.02653,0 -23.83717,9.65722 -25.64948,22.18923 1.32835,0.0348 4.11703,0.60321 5.04597,0.9457 z m -4.98685,6.89716 c 1.97707,12.3428 12.69857,21.80127 25.59036,21.80127 0.5666,0 1.12907,-0.0183 1.68684,-0.0542 -0.31178,-1.20255 -0.3074,-3.96583 0.0166,-5.10739 l 0,-6e-5 c -0.5617,0.0452 -1.1298,0.0682 -1.70343,0.0682 -9.54642,0 -17.53716,-6.37619 -20.00123,-15.11504 -1.68318,-0.64085 -3.49015,-1.20604 -5.58913,-1.59278 z' id = 'path3850' style = 'fill:%23d05c8a;fill-opacity:1' / % 3E % 3Cpath d = ' m 175 . 43867 , 340 . 00219 c -1 . 34862 , 10 . 20474 -10 . 02005 , 18 . 04148 -20 . 60351 , 18 . 04148 -11 . 52697 , 0 -20 . 82323 , -9 . 29627 -20 . 82323 , -20 . 82323
2023-11-21 08:22:43 +09:00
}
}
body . app-body {
background-color : var ( --color-bg ) ;
color : var ( --color-fg ) ;
font-family : ui-rounded , "mastodon-font-sans-serif" , sans-serif ;
}
2023-12-22 01:33:25 +09:00
. layout-single-column . ui :: before {
2023-12-21 22:46:59 +09:00
content : " " ;
display : block ;
2023-12-22 01:33:25 +09:00
height : 16px ;
2023-12-21 22:46:59 +09:00
position : fixed ;
top : 0 ;
left : 0 ;
right : 0 ;
z-index : 1 ;
background-color : var ( --color-bg ) ;
background-image : var ( --gradient-bg ) ;
}
. app-body . columns-area__panels__pane {
z-index : 1 ;
}
2024-01-14 08:05:41 +09:00
:: selection {
color : var ( --color-accent-fg ) ;
background-color : var ( --color-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* 🖱️ Scrollbars */
: root : has ( . app-body ) * :: -webkit-scrollbar-track {
background-color : var ( --color-bg ) ;
padding : 2px ;
}
: root : has ( . app-body ) * :: -webkit-scrollbar-thumb {
background-color : var ( --color-accent ) ;
2024-02-27 23:39:01 +09:00
border-radius : 8px ;
2023-11-21 08:22:43 +09:00
opacity : . 4 ;
2024-08-24 20:22:08 +09:00
box-shadow : none ;
2023-11-21 08:22:43 +09:00
}
: 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 ) {
: root : has ( . app-body ) * :: -webkit-scrollbar {
display : none ;
}
}
2024-02-27 23:39:01 +09:00
: root ,
* {
scrollbar-color : var ( --color-accent ) var ( --color-bg ) ;
scrollbar-width : thin ;
}
2023-11-21 08:22:43 +09:00
2023-12-20 03:56:25 +09:00
. app-body {
--dropdown-shadow :
0 20px 25px -5px rgba ( 0 , 0 , 0 , . 15 ) ,
0 8px 10px -6px rgba ( 0 , 0 , 0 , . 15 ) ;
2024-03-21 03:16:54 +09:00
--safe-area-bottom : env ( safe-area-inset-bottom ) ;
}
@ media ( display-mode : standalone ) {
. app-body {
--safe-area-bottom : max ( env ( safe-area-inset-bottom ) , 30px ) ;
}
2023-12-20 03:56:25 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body . loading-bar {
background-color : var ( --color-accent ) ;
}
2024-02-12 05:36:29 +09:00
. app-body . circular-progress {
color : var ( --color-accent ) ;
}
. app-body . redirect__logo {
background-image : var ( --logo ) ;
background-size : 100 % ;
background-position : center ;
background-repeat : no-repeat ;
}
. app-body . redirect__logo img {
opacity : 0 ;
}
. app-body . redirect__message a {
color : var ( --color-accent ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . getting-started ,
. app-body . regeneration-indicator ,
. app-body . audio-player ,
. 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 . report-dialog-modal__textarea ,
. app-body . search__input ,
. app-body . setting-text ,
. app-body . compose-form . compose-form__buttons-wrapper ,
. app-body . about__section__body {
border : 0 ;
}
. app-body . column-inline-form ,
. app-body . column > . scrollable ,
. app-body . getting-started ,
. app-body . regeneration-indicator {
background : transparent ;
}
2024-03-12 23:13:34 +09:00
: root {
--background-filter : none ;
}
2023-11-21 08:22:43 +09:00
. app-body . account__avatar img {
border-radius : 50 % ;
}
2023-12-21 05:01:09 +09:00
/* Keyframes */
@ keyframes bounce {
0 % {
transform : scale ( 1 ) ;
}
50 % {
transform : scale ( 1 . 6 ) ;
}
75 % {
transform : scale ( . 8 ) ;
}
100 % {
transform : scale ( 1 ) ;
}
}
@ keyframes bounce-sml {
0 % {
transform : scale ( 1 ) ;
}
50 % {
2024-02-19 23:43:08 +09:00
transform : scale ( 1 . 25 ) ;
2023-12-21 05:01:09 +09:00
}
100 % {
transform : scale ( 1 ) ;
}
}
@ keyframes bounce-vertical {
0 % {
transform : translateY ( 0 ) ;
}
50 % {
2023-12-23 23:01:25 +09:00
transform : translateY ( -30 % ) ;
2023-12-21 05:01:09 +09:00
}
75 % {
transform : translateY ( 20 % ) ;
}
100 % {
transform : translate ( 0 ) ;
}
}
@ keyframes launch {
0 % {
transform : translate ( 0 ) ;
opacity : 0 ;
}
5 % {
transform : translate ( 0 ) ;
opacity : 1 ;
}
50 % {
2023-12-26 00:56:26 +09:00
transform : translate ( 200 % , -200 % ) ;
2023-12-21 05:01:09 +09:00
opacity : 0 ;
}
80 % {
2023-12-26 00:56:26 +09:00
transform : translate ( 200 % , -200 % ) ;
2023-12-21 05:01:09 +09:00
opacity : 0 ;
}
85 % {
transform : translate ( -20 % , 20 % ) ;
opacity : 0 ;
}
100 % {
transform : translate ( 0 ) ;
opacity : 1 ;
}
}
@ keyframes fadein {
from {
opacity : 0 ;
2024-08-03 08:41:47 +09:00
transform : translateY ( -10 % ) ;
2023-12-21 05:01:09 +09:00
}
to {
opacity : 1 ;
2024-08-03 08:41:47 +09:00
transform : translateY ( 0 ) ;
2023-12-21 05:01:09 +09:00
}
}
@ keyframes fadein-short {
from {
transform : translate ( 0 , -10px ) ;
opacity : 0 ;
}
to {
transform : translate ( 0 , 0 ) ;
opacity : 1 ;
}
}
@ keyframes slowin {
0 % {
opacity : 0 ;
}
20 % {
opacity : 0 ;
}
100 % {
opacity : 1 ;
}
}
2023-12-22 01:33:25 +09:00
@ keyframes rotate-bounce {
0 % {
transform : rotate ( 0 ) scale ( 1 ) ;
}
60 % {
2023-12-22 10:26:11 +09:00
transform : rotate ( 80deg ) scale ( 1 . 2 ) ;
2023-12-22 01:33:25 +09:00
}
100 % {
2023-12-22 10:26:11 +09:00
transform : rotate ( 60deg ) scale ( 1 . 1 ) ;
2023-12-22 01:33:25 +09:00
}
}
2023-12-26 01:21:17 +09:00
@ keyframes bell-ring {
0 % {
transform : rotate ( 0 ) ;
}
40 % {
transform : rotate ( 15deg ) ;
}
70 % {
transform : rotate ( -15deg ) ;
}
100 % {
transform : rotate ( 0 ) ;
}
}
2023-12-21 05:01:09 +09:00
2023-11-21 08:22:43 +09:00
/* Rordered layout */
. app-body . columns-area__panels__pane--navigational {
order : 1 ;
}
. app-body . columns-area__panels__main {
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 {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-content-bg ) ;
2023-12-29 05:57:58 +09:00
border-right : 1px solid var ( --color-lines ) ;
border-left : 1px solid var ( --color-lines ) ;
border-top : 0 ;
border-bottom : 0 ;
border-radius : 0 ;
2023-12-29 05:57:58 +09:00
padding-bottom : 20px ;
2023-11-21 08:22:43 +09:00
}
. app-body . dismissable-banner + . scrollable {
border-top-left-radius : 0 ;
border-top-right-radius : 0 ;
}
2023-12-29 05:57:58 +09:00
. app-body . columns-area--mobile {
padding : 0 ;
}
2023-12-20 07:12:46 +09:00
. app-body . columns-area__panels {
gap : 10px ;
}
2023-12-29 05:57:58 +09:00
@ media screen and ( max-width : 889px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . scrollable ,
. app-body : not ( . layout-multiple-columns ) . column > . scrollable {
2023-12-29 05:57:58 +09:00
border-right : 0 ;
border-left : 0 ;
}
}
2023-12-20 07:12:46 +09:00
@ media screen and ( min-width : 1175px ) {
2023-12-20 11:21:37 +09:00
. app-body . columns-area__panels__main {
2023-12-20 07:12:46 +09:00
max-width : 580px ;
2024-01-13 01:55:52 +09:00
padding : 0 ;
2023-12-20 07:12:46 +09:00
}
}
2023-12-20 11:21:37 +09:00
@ media screen and ( max-width : 1174px ) {
. app-body . columns-area__panels {
gap : 0 ;
}
}
2023-11-21 08:22:43 +09:00
/ * * ️ ⃣ Icons
-------- * /
2024-01-13 08:08:58 +09:00
. app-body . icon {
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 ;
}
2024-01-13 23:59:49 +09:00
. app-body . detailed-status__meta . icon ,
. app-body . dropdown-button . icon {
2024-01-13 08:08:58 +09:00
height : 15px ;
width : 15px ;
}
. app-body . icon-button {
padding : 2px ;
}
2023-11-21 08:22:43 +09:00
. app-body
: is (
. icon-bookmark ,
. icon-star ,
. icon-retweet ,
2024-07-18 00:06:52 +09:00
. icon-repeat ,
2023-11-21 08:22:43 +09:00
. icon-reply ,
. icon-reply-all ,
. icon-tasks ,
. icon-quote-right ,
. icon-home ,
2024-07-18 00:06:52 +09:00
. icon-notifications-active ,
2023-11-21 08:22:43 +09:00
. icon-hashtag ,
2024-03-01 02:05:28 +09:00
. icon-explore ,
2023-11-21 08:22:43 +09:00
. icon-search ,
. icon-times-circle ,
. icon-bell ,
. icon-at ,
. icon-bookmarks ,
. icon-list-ul ,
. column-link . icon-cog ,
. drawer__tab . icon-cog ,
. icon-bars ,
2024-07-18 00:06:52 +09:00
. icon-bar-chart-4-bars ,
2023-12-20 03:56:25 +09:00
. navigation-bar . icon-close ,
2023-11-21 08:22:43 +09:00
. icon-user-plus ,
2024-08-24 05:19:07 +09:00
. icon-person-add ,
2023-11-21 08:22:43 +09:00
. icon-user ,
. icon-users ,
. icon-bullhorn ,
. icon-sliders ,
. icon-globe ,
. icon-unlock ,
. icon-lock ,
. icon-paperclip ,
2024-08-24 05:19:07 +09:00
. icon-photo-library ,
2023-12-20 03:56:25 +09:00
. compose-form__buttons . icon-button : nth-child ( 3 ) . icon ,
. emoji-picker-dropdown > . icon-button . icon ,
2023-11-21 08:22:43 +09:00
. 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 ,
2023-11-25 05:46:06 +09:00
. icon-check : is ( . verified__mark , . verified-badge__mark ) ,
. follow-request-banner . button . icon-check ,
2023-11-25 05:48:25 +09:00
. account--panel button . icon-check ,
2023-12-18 20:53:35 +09:00
. account__relationship . icon-check ,
2023-11-21 08:22:43 +09:00
. status__action-bar . icon-close ,
. detailed-status__action-bar . icon-close ,
. account__header__tabs__buttons . icon-close ,
2023-11-25 01:07:08 +09:00
. icon-sign-out ,
2023-12-20 10:24:15 +09:00
. account__header__tabs__buttons . icon-undefined ,
. icon-eye-slash ,
2024-02-20 01:25:03 +09:00
. icon-eye ,
2024-03-13 08:23:52 +09:00
. icon-eraser ,
2024-03-13 08:39:05 +09:00
. icon-pencil ,
2024-03-15 23:49:13 +09:00
. app-form__header-input . icon ,
2024-03-17 01:10:48 +09:00
. account__domain-pill__popout__parts__icon . icon ,
. safety-action-modal__bullet-points__icon . icon
2023-11-21 08:22:43 +09:00
)
path {
2023-12-29 05:57:58 +09:00
display : none ;
2023-11-21 08:22:43 +09:00
}
. app-body
: is (
. icon-bookmark ,
. icon-star ,
. icon-retweet ,
2024-07-18 00:06:52 +09:00
. icon-repeat ,
2023-11-21 08:22:43 +09:00
. icon-reply ,
. icon-reply-all ,
. icon-tasks ,
. icon-quote-right ,
. icon-home ,
2024-07-18 00:06:52 +09:00
. icon-notifications-active ,
2023-11-21 08:22:43 +09:00
. icon-hashtag ,
2024-03-01 02:05:28 +09:00
. icon-explore ,
2023-11-21 08:22:43 +09:00
. icon-search ,
. icon-times-circle ,
. icon-bell ,
. icon-at ,
. icon-bookmarks ,
. icon-list-ul ,
. column-link . icon-cog ,
. drawer__tab . icon-cog ,
. icon-bars ,
2024-07-18 00:06:52 +09:00
. icon-bar-chart-4-bars ,
2023-12-20 03:56:25 +09:00
. navigation-bar . icon-close ,
2023-11-21 08:22:43 +09:00
. icon-user-plus ,
2024-08-24 05:19:07 +09:00
. icon-person-add ,
2023-11-21 08:22:43 +09:00
. icon-user ,
. icon-users ,
. icon-bullhorn ,
. icon-sliders ,
. icon-globe ,
. icon-unlock ,
. icon-lock ,
. icon-paperclip ,
2024-08-24 05:19:07 +09:00
. icon-photo-library ,
2023-12-20 03:56:25 +09:00
. compose-form__buttons . icon-button : nth-child ( 3 ) . icon ,
. emoji-picker-dropdown > . icon-button . icon ,
2023-11-21 08:22:43 +09:00
. 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 ,
2023-11-25 05:46:06 +09:00
. icon-check : is ( . verified__mark , . verified-badge__mark ) ,
. follow-request-banner . button . icon-check ,
2023-11-25 05:48:25 +09:00
. account--panel button . icon-check ,
2023-12-18 20:53:35 +09:00
. account__relationship . icon-check ,
2023-11-21 08:22:43 +09:00
. status__action-bar . icon-close ,
. detailed-status__action-bar . icon-close ,
. account__header__tabs__buttons . icon-close ,
2023-11-25 01:07:08 +09:00
. icon-sign-out ,
2023-12-20 10:24:15 +09:00
. account__header__tabs__buttons . icon-undefined ,
. icon-eye-slash ,
2024-02-20 01:25:03 +09:00
. icon-eye ,
2024-03-13 08:23:52 +09:00
. icon-eraser ,
2024-03-13 08:39:05 +09:00
. icon-pencil ,
2024-03-15 23:49:13 +09:00
. app-form__header-input . icon ,
2024-03-17 01:10:48 +09:00
. account__domain-pill__popout__parts__icon . icon ,
. safety-action-modal__bullet-points__icon . icon
2023-11-21 08:22:43 +09:00
) {
2023-12-29 05:57:58 +09:00
background-repeat : no-repeat ;
background-size : 100 % ;
background-position : center ;
2023-11-21 08:22:43 +09:00
}
/* Bookmark */
. 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 ,
2024-07-18 00:06:52 +09:00
. app-body . notification__message . icon-star ,
. app-body . notification-group--favourite . icon-star {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-star-active ) ;
}
. app-body . detailed-status__link . icon-star {
background-image : var ( --icon-star ) ;
2024-01-24 02:34:12 +09:00
margin : 0 ;
2023-11-21 08:22:43 +09:00
}
2023-11-25 00:52:46 +09:00
. app-body . media-modal__overlay . icon-star {
2023-12-15 07:02:06 +09:00
background-image : var ( --icon-star-accent ) ;
2023-11-25 00:52:46 +09:00
}
2023-11-21 08:22:43 +09:00
/* 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-active ) ;
}
2024-07-18 00:06:52 +09:00
. app-body . status__prepend-icon . icon-retweet ,
. app-body . notification-group--reblog . icon-repeat {
2024-03-09 00:58:01 +09:00
background-image : var ( --icon-boost-accent-active ) ;
}
2024-03-13 08:17:33 +09:00
. app-body . notification__message . icon-retweet {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-boost-active ) ;
}
. app-body . detailed-status__link . icon-retweet {
background-image : var ( --icon-boost ) ;
2024-01-24 02:34:12 +09:00
margin : 0 ;
2023-11-21 08:22:43 +09:00
}
. app-body
button . icon-button : is (
2024-08-03 08:41:47 +09:00
. reblogPrivate : where ( . disabled , [ disabled ] ) ,
. reblogPrivate : where ( . disabled , [ disabled ] ) : hover ,
. disabled ,
2023-11-21 08:22:43 +09:00
. disabled : hover
)
. icon-retweet {
2023-12-29 05:57:58 +09:00
background-image : var ( --icon-boost-accent ) ;
opacity : . 2 ;
pointer-events : none ;
2023-11-21 08:22:43 +09:00
}
. app-body . boost-modal__action-bar . icon-retweet {
background-image : var ( --icon-boost-accent ) ;
vertical-align : middle ;
}
2023-11-25 00:52:46 +09:00
. app-body . media-modal__overlay . icon-retweet {
2023-12-15 07:02:06 +09:00
background-image : var ( --icon-boost-accent ) ;
2023-11-25 00:52:46 +09:00
}
2023-11-21 08:22:43 +09:00
/* 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 ) ;
}
2023-11-25 00:52:46 +09:00
. app-body . media-modal__overlay : is ( . icon-reply , . icon-reply-all ) {
2023-12-15 07:02:06 +09:00
background-image : var ( --icon-reply-accent ) ;
2023-11-25 00:52:46 +09:00
}
2024-07-18 00:06:52 +09:00
. app-body . status__prepend-icon . icon-reply ,
. app-body . notification-ungrouped__header__icon . icon-reply {
background-image : var ( --icon-reply-accent-active ) ;
2024-03-12 04:24:50 +09:00
}
2023-11-21 08:22:43 +09:00
/* 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 */
2024-07-18 00:06:52 +09:00
. app-body . icon-tasks ,
. app-body . icon-bar-chart-4-bars {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-poll ) ;
}
2024-07-18 00:06:52 +09:00
. app-body . notification__message . icon-tasks ,
. app-body . notification-ungrouped . icon-bar-chart-4-bars {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-poll-accent ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . compose-form . icon-tasks {
background-image : var ( --icon-poll-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* Post icon */
. app-body . icon-quote-right {
background-image : var ( --icon-post ) ;
}
/* Navigation panel icons */
. app-body . column-link__icon {
2024-02-15 00:31:27 +09:00
transform : scale ( 1 . 45 ) ;
2023-11-21 08:22:43 +09:00
margin-right : 7px ;
2024-02-15 00:31:27 +09:00
margin-left : 3px ;
2023-11-21 08:22:43 +09:00
}
/* Home icon */
. app-body . icon-home {
background-image : var ( --icon-home ) ;
}
2024-02-19 21:47:04 +09:00
. app-body . column-link . active . icon-home {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-home-active ) ;
}
2024-02-19 22:15:36 +09:00
. layout-multiple-columns . column-link . icon-home {
background-image : var ( --icon-home-accent ) ;
}
2024-07-18 00:06:52 +09:00
. app-body . notification__message . icon-home ,
. app-body . notification-ungrouped . icon-notifications-active {
2023-11-21 08:22:43 +09:00
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 ) ;
}
2024-02-19 21:47:04 +09:00
. app-body . column-link . active . icon-globe {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-globe-active ) ;
}
2024-02-19 22:15:36 +09:00
. layout-multiple-columns . column-link . icon-globe {
background-image : var ( --icon-globe-accent ) ;
}
2024-03-01 02:05:28 +09:00
/* Hashtag icon */
. app-body . icon-hashtag {
background-image : var ( --icon-hashtag ) ;
}
/* Explore icon */
. app-body . icon-explore ,
. app-body . column-link . icon-explore {
2023-12-20 06:07:00 +09:00
background-image : var ( --icon-explore ) ;
2023-11-21 08:22:43 +09:00
}
2024-03-01 02:05:28 +09:00
. app-body . column-link . active . icon-explore {
2023-12-20 06:07:00 +09:00
background-image : var ( --icon-explore-active ) ;
2023-11-21 08:22:43 +09:00
}
2024-03-01 02:05:28 +09:00
. layout-multiple-columns . column-link . icon-explore {
2024-02-19 22:15:36 +09:00
background-image : var ( --icon-explore-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* 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 {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-search-column-link ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . icon-times-circle {
2023-12-29 05:57:58 +09:00
background-image : var ( --icon-erase ) ;
2023-11-21 08:22:43 +09:00
}
/* Notifications icon */
2024-02-19 21:47:04 +09:00
. app-body . column-link . icon-bell ,
. app-body . column-header__icon . icon-bell {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-bell ) ;
}
2024-02-19 21:47:04 +09:00
. app-body . column-link . active . icon-bell {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-bell-active ) ;
}
/* Direct messages icon */
2024-02-19 21:47:04 +09:00
. app-body . column-link . icon-at ,
. app-body . column-header__icon . icon-at {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-direct-messages ) ;
}
2024-02-19 21:47:04 +09:00
. app-body . column-link . active . icon-at {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-direct-messages-active ) ;
}
2024-02-19 22:15:36 +09:00
. layout-multiple-columns . column-link . icon-at {
background-image : var ( --icon-direct-messages-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* Bookmarks icon */
2024-02-19 21:47:04 +09:00
. app-body . icon-bookmarks ,
. app-body . column-header__icon . icon-bookmarks {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-bookmark-column-link ) ;
}
2024-02-19 21:47:04 +09:00
. app-body . column-link . active . icon-bookmarks {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-bookmark-column-link-active ) ;
2024-02-19 22:15:36 +09:00
}
. layout-multiple-columns . column-link . icon-bookmarks {
background-image : var ( --icon-bookmark-column-link-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* Favorites icon */
2024-02-19 21:47:04 +09:00
. app-body . column-link . icon-star ,
. app-body . column-header__icon . icon-star {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-star-column-link ) ;
}
2024-02-19 21:47:04 +09:00
. app-body . column-link . active . icon-star {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-star-column-link-active ) ;
}
2024-02-19 22:15:36 +09:00
. layout-multiple-columns . column-link . icon-star {
background-image : var ( --icon-star-column-link-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* Lists icon */
2024-02-19 21:47:04 +09:00
. app-body . icon-list-ul ,
. app-body . column-header__icon . icon-list-ul {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-list ) ;
}
2024-02-19 21:47:04 +09:00
. app-body . column-link . active . icon-list-ul {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-list-active ) ;
}
2024-02-19 22:15:36 +09:00
. layout-multiple-columns . column-link . icon-list-ul {
background-image : var ( --icon-list-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* Settings icon */
. app-body . column-link . icon-cog {
background-image : var ( --icon-settings ) ;
}
2024-02-19 22:15:36 +09:00
. layout-multiple-columns . column-link . icon-cog {
background-image : var ( --icon-settings-accent ) ;
}
2024-02-19 21:47:04 +09:00
/* 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 {
2024-02-19 22:32:35 +09:00
background-image : var ( --icon-ellipsis-column-link-active ) ;
2024-02-19 21:47:04 +09:00
}
2023-11-21 08:22:43 +09:00
/* Profile settings */
2023-12-20 03:56:25 +09:00
. app-body . navigation-bar . icon-button . icon-bars {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-gear ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . navigation-bar . icon-button . active . icon-close {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-gear-active ) ;
}
2023-12-22 01:33:25 +09:00
. app-body . navigation-bar . icon-button : is ( : active , : focus , : hover ) {
background-color : transparent ;
}
. app-body . navigation-bar . icon-button . active {
2023-12-22 10:26:11 +09:00
transform : rotate ( 60deg ) scale ( 1 . 1 ) ;
2023-12-22 01:33:25 +09:00
animation : rotate-bounce . 4s 1 ;
}
2023-11-21 08:22:43 +09:00
/* Follow user icon */
. app-body . icon-user-plus ,
2024-08-24 05:19:07 +09:00
. app-body . icon-user ,
. app-body . icon-person-add {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-user-plus-accent ) ;
}
. app-body . active . icon-user-plus {
background-image : var ( --icon-user-plus ) ;
}
2024-02-19 21:47:04 +09:00
. 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 ) ;
2023-11-21 08:22:43 +09:00
}
2024-02-19 22:15:36 +09:00
. layout-multiple-columns . column-link . icon-user-plus {
background-image : var ( --icon-user-plus-column-link-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* 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 ) ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
/* Post visibility icons */
. app-body . icon-globe {
background-image : var ( --icon-globe-visibility ) ;
}
2024-01-26 06:53:14 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . icon-unlock {
background-image : var ( --icon-unlock ) ;
}
2024-01-26 06:53:14 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . icon-lock {
background-image : var ( --icon-lock ) ;
}
2024-01-26 06:53:14 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . icon-at {
background-image : var ( --icon-at ) ;
}
2024-01-26 06:53:14 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
/* Other icons */
. app-body . icon-paperclip {
2024-08-24 05:19:07 +09:00
background-image : var ( --icon-paperclip-accent ) ;
2023-11-21 08:22:43 +09:00
}
2024-08-24 05:19:07 +09:00
. app-body . icon-photo-library {
background-image : var ( --icon-paperclip ) ;
2023-12-20 03:56:25 +09:00
}
. 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 ) ;
}
2023-11-25 05:46:06 +09:00
. app-body . icon-check : is ( . verified__mark , . verified-badge__mark ) {
2023-11-21 08:22:43 +09:00
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 {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-bell-accent ) ;
2023-11-21 08:22:43 +09:00
}
. 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 {
2023-12-29 05:57:58 +09:00
background-image : var ( --icon-reject ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2023-11-25 01:50:42 +09:00
. app-body . account__header__tabs__buttons . icon-undefined {
2023-11-25 01:07:08 +09:00
background-image : var ( --icon-share ) ;
}
2023-11-27 01:08:07 +09:00
. 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 ) ;
}
2023-12-20 10:24:15 +09:00
. app-body . icon-eye-slash {
background-image : var ( --icon-eye-shut ) ;
}
2023-12-27 05:16:21 +09:00
. app-body . icon-button . overlayed . icon-eye-slash {
background-image : var ( --icon-eye-shut-inv ) ;
}
2024-02-27 00:56:44 +09:00
. app-body . player-button . icon-eye-slash {
filter : brightness ( 100 ) ;
}
2023-12-20 10:24:15 +09:00
. app-body . icon-eye {
background-image : var ( --icon-eye-open ) ;
}
2024-02-20 01:25:03 +09:00
. app-body . icon-eraser {
background-image : var ( --icon-broom ) ;
}
2024-03-13 08:23:52 +09:00
. app-body . icon-pencil {
background-image : var ( --icon-edited-accent ) ;
}
2023-11-21 08:22:43 +09:00
2024-02-19 21:47:04 +09:00
@ media screen and ( min-width : 1173px ) {
2023-11-21 08:22:43 +09:00
. app-body . navigation-panel . column-link . icon-home {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-home-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-home {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-home-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-bell {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-bell-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-bell {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-bell-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
2024-03-01 02:05:28 +09:00
. app-body . navigation-panel . column-link . icon-explore {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-explore-accent ) ;
2023-11-21 08:22:43 +09:00
}
2024-03-01 02:05:28 +09:00
. app-body . navigation-panel . column-link . active . icon-explore {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-explore-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-search {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-search-column-link-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-search {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-search-column-link-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-globe {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-globe-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-globe {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-globe-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-at {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-direct-messages-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-at {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-direct-messages-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-bookmarks {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-bookmark-column-link-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-bookmarks {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-bookmark-column-link-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-star {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-star-column-link-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-star {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-star-column-link-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-list-ul {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-list-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-list-ul {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-list-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-cog {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-settings-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . icon-user-plus {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-user-plus-column-link-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-panel . column-link . active . icon-user-plus {
2024-02-19 21:47:04 +09:00
background-image : var ( --icon-user-plus-column-link-accent-active ) ;
2023-11-21 08:22:43 +09:00
}
}
2023-12-01 23:50:30 +09:00
/* Links */
2024-08-25 03:47:29 +09:00
. app-body a . status-link : not ( . mention , . hashtag ) ,
2023-12-01 23:50:30 +09:00
. app-body a : is ( . status-link , . mention , . navigation-bar__profile-edit ) span ,
. app-body : is ( . account__header__fields , . account__header__content ) a span {
text-decoration-line : underline ;
text-decoration-color : var ( --color-accent-bg ) ;
text-decoration-thickness : 2px ;
text-underline-offset : 2px ;
}
2024-08-25 04:13:24 +09:00
. app-body a . status-link : not ( . mention , . hashtag ) : is ( : active , : focus , : hover ) ,
2023-12-01 23:50:30 +09:00
. 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 )
2024-02-28 05:49:01 +09:00
. display-name strong ,
2024-03-19 03:13:55 +09:00
. app-body . status__prepend . status__display-name : is ( : active , : focus , : hover ) strong ,
2024-08-18 21:55:44 +09:00
. 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 {
2023-12-20 11:07:55 +09:00
text-decoration-line : underline ;
text-decoration-color : currentColor ;
text-decoration-thickness : 2px ;
text-underline-offset : 2px ;
2023-12-01 23:50:30 +09:00
}
2024-08-25 03:47:29 +09:00
. app-body a . mention : is ( : active , : focus , : hover ) ,
2023-12-20 11:07:55 +09:00
. 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 ) {
2023-12-01 23:50:30 +09:00
text-decoration : none ! important ;
}
. app-body . account__header__fields . verified a span {
display : inline ;
}
2023-11-21 08:22:43 +09:00
/ * 📝 Compose panel
---------------- * /
. app-body . compose-form {
2023-12-20 03:56:25 +09:00
gap : 0 ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-bar {
border-radius : 8px 8px 0 0 ;
2024-01-13 23:59:49 +09:00
padding : 23px 15px 15px 18px ;
2023-12-30 06:15:44 +09:00
position : relative ;
2024-01-13 23:59:49 +09:00
background-color : var ( --color-content-bg ) ;
2023-11-21 08:22:43 +09:00
border-top : 1px solid var ( --color-lines ) ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
2023-12-21 02:57:00 +09:00
transition :
background-color . 2s ,
border-color . 2s ;
2023-11-21 08:22:43 +09:00
}
. app-body . navigation-bar strong {
color : var ( --color-content-fg ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . navigation-bar . account {
background-color : transparent ;
padding-left : 0 ;
padding-top : 0 ;
border-left : 0 ;
border-right : 0 ;
2024-02-28 07:57:34 +09:00
border-bottom : 0 ;
2023-12-20 03:56:25 +09:00
}
2024-01-23 21:16:54 +09:00
. app-body . navigation-bar . account__display-name {
line-height : 20px ;
2024-01-24 02:34:12 +09:00
overflow : visible ;
}
. 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 ;
2024-01-23 21:16:54 +09:00
}
2023-12-20 03:56:25 +09:00
. app-body . compose-form__highlightable {
border-top : 0 ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
border-bottom-left-radius : 8px ;
border-bottom-right-radius : 8px ;
border-top-left-radius : 0 ;
border-top-right-radius : 0 ;
background-color : var ( --color-content-bg ) ;
transition : all . 2s ;
2023-11-21 08:22:43 +09:00
}
2023-12-20 03:56:25 +09:00
. 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 {
2023-11-21 08:22:43 +09:00
border-color : var ( --color-accent ) ;
}
2023-12-21 02:57:00 +09:00
. app-body . compose-form . reply-indicator + . navigation-bar ,
2024-01-13 23:59:49 +09:00
. app-body . compose-form . navigation-bar : has ( ~ . compose-form__highlightable : focus-within ) ,
. app-body . reply-indicator {
background-color : var ( --color-content-bg ) ;
2023-12-21 02:57:00 +09:00
}
2023-12-20 03:56:25 +09:00
. app-body . compose-form__highlightable . active {
box-shadow : none ;
}
2024-08-03 08:41:47 +09:00
. app-body . compose-form
2023-11-21 08:22:43 +09:00
: is (
. autosuggest-textarea__suggestions ,
. autosuggest-textarea__textarea ,
. autosuggest-textarea__suggestions__item ,
. compose-form__modifiers
2023-12-20 03:56:25 +09:00
) {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
border : 0 ;
border-top : 0 ;
border-radius : 0 ;
2023-11-21 08:22:43 +09:00
}
. app-body . compose-form . autosuggest-textarea__textarea {
2024-03-13 19:52:35 +09:00
padding-inline-start : 20px ;
2023-11-21 08:22:43 +09:00
}
. app-body . compose-form . autosuggest-textarea__textarea :: placeholder {
font-size : 130 % ;
opacity : . 5 ;
}
2023-12-20 03:56:25 +09:00
. app-body . autosuggest-textarea__textarea :: placeholder ,
. app-body . autosuggest-account . display-name__html {
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg ) ;
}
2024-06-27 20:06:35 +09:00
. app-body . autosuggest-account . display-name__account ,
. app-body . hover-card . display-name__account ,
. app-body . hover-card . account-fields dl dt {
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg-muted ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . autosuggest-textarea__suggestions {
background-color : var ( --color-content-bg ) ;
border : 1px solid var ( --color-lines ) ;
2024-08-03 08:41:47 +09:00
box-shadow :
2023-12-20 03:56:25 +09:00
0 20px 25px -5px rgba ( 0 , 0 , 0 , . 25 ) ,
0 8px 10px -6px rgba ( 0 , 0 , 0 , . 25 ) ;
2024-02-12 00:09:19 +09:00
}
. app-body . autosuggest-textarea__suggestions__item {
color : var ( --color-content-fg ) ;
}
2023-12-20 03:56:25 +09:00
. 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 ) {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . autosuggest-textarea__suggestions ,
. app-body . autosuggest-textarea__suggestions__item : last-child {
border-bottom-left-radius : 8px ;
border-bottom-right-radius : 8px ;
2023-11-21 08:22:43 +09:00
}
2023-12-20 03:56:25 +09:00
. app-body . autosuggest-account . account__avatar {
border : 0 ;
}
. app-body . dropdown-button {
2023-12-20 08:33:40 +09:00
border-radius : 8px ;
2023-12-20 03:56:25 +09:00
border-color : var ( --color-accent-bg ) ;
color : var ( --color-accent ) ;
2023-12-20 21:14:49 +09:00
padding : 5px 8px ;
2023-12-20 10:24:15 +09:00
transition : border-color . 2s ;
}
. app-body . dropdown-button : hover {
border-color : var ( --color-accent ) ;
2023-12-20 03:56:25 +09:00
}
2024-08-19 22:21:50 +09:00
. app-body . dropdown-button . active ,
. app-body . column-settings . dropdown-button . active {
2023-12-20 03:56:25 +09:00
border-color : var ( --color-accent ) ;
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
}
2024-08-19 22:21:50 +09:00
. app-body . column-settings . dropdown-button {
background-color : var ( --color-accent-bg ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . reply-indicator {
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
border-top : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
border-bottom : 0 ;
2023-12-20 03:56:25 +09:00
border-radius : 8px 8px 0 0 ;
2023-11-21 08:22:43 +09:00
box-shadow : none ;
margin : 0 ;
2023-12-20 03:56:25 +09:00
padding : 18px 15px 0 18px ;
transition : all . 2s ;
}
2024-01-13 23:59:49 +09:00
. app-body . reply-indicator p {
overflow : hidden ;
}
2023-12-20 03:56:25 +09:00
. app-body . reply-indicator__line : before {
background-color : var ( --color-accent ) ;
2023-12-30 06:15:44 +09:00
z-index : 1 ;
2023-12-20 03:56:25 +09:00
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 ;
}
2024-01-13 23:59:49 +09:00
2024-03-13 19:52:35 +09:00
. app-body . edit-indicator {
background-color : var ( --color-content-secondary-bg ) ;
border-bottom : 0 ;
gap : 2px ;
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 ) ;
}
2024-01-13 23:59:49 +09:00
. 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 ) ;
}
2024-02-27 22:47:45 +09:00
. app-body . navigation-bar . icon-button : not ( : has ( . icon-bars ) , . active ) : active {
background-color : var ( --color-accent-bg ) ;
}
2024-01-13 23:59:49 +09:00
2023-12-20 03:56:25 +09:00
. app-body . compose-form . compose-form__warning {
background-color : var ( --color-accent-bg ) ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
border-radius : 0 ;
2023-12-20 03:56:25 +09:00
box-shadow : none ;
transition : border-color . 2s ;
2023-11-21 08:22:43 +09:00
}
. app-body . compose-form . compose-form__warning ,
. app-body . simple_form . recommended ,
. app-body . compose-form . compose-form__warning ,
. app-body . compose-form . compose-form__warning a ,
. app-body . reply-indicator__content a ,
. app-body . navigation-bar__profile-edit {
color : var ( --color-accent ) ;
}
2023-12-17 04:30:16 +09:00
. app-body . simple_form . recommended {
border-color : var ( --color-lines ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . compose-form__sensitive-button . icon-button : hover {
background-color : transparent ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body . compose-form__sensitive-button input [ type = checkbox ] : checked {
background-color : var ( --color-accent ) ;
border-color : var ( --color-accent ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . spoiler-input__border {
display : none ;
}
2023-11-21 08:22:43 +09:00
. app-body . compose-form . autosuggest-input {
box-sizing : border-box ;
2023-11-27 01:14:31 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body . compose-form . spoiler-input . spoiler-input--visible {
margin-bottom : 0 ;
height : auto ;
background-color : var ( --color-content-bg ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . compose-form . spoiler-input . autosuggest-input {
background-color : var ( --color-content-bg ) ;
2024-01-23 22:27:48 +09:00
border-bottom : 0 ;
2023-12-20 03:56:25 +09:00
padding : 5px ;
}
2023-11-21 08:22:43 +09:00
. app-body . compose-form . spoiler-input__input {
2023-12-20 22:16:02 +09:00
background-image : var ( --icon-warning ) ;
background-position : 10px center ;
background-repeat : no-repeat ;
background-size : 20px ;
2023-11-21 08:22:43 +09:00
background-color : var ( --color-accent-bg ) ;
color : var ( --color-accent ) ;
2023-12-20 03:56:25 +09:00
border : 1px solid var ( --color-accent-lines ) ;
2023-11-21 08:22:43 +09:00
margin-bottom : 0 ;
2023-12-11 04:59:26 +09:00
border-radius : 8px ;
2023-12-20 22:16:02 +09:00
padding : 8px 15px 8px 36px ;
font-weight : 500 ;
2023-12-21 00:00:03 +09:00
transition : all . 2s ;
2023-11-21 08:22:43 +09:00
}
. app-body . compose-form . spoiler-input__input : focus {
2023-12-20 03:56:25 +09:00
border-color : var ( --color-accent ) ;
2023-12-21 00:00:03 +09:00
background-color : var ( --color-content-bg ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . display-name {
color : var ( --color-content-fg ) ;
}
2024-01-30 08:31:32 +09:00
. app-body . compose-form__upload__thumbnail {
outline-offset : -1px ;
outline : 1px solid var ( --color-lines-translucent ) ;
}
2023-11-21 08:22:43 +09:00
. 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 ) ;
}
@ media screen and ( max-width : 1174px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . compose-form {
2023-12-20 05:34:08 +09:00
padding : 15px ;
2023-11-21 08:22:43 +09:00
}
}
2023-12-11 05:10:19 +09:00
. app-body . compose-form . attachment-list . compact . icon {
color : var ( --color-content-fg-muted ) ;
vertical-align : bottom ;
}
2023-12-20 03:56:25 +09:00
. app-body . character-counter {
color : var ( --color-content-fg ) ;
2023-12-22 10:17:52 +09:00
opacity : 0 ;
font-size : 15px ;
2024-03-12 04:24:50 +09:00
font-weight : 500 ;
2023-12-22 10:17:52 +09:00
transition :
opacity . 3s ,
margin-right . 3s ;
transform-origin : right center ;
margin-right : -10px ;
2023-11-21 08:22:43 +09:00
}
2023-12-22 10:17:52 +09:00
. 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 ;
}
2023-12-20 08:33:40 +09:00
. compose-form__footer {
2024-01-13 23:59:49 +09:00
gap : 10px ;
padding : 0 ;
}
. app-body . compose-form__dropdowns {
2023-12-20 08:33:40 +09:00
gap : 6px ;
2024-01-13 23:59:49 +09:00
padding : 0 12px ;
}
. app-body . compose-form__actions {
border-radius : 0 0 8px 8px ;
padding : 10px 12px ;
background-color : var ( --color-content-secondary-bg ) ;
2023-12-20 08:33:40 +09:00
}
2023-12-20 03:56:25 +09:00
. 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 ) ;
2023-12-20 22:16:02 +09:00
width : 20px ;
2023-12-20 03:56:25 +09:00
}
. app-body . compose-form__buttons . icon-button : is ( . active , . active : hover ) {
background-color : var ( --color-accent ) ;
}
2023-12-20 08:33:40 +09:00
. app-body . compose-form__submit {
2023-12-20 22:16:02 +09:00
max-width : 40px ;
2023-12-20 08:33:40 +09:00
}
2023-12-20 03:56:25 +09:00
. app-body . compose-form__submit . button {
2023-12-20 22:16:02 +09:00
height : 40px ;
max-width : 40px ;
2023-12-20 08:33:40 +09:00
color : transparent ;
background-size : 60 % ;
background-position : center ;
background-repeat : no-repeat ;
2023-12-20 22:16:02 +09:00
background-image : var ( --icon-send-inv ) ;
background-color : var ( --color-accent ) ;
transition :
transform . 2s ,
2024-01-13 23:59:49 +09:00
background-color . 2s ,
border-color . 2s ;
2023-12-20 03:56:25 +09:00
}
. app-body . compose-form__submit . button : active {
transform : scale ( . 95 ) ;
2023-11-21 08:22:43 +09:00
}
2023-12-20 22:16:02 +09:00
. app-body . compose-form : has ( . autosuggest-textarea__textarea : placeholder-shown ) . compose-form__submit . button {
background-image : var ( --icon-send ) ;
2024-01-13 23:59:49 +09:00
background-color : var ( --color-accent-bg ) ;
2023-12-20 22:16:02 +09:00
}
. app-body . compose-form : not ( : has ( . autosuggest-textarea__textarea : placeholder-shown ) ) . compose-form__submit {
2024-03-12 04:24:50 +09:00
animation : bounce-sml . 2s ease-out 1 ;
2023-12-20 22:16:02 +09:00
}
2023-11-21 08:22:43 +09:00
2024-01-13 23:59:49 +09:00
. 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 ) ;
-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 ) ;
}
2023-12-21 00:00:03 +09:00
/* Poll composer */
2023-12-20 03:56:25 +09:00
. app-body . compose-form__poll {
gap : 3px ;
}
. app-body . compose-form__poll . poll__option {
margin-bottom : 2px ;
2023-11-21 08:22:43 +09:00
}
2023-12-20 03:56:25 +09:00
. app-body . poll__option input [ type = text ] {
border-radius : 8px ;
2023-12-29 03:22:47 +09:00
padding : 7px 12px ;
2023-12-20 03:56:25 +09:00
border : 1px solid var ( --color-lines ) ;
2023-12-20 04:34:28 +09:00
background-color : var ( --color-content-bg ) ;
2023-12-22 10:17:52 +09:00
color : var ( --color-content-fg ) ;
2023-12-21 02:57:00 +09:00
transition : all . 2s ;
2023-12-20 03:56:25 +09:00
}
. app-body . poll__option input [ type = text ] : focus {
border-color : var ( --color-accent ) ;
}
. app-body . compose-form__poll__footer {
margin-top : 5px ;
2023-12-21 00:00:03 +09:00
padding-inline-start : 12px ;
gap : 6px ;
margin-bottom : -10px ;
2023-11-21 08:22:43 +09:00
}
2023-12-20 04:34:28 +09:00
. app-body . compose-form__poll__select__label {
2023-12-21 00:00:03 +09:00
display : none ;
2023-12-20 04:34:28 +09:00
}
2023-12-20 03:56:25 +09:00
. app-body . compose-form__poll__select__value {
2023-12-21 00:00:03 +09:00
background-position : 8px center ;
background-size : 15px ;
background-repeat : no-repeat ;
2023-12-20 03:56:25 +09:00
color : var ( --color-accent ) ;
2023-12-21 00:00:03 +09:00
padding : 4px 8px 4px 27px ;
border-radius : 8px ;
border : 1px solid var ( --color-accent-bg ) ;
font-size : 12px ;
line-height : 16px ;
transition :
background-color . 2s ,
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 ) ;
2023-12-20 03:56:25 +09:00
}
2023-12-21 00:00:03 +09:00
2023-12-20 03:56:25 +09:00
. app-body . compose-form__poll__footer__sep {
2023-12-21 00:00:03 +09:00
display : none ;
}
. app-body . compose-form__poll . poll__option . empty : not ( : focus-within ) {
opacity : . 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 ) ;
border : 1px solid var ( --color-lines ) ;
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 ) ;
}
/* Polls in posts */
. app-body . muted . poll {
color : var ( --color-content-fg-muted ) ;
}
. app-body . poll__footer {
2023-12-26 04:38:04 +09:00
color : var ( --color-content-fg-muted ) ;
2023-12-27 05:44:47 +09:00
display : flex ;
flex-flow : wrap ;
gap : 5px ;
align-items : center ;
2023-12-26 04:38:04 +09:00
box-sizing : border-box ;
2023-12-27 05:44:47 +09:00
font-size : 12px ;
2023-12-26 04:38:04 +09:00
padding : 0 ;
2023-12-21 00:00:03 +09:00
}
. app-body . poll__link {
color : var ( --color-accent ) ;
text-decoration : none ;
2023-12-27 05:44:47 +09:00
box-sizing : border-box ;
padding : 0 8px ;
2023-12-26 04:38:04 +09:00
border : 1px solid var ( --color-accent-bg ) ;
border-radius : 8px ;
font-size : 12px ;
font-weight : 500 ;
2023-12-27 05:44:47 +09:00
height : 32px ;
2023-12-26 04:38:04 +09:00
transition : all . 3s ;
2023-12-21 00:00:03 +09:00
}
2023-12-26 04:38:04 +09:00
. app-body . poll__link : hover {
border-color : var ( --color-accent ) ;
}
. app-body . poll__link : active {
background-color : var ( --color-accent-bg ) ;
2023-12-21 00:00:03 +09:00
}
. app-body . poll__option . editable . poll__input {
display : none ;
}
2023-12-26 04:38:04 +09:00
. app-body . poll li {
2024-01-02 00:11:09 +09:00
margin-bottom : 4px ;
2023-12-26 04:38:04 +09:00
position : relative ;
border-radius : 8px ;
overflow : hidden ;
}
. app-body : is ( . status , . detailed-status ) . poll__option {
border : 1px solid var ( --color-lines ) ;
color : var ( --color-content-fg ) ;
font-weight : 500 ;
padding : 8px ;
border-radius : 8px ;
transition : all . 2s ;
position : relative ;
z-index : 1 ;
2023-12-26 09:17:06 +09:00
align-items : center ;
2023-12-26 04:38:04 +09:00
}
. 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 ) {
2023-12-21 00:00:03 +09:00
border-color : var ( --color-accent ) ;
background-color : var ( --color-accent-bg ) ;
2023-12-26 04:38:04 +09:00
color : var ( --color-accent ) ;
2023-12-21 00:00:03 +09:00
}
2023-12-26 04:38:04 +09:00
. app-body . poll__option . selectable . poll__input : not ( . active ) {
border-width : 0 ;
outline-width : 0 ! important ;
background-color : var ( --color-lines ) ;
transition :
background . 2s ;
2023-12-21 00:00:03 +09:00
}
2023-12-26 04:38:04 +09:00
. 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 ;
2023-12-21 00:00:03 +09:00
}
. app-body . poll__footer . button . button-secondary {
2023-12-27 05:44:47 +09:00
box-sizing : border-box ;
2023-12-21 00:00:03 +09:00
padding : 0 16px ;
2023-12-27 05:44:47 +09:00
margin : 0 ;
2023-12-26 04:38:04 +09:00
height : 32px ;
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
float : inline-end ;
2023-12-21 00:00:03 +09:00
}
. app-body . poll__footer . button . button-secondary : hover {
2023-12-26 04:38:04 +09:00
background-color : var ( --color-accent-focus ) ;
2023-12-21 00:00:03 +09:00
color : var ( --color-accent-fg ) ;
2023-12-20 03:56:25 +09:00
}
2023-12-26 04:38:04 +09:00
. 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 ;
2023-12-26 09:17:06 +09:00
height : 20px ;
2023-12-26 04:38:04 +09:00
}
. 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 : . 5 ;
height : auto ;
border-radius : 8px 0 0 8px ;
position : absolute ;
top : 0 ;
bottom : 0 ;
z-index : 0 ;
}
2023-12-26 09:19:05 +09:00
@ media ( prefers-color-scheme : dark ) {
. app-body . poll__chart {
opacity : . 65 ;
}
}
2023-12-26 04:38:04 +09:00
. 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-bg ) ;
opacity : 1 ;
}
. app-body . poll__option : has ( . poll__voted ) {
border-color : var ( --color-accent ) ;
background-color : transparent ;
color : var ( --color-accent ) ;
}
. app-body . poll__option : has ( . poll__voted ) + . poll__chart {
background-color : var ( --color-accent-bg ) ;
opacity : 1 ;
}
. app-body . poll__option : has ( + . poll__chart . leading ) ,
. app-body . poll__option : has ( . poll__voted ) : has ( + . poll__chart . leading ) {
border-color : var ( --color-confirm-bg ) ;
color : var ( --color-content-fg ) ;
background-color : transparent ;
background-size : 20px ;
2023-12-26 09:17:06 +09:00
background-position : right 8px center ;
2023-12-26 04:38:04 +09:00
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 ) ;
}
2023-12-20 03:56:25 +09:00
/* Emoji picker */
. app-body . emoji-picker-dropdown > . icon-button . icon {
2023-11-21 08:22:43 +09:00
background-image : var ( --icon-emoji-accent ) ;
}
2023-12-20 03:56:25 +09:00
. app-body . emoji-picker-dropdown > . icon-button . active . icon {
background-image : var ( --icon-emoji-accent-inv ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . emoji-picker-dropdown__menu {
overflow : hidden ;
border-radius : 8px ;
background-color : var ( --color-content-bg ) ;
2023-12-11 05:32:32 +09:00
border : 1px solid var ( --color-lines ) ;
2024-01-23 22:22:28 +09:00
box-shadow : var ( --dropdown-shadow ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . emoji-mart {
display : block ;
}
. app-body . emoji-mart-bar : first-child {
2023-12-20 03:56:25 +09:00
background-color : var ( --color-content-secondary-bg ) ;
border-color : var ( --color-lines ) ;
padding-top : 2px ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2024-08-03 08:41:47 +09:00
/* Zoom on emojis on hover (in post content only */
2023-11-21 08:22:43 +09:00
. 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 ) ;
}
/ * 💬 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 {
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 ;
position : absolute ;
background-size : 20px ;
background-repeat : no-repeat ;
background-position : center ;
background-image : var ( --icon-translate-accent ) ;
border-radius : 8px ;
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 ) ;
background-size : 25px ;
width : 40px ;
height : 40px ;
right : 60px ;
2024-01-09 01:59:02 +09:00
bottom : 20px ;
}
@ media screen and ( max-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
) {
2024-02-12 05:36:29 +09:00
bottom : 12px ;
2023-11-21 08:22:43 +09:00
}
. app-body . status__content__translate-button : hover ,
. app-body . translate-button . link-button : hover {
background-color : var ( --color-accent-bg ) ;
}
2023-12-21 22:46:59 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
. 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 ,
2024-03-19 03:13:55 +09:00
. app-body . status__display-name strong ,
. app-body . notification-request__name__display-name strong {
2023-11-21 08:22:43 +09:00
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 {
2024-01-09 01:18:59 +09:00
--color-post-bg : var ( --color-content-bg ) ;
background-color : var ( --color-post-bg ) ;
2023-11-21 08:22:43 +09:00
padding : 13px 12px ;
position : relative ;
}
@ media screen and ( max-width : 889px ) {
. app-body . status__wrapper {
padding : 10px 8px ;
}
2024-07-18 00:06:52 +09:00
. app-body . notification-ungrouped . status__wrapper {
padding : 13px 12px ;
}
2023-11-21 08:22:43 +09:00
}
. 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 ;
2024-01-26 02:05:56 +09:00
width : calc ( 100 % + 56px ) ;
gap : 2px ;
margin-inline-start : -56px ;
2023-11-21 08:22:43 +09:00
padding : 0 ;
margin-bottom : 0 ;
line-height : 10px ;
align-items : start ;
}
. app-body . status__info . status__display-name {
2024-01-26 07:39:02 +09:00
overflow : visible ;
2023-11-21 08:22:43 +09:00
align-items : start ;
2024-08-23 23:22:58 +09:00
max-height : 22px ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
2023-12-20 11:07:55 +09:00
opacity : . 6 ;
2023-11-21 08:22:43 +09:00
}
. app-body . status__relative-time {
height : 22px ;
color : var ( --color-content-fg ) ;
2023-12-20 11:07:55 +09:00
display : flex ;
2024-01-26 07:39:02 +09:00
position : absolute ;
2024-07-18 00:06:52 +09:00
inset-inline-end : 23px ;
2024-01-26 07:39:02 +09:00
z-index : 1 ;
}
. app-body . status__relative-time > * {
opacity : . 6 ;
}
. app-body . status__relative-time :: before ,
. app-body . status__relative-time :: after {
position : absolute ;
content : " " ;
display : block ;
height : 100 % ;
z-index : -1 ;
2024-01-27 03:03:09 +09:00
transition : all . 3s ;
2024-01-26 07:39:02 +09:00
}
. app-body . status__relative-time :: before {
width : 20px ;
inset-inline-start : -20px ;
background : linear-gradient ( 90deg , transparent , var ( --color-post-bg ) ) ;
2024-03-13 08:59:06 +09:00
transition : all . 2s ;
2024-01-26 07:39:02 +09:00
}
. app-body . status__relative-time :: after {
inset-inline-start : 0 ;
inset-inline-end : 0 ;
background-color : var ( --color-post-bg ) ;
2023-12-20 11:07:55 +09:00
}
. app-body . status__relative-time time + abbr {
display : inline-block ;
width : 18px ;
height : 22px ;
order : 2 ;
margin : 0 4px 0 0 ;
background-size : 16px ;
background-repeat : no-repeat ;
background-position : center ;
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 ;
2023-11-21 08:22:43 +09:00
}
. app-body . status__avatar {
margin-bottom : -10px ;
z-index : 2 ;
2023-12-08 12:19:18 +09:00
border-radius : 50 % ;
2024-01-09 01:18:59 +09:00
outline : 6px solid var ( --color-post-bg ) ;
background-color : var ( --color-post-bg ) ;
2023-12-18 02:54:45 +09:00
transition : outline . 3s ;
2023-11-21 08:22:43 +09:00
}
2024-03-12 04:24:50 +09:00
. 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 ;
}
2023-11-21 08:22:43 +09:00
. app-body . reply-indicator__content ,
. app-body . status__content {
line-height : 19px ;
position : static ;
}
. app-body . e-content blockquote ,
. app-body . reply-indicator__content blockquote ,
. app-body . status__content__text blockquote {
2023-11-24 22:10:53 +09:00
color : var ( --color-content-fg ) ;
2023-11-21 08:22:43 +09:00
border-color : var ( --color-lines ) ;
2024-02-28 00:24:02 +09:00
font-style : italic ;
2023-12-01 23:50:30 +09:00
}
2023-11-21 08:22:43 +09:00
/* 📏 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 {
position : absolute ;
background-color : var ( --color-lines ) ;
height : 1px ;
2024-03-12 04:24:50 +09:00
width : calc ( 100 % - 78px ) ;
2023-11-21 08:22:43 +09:00
right : 0 ;
top : -1px ;
content : "" ;
opacity : . 7 ;
}
@ media screen and ( max-width : 889px ) {
. app-body . status :: before ,
. app-body . notification__message :: before {
width : calc ( 100 % - 73px ) ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
}
@ media ( prefers-color-scheme : dark ) {
. app-body . status :: before ,
. app-body . notification__message :: before {
opacity : 1 ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
}
/* Remove border between posts when applicable */
. app-body . notification . status :: before , /* no dividers on posts _inside_ notifications */
. app-body . account-timeline__header + article . status :: before , /* no divider above first post on profile pages */
. app-body . scrollable > div : first-child > . status :: before , /* no divider above first post in a column thread */
. app-body . scrollable > div : first-child > div : first-child . status :: before , /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */
. app-body . hashtag-header + article . status :: before ,
2024-01-13 02:44:56 +09:00
. app-body . search-results__section . search-results__section__header + div . status :: before ,
. app-body . dismissable-banner + article . status :: before {
2023-11-21 08:22:43 +09:00
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 {
display : none ;
}
}
/* 👥 Threaded replies */
. 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
) {
2023-12-29 05:57:58 +09:00
margin-left : 0 ;
width : auto ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
}
. 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 {
2023-12-08 12:19:18 +09:00
margin-inline-start : 6px ;
2023-11-21 08:22:43 +09:00
border-inline-start : 2px solid var ( --color-accent ) ;
-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 ) {
. app-body . status__line {
inset-inline-start : 35px ;
}
}
/* ⏺️ Posts when in focus */
. app-body
: is ( . status__wrapper . focusable , . detailed-status__wrapper . focusable ) : focus ,
. app-body
: is ( . focusable , . status__wrapper . focusable ) : focus
2024-07-18 00:06:52 +09:00
: is ( . detailed-status , . detailed-status__action-bar ) ,
2024-07-23 20:42:36 +09:00
. app-body . focusable : focus . notification-ungrouped__header ,
. app-body . focusable : focus . status__wrapper ,
2024-07-18 00:06:52 +09:00
. app-body . focusable : focus {
2023-12-29 05:57:58 +09:00
outline : 0 ;
2024-01-09 01:18:59 +09:00
--color-post-bg : var ( --color-content-bg-focus ) ;
background-color : var ( --color-post-bg ) ;
2023-11-21 08:22:43 +09:00
}
@ media screen and ( min-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 ) ,
2024-01-09 01:18:59 +09:00
. app-body . notification__message : has ( + div > . status__wrapper . status__content : hover ) ,
2024-07-23 20:42:36 +09:00
. app-body . status__wrapper : has ( . status__content : hover ) . status__avatar ,
. app-body . notification-ungrouped : has ( . status__wrapper . status__content : hover ) . notification-ungrouped__header {
2024-01-09 01:18:59 +09:00
--color-post-bg : var ( --color-content-bg-focus ) ;
2023-12-08 12:19:18 +09:00
}
}
. app-body : is ( . status__wrapper . focusable , . detailed-status__wrapper . focusable ) : focus . status__avatar {
2024-03-21 09:11:11 +09:00
outline : 6px solid var ( --color-post-bg ) ;
2023-11-21 08:22:43 +09:00
}
/* 👁️ Post detailed view */
. app-body . detailed-status__wrapper { /* Set full-width divider above and below a detailed post */
2024-01-09 01:18:59 +09:00
background-color : var ( --color-post-bg ) ;
2023-11-21 08:22:43 +09:00
border-top : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
2024-01-09 01:18:59 +09:00
padding-bottom : 20px ;
box-shadow :
inset 0 -5px var ( --color-content-secondary-bg ) ,
inset 0 -6px var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . scrollable > div : first-child > . detailed-status__wrapper { /* Detailed post is first in column */
border-top : 0 ;
}
. app-body . scrollable > div : last-child . detailed-status__wrapper : last-child { /* Detailed post is last in column */
border-bottom : 1px solid var ( --color-lines ) ;
2024-01-09 01:59:02 +09:00
padding-bottom : 12px ;
box-shadow : none ;
2023-11-21 08:22:43 +09:00
}
. app-body . scrollable > div : only-child . detailed-status__wrapper : last-child { /* Detailed post is the only post in column */
2024-01-09 01:18:59 +09:00
padding-bottom : 12px ;
2023-11-21 08:22:43 +09:00
box-shadow : none ;
}
@ media screen and ( max-width : 889px ) {
. app-body . detailed-status {
padding : 8px 8px 14px ;
}
}
2024-01-01 21:41:47 +09:00
. app-body . detailed-status . detailed-status__display-avatar . account__avatar {
2023-11-21 08:22:43 +09:00
width : 60px ! important ;
height : 60px ! important ;
}
. app-body . detailed-status . status__content {
line-height : 24px ;
}
2024-04-15 06:05:25 +09:00
. app-body . detailed-status {
padding-bottom : 8px ;
}
2023-11-21 08:22:43 +09:00
. 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 ;
}
2024-02-12 00:09:19 +09:00
. app-body : is ( . compose-panel , . compose-form ) . detailed-status__display-name strong {
2024-01-09 03:33:29 +09:00
font-size : 14px ;
}
. app-body . detailed-status__display-name . display-name__account {
2023-11-21 08:22:43 +09:00
opacity : . 7 ;
}
. app-body . detailed-status__meta {
2023-12-20 11:07:55 +09:00
color : var ( --color-content-fg ) ;
2024-01-24 02:34:12 +09:00
display : flex ;
2024-03-15 00:48:57 +09:00
align-items : start ;
2024-04-13 08:17:19 +09:00
flex-flow : row wrap ;
2024-03-15 01:26:19 +09:00
font-size : 13px ;
2024-03-15 00:48:57 +09:00
gap : 5px ;
2024-07-23 20:27:07 +09:00
border-top : 1px solid color-mix ( in srgb , var ( --color-lines ) , transparent 20 % ) ;
2024-04-15 06:05:25 +09:00
margin-top : 25px ;
2024-04-20 22:41:28 +09:00
padding-top : 12px ;
2024-04-22 22:55:49 +09:00
overflow : hidden ;
2024-04-22 22:57:21 +09:00
position : relative ;
2024-03-15 00:48:57 +09:00
}
2024-04-22 22:55:49 +09:00
. app-body . detailed-status__meta :: before {
position : absolute ;
content : " " ;
display : block ;
height : 100 % ;
z-index : 1 ;
width : 30px ;
inset-inline-end : 0 ;
background : linear-gradient ( 90deg , transparent , var ( --color-post-bg ) ) ;
2024-04-22 22:57:21 +09:00
}
2024-03-15 00:48:57 +09:00
. app-body . detailed-status__meta__line {
border-top : 0 ;
border-bottom : 0 ;
padding-top : 0 ;
padding-bottom : 0 ;
gap : 6px ;
position : relative ;
2024-04-14 09:03:00 +09:00
opacity : . 6 ;
2024-03-15 00:48:57 +09:00
}
. app-body . detailed-status__meta__line : first-child {
2024-03-21 09:18:54 +09:00
color : transparent ;
2024-03-15 00:48:57 +09:00
padding-left : 20px ;
2024-04-22 22:58:57 +09:00
padding-right : 5px ;
2024-03-21 09:18:54 +09:00
gap : 0 ;
2024-03-15 00:48:57 +09:00
}
. 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 ) ;
2024-04-22 22:55:49 +09:00
white-space : nowrap ;
2024-03-15 00:48:57 +09:00
}
2024-04-13 08:17:19 +09:00
. app-body . detailed-status__meta__line : last-child {
flex : 100 % ;
2024-04-15 06:05:25 +09:00
opacity : . 9 ;
2024-04-13 08:17:19 +09:00
}
2024-03-21 09:18:54 +09:00
. app-body . detailed-status__application :: before {
content : "\00B7\00A0" ;
margin-left : -3px ;
}
2024-03-15 00:48:57 +09:00
. 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 ;
}
. 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 ;
background-image : var ( --icon-edited ) ;
background-position : left center ;
background-repeat : no-repeat ;
background-size : 15px ;
2024-04-22 22:55:49 +09:00
text-align : start ;
2024-03-15 00:48:57 +09:00
}
. app-body . detailed-status__meta__line . dropdown-menu__text-button : is ( : hover ) {
text-decoration : none ;
2023-11-21 08:22:43 +09:00
}
. app-body . detailed-status__action-bar {
2024-03-15 00:48:57 +09:00
padding : 0 12px ;
2023-11-21 08:22:43 +09:00
justify-content : left ;
gap : 8px ;
2024-03-15 00:48:57 +09:00
width : auto ;
}
2024-03-15 01:26:19 +09:00
@ media screen and ( max-width : 889px ) {
. app-body . detailed-status__action-bar {
padding-left : 0 ;
padding-right : 0 ;
}
}
2024-03-15 00:48:57 +09:00
. app-body . detailed-status__button {
width : 40px ;
height : 40px ;
flex : unset ;
2023-11-21 08:22:43 +09:00
}
. app-body . detailed-status__action-bar-dropdown {
position : absolute ;
right : 18px ;
2024-03-15 00:48:57 +09:00
}
. app-body . detailed-status__meta . animated-number {
color : var ( --color-content-fg ) ;
2024-04-14 09:03:00 +09:00
font-weight : 700 ;
2024-03-15 00:48:57 +09:00
}
2024-04-13 08:17:19 +09:00
. app-body . detailed-status__meta . dropdown-menu__text-button . animated-number {
font-weight : 500 ;
}
2023-11-21 08:22:43 +09:00
. app-body . status__action-bar . animated-number {
color : var ( --color-accent ) ;
font-weight : 600 ;
}
. app-body . status__action-bar__button : has ( . icon-button__counter > . animated-number ) {
padding-left : 4px ;
padding-right : 4px ;
margin-right : 2px ;
}
. app-body
2023-12-15 07:02:06 +09:00
: is ( . status__action-bar , . detailed-status__action-bar , . picture-in-picture__footer )
2023-11-21 08:22:43 +09:00
. active
. icon-retweet + . icon-button__counter > . animated-number {
2024-08-20 03:08:32 +09:00
color : # FF4014 ;
2023-11-21 08:22:43 +09:00
}
. app-body
2023-12-15 07:02:06 +09:00
: is ( . status__action-bar , . detailed-status__action-bar , . picture-in-picture__footer )
2023-11-21 08:22:43 +09:00
. active
. icon-star + . icon-button__counter
> . animated-number {
2024-03-13 19:55:38 +09:00
color : # FFBF00 ;
2023-11-21 08:22:43 +09:00
}
. app-body article > . account {
padding : 16px ;
}
2023-11-25 07:37:49 +09:00
. app-body . account-timeline__header + article > . account {
border-top : 1px solid var ( --color-lines ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . detailed-status__link {
2024-01-24 02:34:12 +09:00
display : inline-flex ;
2023-11-21 08:22:43 +09:00
position : static ;
2024-01-24 02:34:12 +09:00
gap : 4px ;
}
2023-11-21 08:22:43 +09:00
/* Hashtag bar */
. app-body . hashtag-bar a ,
. app-body . hashtag-bar . link-button {
2024-07-24 23:05:30 +09:00
color : var ( --color-content-fg-muted ) ;
2023-11-21 08:22:43 +09:00
transition : all . 1s ;
}
2024-03-12 04:24:50 +09:00
. app-body . hashtag-bar a {
font-weight : 500 ;
}
2023-11-21 08:22:43 +09:00
. app-body . hashtag-bar . link-button {
margin-left : 3px ;
}
. app-body . hashtag-bar a {
2024-03-12 04:24:50 +09:00
background-color :
color-mix (
in srgb ,
2024-07-24 23:05:30 +09:00
var ( --color-content-fg ) ,
2024-03-12 04:24:50 +09:00
transparent 92 %
) ;
2023-11-21 08:22:43 +09:00
transition : all . 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 ;
}
/* ⭐ Action bar */
. app-body . status__action-bar {
justify-content : left ;
margin-top : 8px ;
gap : 8px ;
}
. app-body
2023-12-15 07:02:06 +09:00
: is ( . status__action-bar , . detailed-status__action-bar , . picture-in-picture__footer )
2023-11-21 08:22:43 +09:00
: is ( button , . status__action-bar__dropdown ) {
2023-12-29 05:57:58 +09:00
transition : all . 3s ;
2023-11-21 08:22:43 +09:00
}
2023-12-22 01:33:25 +09:00
. app-body . status__action-bar . icon-button : last-child {
2023-11-21 08:22:43 +09:00
position : absolute ;
right : 18px ;
}
2023-12-22 01:33:25 +09:00
2023-11-21 08:22:43 +09:00
. app-body . status__action-bar . icon-button . disabled {
pointer-events : none ;
}
. app-body
2023-12-15 07:02:06 +09:00
: is ( . status__action-bar , . detailed-status__action-bar , . picture-in-picture__footer )
2023-11-21 08:22:43 +09:00
. icon-button : is (
: active ,
. active : active ,
: focus ,
. active : focus
) {
2023-12-29 05:57:58 +09:00
background-color : transparent ;
2023-11-21 08:22:43 +09:00
}
2023-12-22 01:33:25 +09:00
. app-body . status__action-bar . icon-button : last-child : is ( . active , . active : active , . active : focus ) ,
. app-body . detailed-status__action-bar-dropdown . icon-button : is ( . active , . active : active , . active : focus ) {
background-color : var ( --color-accent ) ;
transform : scale ( . 9 ) ;
}
2023-12-15 07:02:06 +09:00
. app-body . icon-button . star-icon . deactivate > . icon-star ,
. app-body . icon-button . star-icon . activate > . icon-star { /* Disable default star spinning animation */
2023-11-21 08:22:43 +09:00
animation : none ;
}
2023-12-15 07:02:06 +09:00
. app-body
: is ( . status__action-bar , . detailed-status__action-bar , . picture-in-picture__footer )
. icon-button . star-icon . active
> . icon-star {
2023-12-29 05:57:58 +09:00
animation : bounce . 4s ease-out ! important ;
2023-11-21 08:22:43 +09:00
}
. app-body . status__action-bar . icon-button . reblogPrivate > . icon-retweet {
opacity : 1 ;
}
2023-12-15 07:02:06 +09:00
. app-body
: is ( . status__action-bar , . detailed-status__action-bar , . picture-in-picture__footer )
. icon-button . active > . icon-retweet {
2023-12-29 05:57:58 +09:00
animation : launch 1 . 2s ease-in 1 ! important ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
height : 32px ;
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 {
2024-03-12 04:24:50 +09:00
padding : 0 10px ;
margin-top : 3px ;
margin-bottom : 5px ;
margin-left : 66px ;
height : 29px ;
gap : 5px ;
border-radius : 50px ;
align-items : center ;
background-color : var ( --color-content-secondary-bg ) ;
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg ) ;
2024-03-12 04:24:50 +09:00
font-size : 13px ;
}
. app-body . status__prepend : has ( . status__prepend-icon-wrapper . icon-retweet ) {
padding-left : 35px ;
2023-11-21 08:22:43 +09:00
}
. app-body . status__prepend-icon-wrapper {
2024-03-12 04:24:50 +09:00
height : 20px ;
2023-11-21 08:22:43 +09:00
text-align : right ;
}
2024-03-12 04:24:50 +09:00
. app-body . status__prepend . status__prepend-icon-wrapper : has ( . icon-retweet ) {
order : 2 ;
}
2023-11-21 08:22:43 +09:00
. app-body . status__prepend-icon-wrapper . icon {
2024-03-12 04:24:50 +09:00
transform : scale ( . 9 ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . detailed-status__wrapper . status__prepend-icon-wrapper {
width : 46px ;
}
2024-03-12 04:24:50 +09:00
. app-body . status__prepend > span {
color : var ( --color-fg-muted ) ;
2024-08-23 20:42:44 +09:00
white-space : nowrap ;
2024-03-12 04:24:50 +09:00
}
. app-body . status__prepend : has ( . status__prepend-icon-wrapper > . icon-thumb-tack ) > span {
color : var ( --color-content-fg ) ;
font-weight : 600 ;
}
2023-11-21 08:22:43 +09:00
. 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 ;
border-radius : 8px ;
}
2023-12-15 07:02:06 +09:00
. app-body . status-card : hover ,
. app-body . status-card . compact : hover {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-content-bg-focus ) ;
border-color : var ( --color-lines ) ;
}
2023-12-15 07:02:06 +09:00
. app-body . status-card : active ,
. app-body . status-card . compact : active {
transform : scale ( . 98 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . status-card__image {
background : var ( --color-content-secondary-bg ) ;
}
. app-body . status-card__image . icon {
width : 32px ;
height : 32px ;
}
2024-08-03 03:57:10 +09:00
. 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 ;
border-bottom-left-radius : 8px ;
border-bottom-right-radius : 8px ;
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 ;
2024-08-24 06:00:12 +09:00
font-size : 18px ;
2024-08-03 03:57:10 +09:00
margin-bottom : 3px ;
}
. app-body . status-card__host {
order : 2 ;
}
. app-body . status-card__description {
order : 3 ;
}
2023-12-27 05:05:21 +09:00
. app-body . status-card__image : has ( . icon-file-text : only-child ) ,
. app-body . status-card__description : empty {
display : none ;
}
2023-11-21 08:22:43 +09:00
. 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 ;
}
. 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 ,
. app-body . status-card : focus . status-card__author ,
. app-body . status-card : focus . status-card__description ,
. app-body . status-card : focus . status-card__title ,
. app-body . status-card : hover . status-card__author ,
. app-body . status-card : hover . status-card__description ,
. app-body . status-card : hover . status-card__title {
color : var ( --color-content-fg ) ;
}
. app-body . status-card__author strong {
2023-12-20 10:24:15 +09:00
font-weight : 500 ;
2023-11-21 08:22:43 +09:00
}
2023-11-24 22:10:13 +09:00
@ media screen and ( max-width : 889px ) {
. app-body . status-card : not ( . expanded ) . status-card__image {
width : 80px ;
}
2023-12-27 05:05:21 +09:00
. app-body . status-card : not ( . expanded , : has ( . icon-file-text ) ) . status-card__content {
2023-11-24 22:10:13 +09:00
padding-top : 0 ;
padding-bottom : 0 ;
}
. 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 ;
}
2023-12-27 05:05:21 +09:00
. layout-multiple-columns . status-card : not ( . expanded , : has ( . icon-file-text ) ) . status-card__content {
2023-11-24 22:10:13 +09:00
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 ;
}
2024-06-17 23:24:15 +09:00
. app-body . status-card : has ( + . more-from-author ) {
border-bottom-left-radius : 0 ;
border-bottom-right-radius : 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 ) ;
}
. app-body . more-from-author . logo {
color : var ( --color-content-fg ) ;
2024-08-03 08:41:47 +09:00
}
2024-08-18 21:45:42 +09:00
. app-body . notification-ungrouped . more-from-author : is ( . account__avatar ) {
width : 16px ! important ;
height : 16px ! important ;
}
2024-06-17 23:24:15 +09:00
. app-body . more-from-author a : is ( : active , : hover , : focus ) {
color : var ( --color-accent ) ;
}
2024-08-18 21:55:44 +09:00
. app-body . more-from-author a {
color : var ( --color-content-fg ) ;
font-weight : 700 ;
}
2023-11-21 08:22:43 +09:00
. app-body . status__content p {
margin-bottom : 12px ;
}
. app-body . status__content p : last-child {
margin-bottom : 0 ;
}
2024-08-23 23:21:03 +09:00
. app-body . content-warning {
background : none ;
color : var ( --color-content-fg ) ;
margin-inline-start : 0 ;
margin-top : 2px ;
2024-08-24 05:46:08 +09:00
margin-bottom : 5px ;
2024-08-23 23:21:03 +09:00
border : 0 ;
2024-08-24 05:46:08 +09:00
padding : 0 0 25px ;
2024-08-23 23:21:03 +09:00
font-weight : 700 ;
font-size : 15px ;
line-height : 19px ;
position : relative ;
2023-11-21 08:22:43 +09:00
}
2024-08-23 23:21:03 +09:00
. app-body . detailed-status . content-warning {
font-size : 19px ;
line-height : 24px ;
2023-12-20 10:24:15 +09:00
}
2024-08-23 23:21:03 +09:00
. app-body . content-warning :: before ,
. app-body . content-warning :: after {
2023-12-20 10:24:15 +09:00
display : none ;
}
2024-08-23 23:21:03 +09:00
. app-body . content-warning . link-button {
2023-12-24 03:15:22 +09:00
background-color : transparent ;
width : 100 % ;
2023-12-27 08:55:40 +09:00
text-align : start ;
2024-08-23 23:21:03 +09:00
position : absolute ;
top : 0 ;
bottom : 0 ;
display : flex ;
align-items : end ;
text-decoration : none ;
}
. app-body . content-warning . link-button span {
2023-12-27 08:55:40 +09:00
background-color : transparent ;
2023-12-20 10:24:15 +09:00
background-image : var ( --icon-eye-shut ) ;
background-repeat : no-repeat ;
2023-12-27 08:55:40 +09:00
background-position : left 7px center ;
2023-12-20 10:24:15 +09:00
background-size : auto 18px ;
border : 1px solid var ( --color-lines ) ;
border-radius : 8px ;
text-transform : initial ;
font-size : 12px ;
line-height : 16px ;
font-weight : 500 ;
color : var ( --color-content-fg ) ;
2023-12-27 08:55:40 +09:00
padding : 5px 8px 5px 30px ;
2023-12-24 03:15:22 +09:00
margin : 0 ;
2023-12-20 10:24:15 +09:00
vertical-align : middle ;
2023-12-24 03:15:22 +09:00
display : inline-block ;
2023-12-27 08:55:40 +09:00
transform-origin : center left ;
2023-12-24 03:15:22 +09:00
transition :
border-color . 3s ,
outline-color . 3s ,
2023-12-24 10:10:41 +09:00
transform . 3s ,
background-color . 3s ;
2023-12-24 21:38:57 +09:00
position : relative ;
z-index : 1 ;
2023-12-20 11:49:11 +09:00
}
2024-08-23 23:21:03 +09:00
. app-body . content-warning . link-button : hover span {
2023-12-20 10:24:15 +09:00
border-color : rgba ( 68 , 74 , 90 , . 6 ) ;
}
2024-08-23 23:21:03 +09:00
@ media ( prefers-color-scheme : dark ) {
. app-body . content-warning . link-button : hover span {
border-color : rgba ( 255 , 255 , 255 , . 3 ) ;
}
}
. app-body . content-warning . link-button : active span {
2023-12-24 03:15:22 +09:00
transform : scale ( . 95 ) ;
}
2024-08-23 23:21:03 +09:00
. app-body . content-warning : has ( + . status__content > . status__content__text--visible ) . link-button span {
2023-12-20 10:24:15 +09:00
background-image : var ( --icon-eye-open ) ;
}
@ media ( prefers-color-scheme : dark ) {
2023-12-24 03:15:22 +09:00
. app-body : is ( . reply-indicator__content , . status__content ) . status__content__spoiler-link : hover span {
2023-12-20 10:24:15 +09:00
border-color : rgba ( 255 , 255 , 255 , . 3 ) ;
}
2023-11-21 08:22:43 +09:00
}
2024-08-23 23:21:03 +09:00
2023-11-21 08:22:43 +09:00
. app-body . icon-button . overlayed {
2024-08-23 22:43:59 +09:00
background-color : rgba ( 0 , 0 , 0 , . 1 ) ;
2023-12-27 05:16:21 +09:00
border-radius : 7px ;
2023-11-21 08:22:43 +09:00
}
. app-body . icon-button . overlayed : hover {
2024-08-23 22:43:59 +09:00
background-color : rgba ( 0 , 0 , 0 , . 4 ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
border-bottom : 1px solid var ( --color-lines ) ;
padding : 12px ;
margin-top : -1px ;
}
2023-12-17 23:38:55 +09:00
. app-body . media-gallery {
gap : 4px ;
grid-template-columns : calc ( 50 % - 2px ) calc ( 50 % - 2px ) ;
grid-template-rows : calc ( 50 % - 3px ) calc ( 50 % - 3px ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . audio-player ,
. app-body . media-gallery ,
. app-body . video-player {
2023-12-15 07:02:06 +09:00
transition : transform . 3s ;
}
. app-body . media-gallery__item {
2023-12-17 23:38:55 +09:00
border-radius : 8px ;
2023-11-21 08:22:43 +09:00
}
2023-12-15 05:20:03 +09:00
. app-body div : not ( . detailed-status ) > . media-gallery : has ( . media-gallery__item . standalone ) ,
2024-02-15 00:33:08 +09:00
. app-body . status > * : not ( . status__info , . status__content , . status__action-bar , . status__line , . status-card ) {
2023-12-01 21:45:07 +09:00
max-height : 450px ;
2023-11-29 02:10:46 +09:00
width : auto ;
}
2024-08-18 21:45:42 +09:00
. app-body . status--in-thread . more-from-author {
margin-inline-start : 0 ;
}
2023-12-17 23:38:55 +09:00
. app-body . media-gallery__item ,
. app-body . media-gallery__item-thumbnail ,
. app-body . media-gallery__item-gifv-thumbnail {
2023-12-15 07:02:06 +09:00
cursor : pointer ;
2023-12-17 23:38:55 +09:00
transition : . 2s transform ;
2024-07-18 00:16:11 +09:00
overflow : visible ;
2023-12-15 07:02:06 +09:00
}
2023-12-17 23:38:55 +09:00
. app-body . media-gallery__item : active {
2023-12-15 07:02:06 +09:00
transform : scale ( . 98 ) ;
}
2023-12-17 23:38:55 +09:00
. app-body . media-gallery__item-thumbnail img {
border-radius : 8px ;
2024-01-30 08:31:32 +09:00
outline : 1px solid var ( --color-lines-translucent ) ;
2023-12-17 23:38:55 +09:00
outline-offset : -1px ;
}
. app-body . media-gallery__gifv :: after ,
. app-body . video-player :: after {
position : absolute ;
display : block ;
content : " " ;
border-radius : 8px ;
top : 0 ;
left : 0 ;
bottom : 0 ;
right : 0 ;
2024-01-30 08:31:32 +09:00
border : 1px solid var ( --color-lines-translucent ) ;
2023-12-17 23:38:55 +09:00
z-index : 1 ;
}
2023-12-17 23:41:04 +09:00
. app-body . media-gallery__gifv : is ( : active , : hover ) :: after {
2023-12-17 23:38:55 +09:00
display : none ;
}
. app-body . picture-in-picture . video-player :: after {
border-radius : 0 ;
}
. app-body . media-gallery__preview ,
. app-body . video-player {
2023-12-18 00:20:27 +09:00
background-color : var ( --color-content-secondary-bg ) ;
2024-08-03 08:41:47 +09:00
}
2023-12-18 00:20:27 +09:00
. app-body . media-gallery__preview {
outline : 1px solid rgba ( 0 , 0 , 0 , 0 . 05 ) ;
outline-offset : -1px ;
height : calc ( 100 % - 1px ) ;
border-radius : 8px ;
transition : all . 2s ;
}
2023-12-18 00:26:39 +09:00
. app-body . spoiler-button : hover ~ . media-gallery__item > . media-gallery__preview {
2024-01-30 08:31:32 +09:00
outline : 1px solid var ( --color-lines-translucent ) ;
2023-12-18 00:26:39 +09:00
}
2023-12-18 00:20:27 +09:00
. 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 ;
2023-12-18 00:36:50 +09:00
background-color : var ( --color-content-bg ) ;
border : 1px solid rgba ( 0 , 0 , 0 , . 1 ) ;
2023-12-18 00:20:27 +09:00
color : var ( --color-content-fg ) ;
2023-12-18 00:36:50 +09:00
border-radius : 8px ;
2023-12-18 00:20:27 +09:00
}
. app-body . spoiler-button__overlay__label > span : first-child {
font-weight : bold ;
}
2024-01-18 01:17:17 +09:00
. app-body : is ( . media-gallery__alt__label , . media-gallery__gifv__label ) {
2023-12-18 00:20:27 +09:00
background-color : rgba ( 0 , 0 , 0 , . 1 ) ;
border-radius : 6px ;
2023-12-18 00:36:50 +09:00
}
2024-01-18 01:17:17 +09:00
. app-body . spoiler-button : not ( . spoiler-button--minified ) ~ . media-gallery__item : is ( . media-gallery__alt__label , . media-gallery__gifv__label ) {
2023-12-18 00:36:50 +09:00
display : none ;
}
2023-12-18 00:20:27 +09:00
2023-11-29 02:10:46 +09:00
2023-11-21 08:22:43 +09:00
/* Empty columns */
. app-body . empty-column-indicator {
background-color : var ( --color-content-secondary-bg ) ;
color : var ( --color-content-fg ) ;
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 ;
}
2023-11-25 00:21:10 +09:00
2023-11-21 08:22:43 +09:00
/* Timeline hint */
. app-body . timeline-hint {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
2024-08-19 22:09:05 +09:00
border-color : var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . timeline-hint a {
color : var ( --color-accent ) ;
}
. app-body article + . timeline-hint : last-child {
border-bottom : 1px solid var ( --color-lines ) ;
}
/* 📤 DMs */
. app-body . follow_requests-unlocked_explanation {
2023-12-20 07:12:46 +09:00
background-color : var ( --color-content-secondary-bg ) ;
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg ) ;
2023-12-29 05:57:58 +09:00
border-top : 1px solid var ( --color-lines ) ;
2024-01-09 01:18:59 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ,
. app-body . conversation . attachment-list__list a ,
. 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__content__relative-time {
opacity : . 7 ;
}
2023-12-20 07:12:46 +09:00
. app-body . conversation__content {
position : relative ;
}
. app-body . conversation__content . status__action-bar button : last-child {
bottom : 10px ;
right : 10px ;
}
. 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 ;
}
2023-11-21 08:22:43 +09:00
2024-03-21 09:11:11 +09:00
. app-body . status__wrapper . status__wrapper-direct ,
2024-07-18 00:06:52 +09:00
. 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 % ) ;
2024-03-13 08:59:06 +09:00
}
. app-body . status__wrapper . status__wrapper-direct : has ( . status__content : hover ) ,
2024-03-21 09:11:11 +09:00
. app-body . status__wrapper . status__wrapper-direct : has ( . status__content : hover ) . status__avatar ,
. app-body . status__wrapper . status__wrapper-direct . focusable : focus ,
2024-07-18 00:06:52 +09:00
. 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 % ) ;
2024-03-13 08:59:06 +09:00
}
2024-01-09 01:18:59 +09:00
. 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 ) ;
2024-03-13 19:41:17 +09:00
border-radius : 50px 50px 50px 10px ;
2024-03-13 08:59:06 +09:00
transition : all . 2s ;
2023-11-21 08:22:43 +09:00
}
2024-01-09 01:18:59 +09:00
. app-body : is ( . detailed-status__wrapper-direct ) . status__prepend {
margin-inline-start : 0 ;
margin-block-end : 0 ;
position : absolute ;
top : 4px ;
left : 4px ;
right : 4px ;
border-radius : 8px ;
outline : 0 ;
font-size : 13px ;
2023-11-21 08:22:43 +09:00
}
2024-01-09 01:18:59 +09:00
. 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 {
2024-03-12 04:24:50 +09:00
margin-inline-start : 66px ;
2024-08-03 08:41:47 +09:00
}
2024-01-09 01:18:59 +09:00
. app-body : is ( . status__wrapper-direct , . detailed-status__wrapper-direct ) . status__prepend . status__prepend-icon-wrapper {
width : 20px ;
height : 20px ;
}
. app-body : is ( . status__wrapper-direct , . detailed-status__wrapper-direct ) . status__prepend . status__prepend-icon-wrapper svg {
transform : scale ( . 85 ) ;
background-image : var ( --icon-at-inv ) ;
}
. app-body : is ( . status__wrapper-direct , . detailed-status__wrapper-direct ) . status__prepend > span {
color : var ( --color-accent-fg ) ;
margin-top : -1px ;
2023-11-21 08:22:43 +09:00
}
2024-07-18 00:06:52 +09:00
. 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 ) ;
border-radius : 50px 50px 50px 10px ;
padding : 3px 12px ;
margin-top : 2px ;
font-size : 90 % ;
}
2023-11-21 08:22:43 +09:00
/ * ⏺ ️ Column headers
----------------- * /
. app-body . tabs-bar__wrapper {
background-color : transparent ;
2024-03-17 01:10:48 +09:00
box-shadow : inset 0 10px var ( --color-bg ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . column-header__wrapper . active : before {
background : none ;
opacity : 40 % ;
}
. app-body . column-header__wrapper . active {
box-shadow : 0 0 ;
}
. app-body . column-header {
border-radius : 8px ;
}
. app-body . column-header ,
. app-body . column-back-button {
2024-03-13 02:35:08 +09:00
background-color : color-mix ( in srgb , var ( --color-content-bg ) , transparent 15 % ) ;
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg ) ;
border-right : 1px solid var ( --color-lines ) ;
border-left : 1px solid var ( --color-lines ) ;
2023-12-29 05:57:58 +09:00
border-top : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
border-bottom : 0 ;
border-radius : 8px 8px 0 0 ;
overflow : hidden ;
font-weight : bold ;
height : 50px ;
box-sizing : border-box ;
-webkit-backdrop-filter : blur ( 20px ) ;
backdrop-filter : blur ( 20px ) ;
}
2024-03-19 03:13:55 +09:00
. app-body . column-back-button {
padding-left : 15px ;
}
2023-11-21 08:22:43 +09:00
. 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 ;
border-radius : 6px ;
height : 42px ;
margin : 4px 4px 4px 0 ;
}
2023-12-22 07:39:31 +09:00
. app-body . column-header__button : active {
transform : scale ( . 8 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . column-header__icon {
transform : scale ( 1 . 1 ) ;
margin-right : 4px ;
}
2024-03-19 03:13:55 +09:00
. app-body . column-header__buttons . column-header__button : has ( > . icon : only-child ) {
width : 42px ;
}
2023-11-21 08:22:43 +09:00
. 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 ) ;
}
2024-05-27 02:27:04 +09:00
. app-body . column-header__button . active . icon {
transform : none ;
}
2023-11-21 08:22:43 +09:00
@ media screen and ( max-width : 1174px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . column-header__wrapper :: after ,
. app-body : not ( . layout-multiple-columns ) . column-back-button :: after {
2023-11-21 08:22:43 +09:00
display : none ;
}
2024-02-15 04:02:47 +09:00
. app-body . column-header__buttons {
height : 55px ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . column-header ,
. app-body : not ( . layout-multiple-columns ) . column-back-button {
2023-11-21 08:22:43 +09:00
background-color : transparent ;
-webkit-backdrop-filter : none ;
backdrop-filter : none ;
}
2024-02-15 04:02:47 +09:00
. 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 ;
height : 35px ! important ;
align-self : center ;
}
2023-11-21 08:22:43 +09:00
}
. 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 ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . column-back-button--slim-button {
2023-11-21 08:22:43 +09:00
height : 50px ;
}
}
@ media screen and ( min-width : 1175px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . column-back-button--slim-button {
2023-11-21 08:22:43 +09:00
display : none ;
}
}
2023-12-30 06:15:44 +09:00
. app-body : is ( . column-header__back-button , . column-back-button ) {
gap : 5px ;
}
. app-body . column-back-button__icon {
margin-inline-end : 0 ;
}
2024-03-19 03:13:55 +09:00
. app-body : is ( . column-header__back-button , . column-back-button ) span ,
. app-body . column-header__back-button {
2023-12-30 06:15:44 +09:00
position : relative ;
}
. app-body : is ( . column-header__back-button , . column-back-button ) : hover {
text-decoration : none ;
}
2024-03-19 03:13:55 +09:00
. app-body : is ( . column-header__back-button , . column-back-button ) span :: before ,
. app-body . column-header__back-button : has ( > svg : last-child ) :: before {
2023-12-30 06:15:44 +09:00
content : " " ;
position : absolute ;
2024-03-19 03:13:55 +09:00
left : 4px ;
right : 4px ;
bottom : 4px ;
top : 4px ;
2023-12-30 06:15:44 +09:00
z-index : -1 ;
border-radius : 8px ;
background-color : transparent ;
transition : all . 3s ;
}
2024-03-19 03:13:55 +09:00
. 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 {
2023-12-30 06:15:44 +09:00
background-color : var ( --color-accent-bg ) ;
}
2024-03-19 03:13:55 +09:00
. 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 {
2023-12-30 06:15:44 +09:00
transform : scale ( . 9 ) ;
}
2023-11-21 08:22:43 +09:00
2024-08-26 23:35:48 +09:00
. app-body : is ( . load-gap , . load-more ) {
background-color : var ( --color-content-secondary-bg ) ;
2023-11-21 08:22:43 +09:00
color : var ( --color-accent ) ;
border-bottom : 0 ;
}
2024-08-26 23:35:48 +09:00
. app-body : is ( . load-gap , . load-more ) : is ( : active , : hover ) {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-accent-lines ) ;
}
2024-08-26 23:35:48 +09:00
. app-body : is ( . load-gap , . load-more ) . icon-ellipsis-h {
background-image : var ( --icon-ellipsis-column-link-active-accent ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . column-header__collapsible {
2024-08-20 03:39:17 +09:00
background-color : color-mix ( in srgb , var ( --color-content-secondary-bg ) , transparent 15 % ) ;
-webkit-backdrop-filter : blur ( 15px ) ;
backdrop-filter : blur ( 15px ) ;
2023-11-21 08:22:43 +09:00
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
2024-08-20 03:33:19 +09:00
border-bottom : 0 ;
}
. app-body . column-header__collapsible : is ( : not ( . collapsed ) , . animating ) {
2024-08-20 03:23:29 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . column-header__collapsible :: -webkit-scrollbar-track {
background-color : transparent ;
}
2024-08-19 22:21:50 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
@ media screen and ( max-width : 1174px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . column-header__collapsible {
2023-11-21 08:22:43 +09:00
box-shadow : none ;
border-radius : 0 ;
}
}
. 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 ;
2024-02-28 07:32:52 +09:00
}
2024-03-16 07:20:49 +09:00
. app-body . column-header > button : nth-child ( 2 ) {
padding-left : 0 ;
}
2024-02-28 07:32:52 +09:00
. app-body . column-header . column-header__back-button {
2024-03-19 03:13:55 +09:00
padding-right : 15px ;
2024-02-28 07:32:52 +09:00
}
2024-03-10 06:28:23 +09:00
. app-body . column-header > button ,
. app-body . column-header . column-header__back-button {
2023-11-21 08:22:43 +09:00
font-weight : bold ;
}
@ media screen and ( max-width : 1174px ) {
2024-03-05 01:14:22 +09:00
. app-body : not ( . layout-multiple-columns ) . ui {
padding-top : 55px ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . ui__header {
2023-11-21 08:22:43 +09:00
background-color : transparent ;
border-bottom : 0 ;
2024-03-05 01:14:22 +09:00
position : fixed ;
inset-inline-start : 0 ;
inset-inline-end : 0 ;
2024-08-24 01:56:14 +09:00
-webkit-backdrop-filter : none ;
backdrop-filter : none ;
2023-11-21 08:22:43 +09:00
}
2024-02-15 01:52:32 +09:00
. app-body : not ( . layout-multiple-columns ) . ui__header . ui__header__logo {
2023-11-25 00:09:38 +09:00
margin-left : 3px ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . tabs-bar__wrapper {
2023-11-21 08:22:43 +09:00
box-shadow : none ;
display : block ;
margin-bottom : -2px ;
border-radius : 0 ;
height : 45px ;
2024-02-15 01:52:32 +09:00
border-bottom : 0 ;
2023-11-21 08:22:43 +09:00
}
2024-02-15 03:29:25 +09:00
. app-body : not ( . layout-multiple-columns ) . tabs-bar__wrapper {
2023-11-21 08:22:43 +09:00
display : block ;
2024-02-15 01:52:32 +09:00
top : 0 ;
2024-02-19 07:47:58 +09:00
inset-inline-start : 45px ;
2024-03-05 01:14:22 +09:00
inset-inline-end : 55px ;
2024-02-15 01:52:32 +09:00
height : 55px ;
position : fixed ;
2024-02-15 03:29:25 +09:00
}
. app-body : not ( . layout-multiple-columns ) : not ( : has ( . ui . ui__header__links > . button [ href = "/auth/sign_in" ] ) ) . tabs-bar__wrapper {
2024-02-15 01:52:32 +09:00
z-index : 3 ;
2023-11-21 08:22:43 +09:00
}
2024-02-15 03:29:25 +09:00
. 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 ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns )
: is (
. column-header ,
. column-back-button ,
. column-header__button ,
. column-header__back-button
) {
background-color : transparent ;
2024-02-15 01:52:32 +09:00
height : 55px ;
2024-01-13 04:31:27 +09:00
border : 0 ;
margin : 0 ;
2023-11-21 08:22:43 +09:00
}
2024-02-15 01:52:32 +09:00
. app-body . column-header__icon {
display : none ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . ui :: after { /* Set a backdrop blur background to both top bars */
2023-11-21 08:22:43 +09:00
-webkit-backdrop-filter : blur ( 20px ) ;
backdrop-filter : blur ( 20px ) ;
2024-03-12 23:40:49 +09:00
background-color : color-mix ( in srgb , var ( --color-content-bg ) , transparent 25 % ) ;
2024-02-15 01:52:32 +09:00
border-bottom : 1px solid var ( --color-lines-translucent ) ;
2023-11-21 08:22:43 +09:00
content : "" ;
2024-02-15 01:52:32 +09:00
height : 55px ;
2023-11-21 08:22:43 +09:00
left : 0 ;
position : fixed ;
top : 0 ;
width : 100 % ;
2024-05-29 03:38:01 +09:00
z-index : 2 ;
2023-11-21 08:22:43 +09:00
}
2024-03-21 03:16:54 +09:00
@ media ( display-mode : standalone ) {
. app-body : not ( . layout-multiple-columns ) . ui :: after {
box-shadow : 0 -10px 0 10px # 191b22 ;
border-radius : 15px 15px 0 0 ;
}
2024-05-16 04:09:53 +09:00
@ media ( prefers-color-scheme : light ) {
. app-body . theme-system . ui :: after {
box-shadow : 0 -10px 0 10px # f3f5f7 ;
border-radius : 15px 15px 0 0 ;
}
}
@ media ( prefers-color-scheme : dark ) {
. app-body . theme-system . ui :: after {
box-shadow : 0 -10px 0 10px # 191b22 ;
border-radius : 15px 15px 0 0 ;
}
}
2024-03-21 03:16:54 +09:00
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . column-header__collapsible { /* Remove margin between column settings and column header */
2024-02-15 01:52:32 +09:00
margin-top : 1px ;
position : fixed ;
left : 0 ;
right : 0 ;
2023-11-21 08:22:43 +09:00
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . column-header__collapsible : not ( . collapsed ) {
2023-12-22 07:39:31 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
}
}
@ media screen and ( max-width : 885px ) {
2024-08-20 03:17:57 +09:00
. app-body : not ( . layout-multiple-columns ) . column-header__collapsible : is ( : not ( . collapsed ) , . animating ) {
2023-12-22 07:39:31 +09:00
border-left-color : var ( --color-content-secondary-bg ) ;
border-right-color : var ( --color-content-secondary-bg ) ;
}
2023-11-24 23:50:01 +09:00
}
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . tabs-bar__wrapper {
2023-11-24 23:50:01 +09:00
border-color : transparent ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . ui :: after {
2023-11-24 23:50:01 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
}
2023-11-21 08:22:43 +09:00
}
@ media ( prefers-color-scheme : dark ) {
@ media screen and ( max-width : 1174px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . tabs-bar__wrapper {
2023-11-21 08:22:43 +09:00
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 ) {
background : var ( --color-accent-bg ) ;
border : 1px solid var ( --color-accent-lines ) ;
}
. app-body . account__header + . account__section-headline {
2023-12-29 05:57:58 +09:00
border-left : 0 ;
border-right : 0 ;
2023-11-21 08:22:43 +09:00
}
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . explore__search-header + . account__section-headline {
2023-11-21 08:22:43 +09:00
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . notification__filter-bar {
2023-11-21 08:22:43 +09:00
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
margin-top : 10px ;
}
}
@ media screen and ( max-width : 889px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) : is ( . account__section-headline , . notification__filter-bar ) {
2023-11-21 08:22:43 +09:00
border-left : 0 ;
border-right : 0 ;
}
}
. app-body
: is ( . account__section-headline , . notification__filter-bar )
: is ( a , button ) {
2023-12-20 03:56:25 +09:00
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 ;
max-height : 45px ;
padding : 14px 10px ;
2023-11-21 08:22:43 +09:00
}
. app-body
: is ( . account__section-headline , . notification__filter-bar )
. icon {
2023-12-20 03:56:25 +09:00
margin-top : -1 . 5px ;
2023-11-21 08:22:43 +09:00
}
. app-body
: is ( . account__section-headline , . notification__filter-bar )
: is ( a , button ) : hover {
2023-12-20 03:56:25 +09:00
background-color : var ( --color-accent-lines ) ;
color : var ( --color-accent ) ;
box-shadow : 0 0 0 4px var ( --color-accent-bg ) inset ;
2023-11-21 08:22:43 +09:00
}
. app-body
: is ( . account__section-headline , . notification__filter-bar )
: is ( a , button ) . active {
2023-12-20 03:56:25 +09:00
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
box-shadow : 0 0 0 4px var ( --color-accent-bg ) inset ;
2023-11-21 08:22:43 +09:00
}
. app-body
: is ( . account__section-headline , . notification__filter-bar )
: is ( a , button ) . active :: before {
2023-12-20 03:56:25 +09:00
display : none ;
2023-11-21 08:22:43 +09:00
}
. app-body
: is ( . account__section-headline , . notification__filter-bar )
button {
2023-12-20 03:56:25 +09:00
background-color : transparent ;
2023-11-21 08:22:43 +09:00
}
. app-body
: is ( . account__section-headline , . notification__filter-bar )
: is ( a , button , a . active , button . active ) :: after {
2023-12-20 03:56:25 +09:00
display : block ;
position : absolute ;
content : " " ;
width : 2px ;
height : auto ;
background-color : var ( --color-accent-lines ) ;
top : 8px ;
right : -1px ;
left : auto ;
bottom : 8px ;
border-radius : 50px ;
z-index : 1 ;
transform : unset ;
border : 0 ;
2023-11-21 08:22:43 +09:00
}
. app-body
: is ( . account__section-headline , . notification__filter-bar )
: is ( a , button ) : last-child :: after {
2023-12-20 03:56:25 +09:00
display : none ;
2023-11-21 08:22:43 +09:00
}
@ media ( prefers-color-scheme : dark ) {
. app-body
: is ( . account__section-headline , . notification__filter-bar )
: is ( a , button ) . active {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-bg ) ;
2023-11-21 08:22:43 +09:00
}
}
. 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 ) {
. app-body . account__header + . account__section-headline {
border-radius : 0 ;
}
}
/ * 📍 Navigation panel
------------------- * /
2024-08-03 08:41:47 +09:00
@ media screen and ( min-width : 1175px ) {
2023-11-21 08:22:43 +09:00
/* Order of the side nav items */
. app-body . navigation-panel__logo {
order : 1 ;
}
. app-body . column-link [ href = "/home" ] {
order : 2 ;
}
. app-body . column-link [ href = "/notifications" ] {
order : 3 ;
}
2023-11-25 21:30:09 +09:00
. app-body . column-link : is ( [ href = "/explore" ] , [ href = "/search" ] ) {
2023-11-21 08:22:43 +09:00
order : 4 ;
}
. app-body . column-link [ href = "/public/local" ] {
order : 5 ;
}
. app-body . column-link [ href = "/public" ] {
order : 6 ;
}
. app-body . column-link [ href = "/conversations" ] {
order : 7 ;
}
. app-body . column-link [ href = "/follow_requests" ] {
order : 8 ;
}
. app-body . column-link [ href = "/bookmarks" ] {
order : 9 ;
}
. app-body . column-link [ href = "/favourites" ] {
order : 10 ;
}
. app-body . column-link [ href = "/lists" ] {
order : 12 ;
}
. app-body . list-panel {
order : 13 ;
}
. app-body . column-link [ href = "/settings/preferences" ] {
order : 11 ;
}
. app-body . navigation-panel__sign-in-banner ,
. app-body . navigation-panel__legal {
order : 14 ;
}
2023-12-15 05:20:03 +09:00
. app-body * : not ( . compose-panel ) > . flex-spacer {
2023-11-21 08:22:43 +09:00
order : 15 ;
}
. app-body . getting-started__trends {
order : 16 ;
}
}
. 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 ;
}
2023-11-24 22:23:40 +09:00
. app-body . ui__header__links . button . button-secondary [ href = "/search" ] {
display : none ;
}
2023-11-21 08:22:43 +09:00
. app-body . ui__header__links . button . button-secondary [ href = "/publish" ] {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
2024-03-05 01:14:22 +09:00
width : 50px ;
height : 50px ;
2023-11-24 23:28:00 +09:00
box-sizing : border-box ;
background-image : var ( --icon-compose ) ;
background-position : center ;
background-repeat : no-repeat ;
2024-03-05 01:14:22 +09:00
position : fixed ;
2024-03-21 03:16:54 +09:00
bottom : calc ( 4 . 8em + var ( --safe-area-bottom ) ) ;
2024-03-05 01:14:22 +09:00
inset-inline-end : 1em ;
2023-11-24 23:28:00 +09:00
background-size : 22px ;
2024-03-05 01:14:22 +09:00
border-radius : 50 % ;
2024-08-03 08:41:47 +09:00
box-shadow :
2024-03-05 01:14:22 +09:00
0 1px 1px rgba ( 0 , 0 , 0 , . 2 ) ,
0 2px 10px rgba ( 0 , 0 , 0 , . 2 ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2023-11-24 23:28:00 +09:00
. app-body . ui__header__links . button . button-secondary [ href = "/publish" ] span {
color : transparent ;
}
@ media screen and ( max-width : 1174px ) {
. layout-single-column . ui__header__links {
padding-left : 12px ;
}
}
2023-11-21 08:22:43 +09:00
. app-body . column-link--logo {
margin-left : 4px ;
}
. app-body . column-link . column-link--logo ,
. app-body . ui__header__logo {
display : inline-flex ;
2024-04-09 02:10:13 +09:00
flex-grow : unset ;
2023-11-21 08:22:43 +09:00
padding : 0 ;
2024-02-29 22:27:29 +09:00
border : 0 ;
2023-11-21 08:22:43 +09:00
width : 50px ;
height : 50px ;
background-image : var ( --logo ) ;
background-repeat : no-repeat ;
background-position : center ;
background-size : 32px auto ;
}
. app-body . column-link . column-link--logo svg ,
. app-body . ui__header__logo svg {
display : none ;
}
. app-body . navigation-panel__logo {
2024-02-29 22:27:29 +09:00
margin-bottom : 5px ;
2023-11-21 08:22:43 +09:00
}
. app-body . column-link : not ( . column-link--logo ) {
2024-02-15 00:31:27 +09:00
padding : 15px 20px 16px 13px ;
gap : 7px ;
2023-11-21 08:22:43 +09:00
margin-left : 3px ;
2024-02-29 22:27:29 +09:00
border : 0 ;
2023-11-21 08:22:43 +09:00
font-weight : 500 ;
font-size : 18px ;
overflow : visible ;
2023-12-15 07:02:06 +09:00
transform-origin : 60px center ;
2023-11-21 08:22:43 +09:00
}
. app-body . column-link--transparent : is ( . active , . active : hover ) {
color : var ( --color-content-fg ) ;
2024-01-01 21:29:02 +09:00
font-weight : bold ;
2023-11-21 08:22:43 +09:00
}
. 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 ) {
. app-body . column-link : not ( . column-link--logo ) {
2023-12-15 07:02:06 +09:00
transition : all . 3s ;
2023-11-21 08:22:43 +09:00
}
. app-body . column-link--transparent span :: before {
content : " " ;
2024-02-19 22:21:41 +09:00
left : -52px ;
2023-11-21 08:22:43 +09:00
background-color : transparent ;
transition : . 3s background-color ;
2024-02-19 22:21:41 +09:00
top : -14px ;
2023-11-21 08:22:43 +09:00
right : -16px ;
position : absolute ;
2024-02-27 00:36:39 +09:00
border-radius : 10px ;
2023-11-21 08:22:43 +09:00
z-index : -1 ;
2024-02-19 22:21:41 +09:00
bottom : -14px ;
2023-11-21 08:22:43 +09:00
}
. app-body . column-link--transparent : hover span :: before {
2024-03-12 04:24:50 +09:00
background-color : color-mix ( in srgb , var ( --color-accent ) , transparent 85 % ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . column-link--transparent : is ( . active , . active : hover ) span :: before {
2024-02-19 21:47:04 +09:00
background-color : transparent ;
2023-11-21 08:22:43 +09:00
}
2023-12-15 07:02:06 +09:00
. app-body . column-link--transparent : active {
transform : scale ( . 95 ) ;
}
2023-11-21 08:22:43 +09:00
}
. app-body . icon-with-badge__badge {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
border-radius : 20px ;
top : -4px ;
font-weight : bold ;
border : 0 ;
z-index : 1 ;
}
. app-body . compose-panel hr , . navigation-panel hr {
display : none ;
}
. app-body . column-link span {
vertical-align : middle ;
}
. app-body . list-panel {
padding : 5px 9px 50px 27px ;
margin : 0 0 5px ;
display : none ;
}
. app-body . list-panel . icon {
display : none ;
}
. app-body . list-panel . column-link span :: before {
left : -15px ;
top : -10px ;
right : -15px ;
bottom : -10px ;
}
@ media screen and ( min-width : 1175px ) {
. app-body . column-link [ href = "/lists" ] : is ( . active , : hover ) + . list-panel ,
. app-body . list-panel : hover {
display : block ;
animation : fadein . 5s 1 ;
}
}
@ media screen and ( max-width : 1174px ) {
. app-body . columns-area__panels__pane--navigational . columns-area__panels__pane__inner {
width : 100vw ;
2024-03-21 03:16:54 +09:00
height : calc ( 4 . 2em + var ( --safe-area-bottom ) ) ;
2023-11-21 08:22:43 +09:00
bottom : 0 ;
left : 0 ;
z-index : 3 ;
}
. app-body . columns-area__panels__pane--navigational . navigation-panel {
width : 100vw ;
height : 4 . 2em ;
padding-right : 20vw ;
2024-03-21 03:16:54 +09:00
padding-bottom : var ( --safe-area-bottom ) ;
2023-11-21 08:22:43 +09:00
flex-direction : row ;
overflow-x : auto ;
2024-03-12 23:40:49 +09:00
background-color : color-mix ( in srgb , var ( --color-content-bg ) , transparent 25 % ) ;
2024-02-19 23:32:27 +09:00
border-top : 1px solid var ( --color-lines-translucent ) ;
2023-11-21 08:22:43 +09:00
border-left : 0 ;
2024-02-19 23:32:27 +09:00
-webkit-backdrop-filter : blur ( 20px ) ;
backdrop-filter : blur ( 20px ) ;
2023-11-21 08:22:43 +09:00
}
2024-03-05 01:14:22 +09:00
. app-body . columns-area__panels__pane--navigational . columns-area__panels__pane__inner :: before {
2023-11-21 08:22:43 +09:00
content : " " ;
position : fixed ;
right : 0 ;
2024-03-05 01:14:22 +09:00
bottom : 0 ;
2023-11-21 08:22:43 +09:00
width : 17vw ;
2024-03-21 03:16:54 +09:00
height : calc ( 4 . 2em + var ( --safe-area-bottom ) - 1px ) ;
2024-03-12 23:40:49 +09:00
background-image : linear-gradient ( to right , transparent , var ( --color-content-bg ) 75 . 63 % ) ;
2023-11-21 08:22:43 +09:00
background-color : transparent ;
z-index : 2 ;
}
. app-body . columns-area__panels__pane--navigational . navigation-panel :: after {
content : " " ;
}
. app-body . navigation-panel : has ( > * : nth-child ( 4 ) : last-child ) :: after ,
. app-body . navigation-panel : has ( > * : nth-child ( 5 ) : last-child ) :: after ,
. app-body . navigation-panel : has ( > * : nth-child ( 6 ) : last-child ) :: after ,
. app-body . navigation-panel : has ( > * : nth-child ( 4 ) : last-child ) :: before ,
. app-body . navigation-panel : has ( > * : nth-child ( 5 ) : last-child ) :: before ,
. app-body . navigation-panel : has ( > * : nth-child ( 6 ) : last-child ) :: before {
display : none ;
}
. app-body . navigation-panel : is ( . column-link , . navigation-panel__legal ) ,
. app-body . column-link--transparent : is ( . active , . active : hover , : active ) ,
. app-body . columns-area__panels__pane--navigational . navigation-panel :: after {
flex : 0 0 17vw ;
margin : 6px 0 8px ;
padding : 4px 0 3px ;
border-radius : 0 ;
border : 0 ;
justify-content : center ;
display : inline-flex ;
align-items : center ;
box-sizing : border-box ;
background-color : transparent ;
2023-12-20 05:34:08 +09:00
transform-origin : center ;
transition : . 2s transform ;
2023-11-21 08:22:43 +09:00
}
. app-body
. navigation-panel : has ( > * : nth-child ( 4 ) : last-child )
: is ( . column-link , . navigation-panel__legal ) {
flex : 50vw ;
}
2023-12-20 05:34:08 +09:00
. app-body . navigation-panel : is ( . column-link , . navigation-panel__legal ) : active {
2023-12-21 05:01:09 +09:00
transform : scale ( . 8 ) ;
2023-12-20 05:34:08 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body
. navigation-panel : has ( > * : nth-child ( 5 ) : last-child )
2023-11-25 01:03:20 +09:00
: is ( . column-link , . navigation-panel__legal ) ,
. app-body
. navigation-panel : has ( > * : nth-child ( 7 ) : last-child ) : has ( . getting-started__trends )
: is ( . column-link , . navigation-panel__legal ) {
2023-11-21 08:22:43 +09:00
flex : calc ( 100vw / 3 ) ;
}
. app-body
. navigation-panel : has ( > * : nth-child ( 6 ) : last-child )
: is ( . column-link , . navigation-panel__legal ) {
flex : 25vw ;
}
2023-11-25 01:03:20 +09:00
. app-body
. navigation-panel : has ( > * : nth-child ( 7 ) : last-child ) : has ( . getting-started__trends ) :: after {
display : none ;
}
2023-11-21 08:22:43 +09:00
. app-body . column-link--transparent : is ( . active , . active : hover , : active ) {
margin : 6px 0 8px ;
padding : 4px 0 3px ;
border-radius : 8px ;
border : 0 ;
}
2023-12-21 05:01:09 +09:00
. app-body . column-link--transparent . active {
animation : bounce-sml . 3s 1 ;
}
2023-11-21 08:22:43 +09:00
. app-body . column-link__icon {
margin : 0 ;
2024-02-15 03:33:52 +09:00
transform : scale ( 1 . 3 ) ;
2023-11-21 08:22:43 +09:00
}
. 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 {
2023-12-29 05:57:58 +09:00
padding-bottom : 4em ;
2023-11-21 08:22:43 +09:00
}
. 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 ) {
. app-body . columns-area__panels__main {
width : 100 % ;
margin-left : -55px ;
}
}
2024-01-14 09:52:47 +09:00
2023-11-21 08:22:43 +09:00
/ * 👤 Account view
--------------- * /
. app-body . account__header {
2023-12-29 05:57:58 +09:00
padding-bottom : 5px ;
2023-11-21 08:22:43 +09:00
background-color : var ( --color-content-bg ) ;
}
@ media screen and ( max-width : 889px ) {
. app-body . account__header {
border-left : 0 ;
border-right : 0 ;
}
}
. app-body . account__header__image {
2024-02-28 07:32:52 +09:00
height : 200px ;
background-color : var ( --color-content-bg ) ;
2023-11-21 08:22:43 +09:00
border-bottom : 0 ;
2024-02-28 08:59:10 +09:00
margin : 0 ;
2024-02-28 07:32:52 +09:00
}
. app-body . account__header__image img {
background-color : var ( --color-content-secondary-bg ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . account__header__bar {
border : 0 ;
}
2023-12-16 01:14:59 +09:00
. app-body . account__header__bar . avatar {
transition : transform . 3s ;
}
. app-body . account__header__bar . avatar : active {
transform : scale ( . 92 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . account__header__bar . avatar . account__avatar {
border-radius : 50 % ;
2024-08-03 08:41:47 +09:00
margin : 0 ;
2024-02-12 00:30:48 +09:00
border-width : 4px ;
border-color : var ( --color-content-bg ) ;
2023-11-21 08:22:43 +09:00
width : 100px ! important ;
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 ;
}
2024-03-15 23:49:13 +09:00
. app-body . account__header__tabs__name h1 small > span : first-child {
2023-11-21 08:22:43 +09:00
opacity : . 7 ;
}
. app-body . account__header__tabs__name . icon-lock {
2024-01-27 03:03:09 +09:00
height : 20px ;
width : 16px ;
top : unset ;
2023-11-21 08:22:43 +09:00
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 ;
2023-12-30 06:15:44 +09:00
font-style : normal ;
2023-11-21 08:22:43 +09:00
}
. app-body . account__header__account-note textarea {
color : var ( --color-content-fg ) ;
2023-12-30 06:15:44 +09:00
border-radius : 8px ;
font-style : italic ;
2024-03-02 20:37:51 +09:00
margin : 0 ;
width : 100 % ;
outline : 1px solid transparent ;
outline-offset : -1px ;
transition : all . 2s ;
}
. app-body . account__header__account-note textarea : placeholder-shown {
padding-left : 0 ;
padding-right : 0 ;
2023-11-21 08:22:43 +09:00
}
. app-body . account__header__account-note textarea : focus {
background-color : var ( --color-accent-bg ) ;
2024-03-02 20:37:51 +09:00
padding-left : 10px ;
padding-right : 10px ;
2023-11-21 08:22:43 +09:00
}
2023-12-30 06:15:44 +09:00
. app-body . account__header__account-note textarea : not ( : placeholder-shown ) : not ( : focus ) {
2024-03-02 20:37:51 +09:00
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 ) ;
2023-12-30 06:15:44 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body . account__header__badges . account-role {
2024-03-15 23:49:13 +09:00
color : var ( --color-content-fg ) ;
border : 0 ;
border-radius : 50px ;
padding : 0 10px ;
height : 29px ;
background-color : var ( --color-content-secondary-bg ) ;
gap : 5px ;
}
. app-body . account__header__badges . account-role span : not ( . account-role__domain ) {
font-weight : 500 ;
2023-11-21 08:22:43 +09:00
}
. app-body . account-role svg {
opacity : 1 ;
2024-03-15 23:49:13 +09:00
color : var ( --color-accent ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
2024-03-12 23:13:34 +09:00
border : 0 ;
2023-11-21 08:22:43 +09:00
}
@ media ( prefers-color-scheme : dark ) {
. app-body . account__header__bio . account__header__fields {
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 {
display : block ;
content : " " ;
height : 1px ;
bottom : -1px ;
right : 15px ;
background-color : var ( --color-lines ) ;
left : 15px ;
position : absolute ;
border-radius : 50px ;
}
2023-12-26 09:07:59 +09:00
@ media ( prefers-color-scheme : dark ) {
. app-body . account__header__bio . account__header__fields dl : not ( : last-child ) : after {
background-color : var ( --color-accent-bg ) ;
}
}
2023-11-21 08:22:43 +09:00
. 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 ;
}
2024-06-27 20:06:35 +09:00
. app-body . account__header__bio . account__header__fields . verified : is ( a , dd ) ,
. app-body . hover-card . account-fields dl . verified dd a {
2023-11-21 08:22:43 +09:00
color : var ( --color-accent ) ;
2023-12-11 05:42:52 +09:00
gap : 5px ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
2023-12-08 22:00:05 +09:00
transform : scale ( 1 . 1 ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . account__header__bio . account__header__fields . verified : last-child {
border-bottom : 0 ;
}
2023-11-27 01:08:07 +09:00
. 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 ) ;
2024-08-03 08:41:47 +09:00
}
2023-11-27 01:08:07 +09:00
2023-11-21 08:22:43 +09:00
. app-body . follow-request-banner ,
. app-body . moved-account-banner {
2024-02-19 21:47:04 +09:00
background-color : var ( --color-content-secondary-bg ) ;
border-top : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
}
2024-02-03 23:16:29 +09:00
. app-body . account__header__tabs__buttons > button : first-child : active {
transform : scale ( . 95 ) ;
}
2024-03-15 23:49:13 +09:00
. app-body . account__domain-pill ,
. app-body . account__domain-pill__popout__handle {
background-color : color-mix ( in srgb , var ( --color-accent ) , transparent 88 % ) ;
color : var ( --color-accent ) ;
border-color : var ( --color-accent ) ;
border-radius : 8px ;
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 ;
2024-08-03 08:41:47 +09:00
}
2024-03-15 23:49:13 +09:00
. 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 ) ;
}
2024-06-27 20:06:35 +09:00
. app-body . hover-card {
2024-07-18 10:55:51 +09:00
background-color : color-mix ( in srgb , var ( --color-content-bg ) , transparent 10 % ) ;
2024-07-18 10:02:31 +09:00
-webkit-backdrop-filter : blur ( 10px ) ;
backdrop-filter : blur ( 10px ) ;
2024-06-27 20:06:35 +09:00
border-color : var ( --color-lines ) ;
}
2024-08-24 05:50:09 +09:00
. 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 ) ;
}
2024-07-24 23:11:43 +09:00
. app-body . hover-card . display-name__html {
font-weight : 600 ;
}
2024-07-18 10:55:51 +09:00
. 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 ) ;
}
@ 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 % ;
max-width : 30 % ;
text-align : left ;
font-weight : bold ;
text-transform : uppercase ;
font-size : 80 % ;
}
. app-body . hover-card . account-fields dl dd {
text-align : left ;
justify-content : flex-start ;
}
2024-03-15 23:49:13 +09:00
2023-11-21 08:22:43 +09:00
/ * ✨ Explore tab
-------------- * /
. app-body . explore__links {
background-color : var ( --color-content-bg ) ;
overflow : hidden ;
2023-11-25 00:21:10 +09:00
}
2023-12-02 00:31:28 +09:00
. layout-multiple-columns . explore__links . scrollable {
background-color : var ( --color-content-bg ) ;
2023-12-02 00:33:18 +09:00
overflow-y : auto ;
2023-12-02 00:31:28 +09:00
}
. app-body . explore__links . trends__item {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-content-bg ) ;
border-bottom : 2px solid var ( --color-content-secondary-bg ) ;
2024-02-28 05:33:01 +09:00
padding : 15px 18px ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2024-02-28 05:33:01 +09:00
. 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 ) {
2024-02-29 22:27:29 +09:00
padding : 15px 20px 6px 47px ;
2024-02-28 05:33:01 +09:00
margin-left : 3px ;
font-weight : 500 ;
color : var ( --color-fg-muted ) ;
border-left : 4px solid transparent ;
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 ;
}
. app-body . getting-started__trends . trends__item {
2024-02-29 22:27:29 +09:00
padding-left : 19px ;
2024-02-28 05:33:01 +09:00
}
@ media screen and ( max-width : 1174px ) {
. app-body . getting-started__trends {
display : none ;
}
}
. app-body . trends__item :: before {
background-image : var ( --icon-hashtag-accent ) ;
background-position : center ;
background-size : contain ;
background-repeat : no-repeat ;
2024-03-02 19:36:47 +09:00
min-width : 20px ;
2024-02-28 05:33:01 +09:00
width : 20px ;
height : 20px ;
transform : scale ( 1 . 45 ) ;
content : " " ;
display : block ;
}
. app-body . trends__item__name span {
white-space : pre-wrap ;
}
. app-body . trends__item__sparkline {
flex : 0 0 auto ;
position : relative ;
height : 30px ;
width : 30px ;
border-radius : 6px ;
overflow : hidden ;
background-color : var ( --color-content-secondary-bg ) ;
box-shadow : inset 0 -2px var ( --color-accent-bg ) ;
transform : scale ( 1 . 25 ) ;
transition : all . 3s ;
}
. app-body . getting-started__trends . trends__item__sparkline {
background-color : var ( --color-secondary-bg ) ;
}
@ media ( prefers-color-scheme : dark ) {
. app-body . getting-started__trends . trends__item__sparkline {
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 : " " ;
left : 0 ;
right : 0 ;
height : 2px ;
bottom : 0 ;
background-color : var ( --color-accent ) ;
opacity : . 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 ) ;
}
2023-11-21 08:22:43 +09:00
/* Hashtag header */
. app-body . hashtag-header {
font-size : 15px ;
2023-12-02 00:23:14 +09:00
padding : 24px 20px ;
2024-02-28 07:32:52 +09:00
margin : 10px ;
border-radius : 8px ;
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg ) ;
background-color : var ( --color-content-secondary-bg ) ;
2024-02-28 07:32:52 +09:00
border : 0 ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
margin-top : -5px ;
width : max-content ;
}
2023-12-02 00:23:14 +09:00
@ media screen and ( max-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 ;
2023-11-21 08:22:43 +09:00
}
}
2023-12-02 00:23:14 +09:00
. 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 ;
}
2023-11-21 08:22:43 +09:00
@ media screen and ( min-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 {
2023-12-29 05:57:58 +09:00
margin : 0 ;
2023-11-21 08:22:43 +09:00
background-color : var ( --color-content-bg ) ;
2023-12-29 05:57:58 +09:00
border-radius : 0 ;
2024-03-13 21:22:52 +09:00
border : 0 ;
2023-12-29 05:57:58 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . account-card__header {
padding : 0 ;
2023-12-29 05:57:58 +09:00
border-radius : 0 ;
2023-11-21 08:22:43 +09:00
height : 128px ;
overflow : hidden ;
}
. app-body . scrollable . account-card__bio : after {
background : linear-gradient ( 270deg , var ( --color-content-bg ) , transparent ) ;
}
2024-03-07 05:22:14 +09:00
. app-body . account-card__header img {
background-color : var ( --color-content-secondary-bg ) ;
}
2023-11-21 08:22:43 +09:00
. 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 {
2024-03-21 03:16:54 +09:00
color : var ( --color-content-fg ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . account-card__counters__item small {
opacity : . 7 ;
}
2024-03-21 03:16:54 +09:00
. account-card__title . display-name bdi . display-name__html {
font-weight : bold ;
}
2023-11-21 08:22:43 +09:00
. app-body . account-card__bio a {
color : var ( --color-accent ) ;
}
. app-body . filter-form {
2023-12-26 01:31:50 +09:00
background-color : var ( --color-content-secondary-bg ) ;
2023-12-29 05:57:58 +09:00
border-top : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . filter-form__column {
padding : 10px 15px ;
}
2024-01-13 04:31:27 +09:00
2024-05-10 02:45:30 +09:00
. app-body . explore__suggestions__card {
border-bottom : 2px solid var ( --color-content-secondary-bg ) ;
gap : 2px ;
padding-bottom : 14px ;
}
. app-body . explore__suggestions__card__source span {
background-color : var ( --color-content-secondary-bg ) ;
padding : 6px 12px ;
display : inline-block ;
border-radius : 50px ;
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 ) {
. 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 ) ;
}
}
2023-11-21 08:22:43 +09:00
/* 📰 Trending stories */
. app-body . story {
background-color : var ( --color-content-bg ) ;
2024-07-18 00:06:52 +09:00
transition : all . 3s ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2024-01-24 02:09:28 +09:00
. app-body . story__details__title {
font-weight : bold ;
2024-07-05 03:46:32 +09:00
transition : all . 3s ;
2024-01-24 02:09:28 +09:00
}
2024-07-05 03:46:32 +09:00
. app-body . story : has ( : is ( . story__thumbnail , . story__details__title ) : hover ) {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-content-bg-focus ) ;
}
2024-07-05 03:46:32 +09:00
. app-body . story__details__publisher {
2023-11-21 08:22:43 +09:00
color : var ( --color-fg ) ;
}
2024-07-05 03:46:32 +09:00
. app-body . story . story__details__publisher {
2024-02-18 05:16:35 +09:00
opacity : . 7 ;
2023-11-21 08:22:43 +09:00
transition : all . 3s ;
}
2024-07-05 03:46:32 +09:00
. app-body . story : has ( : is ( . story__thumbnail , . story__details__title ) : hover ) : is ( . story__details__publisher , . story__details__title ) {
2023-11-21 08:22:43 +09:00
color : var ( --color-accent ) ;
2024-02-18 05:16:35 +09:00
opacity : 1 ;
2023-11-21 08:22:43 +09:00
}
2024-08-26 23:22:22 +09:00
. app-body . story__details__shared {
color : var ( --color-fg-muted ) ;
}
2024-07-05 03:46:32 +09:00
. app-body . story__details__shared__pill {
background-color :
color-mix (
in srgb ,
var ( --color-accent ) ,
transparent 92 %
) ;
color : var ( --color-accent ) ;
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 ) ;
}
2023-11-25 01:53:37 +09:00
. app-body . story . expanded {
gap : 10px ;
padding-bottom : 20px ;
}
2023-11-21 08:22:43 +09:00
. app-body . story . expanded . story__thumbnail {
margin : 0 0 -25px ;
}
. app-body . story . expanded . story__thumbnail img {
2024-01-13 02:44:56 +09:00
margin : -5px -5px 30px ;
2023-11-26 22:14:25 +09:00
border-radius : 8px ;
2024-01-13 02:44:56 +09:00
width : calc ( 100 % + 10px ) ;
2023-11-21 08:22:43 +09:00
}
/* 🔍 Search field and search results */
. app-body . search {
margin-bottom : 10px ;
2023-12-29 05:57:58 +09:00
transition : transform . 3s ;
}
. app-body . search : has ( . search__icon : active ) {
transform : scale ( . 95 ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
2023-12-23 20:58:45 +09:00
font-weight : 500 ;
2024-01-23 21:15:04 +09:00
padding-inline-end : 45px ;
padding-inline-start : 16px ;
2024-01-13 03:20:43 +09:00
outline-offset : 0 ;
outline : 0 solid var ( --color-accent-bg ) ;
2023-12-21 00:00:03 +09:00
transition :
border-color . 2s ,
2024-01-13 03:20:43 +09:00
background-color . 2s ,
outline . 2s ;
2023-11-21 08:22:43 +09:00
}
. 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 {
2023-12-21 00:00:03 +09:00
border-color : var ( --color-accent ) ;
background-color : var ( --color-content-bg ) ;
2024-01-13 03:20:43 +09:00
outline : 3px solid var ( --color-accent-bg ) ;
2024-01-23 21:15:04 +09:00
border-radius : 8px ;
2023-12-21 00:00:03 +09:00
}
. app-body . search__input : focus :: placeholder ,
. app-body . compose-form . spoiler-input__input : focus :: placeholder {
color : var ( --color-content-fg ) ;
opacity : . 4 ;
2023-11-21 08:22:43 +09:00
}
. app-body . search__icon . icon {
2023-12-23 23:01:25 +09:00
padding : 5px ;
2024-01-13 08:08:58 +09:00
transform : scale ( 1 ) translateY ( -50 % ) ;
2023-12-23 23:01:25 +09:00
background-size : 24px ! important ;
2024-01-13 08:08:58 +09:00
top : 50 % ;
2024-01-23 21:15:04 +09:00
inset-inline-start : unset ;
inset-inline-end : 12px ;
2023-12-23 23:01:25 +09:00
}
. app-body . search__input : not ( : placeholder-shown ) + . search__icon : hover . icon {
2023-12-29 05:57:58 +09:00
background-image : var ( --icon-erase-active ) ;
2023-11-21 08:22:43 +09:00
}
. 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 {
2023-12-29 05:57:58 +09:00
border-radius : 0 ;
2024-03-15 00:48:57 +09:00
border : 0 ;
2023-11-21 08:22:43 +09:00
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 ) ;
}
2024-02-12 00:09:19 +09:00
. app-body : is ( . explore__search-results , . search-results__section ) . trends__item {
2023-12-02 07:22:05 +09:00
border-bottom : 2px solid var ( --color-content-secondary-bg ) ;
2023-11-21 08:22:43 +09:00
}
2024-02-12 00:09:19 +09:00
. 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 {
2023-11-21 08:22:43 +09:00
border-top : 1px solid var ( --color-lines ) ;
}
2024-02-12 00:09:19 +09:00
. 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 {
2023-11-21 08:22:43 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
}
. app-body . search-results__section {
2024-01-13 04:31:27 +09:00
background-color : var ( --color-content-bg ) ;
2023-11-21 08:22:43 +09:00
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 ;
2023-12-11 05:32:32 +09:00
}
. app-body . compose-panel : has ( > . search . active ) {
overflow : visible ;
2023-11-21 08:22:43 +09:00
}
. app-body . search__popout {
background-color : var ( --color-content-bg ) ;
border-radius : 8px ;
margin-top : 10px ;
border : 1px solid var ( --color-lines ) ;
2023-12-11 05:32:32 +09:00
animation : fadein-short . 2s 1 ;
2023-11-21 08:22:43 +09:00
}
. 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 {
2024-01-13 08:08:58 +09:00
align-items : center ;
border-radius : 6px ;
2023-11-21 08:22:43 +09:00
}
. app-body . search__popout__menu__item mark {
color : var ( --color-content-fg-bold ) ;
}
2023-12-26 01:16:06 +09:00
. app-body . search__popout__menu__item : is ( . icon-button , . icon-button . icon ) {
2024-01-13 08:08:58 +09:00
border-radius : 6px ;
2023-12-23 23:01:25 +09:00
transition : none ;
2023-12-20 08:33:40 +09:00
}
2023-12-26 01:16:06 +09:00
. app-body . search__popout__menu__item : is ( . selected , : active , : focus , : hover ) : is ( . icon-button , . icon-button . icon ) {
2023-12-11 05:50:06 +09:00
color : var ( --color-accent-fg ) ;
}
2023-12-26 01:16:06 +09:00
. 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 {
2023-12-02 07:31:52 +09:00
background-color : var ( --color-content-secondary-bg ) ;
color : var ( --color-accent ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
color : var ( --color-accent-fg ) ;
}
2024-02-29 23:13:05 +09:00
. app-body . search__popout__menu : nth-child ( 2 ) : not ( : has ( . search__popout__menu__message ) ) {
margin-bottom : 10px ;
}
2024-02-29 23:40:23 +09:00
. app-body . search__popout h4 : has ( + . search__popout__menu : last-child , + . search__popout__menu__message ) {
2024-02-29 23:13:05 +09:00
background-color : var ( --color-content-secondary-bg ) ;
padding-top : 15px ;
padding-left : 15px ;
padding-right : 15px ;
margin : 0 ;
border-radius : 6px 6px 0 0 ;
color : var ( --color-fg-muted ) ;
}
2024-02-29 23:56:35 +09:00
. app-body . search__popout__menu : last-child ,
. app-body . search__popout > . search__popout__menu__message : last-child {
2024-02-29 23:13:05 +09:00
margin : 0 0 -10px ;
background-color : var ( --color-content-secondary-bg ) ;
border-radius : 0 0 6px 6px ;
padding : 5px ;
}
2024-02-29 23:56:35 +09:00
. app-body . search__popout > . search__popout__menu__message : last-child {
2024-02-29 23:40:23 +09:00
padding : 5px 15px 15px ;
2024-02-29 23:13:05 +09:00
color : var ( --color-fg-muted ) ;
}
2024-02-29 23:56:35 +09:00
. app-body . search__popout__menu : last-child . search__popout__menu__item : not ( . selected , : active , : hover , : focus ) {
2024-02-29 23:40:23 +09:00
color : var ( --color-fg-muted ) ;
}
2024-02-29 23:56:35 +09:00
. app-body . search__popout__menu : last-child . search__popout__menu__item : not ( . selected , : active , : hover , : focus ) mark {
2024-02-29 23:13:05 +09:00
color : var ( --color-content-fg ) ;
2024-08-03 08:41:47 +09:00
}
2024-02-29 23:13:05 +09:00
2023-11-21 08:22:43 +09:00
@ media screen and ( max-width : 1174px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . search {
2023-11-21 08:22:43 +09:00
margin-bottom : 0 ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . explore__search-header {
2023-11-21 08:22:43 +09:00
padding-top : 2px ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . search__input {
2023-11-21 08:22:43 +09:00
padding : 13px ;
}
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . explore__search-header {
2023-11-21 08:22:43 +09:00
padding : 10px 0 ;
}
}
@ media screen and ( max-width : 889px ) {
2024-01-13 04:31:27 +09:00
. app-body : not ( . layout-multiple-columns ) . explore__search-header {
2023-11-21 08:22:43 +09:00
padding : 10px ;
}
}
@ keyframes makeawish {
0 % {
transform : scale ( 120 % ) translate ( 0 , 0 ) rotate ( 0deg ) ;
}
100 % {
transform : scale ( 200 % ) translate ( 100vw , 100vh ) rotate ( 600deg ) ;
}
}
2024-06-07 17:45:47 +09:00
. app-body : has ( . search__input [ value = "Tangerine UI" ] ) :: after ,
. app-body : has ( . search__input [ value = "tangerine ui" ] ) :: after {
content : "\1F34A" ;
2023-11-21 08:22:43 +09:00
position : fixed ;
display : block ;
text-align : center ;
width : 30px ;
height : 30px ;
font-size : 27px ;
line-height : 30px ;
top : -40px ;
left : -40px ;
2023-12-29 05:57:58 +09:00
animation : 10s linear 0s makeawish ;
2023-11-21 08:22:43 +09:00
}
/* Dismissable banners */
. app-body . dismissable-banner {
background-color : var ( --color-accent ) ;
box-shadow : 0 5px var ( --color-content-bg ) ;
2024-01-13 02:44:56 +09:00
border-radius : 8px ;
2023-12-29 05:57:58 +09:00
border : 0 ;
2024-01-13 02:44:56 +09:00
margin : 10px 10px 5px ;
2023-11-21 08:22:43 +09:00
}
. app-body . dismissable-banner__message h1 {
2023-11-25 02:07:44 +09:00
color : var ( --color-content-fg ) ;
margin-bottom : 8px ;
}
2023-11-25 21:07:22 +09:00
. app-body . dismissable-banner__message ,
. app-body . dismissable-banner . dismissable-banner__action . icon-button {
color : var ( --color-accent-fg ) ;
2023-11-25 02:07:44 +09:00
font-weight : normal ;
2023-11-21 08:22:43 +09:00
}
2023-11-25 21:07:22 +09:00
. app-body . dismissable-banner . dismissable-banner__action . icon-button : hover {
color : var ( --color-accent ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . dismissable-banner__message__actions__wrapper {
flex-flow : row-reverse ;
}
. app-body . dismissable-banner : has ( . dismissable-banner__message > img : first-child ) {
2023-11-25 02:07:44 +09:00
background : var ( --color-content-bg ) ;
2024-01-13 02:44:56 +09:00
margin : 0 ;
padding-top : 10px ;
2023-11-21 08:22:43 +09:00
padding-left : 10px ;
padding-right : 10px ;
2023-11-25 02:07:44 +09:00
padding-bottom : 10px ;
2024-01-13 02:44:56 +09:00
border-radius : 0 ;
border-top : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
2023-11-25 07:27:18 +09:00
. app-body . dismissable-banner : has ( . dismissable-banner__message > img : first-child ) . dismissable-banner__action . icon-button {
color : var ( --color-accent ) ;
}
2023-11-25 21:07:22 +09:00
. app-body . dismissable-banner : has ( . dismissable-banner__message > img : first-child ) . dismissable-banner__message {
color : var ( --color-content-fg ) ;
}
2023-11-21 08:22:43 +09:00
. 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 : 28px ;
padding : 6px 17px ;
}
2023-11-25 02:07:44 +09:00
. app-body . dismissable-banner__message__actions {
gap : 5px ;
2023-11-21 08:22:43 +09:00
}
/ * 🔔 Notifications
---------------- * /
. app-body . status . muted
2023-12-29 05:57:58 +09:00
: is (
. status__content ,
. status__content a ,
. status__content p ,
. status__display-name strong
) ,
2023-11-21 08:22:43 +09:00
. app-body . attachment-list__list a {
color : var ( --color-content-fg-muted ) ;
}
. app-body . notification . unread :: before ,
2024-07-23 20:42:36 +09:00
. app-body . status__wrapper . unread :: before ,
. app-body . notification-group--unread : before ,
. app-body . notification-ungrouped--unread : before {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-accent ) ;
width : 8px ;
border : 0 ;
top : 5px ;
height : auto ;
bottom : 5px ;
border-radius : 8px ;
left : 5px ;
2024-08-24 05:19:07 +09:00
z-index : 2 ;
2023-11-21 08:22:43 +09:00
}
. app-body . notification__message {
padding : 12px 12px 5px ;
2024-03-21 09:11:11 +09:00
background-color : var ( --color-post-bg ) ;
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg-bold ) ;
transition : all . 3s ;
}
. app-body . notification__display-name {
font-weight : bold ;
2023-12-18 19:23:56 +09:00
color : var ( --color-content-fg ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
margin-left : 38px ;
text-align : right ;
background-position : center right ;
}
@ media screen and ( max-width : 889px ) {
. app-body . notification__message . icon {
margin-left : 34px ;
}
}
. app-body . notification . status__wrapper {
padding-top : 0 ;
}
. app-body
2023-12-24 03:15:22 +09:00
: is (
. notification-favourite ,
. notification-reblog ,
2023-12-24 21:38:57 +09:00
. notification-poll ,
. notification-status
2023-12-24 03:15:22 +09:00
)
. status__action-bar {
2023-12-29 05:57:58 +09:00
display : none ;
2023-11-21 08:22:43 +09:00
}
2024-03-19 03:13:55 +09:00
. app-body . account ,
. app-body . notification-request {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-content-bg ) ;
2024-02-28 07:57:34 +09:00
border-bottom : 2px solid var ( --color-content-secondary-bg ) ;
2023-11-21 08:22:43 +09:00
padding-left : 22px ;
2024-07-18 10:07:15 +09:00
padding-top : 12px ;
2023-11-21 08:22:43 +09:00
}
2024-02-28 07:57:34 +09:00
. app-body . notification . account {
border-bottom : 0 ;
}
2023-11-21 08:22:43 +09:00
. 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 ) )
. display-name {
margin-bottom : 0 ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
@ media screen and ( min-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 ) ) {
padding-left : 27px ;
}
}
@ media screen and ( max-width : 1174px ) {
. app-body . account {
padding-left : 18px ;
}
}
. app-body . notification . account__relationship . icon-button {
padding : 5px ;
border-radius : 8px ;
2023-12-18 20:55:51 +09:00
transition : background-color . 2s ;
2023-11-21 08:22:43 +09:00
}
. app-body . notification . account__relationship . icon-button : first-child {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-confirm-bg ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . notification . account__relationship . icon-button : first-child : is ( : active , : focus , : hover ) {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-confirm ) ;
2023-11-21 08:22:43 +09:00
}
. 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 {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-reject-bg ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . notification . account__relationship . icon-button : last-child : is ( : active , : focus , : hover ) {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-reject ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . notification . account__relationship . icon-button : last-child : is ( : active , : focus , : hover ) . icon-times {
background-image : var ( --icon-reject-inv ) ;
}
2024-02-27 22:28:14 +09:00
@ media screen and ( max-width : 1174px ) {
. app-body . notification-list {
2024-03-21 03:16:54 +09:00
bottom : calc ( 5rem + var ( --safe-area-bottom ) ) ;
2024-02-27 22:28:14 +09:00
}
}
2024-02-26 21:56:52 +09:00
. app-body . notification-bar {
2024-03-12 23:40:49 +09:00
background-color : color-mix ( in srgb , var ( --color-content-bg ) , transparent 25 % ) ;
2024-02-26 21:56:52 +09:00
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 ) ;
}
2024-02-27 22:28:14 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
2024-03-16 05:54:10 +09:00
. app-body . column-settings h3 ,
. app-body . app-form__toggle ,
. 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 ;
}
2024-03-19 03:13:55 +09:00
. app-body . filtered-notifications-banner {
background-color : var ( --color-content-bg ) ;
color : var ( --color-accent ) ;
border : 0 ;
position : relative ;
padding : 25px ;
}
. app-body . filtered-notifications-banner :: before {
position : absolute ;
display : block ;
left : 10px ;
right : 10px ;
top : 10px ;
bottom : 10px ;
content : " " ;
background-color : var ( --color-content-secondary-bg ) ;
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 ,
2024-08-19 22:21:50 +09:00
. app-body . notification-request__name . filtered-notifications-banner__badge ,
. app-body . notification-request . account__avatar__counter {
2024-03-19 03:13:55 +09:00
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
border-radius : 50px ;
}
2024-08-19 22:21:50 +09:00
. app-body . notification-request . account__avatar__counter {
width : 19px ;
height : 19px ;
box-sizing : border-box ;
}
2024-04-02 01:28:16 +09:00
. app-body . filtered-notifications-banner__badge__badge {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
font-weight : 600 ;
2024-08-03 08:41:47 +09:00
}
2024-03-19 03:13:55 +09:00
. app-body . filtered-notifications-banner__text {
color : var ( --color-content-fg ) ;
}
. app-body . filtered-notifications-banner__text strong {
font-weight : 600 ;
}
2024-07-18 00:06:52 +09:00
. app-body . filtered-notifications-banner . notification-group__icon {
justify-content : center ;
}
2024-03-19 03:13:55 +09:00
. 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 ;
}
2024-07-18 00:06:52 +09:00
. app-body . notification-group {
padding : 16px 23px ;
}
. app-body . notification-group ,
. app-body . notification-ungrouped {
border : none ;
position : relative ;
}
. app-body : is ( . notification-group , . notification-ungrouped ) :: after ,
. app-body . filtered-notifications-banner :: after {
position : absolute ;
display : block ;
background-color : var ( --color-lines ) ;
height : 1px ;
width : calc ( 100 % - 78px ) ;
right : 0 ;
bottom : 0 ;
content : " " ;
opacity : . 7 ;
}
. app-body . notification-ungrouped {
padding : 0 ;
}
. app-body . notification-ungrouped : is ( . status__avatar , . account__avatar ) {
height : 46px ! important ;
width : 46px ! important ;
}
2024-08-03 08:41:47 +09:00
. app-body . notification-ungrouped
2024-07-18 00:06:52 +09:00
: 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 ;
z-index : 1 ;
position : relative ;
font-weight : 500 ;
2024-07-23 20:42:36 +09:00
background-color : var ( --color-post-bg ) ;
transition : background . 3s ;
2024-07-18 00:06:52 +09:00
}
. app-body . notification-ungrouped--direct . notification-ungrouped__header {
background-color : var ( --color-post-bg ) ;
transition : background . 3s ;
}
2024-08-24 05:19:07 +09:00
. app-body . notification-ungrouped--mention : not ( . notification-ungrouped--direct ) . notification-ungrouped__header {
display : none ;
2024-07-18 00:06:52 +09:00
}
2024-08-24 05:36:59 +09:00
. app-body : is ( . notification-group__icon , . notification-ungrouped__header__icon ) {
2024-08-24 05:19:07 +09:00
width : 46px ;
height : 28px ;
justify-content : end ;
}
. app-body : is ( . notification-group__icon , . notification-ungrouped__header__icon ) svg {
width : 22px ;
height : 22px ;
2024-07-18 00:06:52 +09:00
}
. app-body . notification-ungrouped . status :: before {
display : none ;
}
. app-body . notification-group__main__status {
border : 0 ;
background-color : var ( --color-content-secondary-bg ) ;
2024-08-24 05:19:07 +09:00
padding : 10px 12px 12px ;
transition :
background . 3s ,
transform . 3s ;
2024-07-18 00:06:52 +09:00
}
2024-08-24 05:19:07 +09:00
. app-body . notification-group__main__status : hover {
2024-07-18 00:06:52 +09:00
background-color : color-mix ( in srgb , var ( --color-accent ) , transparent 88 % ) ;
}
2024-08-24 05:19:07 +09:00
. app-body . notification-group__main__status : active {
transform : scale ( . 98 ) ;
}
. app-body
: 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 ;
}
2024-07-18 00:06:52 +09:00
. 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 ) ;
}
2024-08-24 05:19:07 +09:00
. app-body . notification-group__main__additional-content {
color : var ( --color-fg-muted ) ;
}
2024-07-18 00:06:52 +09:00
. app-body . notification-group__embedded-status . account__avatar {
opacity : 1 ;
}
2024-03-19 03:13:55 +09:00
2023-11-21 08:22:43 +09:00
/* 📋 Lists tab */
. app-body . column-inline-form {
2023-12-20 05:34:08 +09:00
background-color : var ( --color-content-secondary-bg ) ;
border : 1px solid var ( --color-lines ) ;
border-bottom : 0 ;
2023-11-21 08:22:43 +09:00
}
@ media screen and ( max-width : 889px ) {
. app-body . column-inline-form {
2023-12-20 05:34:08 +09:00
border-left : 0 ;
border-right : 0 ;
2023-11-21 08:22:43 +09:00
}
}
. app-body . column-inline-form label : is ( input , input : focus ) {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
border-radius : 8px ;
2023-12-20 05:34:08 +09:00
border : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . column-inline-form label input : focus {
2023-12-20 05:34:08 +09:00
border-color : var ( --color-accent ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
2023-11-25 05:46:06 +09:00
border-top : 0 ;
2023-11-21 08:22:43 +09:00
border-bottom : 0 ;
}
. app-body . getting-started . column-subheading {
color : var ( --color-fg-muted ) ;
}
@ media screen and ( max-width : 889px ) {
. app-body . item-list . column-subheading {
border-left : 0 ;
border-right : 0 ;
border-radius : 0 ;
}
}
2023-12-20 05:34:08 +09:00
. app-body . list-editor {
background-color : var ( --color-content-bg ) ;
}
2023-11-25 05:46:06 +09:00
. app-body . list-editor . drawer__inner {
background-color : var ( --color-content-bg ) ;
2023-12-20 05:34:08 +09:00
border-radius : 0 ;
2023-11-25 05:46:06 +09:00
}
. app-body . list-editor__search {
margin : 10px ;
2023-12-20 05:34:08 +09:00
background-color : var ( --color-content-bg ) ;
2023-11-25 05:46:06 +09:00
}
. app-body . list-editor . column-inline-form {
background-color : var ( --color-content-secondary-bg ) ;
border-top : 0 ;
border-right : 0 ;
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 ) ;
border : 1px solid var ( --color-accent-lines ) ;
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 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . item-list . column-link {
margin-left : 0 ;
width : 100 % ;
border-bottom : 2px solid var ( --color-content-secondary-separator ) ;
background-color : var ( --color-content-bg ) ;
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 {
2024-01-30 09:01:20 +09:00
border-bottom : 0 ;
2023-11-21 08:22:43 +09:00
}
@ media screen and ( max-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 ;
}
}
/* List adder dialog */
. app-body : is ( . list-adder , . list-adder__account , . list-adder__lists ) {
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 ;
}
. list-adder . list {
border-bottom : 2px solid var ( --color-content-secondary-separator ) ;
}
/* ➕ Follow requests */
. app-body # Follow-requests {
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 ;
}
. app-body . account--panel__button . icon-button {
2024-03-19 03:13:55 +09:00
width : 100 % ;
}
. app-body . account--panel__button . icon-button ,
. app-body . notification-request__actions . icon-button {
2023-11-21 08:22:43 +09:00
padding : 10px ;
box-sizing : border-box ;
border-radius : 8px ;
transition : all . 3s ;
2024-03-19 03:13:55 +09:00
border : 0 ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2024-03-19 03:13:55 +09:00
. app-body . account--panel__button : first-child . icon-button ,
. app-body . notification-request__actions . icon-button : last-child {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-confirm-bg ) ;
2024-03-19 03:13:55 +09:00
color : var ( --color-confirm-fg ) ;
2023-11-21 08:22:43 +09:00
}
2024-03-19 03:13:55 +09:00
. app-body . account--panel__button : first-child . icon-button : is ( : hover , : active ) ,
. app-body . notification-request__actions . icon-button : last-child : is ( : hover , : active ) {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-confirm ) ;
2024-03-19 03:13:55 +09:00
color : var ( --color-accent-fg ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2024-03-19 03:13:55 +09:00
. app-body . account--panel__button : nth-child ( 2 ) . icon-button ,
. app-body . notification-request__actions . icon-button : first-child {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-reject-bg ) ;
2024-03-19 03:13:55 +09:00
color : var ( --color-reject ) ;
2023-11-21 08:22:43 +09:00
}
2024-03-19 03:13:55 +09:00
. 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 ) {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-reject ) ;
2024-03-19 03:13:55 +09:00
color : var ( --color-accent-fg ) ;
2023-11-21 08:22:43 +09:00
}
@ media screen and ( max-width : 1174px ) {
. app-body # Follow-requests + . column-back-button--slim . column-back-button {
position : absolute ;
right : 0 ;
margin : 0 ;
width : auto ;
}
}
2024-02-03 23:05:48 +09:00
/* Inline Follow Suggesitons */
. app-body . inline-follow-suggestions {
2024-02-12 00:52:09 +09:00
background-color : var ( --color-content-bg ) ;
2024-02-03 23:05:48 +09:00
border-top : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
position : relative ;
}
. app-body . inline-follow-suggestions__header h3 {
font-weight : bold ;
color : var ( --color-content-fg ) ;
}
2024-02-28 08:40:50 +09:00
. app-body . inline-follow-suggestions__body__scrollable {
scroll-padding : 60px ;
}
2024-04-22 23:43:18 +09:00
. 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 ;
}
2024-02-03 23:05:48 +09:00
. app-body . inline-follow-suggestions__body__scrollable__card {
border-radius : 8px ;
2024-02-12 00:52:09 +09:00
background-color : var ( --color-content-secondary-bg ) ;
2024-02-14 23:26:12 +09:00
border : 0 ;
2024-02-03 23:05:48 +09:00
}
. 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 ) ;
2024-02-03 23:44:07 +09:00
border-radius : 8px ;
padding : 6px ;
2024-02-03 23:05:48 +09:00
transition : all . 3s ;
}
2024-02-27 23:39:01 +09:00
. app-body . inline-follow-suggestions__body__scroll-button {
opacity : 1 ;
}
2024-02-03 23:44:07 +09:00
. app-body . inline-follow-suggestions__body__scroll-button : is ( : active ) . inline-follow-suggestions__body__scroll-button__icon {
2024-02-03 23:05:48 +09:00
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 ) ;
}
2024-02-28 08:40:50 +09:00
. 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 ;
}
2024-02-12 00:30:48 +09:00
. app-body . inline-follow-suggestions__body__scroll-button . right {
background : linear-gradient ( to left , var ( --color-content-bg ) , transparent ) ;
margin-right : -15px ;
padding-right : 21px ;
}
2024-02-03 23:05:48 +09:00
. app-body . inline-follow-suggestions__body__scrollable__card . account__avatar {
border-radius : 50px ;
background-color : var ( --color-content-bg ) ;
2024-02-12 00:30:48 +09:00
border : 3px solid var ( --color-content-bg ) ;
2024-02-03 23:05:48 +09:00
box-shadow : 0 2px 5px rgba ( 0 , 0 , 0 , . 1 ) ;
2024-02-12 00:30:48 +09:00
transform : translateY ( 3px ) ;
2024-02-03 23:05:48 +09:00
}
2024-07-18 10:55:51 +09:00
. 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 ;
}
2023-12-11 05:32:32 +09:00
2023-11-21 08:22:43 +09:00
. 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 . 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 ,
. app-body . account__header__bio . account__header__fields a ,
. app-body . reply-indicator__content a . unhandled-link ,
. app-body . status__content a ,
. app-body . status__content a . hashtag ,
. app-body . status__content a . unhandled-link ,
. app-body . column-back-button ,
. app-body . about__section__title ,
. app-body . prose a ,
. app-body . column-link--transparent . active ,
. app-body . column-header > . column-header__back-button ,
. app-body . column-header__back-button ,
. app-body . interaction-modal__icon ,
. app-body . status__content a . mention ,
. app-body . status__content__read-more-button ,
. app-body . link-button ,
. app-body . translate-button button ,
. app-body . status__content__translate-button ,
. app-body . status__action-bar__dropdown . icon-button . active ,
. app-body . account__relationship . icon-button . active ,
. app-body . account__header__tabs__buttons . icon-button . active ,
. app-body . text-btn ,
. app-body . detailed-status__action-bar-dropdown . icon-button ,
. app-body . notification-bar-action {
color : var ( --color-accent ) ;
}
. app-body . icon-button ,
2023-12-20 10:24:15 +09:00
. app-body . icon-button . inverted {
2023-11-21 08:22:43 +09:00
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 ) ;
}
2023-12-22 01:33:25 +09:00
. app-body . account__header__tabs__buttons . icon-button : has ( . icon-ellipsis-v , . icon-close ) . active {
background-color : var ( --color-accent ) ;
2024-08-03 08:41:47 +09:00
}
2023-12-20 03:56:25 +09:00
. app-body . icon-button {
border-radius : 8px ;
transition : all . 2s ;
}
2023-11-21 08:22:43 +09:00
. app-body . icon-button : is ( : active , : focus , : hover ) {
background-color : var ( --color-accent-bg ) ;
color : var ( --color-accent ) ;
}
2023-12-24 10:07:20 +09:00
. app-body . account__header__tabs__buttons . icon-button . active . icon-bell {
animation : bell-ring . 4s ease-in 1 ;
transform-origin : top center ;
}
2023-12-24 21:41:58 +09:00
. app-body . account__header__tabs__buttons . icon-button . active : has ( . icon-bell ) : is ( : active , : focus ) {
2023-12-24 10:07:20 +09:00
background-color : var ( --color-content-secondary-bg ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . language-dropdown__dropdown {
background-color : var ( --color-content-bg ) ;
border-radius : 8px ;
border : 1px solid var ( --color-lines ) ;
2023-12-20 03:56:25 +09:00
box-shadow : var ( --dropdown-shadow ) ;
2024-01-23 22:23:41 +09:00
padding : 0 ;
2023-11-21 08:22:43 +09:00
}
. 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
2024-08-03 08:41:47 +09:00
. language-dropdown__dropdown__results__item : is ( . active , . active : hover )
2023-11-21 08:22:43 +09:00
: 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 ) ;
}
2024-02-03 23:16:29 +09:00
. 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 ) {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-accent-focus ) ;
}
2024-01-03 10:41:45 +09:00
. app-body . react-toggle {
transition : transform . 3s ;
}
. app-body . react-toggle : active {
transform : scale ( . 9 ) ;
}
2024-03-16 05:54:10 +09:00
. app-body . react-toggle-track ,
. app-body . react-toggle : hover : not ( . react-toggle--disabled ) . react-toggle-track {
2023-12-11 09:04:17 +09:00
background-color : var ( --color-fg-muted ) ;
transition : all . 2s ;
2023-11-21 08:22:43 +09:00
}
. app-body . react-toggle-thumb {
border : 0 ;
2023-12-11 09:04:17 +09:00
background-color : # ffffff ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2024-01-03 10:41:45 +09:00
. app-body . react-toggle--focus {
outline : 0 ;
2023-11-21 08:22:43 +09:00
}
. app-body . radio-button {
color : var ( --color-content-fg ) ;
}
2023-12-26 04:38:04 +09:00
. app-body . radio-button__input ,
2024-03-17 01:10:48 +09:00
. app-body . poll__input ,
. app-body . check-box__input {
2023-12-26 04:38:04 +09:00
border-width : 4px ;
border-color : var ( --color-content-bg ) ;
background-color : var ( --color-accent-bg ) ;
outline : 1px solid var ( --color-accent ) ! important ;
outline-offset : -1px ;
transition : transform . 3s ;
2024-03-17 01:10:48 +09:00
width : 20px ;
height : 20px ;
2023-11-21 08:22:43 +09:00
}
2023-12-26 04:38:04 +09:00
. app-body . radio-button : active . radio-button__input ,
2024-03-17 01:10:48 +09:00
. app-body . poll__option : active . poll__input ,
. app-body . check-box : active . check-box__input {
2023-12-26 04:38:04 +09:00
transform : scale ( . 9 ) ;
}
. app-body . radio-button__input . checked ,
. app-body . poll__input . active {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-accent ) ;
}
2024-03-17 01:10:48 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
. 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 ,
. app-body . dropdown-menu__item : is ( a , button ) {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
border-color : var ( --color-lines ) ;
}
. app-body . dropdown-menu__item a ,
. 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 ) ;
}
2024-04-13 08:17:19 +09:00
. app-body . dropdown-menu__container__list--scrollable {
overflow-y : auto ;
}
2023-11-28 20:57:46 +09:00
. app-body . privacy-dropdown__dropdown {
background-color : var ( --color-content-bg ) ;
border-radius : 8px ;
border : 1px solid var ( --color-lines ) ;
2023-12-20 03:56:25 +09:00
box-shadow : var ( --dropdown-shadow ) ;
padding : 8px ;
2023-11-28 20:57:46 +09:00
}
. 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 ) ;
2023-12-20 03:56:25 +09:00
border-radius : 6px ;
margin-bottom : 2px ;
2023-11-28 20:57:46 +09:00
}
2023-11-21 08:22:43 +09:00
. 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 ) ;
}
2023-11-28 20:57:46 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
. 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 ,
. 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 {
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 ) ;
}
2024-01-30 08:13:27 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
2023-12-11 05:32:32 +09:00
. app-body . dropdown-animation {
animation : fadein-short . 2s 1 ;
}
2023-11-21 08:22:43 +09:00
. 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 ) ;
}
. app-body . button . button-tertiary . button--destructive {
color : # df405a ;
background-color : rgba ( 223 , 64 , 90 , 0 . 3 ) ;
}
. 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 ;
}
@ media ( prefers-color-scheme : dark ) {
. app-body . button . button-tertiary . button--confirmation {
color : # 72cb9d ;
}
. app-body . button . button-tertiary . button--destructive {
color : # f3637b ;
}
}
2024-08-03 08:41:47 +09:00
. app-body
2024-01-09 01:18:59 +09:00
: is (
. block-modal__cancel-button ,
. confirmation-modal__cancel-button ,
. confirmation-modal__secondary-button ,
. mute-modal__cancel-button
) : not ( : hover ) {
2024-03-13 09:11:01 +09:00
background-color : color-mix ( in srgb , var ( --color-accent ) , transparent 90 % ) ;
color : var ( --color-accent ) ;
}
2024-08-03 08:41:47 +09:00
. app-body
2024-03-13 09:11:01 +09:00
: 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 ;
2024-01-09 01:18:59 +09:00
color : var ( --color-accent ) ;
2023-11-21 08:22:43 +09:00
}
2024-08-03 08:41:47 +09:00
. app-body
2024-02-03 23:16:29 +09:00
: 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 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . status__content a . hashtag {
color : var ( --color-accent ) ;
}
/ * 🖱 ️ Interaction modals
--------------------- * /
2023-12-17 23:42:55 +09:00
. app-body . modal-root__modal : not ( . media-modal ) {
2024-03-17 01:10:48 +09:00
border : 0 ;
outline : 1px solid var ( --color-lines-translucent ) ;
2023-11-21 08:22:43 +09:00
}
2024-03-21 03:16:54 +09:00
@ media screen and ( max-width : 1174px ) {
. app-body . modal-root__modal : not ( . media-modal ) {
margin-top : unset ;
}
}
2023-12-28 03:35:07 +09:00
. 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 ) ;
}
2024-03-17 01:10:48 +09:00
. 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__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 . safety-action-modal__header h1 {
font-weight : 600 ;
}
. 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 ) ;
}
2024-01-13 23:59:49 +09:00
. app-body . report-modal {
background-color : var ( --color-content-bg ) ;
}
2024-08-26 23:24:17 +09:00
. app-body . actions-modal {
background-color : var ( --color-content-bg ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . interaction-modal {
background-color : var ( --color-content-bg ) ;
2024-04-02 01:28:16 +09:00
border-radius : 10px ;
box-shadow : var ( --dropdown-shadow ) ;
2023-11-21 08:22:43 +09:00
}
. 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 {
vertical-align : middle ;
2023-11-25 00:47:07 +09:00
display : inline-block ;
transform : scale ( 1 . 4 ) translateX ( -2px ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . interaction-modal p {
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 {
2023-11-25 01:58:53 +09:00
border-color : var ( --color-lines ) ;
background-color : var ( --color-content-secondary-bg ) ;
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg ) ;
border-radius : 8px ;
2024-01-13 03:20:43 +09:00
outline : 0 solid var ( --color-accent-bg ) ;
transition : all . 2s ;
2023-11-21 08:22:43 +09:00
}
. 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 {
2023-11-25 01:58:53 +09:00
color : var ( --color-content-fg-muted ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . interaction-modal__login . focused . interaction-modal__login__input {
background-color : var ( --color-content-bg ) ;
border-color : var ( --color-accent ) ;
2024-01-13 03:20:43 +09:00
outline : 3px solid var ( --color-accent-bg ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . interaction-modal__login . search__popout {
border-color : var ( --color-lines ) ;
}
. app-body . interaction-modal . copypaste button {
padding : 8px 18px ;
}
2023-12-15 23:27:38 +09:00
. app-body . interaction-modal ,
2023-11-21 08:22:43 +09:00
. app-body . boost-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 . 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 ,
. app-body . mute-modal__action-bar > div ,
. app-body . boost-modal__container . status__content__text ,
. app-body . boost-modal__container . display-name strong . display-name__html ,
. app-body . boost-modal__container . status__info ,
. app-body . boost-modal__container . status__relative-time time ,
. 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 ,
: active ,
: active button ,
: focus ,
: focus button ,
: hover ,
: hover button ) {
2023-12-29 05:57:58 +09:00
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
2023-11-21 08:22:43 +09:00
}
/* Media modals */
2023-12-17 23:38:55 +09:00
. app-body . modal-root__overlay : has ( + div > . media-modal ) {
background-color : # 030303 ! important ;
2023-11-21 08:22:43 +09:00
}
2024-07-18 00:06:52 +09:00
. app-body . modal-root__overlay {
background-color : rgb ( 0 , 0 , 0 , . 4 ) ;
}
@ media ( prefers-color-scheme : dark ) {
. app-body . modal-root__overlay {
background-color : rgb ( 0 , 0 , 0 , . 9 ) ;
}
}
2024-08-03 08:41:47 +09:00
. app-body
2023-12-17 23:38:55 +09:00
: is (
. media-modal__close ,
. media-modal__nav ,
2023-12-29 05:57:58 +09:00
. media-modal__zoom-button
) {
background-color : # 1e1e1e ;
color : # 777777 ;
height : 44px ;
width : 44px ;
border-radius : 50 % ;
align-items : center ;
justify-content : center ;
padding : 0 ;
transition : . 2s all ;
2023-12-17 23:38:55 +09:00
}
2024-08-03 08:41:47 +09:00
. app-body
2023-12-17 23:38:55 +09:00
: is (
. media-modal__close ,
. media-modal__nav ,
. media-modal__zoom-button
) : is ( : active , : focus , : hover ) {
2023-12-29 05:57:58 +09:00
background-color : # 343434 ;
color : # ffffff ;
2023-12-17 23:38:55 +09:00
}
2024-08-03 08:41:47 +09:00
. app-body
2023-12-17 23:38:55 +09:00
: is (
. media-modal__close ,
. media-modal__nav ,
. media-modal__zoom-button )
svg {
2023-12-29 05:57:58 +09:00
transform : scale ( 1 . 3 ) ;
2023-12-17 23:38:55 +09:00
}
. 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 ) {
. app-body . media-modal__nav {
display : none ;
}
}
. app-body . media-modal__overlay . picture-in-picture__footer {
display : none ;
2023-11-21 08:22:43 +09:00
}
2023-12-15 07:02:06 +09:00
. 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 ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . media-modal__page-dot {
2023-12-17 23:38:55 +09:00
background-color : # 858585 ;
2023-11-21 08:22:43 +09:00
}
2023-12-15 07:02:06 +09:00
. app-body . media-modal__overlay . icon-external-link path {
fill : var ( --color-accent ) ;
}
. app-body . modal-root > div {
animation : slowin . 3s 1 ;
}
2023-12-21 05:01:09 +09:00
2023-11-21 08:22:43 +09:00
/* Report modals */
. app-body . report-dialog-modal__lead {
color : var ( --color-content-fg-muted ) ;
}
2024-01-03 10:41:45 +09:00
. 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 ) ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
padding : 15px ;
margin-bottom : 5px ;
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 ) {
border-top : 1px solid var ( --color-accent ) ;
border-left : 1px solid var ( --color-accent ) ;
border-right : 1px solid var ( --color-accent ) ;
border-bottom : 1px solid var ( --color-accent ) ;
2023-11-21 08:22:43 +09:00
}
2024-01-03 10:41:45 +09:00
. app-body . report-dialog-modal . dialog-option . poll__input ,
. app-body . report-dialog-modal__textarea : focus {
2023-11-21 08:22:43 +09:00
border-color : var ( --color-accent ) ;
}
. app-body . report-dialog-modal . dialog-option . poll__input . active {
background-color : var ( --color-accent ) ;
}
2024-01-03 10:41:45 +09:00
. 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 ,
. app-body . report-dialog-modal__toggle ,
. app-body . report-dialog-modal__subtitle ,
. app-body . report-modal__comment . setting-text-label ,
. app-body . report-dialog-modal . status__content__text p ,
. app-body . report-dialog-modal__title ,
. app-body . report-modal__target {
2023-11-21 08:22:43 +09:00
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 ,
2024-01-03 10:41:45 +09:00
. app-body . report-modal__container ,
. app-body . report-dialog-modal__container {
2023-11-21 08:22:43 +09:00
border-color : var ( --color-lines ) ;
}
2024-01-13 23:59:49 +09:00
. 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 ;
}
2024-01-03 10:41:45 +09:00
. app-body . report-dialog-modal__textarea {
background-color : var ( --color-secondary-bg ) ;
border : 1px solid var ( --color-lines ) ;
border-radius : 8px ;
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg ) ;
}
2024-01-03 10:41:45 +09:00
. app-body . report-dialog-modal__textarea :: placeholder {
2023-11-21 08:22:43 +09:00
color : var ( --color-content-fg ) ;
2024-01-03 10:41:45 +09:00
opacity : . 5 ;
}
2023-11-21 08:22:43 +09:00
/* 🖼️ Picture in Picture */
. app-body . picture-in-picture {
box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , . 2 ) ;
border-radius : 8px ;
2023-12-15 07:02:06 +09:00
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 ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
2023-12-15 07:02:06 +09:00
. app-body . picture-in-picture-placeholder {
border-radius : 8px ;
background-color : var ( --color-content-secondary-bg ) ;
border-color : var ( --color-lines ) ;
color : var ( --color-accent ) ;
}
2023-11-21 08:22:43 +09:00
/* ⏯️ Video controls */
. app-body . video-player__seek__progress ,
. app-body . video-player__volume__handle ,
. app-body . video-player__volume__current ,
. app-body . video-player__seek__handle {
background-color : var ( --color-accent ) ;
}
2023-12-02 02:30:32 +09:00
/* 📄 Meta footer */
2023-12-02 02:03:24 +09:00
. app-body . link-footer {
2023-12-20 07:12:46 +09:00
margin-bottom : 20px ;
margin-left : 10px ;
margin-right : 10px ;
2023-12-02 02:03:24 +09:00
display : flex ;
flex-flow : column ;
2024-01-13 01:55:52 +09:00
padding : 20px 0 0 ;
2023-12-02 02:03:24 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body . link-footer p ,
. app-body . link-footer a {
color : var ( --color-fg-muted ) ;
}
2023-12-02 02:03:24 +09:00
. app-body . link-footer :: after {
2024-02-28 05:33:01 +09:00
content : var ( --meta ) ;
2023-12-02 02:03:24 +09:00
color : var ( --color-fg-muted ) ;
order : 10 ;
}
2023-11-21 08:22:43 +09:00
/* Server banner */
. 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 ;
2024-02-27 22:13:20 +09:00
border : 1px solid var ( --color-lines-translucent ) ;
border-bottom : 0 ;
background-color : var ( --color-content-bg ) ;
box-sizing : border-box ;
2023-11-21 08:22:43 +09:00
}
. app-body . server-banner__description {
padding : 20px 15px 20px ;
margin-bottom : 0 ;
background-color : var ( --color-content-bg ) ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
2024-08-17 02:45:29 +09:00
color : var ( --color-content-fg ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . server-banner__meta {
padding : 0 15px 20px ;
background-color : var ( --color-content-bg ) ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
gap : 0 ;
margin : 0 ;
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 {
2024-03-12 04:24:50 +09:00
color : var ( --color-content-fg ) ;
font-size : 15px ;
2023-11-21 08:22:43 +09:00
}
. app-body . server-banner__number-label {
color : var ( --color-content-fg ) ;
}
. app-body . server-banner . account {
background-color : transparent ;
box-shadow : none ;
padding : 0 ;
border-left : 0 ;
border-right : 0 ;
2024-02-28 08:40:50 +09:00
border-bottom : 0 ;
2023-11-21 08:22:43 +09:00
}
2024-02-28 07:32:52 +09:00
. app-body . server-banner . account . display-name__account {
opacity : . 7 ;
}
2023-11-21 08:22:43 +09:00
. 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 ;
2024-03-12 04:24:50 +09:00
background-color : color-mix ( in srgb , var ( --color-accent ) , transparent 82 % ) ;
2023-11-21 08:22:43 +09:00
color : var ( --color-accent ) ;
}
2024-07-18 10:55:51 +09:00
. app-body . hover-card . button : not ( . button--destructive ) {
2024-07-18 00:38:43 +09:00
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
line-height : 22px ;
padding : 10px 18px ;
}
2024-07-24 23:24:04 +09:00
. app-body . hover-card . button : not ( . button--destructive ) : hover {
background-color : var ( --color-accent-focus ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . button : is ( . button-secondary , . button-tertiary ) : hover {
2024-03-13 09:11:01 +09:00
background-color : color-mix ( in srgb , var ( --color-accent ) , transparent 70 % ) ;
2024-02-28 09:13:42 +09:00
}
2024-07-18 00:38:43 +09:00
. app-body . button . button--destructive : is ( : active , : hover , : focus ) {
background-color : var ( --color-reject ) ;
color : var ( --color-accent-fg ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . sign-in-banner . button ,
. app-body . button : is ( . button-secondary , . button-tertiary ) {
padding : 10px 18px ;
}
2023-12-16 01:14:59 +09:00
. app-body . sign-in-banner . button : active ,
. app-body . button : is ( . button-secondary , . button-tertiary ) : active {
transform : scale ( . 95 ) ;
}
2023-11-21 08:22:43 +09:00
@ media screen and ( max-width : 1174px ) {
. app-body . button . button-tertiary {
padding : 7px 18px ;
}
}
2024-01-13 21:39:32 +09:00
. app-body . sign-in-banner {
2024-08-24 08:48:55 +09:00
padding : 10px ;
}
. app-body . navigation-panel__sign-in-banner hr {
display : block ;
border-color : var ( --color-lines-translucent ) ;
margin : 12px 15px ;
opacity : . 5 ;
2024-01-13 21:39:32 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body . sign-in-banner p {
2024-02-28 05:33:01 +09:00
color : var ( --color-fg-muted ) ;
2024-02-29 23:28:19 +09:00
padding : 0 5px 5px ;
2023-11-21 08:22:43 +09:00
}
2024-06-27 20:06:35 +09:00
. app-body . sign-in-banner p strong {
2024-08-24 08:48:55 +09:00
color : var ( --color-fg ) ;
2024-08-24 09:13:15 +09:00
font-weight : 500 ;
2024-06-27 20:06:35 +09:00
}
2024-08-24 08:48:55 +09:00
. app-body . sign-in-banner p : nth-child ( 2 ) {
font-size : 85 % ;
line-height : 18px ;
}
2024-06-27 20:06:35 +09:00
. app-body . sign-in-banner p {
margin-bottom : 25px ;
}
. app-body . sign-in-banner p : first-child {
margin-bottom : 5px ;
}
2023-11-21 08:22:43 +09:00
/* 🤗 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 ) ;
}
. app-body . onboarding__steps__item ,
. app-body . onboarding__link {
background-color : var ( --color-content-secondary-bg ) ;
2023-12-18 01:09:35 +09:00
margin-bottom : 8px ;
2023-11-21 08:22:43 +09:00
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 ) ;
}
2023-11-25 01:50:42 +09:00
. app-body . onboarding__steps__item__description h6 ,
2023-11-21 08:22:43 +09:00
. 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 ) ;
}
2024-03-13 08:39:05 +09:00
. 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 % ) ;
position : absolute ;
inset-inline-start : 50 % ;
top : 50 % ;
}
2023-11-25 01:50:42 +09:00
. 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 {
2023-12-17 04:30:16 +09:00
background : var ( --color-accent-bg ) ;
2023-11-25 01:50:42 +09:00
}
. 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
) {
2024-01-13 04:31:27 +09:00
background-color : var ( --color-content-secondary-bg ) ;
border-color : var ( --color-lines ) ;
border-radius : 8px ;
color : var ( --color-content-fg ) ;
2023-11-25 01:50:42 +09:00
}
. 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 ) {
2024-01-13 04:31:27 +09:00
border-color : var ( --color-accent ) ;
2023-11-25 01:50:42 +09:00
}
. app-body . column-title {
margin : -20px -20px 30px ;
2023-12-29 05:57:58 +09:00
padding : 50px 40px 40px ;
2023-11-25 01:50:42 +09:00
}
2023-12-17 04:30:16 +09:00
. app-body . column-title : not ( : has ( . onboarding__illustration ) ) {
background-color : var ( --color-content-secondary-bg ) ;
}
2023-11-25 01:50:42 +09:00
. app-body . column-title : has ( + . simple_form ) {
margin-bottom : 0 ;
2023-11-25 02:15:35 +09:00
background-color : var ( --color-content-secondary-bg ) ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
. 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 ;
}
. app-body . copy-paste-text {
background-color : var ( --color-accent-bg ) ;
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 ) ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
/* 📢 Announcements */
. app-body . announcements ,
. app-body . announcements :: after {
background-color : var ( --color-content-secondary-bg ) ;
color : var ( --color-content-fg ) ;
}
. app-body . announcements {
overflow : visible ;
z-index : 0 ;
box-shadow : 0 -20px var ( --color-bg ) ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
2024-08-26 23:39:26 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . announcements__item strong {
font-weight : 800 ;
color : var ( --color-content-fg-bold ) ;
}
. app-body . announcements__item__unread {
color : var ( --color-accent ) ;
2023-12-11 09:49:15 +09:00
background-color : var ( --color-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . announcements__pagination ,
. app-body . announcements__pagination . icon-button {
color : var ( --color-content-fg ) ;
}
2023-12-11 09:49:15 +09:00
. app-body . announcements__pagination > * {
vertical-align : middle ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body . reactions-bar__item {
2023-12-11 09:49:15 +09:00
background-color : var ( --color-accent-bg ) ;
border-radius : 8px ;
padding : 2px 8px ;
}
2024-08-26 23:44:20 +09:00
. app-body . reactions-bar . emoji-picker-dropdown . icon-button {
padding : 3px ;
}
2023-12-11 09:49:15 +09:00
. app-body . reactions-bar__item : is ( : active , : hover , : focus ) {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-content-bg ) ;
}
2024-08-26 23:44:20 +09:00
. app-body . reactions-bar__item . active ,
. app-body . reactions-bar . emoji-picker-dropdown . icon-button . active . inverted {
2023-11-21 08:22:43 +09:00
background-color : var ( --color-accent ) ;
}
. app-body . reactions-bar__item__count ,
. app-body . reactions-bar__item__count . animated-number {
2023-12-11 09:49:15 +09:00
color : var ( --color-accent ) ;
}
. app-body . reactions-bar__item : is ( : active , : hover , : focus ) . reactions-bar__item__count . animated-number {
2023-11-21 08:22:43 +09:00
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 ) {
. app-body . announcements {
box-shadow : none ;
2024-08-26 23:39:26 +09:00
margin-top : 1px ;
border-left : 0 ;
border-right : 0 ;
margin-inline-start : -45px ;
margin-inline-end : -55px ;
2023-11-21 08:22:43 +09:00
}
. 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 ;
}
2023-11-25 21:26:20 +09:00
. app-body . regeneration-indicator {
background-color : var ( --color-content-bg ) ;
}
@ media screen and ( min-width : 890px ) {
. app-body . regeneration-indicator {
padding-top : 50px ;
padding-bottom : 40px ;
}
}
2023-11-21 08:22:43 +09:00
/ * 📜 About page
------------- * /
. app-body . scrollable . about {
background-color : var ( --color-content-bg ) ;
border : 1px solid var ( --color-lines ) ;
2024-02-01 03:48:46 +09:00
border-bottom : 0 ;
2023-11-21 08:22:43 +09:00
display : flex ;
flex-flow : column ;
2023-12-16 01:14:59 +09:00
padding-bottom : 20px ;
2023-12-26 01:28:32 +09:00
z-index : 1 ;
2023-11-21 08:22:43 +09:00
}
@ media screen and ( max-width : 889px ) {
. app-body . scrollable . about {
border-left : 0 ;
border-right : 0 ;
}
}
. app-body . about__header {
order : 1 ;
margin-bottom : 10px ;
}
. app-body . about__section : nth-child ( 3 ) {
order : 3 ;
}
. app-body . about__meta {
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 ( 3 ) > 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 ,
. app-body . about__meta {
margin-bottom : 10px ;
}
2023-12-16 01:14:59 +09:00
. app-body . about__header > h1 {
color : var ( --color-content-fg ) ;
margin : 30px 0 0 20px ;
text-align : left ;
font-variant : small-caps ;
font-size : 20px ;
}
. 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 ;
2023-11-21 08:22:43 +09:00
}
@ media screen and ( min-width : 890px ) {
. app-body . scrollable . about {
2024-02-01 03:48:46 +09:00
border-radius : 8px 8px 0 0 ! important ;
2023-11-21 08:22:43 +09:00
}
. app-body . about__header__hero {
2024-02-29 23:35:44 +09:00
border-radius : 6px 6px 0 0 ;
2023-11-21 08:22:43 +09:00
}
}
2023-11-25 00:26:06 +09:00
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
. app-body . scrollable . about {
margin-top : 10px ;
}
}
2023-11-21 08:22:43 +09:00
. 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 ;
padding : 0 ;
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 ) {
. 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 ) ;
background-color : var ( --color-content-secondary-bg ) ;
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 ( 3 ) ) . about__section__body {
border : 0 ! important ;
background-color : var ( --color-content-secondary-bg ) ;
border-radius : 0 0 8px 8px ;
}
. app-body . prose ,
. app-body . prose p ,
. app-body . prose b ,
. app-body . prose h1 ,
. app-body . prose h2 ,
. app-body . prose h3 ,
. app-body . prose h4 ,
. app-body . prose h5 ,
. app-body . prose h6 ,
. app-body . prose strong ,
. app-body . rules-list ,
. app-body . about__domain-blocks__domain h6 ,
. app-body . about__domain-blocks__domain__type {
color : var ( --color-content-fg ) ;
}
2023-12-20 08:59:53 +09:00
. app-body . prose ul > li : before {
background-color : var ( --color-content-fg ) ;
opacity : . 3 ;
top : . 55em ;
width : 7px ;
height : 7px ;
2023-11-21 08:22:43 +09:00
}
. app-body . about__section__body . prose hr {
border-color : var ( --color-content-secondary-separator ) ;
margin-top : 2em ;
margin-bottom : 2em ;
border-width : 3px ;
}
2024-07-18 10:55:51 +09:00
. app-body . hover-card__bio a ,
. app-body . hover-card . account-fields a {
2024-06-27 20:06:35 +09:00
text-decoration : none ;
color : var ( --color-accent ) ;
}
2023-11-21 08:22:43 +09:00
. app-body . about__section__body . prose a ,
. app-body . about__section__body . prose a : hover ,
2024-06-27 20:06:35 +09:00
. app-body . prose a strong ,
. app-body . hover-card__bio a span {
2023-11-21 08:22:43 +09:00
color : var ( --color-accent ) ;
2023-12-16 01:14:59 +09:00
text-decoration-line : underline ;
text-decoration-color : var ( --color-accent-bg ) ;
text-decoration-thickness : 2px ;
text-underline-offset : 2px ;
2023-11-21 08:22:43 +09:00
}
2024-08-25 01:17:22 +09:00
. app-body . about__section__body . prose a : hover : is ( span , strong ) ,
2024-06-27 20:06:35 +09:00
. app-body . hover-card__bio a : hover {
2023-12-16 01:14:59 +09:00
text-decoration-color : var ( --color-accent ) ;
2023-11-21 08:22:43 +09:00
}
. app-body . about__section__body . prose small . lang_label {
margin-left : -2em ;
margin-top : 1px ;
display : block ;
color : var ( --color-content-fg-muted ) ;
font-weight : bold ;
font-size : 80 % ;
float : left ;
}
. about__section . active . about__section__title {
background-color : var ( --color-accent-bg ) ;
}
2024-03-21 10:34:56 +09:00
. 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 ;
}
2023-11-21 08:22:43 +09:00
. app-body . rules-list li {
2024-03-21 10:34:56 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
2023-11-21 08:22:43 +09:00
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 ) ;
}
2023-12-15 23:27:38 +09:00
@ media screen and ( min-width : 1175px ) {
. app-body . about : is ( . link-footer , . about__footer ) {
display : none ;
}
}
2023-11-21 08:22:43 +09:00
2024-02-19 22:41:00 +09:00
/* Keyboard shortcuts page */
. keyboard-shortcuts kbd {
background-color : var ( --color-content-secondary-bg ) ;
border : 1px solid var ( --color-lines ) ;
box-shadow : 0 1px var ( --color-lines-translucent ) ;
color : var ( --color-content-fg ) ;
border-radius : 5px ;
padding : 3px 8px ;
margin : 0 4px ;
font-weight : 500 ;
}
2023-11-21 08:22:43 +09:00
2024-08-03 08:41:47 +09:00
/* Privacy Policy page */
2023-11-21 08:22:43 +09:00
. app-body . column > . scrollable . privacy-policy {
border : 1px solid var ( --color-lines ) ;
background-color : var ( --color-content-bg ) ;
2023-12-17 04:30:16 +09:00
padding-bottom : 20px ;
2023-12-26 01:28:32 +09:00
z-index : 1 ;
2023-11-21 08:22:43 +09:00
}
2023-11-25 01:50:42 +09:00
@ media screen and ( min-width : 1175px ) {
. app-body : not ( : has ( # tabs-bar__portal > * ) ) . column > . scrollable . privacy-policy {
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
}
}
2023-11-21 08:22:43 +09:00
/* 👋 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 ,
. app-body . about__footer , /* Hide meta footer */
. app-body . server-banner__introduction , /* Hide generic mastodon server introduction in sidebar */
. app-body . search-banner ~ . search , /* Hide search field for logged out users */
. app-body . account__header__bio . account__header__fields > dl : first-child /* Hide "Joined" field on profiles */ {
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 ;
}
. 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 ;
height : 40px ;
padding : 5px ;
margin : 5px ;
box-sizing : border-box ;
border : 0 ;
}
. layout-multiple-columns . drawer__tab . icon {
transform : scale ( 1 . 2 ) ;
2024-08-03 08:41:47 +09:00
}
2024-02-12 00:52:09 +09:00
. layout-multiple-columns . drawer__tab : active {
transform : scale ( . 9 ) ;
}
2023-11-21 08:22:43 +09:00
. 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 {
2024-02-19 22:15:36 +09:00
background-image : var ( --icon-globe ) ;
2023-11-21 08:22:43 +09:00
}
. 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 ) ;
}
. layout-multiple-columns . flex-spacer ,
. layout-multiple-columns . getting-started ,
. layout-multiple-columns . getting-started__wrapper ,
. layout-multiple-columns . getting-started . column-link ,
. layout-multiple-columns . getting-started . column-subheading {
background-color : var ( --color-bg ) ;
}
2023-12-29 05:57:58 +09:00
. layout-multiple-columns . scrollable . getting-started {
border-left : 0 ;
border-right : 0 ;
background-color : var ( --color-bg ) ;
}
2023-11-21 08:22:43 +09:00
. 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 ) ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
. app-body . getting-started . column-link__badge {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
border-radius : 8px ;
line-height : 15px ;
font-weight : bold ;
padding-left : 8px ;
padding-right : 8px ;
}
2024-02-29 02:51:32 +09:00
. layout-multiple-columns . getting-started__trends . trends__item {
padding-left : 16px ;
}
. layout-multiple-columns . getting-started__trends h4 > : is ( a , span ) {
2024-02-29 22:27:29 +09:00
padding-left : 45px ;
2024-02-29 02:51:32 +09:00
}
2023-11-21 08:22:43 +09:00
. layout-multiple-columns : is ( . column-header , . column-back-button ) {
background-color : var ( --color-content-bg ) ;
}
2024-08-03 08:41:47 +09:00
2023-11-21 08:22:43 +09:00
. layout-multiple-columns . column-header__setting-btn {
font-weight : 600 ;
2024-08-03 08:41:47 +09:00
}
2023-11-21 08:22:43 +09:00
. layout-multiple-columns . column : has ( > . getting-started ) {
width : 330px ;
}
. layout-multiple-columns
. column : has ( > . getting-started )
: is ( . column-header , . column-back-button ) ,
. layout-single-column . navigation-bar : has ( + . getting-started ) {
display : none ;
}
2023-12-26 09:51:41 +09:00
. layout-multiple-columns . getting-started__trends {
margin-bottom : 10px ;
}
2024-01-13 04:31:27 +09:00
. layout-multiple-columns . search-results__header ,
. layout-multiple-columns . explore__search-header {
2023-11-21 08:22:43 +09:00
display : none ;
}
. layout-multiple-columns . drawer {
width : 280px ;
transition : width . 3s ;
}
. layout-multiple-columns
. drawer : has ( > . drawer__pager > . drawer__inner > . search-results > . search-results__section ) {
width : 400px ;
}
2024-01-13 03:20:43 +09:00
. layout-multiple-columns . drawer__inner : has ( > . search-results > . search-results__section ) {
2024-02-12 00:09:19 +09:00
z-index : 2 ;
2024-01-13 03:20:43 +09:00
background-color : var ( --color-content-bg ) ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
2023-11-21 08:22:43 +09:00
. layout-multiple-columns
. 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 {
border-radius : 8px 8px 0 0 ;
}
. layout-multiple-columns . drawer__pager {
border-radius : 0 ;
2024-03-16 02:19:51 +09:00
border : 0 ;
2023-11-21 08:22:43 +09:00
}
. layout-multiple-columns
. drawer
> . search : has ( + . drawer__pager > . drawer__inner > . search-results > . search-results__section )
> . search__popout {
border-radius : 0 0 8px 8px ;
margin-top : 0 ;
}
2023-12-26 09:31:00 +09:00
. layout-multiple-columns . compose-form {
padding : 0 ;
}
2024-01-13 03:20:43 +09:00
. layout-multiple-columns . drawer__inner : not ( : has ( > . search-results ) ) :: after {
2024-02-28 05:33:01 +09:00
content : var ( --meta ) ;
2023-12-26 09:47:26 +09:00
color : var ( --color-fg-muted ) ;
padding : 12px ;
position : absolute ;
bottom : 0 ;
2024-03-16 02:21:26 +09:00
z-index : -1 ;
2023-12-26 09:47:26 +09:00
}
. layout-multiple-columns . link-footer :: before ,
. layout-multiple-columns . link-footer :: after {
display : none ;
}
2023-11-21 08:22:43 +09:00
@ media screen and ( min-width : 630px ) and ( max-width : 1174px ) {
. layout-multiple-columns
: is (
. column-header ,
. column-back-button
) {
2024-01-13 04:31:27 +09:00
border-top : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
border-left : 1px solid var ( --color-lines ) ;
border-top-left-radius : 8px ! important ;
border-top-right-radius : 8px ! important ;
2023-11-21 08:22:43 +09:00
}
}
2023-12-02 04:45:30 +09:00
. app-body . switch-to-advanced {
background-color : var ( --color-accent-bg ) ;
border-radius : 8px ;
color : var ( --color-content-fg ) ;
}
. app-body . switch-to-advanced . switch-to-advanced__toggle {
color : var ( --color-accent ) ;
}
2024-02-29 02:45:00 +09:00
/ * Popular hashtag icons
--------------------- * /
. app-body
. 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 (
2024-02-29 23:27:48 +09:00
[ href $ = "day" i ] ,
2024-03-12 21:41:54 +09:00
[ href $ = "tag" i ] ,
2024-02-29 02:45:00 +09:00
[ 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 ] ,
2024-03-04 21:45:46 +09:00
[ href * = "dimanche" i ] ,
[ href * = "lunes" i ] ,
[ href * = "martes" i ] ,
[ href * = "miercoles" i ] ,
[ href * = "jueves" i ] ,
[ href * = "viernes" i ] ,
[ href * = "sabado" i ] ,
[ href * = "domingo" i ]
2024-02-29 02:45:00 +09:00
)
) :: before {
background-image : var ( --icon-calendar ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
2024-03-07 23:10:37 +09:00
[ href * = "tune" i ] ,
[ href $ = "/np" i ] ,
2024-02-29 02:45:00 +09:00
[ href * = "nowplaying" i ] ,
[ href * = "singit" i ] ,
[ href * = "music" i ] ,
[ href * = "eurovision" i ] ,
[ href * = "song" i ] ,
2024-03-02 09:59:33 +09:00
[ href $ = "synth" i ] ,
2024-03-02 19:41:23 +09:00
[ href $ = "jazz" i ] ,
[ href $ = "rock" i ] ,
[ href $ = "rap" i ] ,
[ href $ = "BandcampFriday" i ] ,
2024-03-04 21:45:46 +09:00
[ href * = "Jukebox" i ] ,
[ href * = "/kpop" i ] ,
[ href * = "/rock" i ] ,
[ href $ = "/pop" i ]
2024-02-29 02:45:00 +09:00
)
) :: before {
background-image : var ( --icon-music ) ;
}
. app-body
2024-03-02 20:15:02 +09:00
. trends__item : has (
. trends__item__name a : is (
[ href * = "eurovision" i ]
)
) :: before {
background-image : var ( --icon-microphone ) ;
}
. app-body
2024-02-29 02:45:00 +09:00
. 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 ] ,
2024-06-19 07:34:42 +09:00
[ href $ = "cinema" i ] ,
2024-02-29 02:45:00 +09:00
[ href * = "nowwatching" i ] ,
[ href * = "WatchingNow" i ] ,
2024-03-11 07:50:40 +09:00
[ href * = "movie" i ] ,
[ href * = "/cinema" i ] ,
[ href * = "/oscars" i ]
2024-02-29 02:45:00 +09:00
)
) :: 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 ] ,
2024-03-02 19:41:23 +09:00
[ href * = "selfie" i ] ,
2024-03-02 20:15:02 +09:00
[ href * = "/ShotWith" i ] ,
[ href * = "WindowFriday" i ] ,
2024-03-07 05:09:53 +09:00
[ href * = "FensterFreitag" i ] ,
[ href $ = "/instagram" i ]
2024-02-29 02:45:00 +09:00
)
) :: 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 ] ,
2024-06-19 07:34:42 +09:00
[ href $ = "/sky" i ] ,
2024-02-29 02:45:00 +09:00
[ href * = "skyblue" i ] ,
[ href * = "ocean" i ]
)
) :: before {
background-image : var ( --icon-sunset ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
[ href * = "gift" i ] ,
[ 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 ] ,
2024-03-04 21:45:46 +09:00
[ href * = "environment" i ] ,
[ href * = "/garden" i ] ,
2024-03-07 05:09:53 +09:00
[ href * = "mosstodon" i ] ,
[ href * = "/vegan" i ] ,
[ href * = "/plants" i ]
2024-02-29 02:45:00 +09:00
)
) :: before {
background-image : var ( --icon-tree ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
2024-02-29 03:35:02 +09:00
[ href $ = "/cat" i ] ,
2024-03-02 20:15:02 +09:00
[ href * = "/cats" i ] ,
2024-02-29 03:35:02 +09:00
[ href * = "catloaf" i ] ,
2024-02-29 02:45:00 +09:00
[ 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 (
2024-02-29 03:35:02 +09:00
[ href $ = "dog" i ] ,
[ href $ = "dogs" i ] ,
[ href * = "/dog" i ] ,
2024-02-29 02:45:00 +09:00
[ href * = "DogLovers" i ] ,
2024-02-29 03:35:02 +09:00
[ href * = "dogsofmastodon" i ] ,
[ href * = "DogsOfFedi" i ] ,
[ href * = "dogstadon" i ]
2024-02-29 02:45:00 +09:00
)
) :: 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 {
background-image : var ( --icon-brush ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
[ href $ = "apple" i ] ,
[ href $ = "macos" i ] ,
2024-06-19 07:34:42 +09:00
[ href $ = "/mac" i ] ,
2024-02-29 02:45:00 +09:00
[ href $ = "ios" i ] ,
[ href * = "ipad" i ] ,
2024-03-07 05:18:47 +09:00
[ href * = "iphone" i ] ,
[ href * = "/wwdc" i ] ,
[ href * = "/appleevent" i ]
2024-02-29 02:45:00 +09:00
)
) :: 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 ] ,
2024-03-01 01:36:04 +09:00
[ href * = "article" i ]
2024-02-29 02:45:00 +09:00
)
) :: before {
background-image : var ( --icon-pencil ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
2024-03-07 05:09:53 +09:00
[ href * = "/book" i ] ,
2024-03-04 21:45:46 +09:00
[ href * = "literature" i ] ,
[ href * = "reading" i ] ,
[ href $ = "/history" i ] ,
[ href $ = "/histoire" i ]
2024-02-29 02:45:00 +09:00
)
) :: 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 {
background-image : var ( --icon-gaming ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
2024-03-02 09:59:33 +09:00
[ href * = "/minecraft" i ] ,
[ href * = "/hermitcraft" i ]
2024-02-29 02:45:00 +09:00
)
) :: before {
background-image : var ( --icon-cube ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
2024-03-04 21:45:46 +09:00
[ href $ = "/fifa" i ] ,
[ href $ = "/fifaworldcup" i ] ,
[ href $ = "/soccer" i ] ,
2024-06-19 07:34:42 +09:00
[ href * = "/euro202" i ] ,
2024-03-04 21:45:46 +09:00
[ href $ = "/mls" i ] ,
[ href * = "/sport" i ]
2024-02-29 02:45:00 +09:00
)
) :: before {
background-image : var ( --icon-football ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
2024-02-29 03:35:02 +09:00
[ href $ = "lgbt" i ] ,
[ href * = "/lgbt" i ] ,
[ href * = "/queer" i ] ,
2024-02-29 02:45:00 +09:00
[ href $ = "trans" i ] ,
[ href $ = "pride" i ] ,
2024-03-04 21:45:46 +09:00
[ href $ = "womensday" i ] ,
2024-03-07 23:10:37 +09:00
[ href * = "internationalwomensday" i ] ,
2024-03-08 23:24:41 +09:00
[ href $ = "/IWD" i ] ,
[ href * = "JourneeDesDroitsDesFemmes" i ] ,
2024-03-08 23:36:12 +09:00
[ href * = "feministischerkampftag" i ] ,
2024-03-08 23:24:41 +09:00
[ href * = "celebratewomen" i ] ,
2024-03-07 23:10:37 +09:00
[ href * = "/8mars" i ] ,
2024-03-04 21:45:46 +09:00
[ href $ = "transdayofvisibility" i ] ,
[ href $ = "TDOV" i ] ,
[ href $ = "transdayofremembrance" i ] ,
[ href $ = "TDOR" i ] ,
2024-02-29 02:45:00 +09:00
[ 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 ]
)
) :: before {
background-image : var ( --icon-pride ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
[ href * = "electionday" i ] ,
[ href $ = "election" i ] ,
2024-02-29 03:35:02 +09:00
[ href $ = "/election" i ] ,
2024-02-29 02:45:00 +09:00
[ 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 {
background-image : var ( --icon-code ) ;
}
. app-body
. trends__item : has (
. trends__item__name a : is (
2024-02-29 03:35:02 +09:00
[ href * = "mutualaid" i ] ,
[ href * = "crowdfund" i ]
2024-02-29 02:45:00 +09:00
)
) :: before {
background-image : var ( --icon-handshake ) ;
}
2024-07-23 20:26:28 +09:00
. app-body
. trends__item : has (
. trends__item__name a : is (
[ href * = "olympics" i ] ,
[ href * = "/Paris2024" i ] ,
[ href * = "/LA2028" i ]
)
) :: before {
background-image : var ( --icon-olympics ) ;
2024-07-24 22:54:17 +09:00
transform : scale ( 1 . 85 ) ;
2024-07-23 20:26:28 +09:00
}