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 */
8a {
9  color: var(--theme-highlight-blue);
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}
21
22#storage-tree {
23  background: var(--theme-sidebar-background);
24}
25
26/* Let the component gain focus when a click hits an empty area */
27#storage-tree {
28  -moz-user-focus: normal;
29}
30
31#storage-tree:focus {
32  outline: 0;
33}
34
35/* Storage Table */
36
37/* Let the component gain focus when a click hits an empty area */
38#storage-table {
39  display: flex;
40  justify-content: center;
41  align-items: center;
42  -moz-user-focus: normal;
43}
44
45#storage-table:focus {
46  outline: 0;
47}
48
49/* The minimum column width needs to be determined by the header width */
50.table-widget-cell {
51  min-width: unset;
52}
53
54/* Set minimum column widths */
55#name {
56  min-width: 65px;
57}
58
59#host {
60  min-width: 80px;
61}
62
63#path {
64  min-width: 60px;
65}
66
67#value {
68  min-width: 95px;
69}
70
71#hostOnly,
72#isHttpOnly,
73#sameSite {
74  min-width: 58px;
75}
76
77#isSecure {
78  min-width: 48px;
79}
80
81#expires,
82#lastAccessed,
83#creationTime {
84  min-width: 115px;
85}
86
87/* Prevent all columns except for value from resizing with the panel */
88#storage-table .table-widget-column:not(#value) {
89  width: 0;
90}
91
92/* Text input in storage table */
93#storage-table input {
94  appearance: none;
95  -moz-box-flex: 1;
96  /* make sure the outline is not cut off */
97  position: relative;
98  box-sizing: border-box;
99  padding: 0 2px;
100  font: inherit;
101  color: var(--theme-text-color-strong);
102  background-color: var(--theme-body-background);
103}
104
105#storage-table input:focus {
106  outline: 1px solid var(--blue-50);
107}
108
109/* Variables View Sidebar */
110
111#storage-sidebar {
112  max-width: 500px;
113  min-width: 250px;
114}
115
116#storage-sidebar .devtools-toolbar {
117  padding-inline: 0;
118}
119
120/* Toolbar */
121
122/*
123  .devtools-input-toolbar forces display: flex; which does not work
124  properly with XUL. Force XUL flexbox instead.
125*/
126#storage-toolbar {
127  display: -moz-box;
128}
129
130#storage-searchbox {
131  -moz-box-flex: 1;
132  margin-inline-start: -3px;
133  margin-inline-end: 1px;
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 (max-width: 700px) {
157  #storage-tree,
158  #storage-sidebar {
159    max-width: 100%;
160  }
161}
162