API tools faq
paste
Advertisement
Guest User

kek4

a guest
Oct 22nd, 2017
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.07 KB | None | 0 0
raw download clone embed print report
  1. .row-from-right {
  2. display:flex;
  3. justify-content:flex-end;
  4. align-items:center;
  5. }
  6. .row-from-right>* {
  7. margin-left:8px;
  8. }
  9. h1 {
  10. font-size:2.6rem;
  11. font-weight:300;
  12. }
  13. h2 {
  14. font-size:1.2rem;
  15. font-weight:300;
  16. }
  17. h3 {
  18. font-size:1rem;
  19. font-weight:400;
  20. margin:1rem 0;
  21. }
  22. small {
  23. font-size:.5em;
  24. }
  25. p {
  26. color:rgba(255,255,255,.5);
  27. line-height:1.5;
  28. word-break:break-word;
  29. }
  30. article+article {
  31. margin-top:16px;
  32. }
  33. article.large>:nth-child(n+2) {
  34. margin-top:1rem;
  35. }
  36. article section li {
  37. color:rgba(255,255,255,.5);
  38. }
  39. article ul li::before {
  40. content:'\b7';
  41. margin-right:8px;
  42. }
  43. article .article-ruler {
  44. padding-left:2rem;
  45. border-left:1px solid rgba(255,255,255,.05);
  46. }
  47. article section {
  48. position:relative;
  49. }
  50. article section:target {
  51. background:#e5323255;
  52. padding:2em;
  53. }
  54. article section.article-ruler:target {
  55. border-left:none;
  56. }
  57. article .nav-link,article .exit-nav-link {
  58. padding:1px;
  59. font-size:1rem;
  60. font-weight:400;
  61. width:1em;
  62. height:1em;
  63. border-radius:2px;
  64. background:rgba(255,255,255,.05);
  65. text-align:center;
  66. display:inline-block;
  67. margin-left:.5em;
  68. }
  69. article .table-of-content {
  70. border:1px dashed rgba(255,255,255,.05);
  71. border-width:1px 0;
  72. padding:1rem;
  73. list-style:none;
  74. counter-reset:ol;
  75. }
  76. article .table-of-content a {
  77. display:flex;
  78. padding:.25em 0;
  79. }
  80. article .table-of-content a::before {
  81. counter-increment:ol;
  82. content:counter(ol) '.';
  83. margin-right:.5em;
  84. }
  85. [data-tooltip] {
  86. position:relative;
  87. }
  88. [data-tooltip]::before {
  89. content:attr(data-tooltip);
  90. position:absolute;
  91. text-align:center;
  92. font-size:.75rem;
  93. font-weight:700;
  94. background:rgba(255,255,255,.9);
  95. color:#111;
  96. color:var(--bg-color);
  97. border-radius:2px;
  98. padding:4px 8px;
  99. pointer-events:none;
  100. bottom:100%;
  101. margin:auto;
  102. white-space:nowrap;
  103. transform:translateX(-50%);
  104. left:50%;
  105. z-index:4;
  106. }
  107. [data-tooltip]::after {
  108. position:absolute;
  109. content:'';
  110. bottom:calc(100% - 6px);
  111. border-radius:50%;
  112. transform:translateX(-50%);
  113. left:50%;
  114. height:4px;
  115. width:4px;
  116. background:white;
  117. z-index:4;
  118. }
  119. [data-tooltip]:hover::before,[data-tooltip]:hover::after {
  120. transition:opacity .1s .15s;
  121. }
  122. [data-tooltip]:not(:hover)::before,[data-tooltip]:not(:hover)::after {
  123. opacity:0;
  124. transition:opacity .2s;
  125. }
  126. @keyframes pulse {
  127. 50% {
  128. color:white;
  129. fill:white;
  130. }
  131. }
  132. @keyframes pulseWeak {
  133. 50% {
  134. color:rgba(255,255,255,.8);
  135. fill:rgba(255,255,255,.8);
  136. }
  137. }
  138. @keyframes spin {
  139. 0% {
  140. transform:rotate(0deg)
  141. }
  142. 100% {
  143. transform:rotate(360deg)
  144. }
  145. }
  146. @keyframes flash {
  147. 0% {
  148. box-shadow:0 0 4px 4px rgba(255,255,255,.075);
  149. }
  150. }
  151. @keyframes flashAccent {
  152. 0% {
  153. box-shadow:0 0 4px 4px #e53232;
  154. box-shadow:0 0 4px 4px var(--accent-color);
  155. }
  156. }
  157. a {
  158. color:inherit;
  159. text-decoration:none;
  160. outline:none;
  161. transition:color .15s;
  162. }
  163. a:hover {
  164. animation:pulse .38s infinite;
  165. }
  166. a:active,a:focus {
  167. color:white;
  168. }
  169. p a {
  170. text-decoration:underline;
  171. color:rgba(255,255,255,.6);
  172. }
  173. p a:hover,p a:focus {
  174. animation:pulseWeak .38s infinite;
  175. }
  176. p a:active {
  177. color:rgba(255,255,255,.8);
  178. }
  179. .icon {
  180. width:1em;
  181. height:1em;
  182. fill:rgba(255,255,255,.8);
  183. }
  184. .icon.half-width {
  185. width:.5em;
  186. }
  187. form>:not(:first-child):not(:last-child) {
  188. margin:8px 0;
  189. }
  190. form .actions {
  191. display:flex;
  192. justify-content:flex-end;
  193. align-items:center;
  194. }
  195. form .actions>* {
  196. margin-left:1em;
  197. }
  198. input:not([type="checkbox"]),textarea {
  199. font:inherit;
  200. line-height:1.5;
  201. color:inherit;
  202. border:none;
  203. display:block;
  204. background:rgba(255,255,255,.05);
  205. box-sizing:border-box;
  206. width:100%;
  207. padding:12px 16px;
  208. border-radius:2px;
  209. resize:none;
  210. }
  211. input[type="search"] {
  212. -webkit-appearance:none;
  213. }
  214. input[type="search"]::-webkit-search-cancel-button {
  215. -webkit-appearance:none;
  216. display:none;
  217. }
  218. input[readonly] {
  219. background:none;
  220. box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  221. }
  222. input:focus,textarea:focus {
  223. outline:none;
  224. background:rgba(255,255,255,.075);
  225. animation:flash .6s;
  226. }
  227. input:invalid {
  228. color:rgba(255,255,255,.5);
  229. }
  230. input::-webkit-input-placeholder {
  231. color:rgba(255,255,255,.2);
  232. }
  233. input:-ms-input-placeholder {
  234. color:rgba(255,255,255,.2);
  235. }
  236. input::-moz-placeholder {
  237. color:rgba(255,255,255,.2);
  238. opacity:1;
  239. }
  240. label {
  241. cursor:pointer;
  242. }
  243. input[type="checkbox"]:hover+label,input[type="checkbox"]+label:hover,input[type="checkbox"]:focus+label,input[type="checkbox"]+label:focus,input[type="checkbox"]:active+label,input[type="checkbox"]+label:active {
  244. animation:pulse .38s infinite;
  245. }
  246. input[type="checkbox"]+label {
  247. display:flex;
  248. align-items:center;
  249. }
  250. input[type="checkbox"]+label::before {
  251. margin-right:16px;
  252. flex:none;
  253. content:'';
  254. display:block;
  255. border-radius:2px;
  256. width:16px;
  257. height:16px;
  258. background:rgba(255,255,255,.05) url(/public/vectors/checkbox/uncheck.svg);
  259. transition:transform .1s;
  260. }
  261. input[type="checkbox"]:checked+label::before {
  262. background-image:url(/public/vectors/checkbox/check.svg);
  263. }
  264. input[type="checkbox"]:disabled+label::before {
  265. background-image:url(/public/vectors/checkbox/disable.svg);
  266. }
  267. input[type="checkbox"]:hover+label::before {
  268. transform:scale(1.25);
  269. }
  270. .input-group {
  271. position:relative;
  272. background:rgba(255,255,255,.05);
  273. border-radius:2px;
  274. overflow:hidden;
  275. }
  276. .input-group label {
  277. display:block;
  278. font-size:.75rem;
  279. font-weight:700;
  280. }
  281. .input-group>label {
  282. padding:8px 16px 0;
  283. cursor:text;
  284. }
  285. .input-group input,.input-group textarea {
  286. background:none;
  287. border-radius:0;
  288. }
  289. .input-group .related-tick {
  290. position:absolute;
  291. top:8px;
  292. right:8px;
  293. }
  294. .input-group .related-tick label::before {
  295. order:1;
  296. margin-right:0;
  297. margin-left:8px;
  298. }
  299. tick-input,.tick-input {
  300. cursor:pointer;
  301. display:flex;
  302. align-items:center;
  303. padding:1em;
  304. transition:background .6s;
  305. }
  306. tick-input[disabled] {
  307. pointer-events:none;
  308. }
  309. tick-input:active,.tick-input:active {
  310. background:rgba(255,255,255,.05);
  311. transition:background 0s;
  312. }
  313. tick-input svg,.tick-input svg {
  314. flex:none;
  315. background:rgba(255,255,255,.05);
  316. border-radius:2px;
  317. overflow:hidden;
  318. margin-right:8px;
  319. transition:fill .1s,background .6s;
  320. }
  321. tick-input:active svg,.tick-input:active svg {
  322. background:rgba(255,255,255,.1);
  323. transition:fill .1s,background 0s;
  324. }
  325. tick-input .label,.tick-input .label {
  326. transition:color .1s;
  327. }
  328. tick-input:not([checked]) svg,tick-input[disabled] svg.icon,.tick-input input:not(:checked)~svg {
  329. fill:rgba(255,255,255,.2);
  330. }
  331. tick-input[disabled] .label,.tick-input input:disabled~.label {
  332. color:rgba(255,255,255,.2);
  333. }
  334. tick-input:hover,.tick-input:hover {
  335. color:white;
  336. }
  337. .tick-input .label span {
  338. display:block;
  339. font-size:.75em;
  340. }
  341. button,[role="button"] {
  342. padding:.25em 1em;
  343. line-height:1.5;
  344. min-height:2em;
  345. overflow:hidden;
  346. font:inherit;
  347. color:inherit;
  348. fill:rgba(255,255,255,.8);
  349. background:rgba(255,255,255,.05);
  350. background:var(--color-el-background);
  351. border:none;
  352. border-radius:2px;
  353. cursor:pointer;
  354. display:inline-flex;
  355. justify-content:center;
  356. align-items:center;
  357. transition:background .6s,color .15s,fill .15s;
  358. }
  359. button>:nth-child(n+2),[role="button"]>:nth-child(n+2) {
  360. margin-left:.5em;
  361. }
  362. button>svg,[role="button"]>svg {
  363. flex:none;
  364. }
  365. button>span,[role="button"]>span {
  366. overflow:hidden;
  367. text-overflow:ellipsis;
  368. line-height:1.5;
  369. }
  370. button.active-item,[role="button"].active-item {
  371. color:rgba(255,255,255,.2);
  372. fill:rgba(255,255,255,.2);
  373. }
  374. button:hover,[role="button"]:hover {
  375. color:white;
  376. }
  377. button:focus,[role="button"]:focus {
  378. outline:none;
  379. }
  380. button:active,button:focus,[role="button"]:active,[role="button"]:focus {
  381. color:white;
  382. fill:white;
  383. }
  384. button:active,[role="button"]:active {
  385. transition:none;
  386. background:rgba(255,255,255,.1);
  387. }
  388. button.strong,[role="button"].strong {
  389. background:rgba(255,255,255,.1);
  390. }
  391. button.strong:active,[role="button"].strong:active {
  392. background:rgba(255,255,255,.2);
  393. }
  394. button:disabled,input[type="checkbox"]:disabled+label {
  395. color:rgba(255,255,255,.2);
  396. fill:rgba(255,255,255,.2);
  397. pointer-events:none;
  398. animation:none;
  399. }
  400. ul {
  401. list-style:none;
  402. }
  403. nav ul.interactive,ul.data-list {
  404. border-top:1px solid rgba(255,255,255,.05);
  405. }
  406. ul.interactive li,ul.data-list li {
  407. display:flex;
  408. align-items:stretch;
  409. background-clip:padding-box;
  410. transition:background .6s;
  411. }
  412. ul.interactive li {
  413. -webkit-user-select:none;
  414. -moz-user-select:none;
  415. -ms-user-select:none;
  416. user-select:none;
  417. }
  418. nav ul.interactive li,ul.data-list li {
  419. margin:0;
  420. border-bottom:1px solid rgba(255,255,255,.05);
  421. }
  422. ul.interactive li:active {
  423. transition:none;
  424. background-color:rgba(255,255,255,.05);
  425. }
  426. ul.interactive li>* {
  427. display:flex;
  428. align-items:center;
  429. padding:1em;
  430. flex:auto;
  431. }
  432. ul.data-list li>* {
  433. display:flex;
  434. align-items:center;
  435. padding:.5em;
  436. line-height:1;
  437. flex:auto;
  438. overflow:hidden;
  439. text-overflow:ellipsis;
  440. }
  441. ul.data-list li>:nth-child(n+2) {
  442. border-left:1px solid rgba(255,255,255,.05);
  443. }
  444. li>.fixed {
  445. flex:none!important;
  446. }
  447. li>.kloss {
  448. align-self:stretch;
  449. width:4em;
  450. flex:none!important;
  451. background-color:rgba(255,255,255,.02);
  452. }
  453. li>.kloss>:nth-child(n+2) {
  454. margin-left:.5em;
  455. margin-left:var(--space-inline);
  456. }
  457. .slider {
  458. position:relative;
  459. background:rgba(255,255,255,.2);
  460. height:2px;
  461. }
  462. .slider>div {
  463. position:relative;
  464. height:100%;
  465. max-width:100%;
  466. background:#e53232;
  467. background:var(--accent-color);
  468. }
  469. .slider:not(.dragging) .handle {
  470. transition:width .15s;
  471. }
  472. .slider .handle::before {
  473. content:'';
  474. position:absolute;
  475. height:16px;
  476. width:16px;
  477. background:rgba(255,255,255,.2);
  478. border-radius:50%;
  479. right:-8px;
  480. top:-7px;
  481. transition:background .15s;
  482. }
  483. .slider:active .handle::before {
  484. background:rgba(255,255,255,.3);
  485. transition:none;
  486. }
  487. .slider .handle::after {
  488. content:'';
  489. position:absolute;
  490. height:4px;
  491. width:4px;
  492. background:white;
  493. border-radius:50%;
  494. right:-2px;
  495. top:-1px;
  496. }
  497. table {
  498. border-collapse:collapse;
  499. }
  500. table td {
  501. border:1px solid rgba(255,255,255,.025);
  502. padding:.5em;
  503. }
  504. pre {
  505. border:1px dotted rgba(255,255,255,0.05);
  506. font:500 .75em/1 'Source Code Pro',monospace;
  507. overflow:auto;
  508. border-radius:.25rem;
  509. padding:16px;
  510. color:#e53232;
  511. color:var(--accent-color);
  512. }
  513. .alert {
  514. margin:8px 0;
  515. padding:4px 16px;
  516. border-radius:2px;
  517. background:#e53232;
  518. backgroundvar(--accent-color);
  519. overflow:hidden;
  520. display:flex;
  521. flex:none;
  522. align-items:center;
  523. cursor:pointer;
  524. }
  525. .alert>:nth-last-child(n+2) {
  526. margin-right:1em;
  527. }
  528. .alert svg {
  529. margin-left:auto;
  530. border-radius:50%;
  531. transition:background .1s;
  532. }
  533. .alert:hover svg {
  534. background:rgba(255,255,255,.8);
  535. }
  536. .alert button {
  537. transform:translateX(12px);
  538. }
  539. .dialog-wrapper {
  540. z-index:100;
  541. position:fixed;
  542. left:0;
  543. right:0;
  544. bottom:0;
  545. top:0;
  546. background:rgba(0,0,0,.8);
  547. display:flex;
  548. justify-content:center;
  549. align-items:center;
  550. }
  551. .dialog {
  552. max-width:100vw;
  553. max-height:100vh;
  554. flex:none;
  555. padding:var(--space-block);
  556. background:var(--color-background);
  557. border-radius:2px;
  558. }
  559. .dialog .dialog-window-bar {
  560. display:flex;
  561. align-items:center;
  562. margin-bottom:var(--space-block);
  563. }
  564. .dialog .dialog-window-bar .close {
  565. margin-left:auto;
  566. }
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!