ui/webui/resources/css/tabs.css

   1 /* Copyright (c) 2012 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 tabbox {
   6   -webkit-box-orient: vertical;
   7   display: -webkit-box;
   8 }
   9
  10 tabs {
  11   -webkit-padding-start: 8px;
  12   background: -webkit-linear-gradient(white, rgb(243, 243, 243));
  13   border-bottom: 1px solid rgb(160, 160, 160);
  14   display: -webkit-box;
  15   margin: 0;
  16 }
  17
  18 /* New users of tabs.css should add 'new-style-tabs' to the class list of any
  19  * 'tabs' or 'tabpanels' elements.
  20  *
  21  * TODO(rfevang): Remove when all users are converted to the new style.
  22  *                (crbug.com/247772).
  23  */
  24 tabs.new-style-tabs {
  25   -webkit-padding-start: 9px;
  26   background: #fbfbfb;
  27   border-bottom: 1px solid #c8c8c8;
  28   padding-top: 14px;
  29 }
  30
  31 tabs > * {
  32   -webkit-margin-start: 5px;
  33   -webkit-transition: border-color 150ms, background-color 150ms;
  34   background: rgba(160, 160, 160, .3);
  35   border: 1px solid rgba(160, 160, 160, .3);
  36   border-bottom: 0;
  37   border-top-left-radius: 3px;
  38   border-top-right-radius: 3px;
  39   cursor: default;
  40   display: block;
  41   min-width: 4em;
  42   padding: 2px 10px;
  43   text-align: center;
  44 }
  45
  46 tabs.new-style-tabs > * {
  47   -webkit-margin-start: 0;
  48   -webkit-transition: none;
  49   background: #fbfbfb;
  50   border: 1px solid #fbfbfb;
  51   border-bottom: 0;
  52   border-radius: 0;
  53   min-width: 0;
  54   padding: 4px 9px 4px 10px;
  55 }
  56
  57 tabs > :not([selected]) {
  58   background: rgba(238, 238, 238, .3);
  59 }
  60
  61 tabs.new-style-tabs > :not([selected]) {
  62   background: #fbfbfb;
  63   color: #646464;
  64 }
  65
  66 tabs > :not([selected]):hover {
  67   background: rgba(247, 247, 247, .3);
  68 }
  69
  70 tabs.new-style-tabs > :not([selected]):hover {
  71   background: #fbfbfb;
  72   color: black;
  73 }
  74
  75 tabs > [selected] {
  76   -webkit-transition: none;
  77   background: white;
  78   border-color: rgb(160, 160, 160);
  79   margin-bottom: -1px;
  80   position: relative;
  81   z-index: 0;
  82 }
  83
  84 tabs.new-style-tabs > [selected] {
  85   background: #fbfbfb;
  86   border-color: #c8c8c8;
  87   font-weight: bold;
  88 }
  89
  90 tabs:focus {
  91   outline: none;
  92 }
  93
  94 html.focus-outline-visible tabs:focus > [selected] {
  95   outline: 5px auto -webkit-focus-ring-color;
  96   outline-offset: -2px;
  97 }
  98
  99 tabpanels {
 100   -webkit-box-flex: 1;
 101   background: white;
 102   box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
 103   display: -webkit-box;
 104   padding: 5px 15px 0 15px;
 105 }
 106
 107 tabpanels.new-style-tabs {
 108   background: #fbfbfb;
 109   box-shadow: none;
 110   padding: 0 20px;
 111 }
 112
 113 tabpanels > * {
 114   -webkit-box-flex: 1;
 115   display: none;
 116 }
 117
 118 tabpanels > [selected] {
 119   display: block;
 120 }