remoting/webapp/crd/html/window_frame.css

   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 /*
 126  * Some UI (the Disconnect button and some menu items) are only displayed when
 127  * connected.
 128  */
 129 body:not(.connected) .connected-only {
 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  * - On Mac, the minimize button is removed.
 148  */
 149
 150 html.apps-v2 body.fullscreen #scroller {
 151   overflow: hidden;
 152 }
 153
 154 html.apps-v2 body.fullscreen .window-body {
 155   height: 100%;
 156 }
 157
 158 body.fullscreen .title-bar {
 159   border: 1px solid #a6a6a6;
 160 }
 161
 162 body.fullscreen .window-title {
 163   display: none;
 164 }
 165
 166 body.fullscreen .title-bar {
 167   position: fixed;
 168   width: initial;  /* Override the 100% width when windowed. */
 169 }
 170
 171 body.fullscreen .window-controls-and-title {
 172   display: inline-flex;
 173 }
 174
 175 body.fullscreen .window-controls-stub {
 176   display: block;
 177 }
 178
 179 body.fullscreen .title-bar {
 180   transition-property: opacity, box-shadow, top;
 181   transition-duration: 0.3s;
 182   opacity: 0.7;
 183   top: -33px;
 184   __MSG_@@bidi_end_edge__: 8px;
 185 }
 186
 187 body.fullscreen .title-bar:hover,
 188 body.fullscreen .title-bar.menu-opened,
 189 body.fullscreen .title-bar.opened,
 190 body.fullscreen .title-bar.preview {
 191   top: -4px;
 192   opacity: 1.0;
 193   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
 194 }
 195
 196 .fullscreen .title-bar.opened .window-controls-stub {
 197   background-color: #a6a6a6;
 198 }
 199
 200 body.fullscreen .window-fullscreen {
 201   display: none;
 202 }
 203
 204 body.fullscreen.os-mac .window-minimize {
 205   display: none;
 206 }