tools/memory_inspector/chrome_app/template/main_window.css

   1 /* Copyright 2015 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 body {
   6   position: absolute;
   7   padding: 0;
   8   margin: 0;
   9   height: 100%;
  10   width: 100%;
  11   overflow: hidden;
  12 }
  13
  14 /******************************************************************************
  15  * Terminal
  16  ******************************************************************************/
  17
  18 #terminal {
  19   display: block;
  20   position: absolute;
  21   margin: 0;
  22   padding: 3px;
  23   width: calc(100% - 6px);
  24   height: calc(25% - 6px);
  25   overflow-x: hidden;
  26   overflow-y: auto;
  27   top: -25%;
  28   left: 0;
  29   z-index: 20;
  30
  31   background: #000000;
  32
  33   font-size: 12px;
  34   font-family: 'DejaVu Sans Mono', 'Everson Mono', FreeMono, Menlo, Terminal,
  35       monospace;
  36   color: #FFFFFF;
  37
  38   -webkit-user-select: text;
  39   user-select: text;
  40
  41   /* Animation for toggling the terminal. */
  42   transition: top 0.2s ease-in-out;
  43 }
  44
  45 body.terminal_visible #terminal {
  46   top: 0;
  47 }
  48
  49 .terminal_message_output {
  50   /* Use default style. */
  51 }
  52
  53 .terminal_message_info {
  54   color: #06989A;
  55 }
  56
  57 .terminal_message_error {
  58   color: #FF0000;
  59 }
  60
  61 #terminal_button {
  62   display: block;
  63   position: absolute;
  64   padding: 5px 10px 10px 10px;
  65   border-radius: 0 0 10px 10px;
  66   width: 15px;
  67   top: 0;
  68   right: 50px;
  69   z-index: 30;
  70
  71   background: #333333;
  72   opacity: 0.5;
  73
  74   text-align: center;
  75   font-size: 12px;
  76   font-family: 'DejaVu Sans Mono', 'Everson Mono', FreeMono, Menlo, Terminal,
  77       monospace;
  78   font-weight: bold;
  79   color: #AAAAAA;
  80 }
  81
  82 #terminal_button:hover {
  83   background: #555555;
  84   color: #FFFFFF;
  85   opacity: 0.7;
  86 }
  87
  88 #terminal_button:active {
  89   background: #777777;
  90   color: #FFFFFF;
  91   opacity: 0.7;
  92 }
  93
  94 /******************************************************************************
  95  * Contents
  96  ******************************************************************************/
  97
  98 #contents {
  99   display: block;
 100   position: absolute;
 101   top: 0;
 102   width: 100%;
 103   height: 100%;
 104   overflow: hidden;
 105   margin: 0;
 106   padding: 0;
 107
 108   /* Animation for toggling the terminal. */
 109   transition: height 0.2s ease-in-out, top 0.2s ease-in-out;
 110 }
 111
 112 body.terminal_visible #contents {
 113   top: 25%;
 114   height: 75%;
 115 }
 116
 117 #inspector_view {
 118   display: block;
 119   position: absolute;
 120   width: 100%;
 121   height: 100%;
 122   padding: 0;
 123   margin: 0;
 124   z-index: 0;
 125   visibility: none;
 126 }
 127
 128 body.inspector_view_visible #inspector_view {
 129   visibility: visible;
 130 }
 131
 132 #load_overlay {
 133   position: absolute;
 134   width: 100%;
 135   height: 100%;
 136   padding: 0;
 137   margin: 0;
 138   z-index: 10;
 139   background: #DDDDDD;
 140
 141   /* Fade out animation. */
 142   transition: visibility 0s linear 0.2s, opacity 0.2s linear;
 143 }
 144
 145 body.inspector_view_visible #load_overlay {
 146   visibility: none;
 147   pointer-events: none;
 148   opacity: 0;
 149 }
 150
 151 /******************************************************************************
 152  * Load message
 153  ******************************************************************************/
 154
 155 #load_message {
 156   display: block;
 157   position: absolute;
 158
 159   /* Center the loading screen. */
 160   top: 50%;
 161   left: 50%;
 162   transform: translateY(-50%) translateX(-50%);
 163
 164   font-family: Helvetica, Arial, sans-serif;
 165   text-align: center;
 166 }
 167
 168 #load_message_title {
 169   margin-top: -12px;
 170   margin-bottom: 12px;
 171   color: #0073EA;
 172   font-weight: bold;
 173   font-size: 20px;
 174 }
 175
 176 #load_dots,
 177 #phantom_load_dots {
 178   display: inline-block;
 179   width: 3em;
 180   text-align: left;
 181 }
 182
 183 #load_message_subtitle {
 184   color: gray;
 185   font-style: italic;
 186   font-size: 12px;
 187 }
 188
 189 /******************************************************************************
 190  * Load animation
 191  ******************************************************************************/
 192
 193 #load_animation {
 194   display: inline-block;
 195   position: relative;
 196   padding: 0;
 197   width: 300px;
 198   height: 300px;
 199   overflow: hidden;
 200 }
 201
 202 #load_animation_body {
 203   position: absolute;
 204   top: 0;
 205   left: 0;
 206 }
 207
 208 #load_animation_cog1 {
 209   position: absolute;
 210   top: 125px;
 211   left: 109px;
 212
 213   -webkit-animation: clockwise_spin 2s linear infinite;
 214   animation: clockwise_spin 2s linear infinite;
 215 }
 216
 217 #load_animation_cog2 {
 218   position: absolute;
 219   top: 168px;
 220   left: 159px;
 221
 222   -webkit-animation: counterclockwise_spin 1s linear infinite;
 223   animation: counterclockwise_spin 1s linear infinite;
 224 }
 225
 226 @-webkit-keyframes clockwise_spin {
 227   100% {
 228     transform: rotate(360deg);
 229   }
 230 }
 231 @keyframes clockwise_spin {
 232   100% {
 233     transform: rotate(360deg);
 234   }
 235 }
 236
 237 @-webkit-keyframes counterclockwise_spin {
 238   100% {
 239     transform: rotate(-360deg);
 240   }
 241 }
 242 @keyframes counterclockwise_spin {
 243   100% {
 244     transform: rotate(-360deg);
 245   }
 246 }
 247