/*
// Sshwifty - A Web SSH client
//
// Copyright (C) 2019-2020 Rui NI <nirui@gmx.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as
// published by the Free Software Foundation, either version 3 of the
// License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

@charset "utf-8";

@import "~hack-font/build/web/hack.css";

#connector-resource-preload-control-console {
  font-family: Hack;
}
#connector-resource-preload-control-console::after {
  content: " ";
  font-family: Hack;
  font-weight: bold;
}
#connector-resource-preload-control-console::before {
  content: " ";
  font-family: Hack;
  font-style: italic;
}

#home-content > .screen > .screen-screen > .screen-console {
  position: relative;
}

#home-content > .screen > .screen-screen > .screen-console > .console-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  background: #222;
  color: #fff;
  box-shadow: 0 0 5px #0006;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group.console-toolbar-group-left {
  border-right: 1px solid #0001;
  margin-right: -1px;
  float: left;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group.console-toolbar-group-main {
  border-left: 1px solid #0001;
  overflow: auto;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item {
  padding: 15px;
  float: left;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item
  .tb-title {
  font-size: 0.7em;
  text-transform: uppercase;
  margin: 0 0 5px 10px;
  color: #fff9;
  text-shadow: 1px 1px 1px #0005;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item
  .tb-item {
  display: block;
  font-size: 0.7em;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: 3px;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item
  .tb-item:active {
  background: #fff3;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item
  .tb-item
  > .tb-key-icon {
  margin: 0 5px;
  background: #fff2;
  color: #fff;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item
  .tb-item
  > .tb-key-icon.tb-key-resize-icon {
  display: block;
  padding: 5px;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item
  .tb-item
  > .tb-key-icon:first-child {
  margin-left: 0;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item
  .tb-item
  > .tb-key-icon:last-child {
  margin-right: 0;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-toolbar
  > .console-toolbar-group
  > .console-toolbar-item
  .tb-item:active
  .tb-key-icon {
  opacity: 0.5;
}

#home-content > .screen > .screen-screen > .screen-console > .console-console {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  color: #fff;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-console
  > .console-loading {
  text-align: center;
  font-size: 1em;
  font-weight: lighter;
}

#home-content
  > .screen
  > .screen-screen
  > .screen-console
  > .console-console
  > .console-loading
  > .console-loading-icon {
  background: url(./busy.svg) 50% no-repeat;
  width: 100%;
  height: 100px;
}