chrome/browser/resources/vr_shell/vr_shell_ui.css

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

html {
  background-color: rgba(255, 255, 255, 0);
}

#ui {
  --scaleFactor: 4;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0.25, 0.25);
  transform-origin: left top;
  width: 400%;
}

/* This class manages the position of elements on the texture page.
 * Each UI element should have a bounding div of this class. */
.ui-element {
  float: left;
  margin: 2px;
}

.webvr-message-box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Permanent security warning for WebVR. */
#webvr-not-secure-permanent {
  height: 128px;
  width: 512px;
}

#webvr-not-secure-permanent .webvr-not-secure-icon {
  display: inline-block;
  margin: 20px 0;
  vertical-align: middle;
}

#webvr-not-secure-permanent .webvr-string {
  display: inline-block;
  margin: 20px 10.5px;
  vertical-align: middle;
}

/* This is a single-line (nowrap) short message. The width has some elasticity
 * for translations, and the underlying string had a request to translators
 * to keep it short. The maximum is based on the fixed-size container DIV,
 * excess will be clipped. There's space for about twice the length of the
 * English "Not secure" message. */
#webvr-not-secure-permanent .webvr-box {
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  color: #444;
  font-size: 26px;
  height: 78px;
  max-width: 472px;
  min-width: 226px;
  overflow: hidden;
  padding: 0 20px;
  white-space: nowrap;
}

/* Transient security warning for WebVR. */
#webvr-not-secure-transient {
  height: 256px;
  width: 512px;
}

/* This uses fixed width but the height has some elasticity for translations.
 * The maximum is based on the fixed-size container DIV, excess will be
 * clipped. */
#webvr-not-secure-transient > div {
  background-color: rgba(26, 26, 26, 0.8);
  border-radius: 6px;
  box-sizing: border-box;
  color: white;
  display: flex;
  flex-direction: column;
  font-size: 26px;
  justify-content: center;
  line-height: 1.4;
  max-height: 210px;
  min-height: 160px;
  overflow: hidden;
  padding: 20px;
  text-align: center;
  width: 512px;
}

.round-button .button {
  background-color: #eee;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  height: 96px;
  margin: auto auto;
  opacity: 0.8;
  transition: opacity 150ms ease-in-out;
  width: 96px;
}

.round-button .caption {
  color: white;
  font-size: 24px;
  max-width: 192px;
  opacity: 0;
  overflow: hidden;
  text-align: center;
  transition: opacity 150ms ease-in-out;
  white-space: nowrap;
}

#back .button {
  background-image: url(../../../../ui/webui/resources/images/vr_back.svg);
}

#reload .button {
  background-image: url(../../../../ui/webui/resources/images/vr_reload.svg);
}

#forward .button {
  background-image: url(../../../../ui/webui/resources/images/vr_back.svg);
  transform: scaleX(-1);
}

#reload-ui-button {
  background-color: #555;
  color: white;
  font-size: 24px;
  padding: 12px;
}

#omni-container {
  --tranX: 0;
  --tranY: -0.65;
  --tranZ: -1.2;
}

#omni {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 100px;
  box-sizing: border-box;
  display: flex;
  height: 104px;
  justify-content: center;
  margin-bottom: 60px;
  margin-top: 0;
  opacity: 1;
  transition: opacity 500ms ease, margin-top 500ms ease;
  white-space: nowrap;
  width: 512px;
}

#omni-content {
  align-items: center;
  display: flex;
  max-width: 448px;
}

#omni .connection-security {
  height: 50px;
  margin-right: 10px;
  width: 50px;
}

#omni #url {
  color: #252525;
  font-size: 34px;
  overflow: hidden;
  white-space: nowrap;
}

#omni #path {
  color: #868686;
}

#omni.hide {
  margin-bottom: 0;
  margin-top: 60px;
  opacity: 0;
}

#omni.loading {
  border: 4px solid rgb(86, 203, 255);
}

#omni.idle {
  background-color: #ececec;
}

#omni.idle #domain {
  color: black;
}