You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
435 lines
7.5 KiB
435 lines
7.5 KiB
@import 'explorer.css'; |
|
.fullscreen { |
|
width: 100%; |
|
min-height: 100%; |
|
} |
|
|
|
.stretch { |
|
max-width: 100% |
|
} |
|
|
|
.langpair { |
|
display: inline-block; |
|
padding: -1px; |
|
font-family: monospace; |
|
text-align: center; |
|
/*border: 1px solid #F3F3F3;*/ |
|
margin-bottom: 10px; |
|
margin-right: 5px; |
|
font-size: initial; |
|
line-height: 1.5em; |
|
flex-grow:1; |
|
-webkit-flex-grow:1; |
|
} |
|
|
|
.footer { |
|
width: 100%; |
|
color: #fff; |
|
background-color: #6A6A6A; |
|
text-align: right; |
|
} |
|
|
|
.lengle { |
|
margin-top: 8%; |
|
margin-bottom: 8%; |
|
|
|
line-height: normal; |
|
display: inline-block; |
|
vertical-align: middle; |
|
} |
|
|
|
.lengle img { |
|
height: .7em; |
|
} |
|
|
|
.shortlang { |
|
/*background-color: #FFEEAE;*/ |
|
} |
|
|
|
.longlang { |
|
background-color: #59C6FF; |
|
color:#fff; |
|
padding-left: 5px; |
|
padding-right: 5px; |
|
border-radius: 3px; |
|
} |
|
.explorersection{ |
|
background-color: rgba(102, 142, 195, 0.19); |
|
width: 100%; |
|
padding-top: 8%; |
|
padding-bottom: 8%; |
|
} |
|
.noheight{ |
|
height: 0; |
|
} |
|
.columnwrap { |
|
max-width: 1100; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
.column { |
|
padding-left: 8%; |
|
padding-right: 8%; |
|
} |
|
.smalllogo { |
|
height: 50px; |
|
vertical-align: middle; |
|
position: absolute; |
|
left: 3%; |
|
opacity: 0; |
|
} |
|
.stickyheader { |
|
position: absolute; |
|
width: 100%; |
|
z-index: 3; |
|
text-align: right; |
|
line-height: 50px; |
|
} |
|
.headernav { |
|
padding-right: 3%; |
|
color: #fff; |
|
} |
|
.run, |
|
.running { |
|
width: 100%; |
|
height: 47px; |
|
text-align: center; |
|
position: relative; |
|
} |
|
.running { |
|
display: none |
|
} |
|
#wow .notrunning { |
|
display: none |
|
} |
|
#wow .running { |
|
display: block |
|
} |
|
.runbutton { |
|
padding-top: 9px; |
|
padding-bottom: 10px; |
|
font-weight: 500; |
|
text-align: center; |
|
color: #FFFFFF; |
|
cursor: pointer; |
|
-webkit-transition: all 0.7s ease; |
|
transition: all 0.7s ease; |
|
width: 100px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
background-color: #6A6A6A; |
|
border-radius: 5px; |
|
margin-bottom: 9px; |
|
} |
|
.runbutton:hover { |
|
text-shadow: 0px 0px 10px #27C6F9; |
|
} |
|
a { |
|
text-decoration: none; |
|
color: #5BA9F2; |
|
/*font-weight: bold;*/ |
|
} |
|
.display { |
|
// position: absolute; |
|
/*background: rgba(0,0,255,.1);*/ |
|
} |
|
svg { |
|
height: 100% |
|
} |
|
.marterial { |
|
/*position: absolute;*/ |
|
width: 100%; |
|
z-index: -1; |
|
overflow: hidden; |
|
background-color: #668EC3; |
|
/*background-image: url(../img/stars.jpeg);*/ |
|
background-size: cover; |
|
background-position: bottom; |
|
} |
|
.out { |
|
padding: 10px; |
|
padding-bottom: 0px; |
|
text-align: center; |
|
font-family: monospace; |
|
} |
|
.hint { |
|
text-align: left; |
|
padding-left: 14px; |
|
font-size: 10px; |
|
color: #56607D; |
|
} |
|
.langlabel { |
|
display: inline-block; |
|
flex-grow: 1; |
|
-webkit-flex-grow: 1; |
|
height: 40px; |
|
line-height: 40px; |
|
|
|
cursor: pointer; |
|
color: #fff; |
|
background-color: #6A6A6A; |
|
} |
|
|
|
.selected { |
|
background-color: #668EC3; |
|
} |
|
|
|
.bookend { |
|
display: inline-block; |
|
} |
|
.prog { |
|
height: 4px; |
|
width: 100%; |
|
position: absolute; |
|
bottom:0; |
|
background-color: #6a6a6a; |
|
} |
|
.prog div{ |
|
height: 100%; |
|
background-color: #5BA9F2; |
|
} |
|
|
|
.demofooter { |
|
padding: 10px; |
|
/*padding-top: 0px;*/ |
|
|
|
text-align: center; |
|
/*display: flex*/ |
|
} |
|
|
|
#wow .demofooter { |
|
display: flex; |
|
display: -webkit-flex; |
|
padding: 0px; |
|
justify-content: space-between; |
|
-webkit-justify-content: space-between; |
|
align-items: center; |
|
-webkit-align-items: center; |
|
} |
|
#logo { |
|
text-align: center; |
|
margin-top: 6%; |
|
margin-bottom: 6%; |
|
height: 182px; |
|
position: relative; |
|
/*z-index: 4;*/ |
|
} |
|
.to_ocr { |
|
width: 100%; |
|
} |
|
|
|
.demo { |
|
border-radius: 5px; |
|
width: 500px; |
|
max-width: 100%; |
|
text-align: left; |
|
top:-50px; |
|
|
|
overflow: hidden; |
|
box-shadow: 0px 40px 60px 10px rgba(0, 0, 0, .2); |
|
position: relative; |
|
background-color: #fff; |
|
opacity: 1; |
|
-webkit-transition: .7s ease-out; |
|
-moz-transition: .7s ease-out; |
|
-ms-transition: .7s ease-out; |
|
-o-transition: .7s ease-out; |
|
transition: .7s ease-out; |
|
} |
|
|
|
/*.opaque { |
|
top:-30; |
|
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .2); |
|
}*/ |
|
|
|
.demoheader { |
|
overflow: hidden; |
|
border-radius: 5px 5px 0px 0px; |
|
font-size: 8.3px; |
|
} |
|
#canvas { |
|
margin-left: auto; |
|
margin-right: auto; |
|
pointer-events: none; |
|
z-index: 0; |
|
position: absolute; |
|
/* background-image: url(../img/logowhite.png); |
|
background-size: cover; |
|
*/} |
|
|
|
.desc { |
|
text-align: left; |
|
font-size: 21px; |
|
color: #343E70; |
|
} |
|
.vr { |
|
display: inline-block; |
|
height: 40px; |
|
border-left: 1px solid #5C5C5C; |
|
} |
|
.getStarted { |
|
display: inline-block; |
|
background-color: #668EC3; |
|
color: white; |
|
font-size: 40px; |
|
padding: 20px; |
|
padding-left: 50px; |
|
border-radius: 5px; |
|
margin-top: 40; |
|
padding-right: 50px; |
|
cursor: pointer; |
|
} |
|
|
|
.randombold |
|
{ |
|
font-size: 18px; |
|
/*font-family: Georgia;*/ |
|
|
|
letter-spacing: .8px; |
|
line-height: 37px; |
|
} |
|
.rant { |
|
padding-left: 8%; |
|
padding-right: 8%; |
|
} |
|
.npm { |
|
margin-top: 20px; |
|
padding-left: 15px; |
|
background-color: #F3F3F3; |
|
border-radius: 5px; |
|
margin-bottom: 0px; |
|
padding-top: 10px; |
|
padding-bottom: 10px; |
|
border-left: 6px solid #303061; |
|
color: rgb(48, 48, 97); |
|
font-size: 19px; |
|
font-family: monospace; |
|
} |
|
.longasstag { |
|
text-align: left; |
|
white-space: normal; |
|
word-break: break-all; |
|
} |
|
#code { |
|
text-align: center; |
|
width: 335px; |
|
border-radius: 5px; |
|
margin-top: 80px; |
|
margin-bottom: 80px; |
|
max-width: 100%; |
|
} |
|
.woloasdf { |
|
padding-top: 8%; |
|
} |
|
.fork { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
border: 0; |
|
z-index: 2; |
|
} |
|
.fork img { |
|
width: 149px; |
|
} |
|
.two { |
|
width: 100%; |
|
display: -webkit-flex; |
|
display: flex; |
|
flex-wrap: wrap; |
|
-webkit-flex-wrap: wrap; |
|
justify-content: space-between; |
|
-webkit-justify-content: space-between; |
|
max-width: 1100px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
.demoheader .CodeMirror { |
|
padding-bottom: 9px; |
|
padding-top: 9px; |
|
padding-left: 13px; |
|
background-color: rgb(255, 238, 174); |
|
} |
|
hr { |
|
border: none; |
|
border-top: 1px solid #ddd; |
|
margin: 0px; |
|
} |
|
.ocroutput { |
|
position: relative; |
|
z-index: 2; |
|
} |
|
.manylangs{ |
|
display: flex; |
|
display: -webkit-flex; |
|
|
|
flex-wrap: wrap; |
|
-webkit-flex-wrap: wrap; |
|
} |
|
body { |
|
padding: 0px; |
|
margin: 0px; |
|
font-family: Lato; |
|
/*, Helvetica, Arial, sans-serif;*/ |
|
|
|
font-weight: 300; |
|
background-color: white; |
|
} |
|
button { |
|
height: 60px; |
|
width: 240px; |
|
margin-top: 10px; |
|
font: inherit; |
|
font-size: 30px; |
|
-webkit-transition: all 0.7s ease; |
|
transition: all 0.7s ease; |
|
outline: 0; |
|
color: #FFF; |
|
background: #5A4E60; |
|
border-radius: 5px; |
|
border: solid 1px #fff; |
|
} |
|
button:hover { |
|
cursor: pointer; |
|
background: rgba(255, 255, 255, 1); |
|
border: solid 1px #ddd; |
|
} |
|
@media (max-width: 1015px) { |
|
button { |
|
color: #fff; |
|
background-color: rgba(0, 0, 0, 0) |
|
} |
|
/* .desc { |
|
color: #FFFFFF; |
|
text-shadow: 0px 0px 3px rgba(58, 58, 58, 1); |
|
} |
|
.desc a { |
|
color: #FFEEAE; |
|
} |
|
*/ |
|
.getStarted { |
|
font-size: 33px; |
|
} |
|
.noheight { |
|
height: auto; |
|
} |
|
.demo { |
|
top:0; |
|
margin-bottom: 20px; |
|
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .2); |
|
} |
|
#logo { |
|
height: auto; |
|
} |
|
.two { |
|
justify-content: space-around; |
|
-webkit-justify-content: space-around; |
|
} |
|
#code { |
|
margin-top: 20px; |
|
margin-bottom: 20px; |
|
width: 400px; |
|
} |
|
#fork { |
|
width: 28%; |
|
} |
|
} |