src/chrome/browser/resources/net_internals/top_bar_view.html

   1 <!--
   2 Copyright (c) 2013 The Chromium Authors. All rights reserved.
   3 Use of this source code is governed by a BSD-style license that can be
   4 found in the LICENSE file.
   5 -->
   6
   7 <!-- Status bar at top of screen -->
   8
   9 <style>
  10
  11 /**
  12  * This SELECT dropdown is styled so the dropdown arrow is hidden. This is
  13  * necessary because it looks bad on Windows. Instead, an arrow is added
  14  * manually by overlaying U+25BC over the dropdown and making it un-clickable.
  15  **/
  16 #top-bar-view-tab-selecter {
  17   -webkit-appearance: none;
  18   background: white;
  19   border-radius: 6px;
  20   border: 1px solid #aaa;
  21   font-size: 13px;
  22   height: 25px;
  23   outline: none;
  24   padding: 0 18px 2px 0.5em;
  25 }
  26
  27 .top-bar-view-arrow {
  28   display: inline-block;
  29   margin-right: 10px;
  30   position:relative;
  31 }
  32
  33 .top-bar-view-arrow::after {
  34   color: black;
  35   content: '\25bc';
  36   font-size: 9px;
  37   line-height: 23px;
  38   pointer-events: none;
  39   position: absolute;
  40   right: 12px;
  41   top: 1px;
  42 }
  43
  44 #top-bar-view-tab-selecter:focus {
  45   box-shadow: 0 0 3px 4px rgba(255, 238, 0, 0.50);
  46 }
  47
  48 #top-bar-view {
  49   -webkit-align-items: center;
  50   border-bottom: 1px solid gray;
  51   color: #fff;
  52   display: -webkit-flex;
  53   padding: 2px 2px 4px 7px;
  54 }
  55 </style>
  56
  57 <div id=top-bar-view>
  58   <span class=top-bar-view-arrow>
  59     <select aria-label="Tab selector" id=top-bar-view-tab-selecter></select>
  60   </span>
  61   <div style="-webkit-flex-grow: 1">
  62     <include src="status_view.html">
  63   </div>
  64 </div>