| /* 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. |
| */ |
| |
| 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. */ |
| } |
| |
| html.apps-v2 .title-bar { |
| border-bottom: 1px solid gray; |
| z-index: 100; |
| } |
| |
| .window-title, |
| .window-controls-hover-target { |
| height: 32px; |
| line-height: 32px; |
| font-size: 16px; |
| background-color: #c4c4c4; |
| } |
| |
| .title-bar .window-title { |
| padding-__MSG_@@bidi_start_edge__: 12px; |
| width: 100%; |
| display: inline-block; |
| -webkit-app-region: drag; |
| } |
| |
| .window-controls-hover-target { |
| -webkit-app-region: no-drag; |
| position: fixed; |
| top: 1px; |
| __MSG_@@bidi_end_edge__: 1px; |
| } |
| |
| .window-controls-hover-target { |
| display: table; |
| } |
| |
| .window-controls-hover-target > div:first-child { |
| display: table-row; |
| } |
| |
| .window-control { |
| height: 32px; |
| width: 32px; |
| text-align: center; |
| display: inline-block; |
| border-__MSG_@@bidi_start_edge__: 1px solid rgba(0, 0, 0, 0.2); |
| } |
| |
| .window-control:hover { |
| background-color: #d5d5d5; |
| } |
| |
| .window-control:active { |
| background-color: #a6a6a6; |
| } |
| |
| .window-control > img { |
| margin-bottom: -2px; |
| } |
| |
| .window-controls-stub { |
| display: none; |
| -webkit-column-span: all; |
| line-height: 3px; |
| background: url("drag.webp"); |
| border-top: 1px solid rgba(0, 0, 0, 0.2); |
| } |
| |
| #scroller { |
| height: 100%; |
| width: 100%; |
| overflow: auto; |
| position: relative; |
| } |
| |
| html.apps-v2 #scroller { |
| height: calc(100% - 32px); /** Allow space for the title-bar */ |
| } |
| |
| /* Add an etched border to the window controls, title bar and stub */ |
| .title-bar, |
| .window-control, |
| .window-controls-stub { |
| position: relative; |
| } |
| |
| .title-bar:after, |
| .window-control:after, |
| .window-controls-stub:after { |
| content: ""; |
| width: 100%; |
| height: 100%; |
| position: absolute; |
| top: 0; |
| left: 0; |
| border-left: 1px solid rgba(255, 255, 255, 0.2); |
| border-top: 1px solid rgba(255, 255, 255, 0.2); |
| pointer-events: none; |
| } |
| |
| |
| /* When connected to a host, the Disconnect button is displayed. */ |
| body:not(.connected) .window-disconnect { |
| 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 title-bar (and its bottom border) are 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. |
| */ |
| |
| html.apps-v2 body.fullscreen #scroller { |
| height: 100%; |
| overflow: hidden; |
| } |
| |
| body.fullscreen .window-controls-hover-target { |
| border: 1px solid #a6a6a6; |
| } |
| |
| body.fullscreen .window-control:first-child { |
| border-__MSG_@@bidi_start_edge__: none; |
| } |
| |
| body.fullscreen .window-title { |
| display: none; |
| } |
| |
| body.fullscreen .title-bar { |
| border-bottom: none; |
| } |
| |
| body.fullscreen .window-controls-stub { |
| display: table-cell; |
| } |
| |
| body.fullscreen .window-controls-hover-target { |
| transition-property: opacity, box-shadow, top; |
| transition-duration: 0.3s; |
| opacity: 0.7; |
| top: -33px; |
| __MSG_@@bidi_end_edge__: 8px; |
| } |
| |
| body.fullscreen .window-controls-hover-target:hover, |
| body.fullscreen .window-controls-hover-target.opened { |
| top: -4px; |
| opacity: 1.0; |
| box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); |
| } |
| |
| .fullscreen .window-controls-hover-target.opened .window-controls-stub { |
| background-color: #a6a6a6; |
| } |