| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- html, body{
- height: 100%;
- min-height: 100%;
- background: #E9EBEC;
- -webkit-font-smoothing: initial;
- text-rendering: initial;
- }
- html{
- font-family: 'Raleway', sans-serif;
- font-weight: 200;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
- }
- body{
- display: -webkit-flex;
- -webkit-align-items: center;
- -webkit-justify-content: center;
- display: flex;
- align-items: center;
- justify-content: center;
- -webkit-animation-duration: 3s;
- animation-duration: 3s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-name: fadeIn;
- animation-name: fadeIn;
- }
- html p, body p{
- line-height: inherit;
- }
- h1{
- margin: 0.2em 0;
- color: rgba(40, 33, 33, .7);
- color: rgba(124, 98, 152, 1);
- font-weight: 400;
- }
- header{
- background: #00C8BE;
- padding: 0.3em 1em;
- position: relative;
- z-index: 20;
- }
- .viewCode header{
- box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
- }
- .showcode{
- background: rgb(232, 216, 49);
- color: rgba(124, 98, 152, 1);
- width: 40px;
- height: 40px;
- text-align: center;
- position: absolute;
- right: 1em;
- bottom: 0;
- margin-bottom: -15px;
- border-radius: 100%;
- font-size: 16px;
- cursor: pointer;
- box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
- transition: all .3s;
- }
- .viewCode .showcode{
- -webkit-transform: rotateX(-180deg);
- transform: rotateX(-180deg);
- box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);
- }
- .icon-nocode, .icon-yepcode{
- transition: opacity .3s;
- position: absolute;
- left: 0;
- display: block;
- width: 100%;
- line-height: 40px;
- }
- .icon-nocode{
- opacity: 0;
- }
- .viewCode .icon-nocode{
- opacity: 1;
- }
- .viewCode .icon-yepcode{
- opacity: 0;
- }
- .panel{
- width: 90%;
- position: relative;
- max-width: 650px;
- box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
- background: #F5F5F5;
- border-radius: 3px;
- overflow: hidden;
- }
- article{
- min-height: 180px;
- padding: 1em;
- font-weight: 200;
- line-height: 1.5em;
- position: relative;
- }
- footer{
- padding: 0.3em 1em 1em;
- }
- footer a, footer a:active, footer a:visited{
- color: inherit;
- }
- .code{
- position: absolute;
- top: 0;
- top: 0;
- left: 0;
- right: 0;
- height: 100%;
- overflow: scroll;
- background: rgba(124, 98, 152, 0.94);
- color: rgba(245, 247, 247, 0.92);
- padding: 0em 1em;
- transition: all .4s;
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- .code p:first-child{
- margin-top: 2em;
- }
- .code a{
- color: rgba(232, 216, 49, 0.9);
- }
- .viewCode .code{
- -webkit-transform: translateY(0);
- transform: translateY(0);
- box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);
- }
- .actions{
- font-weight: 300;
- text-transform: uppercase;
- font-size: 0.8em;
- padding: 1em;
- border: none;
- background: none;
- transition: color .2s;
- cursor: pointer;
- }
- .actions:hover{
- color: rgb(30, 30, 171);
- background: #F5F5F5;
- box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
- }
- code, pre {
- background: rgba(255,255,255,0.1);
- color: rgba(232, 216, 49, 0.9);
- font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New",monospace;
- padding: 0.5em;
- border-radius: 3px;
- margin: 1em 0;
- }
- code{
- display: inline;
- vertical-align: middle;
- margin: 0;
- }
- pre{
- display: block;
- }
- .striked{
- text-decoration: line-through;
- }
- .mfb-component--tl{
- animation: fromTop 1s 1;
- -webkit-animation: fromTop 1s 1;
- }
- .mfb-component--tr{
- animation: fromTop 1.3s 1;
- -webkit-animation: fromTop 1.3s 1;
- }
- .mfb-component--br{
- animation: fromBottom 1.6s 1;
- -webkit-animation: fromBottom 1.6s 1;
- }
- .mfb-component--bl{
- animation: fromBottom 1.9s 1;
- -webkit-animation: fromBottom 1.9s 1;
- }
- @keyframes fromBottom {
- 0% {
- transform: translateY(250px);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @keyframes fromTop {
- 0% {
- transform: translateY(-250px);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @-webkit-keyframes fromBottom {
- 0% {
- transform: translateY(250px);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @-webkit-keyframes fromTop {
- 0% {
- transform: translateY(-250px);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @-webkit-keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
|