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 10 html.apps-v2, 11 html.apps-v2 body { 12 height: 100%; 13 width: 100%; 14 } 15 16 html.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 87 html.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. */ 127 body:not(.connected) .window-disconnect, 128 body:not(.connected) .window-fullscreen, 129 body: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 149 html.apps-v2 body.fullscreen #scroller { 150 overflow: hidden; 151 } 152 153 html.apps-v2 body.fullscreen .window-body { 154 height: 100%; 155 } 156 157 body.fullscreen .title-bar { 158 border: 1px solid #a6a6a6; 159 } 160 161 body.fullscreen .window-title { 162 display: none; 163 } 164 165 body.fullscreen .title-bar { 166 position: fixed; 167 width: initial; /* Override the 100% width when windowed. */ 168 } 169 170 body.fullscreen .window-controls-and-title { 171 display: inline-flex; 172 } 173 174 body.fullscreen .window-controls-stub { 175 display: block; 176 } 177 178 body.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 186 body.fullscreen .title-bar:hover, 187 body.fullscreen .title-bar.menu-opened, 188 body.fullscreen .title-bar.opened, 189 body.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 199 body.fullscreen .window-fullscreen { 200 display: none; 201 } 202