mock-service
Version:
212 lines (181 loc) • 3.76 kB
CSS
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
margin: 0;
}
.pull-left {
float: left ;
}
/**/
.header {
width: 100%;
height: 44px;
background: #4679BD;
}
.header > .brand {
float: left;
height: 100%;
display: none;
}
.header > .brand > .logo {
float: left;
height: 100%;
overflow: hidden;
display: none;
}
.header > .brand > .logo > img {
width: 200px;
margin-top: -55px;
}
.header > .brand > .name {
float: left;
line-height: 44px;
vertical-align: middle;
font-family: monospace, serif;
font-size: 22px;
color: #FFF;
width: 100px;
margin: auto 10px;
text-align: center;
}
.header > .nav {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
height: 100%;
}
.header > .nav > li {
float: left;
height: 100%;
margin-right: 1px;
}
.header > .nav > li > a {
outline: 0;
display: block;
outline: none;
text-decoration: none;
color: #fff;
/*background-color: #4072B4;*/
background: rgba(0, 0, 0, 0.2);
padding: 0px 10px;
/*width: 100px;*/
line-height: 44px;
padding: 0 20px;
vertical-align: middle;
text-align: center;
}
.header .navbar-right {
float: right ;
}
/**/
.viewport {
width: 100%;
height: 100%;
background-color: #F6F6F6;
transition: opacity .4s;
-moz-transition: opacity .4s;
-webkit-transition: opacity .4s;
-o-transition: opacity .4s;
-ms-transition: opacity .4s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
opacity: 0;
}
.viewport .box {
position: relative;
width: 50%;
height: 100%;
box-sizing: border-box;
border: 1px solid #C0C0C0;
box-shadow: inset 0 1px 2px #E4E4E4;
}
.viewport .sidebar {
display: none;
width: 30%;
height: 100%;
}
.viewport .sidebar .help,
.viewport .sidebar .about,
.viewport .sidebar .account {
width: 100%;
height: 100%;
overflow: auto;
display: none;
}
.viewport .sidebar .content {
padding: 10px;
/*color: #FFF;*/
}
.viewport .box,
.viewport .sidebar {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.viewport textarea {
width: 100%;
height: 100%;
overflow: auto;
vertical-align: top;
font-family: monospace, serif;
font-size: 100%;
margin: 0px;
border: 0px;
padding: 0px;
opacity: 0.8;
}
.viewport .badge {
position: absolute;
right: 15px;
top: 15px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
color: #FFF;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #0090FF;
border-radius: 16px;
z-index: 2;
}
.viewport-sidebar .box {
width: 35%;
}
.viewport-sidebar .sidebar {
display: block;
}
.viewport-help > .sidebar > .help,
.viewport-about > .sidebar > .about,
.viewport-account > .sidebar > .account {
display: block;
}
/**/
.CodeMirror {
height: 100%;
}
/*.pre {
white-space: pre-wrap;
font-family: monospace, serif;
font-size: 1em;
}
.save,
.update,
.tidy,
.share {
width: 75px;
}
.badge {
color: #FFF;
background-color: #428BCA;
}*/