devtools/client/themes/storage.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /*
   6  * Global styles
   7  */
   8 a {
   9   color: var(--theme-link-color);
  10   text-decoration: none;
  11   cursor: pointer;
  12 }
  13
  14 /* Storage Host Tree */
  15
  16 #storage-tree {
  17   min-width: 220px;
  18   max-width: 500px;
  19   overflow: auto;
  20   min-height: 0;
  21   background: var(--theme-sidebar-background);
  22   /* Let the component gain focus when a click hits an empty area */
  23   -moz-user-focus: normal;
  24 }
  25
  26 #storage-tree:focus {
  27   outline: 0;
  28 }
  29
  30 /* Storage Table */
  31
  32 /* Let the component gain focus when a click hits an empty area */
  33 #storage-table {
  34   display: flex;
  35   justify-content: center;
  36   align-items: center;
  37   -moz-user-focus: normal;
  38 }
  39
  40 #storage-table:focus {
  41   outline: 0;
  42 }
  43
  44 .table-widget-cell {
  45   /* The minimum column width needs to be determined by the header width */
  46   min-width: unset;
  47   outline-offset: -2px;
  48 }
  49
  50 .table-widget-column {
  51   flex-grow: 1;
  52 }
  53
  54 /* Set minimum column widths */
  55
  56 #name {
  57   min-width: 65px;
  58 }
  59
  60 #host {
  61   min-width: 80px;
  62 }
  63
  64 #path {
  65   min-width: 60px;
  66 }
  67
  68 #value {
  69   min-width: 95px;
  70   /* Prevent all columns except for value from shrinking with the panel */
  71   flex-shrink: 1;
  72 }
  73
  74 #hostOnly,
  75 #isHttpOnly,
  76 #sameSite {
  77   min-width: 58px;
  78 }
  79
  80 #size,
  81 #isSecure {
  82   min-width: 48px;
  83 }
  84
  85 #expires,
  86 #lastAccessed,
  87 #creationTime {
  88   min-width: 115px;
  89 }
  90
  91 /* Text input in storage table */
  92 #storage-table input {
  93   appearance: none;
  94   flex: 1;
  95   /* make sure the outline is not cut off */
  96   position: relative;
  97   box-sizing: border-box;
  98   padding: 0 2px;
  99   font: inherit;
 100   color: var(--theme-text-color-strong);
 101   background-color: var(--theme-body-background);
 102 }
 103
 104 #storage-table input:focus {
 105   outline: 1px solid var(--blue-50);
 106 }
 107
 108 /* Variables View Sidebar */
 109
 110 #storage-sidebar {
 111   max-width: 500px;
 112   min-width: 250px;
 113 }
 114
 115 #storage-sidebar .devtools-toolbar {
 116   padding-inline: 0;
 117 }
 118
 119 /* Toolbar */
 120
 121 /*
 122   .devtools-input-toolbar forces display: flex; which does not work
 123   properly with XUL. Force XUL flexbox instead.
 124 */
 125 #storage-toolbar {
 126   display: flex;
 127 }
 128
 129 #storage-searchbox {
 130   flex: 1;
 131   margin-inline-start: -3px;
 132   margin-inline-end: 1px;
 133   outline-offset: -2px;
 134 }
 135
 136 #storage-toolbar .add-button::before {
 137   background-image: url("chrome://devtools/skin/images/add.svg");
 138   -moz-user-focus: normal;
 139 }
 140
 141 #storage-toolbar .refresh-button::before {
 142   background-image: url("chrome://devtools/skin/images/reload.svg");
 143   -moz-user-focus: normal;
 144 }
 145
 146 #storage-toolbar .devtools-button {
 147   min-width: 0;
 148 }
 149
 150 #storage-toolbar .devtools-button hbox,
 151 #storage-toolbar .sidebar-toggle[hidden] {
 152   display: none;
 153 }
 154
 155 /* Responsive sidebar */
 156 @media (width < 700px) {
 157   #storage-tree,
 158   #storage-sidebar {
 159     max-width: none;
 160     /* Override potential splitter-set width */
 161     width: auto !important;
 162   }
 163 }
 164
 165 @media (width >= 700px) {
 166   #storage-tree,
 167   #storage-sidebar {
 168     /* Override potential splitter-set height */
 169     height: auto !important;
 170   }
 171 }