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