API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 17th, 2019
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.18 KB | None | 0 0
raw download clone embed print report
  1. @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
  2.  
  3. body, h1, h2, h3 {
  4.     padding: 0;
  5.     margin: 0;
  6.     font-family: 'Roboto', serif;
  7.     /*background: url("https://res.cloudinary.com/finnhvman/image/upload/v1541930411/pattern.png");*/
  8.     background: url("fxcm-pattern.jpg");
  9.     /*background: linear-gradient(90deg, rgba(0,59,79,1) 0%, rgba(9,68,121,1) 35%, rgba(0,212,255,1) 100%);*/
  10. }
  11.  
  12. .notifications {
  13.     position: absolute;
  14.     top: 20px;
  15.     right: 20px;
  16.     z-index: 100;
  17. }
  18.  
  19. .notifications .success,
  20. .notifications .error {
  21.     color: white;
  22.     padding: 20px 25px;
  23.     font-weight: 400;
  24.     box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);
  25.     border-radius: 3px;
  26.     font-size: 16px;
  27.     margin-bottom: 20px;
  28. }
  29.  
  30. .notifications .success {
  31.     background: #03ac03;
  32. }
  33.  
  34. .notifications .error {
  35.     background: #d12005;
  36. }
  37.  
  38. .grid-container {
  39.     /*font-weight: normal;*/
  40.     box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);
  41.     margin: 50px auto;
  42.     max-width: 500px;
  43.     border-radius: 7px;
  44.     overflow: hidden;
  45. }
  46.  
  47. .grid-container h1 {
  48.     font-weight: 200;
  49.     color: white;
  50.     /*background: #2196f3;*/
  51.     padding: 23px 10px;
  52.     text-align: center;
  53.     background: linear-gradient(90deg, rgba(0,59,79,1) 0%, rgba(9,68,121,1) 35%, rgba(4,98,173,1) 100%);
  54. }
  55.  
  56. .material-form {
  57.     padding: 40px 40px;
  58.     background-color: #ffffff;
  59. }
  60. .material-form h3 {
  61.     font-size: 17px;
  62.     margin-bottom: 10px;
  63.     font-weight: 200;
  64.     background: #fff;
  65. }
  66.  
  67. .btn-container {
  68.     display: flex;
  69.     justify-content: space-between;
  70.     margin-bottom: 40px;
  71. }
  72.  
  73. .sentiment {
  74.     margin-bottom: 40px
  75. }
  76.  
  77. .sentiment h4 {
  78.     font-weight: 200;
  79.     color: #333;
  80.     font-size: 20px;
  81.     margin-bottom: 0;
  82. }
  83.  
  84. .sentiment h4 .sentiment-number {
  85.     font-weight: 500;
  86.     background: #f8f8f8;
  87.     border-radius: 3px;
  88.     border: 1px solid #e8e8e8;
  89.     box-shadow: 0px 1px 4px 2px rgba(88, 88, 88, 0.06);
  90.     padding: 10px 15px;
  91.     margin-left: 5px;
  92. }
  93.  
  94. pre.raw-data {
  95.     background: #f8f8f8;
  96.     border: 1px solid #e8e8e8;
  97.     border-radius: 3px;
  98.     box-shadow: 0px 1px 4px 2px rgba(88, 88, 88, 0.06);
  99.     padding: 15px;
  100.     margin-bottom: 0;
  101.     overflow-y: scroll;
  102.     min-height: 80px;
  103.     max-height: 600px;
  104. }
  105.  
  106. /* Material Design */
  107. .pure-material-textfield-outlined {
  108.     position: relative;
  109.     display: inline-block;
  110.     padding-top: 6px;
  111.     font-size: 16px;
  112.     line-height: 1.5;
  113.     overflow: hidden;
  114.     width: 100%;
  115.     margin-bottom: 3px;
  116. }
  117.  
  118. .pure-material-textfield-outlined:last-of-type {
  119.     margin-bottom: 20px;
  120. }
  121.  
  122.     /* Input, Textarea */
  123. .pure-material-textfield-outlined > input,
  124. .pure-material-textfield-outlined > textarea {
  125.     box-sizing: border-box;
  126.     margin: 0;
  127.     border: solid 2px; /* Safari */
  128.     border-color: #dadce0;
  129.     border-top-color: transparent;
  130.     border-radius: 4px;
  131.     padding: 15px 13px 15px;
  132.     width: 100%;
  133.     height: inherit;
  134.     color: rgba(0, 0, 0, 0.87);
  135.     background-color: transparent;
  136.     box-shadow: none; /* Firefox */
  137.     font-family: inherit;
  138.     font-size: inherit;
  139.     line-height: inherit;
  140.     caret-color: rgb(33, 150, 243);
  141.     transition: border 0.2s, box-shadow 0.2s;
  142. }
  143.  
  144. /* Span */
  145. .pure-material-textfield-outlined > input + span,
  146. .pure-material-textfield-outlined > textarea + span {
  147.     position: absolute;
  148.     top: 0;
  149.     left: 0;
  150.     display: flex;
  151.     border-color: #dadce0;
  152.     width: 100%;
  153.     max-height: 100%;
  154.     color: rgba(0, 0, 0, 0.6);
  155.     font-size: 75%;
  156.     line-height: 15px;
  157.     cursor: text;
  158.     transition: color 0.2s, font-size 0.2s, line-height 0.2s;
  159. }
  160.  
  161. /* Corners */
  162. .pure-material-textfield-outlined > input + span::before,
  163. .pure-material-textfield-outlined > input + span::after,
  164. .pure-material-textfield-outlined > textarea + span::before,
  165. .pure-material-textfield-outlined > textarea + span::after {
  166.     content: "";
  167.     display: block;
  168.     box-sizing: border-box;
  169.     margin-top: 6px;
  170.     border-top: solid 2px;
  171.     border-top-color: #dadce0;
  172.     min-width: 10px;
  173.     height: 8px;
  174.     pointer-events: none;
  175.     box-shadow: inset 0 1px transparent;
  176.     transition: border-color 0.2s, box-shadow 0.2s;
  177. }
  178.  
  179. .pure-material-textfield-outlined > input + span::before,
  180. .pure-material-textfield-outlined > textarea + span::before {
  181.     margin-right: 4px;
  182.     border-left: solid 1px transparent;
  183.     border-radius: 4px 0;
  184. }
  185.  
  186. .pure-material-textfield-outlined > input + span::after,
  187. .pure-material-textfield-outlined > textarea + span::after {
  188.     flex-grow: 1;
  189.     margin-left: 4px;
  190.     border-right: solid 1px transparent;
  191.     border-radius: 0 4px;
  192. }
  193.  
  194. /* Hover */
  195. .pure-material-textfield-outlined:hover > input,
  196. .pure-material-textfield-outlined:hover > textarea {
  197.     border-color: #dadce0;
  198.     border-top-color: transparent;
  199. }
  200.  
  201. .pure-material-textfield-outlined:hover > input + span::before,
  202. .pure-material-textfield-outlined:hover > textarea + span::before,
  203. .pure-material-textfield-outlined:hover > input + span::after,
  204. .pure-material-textfield-outlined:hover > textarea + span::after {
  205.     border-top-color: #dadce0;
  206. }
  207.  
  208. .pure-material-textfield-outlined:hover > input:not(:focus):placeholder-shown,
  209. .pure-material-textfield-outlined:hover > textarea:not(:focus):placeholder-shown {
  210.     border-color: #dadce0;
  211. }
  212.  
  213. /* Placeholder-shown */
  214. .pure-material-textfield-outlined > input:not(:focus):placeholder-shown,
  215. .pure-material-textfield-outlined > textarea:not(:focus):placeholder-shown {
  216.     border-top-color: #dadce0;
  217. }
  218.  
  219. .pure-material-textfield-outlined > input:not(:focus):placeholder-shown + span,
  220. .pure-material-textfield-outlined > textarea:not(:focus):placeholder-shown + span {
  221.     font-size: inherit;
  222.     line-height: 68px;
  223. }
  224.  
  225. .pure-material-textfield-outlined > input:not(:focus):placeholder-shown + span::before,
  226. .pure-material-textfield-outlined > textarea:not(:focus):placeholder-shown + span::before,
  227. .pure-material-textfield-outlined > input:not(:focus):placeholder-shown + span::after,
  228. .pure-material-textfield-outlined > textarea:not(:focus):placeholder-shown + span::after {
  229.     border-top-color: transparent;
  230. }
  231.  
  232. /* Focus */
  233. .pure-material-textfield-outlined > input:focus,
  234. .pure-material-textfield-outlined > textarea:focus {
  235.     border-color: #055fa7;
  236.     border-top-color: transparent;
  237.     box-shadow: inset 1px 0 var(--pure-material-safari-helper1), inset -1px 0 var(--pure-material-safari-helper1), inset 0 -1px var(--pure-material-safari-helper1);
  238.     outline: none;
  239. }
  240.  
  241. .pure-material-textfield-outlined > input:focus + span,
  242. .pure-material-textfield-outlined > textarea:focus + span {
  243.     color: rgb(4, 94, 167);
  244. }
  245.  
  246. .pure-material-textfield-outlined > input:focus + span::before,
  247. .pure-material-textfield-outlined > input:focus + span::after,
  248. .pure-material-textfield-outlined > textarea:focus + span::before,
  249. .pure-material-textfield-outlined > textarea:focus + span::after {
  250.     border-top-color: #055fa7 !important;
  251.     box-shadow: inset 0 1px var(--pure-material-safari-helper1);
  252. }
  253.  
  254. /* Disabled */
  255. .pure-material-textfield-outlined > input:disabled,
  256. .pure-material-textfield-outlined > input:disabled + span,
  257. .pure-material-textfield-outlined > textarea:disabled,
  258. .pure-material-textfield-outlined > textarea:disabled + span {
  259.     border-color: rgba( 0, 0, 0, 0.38) !important;
  260.     border-top-color: transparent !important;
  261.     color: rgba( 0, 0, 0, 0.38);
  262.     pointer-events: none;
  263. }
  264.  
  265. .pure-material-textfield-outlined > input:disabled + span::before,
  266. .pure-material-textfield-outlined > input:disabled + span::after,
  267. .pure-material-textfield-outlined > textarea:disabled + span::before,
  268. .pure-material-textfield-outlined > textarea:disabled + span::after {
  269.     border-top-color: rgba(0, 0, 0, 0.38) !important;
  270. }
  271.  
  272. .pure-material-textfield-outlined > input:disabled:placeholder-shown,
  273. .pure-material-textfield-outlined > input:disabled:placeholder-shown + span,
  274. .pure-material-textfield-outlined > textarea:disabled:placeholder-shown,
  275. .pure-material-textfield-outlined > textarea:disabled:placeholder-shown + span {
  276.     border-top-color: rgba(0, 0, 0, 0.38) !important;
  277. }
  278.  
  279. .pure-material-textfield-outlined > input:disabled:placeholder-shown + span::before,
  280. .pure-material-textfield-outlined > input:disabled:placeholder-shown + span::after,
  281. .pure-material-textfield-outlined > textarea:disabled:placeholder-shown + span::before,
  282. .pure-material-textfield-outlined > textarea:disabled:placeholder-shown + span::after {
  283.     border-top-color: transparent !important;
  284. }
  285.  
  286. /* Faster transition in Safari for less noticable fractional font-size issue */
  287. @media not all and (min-resolution:.001dpcm) {
  288.     @supports (-webkit-appearance:none) {
  289.         .pure-material-textfield-outlined > input,
  290.         .pure-material-textfield-outlined > input + span,
  291.         .pure-material-textfield-outlined > textarea,
  292.         .pure-material-textfield-outlined > textarea + span,
  293.         .pure-material-textfield-outlined > input + span::before,
  294.         .pure-material-textfield-outlined > input + span::after,
  295.         .pure-material-textfield-outlined > textarea + span::before,
  296.         .pure-material-textfield-outlined > textarea + span::after {
  297.             transition-duration: 0.1s;
  298.         }
  299.     }
  300. }
  301.  
  302.  
  303.  
  304. .pure-material-button-contained {
  305.     position: relative;
  306.     /*display: inline-block;*/
  307.     box-sizing: border-box;
  308.     border: none;
  309.     border-radius: 4px;
  310.     padding: 2px 16px;
  311.     min-width: 48%;
  312.     /*height: 36px;*/
  313.     vertical-align: middle;
  314.     text-align: center;
  315.     text-overflow: ellipsis;
  316.     text-transform: uppercase;
  317.     color: white;
  318.     background-color: #2196f3;
  319.     background: linear-gradient(90deg, rgba(0,59,79,1) 0%, rgba(9,68,121,1) 35%, rgba(4,98,173,1) 100%);
  320.     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  321.     font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, serif;
  322.     font-size: 14px;
  323.     font-weight: 500;
  324.     line-height: 36px;
  325.     overflow: hidden;
  326.     outline: none;
  327.     cursor: pointer;
  328.     transition: box-shadow 0.2s;
  329. }
  330.  
  331. .pure-material-button-contained::-moz-focus-inner {
  332.     border: none;
  333. }
  334.  
  335. /* Overlay */
  336. .pure-material-button-contained::before {
  337.     content: "";
  338.     position: absolute;
  339.     top: 0;
  340.     bottom: 0;
  341.     left: 0;
  342.     right: 0;
  343.     background-color: rgb( 255, 255, 255);
  344.     opacity: 0;
  345.     transition: opacity 0.2s;
  346. }
  347.  
  348. /* Ripple */
  349. .pure-material-button-contained::after {
  350.     content: "";
  351.     position: absolute;
  352.     left: 50%;
  353.     top: 50%;
  354.     border-radius: 50%;
  355.     padding: 50%;
  356.     width: 32px; /* Safari */
  357.     height: 32px; /* Safari */
  358.     background-color: white;
  359.     opacity: 0;
  360.     transform: translate(-50%, -50%) scale(1);
  361.     transition: opacity 1s, transform 0.5s;
  362. }
  363.  
  364. /* Hover, Focus */
  365. .pure-material-button-contained:hover,
  366. .pure-material-button-contained:focus {
  367.     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  368. }
  369.  
  370. .pure-material-button-contained:hover::before {
  371.     opacity: 0.08;
  372. }
  373.  
  374. .pure-material-button-contained:focus::before {
  375.     opacity: 0.24;
  376. }
  377.  
  378. .pure-material-button-contained:hover:focus::before {
  379.     opacity: 0.3;
  380. }
  381.  
  382. /* Active */
  383. .pure-material-button-contained:active {
  384.     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  385. }
  386.  
  387. .pure-material-button-contained:active::after {
  388.     opacity: 0.32;
  389.     transform: translate(-50%, -50%) scale(0);
  390.     transition: transform 0s;
  391. }
  392.  
  393. /* Disabled */
  394. .pure-material-button-contained:disabled {
  395.     cursor: initial;
  396.     opacity: 0.5;
  397. }
  398.  
  399. .pure-material-button-contained:disabled::before {
  400.     opacity: 0;
  401. }
  402.  
  403. .pure-material-button-contained:disabled::after {
  404.     opacity: 0;
  405. }
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!