skial.com [Customizable]

Cutomizable theme for skial.com

  1. /* ==UserStyle==
  2. @name skial.com [Customizable]
  3. @namespace typpi.online
  4. @version 1.2.2
  5. @description Cutomizable theme for skial.com
  6. @author Nick2bad4u
  7. @license UnLicense
  8. @homepageURL https://github.com/Nick2bad4u/UserStyles
  9. @supportURL https://github.com/Nick2bad4u/UserStyles/issues
  10.  
  11. @var color color1 "Color 1" #bcbcbc
  12. @var color color2 "Color 2" #ffffff
  13. @var color color3 "Color 3" #232323
  14. @var color color4 "Color 4" #1e1e1e
  15. @var color color5 "Color 5" #cccccc
  16. @var color color6 "Color 6" #000000
  17. @var color color7 "Color 7" #e5e3df
  18. @var color color8 "Color 8" #444444
  19. @var color color9 "Color 9" #888888
  20. @var color color10 "Color 10" #ff5268
  21. @var color color11 "Color 11" #eeeeee
  22. @var color color12 "Color 12" #4e4e4e
  23. @var color color13 "Color 13" #f2f4f6
  24. @var color color14 "Color 14" #f4f4f4
  25. @var color color15 "Color 15" #222222
  26. @var color color16 "Color 16" #3b5998
  27. @var color color17 "Color 17" #344e86
  28. @var color color18 "Color 18" #bd081d
  29. @var color color19 "Color 19" #aa0719
  30. @var color color20 "Color 20" #1da1f2
  31. @var color color21 "Color 21" #0d95e8
  32. @var color color22 "Color 22" #d7d7d7
  33. @var color color23 "Color 23" #5d5b5b
  34. @var color color24 "Color 24" #dddddd
  35. @var color color25 "Color 25" #2a2a2a
  36. @var color color26 "Color 26" #1976d2
  37. @var color color27 "Color 27" #0e0e12
  38. @var color color28 "Color 28" #2592ff
  39. @var color color29 "Color 29" #efefef
  40. @var color color30 "Color 30" #2d2d2d
  41. @var color color31 "Color 31" #191919
  42. @var color color32 "Color 32" #2d2d3a
  43. @var color color33 "Color 33" #c32fea
  44. @var color color34 "Color 34" #212121
  45. @var color color35 "Color 35" #ffffff
  46. @var color color36 "Color 36" #353535
  47. @var color color37 "Color 37" #63b265
  48. @var color color38 "Color 38" #c84448
  49. @var color color39 "Color 39" #141419
  50. @var color color40 "Color 40" #0078f1
  51. @var color color41 "Color 41" #ffffff
  52. @var color color42 "Color 42" #000000
  53. @var color color43 "Color 43" #2592ff33
  54. @var color color44 "Color 44" #ffffff80
  55. @var color color45 "Color 45" #ffffffb3
  56. ==/UserStyle== */
  57.  
  58. /* stylelint-disable number-max-precision -- not needed */
  59. /* stylelint-disable time-min-milliseconds -- not needed */
  60. /* stylelint-disable no-duplicate-selectors -- not needed */
  61. @-moz-document domain("skial.com") {
  62. :root {
  63. --color1: var(color1);
  64. --color2: var(color2);
  65. --color3: var(color3);
  66. --color4: var(color4);
  67. --color5: var(color5);
  68. --color6: var(color6);
  69. --color7: var(color7);
  70. --color8: var(color8);
  71. --color9: var(color9);
  72. --color10: var(color10);
  73. --color11: var(color11);
  74. --color12: var(color12);
  75. --color13: var(color13);
  76. --color14: var(color14);
  77. --color15: var(color15);
  78. --color16: var(color16);
  79. --color17: var(color17);
  80. --color18: var(color18);
  81. --color19: var(color19);
  82. --color20: var(color20);
  83. --color21: var(color21);
  84. --color22: var(color22);
  85. --color23: var(color23);
  86. --color24: var(color24);
  87. --color25: var(color25);
  88. --color26: var(color26);
  89. --color27: var(color27);
  90. --color28: var(color28);
  91. --color29: var(color29);
  92. --color30: var(color30);
  93. --color31: var(color31);
  94. --color32: var(color32);
  95. --color33: var(color33);
  96. --color34: var(color34);
  97. --color35: var(color35);
  98. --color36: var(color36);
  99. --color37: var(color37);
  100. --color38: var(color38);
  101. --color39: var(color39);
  102. --color40: var(color40);
  103. --color41: var(color41);
  104. --color42: var(color42);
  105. --color43: var(color43);
  106. --color44: var(color44);
  107. --color45: var(color45);
  108. }
  109.  
  110. .legend_nowPlaying {
  111. width: 100%;
  112. text-align: center;
  113. }
  114.  
  115. .legend_nowPlaying .legend_footerHeader {
  116. font-size: 1.7rem;
  117. font-weight: 300;
  118. color: var(--color1);
  119. text-transform: uppercase;
  120. }
  121.  
  122. .legend_nowPlaying .legend_nowPlayingItems {
  123. display: flex;
  124. flex-direction: row;
  125. align-items: center;
  126. justify-content: center;
  127. width: 100%;
  128. padding: 10px 0;
  129. }
  130.  
  131. @media (width <=900px) {
  132. .legend_nowPlaying .legend_nowPlayingItems {
  133. flex-direction: column;
  134. }
  135. }
  136.  
  137. .legend_nowPlaying
  138. .legend_nowPlayingItems
  139. .legend_nowPlayingItem {
  140. padding: 10px 30px;
  141. flex-grow: 1;
  142. flex-basis: 20%;
  143. }
  144.  
  145. .legend_nowPlaying
  146. .legend_nowPlayingItems
  147. .legend_nowPlayingItem
  148. img {
  149. max-width: 100%;
  150. height: auto;
  151. max-height: 60px;
  152. opacity: 40%;
  153. transition: all 0.3s ease-in-out;
  154. }
  155.  
  156. .legend_nowPlaying
  157. .legend_nowPlayingItems
  158. .legend_nowPlayingItem
  159. img:hover {
  160. opacity: 100%;
  161. }
  162.  
  163. .legend_nowPlaying
  164. .legend_nowPlayingItems
  165. .legend_nowPlayingItem
  166. h5 {
  167. color: var(--color2);
  168. font-size: 2rem;
  169. padding: 0;
  170. margin: 0;
  171. }
  172.  
  173. .p-footer-inner {
  174. background-image: linear-gradient(
  175. 180deg,
  176. transparent 0%,
  177. var(--color3) 90%,
  178. var(--color3) 100%
  179. ),
  180. url('https://www.skial.com/styles/legend/legend/legend_lol-footer-wp.jpg');
  181. background-position:
  182. center,
  183. center top;
  184. background-repeat: no-repeat, no-repeat;
  185. background-size: contain, cover;
  186. }
  187.  
  188. .p-footer-inner .pageContent {
  189. justify-content: center;
  190. padding-top: 300px;
  191. }
  192.  
  193. @media (width <=900px) {
  194. .p-footer-inner .pageContent {
  195. padding-top: 200px;
  196. }
  197. }
  198.  
  199. @media (width <=650px) {
  200. .p-footer-inner .pageContent {
  201. padding-top: 100px;
  202. }
  203. }
  204.  
  205. .p-footer-inner .pageContent .p-footer-row {
  206. margin-right: 40px;
  207. }
  208.  
  209. .p-footer-inner
  210. .pageContent
  211. .p-footer-row
  212. .p-footer-linkList
  213. > li
  214. a {
  215. text-decoration: none;
  216. }
  217.  
  218. .p-footer-copyrightRow .pageContent {
  219. justify-content: center;
  220. }
  221.  
  222. .uix_socialMedia {
  223. margin: 0 10px;
  224. }
  225.  
  226. /********* public:lightbox.less ********/
  227. body.compensate-for-scrollbar {
  228. overflow: hidden;
  229. }
  230.  
  231. .fancybox-active {
  232. height: auto;
  233. }
  234.  
  235. .fancybox-is-hidden {
  236. left: -9999px;
  237. margin: 0;
  238. position: absolute !important;
  239. top: -9999px;
  240. visibility: hidden;
  241. }
  242.  
  243. .fancybox-container {
  244. -webkit-backface-visibility: hidden;
  245. backface-visibility: hidden;
  246. height: 100%;
  247. left: 0;
  248. outline: none;
  249. position: fixed;
  250. -webkit-tap-highlight-color: transparent;
  251. top: 0;
  252. -ms-touch-action: manipulation;
  253. touch-action: manipulation;
  254. transform: translateZ(0);
  255. width: 100%;
  256. z-index: 99992;
  257. }
  258.  
  259. .fancybox-container * {
  260. box-sizing: border-box;
  261. }
  262.  
  263. .fancybox-outer,
  264. .fancybox-inner,
  265. .fancybox-bg,
  266. .fancybox-stage {
  267. inset: 0;
  268. position: absolute;
  269. }
  270.  
  271. .fancybox-outer {
  272. -webkit-overflow-scrolling: touch;
  273. overflow-y: auto;
  274. }
  275.  
  276. .fancybox-bg {
  277. background: var(--color4);
  278. opacity: 0%;
  279. transition-duration: inherit;
  280. transition-property: opacity;
  281. transition-timing-function: cubic-bezier(
  282. 0.47,
  283. 0,
  284. 0.74,
  285. 0.71
  286. );
  287. }
  288.  
  289. .fancybox-is-open .fancybox-bg {
  290. opacity: 90%;
  291. transition-timing-function: cubic-bezier(
  292. 0.22,
  293. 0.61,
  294. 0.36,
  295. 1
  296. );
  297. }
  298.  
  299. .fancybox-infobar,
  300. .fancybox-toolbar,
  301. .fancybox-caption,
  302. .fancybox-navigation .fancybox-button {
  303. direction: ltr;
  304. opacity: 0%;
  305. position: absolute;
  306. transition:
  307. opacity 0.25s ease,
  308. visibility 0s ease 0.25s;
  309. visibility: hidden;
  310. z-index: 99997;
  311. }
  312.  
  313. .fancybox-show-infobar .fancybox-infobar,
  314. .fancybox-show-toolbar .fancybox-toolbar,
  315. .fancybox-show-caption .fancybox-caption,
  316. .fancybox-show-nav .fancybox-navigation .fancybox-button {
  317. opacity: 100%;
  318. transition:
  319. opacity 0.25s ease 0s,
  320. visibility 0s ease 0s;
  321. visibility: visible;
  322. }
  323.  
  324. .fancybox-infobar {
  325. color: var(--color5);
  326. font-size: 13px;
  327. -webkit-font-smoothing: subpixel-antialiased;
  328. height: 44px;
  329. left: 0;
  330. line-height: 44px;
  331. min-width: 44px;
  332. mix-blend-mode: difference;
  333. padding: 0 10px;
  334. pointer-events: none;
  335. top: 0;
  336. -webkit-touch-callout: none;
  337. -webkit-user-select: none;
  338. -moz-user-select: none;
  339. -ms-user-select: none;
  340. user-select: none;
  341. }
  342.  
  343. .fancybox-toolbar {
  344. right: 0;
  345. top: 0;
  346. }
  347.  
  348. .fancybox-stage {
  349. direction: ltr;
  350. overflow: visible;
  351. transform: translateZ(0);
  352. z-index: 99994;
  353. }
  354.  
  355. .fancybox-is-open .fancybox-stage {
  356. overflow: hidden;
  357. }
  358.  
  359. .fancybox-slide {
  360. -webkit-backface-visibility: hidden;
  361. backface-visibility: hidden;
  362. display: none;
  363. height: 100%;
  364. left: 0;
  365. outline: none;
  366. overflow: auto;
  367. -webkit-overflow-scrolling: touch;
  368. padding: 44px;
  369. position: absolute;
  370. text-align: center;
  371. top: 0;
  372. transition-property: transform, opacity;
  373. white-space: normal;
  374. width: 100%;
  375. z-index: 99994;
  376. }
  377.  
  378. .fancybox-slide::before {
  379. content: '';
  380. display: inline-block;
  381. font-size: 0;
  382. height: 100%;
  383. vertical-align: middle;
  384. width: 0;
  385. }
  386.  
  387. .fancybox-is-sliding .fancybox-slide,
  388. .fancybox-slide--previous,
  389. .fancybox-slide--current,
  390. .fancybox-slide--next {
  391. display: block;
  392. }
  393.  
  394. .fancybox-slide--image {
  395. overflow: hidden;
  396. padding: 44px 0;
  397. }
  398.  
  399. .fancybox-slide--image::before {
  400. display: none;
  401. }
  402.  
  403. .fancybox-slide--html {
  404. padding: 6px;
  405. }
  406.  
  407. .fancybox-content {
  408. background: var(--color2);
  409. display: inline-block;
  410. margin: 0;
  411. max-width: 100%;
  412. overflow: auto;
  413. -webkit-overflow-scrolling: touch;
  414. padding: 44px;
  415. position: relative;
  416. text-align: left;
  417. vertical-align: middle;
  418. }
  419.  
  420. .fancybox-slide--image .fancybox-content {
  421. animation-timing-function: cubic-bezier(
  422. 0.5,
  423. 0,
  424. 0.14,
  425. 1
  426. );
  427. -webkit-backface-visibility: hidden;
  428. backface-visibility: hidden;
  429. background: transparent;
  430. background-repeat: no-repeat;
  431. background-size: 100% 100%;
  432. left: 0;
  433. max-width: none;
  434. overflow: visible;
  435. padding: 0;
  436. position: absolute;
  437. top: 0;
  438. -ms-transform-origin: top left;
  439. transform-origin: top left;
  440. transition-property: transform, opacity;
  441. -webkit-user-select: none;
  442. -moz-user-select: none;
  443. -ms-user-select: none;
  444. user-select: none;
  445. z-index: 99995;
  446. }
  447.  
  448. .fancybox-can-zoomOut .fancybox-content {
  449. cursor: zoom-out;
  450. }
  451.  
  452. .fancybox-can-zoomIn .fancybox-content {
  453. cursor: zoom-in;
  454. }
  455.  
  456. .fancybox-can-swipe .fancybox-content,
  457. .fancybox-can-pan .fancybox-content {
  458. cursor: grab;
  459. }
  460.  
  461. .fancybox-is-grabbing .fancybox-content {
  462. cursor: grabbing;
  463. }
  464.  
  465. .fancybox-container [data-selectable='true'] {
  466. cursor: text;
  467. }
  468.  
  469. .fancybox-image,
  470. .fancybox-spaceball {
  471. background: transparent;
  472. border: 0;
  473. height: 100%;
  474. left: 0;
  475. margin: 0;
  476. max-height: none;
  477. max-width: none;
  478. padding: 0;
  479. position: absolute;
  480. top: 0;
  481. -webkit-user-select: none;
  482. -moz-user-select: none;
  483. -ms-user-select: none;
  484. user-select: none;
  485. width: 100%;
  486. }
  487.  
  488. .fancybox-spaceball {
  489. z-index: 1;
  490. }
  491.  
  492. .fancybox-slide--video .fancybox-content,
  493. .fancybox-slide--map .fancybox-content,
  494. .fancybox-slide--pdf .fancybox-content,
  495. .fancybox-slide--iframe .fancybox-content {
  496. height: 100%;
  497. overflow: visible;
  498. padding: 0;
  499. width: 100%;
  500. }
  501.  
  502. .fancybox-slide--video .fancybox-content {
  503. background: var(--color6);
  504. }
  505.  
  506. .fancybox-slide--map .fancybox-content {
  507. background: var(--color7);
  508. }
  509.  
  510. .fancybox-slide--iframe .fancybox-content {
  511. background: var(--color2);
  512. }
  513.  
  514. .fancybox-video,
  515. .fancybox-iframe {
  516. background: transparent;
  517. border: 0;
  518. display: block;
  519. height: 100%;
  520. margin: 0;
  521. overflow: hidden;
  522. padding: 0;
  523. width: 100%;
  524. }
  525.  
  526. .fancybox-iframe {
  527. left: 0;
  528. position: absolute;
  529. top: 0;
  530. }
  531.  
  532. .fancybox-error {
  533. background: var(--color2);
  534. cursor: default;
  535. max-width: 400px;
  536. padding: 40px;
  537. width: 100%;
  538. }
  539.  
  540. .fancybox-error p {
  541. color: var(--color8);
  542. font-size: 16px;
  543. line-height: 20px;
  544. margin: 0;
  545. padding: 0;
  546. }
  547.  
  548. .fancybox-button {
  549. background: #1e1e1e99;
  550. border: 0;
  551. border-radius: 0;
  552. box-shadow: none;
  553. cursor: pointer;
  554. display: inline-block;
  555. height: 44px;
  556. margin: 0;
  557. padding: 10px;
  558. position: relative;
  559. transition: color 0.2s;
  560. vertical-align: top;
  561. visibility: inherit;
  562. width: 44px;
  563. }
  564.  
  565. .fancybox-button,
  566. .fancybox-button:visited,
  567. .fancybox-button:link {
  568. color: var(--color5);
  569. }
  570.  
  571. .fancybox-button:hover {
  572. color: var(--color2);
  573. }
  574.  
  575. .fancybox-button:focus {
  576. outline: none;
  577. }
  578.  
  579. .fancybox-button.fancybox-focus {
  580. outline: 1px dotted;
  581. }
  582.  
  583. .fancybox-button[disabled],
  584. .fancybox-button[disabled]:hover {
  585. color: var(--color9);
  586. cursor: default;
  587. outline: none;
  588. }
  589.  
  590. .fancybox-button div {
  591. height: 100%;
  592. }
  593.  
  594. .fancybox-button svg {
  595. display: block;
  596. height: 100%;
  597. overflow: visible;
  598. position: relative;
  599. width: 100%;
  600. }
  601.  
  602. .fancybox-button svg path {
  603. fill: currentcolor;
  604. stroke-width: 0;
  605. }
  606.  
  607. .fancybox-button--play svg:nth-child(2),
  608. .fancybox-button--fsenter svg:nth-child(2) {
  609. display: none;
  610. }
  611.  
  612. .fancybox-button--pause svg:nth-child(1),
  613. .fancybox-button--fsexit svg:nth-child(1) {
  614. display: none;
  615. }
  616.  
  617. .fancybox-progress {
  618. background: var(--color10);
  619. height: 2px;
  620. left: 0;
  621. position: absolute;
  622. right: 0;
  623. top: 0;
  624. -ms-transform: scaleX(0);
  625. transform: scaleX(0);
  626. -ms-transform-origin: 0;
  627. transform-origin: 0;
  628. transition-property: transform;
  629. transition-timing-function: linear;
  630. z-index: 99998;
  631. }
  632.  
  633. .fancybox-close-small {
  634. background: transparent;
  635. border: 0;
  636. border-radius: 0;
  637. color: var(--color5);
  638. cursor: pointer;
  639. opacity: 80%;
  640. padding: 8px;
  641. position: absolute;
  642. right: -12px;
  643. top: -44px;
  644. z-index: 401;
  645. }
  646.  
  647. .fancybox-close-small:hover {
  648. color: var(--color2);
  649. opacity: 100%;
  650. }
  651.  
  652. .fancybox-slide--html .fancybox-close-small {
  653. color: currentcolor;
  654. padding: 10px;
  655. right: 0;
  656. top: 0;
  657. }
  658.  
  659. .fancybox-slide--image.fancybox-is-scaling
  660. .fancybox-content {
  661. overflow: hidden;
  662. }
  663.  
  664. .fancybox-is-scaling .fancybox-close-small,
  665. .fancybox-is-zoomable.fancybox-can-pan
  666. .fancybox-close-small {
  667. display: none;
  668. }
  669.  
  670. .fancybox-navigation .fancybox-button {
  671. background-clip: content-box;
  672. height: 100px;
  673. opacity: 0%;
  674. position: absolute;
  675. top: calc(50% - 50px);
  676. width: 70px;
  677. }
  678.  
  679. .fancybox-navigation .fancybox-button div {
  680. padding: 7px;
  681. }
  682.  
  683. .fancybox-navigation .fancybox-button--arrow_left {
  684. left: 0;
  685. left: env(safe-area-inset-left);
  686. padding: 31px 26px 31px 6px;
  687. }
  688.  
  689. .fancybox-navigation .fancybox-button--arrow_right {
  690. padding: 31px 6px 31px 26px;
  691. right: 0;
  692. right: env(safe-area-inset-right);
  693. }
  694.  
  695. .fancybox-caption {
  696. background: linear-gradient(
  697. to top,
  698. #000000d9 0%,
  699. #0000004d 50%,
  700. #00000026 65%,
  701. #00000013 75.5%,
  702. #00000009 82.84999999999999%,
  703. #00000005 88%,
  704. #00000000 100%
  705. );
  706. bottom: 0;
  707. color: var(--color11);
  708. font-size: 14px;
  709. font-weight: 400;
  710. left: 0;
  711. line-height: 1.5;
  712. padding: 75px 44px 25px;
  713. pointer-events: none;
  714. right: 0;
  715. text-align: center;
  716. z-index: 99996;
  717. }
  718.  
  719. @supports (padding: max(0px)) {
  720. .fancybox-caption {
  721. padding: 75px max(44px, env(safe-area-inset-right))
  722. max(25px, env(safe-area-inset-bottom))
  723. max(44px, env(safe-area-inset-left));
  724. }
  725. }
  726.  
  727. .fancybox-caption--separate {
  728. margin-top: -50px;
  729. }
  730.  
  731. .fancybox-caption__body {
  732. max-height: 50vh;
  733. overflow: auto;
  734. pointer-events: all;
  735. }
  736.  
  737. .fancybox-caption a,
  738. .fancybox-caption a:link,
  739. .fancybox-caption a:visited {
  740. color: var(--color5);
  741. text-decoration: none;
  742. }
  743.  
  744. .fancybox-caption a:hover {
  745. color: var(--color2);
  746. text-decoration: underline;
  747. }
  748.  
  749. .fancybox-loading {
  750. animation: fancybox-rotate 1s linear infinite;
  751. background: transparent;
  752. border: 4px solid var(--color9);
  753. border-bottom-color: var(--color2);
  754. border-radius: 50%;
  755. height: 50px;
  756. left: 50%;
  757. margin: -25px 0 0 -25px;
  758. opacity: 70%;
  759. padding: 0;
  760. position: absolute;
  761. top: 50%;
  762. width: 50px;
  763. z-index: 99999;
  764. }
  765.  
  766. @keyframes fancybox-rotate {
  767. 100% {
  768. transform: rotate(360deg);
  769. }
  770. }
  771.  
  772. .fancybox-animated {
  773. transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
  774. }
  775.  
  776. .fancybox-fx-slide.fancybox-slide--previous {
  777. opacity: 0%;
  778. transform: translate3d(-100%, 0, 0);
  779. }
  780.  
  781. .fancybox-fx-slide.fancybox-slide--next {
  782. opacity: 0%;
  783. transform: translate3d(100%, 0, 0);
  784. }
  785.  
  786. .fancybox-fx-slide.fancybox-slide--current {
  787. opacity: 100%;
  788. transform: translate3d(0, 0, 0);
  789. }
  790.  
  791. .fancybox-fx-fade.fancybox-slide--previous,
  792. .fancybox-fx-fade.fancybox-slide--next {
  793. opacity: 0%;
  794. transition-timing-function: cubic-bezier(
  795. 0.19,
  796. 1,
  797. 0.22,
  798. 1
  799. );
  800. }
  801.  
  802. .fancybox-fx-fade.fancybox-slide--current {
  803. opacity: 100%;
  804. }
  805.  
  806. .fancybox-fx-zoom-in-out.fancybox-slide--previous {
  807. opacity: 0%;
  808. transform: scale3d(1.5, 1.5, 1.5);
  809. }
  810.  
  811. .fancybox-fx-zoom-in-out.fancybox-slide--next {
  812. opacity: 0%;
  813. transform: scale3d(0.5, 0.5, 0.5);
  814. }
  815.  
  816. .fancybox-fx-zoom-in-out.fancybox-slide--current {
  817. opacity: 100%;
  818. transform: scale3d(1, 1, 1);
  819. }
  820.  
  821. .fancybox-fx-rotate.fancybox-slide--previous {
  822. opacity: 0%;
  823. -ms-transform: rotate(-360deg);
  824. transform: rotate(-360deg);
  825. }
  826.  
  827. .fancybox-fx-rotate.fancybox-slide--next {
  828. opacity: 0%;
  829. -ms-transform: rotate(360deg);
  830. transform: rotate(360deg);
  831. }
  832.  
  833. .fancybox-fx-rotate.fancybox-slide--current {
  834. opacity: 100%;
  835. -ms-transform: rotate(0deg);
  836. transform: rotate(0deg);
  837. }
  838.  
  839. .fancybox-fx-circular.fancybox-slide--previous {
  840. opacity: 0%;
  841. transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  842. }
  843.  
  844. .fancybox-fx-circular.fancybox-slide--next {
  845. opacity: 0%;
  846. transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  847. }
  848.  
  849. .fancybox-fx-circular.fancybox-slide--current {
  850. opacity: 100%;
  851. transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  852. }
  853.  
  854. .fancybox-fx-tube.fancybox-slide--previous {
  855. transform: translate3d(-100%, 0, 0) scale(0.1)
  856. skew(-10deg);
  857. }
  858.  
  859. .fancybox-fx-tube.fancybox-slide--next {
  860. transform: translate3d(100%, 0, 0) scale(0.1)
  861. skew(10deg);
  862. }
  863.  
  864. .fancybox-fx-tube.fancybox-slide--current {
  865. transform: translate3d(0, 0, 0) scale(1);
  866. }
  867.  
  868. @media all and (height <=576px) {
  869. .fancybox-slide {
  870. padding-left: 6px;
  871. padding-right: 6px;
  872. }
  873.  
  874. .fancybox-slide--image {
  875. padding: 6px 0;
  876. }
  877.  
  878. .fancybox-close-small {
  879. right: -6px;
  880. }
  881.  
  882. .fancybox-slide--image .fancybox-close-small {
  883. background: var(--color12);
  884. color: var(--color13);
  885. height: 36px;
  886. opacity: 100%;
  887. padding: 6px;
  888. right: 0;
  889. top: 0;
  890. width: 36px;
  891. }
  892.  
  893. .fancybox-caption {
  894. padding-left: 12px;
  895. padding-right: 12px;
  896. }
  897.  
  898. @supports (padding: max(0px)) {
  899. .fancybox-caption {
  900. padding-left: max(12px, env(safe-area-inset-left));
  901. padding-right: max(
  902. 12px,
  903. env(safe-area-inset-right)
  904. );
  905. }
  906. }
  907. }
  908.  
  909. .fancybox-share {
  910. background: var(--color14);
  911. border-radius: 3px;
  912. max-width: 90%;
  913. padding: 30px;
  914. text-align: center;
  915. }
  916.  
  917. .fancybox-share h1 {
  918. color: var(--color15);
  919. font-size: 35px;
  920. font-weight: 700;
  921. margin: 0 0 20px;
  922. }
  923.  
  924. .fancybox-share p {
  925. margin: 0;
  926. padding: 0;
  927. }
  928.  
  929. .fancybox-share__button {
  930. border: 0;
  931. border-radius: 3px;
  932. display: inline-block;
  933. font-size: 14px;
  934. font-weight: 700;
  935. line-height: 40px;
  936. margin: 0 5px 10px;
  937. min-width: 130px;
  938. padding: 0 15px;
  939. text-decoration: none;
  940. transition: all 0.2s;
  941. -webkit-user-select: none;
  942. -moz-user-select: none;
  943. -ms-user-select: none;
  944. user-select: none;
  945. white-space: nowrap;
  946. }
  947.  
  948. .fancybox-share__button:visited,
  949. .fancybox-share__button:link {
  950. color: var(--color2);
  951. }
  952.  
  953. .fancybox-share__button:hover {
  954. text-decoration: none;
  955. }
  956.  
  957. .fancybox-share__button--fb {
  958. background: var(--color16);
  959. }
  960.  
  961. .fancybox-share__button--fb:hover {
  962. background: var(--color17);
  963. }
  964.  
  965. .fancybox-share__button--pt {
  966. background: var(--color18);
  967. }
  968.  
  969. .fancybox-share__button--pt:hover {
  970. background: var(--color19);
  971. }
  972.  
  973. .fancybox-share__button--tw {
  974. background: var(--color20);
  975. }
  976.  
  977. .fancybox-share__button--tw:hover {
  978. background: var(--color21);
  979. }
  980.  
  981. .fancybox-share__button svg {
  982. height: 25px;
  983. margin-right: 7px;
  984. position: relative;
  985. top: -1px;
  986. vertical-align: middle;
  987. width: 25px;
  988. }
  989.  
  990. .fancybox-share__button svg path {
  991. fill: var(--color2);
  992. }
  993.  
  994. .fancybox-share__input {
  995. background: transparent;
  996. border: 0;
  997. border-bottom: 1px solid var(--color22);
  998. border-radius: 0;
  999. color: var(--color23);
  1000. font-size: 14px;
  1001. margin: 10px 0 0;
  1002. outline: none;
  1003. padding: 10px 15px;
  1004. width: 100%;
  1005. }
  1006.  
  1007. .fancybox-thumbs {
  1008. background: var(--color24);
  1009. bottom: 0;
  1010. display: none;
  1011. margin: 0;
  1012. -webkit-overflow-scrolling: touch;
  1013. -ms-overflow-style: -ms-autohiding-scrollbar;
  1014. padding: 2px 2px 4px;
  1015. position: absolute;
  1016. right: 0;
  1017. -webkit-tap-highlight-color: #00000000;
  1018. top: 0;
  1019. width: 212px;
  1020. z-index: 99995;
  1021. }
  1022.  
  1023. .fancybox-thumbs-x {
  1024. overflow: auto hidden;
  1025. }
  1026.  
  1027. .fancybox-show-thumbs .fancybox-thumbs {
  1028. display: block;
  1029. }
  1030.  
  1031. .fancybox-show-thumbs .fancybox-inner {
  1032. right: 212px;
  1033. }
  1034.  
  1035. .fancybox-thumbs__list {
  1036. font-size: 0;
  1037. height: 100%;
  1038. list-style: none;
  1039. margin: 0;
  1040. overflow: hidden auto;
  1041. padding: 0;
  1042. position: absolute;
  1043. position: relative;
  1044. white-space: nowrap;
  1045. width: 100%;
  1046. }
  1047.  
  1048. .fancybox-thumbs-x .fancybox-thumbs__list {
  1049. overflow: hidden;
  1050. }
  1051.  
  1052. .fancybox-thumbs-y
  1053. .fancybox-thumbs__list::-webkit-scrollbar {
  1054. width: 7px;
  1055. }
  1056.  
  1057. .fancybox-thumbs-y
  1058. .fancybox-thumbs__list::-webkit-scrollbar-track {
  1059. background: var(--color2);
  1060. border-radius: 10px;
  1061. box-shadow: inset 0 0 6px #0000004d;
  1062. }
  1063.  
  1064. .fancybox-thumbs-y
  1065. .fancybox-thumbs__list::-webkit-scrollbar-thumb {
  1066. background: var(--color25);
  1067. border-radius: 10px;
  1068. }
  1069.  
  1070. .fancybox-thumbs__list a {
  1071. -webkit-backface-visibility: hidden;
  1072. backface-visibility: hidden;
  1073. background-color: #0000001a;
  1074. background-position: center center;
  1075. background-repeat: no-repeat;
  1076. background-size: cover;
  1077. cursor: pointer;
  1078. float: left;
  1079. height: 75px;
  1080. margin: 2px;
  1081. max-height: calc(100% - 8px);
  1082. max-width: calc(50% - 4px);
  1083. outline: none;
  1084. overflow: hidden;
  1085. padding: 0;
  1086. position: relative;
  1087. -webkit-tap-highlight-color: transparent;
  1088. width: 100px;
  1089. }
  1090.  
  1091. .fancybox-thumbs__list a::before {
  1092. border: 6px solid var(--color10);
  1093. inset: 0;
  1094. content: '';
  1095. opacity: 0%;
  1096. position: absolute;
  1097. transition: all 0.2s
  1098. cubic-bezier(0.25, 0.46, 0.45, 0.9399999999999999);
  1099. z-index: 99991;
  1100. }
  1101.  
  1102. .fancybox-thumbs__list a:focus::before {
  1103. opacity: 50%;
  1104. }
  1105.  
  1106. .fancybox-thumbs__list a.fancybox-thumbs-active::before {
  1107. opacity: 100%;
  1108. }
  1109.  
  1110. @media all and (width <=576px) {
  1111. .fancybox-thumbs {
  1112. width: 110px;
  1113. }
  1114.  
  1115. .fancybox-show-thumbs .fancybox-inner {
  1116. right: 110px;
  1117. }
  1118.  
  1119. .fancybox-thumbs__list a {
  1120. max-width: calc(100% - 10px);
  1121. }
  1122. }
  1123.  
  1124. body.compensate-for-scrollbar {
  1125. margin-right: 0 !important;
  1126. }
  1127.  
  1128. .fancybox-container {
  1129. z-index: 700;
  1130. }
  1131.  
  1132. .fancybox-infobar,
  1133. .fancybox-toolbar,
  1134. .fancybox-caption,
  1135. .fancybox-navigation .fancybox-button {
  1136. direction: inherit;
  1137. }
  1138.  
  1139. .fancybox-slide--image .fancybox-content {
  1140. left: 0;
  1141. }
  1142.  
  1143. .fancybox-slide--video .fancybox-content iframe {
  1144. background: transparent;
  1145. border: 0;
  1146. display: block;
  1147. height: 100%;
  1148. margin: 0;
  1149. overflow: hidden;
  1150. padding: 0;
  1151. width: 100%;
  1152. }
  1153.  
  1154. .fancybox-slide--embed .fancybox-content {
  1155. box-shadow: none;
  1156. background: transparent;
  1157. padding: 0;
  1158. }
  1159.  
  1160. .fancybox-slide--embed .fancybox-content .bbMediaWrapper,
  1161. .fancybox-slide--embed
  1162. .fancybox-content
  1163. .bbMediaJustifier,
  1164. .fancybox-slide--embed .fancybox-content .bbOembed {
  1165. margin-left: auto;
  1166. margin-right: auto;
  1167. }
  1168.  
  1169. .fancybox-slide--embed
  1170. .fancybox-content
  1171. .bbMediaWrapper-inner {
  1172. position: static;
  1173. }
  1174.  
  1175. .fancybox-slide--embed .fancybox-content iframe {
  1176. margin-bottom: 0;
  1177. }
  1178.  
  1179. .fancybox-progress {
  1180. background: var(--color26);
  1181. }
  1182.  
  1183. @supports (-webkit-backdrop-filter: none) or
  1184. (backdrop-filter: none) {
  1185. .fancybox-inner {
  1186. --backdrop-filter: blur(0);
  1187. -webkit-backdrop-filter: var(--backdrop-filter);
  1188. backdrop-filter: var(--backdrop-filter);
  1189. }
  1190. }
  1191.  
  1192. @supports not (
  1193. (-webkit-backdrop-filter: none) or
  1194. (backdrop-filter: none)
  1195. ) {
  1196. .fancybox-inner {
  1197. background: none;
  1198. }
  1199. }
  1200.  
  1201. @supports (-webkit-backdrop-filter: none) or
  1202. (backdrop-filter: none) {
  1203. .fancybox-is-open .fancybox-inner {
  1204. --backdrop-filter: blur(5px);
  1205. -webkit-backdrop-filter: var(--backdrop-filter);
  1206. backdrop-filter: var(--backdrop-filter);
  1207. }
  1208. }
  1209.  
  1210. @supports not (
  1211. (-webkit-backdrop-filter: none) or
  1212. (backdrop-filter: none)
  1213. ) {
  1214. .fancybox-is-open .fancybox-inner {
  1215. background: none;
  1216. }
  1217. }
  1218.  
  1219. .fancybox-content {
  1220. box-shadow: 5px 5px 15px #00000080;
  1221. }
  1222.  
  1223. .fancybox-container {
  1224. --fancybox-thumb-size: 150px;
  1225. }
  1226.  
  1227. @media (width <=480px), (height <=480px) {
  1228. .fancybox-container {
  1229. --fancybox-thumb-size: 75px;
  1230. }
  1231. }
  1232.  
  1233. .fancybox-thumbs__list a {
  1234. width: var(--fancybox-thumb-size);
  1235. height: var(--fancybox-thumb-size);
  1236. }
  1237.  
  1238. .fancybox-thumbs__list a::before {
  1239. border: 2px solid var(--color11);
  1240. background: radial-gradient(
  1241. transparent,
  1242. #000000bf
  1243. );
  1244. }
  1245.  
  1246. .fancybox-show-thumbs .fancybox-inner {
  1247. right: 0;
  1248. bottom: var(--fancybox-thumb-size);
  1249. }
  1250.  
  1251. .fancybox-button > i {
  1252. font-family: 'Font Awesome 5 Pro';
  1253. font-size: inherit;
  1254. font-style: normal;
  1255. font-weight: 400;
  1256. text-rendering: auto;
  1257. -webkit-font-smoothing: antialiased;
  1258. -moz-osx-font-smoothing: grayscale;
  1259. display: block;
  1260. height: 100%;
  1261. overflow: visible;
  1262. position: relative;
  1263. width: 100%;
  1264. }
  1265.  
  1266. .fancybox-is-zoomable
  1267. .fancybox-button.fancybox-button--zoom
  1268. > i::before,
  1269. .fancybox-button.fancybox-button--zoom[disabled]
  1270. > i::before {
  1271. content: '\f00e';
  1272. width: 1.28571429em;
  1273. display: inline-block;
  1274. text-align: center;
  1275. }
  1276.  
  1277. .fancybox-is-zoomable
  1278. .fancybox-button.fancybox-button--zoom
  1279. > i:nth-child(1),
  1280. .fancybox-button.fancybox-button--zoom[disabled]
  1281. > i:nth-child(1) {
  1282. display: block;
  1283. }
  1284.  
  1285. .fancybox-is-zoomable
  1286. .fancybox-button.fancybox-button--zoom
  1287. > i:nth-child(2),
  1288. .fancybox-button.fancybox-button--zoom[disabled]
  1289. > i:nth-child(2) {
  1290. display: none;
  1291. }
  1292.  
  1293. .fancybox-can-pan
  1294. .fancybox-button.fancybox-button--zoom
  1295. > i::before {
  1296. content: '\f010';
  1297. width: 1.28571429em;
  1298. display: inline-block;
  1299. text-align: center;
  1300. }
  1301.  
  1302. .fancybox-can-pan
  1303. .fancybox-button.fancybox-button--zoom
  1304. > i:nth-child(1) {
  1305. display: none;
  1306. }
  1307.  
  1308. .fancybox-can-pan
  1309. .fancybox-button.fancybox-button--zoom
  1310. > i:nth-child(2) {
  1311. display: block;
  1312. }
  1313.  
  1314. .fancybox-button.fancybox-button--nw > i::before {
  1315. content: '\f08e';
  1316. width: 1.28571429em;
  1317. display: inline-block;
  1318. text-align: center;
  1319. }
  1320.  
  1321. .fancybox-button.fancybox-button--fsenter > i::before {
  1322. content: '\f065';
  1323. width: 1.28571429em;
  1324. display: inline-block;
  1325. text-align: center;
  1326. }
  1327.  
  1328. .fancybox-button.fancybox-button--fsenter
  1329. > i:nth-child(2) {
  1330. display: none;
  1331. }
  1332.  
  1333. .fancybox-button.fancybox-button--fsexit > i::before {
  1334. content: '\f066';
  1335. width: 1.28571429em;
  1336. display: inline-block;
  1337. text-align: center;
  1338. }
  1339.  
  1340. .fancybox-button.fancybox-button--fsexit
  1341. > i:nth-child(1) {
  1342. display: none;
  1343. }
  1344.  
  1345. .fancybox-button.fancybox-button--download > i::before {
  1346. content: '\f019';
  1347. width: 1.28571429em;
  1348. display: inline-block;
  1349. text-align: center;
  1350. }
  1351.  
  1352. .fancybox-button.fancybox-button--thumbs > i::before {
  1353. content: '\f58d';
  1354. width: 1.28571429em;
  1355. display: inline-block;
  1356. text-align: center;
  1357. }
  1358.  
  1359. .fancybox-button.fancybox-button--close > i::before {
  1360. content: '\f00d';
  1361. width: 1.28571429em;
  1362. display: inline-block;
  1363. text-align: center;
  1364. }
  1365.  
  1366. .fancybox-button.fancybox-button--sidebartoggle
  1367. > i::before {
  1368. content: '\f323';
  1369. width: 1.28571429em;
  1370. display: inline-block;
  1371. text-align: center;
  1372. }
  1373.  
  1374. .fancybox-show-sidebar
  1375. .fancybox-button.fancybox-button--sidebartoggle
  1376. > i::before {
  1377. content: '\f324';
  1378. width: 1.28571429em;
  1379. display: inline-block;
  1380. text-align: center;
  1381. }
  1382.  
  1383. .fancybox-button.fancybox-button--arrow_left > i {
  1384. padding: 7px;
  1385. height: 100%;
  1386. }
  1387.  
  1388. .fancybox-button.fancybox-button--arrow_left > i::before {
  1389. content: '\f053';
  1390. width: 1.28571429em;
  1391. display: inline-block;
  1392. text-align: center;
  1393. }
  1394.  
  1395. .fancybox-button.fancybox-button--arrow_right > i {
  1396. height: 100%;
  1397. padding: 7px;
  1398. }
  1399.  
  1400. .fancybox-button.fancybox-button--arrow_right
  1401. > i::before {
  1402. content: '\f054';
  1403. width: 1.28571429em;
  1404. display: inline-block;
  1405. text-align: center;
  1406. }
  1407.  
  1408. .fancybox-button.fancybox-button--play > i::before {
  1409. content: '\f04b';
  1410. width: 1.28571429em;
  1411. display: inline-block;
  1412. text-align: center;
  1413. }
  1414.  
  1415. .fancybox-button.fancybox-button--play > i:nth-child(2) {
  1416. display: none;
  1417. }
  1418.  
  1419. .fancybox-button.fancybox-button--pause > i::before {
  1420. content: '\f04c';
  1421. width: 1.28571429em;
  1422. display: inline-block;
  1423. text-align: center;
  1424. }
  1425.  
  1426. .fancybox-button.fancybox-button--pause > i:nth-child(1) {
  1427. display: none;
  1428. }
  1429.  
  1430. .fancybox-sidebartoggle {
  1431. display: none;
  1432. text-align: right;
  1433. }
  1434.  
  1435. .fancybox-has-sidebar .fancybox-sidebartoggle {
  1436. display: block;
  1437. }
  1438.  
  1439. .fancybox-navigation .fancybox-button {
  1440. background: transparent;
  1441. }
  1442.  
  1443. .fancybox-navigation .fancybox-button i {
  1444. background: #1e1e1e99;
  1445. }
  1446.  
  1447. .fancybox-caption {
  1448. padding-top: 60px;
  1449. padding-bottom: max(10px, env(safe-area-inset-bottom));
  1450. }
  1451.  
  1452. .fancybox-caption__body h4,
  1453. .fancybox-caption__body p {
  1454. margin: 0;
  1455. }
  1456.  
  1457. .fancybox-thumbs {
  1458. inset: auto 0 0;
  1459. width: auto;
  1460. height: auto;
  1461. padding: 0 10px;
  1462. box-sizing: border-box;
  1463. background: #0000004d;
  1464. }
  1465.  
  1466. .fancybox-show-thumbs .fancybox-inner {
  1467. right: 0;
  1468. }
  1469.  
  1470. .fancybox-show-thumbs .fancybox-inner,
  1471. .fancybox-show-thumbs .fancybox-sidebar {
  1472. bottom: var(--fancybox-thumb-size);
  1473. margin-bottom: 4px;
  1474. }
  1475.  
  1476. .fancybox-navigation .fancybox-button i,
  1477. .fancybox-thumbs__list a,
  1478. .fancybox-thumbs__list a::before,
  1479. .fancybox-image {
  1480. border-radius: 5px;
  1481. }
  1482.  
  1483. .fancybox-show-sidebar .fancybox-inner {
  1484. right: 360px;
  1485. }
  1486.  
  1487. .fancybox-sidebar {
  1488. background: var(--color27);
  1489. bottom: 0;
  1490. margin: 0;
  1491. position: absolute;
  1492. right: 0;
  1493. top: 0;
  1494. width: 360px;
  1495. z-index: 700;
  1496. overflow-y: auto;
  1497. display: none;
  1498. }
  1499.  
  1500. .fancybox-sidebar.is-active {
  1501. display: block;
  1502. }
  1503.  
  1504. .fancybox-sidebar-loader {
  1505. opacity: 0%;
  1506. position: absolute;
  1507. height: 100%;
  1508. width: 100%;
  1509. left: 0;
  1510. top: 0;
  1511. text-align: center;
  1512. pointer-events: none;
  1513. color: var(--color2);
  1514. background: #0e0e12e6;
  1515. z-index: 200;
  1516. }
  1517.  
  1518. .is-loading .fancybox-sidebar-loader {
  1519. opacity: 100%;
  1520. }
  1521.  
  1522. .is-loading .fancybox-sidebar-loader .fa--xf {
  1523. /* stylelint-disable-next-line no-unknown-animations -- unneeded*/
  1524. animation-name: spin;
  1525. }
  1526.  
  1527. .fancybox-sidebar-loader .fa--xf {
  1528. position: absolute;
  1529. left: calc(50% - 0.5em);
  1530. top: calc(50% - 0.5em);
  1531. animation-duration: 1000ms;
  1532. animation-iteration-count: infinite;
  1533. }
  1534.  
  1535. @media (width <=900px) {
  1536. .fancybox-sidebar .block-row {
  1537. padding: 4px 10px;
  1538. }
  1539.  
  1540. .fancybox-sidebar
  1541. .xfmgInfoBlock-title
  1542. .contentRow-figure {
  1543. display: none;
  1544. }
  1545.  
  1546. .fancybox-sidebar
  1547. .xfmgInfoBlock-title
  1548. .contentRow-main {
  1549. padding-left: 0;
  1550. }
  1551.  
  1552. .fancybox-sidebar .message-responseRow .comment-avatar {
  1553. display: none;
  1554. }
  1555.  
  1556. .fancybox-sidebar .message-responseRow .comment-main {
  1557. padding-left: 0;
  1558. }
  1559. }
  1560.  
  1561. @media (width <=900px) {
  1562. .fancybox-sidebar .block-container {
  1563. margin: 0;
  1564. }
  1565. }
  1566.  
  1567. /********* public:node_list.less ********/
  1568. .block--category .block-header {
  1569. display: flex;
  1570. align-items: center;
  1571. font-size: 1.7rem;
  1572. color: var(--color28);
  1573. font-weight: 500;
  1574. background: var(--color3);
  1575. border-bottom-width: 0;
  1576. border-bottom-style: solid;
  1577. padding: 15px;
  1578. line-height: 1;
  1579. margin-bottom: 6px;
  1580. letter-spacing: 2px;
  1581. }
  1582.  
  1583. @media (width <=900px) {
  1584. .block--category .block-header {
  1585. margin-left: -10px;
  1586. margin-right: -10px;
  1587. border-radius: 0;
  1588. border-left: none;
  1589. border-right: none;
  1590. }
  1591. }
  1592.  
  1593. .block--category .block-header.uix_stickyCategoryStrips {
  1594. position: sticky;
  1595. }
  1596.  
  1597. .block--category .block-header .uix_categoryStrip__icon {
  1598. align-self: flex-start;
  1599. }
  1600.  
  1601. .block--category
  1602. .block-header
  1603. .uix_categoryStrip__icon
  1604. i {
  1605. font-size: 24px;
  1606. color: var(--color28);
  1607. padding-right: 10px;
  1608. vertical-align: middle;
  1609. }
  1610.  
  1611. .block--category
  1612. .block-header
  1613. .uix_categoryStrip__icon
  1614. i::before {
  1615. font-family: 'Font Awesome 5 Pro';
  1616. font-size: inherit;
  1617. font-style: normal;
  1618. font-weight: 400;
  1619. text-rendering: auto;
  1620. -webkit-font-smoothing: antialiased;
  1621. -moz-osx-font-smoothing: grayscale;
  1622. content: '\f07b';
  1623. width: 1.28571429em;
  1624. display: inline-block;
  1625. text-align: center;
  1626. }
  1627.  
  1628. .block--category .block-header .node-description {
  1629. font-size: 1.2rem;
  1630. color: var(--color29);
  1631. font-weight: 400;
  1632. padding-top: 4px;
  1633. line-height: 1.5;
  1634. font-family:
  1635. -apple-system,
  1636. BlinkMacSystemFont,
  1637. Segoe UI,
  1638. Roboto,
  1639. Helvetica,
  1640. Arial,
  1641. sans-serif,
  1642. Apple Color Emoji,
  1643. Segoe UI Emoji,
  1644. Segoe UI Symbol;
  1645. text-transform: none;
  1646. }
  1647.  
  1648. .block--category
  1649. .block-header
  1650. .categoryCollapse--trigger {
  1651. font-size: 24px;
  1652. margin-left: auto;
  1653. }
  1654.  
  1655. .uix_nodeList .block-container {
  1656. border-width: 0;
  1657. border-style: solid;
  1658. box-shadow: none;
  1659. background-image: linear-gradient(
  1660. 135deg,
  1661. var(--color30),
  1662. var(--color31)
  1663. );
  1664. }
  1665.  
  1666. .uix_nodeList .block-body {
  1667. border-radius: 4px;
  1668. box-shadow:
  1669. 0 0 3px 0 #0000004d,
  1670. 0 2px 3px 0 #00000042,
  1671. 0 1px 4px 0 #00000066;
  1672. }
  1673.  
  1674. .block-body .node:first-child .node-body {
  1675. border-top-left-radius: 4px;
  1676. border-top-right-radius: 4px;
  1677. }
  1678.  
  1679. .block-body .node:last-child .node-body {
  1680. border-bottom-left-radius: 4px;
  1681. border-bottom-right-radius: 4px;
  1682. }
  1683.  
  1684. .node + .node {
  1685. border-top: 1px solid var(--color32);
  1686. }
  1687.  
  1688. .node-body {
  1689. display: table;
  1690. table-layout: fixed;
  1691. width: 100%;
  1692. transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  1693. padding: 15px 10px;
  1694. overflow: hidden;
  1695. align-items: center;
  1696. }
  1697.  
  1698. .node-body:hover {
  1699. background: var(--color30);
  1700. position: relative;
  1701. cursor: pointer;
  1702. }
  1703.  
  1704. /* .node--depth2:nth-child(even) .node-body {
  1705. background-color:
  1706. } */
  1707.  
  1708. .node--depth2:nth-child(even) .node-body:hover {
  1709. background: var(--color30);
  1710. position: relative;
  1711. }
  1712.  
  1713. .node-body {
  1714. display: flex;
  1715. }
  1716.  
  1717. .node-body .node-icon,
  1718. .node-body .node-main {
  1719. display: inline-block;
  1720. }
  1721.  
  1722. .node-body .node-main {
  1723. flex-grow: 1;
  1724. width: calc(100% - 56px);
  1725. }
  1726.  
  1727. @media (width <=650px) {
  1728. .node-body {
  1729. flex-wrap: wrap;
  1730. }
  1731.  
  1732. .node-body .node-extra {
  1733. width: 100%;
  1734. padding-left: 56px;
  1735. }
  1736. }
  1737.  
  1738. .node-icon {
  1739. display: table-cell;
  1740. vertical-align: top;
  1741. text-align: center;
  1742. width: 46px;
  1743. padding: 10px 0 10px 10px;
  1744. flex-shrink: 0;
  1745. }
  1746.  
  1747. .node-icon i {
  1748. line-height: 1;
  1749. font-size: 32px;
  1750. display: none;
  1751. }
  1752.  
  1753. .node-icon i::before {
  1754. font-family: 'Font Awesome 5 Pro';
  1755. font-style: normal;
  1756. font-weight: 400;
  1757. text-rendering: auto;
  1758. -webkit-font-smoothing: antialiased;
  1759. -moz-osx-font-smoothing: grayscale;
  1760. font-size: inherit;
  1761. color: var(--color29);
  1762. }
  1763.  
  1764. .node--unread .node-icon i::before {
  1765. opacity: 100%;
  1766. color: var(--color26);
  1767. }
  1768.  
  1769. .node--category:not(.th_node--hasCustomIcon)
  1770. .node-icon
  1771. i::before {
  1772. content: '\f07b';
  1773. width: 1.28571429em;
  1774. display: inline-block;
  1775. text-align: center;
  1776. }
  1777.  
  1778. .node--search:not(.th_node--hasCustomIcon)
  1779. .node-icon
  1780. i::before {
  1781. content: '\f002';
  1782. width: 1.28571429em;
  1783. display: inline-block;
  1784. text-align: center;
  1785. }
  1786.  
  1787. .node--page:not(.th_node--hasCustomIcon)
  1788. .node-icon
  1789. i::before {
  1790. content: '\f15c';
  1791. width: 1.28571429em;
  1792. display: inline-block;
  1793. text-align: center;
  1794. }
  1795.  
  1796. .node--link:not(.th_node--hasCustomIcon)
  1797. .node-icon
  1798. i::before {
  1799. content: '\f0c1';
  1800. width: 1.28571429em;
  1801. display: inline-block;
  1802. text-align: center;
  1803. }
  1804.  
  1805. .node-main {
  1806. display: table-cell;
  1807. vertical-align: middle;
  1808. padding: 10px;
  1809. }
  1810.  
  1811. .node-stats {
  1812. display: inline-flex;
  1813. align-items: center;
  1814. width: 140px;
  1815. min-width: 140px;
  1816. vertical-align: middle;
  1817. text-align: center;
  1818. padding: 10px 0;
  1819. }
  1820.  
  1821. .node-stats .pairs {
  1822. line-height: 1.5;
  1823. }
  1824.  
  1825. .node-stats > dl.pairs.pairs--rows {
  1826. width: 50%;
  1827. float: left;
  1828. margin: 0;
  1829. padding: 0 5px;
  1830. border-right: 1px solid var(--color32);
  1831. }
  1832.  
  1833. .node-stats > dl.pairs.pairs--rows:first-child {
  1834. padding-left: 0;
  1835. }
  1836.  
  1837. .node-stats > dl.pairs.pairs--rows:last-child {
  1838. padding-right: 0;
  1839. border-right: 0;
  1840. }
  1841.  
  1842. .node-stats.node-stats--single {
  1843. width: 100px;
  1844. }
  1845.  
  1846. .node-stats.node-stats--single > dl.pairs.pairs--rows {
  1847. width: 100%;
  1848. float: none;
  1849. }
  1850.  
  1851. .node-stats.node-stats--triple {
  1852. width: 240px;
  1853. }
  1854.  
  1855. .node-stats.node-stats--triple > dl.pairs.pairs--rows {
  1856. width: 33.333%;
  1857. }
  1858.  
  1859. @media (width <=1000px) {
  1860. .node-stats {
  1861. display: none;
  1862. }
  1863. }
  1864.  
  1865. .node-extra {
  1866. vertical-align: middle;
  1867. width: 280px;
  1868. min-width: 230px;
  1869. padding: 10px;
  1870. display: inline-flex;
  1871. align-items: center;
  1872. font-size: 1.3rem;
  1873. }
  1874.  
  1875. .node-extra a:not(:hover) {
  1876. color: inherit;
  1877. }
  1878.  
  1879. .node-extra .node-extra-title:not(:hover) {
  1880. color: var(--color2);
  1881. }
  1882.  
  1883. .node-extra .uix_nodeExtra__rows {
  1884. display: flex;
  1885. flex-flow: column wrap;
  1886. min-width: 0;
  1887. max-width: 100%;
  1888. width: 100%;
  1889. }
  1890.  
  1891. .node-extra-row {
  1892. overflow: hidden;
  1893. white-space: nowrap;
  1894. word-wrap: normal;
  1895. text-overflow: ellipsis;
  1896. color: var(--color1);
  1897. max-width: 100%;
  1898. }
  1899.  
  1900. .node-extra-row .listInline {
  1901. overflow: hidden;
  1902. white-space: nowrap;
  1903. word-wrap: normal;
  1904. text-overflow: ellipsis;
  1905. }
  1906.  
  1907. .node-extra-icon {
  1908. padding-right: 10px;
  1909. float: left;
  1910. }
  1911.  
  1912. .node-extra-icon .avatar {
  1913. width: 36px;
  1914. height: 36px;
  1915. font-size: 22px;
  1916. }
  1917.  
  1918. .node-extra-title {
  1919. padding-right: 0.5em;
  1920. font-weight: 500;
  1921. }
  1922.  
  1923. .node-title {
  1924. color: var(--color2);
  1925. font-weight: 300;
  1926. text-decoration: none;
  1927. letter-spacing: 0.07em;
  1928. margin: 0;
  1929. }
  1930.  
  1931. .node-title a {
  1932. text-decoration: none !important;
  1933. }
  1934.  
  1935. .node-title a:hover {
  1936. color: var(--color2);
  1937. text-decoration: underline !important;
  1938. }
  1939.  
  1940. .node-title a {
  1941. color: inherit;
  1942. }
  1943.  
  1944. .node--unread .node-title {
  1945. font-weight: 500;
  1946. }
  1947.  
  1948. .node-description {
  1949. font-size: 1.3rem;
  1950. color: var(--color1);
  1951. line-height: 1.5;
  1952. }
  1953.  
  1954. .has-js:not(.has-touchevents)
  1955. .node-description.node-description--tooltip {
  1956. display: none;
  1957. }
  1958.  
  1959. .node-meta {
  1960. display: inline;
  1961. }
  1962.  
  1963. .node-statsMeta {
  1964. display: none;
  1965. }
  1966.  
  1967. .node-statsMeta .pairs {
  1968. padding-right: 0.4em;
  1969. }
  1970.  
  1971. .node-statsMeta dt,
  1972. .node-statsMeta dt::after {
  1973. display: none;
  1974. }
  1975.  
  1976. @media (width <=1000px) {
  1977. .node-statsMeta {
  1978. display: inline;
  1979. }
  1980. }
  1981.  
  1982. .node-bonus {
  1983. font-size: 1.3rem;
  1984. color: var(--color1);
  1985. text-align: right;
  1986. }
  1987.  
  1988. .node-subNodesFlat {
  1989. font-size: 1.3rem;
  1990. margin-top: 0.3em;
  1991. }
  1992.  
  1993. .node-subNodesFlat .node-subNodesLabel {
  1994. display: none;
  1995. }
  1996.  
  1997. .node-subNodeMenu {
  1998. display: inline;
  1999. }
  2000.  
  2001. .node-subNodeMenu i {
  2002. display: none;
  2003. }
  2004.  
  2005. @media (width <=1000px) {
  2006. .node-subNodeMenu i {
  2007. display: inline-block;
  2008. }
  2009.  
  2010. .node-subNodeMenu span {
  2011. display: none;
  2012. }
  2013. }
  2014.  
  2015. .node-subNodeMenu .menuTrigger {
  2016. color: var(--color1);
  2017. }
  2018.  
  2019. @media (width <=650px) {
  2020. .node-main {
  2021. display: block;
  2022. width: auto;
  2023. }
  2024.  
  2025. .node--link .node-main,
  2026. .node--page .node-main {
  2027. display: table-cell;
  2028. }
  2029.  
  2030. .node-extra {
  2031. display: flex;
  2032. width: auto;
  2033. margin-top: -5px;
  2034. padding-top: 0;
  2035. }
  2036.  
  2037. .node-extra-row {
  2038. display: inline-block;
  2039. vertical-align: top;
  2040. max-width: 100%;
  2041. }
  2042.  
  2043. .node-extra-icon {
  2044. display: none;
  2045. }
  2046.  
  2047. .node-description,
  2048. .node-subNodesFlat {
  2049. display: none;
  2050. }
  2051. }
  2052.  
  2053. .subNodeLink::before,
  2054. .subNodeLink .subNodeLink-icon {
  2055. display: inline-block;
  2056. width: 1.28571429em;
  2057. margin-right: 0.3em;
  2058. text-decoration: none;
  2059. text-align: center;
  2060. color: var(--color1);
  2061. }
  2062.  
  2063. .subNodeLink::before {
  2064. font-family: 'Font Awesome 5 Pro';
  2065. font-size: inherit;
  2066. font-style: normal;
  2067. font-weight: 400;
  2068. text-rendering: auto;
  2069. -webkit-font-smoothing: antialiased;
  2070. -moz-osx-font-smoothing: grayscale;
  2071. }
  2072.  
  2073. .subNodeLink:hover::before::before,
  2074. .subNodeLink:hover::before .subNodeLink-icon {
  2075. text-decoration: none;
  2076. }
  2077.  
  2078. .subNodeLink.subNodeLink--unread {
  2079. font-weight: 500;
  2080. }
  2081.  
  2082. .subNodeLink.subNodeLink--unread::before,
  2083. .subNodeLink.subNodeLink--unread .subNodeLink-icon {
  2084. color: var(--color26);
  2085. }
  2086.  
  2087. .subNodeLink.subNodeLink--forum
  2088. .subNodeLink-icon::before {
  2089. content: '\f086';
  2090. width: 1.28571429em;
  2091. display: inline-block;
  2092. text-align: center;
  2093. }
  2094.  
  2095. .subNodeLink.subNodeLink--category::before {
  2096. content: '\f07b';
  2097. width: 1.28571429em;
  2098. display: inline-block;
  2099. text-align: center;
  2100. }
  2101.  
  2102. .subNodeLink.subNodeLink--page::before {
  2103. content: '\f15c';
  2104. width: 1.28571429em;
  2105. display: inline-block;
  2106. text-align: center;
  2107. }
  2108.  
  2109. .subNodeLink.subNodeLink--link::before {
  2110. content: '\f0c1';
  2111. width: 1.28571429em;
  2112. display: inline-block;
  2113. text-align: center;
  2114. }
  2115.  
  2116. .subNodeLink.subNodeLink--search::before {
  2117. content: '\f002';
  2118. width: 1.28571429em;
  2119. display: inline-block;
  2120. text-align: center;
  2121. }
  2122.  
  2123. .node-subNodeFlatList {
  2124. list-style: none;
  2125. margin: 0;
  2126. padding: 0;
  2127. }
  2128.  
  2129. .node-subNodeFlatList::before,
  2130. .node-subNodeFlatList::after {
  2131. content: ' ';
  2132. display: table;
  2133. }
  2134.  
  2135. .node-subNodeFlatList::after {
  2136. clear: both;
  2137. }
  2138.  
  2139. .node-subNodeFlatList > li {
  2140. display: inline-block;
  2141. margin-right: 1em;
  2142. }
  2143.  
  2144. .node-subNodeFlatList > li:last-child {
  2145. margin-right: 0;
  2146. }
  2147.  
  2148. .node-subNodeFlatList > li a {
  2149. color: var(--color2);
  2150. }
  2151.  
  2152. .node-subNodeFlatList ol,
  2153. .node-subNodeFlatList ul,
  2154. .node-subNodeFlatList .node-subNodes {
  2155. display: none;
  2156. }
  2157.  
  2158. .subNodeMenu {
  2159. list-style: none;
  2160. margin: 0;
  2161. padding: 0;
  2162. }
  2163.  
  2164. .subNodeMenu ol,
  2165. .subNodeMenu ul {
  2166. list-style: none;
  2167. margin: 0;
  2168. padding: 0;
  2169. }
  2170.  
  2171. .subNodeMenu .subNodeLink {
  2172. display: block;
  2173. padding: 7.5px 15px;
  2174. text-decoration: none;
  2175. cursor: pointer;
  2176. }
  2177.  
  2178. .subNodeMenu .subNodeLink:hover {
  2179. text-decoration: none;
  2180. background: var(--color30);
  2181. }
  2182.  
  2183. .subNodeMenu li li .subNodeLink {
  2184. padding-left: 1.5em;
  2185. }
  2186.  
  2187. .subNodeMenu li li li .subNodeLink {
  2188. padding-left: 3em;
  2189. }
  2190.  
  2191. .subNodeMenu li li li li .subNodeLink {
  2192. padding-left: 4.5em;
  2193. }
  2194.  
  2195. .subNodeMenu li li li li li .subNodeLink {
  2196. padding-left: 6em;
  2197. }
  2198.  
  2199. .subNodeMenu li li li li li li .subNodeLink {
  2200. padding-left: 7.5em;
  2201. }
  2202.  
  2203. .node-footer--actions a {
  2204. font-size: 18px;
  2205. }
  2206.  
  2207. .node-footer--actions a:not(:last-child) {
  2208. padding-right: 5px;
  2209. }
  2210.  
  2211. .node-footer--actions a::before {
  2212. width: auto !important;
  2213. }
  2214.  
  2215. @keyframes loadUp {
  2216. from {
  2217. bottom: 0;
  2218. opacity: 0%;
  2219. }
  2220.  
  2221. to {
  2222. bottom: 0;
  2223. opacity: 100%;
  2224. }
  2225. }
  2226.  
  2227. .has-js
  2228. .thNodes__nodeList.thNodes__nodeList--running
  2229. .block--category {
  2230. animation: loadUp;
  2231. animation-duration: 0.8s;
  2232. position: relative;
  2233. }
  2234.  
  2235. .thNodes__nodeList {
  2236. display: flex;
  2237. margin-left: -12px;
  2238. margin-right: -12px;
  2239. flex-wrap: wrap;
  2240. }
  2241.  
  2242. .thNodes__nodeList > .block {
  2243. padding: 0 12px;
  2244. width: 100%;
  2245. }
  2246.  
  2247. .thNodes__nodeList .thNodes_separator {
  2248. display: block;
  2249. height: 12px;
  2250. width: 100%;
  2251. }
  2252.  
  2253. .thNodes__nodeList .block-container {
  2254. background: none;
  2255. border: none;
  2256. box-shadow: none;
  2257. }
  2258.  
  2259. .thNodes__nodeList .block-container .block-body {
  2260. background: none;
  2261. display: flex;
  2262. flex-wrap: wrap;
  2263. box-shadow: none;
  2264. }
  2265.  
  2266. .thNodes__nodeList .block-container .thNodes__nodeHeader {
  2267. display: flex;
  2268. flex-grow: 1;
  2269. }
  2270.  
  2271. .thNodes__nodeList .block-container .block-header {
  2272. margin-bottom: 12px;
  2273. }
  2274.  
  2275. .thNodes__nodeList .block-container .node {
  2276. padding: 12px 12px 0 0;
  2277. flex-basis: 300px;
  2278. display: flex;
  2279. flex-direction: column;
  2280. }
  2281.  
  2282. .thNodes__nodeList .block-container .node + .node {
  2283. border: none;
  2284. }
  2285.  
  2286. .thNodes__nodeList
  2287. .block-container
  2288. .node.th_nodes_rowAbs_1 {
  2289. padding-top: 0;
  2290. }
  2291.  
  2292. @media (width >=901px) {
  2293. .thNodes__nodeList
  2294. .block-container
  2295. .node.th_nodes_right {
  2296. padding-right: 0;
  2297. }
  2298. }
  2299.  
  2300. @media (width <=900px) {
  2301. .thNodes__nodeList
  2302. .block-container
  2303. .node.th_nodes_col_1 {
  2304. padding-left: 12px;
  2305. }
  2306. }
  2307.  
  2308. .thNodes__nodeList .block-container .node-stats {
  2309. display: none;
  2310. }
  2311.  
  2312. .thNodes__nodeList .block-container .node-statsMeta {
  2313. display: inline;
  2314. }
  2315.  
  2316. .thNodes__nodeList
  2317. .block-container
  2318. .th_nodes--below-lg
  2319. .node-main {
  2320. flex-grow: 1;
  2321. }
  2322.  
  2323. .thNodes__nodeList
  2324. .block-container
  2325. .th_nodes--below-lg
  2326. .node-stats {
  2327. display: none;
  2328. }
  2329.  
  2330. .thNodes__nodeList
  2331. .block-container
  2332. .th_nodes--below-lg
  2333. .node-extra {
  2334. width: 100%;
  2335. margin-top: 0;
  2336. padding-top: 15px;
  2337. }
  2338.  
  2339. .thNodes__nodeList
  2340. .block-container
  2341. .th_nodes--below-md
  2342. .node-statsMeta {
  2343. display: inline;
  2344. }
  2345.  
  2346. .thNodes__nodeList .block-container .node-body {
  2347. display: flex;
  2348. align-items: flex-start;
  2349. flex-grow: 1;
  2350. flex-wrap: wrap;
  2351. background-color: var(--color27);
  2352. border: 1px solid var(--color32);
  2353. /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides -- original setup not*/
  2354. background: var(--color30);
  2355. border-radius: 4px;
  2356. }
  2357.  
  2358. .thNodes__nodeList .block-container .node-main {
  2359. flex-grow: 1;
  2360. }
  2361.  
  2362. .thNodes__nodeList .block-container .block-footer {
  2363. width: 100%;
  2364. display: flex;
  2365. align-items: center;
  2366. justify-content: space-between;
  2367. order: 1;
  2368. align-self: flex-end;
  2369. margin-top: auto;
  2370. }
  2371.  
  2372. .thNodes__nodeList .block-container .block-footer::before,
  2373. .thNodes__nodeList .block-container .block-footer::after {
  2374. display: none;
  2375. }
  2376.  
  2377. .thNodes__nodeList .block-container .block-footer a {
  2378. display: inline-flex;
  2379. align-items: center;
  2380. }
  2381.  
  2382. .thNodes__nodeList
  2383. .block-container
  2384. .block-footer
  2385. a:hover {
  2386. text-decoration: none;
  2387. }
  2388.  
  2389. .thNodes__nodeList
  2390. .block-container
  2391. .node-footer--more
  2392. a::before {
  2393. font-family: 'Font Awesome 5 Pro';
  2394. font-style: normal;
  2395. font-weight: 400;
  2396. text-rendering: auto;
  2397. -webkit-font-smoothing: antialiased;
  2398. -moz-osx-font-smoothing: grayscale;
  2399. content: '\f061';
  2400. width: 1.28571429em;
  2401. display: inline-block;
  2402. text-align: center;
  2403. font-size: 18px;
  2404. padding-right: 6px;
  2405. }
  2406.  
  2407. .thNodes__nodeList
  2408. .block-container
  2409. .node-footer--createThread::before {
  2410. font-family: 'Font Awesome 5 Pro';
  2411. font-style: normal;
  2412. font-weight: 400;
  2413. text-rendering: auto;
  2414. -webkit-font-smoothing: antialiased;
  2415. -moz-osx-font-smoothing: grayscale;
  2416. content: '\f055';
  2417. width: 0.58em;
  2418. display: inline-block;
  2419. text-align: center;
  2420. font-size: 18px;
  2421. }
  2422.  
  2423. .thNodes__nodeList
  2424. .block-container
  2425. .th_node--hasBackgroundImage
  2426. .node-body {
  2427. background-size: cover;
  2428. background-position: center;
  2429. position: relative;
  2430. }
  2431.  
  2432. .thNodes__nodeList
  2433. .block-container
  2434. .th_node--hasBackgroundImage
  2435. .node-body::before {
  2436. content: '';
  2437. position: absolute;
  2438. inset: 0;
  2439. background: #00000033;
  2440. }
  2441.  
  2442. .thNodes__nodeList
  2443. .block-container
  2444. .th_node--hasBackgroundImage
  2445. .node-body
  2446. > * {
  2447. z-index: 1;
  2448. }
  2449.  
  2450. .thNodes__nodeList .block-container .node {
  2451. padding: 0;
  2452. }
  2453.  
  2454. .thNodes__nodeList .block-container .block-body {
  2455. display: grid;
  2456. grid-template-columns: repeat(
  2457. auto-fit,
  2458. minmax(350px, 1fr)
  2459. );
  2460. grid-gap: 12px;
  2461. }
  2462.  
  2463. @supports not (
  2464. grid-template-columns: repeat(
  2465. auto-fit,
  2466. minmax(350px, 1fr)
  2467. )
  2468. ) {
  2469. .thNodes__nodeList .block-container .block-body {
  2470. display: block;
  2471. }
  2472. }
  2473.  
  2474. .thNodes__nodeList .block-container .node-extra {
  2475. width: 100%;
  2476. }
  2477.  
  2478. .block-container
  2479. .th_node--hasBackground.th_node--overwriteTextStyling
  2480. .node-icon
  2481. i::before {
  2482. color: var(--color44);
  2483. }
  2484.  
  2485. .block-container
  2486. .th_node--hasBackground.th_node--overwriteTextStyling
  2487. .node-description {
  2488. color: var(--color2);
  2489. }
  2490.  
  2491. .block-container
  2492. .th_node--hasBackground.th_node--overwriteTextStyling
  2493. .node-title {
  2494. color: var(--color2);
  2495. }
  2496.  
  2497. .block-container
  2498. .th_node--hasBackground.th_node--overwriteTextStyling
  2499. .node-title
  2500. a {
  2501. color: inherit;
  2502. }
  2503.  
  2504. .block-container
  2505. .th_node--hasBackground.th_node--overwriteTextStyling
  2506. .node-extra {
  2507. color: var(--color2);
  2508. }
  2509.  
  2510. .block-container
  2511. .th_node--hasBackground.th_node--overwriteTextStyling
  2512. .node-extra-row {
  2513. color: inherit;
  2514. }
  2515.  
  2516. .block-container
  2517. .th_node--hasBackground.th_node--overwriteTextStyling
  2518. .node-extra-row
  2519. .node-extra-title {
  2520. color: var(--color2);
  2521. }
  2522.  
  2523. .block-container
  2524. .th_node--hasBackground.th_node--overwriteTextStyling
  2525. .node-extra-row
  2526. .username {
  2527. color: inherit;
  2528. text-decoration: underline;
  2529. }
  2530.  
  2531. .block-container
  2532. .th_node--hasBackground.th_node--overwriteTextStyling
  2533. .node-statsMeta
  2534. dt {
  2535. color: var(--color2);
  2536. }
  2537.  
  2538. .block-container
  2539. .th_node--hasBackground.th_node--overwriteTextStyling
  2540. .node-statsMeta
  2541. dd {
  2542. color: var(--color2);
  2543. }
  2544.  
  2545. .block-container
  2546. .th_node--hasBackground.th_node--overwriteTextStyling
  2547. .node-stats
  2548. dt {
  2549. color: var(--color2);
  2550. }
  2551.  
  2552. .block-container
  2553. .th_node--hasBackground.th_node--overwriteTextStyling
  2554. .node-stats
  2555. dd {
  2556. color: var(--color2);
  2557. }
  2558.  
  2559. .block-container
  2560. .th_node--hasBackground.th_node--overwriteTextStyling
  2561. .node-subNodeMenu
  2562. .menuTrigger {
  2563. color: var(--color2);
  2564. }
  2565.  
  2566. .block-container
  2567. .th_node--hasBackground.th_node--overwriteTextStyling
  2568. .node-subNodeFlatList
  2569. .subNodeLink::before {
  2570. color: var(--color2);
  2571. }
  2572.  
  2573. .block-container
  2574. .th_node--hasBackground.th_node--overwriteTextStyling
  2575. .node-subNodeFlatList
  2576. a {
  2577. color: var(--color2);
  2578. }
  2579.  
  2580. .block-container
  2581. .th_node--hasBackground.th_node--overwriteTextStyling
  2582. .node-bonus {
  2583. color: var(--color2);
  2584. }
  2585.  
  2586. .block-container
  2587. .th_node--hasBackground.th_node--overwriteTextStyling
  2588. .block-footer
  2589. a {
  2590. color: var(--color2);
  2591. }
  2592.  
  2593. .block-container
  2594. .th_node--hasBackground.th_node--overwriteTextStyling
  2595. .iconic
  2596. > input[type='checkbox']
  2597. + i::before {
  2598. color: var(--color2);
  2599. }
  2600.  
  2601. .block-container
  2602. .th_node--hasBackground.th_node--overwriteTextStyling
  2603. .iconic
  2604. > input[type='checkbox']
  2605. + i::after {
  2606. color: var(--color2);
  2607. }
  2608.  
  2609. .block-container .th_node--hasBackground .block-footer {
  2610. background: #0000001a;
  2611. border: none;
  2612. }
  2613.  
  2614. .block-container
  2615. .node.th_node--hasBackgroundImage
  2616. .node-body {
  2617. background-size: cover;
  2618. background-position: center;
  2619. position: relative;
  2620. table-layout: initial;
  2621. }
  2622.  
  2623. .block-container
  2624. .node.th_node--hasBackgroundImage
  2625. .node-body::before {
  2626. content: '';
  2627. position: absolute;
  2628. inset: 0;
  2629. background: #00000033;
  2630. pointer-events: none;
  2631. }
  2632.  
  2633. .block-container
  2634. .node.th_node--hasBackgroundImage
  2635. .node-body
  2636. .block-footer {
  2637. background: #00000066;
  2638. }
  2639.  
  2640. .block-container
  2641. .node.th_node--hasBackgroundImage
  2642. .node-body
  2643. > * {
  2644. z-index: 1;
  2645. position: relative;
  2646. }
  2647.  
  2648. .th_node--hasCustomIcon.subNodeLink::before {
  2649. display: none;
  2650. }
  2651.  
  2652. .th_node--hasCustomIcon.subNodeLink i span.subNodeLink {
  2653. display: inline;
  2654. }
  2655.  
  2656. .th_node--hasCustomIcon .node-icon i {
  2657. color: var(--color29);
  2658. }
  2659.  
  2660. .node--unread.th_node--hasCustomIcon .node-icon i {
  2661. opacity: 100%;
  2662. color: var(--color26);
  2663. }
  2664.  
  2665. .th_node--hasCustomIcon.p-body-header
  2666. > .contentRow
  2667. > .contentRow-figure
  2668. .th_node-page-icon {
  2669. display: table-cell;
  2670. vertical-align: middle;
  2671. text-align: center;
  2672. width: 46px;
  2673. padding: 15px 0 15px 15px;
  2674. }
  2675.  
  2676. .th_node--hasCustomIcon.p-body-header
  2677. > .contentRow
  2678. > .contentRow-figure
  2679. .th_node-page-icon
  2680. i {
  2681. display: block;
  2682. line-height: 1.125;
  2683. font-size: 32px;
  2684. }
  2685.  
  2686. .th_node--hasCustomIcon.p-body-header
  2687. > .contentRow
  2688. > .contentRow-figure
  2689. .th_node-page-icon
  2690. i::before {
  2691. font-family: 'Font Awesome 5 Pro';
  2692. font-size: inherit;
  2693. font-style: normal;
  2694. font-weight: 400;
  2695. text-rendering: auto;
  2696. -webkit-font-smoothing: antialiased;
  2697. -moz-osx-font-smoothing: grayscale;
  2698. color: var(--color1);
  2699. }
  2700.  
  2701. .subNodeLink.subNodeLink--thnode i::before {
  2702. display: inline-block;
  2703. font-family: 'Font Awesome 5 Pro';
  2704. font-size: inherit;
  2705. font-style: normal;
  2706. font-weight: 400;
  2707. text-rendering: auto;
  2708. -webkit-font-smoothing: antialiased;
  2709. -moz-osx-font-smoothing: grayscale;
  2710. width: 1em;
  2711. padding-right: 0.3em;
  2712. text-decoration: none;
  2713. color: var(--color29);
  2714. }
  2715.  
  2716. .subNodeLink.subNodeLink--thnode:hover i::before {
  2717. text-decoration: none;
  2718. }
  2719.  
  2720. .subNodeLink.subNodeLink--thnode.subNodeLink--unread
  2721. i::before {
  2722. color: var(--color26);
  2723. }
  2724.  
  2725. .subNodeLink.subNodeLink--unread span::before {
  2726. color: var(--color26);
  2727. }
  2728.  
  2729. /********* public:th_nodeStyling_nodes.9.less ********/
  2730. .block--category0 .block-container .block-body {
  2731. grid-template-columns: repeat(
  2732. auto-fit,
  2733. minmax(350px, 1fr)
  2734. );
  2735. }
  2736.  
  2737. .block--category92 .block-container .block-body {
  2738. grid-template-columns: repeat(
  2739. auto-fit,
  2740. minmax(350px, 1fr)
  2741. );
  2742. }
  2743.  
  2744. .block--category1 .block-container .block-body {
  2745. grid-template-columns: repeat(
  2746. auto-fit,
  2747. minmax(350px, 1fr)
  2748. );
  2749. }
  2750.  
  2751. .node--id2 > .node-body {
  2752. background-image: url('https://www.skial.com/custom/nodes/news.jpg') !important;
  2753. background-size: cover;
  2754. }
  2755.  
  2756. .node--id4 > .node-body {
  2757. background-image: url('https://www.skial.com/custom/nodes/general3.jpg') !important;
  2758. background-size: cover;
  2759. }
  2760.  
  2761. .node--id82 > .node-body {
  2762. background-image: url('https://www.skial.com/custom/nodes/newswatch.jpg') !important;
  2763. background-size: cover;
  2764. }
  2765.  
  2766. .block--category80 .block-container .block-body {
  2767. grid-template-columns: repeat(
  2768. auto-fit,
  2769. minmax(350px, 1fr)
  2770. );
  2771. }
  2772.  
  2773. .node--id16 > .node-body {
  2774. background-image: url('https://www.skial.com/custom/nodes/tf2-5.jpg') !important;
  2775. background-size: cover;
  2776. }
  2777.  
  2778. .node--id88 > .node-body {
  2779. background-image: url('https://www.skial.com/custom/nodes/mapping5.jpg') !important;
  2780. background-size: cover;
  2781. }
  2782.  
  2783. .node-header-88:not(.thTopic--header) {
  2784. background-image: url('https://www.skial.com/custom/nodes/mapping5.jpg');
  2785. background-color: var(--color42);
  2786. background-size: auto;
  2787. background-repeat: no-repeat;
  2788. background-position: center;
  2789. padding: 15px;
  2790. padding-top: 50px !important;
  2791. position: relative;
  2792. padding-bottom: 16px;
  2793. }
  2794.  
  2795. .node-header-88:not(.thTopic--header)::before {
  2796. content: '';
  2797. position: absolute;
  2798. inset: 0;
  2799. display: block;
  2800. background-color: #00000066;
  2801. }
  2802.  
  2803. .memberHeader-main.node-header-88:not(
  2804. .thTopic--header
  2805. )::before,
  2806. .p-body-header.node-header-88:not(
  2807. .thTopic--header
  2808. )::before {
  2809. background: linear-gradient(
  2810. to bottom,
  2811. #0000001a 0%,
  2812. #00000033 50%,
  2813. #000000b3
  2814. );
  2815. }
  2816.  
  2817. .node-header-88:not(.thTopic--header) > * {
  2818. position: relative;
  2819. }
  2820.  
  2821. .node-header-88:not(.thTopic--header) .p-title-value {
  2822. color: var(--color2);
  2823. }
  2824.  
  2825. .node-header-88:not(.thTopic--header) .p-description {
  2826. color: var(--color45);
  2827. }
  2828.  
  2829. .node-header-88:not(.thTopic--header) .button--cta {
  2830. color: var(--color2);
  2831. border: 2px solid var(--color2);
  2832. background: none;
  2833. box-shadow: none;
  2834. }
  2835.  
  2836. .node-header-88:not(.thTopic--header) .button--cta:hover,
  2837. .node-header-88:not(.thTopic--header) .button--cta:active,
  2838. .node-header-88:not(.thTopic--header) .button--cta:focus {
  2839. background: var(--color2);
  2840. color: var(--color2);
  2841. }
  2842.  
  2843. .node--id18 > .node-body {
  2844. background-image: url('https://www.skial.com/custom/nodes/othergames2.jpg') !important;
  2845. background-size: cover;
  2846. }
  2847.  
  2848. .block--category22 .block-container .block-body {
  2849. grid-template-columns: repeat(
  2850. auto-fit,
  2851. minmax(350px, 1fr)
  2852. );
  2853. }
  2854.  
  2855. .node--id106 > .node-body {
  2856. background-image: url('https://www.skial.com/custom/nodes/report3.jpg') !important;
  2857. background-size: cover;
  2858. }
  2859.  
  2860. .node--id66 > .node-body {
  2861. background-image: url('') !important;
  2862. background-size: cover;
  2863. }
  2864.  
  2865. .node--id71 > .node-body {
  2866. background-image: url('') !important;
  2867. background-size: cover;
  2868. }
  2869.  
  2870. .node--id67 > .node-body {
  2871. background-image: url('') !important;
  2872. background-size: cover;
  2873. }
  2874.  
  2875. .node--id38 > .node-body {
  2876. background-image: url('') !important;
  2877. background-size: cover;
  2878. }
  2879.  
  2880. .node--id65 > .node-body {
  2881. background-image: url('') !important;
  2882. background-size: cover;
  2883. }
  2884.  
  2885. .node--id101 > .node-body {
  2886. background-image: url('') !important;
  2887. background-size: cover;
  2888. }
  2889.  
  2890. .node--id13 > .node-body {
  2891. background-image: url('https://www.skial.com/custom/nodes/suggestions9.jpg') !important;
  2892. background-size: cover;
  2893. }
  2894.  
  2895. .node--id14 > .node-body {
  2896. background-image: url('https://www.skial.com/custom/nodes/appeal10.jpg') !important;
  2897. background-size: cover;
  2898. }
  2899.  
  2900. .node--id69 > .node-body {
  2901. background-image: url('') !important;
  2902. background-size: cover;
  2903. }
  2904.  
  2905. .node--id73 > .node-body {
  2906. background-image: url('') !important;
  2907. background-size: cover;
  2908. }
  2909.  
  2910. .node--id93 > .node-body {
  2911. background-image: url('') !important;
  2912. background-size: cover;
  2913. }
  2914.  
  2915. .node--id23 > .node-body {
  2916. background-image: url('https://www.skial.com/custom/nodes/adminapps7.jpg') !important;
  2917. background-size: cover;
  2918. }
  2919.  
  2920. .node--id68 > .node-body {
  2921. background-image: url('') !important;
  2922. background-size: cover;
  2923. }
  2924.  
  2925. .block--category19 .block-container .block-body {
  2926. grid-template-columns: repeat(
  2927. auto-fit,
  2928. minmax(350px, 1fr)
  2929. );
  2930. }
  2931.  
  2932. .node--id25 > .node-body {
  2933. background-image: url('https://www.skial.com/custom/nodes/nsfw.jpg') !important;
  2934. background-size: cover;
  2935. }
  2936.  
  2937. .node--id43 > .node-body {
  2938. background-image: url('') !important;
  2939. background-size: cover;
  2940. }
  2941.  
  2942. .block--category81 .block-container .block-body {
  2943. grid-template-columns: repeat(
  2944. auto-fit,
  2945. minmax(350px, 1fr)
  2946. );
  2947. }
  2948.  
  2949. .node--id98 > .node-body {
  2950. background-image: url('https://www.skial.com/custom/nodes/rust5.jpg') !important;
  2951. background-size: cover;
  2952. }
  2953.  
  2954. .node--id12 > .node-body {
  2955. background-image: url('https://www.skial.com/custom/nodes/donations4.jpg') !important;
  2956. background-size: cover;
  2957. }
  2958.  
  2959. /********* public:uix.less ********/
  2960. @-webkit-keyframes rippleAnimation {
  2961. to {
  2962. border-radius: 100%;
  2963. opacity: 0%;
  2964. -webkit-transform: scale(2.5);
  2965. transform: scale(2.5);
  2966. }
  2967. }
  2968.  
  2969. @keyframes rippleAnimation {
  2970. to {
  2971. border-radius: 100%;
  2972. opacity: 0%;
  2973. -webkit-transform: scale(2.5);
  2974. transform: scale(2.5);
  2975. }
  2976. }
  2977.  
  2978. .rippleButton {
  2979. position: relative;
  2980. }
  2981.  
  2982. .rippleButton .ripple-container {
  2983. position: absolute;
  2984. top: 0;
  2985. left: 0;
  2986. pointer-events: none;
  2987. width: 100%;
  2988. height: 100%;
  2989. max-height: 100%;
  2990. max-width: 100%;
  2991. overflow: hidden;
  2992. border-radius: inherit;
  2993. -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
  2994. mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
  2995. }
  2996.  
  2997. .rippleButton .ripple {
  2998. background-color: #ffffff33;
  2999. border-radius: 100%;
  3000. -webkit-transform: scale(0);
  3001. transform: scale(0);
  3002. -webkit-transform-origin: center 50%;
  3003. transform-origin: center 50%;
  3004. display: block;
  3005. position: absolute;
  3006. -webkit-animation: rippleanimation 650ms ease-out;
  3007. animation: rippleAnimation 650ms ease-out;
  3008. -webkit-animation-play-state: running;
  3009. animation-play-state: running;
  3010. }
  3011.  
  3012. .navLink .ripple {
  3013. background-color: #00000026;
  3014. -webkit-animation: rippleanimation 450ms ease-out;
  3015. /* stylelint-disable-next-line no-unknown-animations -- unneeded*/
  3016. animation: rippleanimation 450ms ease-out;
  3017. }
  3018.  
  3019. .rippleButton:hover {
  3020. cursor: pointer;
  3021. }
  3022.  
  3023. .uix_canvas__tabs {
  3024. display: flex;
  3025. justify-content: space-around;
  3026. align-items: center;
  3027. }
  3028.  
  3029. .uix_canvasTab {
  3030. display: inline-block;
  3031. }
  3032.  
  3033. .js-visitorTabPanel .menu-row--highlighted,
  3034. .js-visitorTabPanel .menu-separator--hard {
  3035. display: none;
  3036. }
  3037.  
  3038. .sidePanel__tabPanels {
  3039. position: relative;
  3040. }
  3041.  
  3042. .sidePanel__tabPanels .menu-row,
  3043. .sidePanel__tabPanels .menu-footer,
  3044. .sidePanel__tabPanels .menu-linkRow {
  3045. padding-left: 15px;
  3046. padding-right: 15px;
  3047. }
  3048.  
  3049. .sidePanel__tabPanel {
  3050. height: 0;
  3051. overflow-x: hidden;
  3052. touch-action: pan-y;
  3053. -moz-transition: -moz-transform 0.3s
  3054. cubic-bezier(0.22, 0.61, 0.36, 1);
  3055. -o-transition: transform 0.3s
  3056. cubic-bezier(0.22, 0.61, 0.36, 1);
  3057. -o-transition: -o-transform 0.3s
  3058. cubic-bezier(0.22, 0.61, 0.36, 1);
  3059. -webkit-transition: -webkit-transform 0.3s
  3060. cubic-bezier(0.22, 0.61, 0.36, 1);
  3061. transition: -webkit-transform 0.3s
  3062. cubic-bezier(0.22, 0.61, 0.36, 1);
  3063. transition: transform 0.3s
  3064. cubic-bezier(0.22, 0.61, 0.36, 1);
  3065. width: 100%;
  3066. top: 0;
  3067. }
  3068.  
  3069. .sidePanel__tabPanel.is-left {
  3070. transform: translate3d(-300px, 0, 0);
  3071. overflow-y: hidden;
  3072. }
  3073.  
  3074. .sidePanel__tabPanel.is-right {
  3075. transform: translate3d(300px, 0, 0);
  3076. }
  3077.  
  3078. .sidePanel__tabPanel.is-active {
  3079. transform: translate3d(0, 0, 0);
  3080. display: block;
  3081. height: auto;
  3082. overflow-y: auto;
  3083. }
  3084.  
  3085. .sidePanel--visitor .sidePanel__tabPanel.is-active {
  3086. margin-bottom: 50px;
  3087. }
  3088.  
  3089. .sidePanel__tabPanel.is-hidden {
  3090. visibility: hidden;
  3091. }
  3092.  
  3093. .sidePanel__tabs {
  3094. display: flexbox;
  3095. display: flex;
  3096. display: flex;
  3097. flex: 0 0 auto;
  3098. padding: 0;
  3099. margin: 0;
  3100. -webkit-justify-content: space-between;
  3101. -ms-flex-pack: justify;
  3102. justify-content: space-between;
  3103. }
  3104.  
  3105. .sidePanel__tabs li {
  3106. max-width: 50%;
  3107. -webkit-flex: 1 1 auto;
  3108. -ms-flex: 1 1 auto;
  3109. flex: 1 1 auto;
  3110. color: var(--color45);
  3111. list-style: none;
  3112. }
  3113.  
  3114. a.sidePanel__tab {
  3115. font-size: 18px;
  3116. color: #ffffffbf;
  3117. background-color: var(--color28);
  3118. padding-right: 10px;
  3119. padding-left: 10px;
  3120. border-width: 0;
  3121. border-right-style: solid;
  3122. border-right-color: #ffffff1a;
  3123. display: block;
  3124. cursor: pointer;
  3125. text-align: center;
  3126. line-height: 50px;
  3127. white-space: nowrap;
  3128. text-overflow: ellipsis;
  3129. overflow: hidden;
  3130. height: 50px;
  3131. }
  3132.  
  3133. a.sidePanel__tab:hover {
  3134. color: var(--color2);
  3135. text-decoration: none;
  3136. }
  3137.  
  3138. a.sidePanel__tab.sidePanel__tab--active {
  3139. color: var(--color2);
  3140. box-shadow: inset 0 -3px #00000033;
  3141. }
  3142.  
  3143. .itemList-itemOverlayTop.iconic--noLabel {
  3144. width: 23px;
  3145. height: 23px;
  3146. top: 10px;
  3147. left: 10px;
  3148. }
  3149.  
  3150. .audfeeds_newsFeedItem .audfeeds_attachLink {
  3151. margin-top: 0;
  3152. margin-bottom: 10px;
  3153. }
  3154.  
  3155. .uix_fabBar .button--cta.audfeeds_createButton--dropdown {
  3156. display: none;
  3157. }
  3158.  
  3159. .uix_fabBar
  3160. .p-title-pageAction
  3161. .button.button--icon--add[data-target] {
  3162. display: inline-flex;
  3163. }
  3164.  
  3165. .uix_fabBar
  3166. .p-title-pageAction
  3167. .js-unlimitedScrollStopTrigger {
  3168. display: none !important;
  3169. }
  3170.  
  3171. .message.thfeature .message-body {
  3172. padding: 0;
  3173. }
  3174.  
  3175. .message.thfeature .message-attribution {
  3176. margin-bottom: 0;
  3177. }
  3178.  
  3179. .message.thfeature .message-footer {
  3180. padding-top: 10px;
  3181. }
  3182.  
  3183. .node + .node {
  3184. border: none;
  3185. }
  3186.  
  3187. .thNodes__nodeList.block
  3188. .block-container
  3189. .th_nodes--below-lg
  3190. .node-extra {
  3191. padding-top: 0;
  3192. }
  3193.  
  3194. .thNodes__nodeList.block .block-container .node-body {
  3195. border: none;
  3196. box-shadow:
  3197. 0 0 3px 0 #0000004d,
  3198. 0 2px 3px 0 #00000042,
  3199. 0 1px 4px 0 #00000066;
  3200. }
  3201.  
  3202. .th_node--hasBackground.thNodes__nodeList.block
  3203. .block-container
  3204. .node-body:hover {
  3205. background: var(--color30);
  3206. position: relative;
  3207. }
  3208.  
  3209. .porta-article-item .block-body.message-inner {
  3210. display: flex;
  3211. }
  3212.  
  3213. .porta-articles-above-full {
  3214. margin-bottom: 20px;
  3215. }
  3216.  
  3217. .resourceBody .actionBar {
  3218. padding: 0;
  3219. margin: 0;
  3220. }
  3221.  
  3222. .resourceBody-main .bbWrapper {
  3223. margin-bottom: 10px;
  3224. }
  3225.  
  3226. .xfmgInfoBlock .actionBar .actionBar-set {
  3227. margin-top: 0;
  3228. }
  3229.  
  3230. .block--messages
  3231. .message
  3232. .thpostcomments_commentsContainer
  3233. .message
  3234. .message-actionBar {
  3235. padding-top: 0;
  3236. border-top: 0;
  3237. }
  3238.  
  3239. .block--messages
  3240. .message
  3241. .thpostcomments_commentsContainer
  3242. .message
  3243. .message-attribution {
  3244. padding-top: 0;
  3245. padding-bottom: 4px;
  3246. }
  3247.  
  3248. @media (width <=650px) {
  3249. .memberHeader-actionTop .profile-achievement-showcase {
  3250. margin: 0;
  3251. }
  3252. }
  3253.  
  3254. .device--isAndroid .p-staffBar .hScroller-scroll {
  3255. overflow-x: auto;
  3256. }
  3257.  
  3258. .offCanvasMenu-content {
  3259. overflow-y: scroll;
  3260. }
  3261.  
  3262. @media (height <=400px) {
  3263. .uix_tabBar {
  3264. display: none;
  3265. }
  3266. }
  3267.  
  3268. .shareButtons-button--tumblr {
  3269. display: none;
  3270. }
  3271.  
  3272. .fb-page {
  3273. width: 100%;
  3274. }
  3275.  
  3276. .tabPanes .block-outer {
  3277. padding-top: 20px;
  3278. }
  3279.  
  3280. .uix_node--transitioning {
  3281. clip-path: inset(-2px -2px -2px -2px);
  3282. }
  3283.  
  3284. @media (-ms-high-contrast: none),
  3285. (-ms-high-contrast: active) {
  3286. .uix_node--transitioning {
  3287. overflow: hidden;
  3288. }
  3289. }
  3290.  
  3291. .message
  3292. .message-responses
  3293. .message-responseRow:first-child,
  3294. .message
  3295. .message-responses
  3296. .message-responseRow.is-active {
  3297. margin-top: 10px;
  3298. }
  3299.  
  3300. .message
  3301. .message-responses
  3302. .comment
  3303. .comment-actionBar.actionBar {
  3304. border: none;
  3305. margin: 0;
  3306. }
  3307.  
  3308. .p-nav-menuTrigger {
  3309. position: relative;
  3310. }
  3311.  
  3312. .p-nav-menuTrigger.badgeContainer::after {
  3313. position: absolute;
  3314. left: -5px;
  3315. top: -5px;
  3316. }
  3317.  
  3318. @media (width >=480px) {
  3319. .p-nav-menuTrigger.badgeContainer::after {
  3320. display: none !important;
  3321. }
  3322. }
  3323.  
  3324. .menu-footer-controls {
  3325. display: flex;
  3326. flex-wrap: wrap;
  3327. }
  3328.  
  3329. .menu-footer-controls .button:not(:last-child) {
  3330. margin-right: 5px;
  3331. }
  3332.  
  3333. .p-navEl .menu-linkRow::before {
  3334. margin-right: 4px;
  3335. }
  3336.  
  3337. @media (width >=900px) {
  3338. .uix_sidebarCanvasTrigger {
  3339. display: none;
  3340. }
  3341. }
  3342.  
  3343. @media (width <=900px) {
  3344. body .p-body-sidebar {
  3345. position: fixed;
  3346. inset: 0;
  3347. transform: translateX(-100%);
  3348. margin: 0;
  3349. overflow: hidden !important;
  3350. }
  3351.  
  3352. body .p-body-sidebar.is-transitioning {
  3353. transition: ease-in 0.25s 0.25s transform;
  3354. }
  3355.  
  3356. body
  3357. .p-body-sidebar.is-transitioning
  3358. .uix_sidebarInner {
  3359. transition: transform 0.25s ease-in;
  3360. }
  3361.  
  3362. body .p-body-sidebar.is-transitioning.is-active {
  3363. transition: ease-in 0.01s transform;
  3364. }
  3365.  
  3366. body .p-body-sidebar .uix_sidebarInner {
  3367. margin: 0;
  3368. transform: translateX(200%);
  3369. margin-left: auto;
  3370. }
  3371.  
  3372. body .p-body-sidebar .block-container {
  3373. box-shadow: none;
  3374. }
  3375.  
  3376. body .p-body-sidebar .uix_sidebar--scroller {
  3377. margin: 0;
  3378. width: 100%;
  3379. }
  3380.  
  3381. body .p-body-sidebar.is-active {
  3382. transform: translateX(0);
  3383. }
  3384.  
  3385. body
  3386. .p-body-sidebar.is-active
  3387. .uix_sidebarInner.offCanvasMenu-content {
  3388. transform: translateX(0);
  3389. }
  3390. }
  3391.  
  3392. .structItem-cell--icon + .structItem-cell--main,
  3393. .structItem-cell--icon + .structItem-cell--newThread {
  3394. padding-left: 0;
  3395. }
  3396.  
  3397. .structItem-cell--main .structItem-minor {
  3398. display: flex;
  3399. align-items: center;
  3400. }
  3401.  
  3402. .structItem-cell--main
  3403. .structItem-minor
  3404. .structItem-parts {
  3405. flex-grow: 1;
  3406. }
  3407.  
  3408. .structItem-cell--main
  3409. .structItem-minor
  3410. .structItem-extraInfo {
  3411. order: 2;
  3412. margin-left: auto;
  3413. }
  3414.  
  3415. .structItem-cell--main
  3416. .structItem-minor
  3417. .structItem-statuses {
  3418. order: 1;
  3419. }
  3420.  
  3421. .block.uix_mainTabBar {
  3422. display: flex;
  3423. justify-content: center;
  3424. background: var(--color28);
  3425. }
  3426.  
  3427. .block.uix_mainTabBar .block-tabHeader {
  3428. border: none;
  3429. }
  3430.  
  3431. .block.uix_mainTabBar .tabs-tab:hover {
  3432. background: none;
  3433. }
  3434.  
  3435. .p-pageWrapper > .block.uix_mainTabBar {
  3436. margin: 0;
  3437. }
  3438.  
  3439. .offCanvasMenu-content {
  3440. height: 100vh;
  3441. }
  3442.  
  3443. .offCanvasMenu-content .menu-scroller {
  3444. max-height: 100%;
  3445. }
  3446.  
  3447. .offCanvasMenu-content .p-body-sideNavContent .block {
  3448. margin: 0;
  3449. }
  3450.  
  3451. .offCanvasMenu-content
  3452. .p-body-sideNavContent
  3453. .block-container {
  3454. box-shadow: none;
  3455. }
  3456.  
  3457. .p-body-header .uix_sidebarTrigger__component {
  3458. margin-left: 10px;
  3459. }
  3460.  
  3461. .cover .memberHeader-blurb.pairs {
  3462. border-color: #ffffff4d;
  3463. }
  3464.  
  3465. .hScroller-scroll.th_scroller--start-active {
  3466. -webkit-mask-image: linear-gradient(
  3467. to right,
  3468. transparent 5%,
  3469. var(--color6) 10%
  3470. );
  3471. mask-image: linear-gradient(
  3472. to right,
  3473. transparent 5%,
  3474. var(--color6) 10%
  3475. );
  3476. }
  3477.  
  3478. .hScroller-scroll.th_scroller--end-active {
  3479. -webkit-mask-image: linear-gradient(
  3480. to left,
  3481. transparent 5%,
  3482. var(--color6) 10%
  3483. );
  3484. mask-image: linear-gradient(
  3485. to left,
  3486. transparent 5%,
  3487. var(--color6) 10%
  3488. );
  3489. }
  3490.  
  3491. .hScroller-scroll.th_scroller--end-active.th_scroller--start-active {
  3492. -webkit-mask-image: linear-gradient(
  3493. to right,
  3494. #00000000 5%,
  3495. var(--color6) 10%,
  3496. var(--color6) 90%,
  3497. #00000000 95%
  3498. );
  3499. mask-image: linear-gradient(
  3500. to right,
  3501. #00000000 5%,
  3502. var(--color6) 10%,
  3503. var(--color6) 90%,
  3504. #00000000 95%
  3505. );
  3506. }
  3507.  
  3508. .block[data-widget-definition='visitor_panel']
  3509. .contentRow {
  3510. margin-bottom: 10px;
  3511. }
  3512.  
  3513. .block[data-widget-definition='th_widget_login_uix']
  3514. .formSubmitRow-controls {
  3515. padding-left: 0;
  3516. text-align: center;
  3517. }
  3518.  
  3519. .uix_loginProvider__row dt {
  3520. display: none;
  3521. }
  3522.  
  3523. .uix_loginProvider__row dd {
  3524. text-align: center;
  3525. }
  3526.  
  3527. .thBranding__pipe {
  3528. display: none;
  3529. }
  3530.  
  3531. .p-footer-copyright > * ~ .thBranding .thBranding__pipe {
  3532. display: inline;
  3533. }
  3534.  
  3535. .offCanvasMenu-link {
  3536. padding: 10px 15px;
  3537. }
  3538.  
  3539. .offCanvasMenu-subList {
  3540. padding-bottom: 0;
  3541. }
  3542.  
  3543. *::selection {
  3544. color: var(--color2);
  3545. background: var(--color33);
  3546. }
  3547.  
  3548. *::selection {
  3549. color: var(--color2);
  3550. background: var(--color33);
  3551. }
  3552.  
  3553. .block-container .uix_newIndicator {
  3554. font-size: 16px;
  3555. color: var(--color2);
  3556. border-radius: 4px;
  3557. padding: 0 4px 1px;
  3558. }
  3559.  
  3560. .uix_headerContainer--stickyFix {
  3561. height: 1px;
  3562. visibility: hidden;
  3563. }
  3564.  
  3565. .uix_headerContainer {
  3566. margin-top: -1px !important;
  3567. }
  3568.  
  3569. .has-no-hiddenscroll .is-modalOpen .is-sticky {
  3570. margin-left: 0;
  3571. }
  3572.  
  3573. .uix_adminTrigger {
  3574. display: none !important;
  3575. }
  3576.  
  3577. @media (width <=900px) {
  3578. .p-staffBar-link {
  3579. display: none !important;
  3580. }
  3581.  
  3582. .uix_adminTrigger {
  3583. display: inline-block !important;
  3584. }
  3585. }
  3586.  
  3587. .uix_signatureExpand {
  3588. display: none;
  3589. }
  3590.  
  3591. .message-signature {
  3592. overflow: hidden;
  3593. transition: ease-in-out 0.2s height;
  3594. }
  3595.  
  3596. .message-signature--expandable {
  3597. height: 60px;
  3598. }
  3599.  
  3600. .message-signature--expandable .uix_signatureExpand {
  3601. padding-bottom: 15px;
  3602. background: linear-gradient(
  3603. to bottom,
  3604. #2d2d2d00,
  3605. var(--color30) 40%
  3606. );
  3607. text-align: center;
  3608. display: flex;
  3609. justify-content: center;
  3610. align-items: flex-end;
  3611. height: 60px;
  3612. position: absolute;
  3613. bottom: 0;
  3614. left: 0;
  3615. right: 0;
  3616. color: var(--color26);
  3617. }
  3618.  
  3619. .message-signature--expandable
  3620. .uix_signatureExpand:hover {
  3621. cursor: pointer;
  3622. }
  3623.  
  3624. .message-signature.message-signature--expanded {
  3625. height: auto;
  3626. padding-bottom: 15px;
  3627. }
  3628.  
  3629. .message-signature.message-signature--expanded
  3630. .bbWrapper {
  3631. padding-bottom: 30px;
  3632. }
  3633.  
  3634. .message-signature.message-signature--expanded
  3635. .uix_signatureExpand {
  3636. background: none;
  3637. }
  3638.  
  3639. .thThreads__message-userExtras {
  3640. height: 0;
  3641. overflow: hidden;
  3642. transition: ease-in height 0.2s;
  3643. }
  3644.  
  3645. @media (width <=650px) {
  3646. .thThreads__message-userExtras {
  3647. display: none;
  3648. }
  3649.  
  3650. .thThreads__userExtra--toggle {
  3651. display: none;
  3652. }
  3653. }
  3654.  
  3655. .userExtra--expand .thThreads__message-userExtras {
  3656. height: auto;
  3657. }
  3658.  
  3659. .userExtra--expand .thThreads__userExtra--trigger {
  3660. transform: rotate(-180deg);
  3661. }
  3662.  
  3663. .uix_threadCollapseTrigger {
  3664. transition: ease transform 0.2s;
  3665. margin-left: auto;
  3666. font-size: 18px;
  3667. }
  3668.  
  3669. .uix_threadCollapseTrigger.is-active {
  3670. transform: rotate(-180deg);
  3671. }
  3672.  
  3673. .uix_stickyContainerOuter {
  3674. display: none;
  3675. opacity: 0%;
  3676. -webkit-transition:
  3677. all 0.2s ease,
  3678. -xf-opacity 0.2s ease;
  3679. transition:
  3680. all 0.2s ease,
  3681. -xf-opacity 0.2s ease;
  3682. overflow-y: hidden;
  3683. height: 0;
  3684. -webkit-transition-property:
  3685. all,
  3686. -xf-height;
  3687. transition-property:
  3688. all,
  3689. -xf-height;
  3690. }
  3691.  
  3692. .uix_stickyContainerOuter.is-active {
  3693. display: block;
  3694. opacity: 100%;
  3695. height: auto;
  3696. overflow-y: visible;
  3697. }
  3698.  
  3699. .uix_stickyContainerOuter.is-transitioning {
  3700. display: block;
  3701. width: 100%;
  3702. }
  3703.  
  3704. .uix_stickyContainerOuter.is-transitioning {
  3705. overflow-y: hidden;
  3706. }
  3707.  
  3708. .uix_stickyContainerOuter .uix_stickyContainerInner {
  3709. width: 100%;
  3710. display: table;
  3711. }
  3712.  
  3713. .uix_stickyContainerOuter.uix_threadListSeparator--collapsed {
  3714. height: 0;
  3715. opacity: 0%;
  3716. pointer-events: none;
  3717. transition:
  3718. ease-in height 0.3s,
  3719. ease-in opacity 0.3s;
  3720. }
  3721.  
  3722. .uix_stickyContainerOuter.uix_threadListSeparator--collapsed
  3723. .uix_block-body--outer {
  3724. height: 0 !important;
  3725. opacity: 0%;
  3726. pointer-events: none;
  3727. }
  3728.  
  3729. @keyframes overflow-delay {
  3730. from {
  3731. overflow: visible;
  3732. }
  3733. }
  3734.  
  3735. @keyframes overflow-show {
  3736. from {
  3737. overflow: hidden;
  3738. }
  3739. }
  3740.  
  3741. .category--collapsed.block--category
  3742. .uix_block-body--outer {
  3743. height: 0 !important;
  3744. opacity: 0%;
  3745. pointer-events: none;
  3746. animation: 0.3s overflow-delay;
  3747. overflow: hidden;
  3748. }
  3749.  
  3750. .category--collapsed.block--category
  3751. .categoryCollapse--trigger {
  3752. transform: rotate(-180deg);
  3753. }
  3754.  
  3755. .category--collapsed.block--category:hover {
  3756. text-decoration: none;
  3757. }
  3758.  
  3759. .categoryCollapse--trigger {
  3760. transition: cubic-bezier(0.4, 0, 0.2, 1) transform 0.2s;
  3761. overflow: hidden;
  3762. height: 18px;
  3763. min-width: 24px;
  3764. width: 24px;
  3765. display: inline-flex;
  3766. align-items: center;
  3767. justify-content: center;
  3768. text-decoration: none !important;
  3769. }
  3770.  
  3771. .block--category .uix_block-body--outer {
  3772. transition:
  3773. cubic-bezier(0.4, 0, 0.2, 1) height 0.3s,
  3774. cubic-bezier(0.4, 0, 0.2, 1) opacity 0.3s;
  3775. opacity: 100%;
  3776. animation: 0.3s overflow-show;
  3777. overflow: visible;
  3778. }
  3779.  
  3780. a.uix_sidebarTrigger__component {
  3781. display: inline-flex;
  3782. align-items: center;
  3783. }
  3784.  
  3785. a.uix_sidebarTrigger__component:hover {
  3786. cursor: pointer;
  3787. }
  3788.  
  3789. .p-nav-inner a.uix_sidebarTrigger__component {
  3790. color: inherit;
  3791. color: #ffffffe6;
  3792. background: none !important;
  3793. box-shadow: none;
  3794. border: none;
  3795. }
  3796.  
  3797. .p-nav-inner
  3798. a.uix_sidebarTrigger__component
  3799. .uix_sidebarTrigger--phrase {
  3800. display: none;
  3801. }
  3802.  
  3803. .p-nav-inner a.uix_sidebarTrigger__component i {
  3804. font-size: 24px;
  3805. width: auto;
  3806. padding: 0;
  3807. margin: 0;
  3808. }
  3809.  
  3810. .p-nav-inner a.uix_sidebarTrigger__component i::before {
  3811. display: inline-flex;
  3812. justify-content: center;
  3813. width: 10px;
  3814. }
  3815.  
  3816. @media (width >=901px) {
  3817. a.uix_sidebarTrigger__component.uix_sidebarCanvasTrigger {
  3818. display: none;
  3819. }
  3820. }
  3821.  
  3822. @media (width <=900px) {
  3823. a.uix_sidebarTrigger__component.uix_sidebarTrigger {
  3824. display: none;
  3825. }
  3826. }
  3827.  
  3828. a.uix_sidebarTrigger__component i {
  3829. font-size: 18px;
  3830. margin-left: -7px;
  3831. }
  3832.  
  3833. .p-body-sidebar {
  3834. transition:
  3835. ease-in opacity 0.2s 0.2s,
  3836. ease-in max-height 0.2s 0.2s;
  3837. opacity: 100%;
  3838. max-height: 100%;
  3839. }
  3840.  
  3841. .p-body-sidebar .uix_sidebarInner {
  3842. transition: 0.01s 0.2s transform;
  3843. }
  3844.  
  3845. @media (width >=900px) {
  3846. .uix_sidebarCollapsed .p-body-sidebar {
  3847. transition:
  3848. ease-in opacity 0.2s,
  3849. ease-in max-height 0.2s 0.01s;
  3850. opacity: 0%;
  3851. max-height: 0;
  3852. }
  3853.  
  3854. .uix_sidebarCollapsed .uix_sidebarInner {
  3855. transition: 0 0.01s 0 0.01s transform;
  3856. transform: scaleY(0);
  3857. }
  3858.  
  3859. .uix_sidebarCollapsed
  3860. .p-body-main--withSidebar
  3861. .p-body-content {
  3862. width: 100%;
  3863. max-width: 100%;
  3864. }
  3865.  
  3866. .uix_sidebarCollapsed
  3867. .p-body-main--withSidebar.p-body-main--withSideNav
  3868. .p-body-content {
  3869. width: calc(100% - 270px);
  3870. max-width: calc(100% - 270px);
  3871. }
  3872. }
  3873.  
  3874. body .p-navEl-link,
  3875. body .offCanvasMenu-link {
  3876. font-family: inherit;
  3877. font-weight: inherit;
  3878. -webkit-font-smoothing: initial;
  3879. }
  3880.  
  3881. .p-nav .p-nav-menuTrigger.uix_sidebarNav--trigger {
  3882. display: none;
  3883. }
  3884.  
  3885. .uix_sidebarNav__inner__widgets {
  3886. padding: 15px;
  3887. }
  3888.  
  3889. .sidebarNav--active .uix_sidebarNav {
  3890. margin-left: 0;
  3891. }
  3892.  
  3893. .uix_stickyBodyElement:not(.offCanvasMenu) {
  3894. position: sticky;
  3895. }
  3896.  
  3897. .uix_stickyBottom .p-body-sidebar {
  3898. display: flex;
  3899. }
  3900.  
  3901. .uix_sidebarNav .uix_sidebarNav__inner {
  3902. overflow: hidden;
  3903. }
  3904.  
  3905. .uix_sidebarNav .uix_sidebar--scroller {
  3906. overflow-y: auto;
  3907. margin-right: -30px;
  3908. padding-right: 32px;
  3909. }
  3910.  
  3911. .offCanvasMenu .offCanvasMenu-link::before {
  3912. font-size: 24px !important;
  3913. padding-right: 1em;
  3914. }
  3915.  
  3916. .offCanvasMenu-link {
  3917. display: flex;
  3918. align-items: center;
  3919. }
  3920.  
  3921. .offCanvasMenu-link.offCanvasMenu-link--splitToggle {
  3922. font-size: 18px;
  3923. }
  3924.  
  3925. @media (width <=900px) {
  3926. .offCanvasMenu .uix_sidebar--scroller {
  3927. position: static !important;
  3928. }
  3929.  
  3930. .offCanvasMenu
  3931. .uix_sidebar--scroller
  3932. + div[style*='position'] {
  3933. display: none !important;
  3934. }
  3935. }
  3936.  
  3937. .uix_sidebarNav {
  3938. background: var(--color31);
  3939. width: 210px;
  3940. min-width: 210px;
  3941. padding-bottom: 20px;
  3942. margin-left: -210px;
  3943. z-index: 1;
  3944. transition: ease-in-out margin-left 0.3s;
  3945. }
  3946.  
  3947. @media (width <=900px) {
  3948. .uix_sidebarNav {
  3949. margin-left: -210px !important;
  3950. }
  3951. }
  3952.  
  3953. .uix_sidebarNav .uix_sidebarNavList {
  3954. padding: 10px 0;
  3955. margin: 0;
  3956. border-bottom: 1px solid var(--color32);
  3957. line-height: 40px;
  3958. width: 208px;
  3959. }
  3960.  
  3961. .uix_sidebarNav .uix_sidebarNavList:first-child {
  3962. padding-top: 0;
  3963. }
  3964.  
  3965. .uix_sidebarNav .uix_sidebarNavList:last-child {
  3966. border-bottom: none;
  3967. }
  3968.  
  3969. .uix_sidebarNav
  3970. .uix_sidebarNavList
  3971. .uix_sidebarNav__subNav {
  3972. display: block;
  3973. height: 0;
  3974. overflow: hidden;
  3975. transition: ease-in height 0.3s;
  3976. }
  3977.  
  3978. .uix_sidebarNav
  3979. .uix_sidebarNavList
  3980. .uix_sidebarNav__subNav.subNav--expand {
  3981. height: auto;
  3982. }
  3983.  
  3984. .uix_sidebarNav .uix_sidebarNavList .menu-linkRow {
  3985. padding: 0 15px;
  3986. white-space: nowrap;
  3987. text-overflow: ellipsis;
  3988. overflow: hidden;
  3989. color: var(--color29);
  3990. border: none;
  3991. font-weight: 400;
  3992. border-top-right-radius: 6px;
  3993. border-bottom-right-radius: 6px;
  3994. }
  3995.  
  3996. .uix_sidebarNav .uix_sidebarNavList .menu-linkRow:hover {
  3997. border: none;
  3998. background: var(--color34);
  3999. }
  4000.  
  4001. .uix_sidebarNav .uix_sidebarNavList .p-navEl-link span {
  4002. overflow: hidden;
  4003. white-space: nowrap;
  4004. text-overflow: ellipsis;
  4005. min-width: 0;
  4006. }
  4007.  
  4008. .uix_sidebarNav
  4009. .uix_sidebarNavList
  4010. .uix_sidebarNavList__title {
  4011. padding: 0 15px;
  4012. font-size: 1.2rem;
  4013. color: var(--color1);
  4014. }
  4015.  
  4016. .uix_sidebarNav .uix_sidebarNavList > li {
  4017. display: block;
  4018. }
  4019.  
  4020. .uix_sidebarNav .uix_sidebarNavList > li .p-navEl::before,
  4021. .uix_sidebarNav .uix_sidebarNavList > li .p-navEl::after {
  4022. display: none;
  4023. }
  4024.  
  4025. .uix_sidebarNav .uix_sidebarNavList > li .p-navEl__inner {
  4026. display: flex;
  4027. align-items: center;
  4028. font-weight: 500;
  4029. border-top-right-radius: 6px;
  4030. border-bottom-right-radius: 6px;
  4031. }
  4032.  
  4033. .uix_sidebarNav
  4034. .uix_sidebarNavList
  4035. > li
  4036. .p-navEl__inner:hover,
  4037. .uix_sidebarNav
  4038. .uix_sidebarNavList
  4039. > li
  4040. .blockLink:hover {
  4041. background: var(--color34);
  4042. }
  4043.  
  4044. .uix_sidebarNav
  4045. .uix_sidebarNavList
  4046. > li
  4047. .is-selected
  4048. .p-navEl__inner {
  4049. color: var(--color28);
  4050. background: #00000014;
  4051. }
  4052.  
  4053. .uix_sidebarNav
  4054. .uix_sidebarNavList
  4055. > li
  4056. .is-selected
  4057. .p-navEl__inner
  4058. a,
  4059. .uix_sidebarNav
  4060. .uix_sidebarNavList
  4061. > li
  4062. .is-selected
  4063. .p-navEl__inner
  4064. .p-navEl-link {
  4065. color: inherit;
  4066. }
  4067.  
  4068. .uix_sidebarNav .uix_sidebarNavList > li .p-navEl {
  4069. display: block;
  4070. }
  4071.  
  4072. .uix_sidebarNav .uix_sidebarNavList > li .p-navEl-link,
  4073. .uix_sidebarNav
  4074. .uix_sidebarNavList
  4075. > li
  4076. .p-navEl-linkHolder,
  4077. .uix_sidebarNav .uix_sidebarNavList > li .blockLink {
  4078. display: flex;
  4079. min-width: 0;
  4080. align-items: center;
  4081. padding: 0 15px;
  4082. color: var(--color29);
  4083. background: none;
  4084. width: 100%;
  4085. text-decoration: none;
  4086. float: none;
  4087. }
  4088.  
  4089. .uix_sidebarNav
  4090. .uix_sidebarNavList
  4091. > li
  4092. .p-navEl-link::before,
  4093. .uix_sidebarNav
  4094. .uix_sidebarNavList
  4095. > li
  4096. .p-navEl-linkHolder::before,
  4097. .uix_sidebarNav
  4098. .uix_sidebarNavList
  4099. > li
  4100. .blockLink::before {
  4101. font-size: 24px !important;
  4102. width: 24px !important;
  4103. padding-right: 1em;
  4104. }
  4105.  
  4106. .uix_sidebarNav
  4107. .uix_sidebarNavList
  4108. > li
  4109. .p-navEl-linkHolder {
  4110. padding: 0;
  4111. }
  4112.  
  4113. .uix_sidebarNav .uix_sidebarNavList > li .blockLink {
  4114. padding-left: 50px;
  4115. }
  4116.  
  4117. .uix_sidebarNav
  4118. .uix_sidebarNavList
  4119. > li
  4120. .uix_sidebarNav--trigger {
  4121. font-size: 18px;
  4122. color: inherit;
  4123. padding-right: 15px;
  4124. }
  4125.  
  4126. .uix_sidebarNav
  4127. .uix_sidebarNavList
  4128. > li
  4129. .uix_sidebarNav--trigger
  4130. .fa--xf {
  4131. transition: ease-in transform 0.3s;
  4132. }
  4133.  
  4134. .uix_sidebarNav
  4135. .uix_sidebarNavList
  4136. > li
  4137. .uix_sidebarNav--trigger.is-expanded
  4138. .fa--xf {
  4139. transform: rotate(-180deg);
  4140. }
  4141.  
  4142. .uix_sidebarNav
  4143. .uix_sidebarNavList
  4144. > li
  4145. .p-navEl-splitTrigger,
  4146. .uix_sidebarNav
  4147. .uix_sidebarNavList
  4148. > li
  4149. .p-navEl-link--menuTrigger::after {
  4150. display: none;
  4151. }
  4152.  
  4153. .p-account {
  4154. background-color: transparent;
  4155. }
  4156.  
  4157. .p-account .p-navgroup-link {
  4158. display: flex;
  4159. align-items: center;
  4160. border: none;
  4161. }
  4162.  
  4163. .p-nav .p-navgroup-link:hover {
  4164. color: var(--color2);
  4165. text-decoration: none;
  4166. }
  4167.  
  4168. .p-quickSearch .input {
  4169. color: var(--color29);
  4170. }
  4171.  
  4172. .p-quickSearch .input::placeholder {
  4173. color: var(--color29);
  4174. }
  4175.  
  4176. body .uix_searchBar {
  4177. display: inline-flex;
  4178. flex-shrink: 10;
  4179. }
  4180.  
  4181. @media (width >=100000px) {
  4182. body .uix_searchBar {
  4183. position: relative;
  4184. }
  4185. }
  4186.  
  4187. body .uix_searchBar .uix_searchIcon {
  4188. pointer-events: none;
  4189. }
  4190.  
  4191. @media (width >=100001px) {
  4192. body .uix_searchBar {
  4193. max-width: 250px;
  4194. width: 1000px;
  4195. display: flex;
  4196. margin-left: 0.5em;
  4197. }
  4198. }
  4199.  
  4200. body .uix_searchBar .uix_searchBarInner {
  4201. display: inline-flex;
  4202. pointer-events: none;
  4203. align-items: center;
  4204. justify-content: flex-end;
  4205. inset: 0;
  4206. transition: ease-in background-color 0.3s;
  4207. flex-grow: 1;
  4208. }
  4209.  
  4210. body .uix_searchBar .uix_searchBarInner .uix_searchIcon {
  4211. position: absolute;
  4212. bottom: 0;
  4213. top: 0;
  4214. left: 0;
  4215. }
  4216.  
  4217. @media (width <=100000px) {
  4218. body .uix_searchBar .uix_searchBarInner {
  4219. position: absolute;
  4220. }
  4221. }
  4222.  
  4223. body .uix_searchBar .uix_searchBarInner .uix_searchForm {
  4224. display: inline-flex;
  4225. align-items: center;
  4226. transition:
  4227. ease-in flex-grow 0.3s,
  4228. ease-in max-width 0.3s,
  4229. ease-in background-color 0.2s;
  4230. flex-grow: 0;
  4231. max-width: 250px;
  4232. width: 100%;
  4233. pointer-events: all;
  4234. position: relative;
  4235. color: var(--color29);
  4236. background: var(--color27);
  4237. border: 1px solid var(--color32);
  4238. border-radius: 50px;
  4239. }
  4240.  
  4241. body
  4242. .uix_searchBar
  4243. .uix_searchBarInner
  4244. .uix_searchForm.uix_searchForm--focused {
  4245. color: var(--color2);
  4246. background: var(--color27);
  4247. }
  4248.  
  4249. body
  4250. .uix_searchBar
  4251. .uix_searchBarInner
  4252. .uix_searchForm.uix_searchForm--focused
  4253. .input::placeholder {
  4254. color: var(--color2);
  4255. }
  4256.  
  4257. body
  4258. .uix_searchBar
  4259. .uix_searchBarInner
  4260. .uix_searchForm.uix_searchForm--focused
  4261. i {
  4262. color: var(--color1);
  4263. }
  4264.  
  4265. body
  4266. .uix_searchBar
  4267. .uix_searchBarInner
  4268. .uix_searchForm
  4269. .uix_search--settings
  4270. i,
  4271. body
  4272. .uix_searchBar
  4273. .uix_searchBarInner
  4274. .uix_searchForm
  4275. .uix_search--close
  4276. i {
  4277. display: none;
  4278. }
  4279.  
  4280. body
  4281. .uix_searchBar
  4282. .uix_searchBarInner
  4283. .uix_searchForm
  4284. i {
  4285. font-size: 24px;
  4286. color: var(--color1);
  4287. padding: 4px;
  4288. padding-right: 8px;
  4289. padding-left: 8px;
  4290. float: left;
  4291. height: 36px;
  4292. display: inline-flex;
  4293. align-items: center;
  4294. transition: ease-in color 0.2s;
  4295. }
  4296.  
  4297. body
  4298. .uix_searchBar
  4299. .uix_searchBarInner
  4300. .uix_searchForm
  4301. .input {
  4302. height: 36px;
  4303. border: none;
  4304. transition: ease-in color 0.2s;
  4305. background: none;
  4306. color: inherit;
  4307. text-indent: 30px;
  4308. }
  4309.  
  4310. body
  4311. .uix_searchBar
  4312. .uix_searchBarInner
  4313. .uix_searchForm
  4314. .input::placeholder {
  4315. color: var(--color1);
  4316. }
  4317.  
  4318. body .uix_searchBar .p-navgroup-link {
  4319. display: none;
  4320. }
  4321.  
  4322. @media (width <=100000px) {
  4323. body
  4324. .uix_searchBar
  4325. .uix_searchBarInner
  4326. .uix_searchForm {
  4327. max-width: 0;
  4328. overflow: hidden;
  4329. border: none;
  4330. }
  4331. }
  4332.  
  4333. @media (width <=100000px) {
  4334. body .uix_searchBar .p-navgroup-link {
  4335. display: inline-flex;
  4336. }
  4337.  
  4338. .minimalSearch--detailed
  4339. body
  4340. .uix_searchBar
  4341. .p-navgroup-link {
  4342. display: inline-flex;
  4343. }
  4344. }
  4345.  
  4346. .uix_searchBar .uix_searchDropdown__menu {
  4347. display: none;
  4348. position: absolute;
  4349. top: 36px;
  4350. right: 0;
  4351. opacity: 0%;
  4352. width: 250px;
  4353. max-width: 250px;
  4354. }
  4355.  
  4356. @media (width <=100000px) {
  4357. .uix_searchBar .uix_searchDropdown__menu {
  4358. width: 100%;
  4359. max-width: 100%;
  4360. }
  4361. }
  4362.  
  4363. .uix_searchBar
  4364. .uix_searchDropdown__menu.uix_searchDropdown__menu--active {
  4365. display: block;
  4366. opacity: 100%;
  4367. pointer-events: all;
  4368. transform: translateY(0);
  4369. }
  4370.  
  4371. .uix_searchBar
  4372. .uix_searchDropdown__menu
  4373. [name='constraints'] {
  4374. flex-grow: 1 !important;
  4375. width: auto !important;
  4376. }
  4377.  
  4378. .uix_search--submit:hover {
  4379. cursor: pointer;
  4380. }
  4381.  
  4382. .uix_search--close {
  4383. cursor: pointer;
  4384. }
  4385.  
  4386. @media (width <=100000px) {
  4387. .minimalSearch--active
  4388. .uix_searchBar
  4389. .uix_searchBarInner {
  4390. position: absolute;
  4391. }
  4392.  
  4393. .minimalSearch--active
  4394. .uix_searchBar
  4395. .uix_searchBarInner
  4396. .uix_searchForm {
  4397. flex-grow: 1;
  4398. display: inline-flex !important;
  4399. padding: 0 10px;
  4400. max-width: 100%;
  4401. }
  4402.  
  4403. .minimalSearch--active
  4404. .uix_searchBar
  4405. .uix_searchBarInner
  4406. .uix_searchForm
  4407. i.fa--xf {
  4408. display: inline-block;
  4409. padding: 0;
  4410. line-height: 36px;
  4411. }
  4412.  
  4413. .minimalSearch--active
  4414. .uix_searchBar
  4415. .uix_searchBarInner
  4416. .uix_searchForm
  4417. .uix_searchIcon
  4418. i {
  4419. display: none;
  4420. }
  4421.  
  4422. .minimalSearch--active
  4423. .uix_searchBar
  4424. .uix_searchBarInner
  4425. .uix_searchForm
  4426. .uix_searchInput {
  4427. text-indent: 0;
  4428. }
  4429.  
  4430. .p-navgroup-link--search,
  4431. .uix_sidebarCanvasTrigger,
  4432. .p-navgroup-link {
  4433. transition: ease opacity 0.2s 0.3s;
  4434. opacity: 100%;
  4435. }
  4436.  
  4437. .minimalSearch--active .p-navgroup-link--search,
  4438. .minimalSearch--active .uix_sidebarCanvasTrigger,
  4439. .minimalSearch--active .p-navgroup-link {
  4440. opacity: 0%;
  4441. transition: ease opacity 0.2s;
  4442. pointer-events: none;
  4443. }
  4444. }
  4445.  
  4446. @media (width <=100000px) and (width <=100000px) {
  4447. .p-nav-inner > * {
  4448. transition: ease-in opacity 0.2s;
  4449. opacity: 100%;
  4450. }
  4451.  
  4452. .minimalSearch--active.p-nav-inner
  4453. > *:not(.uix_searchBar),
  4454. .minimalSearch--active.p-nav-inner .p-account,
  4455. .minimalSearch--active.p-nav-inner
  4456. .uix_searchBar
  4457. .uix_searchIconTrigger,
  4458. .minimalSearch--active.p-nav-inner
  4459. .p-discovery
  4460. > *:not(.uix_searchBar) {
  4461. opacity: 0%;
  4462. }
  4463.  
  4464. .minimalSearch--active.p-nav-inner .p-discovery,
  4465. .minimalSearch--active.p-nav-inner .p-nav-opposite {
  4466. opacity: 100%;
  4467. }
  4468. }
  4469.  
  4470. @media (width <=100000px) and (width >=10000px) {
  4471. .p-header-content > * {
  4472. transition: ease opacity 0.2s;
  4473. opacity: 100%;
  4474. }
  4475.  
  4476. .minimalSearch--active.p-header-content
  4477. > *:not(.p-nav-opposite) {
  4478. opacity: 0%;
  4479. }
  4480.  
  4481. .minimalSearch--active.p-header-content .uix_searchBar {
  4482. opacity: 100%;
  4483. }
  4484. }
  4485.  
  4486. .media__container {
  4487. display: flex;
  4488. }
  4489.  
  4490. .media__container .media--left {
  4491. margin-right: 10px;
  4492. }
  4493.  
  4494. .uix_fabBar {
  4495. display: flex;
  4496. flex-direction: column;
  4497. align-items: flex-end;
  4498. position: fixed;
  4499. bottom: 0;
  4500. left: 0;
  4501. right: 0;
  4502. padding: 15px;
  4503. z-index: 150;
  4504. pointer-events: none;
  4505. }
  4506.  
  4507. @media (width <=480px) {
  4508. .uix_hasBottomTabs
  4509. .uix_fabBar
  4510. .u-scrollButtons:last-child {
  4511. margin-bottom: 45px;
  4512. }
  4513. }
  4514.  
  4515. .uix_editor--focused .uix_fabBar {
  4516. display: none;
  4517. }
  4518.  
  4519. /* .uix_fabBar.8--mirror {
  4520. visibility: hidden;
  4521. position: static;
  4522. padding-top: calc(30px);
  4523. background-color: #0e0e12
  4524. }
  4525.  
  4526. .uix_fabBar.8--mirror .p-title-pageAction {
  4527. padding-top: 0;
  4528. }
  4529.  
  4530. @media (width >=650px) {
  4531. .uix_fabBar.8--mirror {
  4532. display: none;
  4533. }
  4534. } */
  4535.  
  4536. @media (width >=650px) {
  4537. .uix_fabBar .p-title-pageAction {
  4538. display: none;
  4539. }
  4540. }
  4541.  
  4542. .uix_fabBar .u-scrollButtons {
  4543. position: static;
  4544. }
  4545.  
  4546. .uix_fabBar .p-title-pageAction {
  4547. margin-bottom: calc(-75px);
  4548. transition: ease-in 0.2s margin-bottom;
  4549. z-index: 5;
  4550. padding-top: 15px;
  4551. }
  4552.  
  4553. .uix_hasBottomTabs .uix_fabBar .p-title-pageAction {
  4554. margin-bottom: -30px;
  4555. }
  4556.  
  4557. .uix_fabBar .p-title-pageAction .button {
  4558. border-radius: 100%;
  4559. height: 60px;
  4560. width: 60px;
  4561. padding: 0;
  4562. font-size: 0;
  4563. display: none;
  4564. align-items: center;
  4565. justify-content: center;
  4566. box-shadow:
  4567. 0 6px 10px 0 #00000066,
  4568. 0 1px 18px 0 #0000005c,
  4569. 0 3px 5px 0 #00000099;
  4570. background: var(--color33);
  4571. color: var(--color2);
  4572. }
  4573.  
  4574. .uix_fabBar .p-title-pageAction .button:last-child {
  4575. display: flex;
  4576. }
  4577.  
  4578. .uix_fabBar
  4579. .p-title-pageAction
  4580. .button:not(.button--icon) {
  4581. display: none;
  4582. }
  4583.  
  4584. .uix_fabBar
  4585. .p-title-pageAction
  4586. .button
  4587. .button-text::before {
  4588. font-size: 24px;
  4589. margin: 0;
  4590. width: 1em;
  4591. }
  4592.  
  4593. .uix_fabBar .u-scrollButtons {
  4594. pointer-events: auto;
  4595. }
  4596.  
  4597. .uix_fabBar.uix_fabBar--active .p-title-pageAction {
  4598. margin-bottom: 0;
  4599. pointer-events: auto;
  4600. }
  4601.  
  4602. @media (width <=480px) {
  4603. .uix_hasBottomTabs
  4604. .uix_fabBar.uix_fabBar--active
  4605. .p-title-pageAction {
  4606. margin-bottom: 45px;
  4607. }
  4608. }
  4609.  
  4610. #uix_jumpToFixed {
  4611. font-size: 24px;
  4612. color: var(--color35);
  4613. background-color: var(--color26);
  4614. margin: 16px;
  4615. border-radius: 2px;
  4616. position: fixed;
  4617. z-index: 1;
  4618. transition: opacity 0.4s;
  4619. display: block;
  4620. padding: 0;
  4621. bottom: 0;
  4622. right: 0;
  4623. left: auto;
  4624. }
  4625.  
  4626. #uix_jumpToFixed a:first-child {
  4627. padding-bottom: 4px;
  4628. }
  4629.  
  4630. #uix_jumpToFixed a {
  4631. color: inherit;
  4632. display: block;
  4633. padding: 8px;
  4634. }
  4635.  
  4636. #uix_jumpToFixed a:last-child {
  4637. padding-top: 4px;
  4638. }
  4639.  
  4640. .uix_discussionList {
  4641. border-radius: 6px;
  4642. background-image: linear-gradient(
  4643. 135deg,
  4644. var(--color30),
  4645. var(--color31)
  4646. );
  4647. }
  4648.  
  4649. [type='checkbox'],
  4650. [type='radio'],
  4651. legend {
  4652. margin-right: 0.5em;
  4653. }
  4654.  
  4655. .structItem-extraInfo [type='checkbox'] {
  4656. margin-right: 0;
  4657. }
  4658.  
  4659. form.structItem {
  4660. display: flex;
  4661. max-width: 100%;
  4662. }
  4663.  
  4664. .structItem-cell--newThread {
  4665. flex-grow: 1;
  4666. min-width: 0;
  4667. }
  4668.  
  4669. .uix_messageContent {
  4670. flex-grow: 1;
  4671. display: flex;
  4672. flex-direction: column;
  4673. justify-content: space-between;
  4674. width: 100%;
  4675. }
  4676.  
  4677. .pageContent .uix_socialMedia {
  4678. display: inline-flex;
  4679. flex-wrap: wrap;
  4680. margin: 0 -6px;
  4681. padding: 0;
  4682. }
  4683.  
  4684. .p-staffBar .pageContent .uix_socialMedia {
  4685. margin-right: 10px;
  4686. }
  4687.  
  4688. @media (width <=900px) {
  4689. .p-staffBar .pageContent .uix_socialMedia {
  4690. display: none;
  4691. }
  4692. }
  4693.  
  4694. .pageContent .uix_socialMedia li {
  4695. display: inline-block;
  4696. }
  4697.  
  4698. .pageContent .uix_socialMedia li a {
  4699. margin: 6px;
  4700. line-height: 1;
  4701. display: inline-block;
  4702. font-size: 24px;
  4703. }
  4704.  
  4705. .uix_headerContainer {
  4706. background: var(--color27);
  4707. display: flex;
  4708. flex-direction: column;
  4709. }
  4710.  
  4711. @media (width >=901px) {
  4712. .uix_headerContainer {
  4713. margin-top: 0;
  4714. }
  4715. }
  4716.  
  4717. @media (width >=650px) {
  4718. .uix_headerContainer > *:not(.p-nav) {
  4719. margin-bottom: 0;
  4720. }
  4721.  
  4722. .uix_headerContainer > *:not(.p-nav):last-child {
  4723. margin-bottom: 0;
  4724. }
  4725. }
  4726.  
  4727. @media (width >=901px) {
  4728. .p-staffBar,
  4729. .p-header {
  4730. margin-bottom: 0;
  4731. }
  4732. }
  4733.  
  4734. @media (width >=901px) {
  4735. .p-pageWrapper {
  4736. margin-top: 0;
  4737. }
  4738. }
  4739.  
  4740. .p-body > * {
  4741. padding-top: 20px;
  4742. }
  4743.  
  4744. .uix_pageWrapper--fixed {
  4745. width: 100%;
  4746. position: relative;
  4747. left: 0;
  4748. transition:
  4749. max-width 0.2s,
  4750. ease-in left 0.2s;
  4751. }
  4752.  
  4753. .uix_postThreadWidget {
  4754. border-top: 4px solid var(--color28);
  4755. text-align: center;
  4756. padding: 15px;
  4757. color: var(--color29);
  4758. }
  4759.  
  4760. .uix_postThreadWidget i {
  4761. height: 50px;
  4762. width: 50px;
  4763. line-height: 50px;
  4764. border-radius: 100%;
  4765. background-color: var(color43);
  4766. color: var(--color28);
  4767. display: inline-block;
  4768. font-size: 24px;
  4769. }
  4770.  
  4771. .uix_postThreadWidget .uix_postThreadWidget__title {
  4772. font-size: 2rem;
  4773. font-weight: 500;
  4774. color: var(--color2);
  4775. }
  4776.  
  4777. .uix_postThreadWidget .button {
  4778. margin-top: 10px;
  4779. }
  4780.  
  4781. .block-footer.uix_conversationsFooterMobile {
  4782. display: none;
  4783. }
  4784.  
  4785. .overlay .block-footer.uix_conversationsFooterMobile {
  4786. display: flex;
  4787. }
  4788.  
  4789. .overlay .block-footer {
  4790. position: sticky;
  4791. bottom: 0;
  4792. }
  4793.  
  4794. .uix_hasBottomTabs .uix_tabBar {
  4795. height: 46px;
  4796. position: relative;
  4797. z-index: 300;
  4798. }
  4799.  
  4800. @media (width >=480px) {
  4801. .uix_hasBottomTabs .uix_tabBar {
  4802. display: none;
  4803. }
  4804. }
  4805.  
  4806. .uix_hasBottomTabs .uix_tabList {
  4807. z-index: 100;
  4808. margin: 0;
  4809. padding: 0;
  4810. display: flex;
  4811. background: var(--color28);
  4812. position: fixed;
  4813. text-transform: capitalize;
  4814. bottom: 0;
  4815. left: 0;
  4816. right: 0;
  4817. box-shadow:
  4818. 0 0 2px 0 #00000024,
  4819. 0 -2px 2px 0 #0000001f,
  4820. 0 -1px 3px 0 #00000033;
  4821. }
  4822.  
  4823. .uix_hasBottomTabs .uix_tabList .uix_tabItem {
  4824. flex-grow: 1;
  4825. display: flex;
  4826. flex-direction: column;
  4827. align-items: center;
  4828. justify-content: center;
  4829. padding: 5px;
  4830. height: 46px;
  4831. color: var(--color44);
  4832. line-height: 1;
  4833. font-size: 10px;
  4834. position: relative;
  4835. text-align: center;
  4836. }
  4837.  
  4838. .uix_hasBottomTabs
  4839. .uix_tabList
  4840. .uix_tabItem.uix_tabItem--active {
  4841. color: var(--color2);
  4842. }
  4843.  
  4844. .uix_hasBottomTabs .uix_tabList .uix_tabItem:hover {
  4845. text-decoration: none;
  4846. color: var(--color2);
  4847. }
  4848.  
  4849. .uix_hasBottomTabs .uix_tabList .badgeContainer {
  4850. position: relative;
  4851. }
  4852.  
  4853. .uix_hasBottomTabs .uix_tabList .badgeContainer::after {
  4854. position: absolute;
  4855. top: 0;
  4856. right: -10px;
  4857. }
  4858.  
  4859. .uix_hasBottomTabs .uix_tabList .uix_tabItem i {
  4860. font-size: 24px;
  4861. }
  4862.  
  4863. @media (width <=900px) {
  4864. .uix_headerContainer > *,
  4865. .p-pageWrapper > *,
  4866. .p-nav,
  4867. .p-footer > * {
  4868. border-radius: 0 !important;
  4869. }
  4870. }
  4871.  
  4872. @media (width <=900px) {
  4873. .uix_responsiveStaffBar .p-staffBar {
  4874. display: none;
  4875. }
  4876. }
  4877.  
  4878. @media (width <=900px) {
  4879. .p-staffBar .p-nav-opposite {
  4880. display: none;
  4881. }
  4882. }
  4883.  
  4884. @media (width <=9999px) {
  4885. .p-header {
  4886. display: none;
  4887. }
  4888. }
  4889.  
  4890. @media (width <=9999px) {
  4891. .p-header .p-nav-opposite {
  4892. display: none;
  4893. }
  4894. }
  4895.  
  4896. @media (width >=10000px) {
  4897. .p-nav-inner .p-header-logo {
  4898. display: none;
  4899. }
  4900.  
  4901. .p-nav > *:not(.p-header) .uix_searchBar {
  4902. display: none;
  4903. }
  4904. }
  4905.  
  4906. .p-sectionLinks {
  4907. display: none;
  4908. }
  4909.  
  4910. .menu--account .avatar-update a {
  4911. max-width: 21px;
  4912. overflow: hidden;
  4913. font-size: 12px;
  4914. }
  4915.  
  4916. .comment-reply-link::before {
  4917. font-family: 'Font Awesome 5 Pro';
  4918. font-size: inherit;
  4919. font-style: normal;
  4920. font-weight: 400;
  4921. text-rendering: auto;
  4922. -webkit-font-smoothing: antialiased;
  4923. -moz-osx-font-smoothing: grayscale;
  4924. content: '\f27a';
  4925. width: 1.28571429em;
  4926. display: inline-block;
  4927. text-align: center;
  4928. margin-right: 4px;
  4929. }
  4930.  
  4931. .sidePanel__tabs .badgeContainer::after {
  4932. position: relative;
  4933. top: -15px;
  4934. left: -5px;
  4935. }
  4936.  
  4937. .lSSlideOuter.noticeScrollContainer {
  4938. position: relative;
  4939. }
  4940.  
  4941. .lSSlideOuter.noticeScrollContainer .lSPager {
  4942. margin-top: 0;
  4943. position: absolute;
  4944. bottom: 0;
  4945. left: 0;
  4946. right: 0;
  4947. height: 20px;
  4948. background: none;
  4949. }
  4950.  
  4951. .lSSlideOuter.noticeScrollContainer .notice-content {
  4952. margin-bottom: 20px;
  4953. }
  4954.  
  4955. .notices--bottom_fixer .notice--cookie .notice-content {
  4956. display: flex;
  4957. }
  4958.  
  4959. @media (width <=650px) {
  4960. .notices--bottom_fixer .notice--cookie .notice-content {
  4961. text-align: center;
  4962. align-items: center;
  4963. flex-direction: column;
  4964. }
  4965. }
  4966.  
  4967. .notices--bottom_fixer .notice--cookie .u-inputSpacer {
  4968. margin-top: 0;
  4969. }
  4970.  
  4971. .notices--bottom_fixer
  4972. .notice--cookie
  4973. .uix_cookieButtonRow {
  4974. margin: 0 -3px -3px 10px;
  4975. }
  4976.  
  4977. @media (width <=650px) {
  4978. .notices--bottom_fixer
  4979. .notice--cookie
  4980. .uix_cookieButtonRow {
  4981. margin-top: 10px;
  4982. margin-left: -3px;
  4983. }
  4984. }
  4985.  
  4986. .notices--bottom_fixer
  4987. .notice--cookie
  4988. .uix_cookieButtonRow
  4989. .button {
  4990. margin: 3px;
  4991. }
  4992.  
  4993. .notices--bottom_fixer
  4994. .notice--cookie
  4995. .notice-content
  4996. > div:first-child {
  4997. flex-grow: 1;
  4998. justify-content: center;
  4999. display: flex;
  5000. flex-direction: column;
  5001. }
  5002.  
  5003. .uix_mobileNodeTitle::before {
  5004. content: '\00a0\00B7\00a0';
  5005. }
  5006.  
  5007. @media (width >=650px) {
  5008. .uix_mobileNodeTitle {
  5009. display: none;
  5010. }
  5011. }
  5012.  
  5013. @media (width >=480px) {
  5014. .p-navgroup-link--user.p-navgroup-link.badgeContainer::after {
  5015. display: none;
  5016. }
  5017. }
  5018.  
  5019. .menu-tabHeader {
  5020. color: var(--color1);
  5021. }
  5022.  
  5023. .menu-tabHeader i {
  5024. font-size: 24px;
  5025. }
  5026.  
  5027. .menu-tabHeader .tabs-tab {
  5028. min-width: 60px;
  5029. text-align: center;
  5030. position: relative;
  5031. }
  5032.  
  5033. .menu-tabHeader .badgeContainer::after {
  5034. position: absolute;
  5035. top: 10px;
  5036. right: 10px;
  5037. }
  5038.  
  5039. .menu {
  5040. transition:
  5041. cubic-bezier(0.4, 0, 0.2, 1) 0.26s transform,
  5042. cubic-bezier(0.4, 0, 0.2, 1) 0.26s opacity;
  5043. transform: translateY(-10px);
  5044. opacity: 0%;
  5045. }
  5046.  
  5047. .menu.is-active {
  5048. transform: translateY(0);
  5049. opacity: 100%;
  5050. }
  5051.  
  5052. .input input {
  5053. box-shadow: none !important;
  5054. }
  5055.  
  5056. .uix_sidebarNav
  5057. .uix_sidebarNav__inner__widgets
  5058. .block-container,
  5059. .offCanvasMenu-content
  5060. .uix_sidebarNav__inner__widgets
  5061. .block-container,
  5062. .uix_sidebarNav
  5063. .uix_sidebarNav__inner__widgets
  5064. .block-minorHeader,
  5065. .offCanvasMenu-content
  5066. .uix_sidebarNav__inner__widgets
  5067. .block-minorHeader,
  5068. .uix_sidebarNav
  5069. .uix_sidebarNav__inner__widgets
  5070. .block-footer,
  5071. .offCanvasMenu-content
  5072. .uix_sidebarNav__inner__widgets
  5073. .block-footer,
  5074. .uix_sidebarNav
  5075. .uix_sidebarNav__inner__widgets
  5076. .block-body
  5077. .block-row,
  5078. .offCanvasMenu-content
  5079. .uix_sidebarNav__inner__widgets
  5080. .block-body
  5081. .block-row {
  5082. border: none;
  5083. box-shadow: none;
  5084. background: none;
  5085. padding: 0;
  5086. }
  5087.  
  5088. .uix_sidebarNav
  5089. .uix_sidebarNav__inner__widgets
  5090. .block-container:not(:last-child),
  5091. .offCanvasMenu-content
  5092. .uix_sidebarNav__inner__widgets
  5093. .block-container:not(:last-child),
  5094. .uix_sidebarNav
  5095. .uix_sidebarNav__inner__widgets
  5096. .block-minorHeader:not(:last-child),
  5097. .offCanvasMenu-content
  5098. .uix_sidebarNav__inner__widgets
  5099. .block-minorHeader:not(:last-child),
  5100. .uix_sidebarNav
  5101. .uix_sidebarNav__inner__widgets
  5102. .block-footer:not(:last-child),
  5103. .offCanvasMenu-content
  5104. .uix_sidebarNav__inner__widgets
  5105. .block-footer:not(:last-child),
  5106. .uix_sidebarNav
  5107. .uix_sidebarNav__inner__widgets
  5108. .block-body
  5109. .block-row:not(:last-child),
  5110. .offCanvasMenu-content
  5111. .uix_sidebarNav__inner__widgets
  5112. .block-body
  5113. .block-row:not(:last-child) {
  5114. padding-bottom: 15px;
  5115. }
  5116.  
  5117. .uix_sidebarNav
  5118. .uix_sidebarNav__inner__widgets
  5119. .block:not(:last-child)
  5120. .block-container,
  5121. .offCanvasMenu-content
  5122. .uix_sidebarNav__inner__widgets
  5123. .block:not(:last-child)
  5124. .block-container {
  5125. border-bottom: 1px solid var(--color32);
  5126. padding-bottom: 15px;
  5127. }
  5128.  
  5129. .uix_sidebarNav
  5130. .uix_sidebarNav__inner__widgets
  5131. .block-minorHeader,
  5132. .offCanvasMenu-content
  5133. .uix_sidebarNav__inner__widgets
  5134. .block-minorHeader {
  5135. font-size: 1.2rem;
  5136. color: var(--color1);
  5137. }
  5138.  
  5139. .uix_sidebarNav
  5140. .uix_sidebarNav__inner__widgets
  5141. .block-minorHeader::before,
  5142. .offCanvasMenu-content
  5143. .uix_sidebarNav__inner__widgets
  5144. .block-minorHeader::before {
  5145. display: none !important;
  5146. }
  5147.  
  5148. .uix_sidebarNav
  5149. .uix_sidebarNav__inner__widgets
  5150. [data-widget-definition='th_bookmarks']
  5151. .bookmarkRow,
  5152. .offCanvasMenu-content
  5153. .uix_sidebarNav__inner__widgets
  5154. [data-widget-definition='th_bookmarks']
  5155. .bookmarkRow {
  5156. line-height: 40px;
  5157. display: flex;
  5158. align-items: center;
  5159. color: var(--color29);
  5160. }
  5161.  
  5162. .uix_sidebarNav
  5163. .uix_sidebarNav__inner__widgets
  5164. [data-widget-definition='th_bookmarks']
  5165. .bookmarkRow
  5166. .contentRow-minor,
  5167. .offCanvasMenu-content
  5168. .uix_sidebarNav__inner__widgets
  5169. [data-widget-definition='th_bookmarks']
  5170. .bookmarkRow
  5171. .contentRow-minor,
  5172. .uix_sidebarNav
  5173. .uix_sidebarNav__inner__widgets
  5174. [data-widget-definition='th_bookmarks']
  5175. .bookmarkRow
  5176. .bookmarkRow-forum,
  5177. .offCanvasMenu-content
  5178. .uix_sidebarNav__inner__widgets
  5179. [data-widget-definition='th_bookmarks']
  5180. .bookmarkRow
  5181. .bookmarkRow-forum {
  5182. display: none;
  5183. }
  5184.  
  5185. .uix_sidebarNav
  5186. .uix_sidebarNav__inner__widgets
  5187. [data-widget-definition='th_bookmarks']
  5188. .bookmarkRow
  5189. .bookmarkRow-content,
  5190. .offCanvasMenu-content
  5191. .uix_sidebarNav__inner__widgets
  5192. [data-widget-definition='th_bookmarks']
  5193. .bookmarkRow
  5194. .bookmarkRow-content {
  5195. overflow: hidden;
  5196. white-space: nowrap;
  5197. text-overflow: ellipsis;
  5198. }
  5199.  
  5200. .uix_sidebarNav
  5201. .uix_sidebarNav__inner__widgets
  5202. [data-widget-definition='th_bookmarks']
  5203. .block-row,
  5204. .offCanvasMenu-content
  5205. .uix_sidebarNav__inner__widgets
  5206. [data-widget-definition='th_bookmarks']
  5207. .block-row {
  5208. padding: 0 !important;
  5209. }
  5210.  
  5211. .uix_sidebarNav
  5212. .uix_sidebarNav__inner__widgets
  5213. [data-widget-definition='th_bookmarks']
  5214. .contentRow-main.contentRow-main--close,
  5215. .offCanvasMenu-content
  5216. .uix_sidebarNav__inner__widgets
  5217. [data-widget-definition='th_bookmarks']
  5218. .contentRow-main.contentRow-main--close {
  5219. padding: 0;
  5220. }
  5221.  
  5222. .uix_sidebarNav
  5223. .uix_sidebarNav__inner__widgets
  5224. [data-widget-definition='th_bookmarks']
  5225. i::before,
  5226. .offCanvasMenu-content
  5227. .uix_sidebarNav__inner__widgets
  5228. [data-widget-definition='th_bookmarks']
  5229. i::before,
  5230. .uix_sidebarNav
  5231. .uix_sidebarNav__inner__widgets
  5232. [data-widget-definition='th_bookmarks']
  5233. a,
  5234. .offCanvasMenu-content
  5235. .uix_sidebarNav__inner__widgets
  5236. [data-widget-definition='th_bookmarks']
  5237. a {
  5238. color: inherit;
  5239. }
  5240.  
  5241. .uix_sidebarNav
  5242. .uix_sidebarNav__inner__widgets
  5243. [data-widget-definition='th_bookmarks']
  5244. .block-footer,
  5245. .offCanvasMenu-content
  5246. .uix_sidebarNav__inner__widgets
  5247. [data-widget-definition='th_bookmarks']
  5248. .block-footer,
  5249. .uix_sidebarNav
  5250. .uix_sidebarNav__inner__widgets
  5251. [data-widget-definition='th_bookmarks']
  5252. .contentRow-main::before,
  5253. .offCanvasMenu-content
  5254. .uix_sidebarNav__inner__widgets
  5255. [data-widget-definition='th_bookmarks']
  5256. .contentRow-main::before {
  5257. display: none;
  5258. }
  5259.  
  5260. .uix_sidebarNav
  5261. .uix_sidebarNav__inner__widgets
  5262. [data-widget-definition='th_bookmarks']
  5263. .contentRow-figure,
  5264. .offCanvasMenu-content
  5265. .uix_sidebarNav__inner__widgets
  5266. [data-widget-definition='th_bookmarks']
  5267. .contentRow-figure {
  5268. height: 24px;
  5269. padding-right: 1em;
  5270. font-size: 24px;
  5271. }
  5272.  
  5273. .uix_sidebarNav
  5274. .uix_sidebarNav__inner__widgets
  5275. [data-widget-definition='th_bookmarks']
  5276. .contentRow-figure
  5277. .avatar,
  5278. .offCanvasMenu-content
  5279. .uix_sidebarNav__inner__widgets
  5280. [data-widget-definition='th_bookmarks']
  5281. .contentRow-figure
  5282. .avatar,
  5283. .uix_sidebarNav
  5284. .uix_sidebarNav__inner__widgets
  5285. [data-widget-definition='th_bookmarks']
  5286. .contentRow-figure
  5287. i,
  5288. .offCanvasMenu-content
  5289. .uix_sidebarNav__inner__widgets
  5290. [data-widget-definition='th_bookmarks']
  5291. .contentRow-figure
  5292. i {
  5293. font-size: 24px;
  5294. width: 24px;
  5295. height: 24px;
  5296. vertical-align: inherit;
  5297. }
  5298.  
  5299. .uix_sidebarNav
  5300. .uix_sidebarNav__inner__widgets
  5301. [data-widget-definition='th_bookmarks']
  5302. .contentRow-figure
  5303. .node-icon,
  5304. .offCanvasMenu-content
  5305. .uix_sidebarNav__inner__widgets
  5306. [data-widget-definition='th_bookmarks']
  5307. .contentRow-figure
  5308. .node-icon {
  5309. width: auto;
  5310. }
  5311.  
  5312. .uix_sidebarTrigger--phrase {
  5313. display: none;
  5314. }
  5315.  
  5316. .uix_headerInner--opposite
  5317. a.uix_sidebarTrigger__component {
  5318. padding: 0 4px;
  5319. }
  5320.  
  5321. .uix_headerInner--opposite
  5322. a.uix_sidebarTrigger__component
  5323. i {
  5324. margin: 0;
  5325. }
  5326.  
  5327. .uix_originalPoster__icon {
  5328. height: 19px;
  5329. width: 19px;
  5330. background: var(--color36);
  5331. color: var(--color2);
  5332. display: inline-block;
  5333. border-radius: 100%;
  5334. text-align: center;
  5335. }
  5336.  
  5337. .uix_solutionAttribution {
  5338. color: var(--color37);
  5339. }
  5340.  
  5341. .actionBar-action.actionBar-action--vote .contentVote {
  5342. flex-direction: row;
  5343. font-size: inherit;
  5344. min-width: 0;
  5345. }
  5346.  
  5347. .actionBar-action.actionBar-action--vote
  5348. .contentVote
  5349. .contentVote-vote {
  5350. width: 24px;
  5351. height: 24px;
  5352. line-height: 24px;
  5353. text-align: center;
  5354. padding: 0;
  5355. background: var(--color30);
  5356. border-radius: 100%;
  5357. transform: initial;
  5358. }
  5359.  
  5360. .actionBar-action.actionBar-action--vote
  5361. .contentVote
  5362. .contentVote-vote::before {
  5363. background: none;
  5364. }
  5365.  
  5366. .actionBar-action.actionBar-action--vote
  5367. .contentVote
  5368. .contentVote-vote.is-voted {
  5369. background: var(--color37);
  5370. color: var(--color2);
  5371. }
  5372.  
  5373. .actionBar-action.actionBar-action--vote
  5374. .contentVote
  5375. .contentVote-vote.is-voted.contentVote-vote--down {
  5376. background: var(--color38);
  5377. color: var(--color2);
  5378. }
  5379.  
  5380. .actionBar-action.actionBar-action--vote
  5381. .contentVote
  5382. .contentVote-score {
  5383. padding: 0 10px;
  5384. }
  5385.  
  5386. /********* public:uix_extendedFooter.less ********/
  5387. .uix_extendedFooter {
  5388. order: 10;
  5389. background: var(--color39);
  5390. border-top: 0 solid var(--color32);
  5391. padding-top: 24px;
  5392. padding-bottom: 24px;
  5393. line-height: 1.7;
  5394. }
  5395.  
  5396. .uix_extendedFooter .pageContent {
  5397. max-width: 1200px;
  5398. margin-left: auto;
  5399. margin-right: auto;
  5400. width: 100%;
  5401. width: calc(100% - 40px);
  5402. transition: max-width 0.2s;
  5403. padding: 0;
  5404. }
  5405.  
  5406. @media (width <=900px) {
  5407. .uix_extendedFooter .pageContent {
  5408. width: calc(100% - 20px);
  5409. }
  5410. }
  5411.  
  5412. @media (width <=900px) {
  5413. .uix_extendedFooter .pageContent {
  5414. padding-left: env(safe-area-inset-left) !important;
  5415. padding-right: env(safe-area-inset-right) !important;
  5416. }
  5417. }
  5418.  
  5419. @media (width >=1200px) {
  5420. .uix_page--fluid .uix_extendedFooter .pageContent {
  5421. max-width: 100%;
  5422. }
  5423. }
  5424.  
  5425. .uix_extendedFooter .uix_extendedFooterRow {
  5426. display: flex;
  5427. flex-wrap: wrap;
  5428. grid-gap: 15px;
  5429. }
  5430.  
  5431. .uix_extendedFooter .uix_extendedFooterRow .blockLink {
  5432. text-transform: capitalize;
  5433. }
  5434.  
  5435. .uix_extendedFooter .uix_extendedFooterRow > .block {
  5436. flex-basis: 280px;
  5437. margin: 0;
  5438. flex-grow: 1;
  5439. min-width: 0;
  5440. }
  5441.  
  5442. .uix_extendedFooter
  5443. .uix_extendedFooterRow
  5444. > .block
  5445. .block-container {
  5446. margin-left: 0;
  5447. margin-right: 0;
  5448. color: var(--color45);
  5449. background: none;
  5450. border-width: 0;
  5451. border-style: solid;
  5452. box-shadow: none;
  5453. }
  5454.  
  5455. .uix_extendedFooter
  5456. .uix_extendedFooterRow
  5457. > .block
  5458. .block-container
  5459. .block-minorHeader {
  5460. color: var(--color2);
  5461. background: none;
  5462. border-bottom-width: 0;
  5463. border-bottom-style: solid;
  5464. padding: 0;
  5465. padding-bottom: 10px;
  5466. display: flex;
  5467. align-items: center;
  5468. }
  5469.  
  5470. .uix_extendedFooter
  5471. .uix_extendedFooterRow
  5472. > .block
  5473. .block-container
  5474. .block-minorHeader::before {
  5475. color: #ffffff4d;
  5476. }
  5477.  
  5478. .uix_extendedFooter
  5479. .uix_extendedFooterRow
  5480. > .block
  5481. .block-container
  5482. .block-minorHeader
  5483. a {
  5484. color: inherit;
  5485. }
  5486.  
  5487. .uix_extendedFooter
  5488. .uix_extendedFooterRow
  5489. > .block
  5490. .block-container
  5491. .contentRow-minor {
  5492. color: var(--color44);
  5493. }
  5494.  
  5495. .uix_extendedFooter
  5496. .uix_extendedFooterRow
  5497. > .block
  5498. .block-container
  5499. .contentRow-minor
  5500. time {
  5501. color: var(--color45);
  5502. }
  5503.  
  5504. .uix_extendedFooter
  5505. .uix_extendedFooterRow
  5506. > .block
  5507. .block-container
  5508. a {
  5509. color: inherit;
  5510. }
  5511.  
  5512. .uix_extendedFooter
  5513. .uix_extendedFooterRow
  5514. > .block
  5515. .block-container
  5516. .pairs
  5517. > dt {
  5518. color: var(--color44);
  5519. }
  5520.  
  5521. .uix_extendedFooter
  5522. .uix_extendedFooterRow
  5523. > .block
  5524. .block-container
  5525. .block-row,
  5526. .uix_extendedFooter
  5527. .uix_extendedFooterRow
  5528. > .block
  5529. .block-container
  5530. .blockLink {
  5531. padding-right: 0;
  5532. padding-left: 0;
  5533. }
  5534.  
  5535. .uix_extendedFooter
  5536. .uix_extendedFooterRow
  5537. > .block
  5538. .block-container
  5539. .block-footer {
  5540. color: inherit;
  5541. background: none;
  5542. padding-right: 0;
  5543. padding-bottom: 0;
  5544. padding-left: 0;
  5545. }
  5546.  
  5547. .uix_extendedFooter
  5548. .uix_extendedFooterRow
  5549. > .block
  5550. .block-container
  5551. .blockLink {
  5552. background: none;
  5553. color: inherit;
  5554. border-bottom: 1px solid #ffffff1f;
  5555. }
  5556.  
  5557. .uix_extendedFooter
  5558. .uix_extendedFooterRow
  5559. > .block
  5560. .block-container
  5561. .blockLink
  5562. a {
  5563. display: block;
  5564. }
  5565.  
  5566. /********* public:uix_socialMedia.less ********/
  5567. [data-widget-definition='thuix_socialMedia'] .block-row {
  5568. max-height: 200px;
  5569. overflow-y: auto;
  5570. }
  5571.  
  5572. /********* public:legend_main.less ********/
  5573. body {
  5574. background-color: var(--color31);
  5575. background-image: linear-gradient(
  5576. 135deg,
  5577. var(--color31),
  5578. var(--color3)
  5579. );
  5580. background-attachment: fixed;
  5581. background-size: cover;
  5582. }
  5583.  
  5584. .p-body-inner {
  5585. padding-bottom: 40px;
  5586. }
  5587.  
  5588. a.uix_logo {
  5589. display: flex;
  5590. align-items: center;
  5591. }
  5592.  
  5593. .p-nav-list li .p-navEl {
  5594. position: relative;
  5595. }
  5596.  
  5597. .p-nav-list li .p-navEl::after {
  5598. height: 4px;
  5599. width: 0%;
  5600. transition: 0.3s all ease-in-out;
  5601. background-color: var(--color33);
  5602. border-radius: 4px;
  5603. position: absolute;
  5604. bottom: 10px;
  5605. left: 0;
  5606. right: 0;
  5607. margin: 0 auto;
  5608. max-width: 0%;
  5609. }
  5610.  
  5611. .p-nav-list li .p-navEl.is-selected::after {
  5612. content: '';
  5613. height: 4px;
  5614. width: 80%;
  5615. max-width: 150px;
  5616. background-color: var(--color28);
  5617. border-radius: 4px;
  5618. position: absolute;
  5619. bottom: 10px;
  5620. left: 0;
  5621. right: 0;
  5622. margin: 0 auto;
  5623. }
  5624.  
  5625. .p-nav-list li .p-navEl:hover::after {
  5626. content: '';
  5627. height: 4px;
  5628. width: 80%;
  5629. background-color: var(--color33);
  5630. border-radius: 4px;
  5631. position: absolute;
  5632. bottom: 10px;
  5633. left: 0;
  5634. right: 0;
  5635. margin: 0 auto;
  5636. max-width: 80%;
  5637. }
  5638.  
  5639. .p-nav a {
  5640. text-decoration: none;
  5641. }
  5642.  
  5643. .p-account {
  5644. font-size: 1.2rem;
  5645. }
  5646.  
  5647. .p-account .p-navgroup-link--logIn {
  5648. color: var(--color1);
  5649. font-weight: 300;
  5650. margin-right: 15px;
  5651. }
  5652.  
  5653. @media (width >=900px) {
  5654. .p-account .p-navgroup-link--logIn i {
  5655. display: none;
  5656. }
  5657. }
  5658.  
  5659. .p-account .p-navgroup-link--register {
  5660. background-color: var(--color28);
  5661. border-radius: 50px;
  5662. padding: 4px 15px;
  5663. margin-right: 15px;
  5664. transition: 0.3s all ease-in-out;
  5665. font-size: 1.2rem;
  5666. }
  5667.  
  5668. .p-account
  5669. .p-navgroup-link--register
  5670. .p-navgroup-linkText {
  5671. padding-left: 0;
  5672. }
  5673.  
  5674. .p-account .p-navgroup-link--register:hover {
  5675. background-color: var(--color40);
  5676. }
  5677.  
  5678. @media (width >=900px) {
  5679. .p-account .p-navgroup-link--register i {
  5680. display: none;
  5681. }
  5682. }
  5683.  
  5684. .p-nav .p-navgroup--member a,
  5685. .p-nav .p-navgroup a,
  5686. .p-nav-opposite a {
  5687. transition: all 0.3s ease-in-out;
  5688. }
  5689.  
  5690. .p-nav
  5691. .p-navgroup--member
  5692. a.p-navgroup-link:not(.p-navgroup-link--register):hover,
  5693. .p-nav
  5694. .p-navgroup
  5695. a.p-navgroup-link:not(.p-navgroup-link--register):hover,
  5696. .p-nav-opposite
  5697. a.p-navgroup-link:not(
  5698. .p-navgroup-link--register
  5699. ):hover {
  5700. color: var(--color33) !important;
  5701. }
  5702.  
  5703. .node-body .node-icon {
  5704. display: none !important;
  5705. }
  5706.  
  5707. .node--unread {
  5708. position: relative;
  5709. }
  5710.  
  5711. .node--unread::before {
  5712. content: '';
  5713. background-color: var(--color28);
  5714. width: 4px;
  5715. border-radius: 4px;
  5716. height: 0;
  5717. position: absolute;
  5718. top: 0;
  5719. bottom: 0;
  5720. left: -2px;
  5721. margin: auto 0;
  5722. }
  5723.  
  5724. .block--category:nth-child(odd) .node--unread::before {
  5725. background-color: var(--color28);
  5726. }
  5727.  
  5728. .block--category:nth-child(odd) h2.block-header {
  5729. color: var(--color28);
  5730. background-size: contain, cover;
  5731. background-repeat: no-repeat, no-repeat;
  5732. background-position:
  5733. center,
  5734. right center;
  5735. position: relative;
  5736. }
  5737.  
  5738. @media (width <=650px) {
  5739. .block--category:nth-child(odd) h2.block-header {
  5740. background-size: contain, cover;
  5741. }
  5742. }
  5743.  
  5744. .block--category:nth-child(odd)
  5745. h2.block-header
  5746. .uix_categoryStrip-content {
  5747. z-index: 10;
  5748. text-shadow:
  5749. 0 0 3px var(--color3),
  5750. 0 0 4px var(--color3),
  5751. 0 0 5px var(--color3),
  5752. 0 0 6px var(--color3);
  5753. }
  5754.  
  5755. .block--category:nth-child(odd) h2.block-header::before {
  5756. content: '';
  5757. display: block !important;
  5758. position: absolute !important;
  5759. inset: 0 !important;
  5760. background-color: var(--color28);
  5761. mix-blend-mode: overlay;
  5762. opacity: 80%;
  5763. }
  5764.  
  5765. .block--category:nth-child(even) .node--unread::before {
  5766. background-color: var(--color33);
  5767. }
  5768.  
  5769. .block--category:nth-child(even) h2.block-header {
  5770. color: var(--color33);
  5771. background-size: contain, cover;
  5772. background-repeat: no-repeat, no-repeat;
  5773. background-position:
  5774. center,
  5775. right center;
  5776. position: relative;
  5777. }
  5778.  
  5779. @media (width <=650px) {
  5780. .block--category:nth-child(even) h2.block-header {
  5781. background-size: contain, cover;
  5782. }
  5783. }
  5784.  
  5785. .block--category:nth-child(even)
  5786. h2.block-header
  5787. .uix_categoryStrip-content {
  5788. z-index: 10;
  5789. text-shadow:
  5790. 0 0 3px var(--color3),
  5791. 0 0 4px var(--color3),
  5792. 0 0 5px var(--color3),
  5793. 0 0 6px var(--color3);
  5794. }
  5795.  
  5796. .block--category:nth-child(even) h2.block-header::before {
  5797. content: '';
  5798. display: block !important;
  5799. position: absolute !important;
  5800. inset: 0 !important;
  5801. background-color: var(--color33);
  5802. mix-blend-mode: overlay;
  5803. opacity: 80%;
  5804. }
  5805.  
  5806. .node-body .node-extra {
  5807. padding-left: 15px;
  5808. }
  5809.  
  5810. @media (width <=900px) {
  5811. .node-body .node-extra {
  5812. padding-left: 10px !important;
  5813. }
  5814. }
  5815.  
  5816. a.categoryCollapse--trigger {
  5817. color: var(--color2);
  5818. text-shadow: 2px 2px 4px var(--color6);
  5819. }
  5820.  
  5821. .contentRow-minor {
  5822. font-size: 1.2rem;
  5823. }
  5824.  
  5825. .contentRow-minor time {
  5826. color: var(--color1);
  5827. }
  5828.  
  5829. a.contentRow-extra {
  5830. text-decoration: none;
  5831. }
  5832.  
  5833. .block-footer a {
  5834. text-decoration: none;
  5835. }
  5836.  
  5837. .block[data-widget-definition='th_post_thread_uix']
  5838. .block-container {
  5839. position: relative;
  5840. background-color: var(--color3);
  5841. }
  5842.  
  5843. .legend_welcomeSection--particles,
  5844. .block[data-widget-definition='th_post_thread_uix']
  5845. .block-container
  5846. .legend_newPost--particles {
  5847. width: 50%;
  5848. height: 100%;
  5849. position: absolute;
  5850. inset: 0 0 0 50%;
  5851. display: block;
  5852. }
  5853.  
  5854. @media (width <=900px) {
  5855. .legend_welcomeSection--particles,
  5856. .block[data-widget-definition='th_post_thread_uix']
  5857. .block-container
  5858. .legend_newPost--particles {
  5859. display: none;
  5860. }
  5861. }
  5862.  
  5863. .legend_welcomeSection--particles .legend_particle1,
  5864. .block[data-widget-definition='th_post_thread_uix']
  5865. .block-container
  5866. .legend_newPost--particles
  5867. .legend_particle1 {
  5868. opacity: 0%;
  5869. position: absolute;
  5870. background-color: #1976dc80;
  5871. animation: legend_motes1 3s ease-in infinite;
  5872. border-radius: 100%;
  5873. }
  5874.  
  5875. .legend_welcomeSection--particles .legend_particle2,
  5876. .block[data-widget-definition='th_post_thread_uix']
  5877. .block-container
  5878. .legend_newPost--particles
  5879. .legend_particle2 {
  5880. opacity: 0%;
  5881. position: absolute;
  5882. background-color: #ffffffd9;
  5883. animation: legend_motes2 3.5s ease-in infinite;
  5884. border-radius: 100%;
  5885. }
  5886.  
  5887. .legend_welcomeSection--particles .legend_particle3,
  5888. .block[data-widget-definition='th_post_thread_uix']
  5889. .block-container
  5890. .legend_newPost--particles
  5891. .legend_particle3 {
  5892. opacity: 0%;
  5893. position: absolute;
  5894. background-color: #ffffff99;
  5895. animation: legend_motes3 2s ease-in infinite;
  5896. border-radius: 100%;
  5897. }
  5898.  
  5899. @keyframes legend_motes1 {
  5900. 0% {
  5901. opacity: 0%;
  5902. }
  5903.  
  5904. 20% {
  5905. opacity: 100%;
  5906. transform: translate(5%, -20%);
  5907. }
  5908.  
  5909. 100% {
  5910. opacity: 0%;
  5911. transform: translate(200%, -3500%);
  5912. }
  5913. }
  5914.  
  5915. @keyframes legend_motes2 {
  5916. 0% {
  5917. opacity: 0%;
  5918. }
  5919.  
  5920. 20% {
  5921. opacity: 100%;
  5922. transform: translate(3%, -20%);
  5923. }
  5924.  
  5925. 100% {
  5926. opacity: 0%;
  5927. transform: translate(450%, -2200%);
  5928. }
  5929. }
  5930.  
  5931. @keyframes legend_motes3 {
  5932. 0% {
  5933. opacity: 0%;
  5934. }
  5935.  
  5936. 20% {
  5937. opacity: 100%;
  5938. transform: translate(2%, -20%);
  5939. }
  5940.  
  5941. 100% {
  5942. opacity: 0%;
  5943. transform: translate(175%, -3700%);
  5944. }
  5945. }
  5946.  
  5947. .uix_postThreadWidget {
  5948. border-top: none;
  5949. text-align: left;
  5950. padding: 30px 15px !important;
  5951. background-color: transparent;
  5952. background-image: url('https://www.skial.com/styles/legend/legend/legend_lol-new-post-bg.png');
  5953. background-position: bottom right;
  5954. background-size: 75%;
  5955. background-repeat: no-repeat;
  5956. text-shadow:
  5957. 0 0 2px var(--color3),
  5958. 0 0 3px var(--color3),
  5959. 0 0 4px var(--color3);
  5960. }
  5961.  
  5962. .uix_postThreadWidget i {
  5963. display: none;
  5964. }
  5965.  
  5966. .uix_postThreadWidget .uix_postThreadWidget__title {
  5967. margin-top: 0;
  5968. font-weight: 300;
  5969. font-size: 1.5rem;
  5970. text-transform: uppercase;
  5971. }
  5972.  
  5973. .uix_postThreadWidget .uix_postThreadWidget__description {
  5974. font-size: 1.2rem;
  5975. }
  5976.  
  5977. .uix_postThreadWidget .button {
  5978. margin-top: 15px;
  5979. text-shadow: none;
  5980. }
  5981.  
  5982. .button--primary i,
  5983. .button--cta i {
  5984. display: none;
  5985. }
  5986.  
  5987. .button--primary span.button-text::before,
  5988. .button--cta span.button-text::before {
  5989. display: none !important;
  5990. }
  5991.  
  5992. .u-scrollButtons .button {
  5993. border-radius: 4px;
  5994. }
  5995.  
  5996. .p-body-pageContent
  5997. .block[data-widget-definition='forum_statistics']
  5998. .block-container {
  5999. display: flex;
  6000. flex-direction: row;
  6001. font-size: 1.7rem;
  6002. }
  6003.  
  6004. @media (width <=650px) {
  6005. .p-body-pageContent
  6006. .block[data-widget-definition='forum_statistics']
  6007. .block-container {
  6008. flex-direction: column;
  6009. }
  6010. }
  6011.  
  6012. .p-body-pageContent
  6013. .block[data-widget-definition='forum_statistics']
  6014. .block-container
  6015. > .block-minorHeader {
  6016. background-color: transparent;
  6017. border-bottom: none;
  6018. border-right: 1px solid var(--color32);
  6019. width: 25%;
  6020. min-width: 190px;
  6021. justify-content: center;
  6022. font-size: inherit;
  6023. border-radius: 0;
  6024. }
  6025.  
  6026. @media (width <=650px) {
  6027. .p-body-pageContent
  6028. .block[data-widget-definition='forum_statistics']
  6029. .block-container
  6030. > .block-minorHeader {
  6031. width: 100%;
  6032. border-right: none;
  6033. border-bottom: 1px solid var(--color32);
  6034. }
  6035. }
  6036.  
  6037. .p-body-pageContent
  6038. .block[data-widget-definition='forum_statistics']
  6039. .block-container
  6040. > .block-body {
  6041. width: 75%;
  6042. display: flex;
  6043. flex-flow: row wrap;
  6044. padding: 0;
  6045. }
  6046.  
  6047. @media (width <=650px) {
  6048. .p-body-pageContent
  6049. .block[data-widget-definition='forum_statistics']
  6050. .block-container
  6051. > .block-body {
  6052. width: 100%;
  6053. }
  6054. }
  6055.  
  6056. .p-body-pageContent
  6057. .block[data-widget-definition='forum_statistics']
  6058. .block-container
  6059. > .block-body
  6060. dl.pairs {
  6061. width: 50%;
  6062. padding: 10px;
  6063. text-transform: uppercase;
  6064. justify-content: flex-start;
  6065. }
  6066.  
  6067. @media (width <=900px) {
  6068. .p-body-pageContent
  6069. .block[data-widget-definition='forum_statistics']
  6070. .block-container
  6071. > .block-body
  6072. dl.pairs {
  6073. width: 100%;
  6074. }
  6075.  
  6076. .p-body-pageContent
  6077. .block[data-widget-definition='forum_statistics']
  6078. .block-container
  6079. > .block-body
  6080. dl.pairs:nth-child(3) {
  6081. border-bottom: 1px solid var(--color32);
  6082. }
  6083. }
  6084.  
  6085. .p-body-pageContent
  6086. .block[data-widget-definition='forum_statistics']
  6087. .block-container
  6088. > .block-body
  6089. dl.pairs:first-child {
  6090. border-bottom: 1px solid var(--color32);
  6091. }
  6092.  
  6093. .p-body-pageContent
  6094. .block[data-widget-definition='forum_statistics']
  6095. .block-container
  6096. > .block-body
  6097. dl.pairs:nth-child(2) {
  6098. border-bottom: 1px solid var(--color32);
  6099. border-left: 1px solid var(--color32);
  6100. }
  6101.  
  6102. .p-body-pageContent
  6103. .block[data-widget-definition='forum_statistics']
  6104. .block-container
  6105. > .block-body
  6106. dl.pairs:nth-child(4) {
  6107. border-left: 1px solid var(--color32);
  6108. }
  6109.  
  6110. .p-body-pageContent
  6111. .block[data-widget-definition='forum_statistics']
  6112. .block-container
  6113. > .block-body
  6114. dl.pairs:nth-child(4)
  6115. a {
  6116. text-transform: none;
  6117. }
  6118.  
  6119. .p-body-pageContent
  6120. .block[data-widget-definition='forum_statistics']
  6121. .block-container
  6122. > .block-body
  6123. dl.pairs
  6124. dt {
  6125. display: flex;
  6126. flex-direction: row;
  6127. align-items: center;
  6128. justify-content: flex-start;
  6129. }
  6130.  
  6131. .p-body-pageContent
  6132. .block[data-widget-definition='forum_statistics']
  6133. .block-container
  6134. > .block-body
  6135. dl.pairs
  6136. dd {
  6137. display: flex;
  6138. flex-direction: row;
  6139. align-items: center;
  6140. justify-content: flex-start;
  6141. }
  6142.  
  6143. .p-body-pageContent
  6144. .block[data-widget-definition='forum_statistics']
  6145. .block-container
  6146. > .block-body
  6147. dl.pairs
  6148. dt::before {
  6149. width: 32px;
  6150. height: 32px;
  6151. border-radius: 32px;
  6152. background-color: var(--color32);
  6153. color: var(--color1);
  6154. font: normal normal normal 18px/1 Material Design Icons;
  6155. display: inline-block;
  6156. font-size: 20px;
  6157. line-height: 32px;
  6158. margin-right: 10px;
  6159. text-align: center;
  6160. }
  6161.  
  6162. .p-body-pageContent
  6163. .block[data-widget-definition='forum_statistics']
  6164. .block-container
  6165. > .block-body
  6166. dl.pairs:nth-child(1)
  6167. dt::before {
  6168. content: '\f361';
  6169. }
  6170.  
  6171. .p-body-pageContent
  6172. .block[data-widget-definition='forum_statistics']
  6173. .block-container
  6174. > .block-body
  6175. dl.pairs:nth-child(2)
  6176. dt::before {
  6177. content: '\f28c';
  6178. }
  6179.  
  6180. .p-body-pageContent
  6181. .block[data-widget-definition='forum_statistics']
  6182. .block-container
  6183. > .block-body
  6184. dl.pairs:nth-child(3)
  6185. dt::before {
  6186. content: '\f00e';
  6187. }
  6188.  
  6189. .p-body-pageContent
  6190. .block[data-widget-definition='forum_statistics']
  6191. .block-container
  6192. > .block-body
  6193. dl.pairs:nth-child(4)
  6194. dt::before {
  6195. content: '\f004';
  6196. }
  6197.  
  6198. .structItem-title a {
  6199. text-decoration: none;
  6200. }
  6201.  
  6202. .shareButtons-buttons a.shareButtons-button {
  6203. border-radius: 50px;
  6204. }
  6205.  
  6206. .uix_fabBar .button--icon--write .button-text::before {
  6207. display: block !important;
  6208. }
  6209.  
  6210. .p-breadcrumbs > li::after {
  6211. font-weight: bold;
  6212. }
  6213.  
  6214. .reactionsBar .reactionSummary > li,
  6215. .message-responseRow .reactionSummary > li {
  6216. background-color: transparent !important;
  6217. }
  6218.  
  6219. /********* public:legend_messages.less ********/
  6220. .message-inner .message-cell.message-cell--user {
  6221. padding-top: 20px;
  6222. padding-left: 10px;
  6223. padding-right: 10px;
  6224. }
  6225.  
  6226. .message-inner
  6227. .message-cell.message-cell--user
  6228. .uix_messagePostBitWrapper {
  6229. margin-top: 4px;
  6230. }
  6231.  
  6232. .message-inner
  6233. .message-cell.message-cell--user
  6234. .uix_messagePostBitWrapper
  6235. .message-name
  6236. a {
  6237. color: var(--color28);
  6238. text-decoration: none;
  6239. font-size: 1.7rem;
  6240. }
  6241.  
  6242. .message-inner
  6243. .message-cell.message-cell--user
  6244. .uix_messagePostBitWrapper
  6245. .message-name
  6246. a:hover {
  6247. color: var(--color2);
  6248. }
  6249.  
  6250. .message-inner
  6251. .message-cell.message-cell--user
  6252. .uix_messagePostBitWrapper
  6253. .uix_originalPoster__icon {
  6254. background: none;
  6255. font-size: 18px;
  6256. }
  6257.  
  6258. .message-inner
  6259. .message-cell.message-cell--user
  6260. .uix_messagePostBitWrapper
  6261. .userBanner {
  6262. font-size: 1.3rem;
  6263. border-radius: 50px;
  6264. }
  6265.  
  6266. .message-inner
  6267. .message-cell.message-cell--user
  6268. .uix_messagePostBitWrapper
  6269. dl.pairs {
  6270. margin-top: 4px;
  6271. }
  6272.  
  6273. /********* public:extra.less ********/
  6274. .bbMediaWrapper {
  6275. width: auto;
  6276. }
  6277.  
  6278. .node-meta {
  6279. opacity: 60%;
  6280. }
  6281.  
  6282. .node-extra .listInline {
  6283. opacity: 60%;
  6284. }
  6285.  
  6286. .node-body:hover {
  6287. transform: scale(1.02);
  6288. }
  6289.  
  6290. .structItem-parts > li:nth-child(even) {
  6291. color: var(--color1);
  6292. }
  6293.  
  6294. div.node-body {
  6295. text-shadow: 1px 1px 2px var(--color6);
  6296. }
  6297.  
  6298. .uix_newIndicator,
  6299. .label {
  6300. text-shadow: none;
  6301. }
  6302. }