remoting/webapp/crd/html/window_frame.css

/* Copyright 2014 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.
 */

.window-body {
  position: relative;
}

html.apps-v2,
html.apps-v2 body {
  height: 100%;
  width: 100%;
}

html.apps-v2 body:not(.fullscreen) {
  border: 1px solid gray;  /* This is the window border. */
}

.title-bar {
  z-index: 100;
  width: 100%;
  background-color: #c4c4c4;
}

.window-controls-and-title {
  display: flex;
}

.window-title {
  line-height: 32px;
  font-size: 14px;
}

.title-bar .window-title {
  padding-__MSG_@@bidi_start_edge__: 12px;
  width: 100%;
  display: inline-block;
  flex: 1;
}

.title-bar:not(.menu-opened) .window-title {
  -webkit-app-region: drag;
}

.window-control {
  width: 32px;
  height: 32px;
  padding-top: 9px;
  padding-right: 1px;
  text-align: center;
  display: inline-block;
}

.window-control > span.menu-button-activator {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.window-control:hover {
  background-color: #d5d5d5;
}

.window-control:active {
  background-color: #a6a6a6;
}

.window-control img {
  margin-bottom: -2px;
}

.window-controls-stub {
  display: none;
  height: 8px;
  background: url(drag.webp);
  background-position: 2px 1px;
}

#scroller {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
}

html.apps-v2 .window-body {
  height: calc(100% - 32px);  /* Allow space for the title-bar */
}

/* Add an etched border to the window controls, title bar and stub */
.window-title,
.window-control,
.window-controls-stub {
  position: relative;
}

.window-title::after,
.window-control::after,
.window-controls-stub::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);  /* darken bottom slightly */
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
  box-sizing: border-box;
}

/* Remove dark borders for elements that are adjacent an existing border. */
.window-close::after {
  border-right: none;
}

.window-controls-stub::after {
  border-bottom: none;
  border-right: none;
}

/*
 * Some UI (the Disconnect button and some menu items) are only displayed when
 * connected.
 */
body:not(.connected) .connected-only {
  display: none;
}


/*
 * When in full-screen mode, significant changes are made:
 * - The scroll-bars are removed.
 * - The window controls have a border (so the left-border of the first button
 *   is not needed).
 * - The window title is not displayed.
 * - The stub is visible.
 * - The window controls gain transition effects for position and opacity and
 *   auto-hide behind the top edge of the screen.
 * - A border is added to the window controls to ensure they stand out against
 *   any desktop.
 * - The window border is removed.
 * - The full-screen button is removed.
 * - On Mac, the minimize button is removed.
 */

html.apps-v2 body.fullscreen #scroller {
  overflow: hidden;
}

html.apps-v2 body.fullscreen .window-body {
  height: 100%;
}

body.fullscreen .title-bar {
  border: 1px solid #a6a6a6;
}

body.fullscreen .window-title {
  display: none;
}

body.fullscreen .title-bar {
  position: fixed;
  width: initial;  /* Override the 100% width when windowed. */
}

body.fullscreen .window-controls-and-title {
  display: inline-flex;
}

body.fullscreen .window-controls-stub {
  display: block;
}

body.fullscreen .title-bar {
  transition-property: opacity, box-shadow, top;
  transition-duration: 0.3s;
  opacity: 0.7;
  top: -33px;
  __MSG_@@bidi_end_edge__: 8px;
}

body.fullscreen .title-bar:hover,
body.fullscreen .title-bar.menu-opened,
body.fullscreen .title-bar.opened,
body.fullscreen .title-bar.preview {
  top: -4px;
  opacity: 1.0;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

.fullscreen .title-bar.opened .window-controls-stub {
  background-color: #a6a6a6;
}

body.fullscreen .window-fullscreen {
  display: none;
}

body.fullscreen.os-mac .window-minimize {
  display: none;
}