// style.css
// A component of OakTerm, a terminal app for the Digistump Oak
// https://github.com/kh90909/OakTerm
//
// Authors: Ken Healy, Eric McNiece
//
// @licstart
//
// Copyright (C) 2016 Digistump LLC
//
// This file is licensed under the MIT License
// A copy of this license may be found at http://opensource.org/licenses/MIT
//
// @licend

/* Terminal Content */
.selected{
  background-color: #1f8dd6;
  color: white;
}

.timestamp { color: #848484; }

.text_stdin     { color: #808080; }
.text_stdout    { color: #ffffff; }
.text_stderr    { color: #d9534f; }
.text_event     { color: #DCDC00; }
.text_sentevent { color: #f0ad4e; }
.text_variable  { color: #5bc0de; }
.text_function  { color: #5cb85c; }
.text_devadm { color: #a0a0ff; }

[class^="text_"] {
    text-indent: -11ch;
    padding-left: 11ch;
}

.hide_timestamp  .timestamp,
.hide_stdin .text_stdin,
.hide_stdout .text_stdout,
.hide_stderr .text_stderr,
.hide_event .text_event,
.hide_sentevent .text_sentevent,
.hide_variable .text_variable,
.hide_function .text_function,
.hide_devadm .text_devadm { display: none; }

.hide_timestamp [class^="text_"] {
    text-indent: 0ch;
    padding-left: 0ch;
}

.hide_timestamp .text_stdout { display: inline; }


.popover-content{ color: #000000 !important; }
.popover-title{ display: none; }

.var-type-bool  { background-color:#0275d8; border-color: #0275d8; }
.var-type-int32 { background-color:#d08d2e; border-color: #d08d2e; }
.var-type-string { background-color:#449d44; border-color: #449d44; }
.var-type-double{ background-color:#d9534f; border-color: #d9534f; }

.var-type-bool:hover  { background-color:#025aa5; border-color: #01549b; }
.var-type-int32:hover { background-color:#cc7b12; border-color: #be7211; }
.var-type-string:hover { background-color:#3f8536; border-color: #3b7e33; }
.var-type-double:hover{ background-color:#c9302c; border-color: #c12e2a; }


/* Global styling */
html{ font-size:14px; overflow-y: scroll !important;}
body, html{ background: #252830; color:#fff; }
.align-right{ text-align: right; }
.float-right{ float:right; }
.center{ text-align: center; }
::-webkit-scrollbar {
    width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: rgba(67,72,87,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(67,72,87,0.4);
}

#show-sidebar{
  padding-top: 0.26rem;
  padding-bottom: 0.13rem;
  line-height: 1;
}

#title-logo{
  height: 2.25rem;
  margin: 0;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

/* Bootstrap Overrides */
html.no-scroll-bars{ overflow-y: auto !important;}
html.no-scroll-bars body::-webkit-scrollbar,
html.no-scroll-bars .fixed-sidebar::-webkit-scrollbar{ display: none }
body.modal-open { overflow: hidden!important; }
body.modal-open::-webkit-scrollbar{ display: none }

.form-control:not(.form-control-func-arg) {
  display: block;
  width: 100%;
  height: 35px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
  background-color: #434857;
  border: 1px solid #434857;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.collapsing{ clear:both; }
.form-control-func-arg {
  color: #ffffff;
  background-color: #434857;
}

.btn-primary-outline:focus,
.btn-primary-outline:active{ background: transparent; }
.form-control:focus {
  color: #252830;
  background-color: #fff;
  box-shadow: none;
  border-color: #ffffff;
  outline: 0;
}
.fixed-sidebar{
  left: 0;
  color:#fff;
  position: fixed;
  padding-top:10px;
  padding-bottom:10px;
  top: 70px;
  bottom: 70px;
  height: auto;
  overflow-y:auto;
  overflow-x: hidden;
  z-index: 1;
}
.file-input-hidden [type="file"]{
  display: none;
}
.file-input-hidden{ margin:0;}
.navbar label{ margin:0;}
.centered{
  text-align: center;
}
#footer .form-group.row{ margin:0;}
table{ background-color: transparent;}
table td, table th{color: #cfd2da; }
.table td{ border-color: #434857; }
.table thead th{ border-top:0px none; border-color: #434857; }
table.compact th,
table.compact td{
  padding:.45rem;
  font-size:.9rem;
}
.flex-input{ display: flex; }
.flex-input select, .flex-input input{ flex: 1}
.flex-input button{ margin-left:.5rem;}
.form-control.compact{
  height:auto;
  padding:0 13px;
  font-size:12px;
}

/* Access Control */
#login{ display: none; padding-top:30px; }
#terminal{ display: none; }

/* Login Form */
#login_error{ display: none; }

#login-logo{
  height: 6rem;
  padding-bottom: 1rem;
  margin-right: 2rem;
}

.login-vert-spacer{
    height: 10vh;
}

/* Terminal Areas */
#header,#footer,#content{
  color:#fff;
}
#header, #footer, #sidebar{
  background: #252830;
}
#header{
  height:auto;
  top:0;
  left:0;
  border-width: 1px;
  border-bottom: 1px gray solid;
  padding-top:.5em;
  padding-bottom:.5em;
}
#header h1{ margin:0; }
#footer{
  bottom:0;
  border-width: 1px 0 0 0;
  border-top: 1px gray solid;
  padding-top: .5em;
  padding-bottom: .5em;
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  z-index: 2;
}
#content{
  font-family: Consolas, monospace, sans-serif;
  padding-top:70px;
  padding-bottom:70px;
}

#content-background{
  position: fixed;
  top: 70px;
  bottom: 70px;
  padding: 30px;
  background-image: url('../images/DigistumpLogoHigh.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: content-box;
  opacity: 0.1;
}

/* Modal */
.modal{
  color:#373a3c;
}
.modal .form-control{
  background-color: #f1f1f1;
  color:#373a3c;
  border-color:#bbbbbb;
  box-shadow: none;
}
.modal .form-control:focus{
  border-color:#373a3c;
}
.modal .has-danger .form-control{ border-color:#d9534f; }
.modal .has-warning .form-control{ border-color:#f0ad4e; }
/* Sidebar and Controls */
#show-sidebar{
  color:#fff;
  font-size:2rem;
  z-index: 1;
}
#sidebar .wrap{ margin:1rem 0 2em 0;}
#sidebar .form-group{
  border-top:2px solid #434857;
  margin:.33rem 0;
  padding:calc(.33rem + 2px) 0;
}
#devstatus .label{ display: none; }
#devstatus[data-status="true"] .online{ display: inline;}
#devstatus[data-status="false"] .offline{ display: inline;}
.sidebar-category-header button{ width:31px; }
.sidebar-category-header-element{ line-height: 1.55; cursor: pointer; margin: 0;}
.func-arg-label{ float: left; margin-right: 4px;}
a.func { color: #cfd2da;}
.hint-icon {
    color: #A0A0A0;
    margin-left: 5px;
    vertical-align: middle;
}
a.about-link  {
  display: block;
  padding-top: 0.75rem;
  color: #cfd2da;
  font-size: 75%;
}

label.btn {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 767px){
  .sm-center{ text-align: center; }
  .sm-align-right{ text-align: right; }
  .sm-align-left{ text-align: left; }

  .fixed-sidebar{
    transform:translateX(-100%);
    transition: transform 0.2s ease-out;
    min-width:50%;
  }

  #content-background{
    width:100%;
  }

  .fixed-sidebar.open{
    transform:translateX(0%);
  }
  #footer > div[class^="col-"]{ margin:3px 0;}
}

@media (max-width: 570px){
  .col-sm-3{
    width: 100%;
    text-align: center;
  }
  .col-sm-8{
    width: 100%;
    text-align: center;
  }
  #title-logo{
    margin-bottom: 0.3rem;
  }
  #show-sidebar{
    position: absolute;
    top:7px;
    left:13px;
  }
}

@media (max-width: 543px){
  .xs-center{ text-align: center; }
  .xs-align-right{ text-align: right; }
  .xs-align-left{ text-align: left; }
  .fixed-sidebar{
    width:100%;
  }
  html.sidebar-open{
    overflow-y: hidden!important;
  }
}