svg-with-js.css 15 KB

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