src/remoting/webapp/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 /* 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 }