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