1/* Copyright 2014 The Chromium Authors. All rights reserved.
2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file.
4 */
5
6.window-body {
7  position: relative;
8}
9
10html.apps-v2,
11html.apps-v2 body {
12  height: 100%;
13  width: 100%;
14}
15
16html.apps-v2 body:not(.fullscreen) {
17  border: 1px solid gray;  /* This is the window border. */
18}
19
20.title-bar {
21  z-index: 100;
22  width: 100%;
23  background-color: #c4c4c4;
24}
25
26.window-controls-and-title {
27  display: flex;
28}
29
30.window-title {
31  line-height: 32px;
32  font-size: 14px;
33}
34
35.title-bar .window-title {
36  padding-__MSG_@@bidi_start_edge__: 12px;
37  width: 100%;
38  display: inline-block;
39  flex: 1;
40}
41
42.title-bar:not(.menu-opened) .window-title {
43  -webkit-app-region: drag;
44}
45
46.window-control {
47  width: 32px;
48  height: 32px;
49  padding-top: 9px;
50  padding-right: 1px;
51  text-align: center;
52  display: inline-block;
53}
54
55.window-control > span.menu-button-activator {
56  display: inline-block;
57  width: 100%;
58  height: 100%;
59}
60
61.window-control:hover {
62  background-color: #d5d5d5;
63}
64
65.window-control:active {
66  background-color: #a6a6a6;
67}
68
69.window-control img {
70  margin-bottom: -2px;
71}
72
73.window-controls-stub {
74  display: none;
75  height: 8px;
76  background: url("drag.webp");
77  background-position: 2px 1px;
78}
79
80#scroller {
81  height: 100%;
82  width: 100%;
83  overflow: auto;
84  position: relative;
85}
86
87html.apps-v2 .window-body {
88  height: calc(100% - 32px);  /* Allow space for the title-bar */
89}
90
91/* Add an etched border to the window controls, title bar and stub */
92.window-title,
93.window-control,
94.window-controls-stub {
95  position: relative;
96}
97
98.window-title::after,
99.window-control::after,
100.window-controls-stub::after {
101  content: "";
102  width: 100%;
103  height: 100%;
104  position: absolute;
105  top: 0;
106  left: 0;
107  border-right: 1px solid rgba(0, 0, 0, 0.2);
108  border-top: 1px solid rgba(255, 255, 255, 0.2);
109  border-bottom: 1px solid rgba(0, 0, 0, 0.3);  /* darken bottom slightly */
110  border-left: 1px solid rgba(255, 255, 255, 0.2);
111  pointer-events: none;
112  box-sizing: border-box;
113}
114
115/* Remove dark borders for elements that are adjacent an existing border. */
116.window-close::after {
117  border-right: none;
118}
119
120.window-controls-stub::after {
121  border-bottom: none;
122  border-right: none;
123}
124
125/* The Disconnect, full-screen and options buttons are only displayed when
126   connected. */
127body:not(.connected) .window-disconnect,
128body:not(.connected) .window-fullscreen,
129body:not(.connected) .window-options {
130  display: none;
131}
132
133
134/*
135 * When in full-screen mode, significant changes are made:
136 * - The scroll-bars are removed.
137 * - The window controls have a border (so the left-border of the first button
138 *   is not needed).
139 * - The window title is not displayed.
140 * - The stub is visible.
141 * - The window controls gain transition effects for position and opacity and
142 *   auto-hide behind the top edge of the screen.
143 * - A border is added to the window controls to ensure they stand out against
144 *   any desktop.
145 * - The window border is removed.
146 * - The full-screen button is removed.
147 */
148
149html.apps-v2 body.fullscreen #scroller {
150  overflow: hidden;
151}
152
153html.apps-v2 body.fullscreen .window-body {
154  height: 100%;
155}
156
157body.fullscreen .title-bar {
158  border: 1px solid #a6a6a6;
159}
160
161body.fullscreen .window-title {
162  display: none;
163}
164
165body.fullscreen .title-bar {
166  position: fixed;
167  width: initial;  /* Override the 100% width when windowed. */
168}
169
170body.fullscreen .window-controls-and-title {
171  display: inline-flex;
172}
173
174body.fullscreen .window-controls-stub {
175  display: block;
176}
177
178body.fullscreen .title-bar {
179  transition-property: opacity, box-shadow, top;
180  transition-duration: 0.3s;
181  opacity: 0.7;
182  top: -33px;
183  __MSG_@@bidi_end_edge__: 8px;
184}
185
186body.fullscreen .title-bar:hover,
187body.fullscreen .title-bar.menu-opened,
188body.fullscreen .title-bar.opened,
189body.fullscreen .title-bar.preview {
190  top: -4px;
191  opacity: 1.0;
192  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
193}
194
195.fullscreen .title-bar.opened .window-controls-stub {
196  background-color: #a6a6a6;
197}
198
199body.fullscreen .window-fullscreen {
200  display: none;
201}
202