svg-with-js.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556
  1. /*!
  2. * Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com
  3. * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  4. * Copyright 2025 Fonticons, Inc.
  5. */
  6. :root, :host {
  7. --fa-font-solid: normal 900 1em/1 "Font Awesome 7 Free";
  8. --fa-font-regular: normal 400 1em/1 "Font Awesome 7 Free";
  9. --fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro";
  10. --fa-font-thin: normal 100 1em/1 "Font Awesome 7 Pro";
  11. --fa-font-duotone: normal 900 1em/1 "Font Awesome 7 Duotone";
  12. --fa-font-duotone-regular: normal 400 1em/1 "Font Awesome 7 Duotone";
  13. --fa-font-duotone-light: normal 300 1em/1 "Font Awesome 7 Duotone";
  14. --fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 7 Duotone";
  15. --fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands";
  16. --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 7 Sharp";
  17. --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 7 Sharp";
  18. --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 7 Sharp";
  19. --fa-font-sharp-thin: normal 100 1em/1 "Font Awesome 7 Sharp";
  20. --fa-font-sharp-duotone-solid: normal 900 1em/1 "Font Awesome 7 Sharp Duotone";
  21. --fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 7 Sharp Duotone";
  22. --fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 7 Sharp Duotone";
  23. --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 7 Sharp Duotone";
  24. --fa-font-slab-regular: normal 400 1em/1 "Font Awesome 7 Slab";
  25. --fa-font-slab-press-regular: normal 400 1em/1 "Font Awesome 7 Slab Press";
  26. --fa-font-whiteboard-semibold: normal 600 1em/1 "Font Awesome 7 Whiteboard";
  27. --fa-font-thumbprint-light: normal 300 1em/1 "Font Awesome 7 Thumbprint";
  28. --fa-font-notdog-solid: normal 900 1em/1 "Font Awesome 7 Notdog";
  29. --fa-font-notdog-duo-solid: normal 900 1em/1 "Font Awesome 7 Notdog Duo";
  30. --fa-font-etch-solid: normal 900 1em/1 "Font Awesome 7 Etch";
  31. --fa-font-jelly-regular: normal 400 1em/1 "Font Awesome 7 Jelly";
  32. --fa-font-jelly-fill-regular: normal 400 1em/1 "Font Awesome 7 Jelly Fill";
  33. --fa-font-jelly-duo-regular: normal 400 1em/1 "Font Awesome 7 Jelly Duo";
  34. --fa-font-chisel-regular: normal 400 1em/1 "Font Awesome 7 Chisel";
  35. --fa-font-utility-semibold: normal 600 1em/1 "Font Awesome 7 Utility";
  36. --fa-font-utility-duo-semibold: normal 600 1em/1 "Font Awesome 7 Utility Duo";
  37. --fa-font-utility-fill-semibold: normal 600 1em/1 "Font Awesome 7 Utility Fill";
  38. }
  39. .svg-inline--fa {
  40. box-sizing: content-box;
  41. display: var(--fa-display, inline-block);
  42. height: 1em;
  43. overflow: visible;
  44. vertical-align: -0.125em;
  45. width: var(--fa-width, 1.25em);
  46. }
  47. .svg-inline--fa.fa-2xs {
  48. vertical-align: 0.1em;
  49. }
  50. .svg-inline--fa.fa-xs {
  51. vertical-align: 0em;
  52. }
  53. .svg-inline--fa.fa-sm {
  54. vertical-align: -0.0714285714em;
  55. }
  56. .svg-inline--fa.fa-lg {
  57. vertical-align: -0.2em;
  58. }
  59. .svg-inline--fa.fa-xl {
  60. vertical-align: -0.25em;
  61. }
  62. .svg-inline--fa.fa-2xl {
  63. vertical-align: -0.3125em;
  64. }
  65. .svg-inline--fa.fa-pull-left,
  66. .svg-inline--fa .fa-pull-start {
  67. float: inline-start;
  68. margin-inline-end: var(--fa-pull-margin, 0.3em);
  69. }
  70. .svg-inline--fa.fa-pull-right,
  71. .svg-inline--fa .fa-pull-end {
  72. float: inline-end;
  73. margin-inline-start: var(--fa-pull-margin, 0.3em);
  74. }
  75. .svg-inline--fa.fa-li {
  76. width: var(--fa-li-width, 2em);
  77. inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  78. inset-block-start: 0.25em; /* syncing vertical alignment with Web Font rendering */
  79. }
  80. .fa-layers-counter, .fa-layers-text {
  81. display: inline-block;
  82. position: absolute;
  83. text-align: center;
  84. }
  85. .fa-layers {
  86. display: inline-block;
  87. height: 1em;
  88. position: relative;
  89. text-align: center;
  90. vertical-align: -0.125em;
  91. width: var(--fa-width, 1.25em);
  92. }
  93. .fa-layers .svg-inline--fa {
  94. inset: 0;
  95. margin: auto;
  96. position: absolute;
  97. transform-origin: center center;
  98. }
  99. .fa-layers-text {
  100. left: 50%;
  101. top: 50%;
  102. transform: translate(-50%, -50%);
  103. transform-origin: center center;
  104. }
  105. .fa-layers-counter {
  106. background-color: var(--fa-counter-background-color, #ff253a);
  107. border-radius: var(--fa-counter-border-radius, 1em);
  108. box-sizing: border-box;
  109. color: var(--fa-inverse, #fff);
  110. line-height: var(--fa-counter-line-height, 1);
  111. max-width: var(--fa-counter-max-width, 5em);
  112. min-width: var(--fa-counter-min-width, 1.5em);
  113. overflow: hidden;
  114. padding: var(--fa-counter-padding, 0.25em 0.5em);
  115. right: var(--fa-right, 0);
  116. text-overflow: ellipsis;
  117. top: var(--fa-top, 0);
  118. transform: scale(var(--fa-counter-scale, 0.25));
  119. transform-origin: top right;
  120. }
  121. .fa-layers-bottom-right {
  122. bottom: var(--fa-bottom, 0);
  123. right: var(--fa-right, 0);
  124. top: auto;
  125. transform: scale(var(--fa-layers-scale, 0.25));
  126. transform-origin: bottom right;
  127. }
  128. .fa-layers-bottom-left {
  129. bottom: var(--fa-bottom, 0);
  130. left: var(--fa-left, 0);
  131. right: auto;
  132. top: auto;
  133. transform: scale(var(--fa-layers-scale, 0.25));
  134. transform-origin: bottom left;
  135. }
  136. .fa-layers-top-right {
  137. top: var(--fa-top, 0);
  138. right: var(--fa-right, 0);
  139. transform: scale(var(--fa-layers-scale, 0.25));
  140. transform-origin: top right;
  141. }
  142. .fa-layers-top-left {
  143. left: var(--fa-left, 0);
  144. right: auto;
  145. top: var(--fa-top, 0);
  146. transform: scale(var(--fa-layers-scale, 0.25));
  147. transform-origin: top left;
  148. }
  149. .fa-1x {
  150. font-size: 1em;
  151. }
  152. .fa-2x {
  153. font-size: 2em;
  154. }
  155. .fa-3x {
  156. font-size: 3em;
  157. }
  158. .fa-4x {
  159. font-size: 4em;
  160. }
  161. .fa-5x {
  162. font-size: 5em;
  163. }
  164. .fa-6x {
  165. font-size: 6em;
  166. }
  167. .fa-7x {
  168. font-size: 7em;
  169. }
  170. .fa-8x {
  171. font-size: 8em;
  172. }
  173. .fa-9x {
  174. font-size: 9em;
  175. }
  176. .fa-10x {
  177. font-size: 10em;
  178. }
  179. .fa-2xs {
  180. font-size: calc(10 / 16 * 1em); /* converts a 10px size into an em-based value that's relative to the scale's 16px base */
  181. line-height: calc(1 / 10 * 1em); /* sets the line-height of the icon back to that of it's parent */
  182. vertical-align: calc((6 / 10 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
  183. }
  184. .fa-xs {
  185. font-size: calc(12 / 16 * 1em); /* converts a 12px size into an em-based value that's relative to the scale's 16px base */
  186. line-height: calc(1 / 12 * 1em); /* sets the line-height of the icon back to that of it's parent */
  187. vertical-align: calc((6 / 12 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
  188. }
  189. .fa-sm {
  190. font-size: calc(14 / 16 * 1em); /* converts a 14px size into an em-based value that's relative to the scale's 16px base */
  191. line-height: calc(1 / 14 * 1em); /* sets the line-height of the icon back to that of it's parent */
  192. vertical-align: calc((6 / 14 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
  193. }
  194. .fa-lg {
  195. font-size: calc(20 / 16 * 1em); /* converts a 20px size into an em-based value that's relative to the scale's 16px base */
  196. line-height: calc(1 / 20 * 1em); /* sets the line-height of the icon back to that of it's parent */
  197. vertical-align: calc((6 / 20 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
  198. }
  199. .fa-xl {
  200. font-size: calc(24 / 16 * 1em); /* converts a 24px size into an em-based value that's relative to the scale's 16px base */
  201. line-height: calc(1 / 24 * 1em); /* sets the line-height of the icon back to that of it's parent */
  202. vertical-align: calc((6 / 24 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
  203. }
  204. .fa-2xl {
  205. font-size: calc(32 / 16 * 1em); /* converts a 32px size into an em-based value that's relative to the scale's 16px base */
  206. line-height: calc(1 / 32 * 1em); /* sets the line-height of the icon back to that of it's parent */
  207. vertical-align: calc((6 / 32 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
  208. }
  209. .fa-width-auto {
  210. --fa-width: auto;
  211. }
  212. .fa-fw,
  213. .fa-width-fixed {
  214. --fa-width: 1.25em;
  215. }
  216. .fa-ul {
  217. list-style-type: none;
  218. margin-inline-start: var(--fa-li-margin, 2.5em);
  219. padding-inline-start: 0;
  220. }
  221. .fa-ul > li {
  222. position: relative;
  223. }
  224. .fa-li {
  225. inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  226. position: absolute;
  227. text-align: center;
  228. width: var(--fa-li-width, 2em);
  229. line-height: inherit;
  230. }
  231. /* Heads Up: Bordered Icons will not be supported in the future!
  232. - This feature will be deprecated in the next major release of Font Awesome (v8)!
  233. - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
  234. */
  235. /* Notes:
  236. * --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
  237. * --@{v.$css-prefix}-border-padding =
  238. ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
  239. ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
  240. */
  241. .fa-border {
  242. border-color: var(--fa-border-color, #eee);
  243. border-radius: var(--fa-border-radius, 0.1em);
  244. border-style: var(--fa-border-style, solid);
  245. border-width: var(--fa-border-width, 0.0625em);
  246. box-sizing: var(--fa-border-box-sizing, content-box);
  247. padding: var(--fa-border-padding, 0.1875em 0.25em);
  248. }
  249. .fa-pull-left,
  250. .fa-pull-start {
  251. float: inline-start;
  252. margin-inline-end: var(--fa-pull-margin, 0.3em);
  253. }
  254. .fa-pull-right,
  255. .fa-pull-end {
  256. float: inline-end;
  257. margin-inline-start: var(--fa-pull-margin, 0.3em);
  258. }
  259. .fa-beat {
  260. animation-name: fa-beat;
  261. animation-delay: var(--fa-animation-delay, 0s);
  262. animation-direction: var(--fa-animation-direction, normal);
  263. animation-duration: var(--fa-animation-duration, 1s);
  264. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  265. animation-timing-function: var(--fa-animation-timing, ease-in-out);
  266. }
  267. .fa-bounce {
  268. animation-name: fa-bounce;
  269. animation-delay: var(--fa-animation-delay, 0s);
  270. animation-direction: var(--fa-animation-direction, normal);
  271. animation-duration: var(--fa-animation-duration, 1s);
  272. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  273. animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
  274. }
  275. .fa-fade {
  276. animation-name: fa-fade;
  277. animation-delay: var(--fa-animation-delay, 0s);
  278. animation-direction: var(--fa-animation-direction, normal);
  279. animation-duration: var(--fa-animation-duration, 1s);
  280. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  281. animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
  282. }
  283. .fa-beat-fade {
  284. animation-name: fa-beat-fade;
  285. animation-delay: var(--fa-animation-delay, 0s);
  286. animation-direction: var(--fa-animation-direction, normal);
  287. animation-duration: var(--fa-animation-duration, 1s);
  288. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  289. animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
  290. }
  291. .fa-flip {
  292. animation-name: fa-flip;
  293. animation-delay: var(--fa-animation-delay, 0s);
  294. animation-direction: var(--fa-animation-direction, normal);
  295. animation-duration: var(--fa-animation-duration, 1s);
  296. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  297. animation-timing-function: var(--fa-animation-timing, ease-in-out);
  298. }
  299. .fa-shake {
  300. animation-name: fa-shake;
  301. animation-delay: var(--fa-animation-delay, 0s);
  302. animation-direction: var(--fa-animation-direction, normal);
  303. animation-duration: var(--fa-animation-duration, 1s);
  304. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  305. animation-timing-function: var(--fa-animation-timing, linear);
  306. }
  307. .fa-spin {
  308. animation-name: fa-spin;
  309. animation-delay: var(--fa-animation-delay, 0s);
  310. animation-direction: var(--fa-animation-direction, normal);
  311. animation-duration: var(--fa-animation-duration, 2s);
  312. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  313. animation-timing-function: var(--fa-animation-timing, linear);
  314. }
  315. .fa-spin-reverse {
  316. --fa-animation-direction: reverse;
  317. }
  318. .fa-pulse,
  319. .fa-spin-pulse {
  320. animation-name: fa-spin;
  321. animation-direction: var(--fa-animation-direction, normal);
  322. animation-duration: var(--fa-animation-duration, 1s);
  323. animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  324. animation-timing-function: var(--fa-animation-timing, steps(8));
  325. }
  326. @media (prefers-reduced-motion: reduce) {
  327. .fa-beat,
  328. .fa-bounce,
  329. .fa-fade,
  330. .fa-beat-fade,
  331. .fa-flip,
  332. .fa-pulse,
  333. .fa-shake,
  334. .fa-spin,
  335. .fa-spin-pulse {
  336. animation: none !important;
  337. transition: none !important;
  338. }
  339. }
  340. @keyframes fa-beat {
  341. 0%, 90% {
  342. transform: scale(1);
  343. }
  344. 45% {
  345. transform: scale(var(--fa-beat-scale, 1.25));
  346. }
  347. }
  348. @keyframes fa-bounce {
  349. 0% {
  350. transform: scale(1, 1) translateY(0);
  351. }
  352. 10% {
  353. transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  354. }
  355. 30% {
  356. transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
  357. }
  358. 50% {
  359. transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  360. }
  361. 57% {
  362. transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  363. }
  364. 64% {
  365. transform: scale(1, 1) translateY(0);
  366. }
  367. 100% {
  368. transform: scale(1, 1) translateY(0);
  369. }
  370. }
  371. @keyframes fa-fade {
  372. 50% {
  373. opacity: var(--fa-fade-opacity, 0.4);
  374. }
  375. }
  376. @keyframes fa-beat-fade {
  377. 0%, 100% {
  378. opacity: var(--fa-beat-fade-opacity, 0.4);
  379. transform: scale(1);
  380. }
  381. 50% {
  382. opacity: 1;
  383. transform: scale(var(--fa-beat-fade-scale, 1.125));
  384. }
  385. }
  386. @keyframes fa-flip {
  387. 50% {
  388. transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
  389. }
  390. }
  391. @keyframes fa-shake {
  392. 0% {
  393. transform: rotate(-15deg);
  394. }
  395. 4% {
  396. transform: rotate(15deg);
  397. }
  398. 8%, 24% {
  399. transform: rotate(-18deg);
  400. }
  401. 12%, 28% {
  402. transform: rotate(18deg);
  403. }
  404. 16% {
  405. transform: rotate(-22deg);
  406. }
  407. 20% {
  408. transform: rotate(22deg);
  409. }
  410. 32% {
  411. transform: rotate(-12deg);
  412. }
  413. 36% {
  414. transform: rotate(12deg);
  415. }
  416. 40%, 100% {
  417. transform: rotate(0deg);
  418. }
  419. }
  420. @keyframes fa-spin {
  421. 0% {
  422. transform: rotate(0deg);
  423. }
  424. 100% {
  425. transform: rotate(360deg);
  426. }
  427. }
  428. .fa-rotate-90 {
  429. transform: rotate(90deg);
  430. }
  431. .fa-rotate-180 {
  432. transform: rotate(180deg);
  433. }
  434. .fa-rotate-270 {
  435. transform: rotate(270deg);
  436. }
  437. .fa-flip-horizontal {
  438. transform: scale(-1, 1);
  439. }
  440. .fa-flip-vertical {
  441. transform: scale(1, -1);
  442. }
  443. .fa-flip-both,
  444. .fa-flip-horizontal.fa-flip-vertical {
  445. transform: scale(-1, -1);
  446. }
  447. .fa-rotate-by {
  448. transform: rotate(var(--fa-rotate-angle, 0));
  449. }
  450. .svg-inline--fa .fa-primary {
  451. fill: var(--fa-primary-color, currentColor);
  452. opacity: var(--fa-primary-opacity, 1);
  453. }
  454. .svg-inline--fa .fa-secondary {
  455. fill: var(--fa-secondary-color, currentColor);
  456. opacity: var(--fa-secondary-opacity, 0.4);
  457. }
  458. .svg-inline--fa.fa-swap-opacity .fa-primary {
  459. opacity: var(--fa-secondary-opacity, 0.4);
  460. }
  461. .svg-inline--fa.fa-swap-opacity .fa-secondary {
  462. opacity: var(--fa-primary-opacity, 1);
  463. }
  464. .svg-inline--fa mask .fa-primary,
  465. .svg-inline--fa mask .fa-secondary {
  466. fill: black;
  467. }
  468. .svg-inline--fa.fa-inverse {
  469. fill: var(--fa-inverse, #fff);
  470. }
  471. .fa-stack {
  472. display: inline-block;
  473. height: 2em;
  474. line-height: 2em;
  475. position: relative;
  476. vertical-align: middle;
  477. width: 2.5em;
  478. }
  479. .fa-inverse {
  480. color: var(--fa-inverse, #fff);
  481. }
  482. .svg-inline--fa.fa-stack-1x {
  483. --fa-width: 1.25em;
  484. height: 1em;
  485. width: var(--fa-width);
  486. }
  487. .svg-inline--fa.fa-stack-2x {
  488. --fa-width: 2.5em;
  489. height: 2em;
  490. width: var(--fa-width);
  491. }
  492. .fa-stack-1x,
  493. .fa-stack-2x {
  494. inset: 0;
  495. margin: auto;
  496. position: absolute;
  497. z-index: var(--fa-stack-z-index, auto);
  498. }