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