Home | History | Annotate | Download | only in webapp 
      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