web-bluetooth-terminal/css/styles.css

Progressive Web Application for serial communication with your own Bluetooth Low Energy (Smart) devices

*:focus {
  outline: none; }

html, body, .app {
  height: 100%;
  max-height: 100%;
  min-height: 100%; }

body {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.87);
  font-family: 'Roboto Mono', monospace;
  font-size: 16px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.app {
  display: flex;
  flex-direction: column; }

button {
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.87);
  cursor: pointer;
  margin: 0;
  padding: 12px;
  transition: background 0.3s, color 0.3s;
  user-select: none; }
  button:active {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.54); }
  button i.material-icons {
    vertical-align: middle; }

.toolbar {
  align-items: center;
  display: flex;
  flex-shrink: 0; }
  .toolbar .name {
    flex-grow: 1;
    padding: 0 8px;
    user-select: none; }
  .toolbar .buttons {
    flex-shrink: 0; }
    .toolbar .buttons button {
      float: left; }

.terminal {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-width: 1px 0;
  flex-grow: 1;
  overflow: auto;
  padding: 4px 0; }
  .terminal div {
    color: #9E9E9E;
    line-height: 1;
    padding: 4px 8px;
    word-break: break-word; }
    .terminal div.out {
      color: #F44336; }
    .terminal div.in {
      color: #2196F3; }

.send-form {
  display: flex;
  flex-shrink: 0; }
  .send-form input {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.87);
    flex-grow: 1;
    font: normal 16px/1.5 'Roboto Mono', monospace;
    padding: 0 8px; }
    .send-form input::placeholder {
      color: rgba(0, 0, 0, 0.54); }
  .send-form button {
    flex-shrink: 0; }