API tools faq
paste
Advertisement
r00tExpl01it

style

r00tExpl01it
Apr 3rd, 2018
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.79 KB | None | 0 0
raw download clone embed print report
  1. * {
  2.   box-sizing: border-box;
  3. }
  4. body {
  5.   line-height: 1.5;
  6.   font-family: 'Roboto';
  7.   -webkit-font-smoothing: antialiased;
  8.   overflow-x: hidden;
  9. }
  10. html{height:100%;}
  11. h1,
  12. h2,
  13. h3,
  14. p {
  15.   font-weight: 300;
  16.   text-align:center;
  17. }
  18. h1{font-size:2em;}
  19. h1,
  20. h2,
  21. h3 {
  22.   line-height: 1.3;
  23. }
  24. a {
  25.   text-decoration: none !important;
  26.   color: inherit;
  27.   font-weight: 400;
  28. }
  29. /**
  30.  * Material Modal CSS
  31.  */
  32. .modal {
  33.   will-change: visibility, opacity;
  34.   display: -webkit-box;
  35.   display: -webkit-flex;
  36.   display: -ms-flexbox;
  37.   display: flex;
  38.   -webkit-box-align: center;
  39.   -webkit-align-items: center;
  40.       -ms-flex-align: center;
  41.           align-items: center;
  42.   -webkit-box-pack: center;
  43.   -webkit-justify-content: center;
  44.       -ms-flex-pack: center;
  45.           justify-content: center;
  46.   position: fixed;
  47.   top: 0;
  48.   left: 0;
  49.   right: 0;
  50.   bottom: 0;
  51.   overflow-y: auto;
  52.   overflow-x: hidden;
  53.   z-index: 1000;
  54.   visibility: hidden;
  55.   opacity: 0;
  56.   -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  57.           transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  58.   -webkit-transition-delay: 0s;
  59.           transition-delay: 0s;
  60. }
  61. .modal--active {
  62.   visibility: visible;
  63.   opacity: 1;
  64. }
  65. .modal--align-top {
  66.   -webkit-box-align: start;
  67.   -webkit-align-items: flex-start;
  68.       -ms-flex-align: start;
  69.           align-items: flex-start;
  70. }
  71. .modal__bg {
  72.   background: transparent;
  73. }
  74. .modal__dialog {
  75.   max-width: 600px;
  76.   padding: 1.2rem;
  77. }
  78. .modal__content {
  79.   will-change: transform, opacity;
  80.   position: relative;
  81.   padding: 2.4rem;
  82.   border-radius:5px;
  83.   background: #ffebee;
  84.   background-clip: padding-box;
  85.   box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);
  86.   opacity: 0;
  87.   -webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  88.           transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  89. }
  90. .modal__content--active {
  91.   opacity: 1;
  92. }
  93. .modal__close {
  94.   z-index: 1100;
  95.   cursor: pointer;
  96. }
  97. .modal__trigger {
  98.   position: relative;
  99.   display: inline-block;
  100.   padding: 1.2rem 1.4rem;
  101.   color: #fff;
  102.   margin-bottom:20px;
  103.   width:100%;
  104.   line-height: 1;
  105.   cursor: pointer;
  106.   border: 1px solid #fff;
  107.   border-radius:5px;
  108.   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
  109.   -webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  110.           transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  111. }
  112. .modal__trigger--active {
  113.   z-index: 10;
  114. }
  115. .modal__trigger:hover {
  116.   background: rgba(153,255,0,0.9);
  117.   color:#000;
  118. }
  119. #modal__temp {
  120.   will-change: transform, opacity;
  121.   position: absolute;
  122.   top: 0;
  123.   left: 0;
  124.   right: 0;
  125.   bottom: 0;
  126.   background: #ffebee;
  127.   -webkit-transform: none;
  128.       -ms-transform: none;
  129.           transform: none;
  130.   opacity: 1;
  131.   -webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  132.           transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  133. }
  134. /**
  135.  * Demo specific CSS
  136.  */
  137. body {
  138.   height: 100%;
  139.   background: #f44336;
  140. }
  141. img {
  142.   max-width: 100%;
  143. }
  144. .demo-btns header {
  145.   padding: 7vh 10vw;
  146.  
  147.   display: -webkit-box;
  148.   display: -webkit-flex;
  149.   display: -ms-flexbox;
  150.   display: flex;
  151.   -webkit-box-align: center;
  152.   -webkit-align-items: center;
  153.       -ms-flex-align: center;
  154.           align-items: center;
  155. }
  156. .demo-btns header h1 {
  157.   margin: 0;
  158.   text-align:center;
  159.   color: rgba(0,0,0,0.54);
  160.   font-weight: 300;
  161. }
  162. .demo-btns .info {
  163.  
  164.   padding: 0.5vh 10vw;
  165.  
  166.   display: -webkit-box;
  167.   display: -webkit-flex;
  168.   display: -ms-flexbox;
  169.   display: flex;
  170.   -webkit-box-align: center;
  171.   -webkit-align-items: center;
  172.       -ms-flex-align: center;
  173.           align-items: center;
  174.   -webkit-box-pack: center;
  175.   -webkit-justify-content: center;
  176.       -ms-flex-pack: center;
  177.           justify-content: center;
  178.   -webkit-flex-flow: column wrap;
  179.       -ms-flex-flow: column wrap;
  180.           flex-flow: column wrap;
  181. }
  182. .demo-btns p {
  183.   text-align: center;
  184.   color: #fff;
  185. }
  186. .demo-btns .link {
  187.   font-size: 20px;
  188. }
  189. .demo-btns .modal__trigger {
  190.   margin-right: 3px;
  191. }
  192. @media (max-width: 640px) {
  193.   .demo-btns .modal__trigger {
  194.     margin-bottom: 0.8rem;
  195.   }
  196. }
  197. .demo-close {
  198.   position: absolute;
  199.   top: 0;
  200.   right: 0;
  201.   margin: 1.2rem;
  202.   padding: 0.9rem;
  203.  
  204.   border-radius: 50%;
  205.   -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  206.           transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  207. }
  208. .demo-close svg {
  209.   width: 24px;
  210.   fill: #fff;
  211.    background: rgba(0,0,0,0.7);
  212.   pointer-events: none;
  213.   vertical-align: top;
  214. }
  215.  
  216. .logo {
  217.   position: fixed;
  218.   bottom: 3vh;
  219.   right: 3vw;
  220.   z-index: 2;
  221. }
  222. .logo img {
  223.   width: 45px;
  224.   -webkit-transform: rotate(0);
  225.       -ms-transform: rotate(0);
  226.           transform: rotate(0);
  227.   -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  228.           transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  229. }
  230. .logo img:hover {
  231.   -webkit-transform: rotate(180deg) scale(1.1);
  232.       -ms-transform: rotate(180deg) scale(1.1);
  233.           transform: rotate(180deg) scale(1.1);
  234. }
  235.  
  236. .rotate{ -webkit-transition-duration: 1.8s; -moz-transition-duration: 1.8s; -o-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .rotate:hover   { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); }
  237.  
  238. .backgroundimg {
  239.   position: relative;
  240.   background-color: rgba(102, 0, 53, 0.9);
  241.   width: 100%;
  242.  
  243.   color:#fff;
  244. }
  245. .backgroundimg:before {
  246.   content:'';
  247.   position: absolute;
  248.   top: 0;
  249.   right: 0;
  250.   bottom: 0;
  251.   left: 0;
  252.   background:url("bg.jpg") center center fixed no-repeat;
  253.   -webkit-background-size: cover;
  254.   -moz-background-size: cover;
  255.   -o-background-size: cover;
  256.   background-size: cover;
  257.   z-index:-1;
  258. }
  259.  
  260. .gift{font-size:150px;
  261. padding:40px;
  262.  
  263.  
  264. }
  265.  
  266. .gift p {text-align:center !important;
  267. width:100%;
  268. }
  269.  
  270. main {
  271.   position: relative;
  272.   width: 100%;
  273.   min-height: 80%;
  274.   padding: 40px;
  275.   display: -webkit-box;
  276.   display: -webkit-flex;
  277.   display: -ms-flexbox;
  278.   display: flex;
  279.   -webkit-flex-flow: row wrap;
  280.       -ms-flex-flow: row wrap;
  281.           flex-flow: row wrap;
  282.   -webkit-justify-content: space-around;
  283.       -ms-flex-pack: distribute;
  284.           justify-content: space-around;
  285.   -webkit-box-align: center;
  286.   -webkit-align-items: center;
  287.       -ms-flex-align: center;
  288.           align-items: center;
  289.   -webkit-align-content: center;
  290.       -ms-flex-line-pack: center;
  291.           align-content: center;
  292. }
  293. @media screen and (min-width: 800px) {
  294.   main {
  295.     width: 800px;
  296.     margin: 0 auto;
  297.   }
  298. }
  299. .icon {
  300.   width: 120px;
  301.   height: 120px;
  302.   -webkit-box-flex: 1;
  303.   -webkit-flex: 1 0 120px;
  304.       -ms-flex: 1 0 120px;
  305.           flex: 1 0 120px;
  306.   cursor: pointer;
  307. }
  308. .icon:hover svg {
  309.   width: 60%;
  310.   height: 60%;
  311.   left: -10%;
  312.   top: 20%;
  313. }
  314. .icon:hover path {
  315.   fill: rgba(255,255,255,0.9);
  316. }
  317. .icon:hover .shadow {
  318.   fill: rgba(0,0,0,0.5);
  319.   box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
  320. }
  321. svg {
  322.   position: absolute;
  323.   width: 40%;
  324.   height: 40%;
  325.   left: 30%;
  326.   top: 30%;
  327.   overflow: visible;
  328.   position: relative;
  329.   -webkit-transition: all 0.25s ease-out;
  330.           transition: all 0.25s ease-out;
  331. }
  332. svg path {
  333.   fill: rgba(221,238,221,0.4);
  334.   -webkit-transition: all 0.25s ease-out;
  335.           transition: all 0.25s ease-out;
  336. }
  337. .shadow {
  338.   fill: transparent;
  339.   -webkit-transform-style: preserve-3d;
  340.           transform-style: preserve-3d;
  341.   -webkit-transform-origin: 50% 100%;
  342.       -ms-transform-origin: 50% 100%;
  343.           transform-origin: 50% 100%;
  344.   -webkit-transform: scale(1.2, 1.2) perspective(300px) rotateX(250deg) skew(-65deg);
  345.           transform: scale(1.2, 1.2) perspective(300px) rotateX(250deg) skew(-65deg);
  346. }
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!