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