web/browser/components/mover/index.css

/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import "../base/variables.css";
@import "../base/typography.css";

.overlayBackground {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  width: 100%;
  height: 100%;
}

.addButton {
  position: fixed;
  background-color: var(--deeporange-A200);
  color: var(--white);
  z-index: 150;
  width: 5%;
  height: 96%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.addBeforeButton {
  top: 2%;
  left: 2%;
}

.addAfterButton {
  top: 2%;
  left: 93%;
}

.textButton {
  background-color: var(--blue-grey-800);
  color: var(--white-54);
  z-index: 150;
  width: 10%;
  height: 3em;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
}

.cancelBeforeAfterButton {
  position: fixed;
  top: 40%;
  left: 45%;
}

.movingThisDevice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.moveDeviceRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

.deviceMovementSpace {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.buttonRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

.moveDevice {
  border: 2px solid var(--deeporange-A200);
  background-color: var(--grey-700);
  color: var(--deeporange-A200);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  height: 75px;
  width: 50px;
  margin: 20px;
}

.moveTarget {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-color: var(--grey-700);
  z-index: 150;
  margin: 20px;
}

.overMoveTarget {
  height: 35px;
  width: 35px;
  background-color: var(--deeporange-A200);
  margin: 15px;
}

.deviceTile {
  border: 2px solid var(--white-54);
  background-color: var(--grey-700);
  color: var(--deeporange-A200);
  z-index: 150;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  height: 75px;
  width: 50px;
  margin: 20px;
}

.linkLabel {
  color: var(--white-54);
}