forked from mirrors/Scribe.js
852 lines
17 KiB
CSS
852 lines
17 KiB
CSS
|
|
@font-face {
|
|
font-family: 'Fontello';
|
|
src: url('fonts/fontello.eot'); /* IE9 Compat Modes */
|
|
src: url('fonts/fontello.eot?#fontello') format('embedded-opentype'), /* IE6-IE8 */
|
|
url('fonts/fontello.woff2') format('woff2'), /* Super Modern Browsers */
|
|
url('fonts/fontello.woff') format('woff'), /* Pretty Modern Browsers */
|
|
url('fonts/fontello.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
url('fonts/fontello.svg#svgFontName') format('svg'); /* Legacy iOS */
|
|
}
|
|
|
|
|
|
/*
|
|
* Scribe.js style
|
|
*/
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: "Ubuntu Mono", Courier, monospace;
|
|
}
|
|
html,
|
|
body {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: 0;
|
|
background: #222;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.a:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pull-left {
|
|
float: left;
|
|
}
|
|
.pull-right {
|
|
float: right;
|
|
margin-right: 8px;
|
|
border-right: none !important;
|
|
border-left: 1px solid #222;
|
|
padding-left: 12px !important;
|
|
}
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.tiny {
|
|
font-size: 9px;
|
|
position: relative;
|
|
top: -3px;
|
|
width: 95px;
|
|
}
|
|
|
|
.input {
|
|
border-radius: 4px;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.bck-tag {
|
|
padding: 0px 0px;
|
|
text-transform: uppercase;
|
|
font-size: 9px;
|
|
color: #21ce99;
|
|
font-family: "Open Sans";
|
|
font-weight: bold;
|
|
/* letter-spacing: 1px; */
|
|
padding: 1px 5px;
|
|
background: #000;
|
|
border: 1px solid #2F2F2F;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
background: #000;
|
|
}
|
|
|
|
.mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(10, 10, 10, 0.2);
|
|
}
|
|
|
|
/**
|
|
* Header
|
|
*/
|
|
.header {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 4;
|
|
/* width: 100%; */
|
|
height: 50px;
|
|
background: #222;
|
|
/* border-bottom: 1px solid #222; */
|
|
/* box-shadow: 0 1px 5px #111; */
|
|
right: 0;
|
|
left: 0;
|
|
border-bottom: 1px solid #2A2A2A;
|
|
}
|
|
.header__menu-button {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 12px;
|
|
height: 30px;
|
|
width: 40px;
|
|
|
|
border-radius: 4px;
|
|
background: url("img/menu.png") center center no-repeat;
|
|
background-size: 85%;
|
|
cursor: pointer;}
|
|
.header__title {
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 55px;
|
|
height: 30px;
|
|
width: 500px;
|
|
font-size: 11px;
|
|
line-height: 40px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #FFF;
|
|
|
|
font-family: "Open Sans";
|
|
margin: 0;
|
|
}
|
|
.header__mode {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 180px;
|
|
color: #e2e2e2;
|
|
|
|
text-transform: uppercase;
|
|
font-family: "Open Sans";
|
|
font-weight: bold;
|
|
line-height: 40px;
|
|
font-size: 10px;
|
|
letter-spacing: 0;
|
|
}
|
|
.header__mode > * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.header__logo {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
width: 168px;
|
|
background: url("img/logo.png") center right no-repeat;
|
|
background-size: 65%;
|
|
}
|
|
|
|
|
|
/**
|
|
* Sidebar
|
|
*/
|
|
.sidebar {
|
|
position : absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
overflow-y: auto;
|
|
width: 300px;
|
|
background: #222;
|
|
color: #fff;
|
|
transform: translate3d(-360px, 0, 0);
|
|
-webkit-transform: translate3d(-360px, 0, 0);
|
|
transition: transform 0.5s ease;
|
|
-webkit-transition: -webkit-transform 0.5s ease;
|
|
border-right: 1px solid #2A2A2A;
|
|
}
|
|
.sidebar--open {
|
|
box-shadow: 1px 0 3px #000;
|
|
transform: translate3d(0,0,0);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
}
|
|
.sidebar__title {
|
|
font-size: 13px;
|
|
padding: 0 22px;
|
|
margin: 22px 0;
|
|
|
|
font-family: "Open Sans";
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 0;
|
|
color: #999;
|
|
font-weight: normal;
|
|
}
|
|
.sidebar__block {
|
|
list-style: none;
|
|
width: 100%;
|
|
}
|
|
.sidebar__item {
|
|
list-style: none;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
|
|
font-family: "Open Sans";
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.sidebar__item a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
|
|
font-family: "Open Sans";
|
|
text-transform: uppercase;
|
|
color: #FFF;
|
|
letter-spacing: 1px;
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/**
|
|
* Blocks
|
|
*/
|
|
.block {
|
|
display: block;
|
|
height: 44px;
|
|
margin-right: 0;
|
|
|
|
color: #FFF;
|
|
font-family: "Open Sans";
|
|
font-size: 0;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
font-weight: 300;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
|
|
background: #393e41;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
overflow: hidden;
|
|
background: #111 !important;
|
|
border-bottom: 1px solid #222;
|
|
border-radius: 0;
|
|
padding-left: 20px;
|
|
width: 100%;
|
|
text-align: left;
|
|
|
|
transition: box-shadow 250ms;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
.block:hover {
|
|
background: #595e50;
|
|
}
|
|
.block__message {
|
|
margin: 0;
|
|
font-family: "Open Sans";
|
|
text-align: center;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
|
|
letter-spacing: 0px;
|
|
position: relative;
|
|
top: 6px;
|
|
}
|
|
.block__message--top {
|
|
padding-top: 0;
|
|
}
|
|
.block__message--middle {
|
|
width: 100%;
|
|
|
|
text-align: left;
|
|
padding: 0;
|
|
position: relative;
|
|
height: auto;
|
|
font-size: 14px;
|
|
top: 6px;
|
|
font-weight: normal;
|
|
letter-spacing: 2px;
|
|
}
|
|
.block__message--top + .block__message--middle {
|
|
height: auto;
|
|
line-height: 32px;
|
|
}
|
|
{
|
|
}
|
|
{
|
|
}
|
|
.block--file:nth-child(2) {
|
|
}
|
|
.block--date {}
|
|
.block--date .block__message--top {
|
|
font-weight: 700;
|
|
|
|
color: #FFF;
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
.block--date .block__message--middle {
|
|
font-size: 11px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
display: inline-block;
|
|
width: auto;
|
|
margin-left: 3px;
|
|
}
|
|
.block--date .block__message--bottom {
|
|
font-weight: 300;
|
|
|
|
color: #888;
|
|
display: inline-block;
|
|
width: auto;
|
|
margin-left: 4px;
|
|
letter-spacing: 0px;
|
|
}
|
|
|
|
/**
|
|
* Nav
|
|
*/
|
|
.nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: #222;
|
|
border-top: 1px solid #2A2A2A;
|
|
}
|
|
.nav > .btn {
|
|
display: inline-block;
|
|
padding: 7px 12px !important;
|
|
font-size: 13px;
|
|
color: #e2e2e2;
|
|
|
|
font-family: "Fontello";
|
|
margin-right: 0 !important;
|
|
|
|
transition: background 250ms;
|
|
|
|
}
|
|
.nav > .btn:hover {
|
|
cursor: pointer;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/**
|
|
* Menu
|
|
*/
|
|
.menu {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
background: #222;
|
|
border-bottom: 1px solid #2A2A2A;
|
|
/* box-shadow: 0 1px 3px #000; */
|
|
position: fixed;
|
|
z-index: 5;
|
|
top: 49px;
|
|
overflow: hidden;
|
|
}
|
|
.actions {
|
|
margin: 0;
|
|
|
|
height: 40px;
|
|
padding-left: 17px;
|
|
}
|
|
.action {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
list-style: none;
|
|
|
|
height: 40px;
|
|
padding-left: 6px;
|
|
margin-right: 5px;
|
|
}
|
|
.action > * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
font-family: "Open Sans";
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
.action .title {
|
|
color: #888;
|
|
font-weight: 400;
|
|
|
|
font-family: "Open Sans";
|
|
text-transform: uppercase;
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
height: 40px;
|
|
margin: 0;
|
|
line-height: 39px;
|
|
}
|
|
.action--search > * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.action--search input {
|
|
height: 24px;
|
|
min-width: 190px;
|
|
font-size: 14px;
|
|
|
|
background: #222;
|
|
outline: none;
|
|
background: #333; font-size: 11px;
|
|
padding: 2px 4px; color: #FFF;
|
|
border: 1px solid #333;
|
|
transition: background 250ms;
|
|
margin-right: 5px;
|
|
}
|
|
.action--reload {
|
|
color: #888;
|
|
font-size: 9px;
|
|
|
|
font-family: "Open Sans";
|
|
text-align: center;
|
|
line-height: 20px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
background: #333;
|
|
height: 20px;
|
|
width: 62px;
|
|
padding-left: 0;
|
|
color: #AAA;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/**
|
|
* Log
|
|
*/
|
|
.logs__wrapper {
|
|
display: table;
|
|
table-layout: fixed;
|
|
max-width: 85%;
|
|
/* width: 100%; */
|
|
text-align: left;
|
|
/* padding: 15px; */
|
|
/* border-left: 5px solid #111; */
|
|
}
|
|
.log {
|
|
display: table-row;
|
|
height: auto;
|
|
width: 100%;
|
|
font-size: 9px;
|
|
line-height: 13px;
|
|
color: #bebebe;
|
|
margin: 0;
|
|
}
|
|
.log__item {
|
|
display: table-cell;
|
|
text-align: left;
|
|
padding-bottom: 2px;
|
|
padding-right: 6px;
|
|
padding-left: 0;
|
|
}
|
|
.log__number,
|
|
.log__collapse,
|
|
.log__time,
|
|
.log__location {
|
|
background: #1B1B1B;
|
|
}
|
|
|
|
.log__number {
|
|
text-align: right;
|
|
font-weight: bolder;
|
|
padding-left: 12px;
|
|
font-family: "Open Sans";
|
|
background: #333;
|
|
}
|
|
.log__collapse {
|
|
font-size: 8px;
|
|
padding-right: 10px;
|
|
padding-left: 5px;
|
|
}
|
|
.log__collapse > span {
|
|
display: block;
|
|
width: 12px; /* fix size between states */
|
|
padding: 2px 4px;
|
|
cursor: pointer;
|
|
}
|
|
.log__tags {
|
|
background: #1B1B1B;
|
|
}
|
|
.log__location > span {
|
|
color: #2980b9;
|
|
}
|
|
.log__message {
|
|
color: #FFF;
|
|
line-height: 13px;
|
|
/* margin-top: -10px; */
|
|
position: relative;
|
|
/* top: -10px; */
|
|
border-left: 1px solid #222;
|
|
/* box-shadow: inset 2px 0 2px -2px #000; */
|
|
padding-left: 10px;
|
|
}
|
|
.log__message > span {
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: pre-wrap;
|
|
font-size: 12px;
|
|
}
|
|
.log--collapse .log__message > span {
|
|
height: 13px;
|
|
line-height: 13px;
|
|
}
|
|
.log__json {
|
|
white-space: pre-wrap;
|
|
border-left: 1px solid #222;
|
|
}
|
|
.logs__empty, .logs__loader {
|
|
text-align: center;
|
|
width: 100%;
|
|
color: #e2e2e2;
|
|
position:relative;
|
|
top:50%;
|
|
margin:0 auto;
|
|
margin-top:-30px;
|
|
}
|
|
.logs__empty > * {
|
|
font-weight: 400;
|
|
|
|
font-family: "Open Sans";
|
|
color: #333;
|
|
text-transform: uppercase;
|
|
font-weight: bolder;
|
|
font-size: 22px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
|
|
/**
|
|
* ngToggle
|
|
*/
|
|
.ng-toggle-wrap {
|
|
margin: 0px;
|
|
margin-left: -7px;
|
|
}
|
|
.ng-toggle-switch {
|
|
width: 36px;
|
|
height: 17px;
|
|
}
|
|
.ng-toggle-handle {
|
|
width: 15px;
|
|
height: 15px;
|
|
left: 12px;
|
|
}
|
|
.ng-toggle-switch.true .ng-toggle-handle {
|
|
left: 20px;
|
|
}
|
|
|
|
/**
|
|
* autocomplete
|
|
*/
|
|
.autocomplete {
|
|
color: black;
|
|
}
|
|
.autocomplete > ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.sidebar__block > .autocomplete {
|
|
padding: 0 22px;
|
|
|
|
margin-top: 10px;
|
|
}
|
|
.sidebar__block > .autocomplete > ul {
|
|
left: 22px;
|
|
right: 22px;
|
|
width: auto;
|
|
|
|
border-radius: 4px;
|
|
margin-top: 5px;
|
|
overflow: hidden;
|
|
margin-bottom: 5px;
|
|
border: none;
|
|
}
|
|
|
|
|
|
.log__time__higher {
|
|
font-family: "Open Sans";
|
|
|
|
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.log__time__lower {
|
|
font-family: "Open Sans";
|
|
|
|
/* font-style: italic; */
|
|
color: #676767;
|
|
font-weight: bold;
|
|
}
|
|
|
|
ng-view.ng-scope {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
label {
|
|
position: relative;
|
|
top: -3px;
|
|
font-size: 9px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
form.ng-pristine.ng-valid {
|
|
position: relative;
|
|
}
|
|
|
|
.toggle-button {
|
|
background: #444;
|
|
color:#FFF;
|
|
border: none;
|
|
padding: 5px 20px;
|
|
border-radius: 3px;
|
|
font-family: "Open Sans";
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: 8px;
|
|
letter-spacing: 1px;
|
|
outline: none;
|
|
border: 1px solid #444;
|
|
border-bottom-width: 3px;
|
|
}
|
|
|
|
button.toggle-button.active {
|
|
background: rgb(33, 206, 153);
|
|
border-color: rgb(33, 206, 153);
|
|
}
|
|
|
|
.block:hover {
|
|
box-shadow: inset 10px 0 0 #21ce99;
|
|
}
|
|
|
|
.lowerScope {
|
|
top:89px !important;
|
|
}
|
|
.higherScope {
|
|
bottom: 29px !important;
|
|
}
|
|
|
|
.header__mode .ng-toggle-wrap {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.log:first-child .log__item {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.log:last-child .log__item {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.action--search input:focus {
|
|
color: #000;
|
|
background: #FFF;
|
|
}
|
|
|
|
/*
|
|
.toggle {
|
|
width: 62px;
|
|
height: 19px;
|
|
background: #333;
|
|
position: relative;
|
|
border-radius: 50px;
|
|
}
|
|
.toggle:after {
|
|
content: 'OFF';
|
|
color: #111;
|
|
position: absolute;
|
|
right: 7px;
|
|
z-index: 0;
|
|
font: 9px "Open Sans", sans-serif;
|
|
font-weight: bold;
|
|
top: 3px;
|
|
}
|
|
.toggle:before {
|
|
content: 'ON';
|
|
color: #14654C;
|
|
position: absolute;
|
|
left: 9px;
|
|
z-index: 2;
|
|
font: 9px "Open Sans", sans-serif;
|
|
font-weight: bold;
|
|
top: 3px;
|
|
}
|
|
.toggle .top {
|
|
background:#21ce99;
|
|
position: absolute;
|
|
left:0;
|
|
right:0;
|
|
width:100%;
|
|
height:100%;
|
|
border-radius: 50px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
top: 0;
|
|
-webkit-transition: all 0.15s ease;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.toggle label {
|
|
display: block;
|
|
width: 32px;
|
|
height: 17px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
z-index: 2;
|
|
background: #fff;
|
|
border-radius: 50px;
|
|
-webkit-transition: all 0.4s ease;
|
|
transition: all 0.4s ease;
|
|
}
|
|
.toggle input[type=checkbox] {
|
|
visibility: hidden;
|
|
}
|
|
.toggle input[type=checkbox]:checked ~ label {
|
|
left: 29px;
|
|
}
|
|
|
|
.toggle input[type=checkbox]:checked ~ .top {
|
|
opacity:1;
|
|
}
|
|
|
|
*/
|
|
|
|
/* .checkbox */
|
|
.checkbox {
|
|
width: auto;
|
|
position: relative;
|
|
}
|
|
.checkbox label {
|
|
width: 100%;
|
|
height: 13px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 3px;
|
|
text-indent: 22px;
|
|
font-family: "Open Sans";
|
|
}
|
|
.checkbox label:after {
|
|
content: '';
|
|
width: 9px;
|
|
height: 5px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 2px;
|
|
border: 3px solid #21ce99;
|
|
border-top: none;
|
|
border-right: none;
|
|
background: transparent;
|
|
opacity: 0;
|
|
-webkit-transform: rotate(-45deg);
|
|
-ms-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.checkbox label:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 2px;
|
|
background: #111;
|
|
border: 1px solid #333;
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
.checkbox label:hover::after {
|
|
opacity: 0.3;
|
|
}
|
|
.checkbox input[type=checkbox] {
|
|
visibility: hidden;
|
|
}
|
|
.checkbox input[type=checkbox]:checked + label:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.log__time_80 {
|
|
min-width: 80px;
|
|
}
|
|
|
|
.log__time_122 {
|
|
min-width: 122px;
|
|
}
|
|
|
|
/*
|
|
* Loader
|
|
* @see https://github.com/tobiasahlin/SpinKit
|
|
*/
|
|
.sk-spinner-wave.sk-spinner {
|
|
margin: 0 auto;
|
|
width: 50px;
|
|
height: 30px;
|
|
text-align: center;
|
|
font-size: 10px; }
|
|
.sk-spinner-wave div {
|
|
background-color: #333;
|
|
height: 100%;
|
|
width: 6px;
|
|
display: inline-block;
|
|
-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
|
|
animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
|
|
.sk-spinner-wave .sk-rect2 {
|
|
-webkit-animation-delay: -1.1s;
|
|
animation-delay: -1.1s; }
|
|
.sk-spinner-wave .sk-rect3 {
|
|
-webkit-animation-delay: -1s;
|
|
animation-delay: -1s; }
|
|
.sk-spinner-wave .sk-rect4 {
|
|
-webkit-animation-delay: -0.9s;
|
|
animation-delay: -0.9s; }
|
|
.sk-spinner-wave .sk-rect5 {
|
|
-webkit-animation-delay: -0.8s;
|
|
animation-delay: -0.8s; }
|
|
|
|
@-webkit-keyframes sk-waveStretchDelay {
|
|
0%, 40%, 100% {
|
|
-webkit-transform: scaleY(0.4);
|
|
transform: scaleY(0.4); }
|
|
|
|
20% {
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1); } }
|
|
|
|
@keyframes sk-waveStretchDelay {
|
|
0%, 40%, 100% {
|
|
-webkit-transform: scaleY(0.4);
|
|
transform: scaleY(0.4); }
|
|
|
|
20% {
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1); } }
|