nassh/css/nassh_connect_dialog.css

/*
 * Copyright (c) 2012 The Chromium OS Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

/**
 * Styles used by the connect dialog box.
 */

/* Default colors here will be updated on the fly. */
:root {
  --nassh-bg-color: rgb(16, 16, 16);
  --nassh-fg-color: rgb(240, 240, 240);
  --nassh-cursor-color: rgba(255, 0, 0, 0.5);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--nassh-bg-color);
  color: var(--nassh-fg-color);
}

:focus {
  outline: 2px var(--nassh-cursor-color-50) solid;
}

.dialog-body {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

input, select {
  border: 1px solid;
  padding: 3px;
  line-height: 1.2;
  font-size: inherit;
  font-family: inherit;
  margin: 0.25em;
  background-color: rgba(255, 255, 255, 0.95); /* yes, white */
}

input[type="file"] {
  position: absolute;
  top: -100px;
  left: 0px;
}

input:invalid {
  font-weight: bold;
  color: red;
  border: 1px solid red;
}

div[role="button"] {
  border: 2px var(--nassh-fg-color-75) solid;
  background-color: var(--nassh-fg-color-20);
  margin: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  color: var(--nassh-fg-color);
  font-size: smaller;
  cursor: default;
  -webkit-user-select: none;
}

div[role="button"] .key {
  font-weight: bold;
}

div[role="button"][disabled] {
  opacity: 0.5;
}

.shortcut {
  color: var(--nassh-fg-color);
}

a {
  color: var(--nassh-fg-color);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

.column-list-item.active div {
  background-color: var(--nassh-fg-color-75);
  color: var(--nassh-bg-color);
  font-weight: bold;
}

.column-list-item div {
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.column-list:focus {
  outline: none;
}

.column-list:focus .column-list-item.active div {
  background-color: var(--nassh-cursor-color-75);
  outline: none;
}

/**
 * The billboard is the large area with the contrasting background.
 */
.dialog-billboard {
  flex: 0 1 auto;
  padding: 1em;
  background-color: var(--nassh-fg-color-20);
  color: var(--nassh-fg-color);
  margin: 1em;
  box-shadow:
    0 0 0 2px var(--nassh-bg-color),
    0 0 0 4px var(--nassh-fg-color-75);
  overflow: auto;
}

/**
 * The road is the smaller area with the dotted border.
 */
.dialog-road {
  margin: 0.25em;
  margin: 1em;
  margin-bottom: 0;
  padding: 0.5em;
  border: 1px var(--nassh-fg-color-75) dotted;
  background-color: rgba(255, 255, 255, 0.1);
  min-height: 5em;
  -webkit-user-select: none;
}

.dialog-buttons {
  margin: 1em;
  margin-top: 0;
}

#field-username,
#field-relay-port,
#field-port {
  max-width: 10em;
}

.terminal-profile,
#field-identity {
  min-width: 15em;
}

#mount,
#mount-path,
#unmount {
  display: none;
}