API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 17th, 2019
133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 86.21 KB | None | 0 0
raw download clone embed print report
  1. @import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900");
  2. * {
  3. outline-width: 0 !important;
  4. font-family: 'Lato'; }
  5.  
  6. body, html {
  7. padding: 0;
  8. margin: 0;
  9. background: #212129;
  10. color: #eee;
  11. overflow-x: hidden; }
  12.  
  13. html {
  14. height: 100%;
  15. -webkit-box-sizing: border-box;
  16. box-sizing: border-box; }
  17.  
  18. body {
  19. position: relative;
  20. padding-bottom: 260px;
  21. min-height: 100%; }
  22. body > footer {
  23. position: absolute;
  24. width: 100%;
  25. bottom: 0;
  26. background: #1a1a21; }
  27. body > footer .wrapper {
  28. display: -ms-grid;
  29. display: grid;
  30. -ms-grid-columns: 1fr 2fr 1.5fr;
  31. grid-template-columns: 1fr 2fr 1.5fr;
  32. grid-gap: 15px;
  33. max-width: 980px;
  34. width: 100%;
  35. margin: 0 auto;
  36. padding: 35px 0; }
  37. body > footer .wrapper h4 {
  38. margin: 0 0 15px 0;
  39. position: relative; }
  40. body > footer .wrapper h4:after {
  41. content: "";
  42. width: 50px;
  43. height: 2px;
  44. background: #4a4a5c;
  45. display: block;
  46. margin-top: 15px; }
  47. body > footer .wrapper h4 span {
  48. margin-left: 5px; }
  49. body > footer .wrapper .warning {
  50. font-size: 14px;
  51. opacity: .5; }
  52. body > footer .wrapper hr {
  53. border: none;
  54. height: 2px;
  55. width: 50px;
  56. margin: 15px 0;
  57. background: #4a4a5c;
  58. margin-left: 0; }
  59. body > footer .wrapper .item i {
  60. padding-right: 10px; }
  61. body > footer .wrapper a, body > footer .wrapper .item {
  62. display: block;
  63. color: #aaa;
  64. text-decoration: none;
  65. padding: 5px 0; }
  66. body > footer .wrapper a:hover, body > footer .wrapper .item:hover {
  67. color: #fff; }
  68.  
  69. input::-webkit-input-placeholder {
  70. color: #fff;
  71. opacity: .5; }
  72.  
  73. input:-ms-input-placeholder {
  74. color: #fff;
  75. opacity: .5; }
  76.  
  77. input::-ms-input-placeholder {
  78. color: #fff;
  79. opacity: .5; }
  80.  
  81. input::placeholder {
  82. color: #fff;
  83. opacity: .5; }
  84.  
  85. .clickToCopy .copyText {
  86. display: none; }
  87.  
  88. .clickToCopy .copyAlert {
  89. position: fixed;
  90. top: 30px;
  91. opacity: 0;
  92. visibility: hidden;
  93. z-index: 11;
  94. background: #3c3c4b;
  95. -webkit-box-shadow: 0 3px 5px #1a1a21;
  96. box-shadow: 0 3px 5px #1a1a21;
  97. color: #fff;
  98. -webkit-user-select: none;
  99. -moz-user-select: none;
  100. -ms-user-select: none;
  101. user-select: none;
  102. pointer-events: none;
  103. padding: 10px 15px;
  104. border-radius: 3px;
  105. -webkit-box-sizing: border-box;
  106. box-sizing: border-box;
  107. left: 50%;
  108. -webkit-transform: translateX(-50%);
  109. -ms-transform: translateX(-50%);
  110. transform: translateX(-50%);
  111. -webkit-transition: 0.2s ease;
  112. -o-transition: 0.2s ease;
  113. transition: 0.2s ease; }
  114. .clickToCopy .copyAlert.show {
  115. top: 40px;
  116. opacity: 1;
  117. visibility: visible; }
  118.  
  119. #homeContainer .itemContainer {
  120. margin-bottom: 50px;
  121. padding-top: 0; }
  122. #homeContainer .itemContainer:last-child {
  123. margin-bottom: 0; }
  124.  
  125. #homeContainer header {
  126. display: -webkit-box;
  127. display: -ms-flexbox;
  128. display: flex;
  129. padding: 20px;
  130. -webkit-box-sizing: border-box;
  131. box-sizing: border-box;
  132. -webkit-box-align: center;
  133. -ms-flex-align: center;
  134. align-items: center;
  135. max-width: 1920px;
  136. width: 100%;
  137. margin: 0 auto; }
  138. #homeContainer header .headerLeft {
  139. -webkit-box-flex: 1;
  140. -ms-flex: 1;
  141. flex: 1; }
  142. #homeContainer header .headerLeft h2 {
  143. margin: 0;
  144. font-weight: 400; }
  145. #homeContainer header .headerRight a {
  146. background: #3c3c4b;
  147. color: #fff;
  148. text-decoration: none;
  149. padding: 15px 20px;
  150. border-radius: 3px;
  151. display: block;
  152. -webkit-transition: 0.2s ease;
  153. -o-transition: 0.2s ease;
  154. transition: 0.2s ease; }
  155. #homeContainer header .headerRight a:hover {
  156. background: #4a4a5c; }
  157.  
  158. #swup {
  159. margin-top: 58.4px;
  160. display: block;
  161. margin-bottom: 150px; }
  162.  
  163. .transition-page {
  164. opacity: 1;
  165. -webkit-transition: 0.3s ease;
  166. -o-transition: 0.3s ease;
  167. transition: 0.3s ease; }
  168.  
  169. html.is-animating .transition-page {
  170. opacity: 0; }
  171.  
  172. [data-balloon]::before, [data-balloon]::after {
  173. -webkit-user-select: none;
  174. -moz-user-select: none;
  175. -ms-user-select: none;
  176. user-select: none;
  177. pointer-events: none; }
  178.  
  179. [data-balloon][data-balloon-pos="up"]::after {
  180. text-align: center !important; }
  181.  
  182. /* width */
  183. ::-webkit-scrollbar {
  184. width: 4px; }
  185.  
  186. /* Track */
  187. ::-webkit-scrollbar-track {
  188. background: #4a4a5c; }
  189.  
  190. /* Handle */
  191. ::-webkit-scrollbar-thumb {
  192. background: #797993; }
  193.  
  194. /* Handle on hover */
  195. ::-webkit-scrollbar-thumb:hover {
  196. background: #a3a3b5; }
  197.  
  198. nav {
  199. position: fixed;
  200. top: 0;
  201. left: 0;
  202. width: 100%;
  203. z-index: 10;
  204. display: -ms-grid;
  205. display: grid;
  206. -ms-grid-columns: 64px 1fr auto;
  207. grid-template-columns: 64px 1fr auto;
  208. grid-gap: 10px;
  209. -webkit-box-align: center;
  210. -ms-flex-align: center;
  211. align-items: center;
  212. background: #282831;
  213. padding-left: 10px;
  214. -webkit-box-sizing: border-box;
  215. box-sizing: border-box;
  216. -webkit-box-shadow: 0 0 5px #0f0f12;
  217. box-shadow: 0 0 5px #0f0f12; }
  218.  
  219. .navLeft {
  220. display: -webkit-box;
  221. display: -ms-flexbox;
  222. display: flex;
  223. -webkit-box-align: center;
  224. -ms-flex-align: center;
  225. align-items: center;
  226. -webkit-box-pack: center;
  227. -ms-flex-pack: center;
  228. justify-content: center; }
  229. .navLeft a {
  230. display: block; }
  231. .navLeft a img {
  232. display: block;
  233. width: 48px; }
  234.  
  235. .navMid {
  236. display: -webkit-box;
  237. display: -ms-flexbox;
  238. display: flex;
  239. -webkit-box-align: center;
  240. -ms-flex-align: center;
  241. align-items: center; }
  242. .navMid .div {
  243. width: 1px;
  244. height: 30px;
  245. margin: 0 15px;
  246. background: #3c3c4b;
  247. display: block; }
  248. .navMid a {
  249. display: block;
  250. font-weight: 700;
  251. padding: 20px 15px;
  252. -webkit-box-sizing: border-box;
  253. box-sizing: border-box;
  254. font-size: 16px;
  255. text-decoration: none;
  256. color: #ccc;
  257. -webkit-box-shadow: inset 0 4px 0 transparent;
  258. box-shadow: inset 0 4px 0 transparent;
  259. -webkit-transition: 0.2s ease;
  260. -o-transition: 0.2s ease;
  261. transition: 0.2s ease; }
  262. .navMid a:hover, .navMid a.active {
  263. -webkit-box-shadow: inset 0 3px 0 #fff;
  264. box-shadow: inset 0 3px 0 #fff;
  265. color: #fff; }
  266.  
  267. .navRight {
  268. display: -webkit-box;
  269. display: -ms-flexbox;
  270. display: flex;
  271. -webkit-box-align: center;
  272. -ms-flex-align: center;
  273. align-items: center; }
  274. .navRight > a {
  275. display: -webkit-box;
  276. display: -ms-flexbox;
  277. display: flex;
  278. -webkit-box-align: center;
  279. -ms-flex-align: center;
  280. align-items: center;
  281. padding: 10px 15px;
  282. background: #3c3c4b;
  283. border-radius: 3px;
  284. color: #fff;
  285. text-decoration: none;
  286. margin-right: 10px; }
  287. .navRight > a i {
  288. padding-right: 10px; }
  289. .navRight > a:first-child {
  290. background: transparent;
  291. -webkit-box-shadow: inset 0 0 0 2px #3c3c4b;
  292. box-shadow: inset 0 0 0 2px #3c3c4b; }
  293. .navRight > a:first-child:hover {
  294. background: #3c3c4b; }
  295.  
  296. #userContainer {
  297. position: relative;
  298. height: 58.4px; }
  299.  
  300. #userBtn {
  301. display: -webkit-box;
  302. display: -ms-flexbox;
  303. display: flex;
  304. -webkit-box-align: center;
  305. -ms-flex-align: center;
  306. align-items: center;
  307. padding: 0 10px;
  308. height: 100%;
  309. -webkit-box-sizing: border-box;
  310. box-sizing: border-box;
  311. -webkit-box-shadow: inset 0 4px 0 transparent;
  312. box-shadow: inset 0 4px 0 transparent;
  313. -webkit-transition: 0.2s ease;
  314. -o-transition: 0.2s ease;
  315. transition: 0.2s ease;
  316. cursor: pointer;
  317. -webkit-user-select: none;
  318. -moz-user-select: none;
  319. -ms-user-select: none;
  320. user-select: none;
  321. max-width: 150px; }
  322. #userBtn span {
  323. text-transform: uppercase;
  324. font-weight: 600;
  325. color: #ccc;
  326. -webkit-transition: 0.2s ease;
  327. -o-transition: 0.2s ease;
  328. transition: 0.2s ease;
  329. overflow: hidden;
  330. white-space: nowrap;
  331. -o-text-overflow: ellipsis;
  332. text-overflow: ellipsis; }
  333. #userBtn img {
  334. width: 32px;
  335. height: 32px;
  336. display: block;
  337. border-radius: 3px;
  338. margin-right: 10px;
  339. background: #212129; }
  340. #userBtn:hover {
  341. -webkit-box-shadow: inset 0 3px 0 #fff;
  342. box-shadow: inset 0 3px 0 #fff; }
  343. #userBtn:hover span {
  344. color: #fff; }
  345.  
  346. #userDrop {
  347. position: absolute;
  348. top: 100%;
  349. right: 0;
  350. background: #282831;
  351. -webkit-box-shadow: 0 5px 5px rgba(15, 15, 18, 0.5);
  352. box-shadow: 0 5px 5px rgba(15, 15, 18, 0.5);
  353. padding: 0 10px 10px 10px;
  354. -webkit-box-sizing: border-box;
  355. box-sizing: border-box;
  356. border-radius: 0 0 0 3px;
  357. width: 250px;
  358. visibility: hidden;
  359. opacity: 0;
  360. -webkit-transform-origin: top right;
  361. -ms-transform-origin: top right;
  362. transform-origin: top right;
  363. -webkit-transform: scale(0.9, 0.9);
  364. -ms-transform: scale(0.9, 0.9);
  365. transform: scale(0.9, 0.9);
  366. -webkit-transition: 0.2s ease;
  367. -o-transition: 0.2s ease;
  368. transition: 0.2s ease; }
  369. #userDrop a, #userDrop button {
  370. display: -webkit-box;
  371. display: -ms-flexbox;
  372. display: flex;
  373. -webkit-box-align: center;
  374. -ms-flex-align: center;
  375. align-items: center;
  376. padding: 15px 15px 15px 45px;
  377. -webkit-box-sizing: border-box;
  378. box-sizing: border-box;
  379. color: #fff;
  380. background: transparent;
  381. border: none;
  382. text-decoration: none;
  383. width: 100%;
  384. cursor: pointer;
  385. position: relative; }
  386. #userDrop a i, #userDrop button i {
  387. position: absolute;
  388. left: 15px; }
  389. #userDrop a:hover, #userDrop button:hover {
  390. background: #212129; }
  391. #userDrop hr {
  392. border: none;
  393. height: 1px;
  394. background: #3c3c4b;
  395. margin: 10px 0; }
  396. #userDrop.toggle {
  397. visibility: visible;
  398. opacity: 1;
  399. -webkit-transform: scale(1, 1);
  400. -ms-transform: scale(1, 1);
  401. transform: scale(1, 1); }
  402.  
  403. .banner {
  404. height: 300px;
  405. background: -webkit-linear-gradient(45deg, #3F51B5, #2196F3);
  406. background: -o-linear-gradient(45deg, #3F51B5, #2196F3);
  407. background: linear-gradient(45deg, #3F51B5, #2196F3);
  408. display: -webkit-box;
  409. display: -ms-flexbox;
  410. display: flex;
  411. -webkit-box-orient: vertical;
  412. -webkit-box-direction: normal;
  413. -ms-flex-direction: column;
  414. flex-direction: column;
  415. -webkit-box-pack: center;
  416. -ms-flex-pack: center;
  417. justify-content: center;
  418. padding: 0 50px;
  419. -webkit-box-sizing: border-box;
  420. box-sizing: border-box;
  421. color: #fff; }
  422. .banner h1 {
  423. font-size: 42px;
  424. margin: 0;
  425. text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
  426. .banner > p {
  427. margin: 0;
  428. font-weight: 600;
  429. text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
  430.  
  431. #subBanner {
  432. height: 150px;
  433. -webkit-box-orient: horizontal;
  434. -webkit-box-direction: normal;
  435. -ms-flex-direction: row;
  436. flex-direction: row;
  437. -webkit-box-align: center;
  438. -ms-flex-align: center;
  439. align-items: center; }
  440. #subBanner h1 {
  441. -webkit-box-flex: 1;
  442. -ms-flex: 1;
  443. flex: 1; }
  444. #subBanner .pageSearch {
  445. width: 350px;
  446. position: relative;
  447. -webkit-box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  448. box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5); }
  449. #subBanner .pageSearch i {
  450. position: absolute;
  451. left: 20px;
  452. top: 50%;
  453. -webkit-transform: translateY(-50%);
  454. -ms-transform: translateY(-50%);
  455. transform: translateY(-50%);
  456. opacity: .5;
  457. -webkit-transition: 0.2s ease;
  458. -o-transition: 0.2s ease;
  459. transition: 0.2s ease;
  460. color: #000;
  461. -webkit-user-select: none;
  462. -moz-user-select: none;
  463. -ms-user-select: none;
  464. user-select: none;
  465. pointer-events: none; }
  466. #subBanner .pageSearch.change {
  467. position: fixed;
  468. z-index: 11;
  469. right: 15px;
  470. top: 10px;
  471. -webkit-box-shadow: none;
  472. box-shadow: none; }
  473. #subBanner .pageSearch.change #pageSearch {
  474. padding: 10px 15px 10px 55px;
  475. background: #3c3c4b;
  476. color: #fff; }
  477. #subBanner .pageSearch.change #pageSearch::-webkit-input-placeholder {
  478. color: #fff; }
  479. #subBanner .pageSearch.change #pageSearch:-ms-input-placeholder {
  480. color: #fff; }
  481. #subBanner .pageSearch.change #pageSearch::-ms-input-placeholder {
  482. color: #fff; }
  483. #subBanner .pageSearch.change #pageSearch::placeholder {
  484. color: #fff; }
  485. #subBanner .pageSearch.change #pageSearch:focus {
  486. background: #434353; }
  487. #subBanner .pageSearch.change i {
  488. color: #fff; }
  489. #subBanner #pageSearch {
  490. background: #fff;
  491. padding: 15px 20px 15px 60px;
  492. border: none;
  493. color: #000;
  494. -webkit-box-sizing: border-box;
  495. box-sizing: border-box;
  496. border-radius: 3px;
  497. font-weight: 600;
  498. width: 100%;
  499. -webkit-transition: 0.2s ease;
  500. -o-transition: 0.2s ease;
  501. transition: 0.2s ease; }
  502. #subBanner #pageSearch::-webkit-input-placeholder {
  503. color: #000;
  504. opacity: .5; }
  505. #subBanner #pageSearch:-ms-input-placeholder {
  506. color: #000;
  507. opacity: .5; }
  508. #subBanner #pageSearch::-ms-input-placeholder {
  509. color: #000;
  510. opacity: .5; }
  511. #subBanner #pageSearch::placeholder {
  512. color: #000;
  513. opacity: .5; }
  514. #subBanner #pageSearch:focus ~ i {
  515. opacity: 1; }
  516.  
  517. #homeBanner {
  518. -webkit-box-align: center;
  519. -ms-flex-align: center;
  520. align-items: center; }
  521.  
  522. .globalSearch {
  523. margin-top: 35px;
  524. width: 550px;
  525. position: relative; }
  526. .globalSearch #searchContainer {
  527. background: #fff;
  528. overflow: hidden;
  529. -webkit-box-shadow: 0 3px 5px rgba(26, 26, 33, 0.5);
  530. box-shadow: 0 3px 5px rgba(26, 26, 33, 0.5);
  531. display: -webkit-box;
  532. display: -ms-flexbox;
  533. display: flex;
  534. width: 100%;
  535. border-radius: 3px;
  536. position: relative; }
  537. .globalSearch #searchContainer input {
  538. background: transparent;
  539. width: 100%;
  540. border: none;
  541. color: #000;
  542. font-weight: 600;
  543. padding: 15px;
  544. -webkit-box-sizing: border-box;
  545. box-sizing: border-box;
  546. text-indent: 42px; }
  547. .globalSearch #searchContainer input::-webkit-input-placeholder {
  548. color: #000 !important; }
  549. .globalSearch #searchContainer input:-ms-input-placeholder {
  550. color: #000 !important; }
  551. .globalSearch #searchContainer input::-ms-input-placeholder {
  552. color: #000 !important; }
  553. .globalSearch #searchContainer input::placeholder {
  554. color: #000 !important; }
  555. .globalSearch #searchContainer input:focus ~ i {
  556. opacity: 1; }
  557. .globalSearch #searchContainer i {
  558. position: absolute;
  559. color: #000;
  560. height: 100%;
  561. padding: 0 10px 0 20px;
  562. display: -webkit-box;
  563. display: -ms-flexbox;
  564. display: flex;
  565. -webkit-box-align: center;
  566. -ms-flex-align: center;
  567. align-items: center;
  568. -webkit-user-select: none;
  569. -moz-user-select: none;
  570. -ms-user-select: none;
  571. user-select: none;
  572. pointer-events: none;
  573. opacity: .5;
  574. -webkit-transition: 0.2s ease;
  575. -o-transition: 0.2s ease;
  576. transition: 0.2s ease; }
  577. .globalSearch #results {
  578. position: absolute;
  579. top: calc(100% + 15px);
  580. background: #fff;
  581. padding: 0 10px;
  582. -webkit-box-sizing: border-box;
  583. box-sizing: border-box;
  584. border-radius: 3px;
  585. -webkit-box-shadow: 0 3px 5px rgba(26, 26, 33, 0.5);
  586. box-shadow: 0 3px 5px rgba(26, 26, 33, 0.5);
  587. width: 100%;
  588. -webkit-transition: 0.2s ease;
  589. -o-transition: 0.2s ease;
  590. transition: 0.2s ease;
  591. opacity: 0;
  592. z-index: 5;
  593. visibility: hidden;
  594. max-height: 300px;
  595. overflow-y: auto; }
  596. .globalSearch #results .header {
  597. border-bottom: 1px solid #ddd;
  598. padding: 10px;
  599. -webkit-box-sizing: border-box;
  600. box-sizing: border-box;
  601. display: -webkit-box;
  602. display: -ms-flexbox;
  603. display: flex;
  604. -webkit-box-align: center;
  605. -ms-flex-align: center;
  606. align-items: center; }
  607. .globalSearch #results .header p {
  608. margin: 0;
  609. -webkit-box-flex: 1;
  610. -ms-flex: 1;
  611. flex: 1;
  612. color: #000;
  613. font-weight: 600; }
  614. .globalSearch #results .header a {
  615. font-weight: 600;
  616. text-decoration: none;
  617. color: #000;
  618. padding: 5px 10px;
  619. border-radius: 3px;
  620. -webkit-transition: 0.1s ease;
  621. -o-transition: 0.1s ease;
  622. transition: 0.1s ease; }
  623. .globalSearch #results .header a:hover {
  624. background: rgba(12, 12, 12, 0.03); }
  625. .globalSearch #results .result {
  626. -webkit-transition: 0.2s ease;
  627. -o-transition: 0.2s ease;
  628. transition: 0.2s ease;
  629. border-bottom: 1px solid #ddd; }
  630. .globalSearch #results .result a {
  631. padding: 10px;
  632. -webkit-box-sizing: border-box;
  633. box-sizing: border-box;
  634. text-decoration: none;
  635. display: -ms-grid;
  636. display: grid;
  637. -ms-grid-columns: 18px 1fr 1fr;
  638. grid-template-columns: 18px 1fr 1fr;
  639. grid-gap: 10px;
  640. color: #444;
  641. font-weight: 600;
  642. text-decoration: none; }
  643. .globalSearch #results .result a:hover {
  644. background: rgba(12, 12, 12, 0.03); }
  645. .globalSearch #results .result:last-child {
  646. border-bottom: none;
  647. margin-bottom: 10px; }
  648. .globalSearch #results .error {
  649. display: -webkit-box;
  650. display: -ms-flexbox;
  651. display: flex;
  652. padding: 10px;
  653. -webkit-box-sizing: border-box;
  654. box-sizing: border-box; }
  655. .globalSearch #results .error p {
  656. -webkit-box-flex: 1;
  657. -ms-flex: 1;
  658. flex: 1;
  659. margin: 0;
  660. font-weight: 600;
  661. color: #444; }
  662. .globalSearch #results .error small {
  663. color: #000; }
  664. .globalSearch #results.focused {
  665. padding: 10px 10px 0 10px;
  666. visibility: visible;
  667. opacity: 1; }
  668. .globalSearch #results:empty {
  669. opacity: 0;
  670. visibility: hidden; }
  671.  
  672. .itemContainer {
  673. display: -ms-grid;
  674. display: grid;
  675. -ms-grid-columns: (1fr)[4];
  676. grid-template-columns: repeat(4, 1fr);
  677. grid-gap: 20px;
  678. padding: 20px;
  679. -webkit-box-sizing: border-box;
  680. box-sizing: border-box;
  681. max-width: 1920px;
  682. width: 100%;
  683. margin: 0 auto; }
  684. .itemContainer .item {
  685. display: block;
  686. background: #282831;
  687. overflow: hidden;
  688. color: #fff;
  689. border-radius: 3px;
  690. text-decoration: none;
  691. -webkit-transition: 0.1s ease;
  692. -o-transition: 0.1s ease;
  693. transition: 0.1s ease; }
  694. .itemContainer .item .head {
  695. max-height: 256px;
  696. overflow: hidden;
  697. position: relative;
  698. background: #23232c; }
  699. .itemContainer .item .head img {
  700. width: 100%;
  701. display: block; }
  702. .itemContainer .item .stats {
  703. padding: 10px 20px;
  704. -webkit-box-sizing: border-box;
  705. box-sizing: border-box;
  706. display: -webkit-box;
  707. display: -ms-flexbox;
  708. display: flex;
  709. border-bottom: 1px solid #2f2f3a; }
  710. .itemContainer .item .stats .stat {
  711. margin-right: 15px;
  712. display: -webkit-box;
  713. display: -ms-flexbox;
  714. display: flex;
  715. -webkit-box-align: center;
  716. -ms-flex-align: center;
  717. align-items: center;
  718. font-size: 14px; }
  719. .itemContainer .item .stats .stat i {
  720. margin-right: 5px;
  721. font-size: 12px; }
  722. .itemContainer .item .stats .stat.upvote {
  723. color: #4CAF50; }
  724. .itemContainer .item .stats .stat.downvote {
  725. color: #f44336; }
  726. .itemContainer .item .body {
  727. padding: 20px;
  728. -webkit-box-sizing: border-box;
  729. box-sizing: border-box; }
  730. .itemContainer .item .body h2 {
  731. margin: 0;
  732. font-weight: 500; }
  733. .itemContainer .item .body p {
  734. margin: 5px 0 0;
  735. overflow: hidden;
  736. white-space: nowrap;
  737. -o-text-overflow: ellipsis;
  738. text-overflow: ellipsis; }
  739. .itemContainer .item .body .descContainer {
  740. display: block; }
  741. .itemContainer .item .body .descContainer p {
  742. margin-top: 10px; }
  743. .itemContainer .item:hover {
  744. -webkit-transform: translateY(-3px);
  745. -ms-transform: translateY(-3px);
  746. transform: translateY(-3px);
  747. -webkit-box-shadow: 0 5px 8px #1a1a21;
  748. box-shadow: 0 5px 8px #1a1a21; }
  749.  
  750. .tagHide, .searchHide {
  751. display: none !important; }
  752.  
  753. #developerContainer {
  754. display: -ms-grid;
  755. display: grid;
  756. -ms-grid-columns: (1fr)[9];
  757. grid-template-columns: repeat(9, 1fr);
  758. grid-gap: 10px;
  759. padding: 15px 10px;
  760. -webkit-box-sizing: border-box;
  761. box-sizing: border-box; }
  762. #developerContainer a {
  763. display: block;
  764. background: #282831;
  765. overflow: hidden;
  766. color: #fff;
  767. text-decoration: none;
  768. border-radius: 3px;
  769. -webkit-transition: 0.1s ease;
  770. -o-transition: 0.1s ease;
  771. transition: 0.1s ease; }
  772. #developerContainer a img {
  773. width: 100%;
  774. display: block;
  775. max-height: 256px;
  776. max-width: 256px; }
  777. #developerContainer a .body {
  778. padding: 20px;
  779. -webkit-box-sizing: border-box;
  780. box-sizing: border-box; }
  781. #developerContainer a .body h3 {
  782. margin: 0;
  783. font-weight: 400; }
  784. #developerContainer a:hover {
  785. -webkit-transform: translateY(-3px);
  786. -ms-transform: translateY(-3px);
  787. transform: translateY(-3px);
  788. -webkit-box-shadow: 0 5px 5px #1a1a21;
  789. box-shadow: 0 5px 5px #1a1a21; }
  790.  
  791. .ohNo {
  792. text-align: center;
  793. margin: 50px 0; }
  794. .ohNo i {
  795. font-size: 52px; }
  796. .ohNo small {
  797. opacity: .5; }
  798.  
  799. #item #infoContainer {
  800. max-width: 980px;
  801. width: 100%;
  802. margin: 0 auto;
  803. padding: 35px 0; }
  804.  
  805. #item header {
  806. display: -webkit-box;
  807. display: -ms-flexbox;
  808. display: flex;
  809. -webkit-box-align: start;
  810. -ms-flex-align: start;
  811. align-items: flex-start;
  812. -webkit-box-sizing: border-box;
  813. box-sizing: border-box; }
  814.  
  815. #item .headerLeft {
  816. -webkit-box-flex: 1;
  817. -ms-flex: 1;
  818. flex: 1; }
  819. #item .headerLeft h1 {
  820. font-weight: 400;
  821. margin: 0; }
  822. #item .headerLeft .info {
  823. display: -webkit-box;
  824. display: -ms-flexbox;
  825. display: flex;
  826. -webkit-box-align: center;
  827. -ms-flex-align: center;
  828. align-items: center;
  829. color: #ccc; }
  830. #item .headerLeft small {
  831. margin-left: 10px;
  832. display: -webkit-box;
  833. display: -ms-flexbox;
  834. display: flex;
  835. -webkit-box-align: center;
  836. -ms-flex-align: center;
  837. align-items: center;
  838. opacity: .7; }
  839. #item .headerLeft small:before {
  840. content: "";
  841. width: 10px;
  842. margin-right: 10px;
  843. height: 1px;
  844. background: #ccc;
  845. display: inline-block; }
  846. #item .headerLeft .authors {
  847. display: -webkit-box;
  848. display: -ms-flexbox;
  849. display: flex;
  850. -webkit-box-align: center;
  851. -ms-flex-align: center;
  852. align-items: center; }
  853. #item .headerLeft .authors h3 {
  854. margin: 0 0 0 5px;
  855. display: -webkit-box;
  856. display: -ms-flexbox;
  857. display: flex;
  858. -webkit-box-align: center;
  859. -ms-flex-align: center;
  860. align-items: center;
  861. font-weight: 400; }
  862. #item .headerLeft .authors h3:not(:first-of-type):before {
  863. content: "&";
  864. display: inline-block;
  865. font-size: 14px;
  866. font-weight: 400;
  867. margin-right: 5px;
  868. -webkit-user-select: none;
  869. -moz-user-select: none;
  870. -ms-user-select: none;
  871. user-select: none;
  872. pointer-events: none; }
  873. #item .headerLeft .authors a {
  874. text-decoration: none;
  875. color: #ccc;
  876. -webkit-box-shadow: inset 0 -1px 0 #ccc;
  877. box-shadow: inset 0 -1px 0 #ccc;
  878. -webkit-transition: 0.1s ease;
  879. -o-transition: 0.1s ease;
  880. transition: 0.1s ease; }
  881. #item .headerLeft .authors a:hover {
  882. color: #fff;
  883. -webkit-box-shadow: inset 0 -2px 0 #fff;
  884. box-shadow: inset 0 -2px 0 #fff; }
  885.  
  886. #item .headerRight {
  887. display: -webkit-box;
  888. display: -ms-flexbox;
  889. display: flex;
  890. -webkit-box-align: start;
  891. -ms-flex-align: start;
  892. align-items: flex-start; }
  893. #item .headerRight a, #item .headerRight button {
  894. margin-left: 10px;
  895. display: block;
  896. padding: 15px 20px;
  897. border-radius: 3px;
  898. border: none;
  899. cursor: pointer;
  900. text-decoration: none;
  901. color: #fff;
  902. -webkit-transition: 0.1s ease;
  903. -o-transition: 0.1s ease;
  904. transition: 0.1s ease; }
  905. #item .headerRight a i, #item .headerRight button i {
  906. padding-right: 10px; }
  907. #item .headerRight a.other:hover, #item .headerRight button.other:hover {
  908. background: #2f2f3a; }
  909. #item .headerRight a.download, #item .headerRight button.download {
  910. background: #3c3c4b; }
  911. #item .headerRight a.required, #item .headerRight button.required {
  912. color: #f44336;
  913. background: transparent; }
  914. #item .headerRight a.required:hover, #item .headerRight button.required:hover {
  915. background: #36242a; }
  916.  
  917. #item .desc {
  918. margin: 10px 0 0 0; }
  919. #item .desc p {
  920. margin: 0; }
  921.  
  922. .dropContainer {
  923. position: relative; }
  924. .dropContainer .dropDown {
  925. background: #3c3c4b;
  926. position: absolute;
  927. top: calc(100% + 15px);
  928. right: 0;
  929. padding: 10px;
  930. -webkit-box-sizing: border-box;
  931. box-sizing: border-box;
  932. z-index: 9;
  933. overflow: hidden;
  934. border-radius: 3px;
  935. -webkit-box-shadow: 0 5px 5px #1a1a21;
  936. box-shadow: 0 5px 5px #1a1a21;
  937. width: 300px;
  938. -webkit-transform: scale(0.8, 0.8);
  939. -ms-transform: scale(0.8, 0.8);
  940. transform: scale(0.8, 0.8);
  941. -webkit-transform-origin: top right;
  942. -ms-transform-origin: top right;
  943. transform-origin: top right;
  944. -webkit-transition: 0.2s ease;
  945. -o-transition: 0.2s ease;
  946. transition: 0.2s ease;
  947. opacity: 0;
  948. visibility: hidden; }
  949. .dropContainer .dropDown a {
  950. background: transparent !important;
  951. margin-left: 0 !important;
  952. border-radius: 0 !important; }
  953. .dropContainer .dropDown a:first-child {
  954. border-radius: 3px 3px 0 0 !important; }
  955. .dropContainer .dropDown a:last-child {
  956. border-radius: 0 0 3px 3px !important; }
  957. .dropContainer .dropDown a:hover {
  958. background: #2f2f3a !important; }
  959. .dropContainer .dropDown.toggle {
  960. -webkit-transform: scale(1, 1);
  961. -ms-transform: scale(1, 1);
  962. transform: scale(1, 1);
  963. opacity: 1;
  964. visibility: visible; }
  965. .dropContainer .dropDown.required {
  966. -webkit-transform-origin: top left;
  967. -ms-transform-origin: top left;
  968. transform-origin: top left;
  969. right: unset;
  970. left: 10px;
  971. width: 350px; }
  972. .dropContainer .dropDown.required header h3 {
  973. margin: 0 0 10px 0;
  974. font-weight: 400; }
  975. .dropContainer .dropDown.required .body p {
  976. margin: 10px 0 0 0; }
  977.  
  978. #slider {
  979. margin: 0 0 50px 0;
  980. padding: 0;
  981. position: relative;
  982. overflow: hidden;
  983. background: #1a1a21; }
  984. #slider img {
  985. display: block;
  986. max-width: 100%;
  987. max-height: 100%; }
  988.  
  989. .slick-track {
  990. display: -webkit-box;
  991. display: -ms-flexbox;
  992. display: flex; }
  993.  
  994. .slick-disabled {
  995. -webkit-transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  996. -o-transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  997. transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); }
  998.  
  999. .slick-prev {
  1000. left: 0;
  1001. background: -webkit-gradient(linear, left top, right top, color-stop(10%, #212129), to(transparent)) !important;
  1002. background: -webkit-linear-gradient(left, #212129 10%, transparent) !important;
  1003. background: -o-linear-gradient(left, #212129 10%, transparent) !important;
  1004. background: linear-gradient(90deg, #212129 10%, transparent) !important;
  1005. -webkit-transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  1006. -o-transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  1007. transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); }
  1008.  
  1009. .slick-next {
  1010. right: 0;
  1011. background: -webkit-gradient(linear, right top, left top, color-stop(10%, #212129), to(transparent)) !important;
  1012. background: -webkit-linear-gradient(right, #212129 10%, transparent) !important;
  1013. background: -o-linear-gradient(right, #212129 10%, transparent) !important;
  1014. background: linear-gradient(-90deg, #212129 10%, transparent) !important;
  1015. -webkit-transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  1016. -o-transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  1017. transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); }
  1018.  
  1019. .slick-slide {
  1020. width: 980px;
  1021. height: 551px;
  1022. -webkit-transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  1023. -o-transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  1024. transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  1025. float: unset;
  1026. background: #1a1a21;
  1027. margin: 0 10px; }
  1028. .slick-slide > div {
  1029. height: 100%; }
  1030. .slick-slide:not(.slick-center) {
  1031. opacity: .3;
  1032. -webkit-filter: grayscale(1);
  1033. filter: grayscale(1); }
  1034. .slick-slide:not(.slick-current) a {
  1035. visibility: hidden; }
  1036. .slick-slide.slick-current .overlay {
  1037. opacity: 1;
  1038. -webkit-transition-delay: .4s;
  1039. -o-transition-delay: .4s;
  1040. transition-delay: .4s; }
  1041.  
  1042. .slick-arrow {
  1043. top: 0;
  1044. -webkit-transform: unset;
  1045. -ms-transform: unset;
  1046. transform: unset;
  1047. height: 100%;
  1048. position: absolute;
  1049. z-index: 5;
  1050. width: 200px;
  1051. -webkit-transition: 3s cubic-bezier(0.65, 0.05, 0.36, 1);
  1052. -o-transition: 3s cubic-bezier(0.65, 0.05, 0.36, 1);
  1053. transition: 3s cubic-bezier(0.65, 0.05, 0.36, 1); }
  1054. .slick-arrow:before {
  1055. -webkit-transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  1056. -o-transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  1057. transition: 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); }
  1058. .slick-arrow.slick-disabled {
  1059. background: transparent !important; }
  1060. .slick-arrow.slick-disabled:before {
  1061. opacity: 0; }
  1062.  
  1063. .imgContainer {
  1064. display: -webkit-box !important;
  1065. display: -ms-flexbox !important;
  1066. display: flex !important;
  1067. -webkit-box-align: center;
  1068. -ms-flex-align: center;
  1069. align-items: center;
  1070. -webkit-box-pack: center;
  1071. -ms-flex-pack: center;
  1072. justify-content: center;
  1073. height: 100%;
  1074. position: relative; }
  1075. .imgContainer .overlay {
  1076. position: absolute;
  1077. background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#1a1a21));
  1078. background: -webkit-linear-gradient(transparent, #1a1a21);
  1079. background: -o-linear-gradient(transparent, #1a1a21);
  1080. background: linear-gradient(transparent, #1a1a21);
  1081. left: 0;
  1082. width: 100%;
  1083. bottom: 0;
  1084. display: -webkit-box;
  1085. display: -ms-flexbox;
  1086. display: flex;
  1087. opacity: 0;
  1088. padding: 15px;
  1089. -webkit-box-sizing: border-box;
  1090. box-sizing: border-box;
  1091. -webkit-transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  1092. -o-transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  1093. transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  1094. -webkit-transition-delay: 0s;
  1095. -o-transition-delay: 0s;
  1096. transition-delay: 0s; }
  1097. .imgContainer .overlay .left {
  1098. -webkit-box-flex: 1;
  1099. -ms-flex: 1;
  1100. flex: 1;
  1101. display: -webkit-box;
  1102. display: -ms-flexbox;
  1103. display: flex;
  1104. -webkit-box-orient: vertical;
  1105. -webkit-box-direction: normal;
  1106. -ms-flex-direction: column;
  1107. flex-direction: column;
  1108. -webkit-box-pack: center;
  1109. -ms-flex-pack: center;
  1110. justify-content: center;
  1111. text-shadow: 0 2px 3px #000, 0 2px 5px #000; }
  1112. .imgContainer .overlay .left p {
  1113. margin: 0;
  1114. color: #fff; }
  1115. .imgContainer .overlay .left p:empty {
  1116. display: none; }
  1117. .imgContainer .overlay .right {
  1118. display: -webkit-box;
  1119. display: -ms-flexbox;
  1120. display: flex;
  1121. -webkit-box-align: center;
  1122. -ms-flex-align: center;
  1123. align-items: center; }
  1124. .imgContainer .overlay .right a {
  1125. display: block;
  1126. padding: 10px 15px;
  1127. -webkit-box-sizing: border-box;
  1128. box-sizing: border-box;
  1129. color: #fff;
  1130. text-decoration: none;
  1131. text-shadow: 0 2px 3px #000, 0 2px 5px #000;
  1132. -webkit-transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  1133. -o-transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  1134. transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1); }
  1135. .imgContainer .overlay .right a i {
  1136. padding-right: 5px; }
  1137.  
  1138. #reviewsContainer {
  1139. max-width: 980px;
  1140. width: 100%;
  1141. margin: 0 auto 50px; }
  1142. #reviewsContainer > header {
  1143. padding-bottom: 10px;
  1144. margin-bottom: 10px;
  1145. border-bottom: 1px solid #2f2f3a;
  1146. display: -webkit-box;
  1147. display: -ms-flexbox;
  1148. display: flex;
  1149. -webkit-box-align: center;
  1150. -ms-flex-align: center;
  1151. align-items: center; }
  1152. #reviewsContainer > header h2 {
  1153. margin: 0;
  1154. font-weight: 400;
  1155. -webkit-box-flex: 1;
  1156. -ms-flex: 1;
  1157. flex: 1; }
  1158. #reviewsContainer > header .counters {
  1159. display: -webkit-box;
  1160. display: -ms-flexbox;
  1161. display: flex;
  1162. -webkit-box-align: center;
  1163. -ms-flex-align: center;
  1164. align-items: center; }
  1165. #reviewsContainer > header .counters .vote {
  1166. background: transparent;
  1167. border-radius: 3px;
  1168. margin-left: 5px;
  1169. padding: 5px 8px;
  1170. -webkit-box-sizing: border-box;
  1171. box-sizing: border-box;
  1172. min-width: 52px;
  1173. border: none; }
  1174. #reviewsContainer > header .counters .vote i {
  1175. font-size: 14px;
  1176. padding-right: 5px; }
  1177. #reviewsContainer > header .counters .vote.upvote {
  1178. color: #4CAF50; }
  1179. #reviewsContainer > header .counters .vote.upvote:hover {
  1180. background: #252f2d; }
  1181. #reviewsContainer > header .counters .vote.downvote {
  1182. color: #f44336; }
  1183. #reviewsContainer > header .counters .vote.downvote:hover {
  1184. background: #36242a; }
  1185. #reviewsContainer > header .counters .vote.views:hover {
  1186. background: rgba(255, 255, 255, 0.1); }
  1187. #reviewsContainer .inputContainer {
  1188. padding: 15px 0 30px 0;
  1189. margin: 15px 0 0 0;
  1190. border-bottom: 1px solid #2f2f3a; }
  1191. #reviewsContainer .inputContainer p {
  1192. margin: 0; }
  1193. #reviewsContainer .inputContainer p a {
  1194. color: #2196F3;
  1195. text-decoration: none; }
  1196. #reviewsContainer .inputContainer form {
  1197. display: -webkit-box;
  1198. display: -ms-flexbox;
  1199. display: flex;
  1200. width: 100%; }
  1201. #reviewsContainer .inputContainer form .votes {
  1202. display: -ms-grid;
  1203. display: grid;
  1204. -ms-grid-rows: 42px 42px;
  1205. grid-template-rows: 42px 42px;
  1206. grid-gap: 5px;
  1207. margin-right: 15px; }
  1208. #reviewsContainer .inputContainer form .votes .voteBtn {
  1209. background: transparent;
  1210. border: none;
  1211. display: -webkit-box;
  1212. display: -ms-flexbox;
  1213. display: flex;
  1214. -webkit-box-align: center;
  1215. -ms-flex-align: center;
  1216. align-items: center;
  1217. -webkit-box-pack: center;
  1218. -ms-flex-pack: center;
  1219. justify-content: center;
  1220. width: 42px;
  1221. height: 42px;
  1222. position: relative;
  1223. border-radius: 50%;
  1224. padding: 0;
  1225. cursor: pointer;
  1226. -webkit-transition: 0.2s ease;
  1227. -o-transition: 0.2s ease;
  1228. transition: 0.2s ease; }
  1229. #reviewsContainer .inputContainer form .votes .voteBtn:before {
  1230. content: "";
  1231. position: absolute;
  1232. top: 0;
  1233. left: 0;
  1234. width: 100%;
  1235. height: 100%;
  1236. border-radius: 3px;
  1237. -webkit-transform: scale(0.5, 0.5);
  1238. -ms-transform: scale(0.5, 0.5);
  1239. transform: scale(0.5, 0.5);
  1240. opacity: 0;
  1241. background: #3c3c4b;
  1242. -webkit-transition: 0.2s ease;
  1243. -o-transition: 0.2s ease;
  1244. transition: 0.2s ease; }
  1245. #reviewsContainer .inputContainer form .votes .voteBtn i {
  1246. color: #fff;
  1247. z-index: 1;
  1248. font-size: 16px;
  1249. -webkit-transition: 0.2s ease;
  1250. -o-transition: 0.2s ease;
  1251. transition: 0.2s ease; }
  1252. #reviewsContainer .inputContainer form .votes .voteBtn.selected:before {
  1253. -webkit-transform: scale(1, 1);
  1254. -ms-transform: scale(1, 1);
  1255. transform: scale(1, 1);
  1256. opacity: 1; }
  1257. #reviewsContainer .inputContainer form .votes .voteBtn.selected i.fa-thumbs-up {
  1258. color: #4CAF50; }
  1259. #reviewsContainer .inputContainer form .votes .voteBtn.selected i.fa-thumbs-down {
  1260. color: #f44336; }
  1261. #reviewsContainer .inputContainer form .input {
  1262. -webkit-box-flex: 1;
  1263. -ms-flex: 1;
  1264. flex: 1;
  1265. display: -webkit-box;
  1266. display: -ms-flexbox;
  1267. display: flex;
  1268. -webkit-box-orient: vertical;
  1269. -webkit-box-direction: normal;
  1270. -ms-flex-direction: column;
  1271. flex-direction: column;
  1272. -webkit-box-align: end;
  1273. -ms-flex-align: end;
  1274. align-items: flex-end; }
  1275. #reviewsContainer .inputContainer form .input textarea {
  1276. width: 100%;
  1277. background: #3c3c4b;
  1278. border-radius: 3px;
  1279. color: #fff;
  1280. border: none;
  1281. height: 89px;
  1282. padding: 10px;
  1283. -webkit-box-sizing: border-box;
  1284. box-sizing: border-box;
  1285. resize: vertical;
  1286. -webkit-transition: 0.1s ease;
  1287. -o-transition: 0.1s ease;
  1288. transition: 0.1s ease; }
  1289. #reviewsContainer .inputContainer form .input textarea:focus {
  1290. background: #4a4a5c; }
  1291. #reviewsContainer .inputContainer form .input button {
  1292. margin-top: 10px;
  1293. display: block;
  1294. background: #3c3c4b;
  1295. border-radius: 3px;
  1296. border: none;
  1297. padding: 10px;
  1298. -webkit-box-sizing: border-box;
  1299. box-sizing: border-box;
  1300. color: #fff;
  1301. cursor: pointer;
  1302. -webkit-transition: 0.1s ease;
  1303. -o-transition: 0.1s ease;
  1304. transition: 0.1s ease; }
  1305. #reviewsContainer .inputContainer form .input button i {
  1306. padding-right: 10px; }
  1307. #reviewsContainer .inputContainer form .input button:hover {
  1308. background: #4a4a5c; }
  1309. #reviewsContainer .reviews {
  1310. display: -ms-grid;
  1311. display: grid;
  1312. -ms-grid-columns: (1fr)[2];
  1313. grid-template-columns: repeat(2, 1fr);
  1314. grid-gap: 15px;
  1315. margin-top: 15px; }
  1316. #reviewsContainer .reviews .review {
  1317. padding: 15px;
  1318. -webkit-box-sizing: border-box;
  1319. box-sizing: border-box;
  1320. background: #1a1a21;
  1321. border-radius: 3px; }
  1322. #reviewsContainer .reviews .review header {
  1323. display: -webkit-box;
  1324. display: -ms-flexbox;
  1325. display: flex;
  1326. -webkit-box-align: center;
  1327. -ms-flex-align: center;
  1328. align-items: center; }
  1329. #reviewsContainer .reviews .review header .vote {
  1330. margin-right: 15px; }
  1331. #reviewsContainer .reviews .review header .vote i {
  1332. font-size: 24px; }
  1333. #reviewsContainer .reviews .review header .vote i.fa-thumbs-up {
  1334. color: #4CAF50; }
  1335. #reviewsContainer .reviews .review header .vote i.fa-thumbs-down {
  1336. color: #f44336; }
  1337. #reviewsContainer .reviews .review header .avatar {
  1338. margin-right: 10px; }
  1339. #reviewsContainer .reviews .review header .avatar img {
  1340. display: block;
  1341. width: 42px;
  1342. height: 42px;
  1343. border-radius: 3px;
  1344. background: #282831; }
  1345. #reviewsContainer .reviews .review header .info .user {
  1346. display: -webkit-box;
  1347. display: -ms-flexbox;
  1348. display: flex;
  1349. -webkit-box-align: center;
  1350. -ms-flex-align: center;
  1351. align-items: center; }
  1352. #reviewsContainer .reviews .review header .info .user p {
  1353. margin: 0 10px 0 0; }
  1354. #reviewsContainer .reviews .review header .info .user img {
  1355. display: block;
  1356. width: 18px; }
  1357. #reviewsContainer .reviews .review header .info small {
  1358. opacity: .5; }
  1359. #reviewsContainer .reviews .review .message {
  1360. margin: 10px 0 0 38px; }
  1361. #reviewsContainer .reviews .review .message p {
  1362. margin: 0; }
  1363. #reviewsContainer .reviews .review:last-child {
  1364. border-bottom: 0; }
  1365.  
  1366. #profile .headerRight {
  1367. display: -webkit-box;
  1368. display: -ms-flexbox;
  1369. display: flex;
  1370. -webkit-box-align: center;
  1371. -ms-flex-align: center;
  1372. align-items: center; }
  1373. #profile .headerRight .devSearchContainer {
  1374. width: 250px;
  1375. position: relative;
  1376. margin-left: 15px; }
  1377. #profile .headerRight .devSearchContainer i {
  1378. position: absolute;
  1379. left: 15px;
  1380. font-size: 14px;
  1381. top: 50%;
  1382. -webkit-transform: translateY(-50%);
  1383. -ms-transform: translateY(-50%);
  1384. transform: translateY(-50%);
  1385. opacity: .5;
  1386. -webkit-transition: 0.2s ease;
  1387. -o-transition: 0.2s ease;
  1388. transition: 0.2s ease;
  1389. -webkit-user-select: none;
  1390. -moz-user-select: none;
  1391. -ms-user-select: none;
  1392. user-select: none;
  1393. pointer-events: none; }
  1394. #profile .headerRight .devSearch {
  1395. background: #2f2f3a;
  1396. padding: 8px 10px 8px 45px;
  1397. border: none;
  1398. color: #fff;
  1399. -webkit-box-sizing: border-box;
  1400. box-sizing: border-box;
  1401. border-radius: 3px;
  1402. width: 100%;
  1403. -webkit-transition: 0.2s ease;
  1404. -o-transition: 0.2s ease;
  1405. transition: 0.2s ease; }
  1406. #profile .headerRight .devSearch:focus {
  1407. background: #3c3c4b; }
  1408. #profile .headerRight .devSearch:focus ~ i {
  1409. opacity: 1; }
  1410.  
  1411. #login {
  1412. height: calc(100vh - 58.4px);
  1413. -webkit-box-sizing: border-box;
  1414. box-sizing: border-box;
  1415. padding-top: 50px;
  1416. display: -webkit-box;
  1417. display: -ms-flexbox;
  1418. display: flex;
  1419. -webkit-box-pack: start;
  1420. -ms-flex-pack: start;
  1421. justify-content: flex-start;
  1422. margin-top: 58.4px;
  1423. -webkit-box-align: center;
  1424. -ms-flex-align: center;
  1425. align-items: center;
  1426. -webkit-box-orient: vertical;
  1427. -webkit-box-direction: normal;
  1428. -ms-flex-direction: column;
  1429. flex-direction: column; }
  1430. #login form {
  1431. background: #282831;
  1432. padding: 15px;
  1433. -webkit-box-sizing: border-box;
  1434. box-sizing: border-box;
  1435. width: 300px;
  1436. border-radius: 3px;
  1437. -webkit-box-shadow: 0 5px 5px #1a1a21;
  1438. box-shadow: 0 5px 5px #1a1a21; }
  1439. #login form h2 {
  1440. margin: 0 0 15px;
  1441. font-weight: 400;
  1442. text-align: center; }
  1443. #login form input, #login form button {
  1444. display: block;
  1445. width: 100%;
  1446. background: #3c3c4b;
  1447. border: none;
  1448. color: #fff;
  1449. padding: 15px;
  1450. -webkit-box-sizing: border-box;
  1451. box-sizing: border-box;
  1452. border-radius: 3px;
  1453. margin-bottom: 15px; }
  1454. #login form button {
  1455. cursor: pointer;
  1456. margin-bottom: 0; }
  1457. #login form button:hover {
  1458. background: #4a4a5c; }
  1459. #login p {
  1460. width: 300px;
  1461. text-align: center; }
  1462.  
  1463. #dashboard {
  1464. display: -ms-grid;
  1465. display: grid;
  1466. -ms-grid-columns: 1fr 276px;
  1467. grid-template-columns: 1fr 276px;
  1468. grid-gap: 15px;
  1469. max-width: 1280px;
  1470. margin: 0 auto;
  1471. padding: 50px 0 100px 0;
  1472. -webkit-box-align: start;
  1473. -ms-flex-align: start;
  1474. align-items: flex-start; }
  1475. #dashboard .hide {
  1476. font-size: 14px;
  1477. cursor: pointer;
  1478. background: #3c3c4b;
  1479. border-radius: 3px;
  1480. margin-left: 15px;
  1481. padding: 5px;
  1482. -webkit-box-sizing: border-box;
  1483. box-sizing: border-box; }
  1484. #dashboard #editPanel {
  1485. margin-top: 35px; }
  1486. #dashboard .left .panel {
  1487. background: #282831;
  1488. border-radius: 3px;
  1489. padding: 15px;
  1490. -webkit-box-sizing: border-box;
  1491. box-sizing: border-box;
  1492. -webkit-box-shadow: 0 5px 5px #1a1a21;
  1493. box-shadow: 0 5px 5px #1a1a21;
  1494. margin-bottom: 20px; }
  1495. #dashboard .left .panel > header {
  1496. padding-bottom: 10px;
  1497. margin-bottom: 10px;
  1498. border-bottom: 1px solid #434353;
  1499. display: -webkit-box;
  1500. display: -ms-flexbox;
  1501. display: flex;
  1502. -webkit-box-align: center;
  1503. -ms-flex-align: center;
  1504. align-items: center; }
  1505. #dashboard .left .panel > header span[data-balloon] {
  1506. margin-left: 15px; }
  1507. #dashboard .left .panel > header h2 {
  1508. display: -webkit-box;
  1509. display: -ms-flexbox;
  1510. display: flex;
  1511. -webkit-box-align: center;
  1512. -ms-flex-align: center;
  1513. align-items: center;
  1514. margin: 0;
  1515. font-weight: 400; }
  1516. #dashboard .left .panel > header .themeUpdated {
  1517. background: #4CAF50;
  1518. padding: 3px 10px;
  1519. -webkit-box-sizing: border-box;
  1520. box-sizing: border-box;
  1521. border-radius: 3px;
  1522. margin-left: 15px; }
  1523. #dashboard .left .panel .row {
  1524. display: -ms-grid;
  1525. display: grid;
  1526. -ms-grid-columns: (1fr)[4];
  1527. grid-template-columns: repeat(4, 1fr);
  1528. grid-gap: 30px 10px;
  1529. padding: 20px 0; }
  1530. #dashboard .left .panel .row .head {
  1531. padding-bottom: 10px;
  1532. display: -webkit-box;
  1533. display: -ms-flexbox;
  1534. display: flex;
  1535. -webkit-box-align: center;
  1536. -ms-flex-align: center;
  1537. align-items: center; }
  1538. #dashboard .left .panel .row .head i {
  1539. font-size: 24px; }
  1540. #dashboard .left .panel .row .head span {
  1541. padding-left: 10px; }
  1542. #dashboard .left .panel .row .body input {
  1543. width: 100%;
  1544. -webkit-box-sizing: border-box;
  1545. box-sizing: border-box;
  1546. padding: 10px;
  1547. color: #fff;
  1548. border: none;
  1549. background: #3c3c4b; }
  1550. #dashboard .left .panel .row .body.multiInput input:first-child {
  1551. border-radius: 3px 3px 0 0; }
  1552. #dashboard .left .panel .row .body.multiInput input:last-child {
  1553. border-radius: 0 0 3px 3px; }
  1554. #dashboard .left .panel .row .body:not(.multiInput) input {
  1555. border-radius: 3px; }
  1556. #dashboard .left .panel .hideTarget > footer {
  1557. text-align: right;
  1558. border-top: 1px solid #3c3c4b;
  1559. padding: 10px 0; }
  1560. #dashboard .left .panel .hideTarget > footer button {
  1561. background: #4CAF50;
  1562. border: none;
  1563. border-radius: 3px;
  1564. color: #fff;
  1565. padding: 10px 20px;
  1566. cursor: pointer;
  1567. -webkit-transition: 0.2s ease;
  1568. -o-transition: 0.2s ease;
  1569. transition: 0.2s ease; }
  1570. #dashboard .left .panel .hideTarget > footer button i {
  1571. padding-right: 10px; }
  1572. #dashboard .left .panel .hideTarget > footer button:hover {
  1573. background: #3d8b40; }
  1574. #dashboard .left .panel:last-child {
  1575. margin-bottom: 0; }
  1576. #dashboard footer {
  1577. text-align: center;
  1578. padding: 10px;
  1579. -webkit-box-sizing: border-box;
  1580. box-sizing: border-box;
  1581. border-radius: 3px;
  1582. margin-top: 10px;
  1583. color: #fff; }
  1584. #dashboard footer p {
  1585. margin: 0; }
  1586. #dashboard footer.error {
  1587. background: #f44336; }
  1588. #dashboard footer.success {
  1589. background: #4CAF50; }
  1590. #dashboard .right .panel {
  1591. background: #282831;
  1592. padding: 10px;
  1593. -webkit-box-shadow: 0 5px 5px #1a1a21;
  1594. box-shadow: 0 5px 5px #1a1a21;
  1595. margin-bottom: 15px;
  1596. border-radius: 3px; }
  1597. #dashboard .right .panel:last-child {
  1598. margin-bottom: 0; }
  1599. #dashboard .right form .socialDiv {
  1600. margin-bottom: 15px;
  1601. position: relative; }
  1602. #dashboard .right form .socialDiv i {
  1603. position: absolute;
  1604. top: 50%;
  1605. -webkit-transform: translateY(-50%);
  1606. -ms-transform: translateY(-50%);
  1607. transform: translateY(-50%);
  1608. left: 15px; }
  1609. #dashboard .right form .socialDiv input {
  1610. background: #3c3c4b;
  1611. border: none;
  1612. color: #fff;
  1613. border-radius: 3px;
  1614. width: 100%;
  1615. -webkit-box-sizing: border-box;
  1616. box-sizing: border-box;
  1617. padding: 10px;
  1618. text-indent: 42px; }
  1619. #dashboard .right form .socialDiv:last-child {
  1620. margin-bottom: 0; }
  1621. #dashboard .right .changePass input, #dashboard .right .changePass button {
  1622. background: #3c3c4b;
  1623. border: none;
  1624. color: #fff;
  1625. padding: 10px;
  1626. -webkit-box-sizing: border-box;
  1627. box-sizing: border-box;
  1628. width: 100%;
  1629. margin-bottom: 10px;
  1630. border-radius: 3px; }
  1631. #dashboard .right .changePass button {
  1632. cursor: pointer;
  1633. margin-bottom: 0; }
  1634. #dashboard .right .changePass button:hover {
  1635. background: #434353; }
  1636. #dashboard .right .changePass footer {
  1637. margin-top: 10px; }
  1638. #dashboard .right .deleteAcc > button {
  1639. background: #f44336;
  1640. color: #fff;
  1641. border: none;
  1642. cursor: pointer;
  1643. padding: 10px 0;
  1644. width: 100%;
  1645. -webkit-box-sizing: border-box;
  1646. box-sizing: border-box;
  1647. border-radius: 3px;
  1648. -webkit-transition: 0.2s ease;
  1649. -o-transition: 0.2s ease;
  1650. transition: 0.2s ease; }
  1651. #dashboard .right .deleteAcc > button i {
  1652. padding-right: 10px; }
  1653. #dashboard .right .deleteAcc > button:hover {
  1654. background: #bd413c; }
  1655. #dashboard .delOverlay {
  1656. position: fixed;
  1657. top: 0;
  1658. left: 0;
  1659. width: 100%;
  1660. height: 100%;
  1661. background: rgba(33, 33, 41, 0.95);
  1662. z-index: 20;
  1663. display: none; }
  1664. #dashboard .delModal {
  1665. display: none;
  1666. position: fixed;
  1667. max-width: 550px;
  1668. width: 100%;
  1669. top: 100px;
  1670. left: 50%;
  1671. -webkit-transform: translateX(-50%);
  1672. -ms-transform: translateX(-50%);
  1673. transform: translateX(-50%);
  1674. background: #282831;
  1675. border-radius: 3px;
  1676. -webkit-box-sizing: border-box;
  1677. box-sizing: border-box;
  1678. -webkit-box-shadow: 0 5px 5px #1a1a21;
  1679. box-shadow: 0 5px 5px #1a1a21;
  1680. z-index: 21; }
  1681. #dashboard .delModal header {
  1682. padding: 15px;
  1683. -webkit-box-sizing: border-box;
  1684. box-sizing: border-box;
  1685. border-bottom: 1px solid #3c3c4b; }
  1686. #dashboard .delModal header h1 {
  1687. margin: 0;
  1688. font-weight: 400; }
  1689. #dashboard .delModal .body {
  1690. padding: 15px;
  1691. -webkit-box-sizing: border-box;
  1692. box-sizing: border-box; }
  1693. #dashboard .delModal .body p {
  1694. margin-top: 0; }
  1695. #dashboard .delModal .body p b {
  1696. text-decoration: underline; }
  1697. #dashboard .delModal .body > ul {
  1698. margin-bottom: 0;
  1699. padding-left: 15px; }
  1700. #dashboard .delModal footer {
  1701. margin-top: 0;
  1702. padding: 15px;
  1703. -webkit-box-sizing: border-box;
  1704. box-sizing: border-box;
  1705. border-top: 1px solid #3c3c4b;
  1706. display: -webkit-box;
  1707. display: -ms-flexbox;
  1708. display: flex;
  1709. margin-top: 0;
  1710. -webkit-box-pack: end;
  1711. -ms-flex-pack: end;
  1712. justify-content: flex-end;
  1713. border-radius: 0; }
  1714. #dashboard .delModal footer button {
  1715. padding: 10px 15px;
  1716. -webkit-box-sizing: border-box;
  1717. box-sizing: border-box;
  1718. border-radius: 3px;
  1719. border: none;
  1720. color: #fff;
  1721. margin-left: 15px;
  1722. cursor: pointer;
  1723. -webkit-transition: 0.1s ease;
  1724. -o-transition: 0.1s ease;
  1725. transition: 0.1s ease; }
  1726. #dashboard .delModal footer button i {
  1727. padding-right: 10px; }
  1728. #dashboard .delModal footer button.yes {
  1729. background: #4CAF50; }
  1730. #dashboard .delModal footer button.yes:hover {
  1731. background: #3d8b40; }
  1732. #dashboard .delModal footer button.no {
  1733. background: #f44336; }
  1734. #dashboard .delModal footer button.no:hover {
  1735. background: #bd413c; }
  1736.  
  1737. #delNotify {
  1738. position: fixed;
  1739. top: 65px;
  1740. padding: 10px;
  1741. -webkit-box-sizing: border-box;
  1742. box-sizing: border-box;
  1743. border-radius: 3px;
  1744. left: 50%;
  1745. -webkit-transform: translateX(-50%);
  1746. -ms-transform: translateX(-50%);
  1747. transform: translateX(-50%);
  1748. z-index: 12;
  1749. text-align: center; }
  1750. #delNotify p {
  1751. color: #fff;
  1752. margin: 0; }
  1753. #delNotify.error {
  1754. background: #f44336; }
  1755. #delNotify.success {
  1756. background: #4CAF50; }
  1757.  
  1758. #profileImg .profileImgContainer {
  1759. width: 256px;
  1760. height: 256px;
  1761. display: -webkit-box;
  1762. display: -ms-flexbox;
  1763. display: flex;
  1764. -webkit-box-align: center;
  1765. -ms-flex-align: center;
  1766. align-items: center;
  1767. -webkit-box-pack: center;
  1768. -ms-flex-pack: center;
  1769. justify-content: center;
  1770. overflow: hidden;
  1771. background: #2f2f3a;
  1772. border-radius: 3px; }
  1773. #profileImg .profileImgContainer img {
  1774. display: block;
  1775. width: 256px;
  1776. height: 256px; }
  1777.  
  1778. #profileImg form {
  1779. margin-top: 10px;
  1780. display: -webkit-box;
  1781. display: -ms-flexbox;
  1782. display: flex;
  1783. -webkit-box-align: center;
  1784. -ms-flex-align: center;
  1785. align-items: center; }
  1786. #profileImg form label, #profileImg form button {
  1787. cursor: pointer;
  1788. background: #3c3c4b;
  1789. padding: 10px;
  1790. -webkit-box-sizing: border-box;
  1791. box-sizing: border-box;
  1792. border: none;
  1793. color: #fff;
  1794. -webkit-box-flex: 1;
  1795. -ms-flex: 1;
  1796. flex: 1;
  1797. display: block;
  1798. text-align: center;
  1799. -webkit-transition: 0.1s ease;
  1800. -o-transition: 0.1s ease;
  1801. transition: 0.1s ease; }
  1802. #profileImg form label i, #profileImg form button i {
  1803. padding-right: 10px; }
  1804. #profileImg form label:hover, #profileImg form button:hover {
  1805. background: #2f2f3a; }
  1806. #profileImg form label {
  1807. border-radius: 3px 0 0 3px; }
  1808. #profileImg form button {
  1809. border-radius: 0 3px 3px 0; }
  1810.  
  1811. .list {
  1812. display: block; }
  1813. .list.items .listItem {
  1814. display: -ms-grid;
  1815. display: grid;
  1816. -ms-grid-columns: 1fr 2fr 32px 32px 32px;
  1817. grid-template-columns: 1fr 2fr 32px 32px 32px;
  1818. grid-gap: 10px;
  1819. padding: 10px;
  1820. -webkit-box-align: center;
  1821. -ms-flex-align: center;
  1822. align-items: center;
  1823. -webkit-box-sizing: border-box;
  1824. box-sizing: border-box; }
  1825. .list.items .listItem:nth-child(even) {
  1826. background: #2f2f3a; }
  1827. .list.items .listItem p {
  1828. margin: 0; }
  1829. .list.items .listItem > a, .list.items .listItem > button {
  1830. display: -webkit-box;
  1831. display: -ms-flexbox;
  1832. display: flex;
  1833. -webkit-box-pack: center;
  1834. -ms-flex-pack: center;
  1835. justify-content: center;
  1836. -webkit-box-align: center;
  1837. -ms-flex-align: center;
  1838. align-items: center;
  1839. width: 32px;
  1840. height: 32px;
  1841. text-decoration: none;
  1842. color: #fff;
  1843. background: transparent;
  1844. border-radius: 3px;
  1845. cursor: pointer;
  1846. -webkit-transition: 0.1s ease;
  1847. -o-transition: 0.1s ease;
  1848. transition: 0.1s ease;
  1849. border: none; }
  1850. .list.items .listItem > a.viewBtn:hover, .list.items .listItem > button.viewBtn:hover {
  1851. background: #2f699f; }
  1852. .list.items .listItem > a.delBtn:hover, .list.items .listItem > button.delBtn:hover {
  1853. background: #984040; }
  1854. .list.items .listItem > a.editBtn:hover, .list.items .listItem > button.editBtn:hover {
  1855. background: #9e6a25; }
  1856. .list.reviews .listItem {
  1857. display: -ms-grid;
  1858. display: grid;
  1859. -ms-grid-columns: 1fr 2fr 32px 32px;
  1860. grid-template-columns: 1fr 2fr 32px 32px;
  1861. grid-gap: 10px;
  1862. padding: 10px 0;
  1863. -webkit-box-align: center;
  1864. -ms-flex-align: center;
  1865. align-items: center;
  1866. -webkit-box-sizing: border-box;
  1867. box-sizing: border-box;
  1868. border-bottom: 1px solid #212129; }
  1869. .list.reviews .listItem i {
  1870. height: 32px;
  1871. display: -webkit-box;
  1872. display: -ms-flexbox;
  1873. display: flex;
  1874. -webkit-box-align: center;
  1875. -ms-flex-align: center;
  1876. align-items: center;
  1877. -webkit-box-pack: center;
  1878. -ms-flex-pack: center;
  1879. justify-content: center; }
  1880. .list.reviews .listItem i.fa-thumbs-up {
  1881. color: #4CAF50; }
  1882. .list.reviews .listItem i.fa-thumbs-down {
  1883. color: #f44336; }
  1884. .list.reviews .listItem p {
  1885. margin: 0; }
  1886. .list.reviews .listItem:last-child {
  1887. border-bottom: none; }
  1888. .list.reviews .listItem a {
  1889. color: #fff;
  1890. height: 32px;
  1891. display: -webkit-box;
  1892. display: -ms-flexbox;
  1893. display: flex;
  1894. -webkit-box-align: center;
  1895. -ms-flex-align: center;
  1896. align-items: center;
  1897. -webkit-box-pack: center;
  1898. -ms-flex-pack: center;
  1899. justify-content: center;
  1900. text-decoration: none;
  1901. -webkit-transition: 0.1s ease;
  1902. -o-transition: 0.1s ease;
  1903. transition: 0.1s ease; }
  1904. .list.reviews .listItem a:hover {
  1905. background: #2f699f;
  1906. border-radius: 3px; }
  1907.  
  1908. #socials header {
  1909. display: -webkit-box;
  1910. display: -ms-flexbox;
  1911. display: flex;
  1912. -webkit-box-align: center;
  1913. -ms-flex-align: center;
  1914. align-items: center; }
  1915. #socials header h2 {
  1916. -webkit-box-flex: 0;
  1917. -ms-flex: 0;
  1918. flex: 0; }
  1919.  
  1920. #admin {
  1921. display: -ms-grid;
  1922. display: grid;
  1923. -ms-grid-columns: 245px 1fr;
  1924. grid-template-columns: 245px 1fr;
  1925. grid-gap: 10px;
  1926. -webkit-box-align: start;
  1927. -ms-flex-align: start;
  1928. align-items: flex-start;
  1929. max-width: 1280px;
  1930. width: 100%;
  1931. margin: 0 auto;
  1932. padding-top: 50px; }
  1933. #admin .forms input, #admin .forms button, #admin .forms select {
  1934. width: 100%;
  1935. padding: 10px;
  1936. -webkit-box-sizing: border-box;
  1937. box-sizing: border-box;
  1938. color: #fff;
  1939. border: none;
  1940. background: #3c3c4b;
  1941. border-radius: 3px;
  1942. margin-bottom: 10px; }
  1943. #admin .forms button {
  1944. margin-bottom: 0;
  1945. cursor: pointer; }
  1946. #admin .forms button:hover {
  1947. background: #4a4a5c; }
  1948. #admin .panel {
  1949. padding: 10px;
  1950. -webkit-box-sizing: border-box;
  1951. box-sizing: border-box;
  1952. background: #282831;
  1953. -webkit-box-shadow: 0 3px 5px #1a1a21;
  1954. box-shadow: 0 3px 5px #1a1a21;
  1955. border-radius: 3px;
  1956. margin-bottom: 15px; }
  1957. #admin .panel h2 {
  1958. margin: 0; }
  1959. #admin .panel:last-child {
  1960. margin-bottom: 0; }
  1961. #admin #editPanel {
  1962. margin: 0; }
  1963.  
  1964. #delete {
  1965. width: 500px;
  1966. margin: 0 auto;
  1967. padding-top: 50px;
  1968. text-align: center; }
  1969. #delete i {
  1970. font-size: 64px; }
  1971. #delete i.fa-check {
  1972. color: #4CAF50; }
  1973. #delete i.fa-times {
  1974. color: #f44336; }
  1975. #delete p {
  1976. margin: 35px 0; }
  1977. #delete a {
  1978. background: #2f2f3a;
  1979. color: #fff;
  1980. text-decoration: none;
  1981. display: inline-block;
  1982. padding: 15px 30px;
  1983. border-radius: 3px;
  1984. -webkit-transition: 0.2s ease;
  1985. -o-transition: 0.2s ease;
  1986. transition: 0.2s ease; }
  1987. #delete a:hover {
  1988. background: #3c3c4b; }
  1989.  
  1990. #addDev input, #addDev button {
  1991. display: block;
  1992. width: 100%;
  1993. background: #3c3c4b;
  1994. border: none;
  1995. color: #fff;
  1996. padding: 15px;
  1997. -webkit-box-sizing: border-box;
  1998. box-sizing: border-box;
  1999. border-radius: 3px;
  2000. margin-bottom: 15px; }
  2001.  
  2002. #addDev button {
  2003. cursor: pointer;
  2004. margin-bottom: 0; }
  2005.  
  2006. #editPanel {
  2007. max-width: 1280px;
  2008. margin: 120px auto 50px;
  2009. background: #282831;
  2010. border-radius: 3px;
  2011. padding: 15px;
  2012. -webkit-box-sizing: border-box;
  2013. box-sizing: border-box;
  2014. -webkit-box-shadow: 0 5px 5px #1a1a21;
  2015. box-shadow: 0 5px 5px #1a1a21;
  2016. margin-bottom: 20px; }
  2017. #editPanel header {
  2018. padding-bottom: 10px;
  2019. margin-bottom: 20px;
  2020. border-bottom: 1px solid #434353;
  2021. display: -webkit-box;
  2022. display: -ms-flexbox;
  2023. display: flex;
  2024. -webkit-box-align: center;
  2025. -ms-flex-align: center;
  2026. align-items: center;
  2027. position: relative; }
  2028. #editPanel header button {
  2029. position: absolute;
  2030. right: 0px;
  2031. background: #4CAF50;
  2032. cursor: pointer;
  2033. color: #fff;
  2034. border: none;
  2035. padding: 10px 25px;
  2036. border-radius: 3px;
  2037. -webkit-transition: 0.2s ease;
  2038. -o-transition: 0.2s ease;
  2039. transition: 0.2s ease; }
  2040. #editPanel header button:hover {
  2041. background: #449d48; }
  2042. #editPanel header h1 {
  2043. margin: 0;
  2044. font-weight: 400; }
  2045. #editPanel .row {
  2046. display: -ms-grid;
  2047. display: grid;
  2048. -ms-grid-columns: (1fr)[4];
  2049. grid-template-columns: repeat(4, 1fr);
  2050. grid-gap: 10px;
  2051. margin-bottom: 20px;
  2052. position: relative; }
  2053. #editPanel .row .column {
  2054. max-width: 305px; }
  2055. #editPanel .row .column .head {
  2056. display: -webkit-box;
  2057. display: -ms-flexbox;
  2058. display: flex;
  2059. -webkit-box-align: center;
  2060. -ms-flex-align: center;
  2061. align-items: center;
  2062. margin-bottom: 5px;
  2063. height: 24px; }
  2064. #editPanel .row .column .head p {
  2065. -webkit-box-flex: 1;
  2066. -ms-flex: 1;
  2067. flex: 1;
  2068. margin: 0;
  2069. display: -webkit-box;
  2070. display: -ms-flexbox;
  2071. display: flex;
  2072. -webkit-box-align: center;
  2073. -ms-flex-align: center;
  2074. align-items: center;
  2075. -webkit-user-select: none;
  2076. -moz-user-select: none;
  2077. -ms-user-select: none;
  2078. user-select: none;
  2079. text-transform: capitalize; }
  2080. #editPanel .row .column .head span {
  2081. font-size: 12px;
  2082. -webkit-user-select: none;
  2083. -moz-user-select: none;
  2084. -ms-user-select: none;
  2085. user-select: none; }
  2086. #editPanel .row .column .head span[data-balloon] {
  2087. cursor: pointer;
  2088. text-decoration: underline; }
  2089. #editPanel .row .column.onlyInput input {
  2090. background: #3c3c4b;
  2091. border-radius: 3px;
  2092. border: none;
  2093. color: #fff;
  2094. padding: 10px;
  2095. -webkit-box-sizing: border-box;
  2096. box-sizing: border-box;
  2097. width: 100%;
  2098. -webkit-transition: 0.1s ease;
  2099. -o-transition: 0.1s ease;
  2100. transition: 0.1s ease; }
  2101. #editPanel .row .column.multiInput {
  2102. position: relative; }
  2103. #editPanel .row .column.multiInput input {
  2104. background: #3c3c4b;
  2105. border: none;
  2106. color: #fff;
  2107. padding: 10px;
  2108. -webkit-box-sizing: border-box;
  2109. box-sizing: border-box;
  2110. width: 100%;
  2111. -webkit-transition: 0.1s ease;
  2112. -o-transition: 0.1s ease;
  2113. transition: 0.1s ease; }
  2114. #editPanel .row .column.multiInput input:first-of-type {
  2115. border-radius: 3px 3px 0 0; }
  2116. #editPanel .row .column.multiInput input:last-of-type {
  2117. border-radius: 0 0 3px 3px; }
  2118. #editPanel .row .column.multiInput .add {
  2119. padding: 0 !important;
  2120. display: -webkit-box;
  2121. display: -ms-flexbox;
  2122. display: flex;
  2123. -webkit-box-pack: center;
  2124. -ms-flex-pack: center;
  2125. justify-content: center;
  2126. cursor: pointer;
  2127. -webkit-box-align: center;
  2128. -ms-flex-align: center;
  2129. align-items: center;
  2130. width: 24px;
  2131. height: 24px;
  2132. background: #2196F3;
  2133. border: none;
  2134. border-radius: 3px;
  2135. color: #fff;
  2136. font-weight: 900; }
  2137. #editPanel .row .column.multiInput .removeContainer {
  2138. display: -webkit-box;
  2139. display: -ms-flexbox;
  2140. display: flex;
  2141. -webkit-box-pack: end;
  2142. -ms-flex-pack: end;
  2143. justify-content: flex-end; }
  2144. #editPanel .row .column.multiInput .remove {
  2145. background: #ba160a;
  2146. color: #fff;
  2147. display: -webkit-box;
  2148. display: -ms-flexbox;
  2149. display: flex;
  2150. padding: 0 !important;
  2151. -webkit-box-align: center;
  2152. -ms-flex-align: center;
  2153. align-items: center;
  2154. -webkit-box-pack: center;
  2155. -ms-flex-pack: center;
  2156. justify-content: center;
  2157. width: 24px;
  2158. height: 24px;
  2159. border-radius: 3px;
  2160. font-weight: 900;
  2161. border: none;
  2162. cursor: pointer; }
  2163. #editPanel .row:last-child {
  2164. margin-bottom: 0; }
  2165. #editPanel .tagsBtn {
  2166. margin-left: 5px;
  2167. text-decoration: underline;
  2168. cursor: pointer; }
  2169. #editPanel #tagsContainer {
  2170. position: relative; }
  2171. #editPanel #tagsContainer .tagList {
  2172. position: absolute;
  2173. width: 350px;
  2174. left: 125%;
  2175. opacity: 0;
  2176. visibility: hidden;
  2177. background: #2f2f3a;
  2178. -webkit-box-shadow: 0 5px 15px #1a1a21;
  2179. box-shadow: 0 5px 15px #1a1a21;
  2180. z-index: 5;
  2181. overflow: hidden;
  2182. border-radius: 3px;
  2183. top: 50%;
  2184. -webkit-transform: translateY(-50%);
  2185. -ms-transform: translateY(-50%);
  2186. transform: translateY(-50%);
  2187. -webkit-transition: 0.2s ease;
  2188. -o-transition: 0.2s ease;
  2189. transition: 0.2s ease; }
  2190. #editPanel #tagsContainer .tagList header {
  2191. display: -ms-grid;
  2192. display: grid;
  2193. -ms-grid-columns: 1fr 2fr;
  2194. grid-template-columns: 1fr 2fr;
  2195. -webkit-box-align: center;
  2196. -ms-flex-align: center;
  2197. align-items: center;
  2198. padding: 10px;
  2199. margin: 0; }
  2200. #editPanel #tagsContainer .tagList header span {
  2201. position: absolute;
  2202. top: 0;
  2203. right: 0;
  2204. text-decoration: none;
  2205. padding: 10px;
  2206. cursor: pointer; }
  2207. #editPanel #tagsContainer .tagList header span:hover {
  2208. background: #f44336;
  2209. color: #fff; }
  2210. #editPanel #tagsContainer .tagList .tag {
  2211. display: -ms-grid;
  2212. display: grid;
  2213. -ms-grid-columns: 1fr 2fr;
  2214. grid-template-columns: 1fr 2fr;
  2215. padding: 10px;
  2216. -webkit-box-sizing: border-box;
  2217. box-sizing: border-box; }
  2218. #editPanel #tagsContainer .tagList .tag:nth-child(odd) {
  2219. background: #2a2a34; }
  2220. #editPanel #tagsContainer .tagList.toggle {
  2221. visibility: visible;
  2222. opacity: 1;
  2223. left: 115%; }
  2224.  
  2225. #profile {
  2226. display: -ms-grid;
  2227. display: grid;
  2228. -ms-grid-columns: 256px 1fr;
  2229. grid-template-columns: 256px 1fr;
  2230. grid-gap: 30px;
  2231. max-width: 1280px;
  2232. -webkit-box-align: start;
  2233. -ms-flex-align: start;
  2234. align-items: flex-start;
  2235. width: 100%;
  2236. margin: 0 auto;
  2237. padding: 50px 0 100px 0; }
  2238. #profile .left {
  2239. overflow: hidden;
  2240. border-radius: 3px;
  2241. background: #1a1a21; }
  2242. #profile .left .avatar {
  2243. max-height: 256px;
  2244. max-width: 256px;
  2245. overflow: hidden; }
  2246. #profile .left .avatar img {
  2247. display: block;
  2248. width: 256px;
  2249. height: 256px; }
  2250. #profile .left .bdDev {
  2251. display: block;
  2252. border: none;
  2253. width: 100%;
  2254. -webkit-box-sizing: border-box;
  2255. box-sizing: border-box;
  2256. padding: 15px 15px 15px 40px;
  2257. text-align: left;
  2258. background: transparent;
  2259. position: relative;
  2260. text-decoration: none;
  2261. -webkit-user-select: none;
  2262. -moz-user-select: none;
  2263. -ms-user-select: none;
  2264. user-select: none;
  2265. pointer-events: none;
  2266. -webkit-transition: 0.1s ease;
  2267. -o-transition: 0.1s ease;
  2268. transition: 0.1s ease;
  2269. color: #FF9800; }
  2270. #profile .left .bdDev i {
  2271. position: absolute;
  2272. top: 50%;
  2273. -webkit-transform: translateY(-50%);
  2274. -ms-transform: translateY(-50%);
  2275. transform: translateY(-50%);
  2276. left: 15px;
  2277. font-size: 14px; }
  2278. #profile .left .socials a, #profile .left .socials button {
  2279. display: block;
  2280. border: none;
  2281. width: 100%;
  2282. -webkit-box-sizing: border-box;
  2283. box-sizing: border-box;
  2284. padding: 15px 15px 15px 40px;
  2285. text-align: left;
  2286. background: transparent;
  2287. position: relative;
  2288. text-decoration: none;
  2289. cursor: pointer;
  2290. -webkit-transition: 0.1s ease;
  2291. -o-transition: 0.1s ease;
  2292. transition: 0.1s ease; }
  2293. #profile .left .socials a i, #profile .left .socials button i {
  2294. position: absolute;
  2295. top: 50%;
  2296. -webkit-transform: translateY(-50%);
  2297. -ms-transform: translateY(-50%);
  2298. transform: translateY(-50%);
  2299. left: 15px;
  2300. font-size: 16px; }
  2301. #profile .left .socials a:hover, #profile .left .socials button:hover {
  2302. background: #2f2f3a; }
  2303. #profile .left .socials button.discord {
  2304. color: #7289DA; }
  2305. #profile .left .socials a.github, #profile .left .socials a.steam {
  2306. color: #eee; }
  2307. #profile .left .socials a.twitter {
  2308. color: #2196f4; }
  2309. #profile .left .socials a.twitch {
  2310. color: #673ab8; }
  2311. #profile .left .socials a.youtube {
  2312. color: #f44336; }
  2313. #profile #support {
  2314. width: 100%;
  2315. -webkit-box-sizing: border-box;
  2316. box-sizing: border-box;
  2317. background: #2f2f3a;
  2318. border-radius: 3px;
  2319. padding: 15px;
  2320. display: -ms-grid;
  2321. display: grid;
  2322. -ms-grid-columns: 42px 1fr 1fr;
  2323. grid-template-columns: 42px 1fr 1fr;
  2324. grid-gap: 10px;
  2325. -webkit-box-align: center;
  2326. -ms-flex-align: center;
  2327. align-items: center;
  2328. margin-bottom: 30px; }
  2329. #profile #support img {
  2330. width: 42px;
  2331. border-radius: 3px;
  2332. display: block; }
  2333. #profile #support .name {
  2334. display: -webkit-box;
  2335. display: -ms-flexbox;
  2336. display: flex;
  2337. -webkit-box-orient: vertical;
  2338. -webkit-box-direction: normal;
  2339. -ms-flex-direction: column;
  2340. flex-direction: column;
  2341. -webkit-box-pack: center;
  2342. -ms-flex-pack: center;
  2343. justify-content: center; }
  2344. #profile #support .name small {
  2345. opacity: .5; }
  2346. #profile #support .name p {
  2347. margin: 0; }
  2348. #profile #support .link {
  2349. display: -webkit-box;
  2350. display: -ms-flexbox;
  2351. display: flex;
  2352. -webkit-box-align: center;
  2353. -ms-flex-align: center;
  2354. align-items: center;
  2355. -webkit-box-pack: end;
  2356. -ms-flex-pack: end;
  2357. justify-content: flex-end; }
  2358. #profile #support .link p {
  2359. margin: 0;
  2360. opacity: 0;
  2361. -webkit-transition: 0.2s ease;
  2362. -o-transition: 0.2s ease;
  2363. transition: 0.2s ease; }
  2364. #profile #support .link a {
  2365. display: block;
  2366. background: #43b581;
  2367. color: #fff;
  2368. text-decoration: none;
  2369. padding: 10px 20px;
  2370. border-radius: 3px;
  2371. -webkit-transition: .2s ease;
  2372. -o-transition: .2s ease;
  2373. transition: .2s ease;
  2374. margin-left: 15px; }
  2375. #profile #support .link a:hover {
  2376. background: #359066; }
  2377. #profile #support:hover .link p {
  2378. opacity: 1; }
  2379. #profile section {
  2380. margin-bottom: 50px; }
  2381. #profile section header {
  2382. padding-bottom: 15px;
  2383. display: -webkit-box;
  2384. display: -ms-flexbox;
  2385. display: flex;
  2386. -webkit-box-align: center;
  2387. -ms-flex-align: center;
  2388. align-items: center; }
  2389. #profile section header .headerLeft {
  2390. -webkit-box-flex: 1;
  2391. -ms-flex: 1;
  2392. flex: 1; }
  2393. #profile section header .headerLeft h2 {
  2394. margin: 0;
  2395. font-weight: 400; }
  2396. #profile section header .headerRight button {
  2397. margin-left: 5px;
  2398. background: #2f2f3a;
  2399. border-radius: 3px;
  2400. border: none;
  2401. padding: 0;
  2402. color: #fff;
  2403. width: 34px;
  2404. height: 34px;
  2405. display: -webkit-inline-box;
  2406. display: -ms-inline-flexbox;
  2407. display: inline-flex;
  2408. -webkit-box-pack: center;
  2409. -ms-flex-pack: center;
  2410. justify-content: center;
  2411. -webkit-box-align: center;
  2412. -ms-flex-align: center;
  2413. align-items: center; }
  2414. #profile section header .headerRight button.checked {
  2415. background: #3c3c4b; }
  2416. #profile section .itemContainer {
  2417. padding: 0; }
  2418. #profile section .itemContainer.grid {
  2419. -ms-grid-columns: 1fr 1fr 1fr;
  2420. grid-template-columns: 1fr 1fr 1fr; }
  2421. #profile section .itemContainer.list {
  2422. border-top: 1px solid #0f0f12; }
  2423. #profile section .itemContainer.list .item {
  2424. background: transparent;
  2425. border-bottom: 1px solid #0f0f12;
  2426. padding: 10px;
  2427. -webkit-box-sizing: border-box;
  2428. box-sizing: border-box; }
  2429. #profile section .itemContainer.list .item .head {
  2430. display: none; }
  2431. #profile section .itemContainer.list .item .body {
  2432. padding: 0;
  2433. display: -ms-grid;
  2434. display: grid;
  2435. -ms-grid-columns: 1fr 2fr;
  2436. grid-template-columns: 1fr 2fr;
  2437. grid-gap: 10px;
  2438. -webkit-box-align: center;
  2439. -ms-flex-align: center;
  2440. align-items: center; }
  2441. #profile section .itemContainer.list .item .body h2 {
  2442. font-size: 18px; }
  2443. #profile section .itemContainer.list .item .body .descContainer {
  2444. display: -webkit-box;
  2445. display: -ms-flexbox;
  2446. display: flex;
  2447. -webkit-box-align: center;
  2448. -ms-flex-align: center;
  2449. align-items: center; }
  2450. #profile section .itemContainer.list .item .body .descContainer p {
  2451. margin: 0;
  2452. overflow: auto;
  2453. white-space: normal;
  2454. -o-text-overflow: inherit;
  2455. text-overflow: inherit; }
  2456. #profile section .itemContainer.list .item:hover {
  2457. -webkit-box-shadow: none;
  2458. box-shadow: none;
  2459. -webkit-transform: none;
  2460. -ms-transform: none;
  2461. transform: none;
  2462. background: #282831; }
  2463. #profile section:last-child {
  2464. margin-bottom: 0; }
  2465.  
  2466. #userForm {
  2467. width: 300px;
  2468. margin: 100px auto 50px; }
  2469. #userForm .form {
  2470. background: #282831;
  2471. -webkit-box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  2472. box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  2473. border-radius: 3px;
  2474. padding-bottom: 15px; }
  2475. #userForm .form form {
  2476. padding: 15px;
  2477. -webkit-box-sizing: border-box;
  2478. box-sizing: border-box; }
  2479. #userForm .form form header {
  2480. margin-bottom: 30px;
  2481. text-align: center; }
  2482. #userForm .form form header h2 {
  2483. margin: 0;
  2484. font-weight: 400; }
  2485. #userForm .form form header p {
  2486. font-size: 14px;
  2487. margin: 5px 0 0 0; }
  2488. #userForm .form form header p a {
  2489. color: #fff;
  2490. text-decoration: none;
  2491. color: #2196F3; }
  2492. #userForm .form form .formDiv {
  2493. margin-bottom: 15px; }
  2494. #userForm .form form .formDiv input {
  2495. background: #3c3c4b;
  2496. border-radius: 3px;
  2497. color: #fff;
  2498. border: none;
  2499. padding: 10px;
  2500. -webkit-box-sizing: border-box;
  2501. box-sizing: border-box;
  2502. width: 100%;
  2503. -webkit-transition: 0.1s ease;
  2504. -o-transition: 0.1s ease;
  2505. transition: 0.1s ease; }
  2506. #userForm .form form .formDiv input:focus {
  2507. background: #434353; }
  2508. #userForm .form form .formDiv button {
  2509. background: #3c3c4b;
  2510. border: none;
  2511. border-radius: 3px;
  2512. color: #fff;
  2513. padding: 10px 0;
  2514. width: 100%;
  2515. cursor: pointer;
  2516. -webkit-box-sizing: border-box;
  2517. box-sizing: border-box;
  2518. display: -webkit-box;
  2519. display: -ms-flexbox;
  2520. display: flex;
  2521. -webkit-box-align: center;
  2522. -ms-flex-align: center;
  2523. align-items: center;
  2524. -webkit-box-pack: center;
  2525. -ms-flex-pack: center;
  2526. justify-content: center;
  2527. -webkit-transition: 0.1s ease;
  2528. -o-transition: 0.1s ease;
  2529. transition: 0.1s ease; }
  2530. #userForm .form form .formDiv button i {
  2531. padding-right: 5px; }
  2532. #userForm .form form .formDiv button:hover {
  2533. background: #434353; }
  2534. #userForm .form form .formDiv:last-child {
  2535. margin-bottom: 0; }
  2536. #userForm .form .or {
  2537. display: -webkit-box;
  2538. display: -ms-flexbox;
  2539. display: flex;
  2540. -webkit-box-pack: center;
  2541. -ms-flex-pack: center;
  2542. justify-content: center;
  2543. position: relative;
  2544. -webkit-box-align: center;
  2545. -ms-flex-align: center;
  2546. align-items: center;
  2547. margin: 0 15px 15px 15px; }
  2548. #userForm .form .or p {
  2549. margin: 0;
  2550. padding: 0 12px;
  2551. background: #282831;
  2552. z-index: 1; }
  2553. #userForm .form .or:before {
  2554. content: "";
  2555. width: 100%;
  2556. height: 1px;
  2557. background: #1a1a21;
  2558. position: absolute; }
  2559. #userForm .form .externalLogin {
  2560. margin: 0 15px;
  2561. -webkit-box-sizing: border-box;
  2562. box-sizing: border-box;
  2563. position: relative; }
  2564. #userForm .form .externalLogin a {
  2565. display: -webkit-box;
  2566. display: -ms-flexbox;
  2567. display: flex;
  2568. -webkit-box-pack: center;
  2569. -ms-flex-pack: center;
  2570. justify-content: center;
  2571. -webkit-box-align: center;
  2572. -ms-flex-align: center;
  2573. align-items: center;
  2574. width: 100%;
  2575. background: #3c3c4b;
  2576. padding: 10px;
  2577. color: #fff;
  2578. text-decoration: none;
  2579. -webkit-box-sizing: border-box;
  2580. box-sizing: border-box;
  2581. margin-bottom: 15px;
  2582. border-radius: 3px;
  2583. -webkit-transition: 0.1s ease;
  2584. -o-transition: 0.1s ease;
  2585. transition: 0.1s ease; }
  2586. #userForm .form .externalLogin a i {
  2587. padding-right: 5px; }
  2588. #userForm .form .externalLogin a:hover {
  2589. background: #434353; }
  2590. #userForm .form .externalLogin a:last-child {
  2591. margin-bottom: 0;
  2592. cursor: not-allowed; }
  2593. #userForm footer {
  2594. text-align: center;
  2595. padding: 10px;
  2596. -webkit-box-sizing: border-box;
  2597. box-sizing: border-box;
  2598. margin-top: 15px;
  2599. background: #f44336;
  2600. border-radius: 3px; }
  2601. #userForm footer p {
  2602. margin: 0;
  2603. color: #fff; }
  2604. #userForm footer p a {
  2605. color: #fff; }
  2606.  
  2607. #otherPage {
  2608. -webkit-box-align: center;
  2609. -ms-flex-align: center;
  2610. align-items: center;
  2611. display: -webkit-box;
  2612. display: -ms-flexbox;
  2613. display: flex;
  2614. -webkit-box-orient: vertical;
  2615. -webkit-box-direction: normal;
  2616. -ms-flex-direction: column;
  2617. flex-direction: column;
  2618. margin: 150px 0 50px 0; }
  2619. #otherPage i {
  2620. font-size: 84px;
  2621. margin-bottom: 15px; }
  2622. #otherPage i.yes {
  2623. color: #4CAF50; }
  2624. #otherPage i.maybe {
  2625. color: #FFC107; }
  2626. #otherPage i.no {
  2627. color: #f44336; }
  2628. #otherPage h1 {
  2629. font-weight: 400;
  2630. margin-top: 0; }
  2631. #otherPage .btn {
  2632. background: #3c3c4b;
  2633. -webkit-box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  2634. box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  2635. text-decoration: none;
  2636. border-radius: 3px;
  2637. display: inline-block;
  2638. color: #fff;
  2639. padding: 10px 20px;
  2640. -webkit-transition: 0.2s ease;
  2641. -o-transition: 0.2s ease;
  2642. transition: 0.2s ease; }
  2643. #otherPage .btn:hover {
  2644. background: #4a4a5c; }
  2645. #otherPage.verify .btn {
  2646. margin-left: 15px; }
  2647.  
  2648. #main header {
  2649. display: -webkit-box;
  2650. display: -ms-flexbox;
  2651. display: flex;
  2652. -webkit-box-align: start;
  2653. -ms-flex-align: start;
  2654. align-items: flex-start;
  2655. padding: 20px 20px 0 20px;
  2656. -webkit-box-sizing: border-box;
  2657. box-sizing: border-box;
  2658. max-width: 1920px;
  2659. width: 100%;
  2660. margin: 0 auto; }
  2661. #main header .headerLeft {
  2662. display: -webkit-box;
  2663. display: -ms-flexbox;
  2664. display: flex;
  2665. -webkit-box-align: center;
  2666. -ms-flex-align: center;
  2667. align-items: center;
  2668. -ms-flex-wrap: wrap;
  2669. flex-wrap: wrap;
  2670. -webkit-box-flex: 1;
  2671. -ms-flex: 1;
  2672. flex: 1; }
  2673. #main header .headerLeft button {
  2674. background: #2f2f3a;
  2675. padding: 15px 20px;
  2676. border: none;
  2677. color: #fff;
  2678. -webkit-box-sizing: border-box;
  2679. box-sizing: border-box;
  2680. border-radius: 3px;
  2681. display: -webkit-box;
  2682. display: -ms-flexbox;
  2683. display: flex;
  2684. -webkit-box-align: center;
  2685. -ms-flex-align: center;
  2686. align-items: center;
  2687. margin: 0 15px 15px 0;
  2688. -webkit-transition: 0.2s ease;
  2689. -o-transition: 0.2s ease;
  2690. transition: 0.2s ease; }
  2691. #main header .headerLeft button:hover {
  2692. background: #3c3c4b; }
  2693. #main header .headerLeft button.checked {
  2694. background: #4a4a5c; }
  2695. #main header .headerLeft #overflow {
  2696. overflow: hidden; }
  2697. #main header .headerRight {
  2698. display: -webkit-box;
  2699. display: -ms-flexbox;
  2700. display: flex;
  2701. -webkit-box-align: start;
  2702. -ms-flex-align: start;
  2703. align-items: flex-start; }
  2704.  
  2705. #sort {
  2706. position: relative;
  2707. display: -webkit-box;
  2708. display: -ms-flexbox;
  2709. display: flex;
  2710. -webkit-box-align: center;
  2711. -ms-flex-align: center;
  2712. align-items: center; }
  2713. #sort span {
  2714. margin-right: 15px; }
  2715. #sort .current {
  2716. background: #2f2f3a;
  2717. border-radius: 3px;
  2718. padding: 15px;
  2719. cursor: pointer;
  2720. -webkit-user-select: none;
  2721. -moz-user-select: none;
  2722. -ms-user-select: none;
  2723. user-select: none;
  2724. width: 200px;
  2725. -webkit-transition: 0.1s ease;
  2726. -o-transition: 0.1s ease;
  2727. transition: 0.1s ease; }
  2728. #sort .current p {
  2729. margin: 0; }
  2730. #sort .current:hover {
  2731. background: #3c3c4b; }
  2732. #sort .options {
  2733. position: absolute;
  2734. top: calc(100% + 15px);
  2735. right: 0;
  2736. width: calc(100% - 45px);
  2737. z-index: 5;
  2738. padding: 10px;
  2739. -webkit-box-sizing: border-box;
  2740. box-sizing: border-box;
  2741. background: #2f2f3a;
  2742. border-radius: 3px;
  2743. -webkit-box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  2744. box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  2745. -webkit-transform-origin: top right;
  2746. -ms-transform-origin: top right;
  2747. transform-origin: top right;
  2748. -webkit-transform: scale(0.9, 0.9);
  2749. -ms-transform: scale(0.9, 0.9);
  2750. transform: scale(0.9, 0.9);
  2751. opacity: 0;
  2752. visibility: hidden;
  2753. -webkit-transition: 0.2s ease;
  2754. -o-transition: 0.2s ease;
  2755. transition: 0.2s ease; }
  2756. #sort .options a {
  2757. display: -webkit-box;
  2758. display: -ms-flexbox;
  2759. display: flex;
  2760. -webkit-box-align: center;
  2761. -ms-flex-align: center;
  2762. align-items: center;
  2763. padding: 10px 10px 10px 45px;
  2764. color: #fff;
  2765. text-decoration: none;
  2766. -webkit-transition: 0.1s ease;
  2767. -o-transition: 0.1s ease;
  2768. transition: 0.1s ease; }
  2769. #sort .options a i {
  2770. position: absolute;
  2771. left: 25px; }
  2772. #sort .options a:hover {
  2773. background: #282831; }
  2774. #sort .options hr {
  2775. border: none;
  2776. height: 1px;
  2777. background: #434353;
  2778. margin: 10px 0; }
  2779. #sort .options.toggle {
  2780. opacity: 1;
  2781. visibility: visible;
  2782. -webkit-transform: scale(1, 1);
  2783. -ms-transform: scale(1, 1);
  2784. transform: scale(1, 1); }
  2785.  
  2786. #about {
  2787. max-width: 980px;
  2788. width: 100%;
  2789. margin: 50px auto; }
  2790. #about .question {
  2791. background: #282831;
  2792. -webkit-box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  2793. box-shadow: 0 2px 5px rgba(15, 15, 18, 0.5);
  2794. border-radius: 3px;
  2795. margin-bottom: 15px;
  2796. padding: 15px;
  2797. -webkit-box-sizing: border-box;
  2798. box-sizing: border-box; }
  2799. #about .question h2 {
  2800. margin: 0 0 15px 0;
  2801. padding-bottom: 15px;
  2802. border-bottom: 1px solid #3c3c4b; }
  2803. #about .question p {
  2804. margin: 0 0 10px 0; }
  2805. #about .question a {
  2806. background: #3c3c4b;
  2807. padding: 10px 20px;
  2808. border-radius: 3px;
  2809. color: #fff;
  2810. text-decoration: none;
  2811. display: inline-block;
  2812. margin-right: 5px;
  2813. -webkit-transition: 0.1s ease;
  2814. -o-transition: 0.1s ease;
  2815. transition: 0.1s ease; }
  2816. #about .question a:hover {
  2817. background: #4a4a5c; }
  2818. #about .question:last-child {
  2819. margin-bottom: 0; }
  2820.  
  2821. @media only screen and (max-width: 1420px) {
  2822. .itemContainer {
  2823. -ms-grid-columns: (1fr)[3];
  2824. grid-template-columns: repeat(3, 1fr); } }
  2825.  
  2826. @media only screen and (max-width: 1020px) {
  2827. body {
  2828. padding-bottom: 400px; }
  2829. .itemContainer {
  2830. -ms-grid-columns: (1fr)[2];
  2831. grid-template-columns: repeat(2, 1fr); }
  2832. nav {
  2833. -ms-grid-columns: 1fr auto auto;
  2834. grid-template-columns: 1fr auto auto; }
  2835. .navLeft {
  2836. -webkit-box-pack: start;
  2837. -ms-flex-pack: start;
  2838. justify-content: flex-start; }
  2839. .navMid {
  2840. position: fixed;
  2841. display: none;
  2842. top: 58.4px;
  2843. left: 0;
  2844. width: 100%;
  2845. z-index: 10;
  2846. background: #2f2f3a; }
  2847. .navMid a {
  2848. display: block; }
  2849. .navMid a:hover {
  2850. -webkit-box-shadow: none;
  2851. box-shadow: none;
  2852. background: #282831; }
  2853. .navMid .div {
  2854. display: none; }
  2855. .navRight {
  2856. -webkit-box-pack: end;
  2857. -ms-flex-pack: end;
  2858. justify-content: flex-end; }
  2859. .navRight > a {
  2860. margin: 10px 0 10px 15px; }
  2861. #swup > footer .wrapper {
  2862. -ms-grid-columns: 1fr 1fr;
  2863. grid-template-columns: 1fr 1fr;
  2864. grid-row-gap: 30px;
  2865. padding: 25px; } }
  2866.  
  2867. @media only screen and (max-width: 700px) {
  2868. body {
  2869. padding-bottom: 600px; }
  2870. .itemContainer {
  2871. -ms-grid-columns: (1fr)[1];
  2872. grid-template-columns: repeat(1, 1fr); }
  2873. #swup > footer .wrapper {
  2874. -ms-grid-columns: 1fr;
  2875. grid-template-columns: 1fr;
  2876. grid-row-gap: 30px;
  2877. padding: 25px;
  2878. text-align: center;
  2879. -webkit-box-sizing: border-box;
  2880. box-sizing: border-box; }
  2881. #swup > footer .wrapper h4:after {
  2882. margin: 15px auto 0; }
  2883. #swup > footer .wrapper hr {
  2884. margin: 15px auto; } }
  2885.  
  2886. #pageLoader {
  2887. position: fixed;
  2888. top: 0;
  2889. left: 0;
  2890. width: 100%;
  2891. height: 100%;
  2892. background: rgba(26, 26, 33, 0.9);
  2893. z-index: 999;
  2894. display: -webkit-box;
  2895. display: -ms-flexbox;
  2896. display: flex;
  2897. -webkit-box-align: center;
  2898. -ms-flex-align: center;
  2899. align-items: center;
  2900. -webkit-box-pack: center;
  2901. -ms-flex-pack: center;
  2902. justify-content: center;
  2903. -webkit-box-orient: vertical;
  2904. -webkit-box-direction: normal;
  2905. -ms-flex-direction: column;
  2906. flex-direction: column;
  2907. -webkit-animation: pageLoader 0.2s ease forwards;
  2908. animation: pageLoader 0.2s ease forwards; }
  2909. #pageLoader .loader {
  2910. display: block;
  2911. width: 52px;
  2912. height: 52px;
  2913. border-radius: 50%;
  2914. border: 5px solid #fff;
  2915. border-right-color: transparent;
  2916. -webkit-animation: spinLoader 1s linear infinite;
  2917. animation: spinLoader 1s linear infinite; }
  2918.  
  2919. @-webkit-keyframes pageLoader {
  2920. from {
  2921. opacity: 0; }
  2922. to {
  2923. opacity: 1; } }
  2924.  
  2925. @keyframes pageLoader {
  2926. from {
  2927. opacity: 0; }
  2928. to {
  2929. opacity: 1; } }
  2930.  
  2931. @-webkit-keyframes spinLoader {
  2932. 0% {
  2933. -webkit-transform: rotate(0deg);
  2934. transform: rotate(0deg); }
  2935. 100% {
  2936. -webkit-transform: rotate(360deg);
  2937. transform: rotate(360deg); } }
  2938.  
  2939. @keyframes spinLoader {
  2940. 0% {
  2941. -webkit-transform: rotate(0deg);
  2942. transform: rotate(0deg); }
  2943. 100% {
  2944. -webkit-transform: rotate(360deg);
  2945. transform: rotate(360deg); } }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!