| 1 | /* vim:set ts=2 sw=2 sts=2 et: */ |
| 2 | /* This Source Code Form is subject to the terms of the Mozilla Public |
| 3 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
| 4 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| 5 | |
| 6 | /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ |
| 7 | .theme-light, |
| 8 | .theme-dark, |
| 9 | .theme-firebug { |
| 10 | --toolbar-tab-hover: #FFCF00; |
| 11 | --toolbar-tab-hover-active: #FF9F00; |
| 12 | --searchbox-background-color: #000000; |
| 13 | --searchbox-border-color: #9C9CFF; |
| 14 | --searcbox-no-match-background-color: #400000; |
| 15 | --searcbox-no-match-border-color: #FF0000; |
| 16 | --magnifying-glass-image: url(images/search.svg); |
| 17 | --filter-image: url(images/filter.svg); |
| 18 | --tool-options-image: url(images/tool-options-tbutton.svg); |
| 19 | --icon-filter: invert(1); |
| 20 | --checked-icon-filter: url(images/filters.svg#checked-icon-state); |
| 21 | --toolbar-button-border-color: #A09090; |
| 22 | } |
| 23 | |
| 24 | /* Toolbars */ |
| 25 | .devtools-toolbar, |
| 26 | .devtools-sidebar-tabs tabs { |
| 27 | padding: 0; |
| 28 | border-width: 0; |
| 29 | /* border-bottom-width: 1px;*/ |
| 30 | border-style: solid; |
| 31 | /* height: 24px; |
| 32 | line-height: 24px;*/ |
| 33 | box-sizing: border-box; |
| 34 | font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
| 35 | } |
| 36 | .devtools-toolbar { |
| 37 | height: 24px; |
| 38 | } |
| 39 | |
| 40 | .devtools-toolbar { |
| 41 | border-bottom: 3px solid var(--theme-body-background); |
| 42 | } |
| 43 | |
| 44 | .devtools-toolbar checkbox { |
| 45 | /* LCARStrek checkbox colors don't work well against toolbar background */ |
| 46 | background-color: var(--theme-toolbar-background); |
| 47 | padding: 2px; |
| 48 | line-height: -moz-block-height; |
| 49 | } |
| 50 | .devtools-toolbar checkbox .checkbox-check { |
| 51 | } |
| 52 | .devtools-toolbar checkbox .checkbox-label-box { |
| 53 | } |
| 54 | .devtools-toolbar checkbox .checkbox-label-box .checkbox-label { |
| 55 | } |
| 56 | |
| 57 | /* HTML Checkboxes - a lot copied from global/in-content/common.css */ |
| 58 | /* Hide the actual checkbox */ |
| 59 | input[type="checkbox"] { |
| 60 | opacity: 0; |
| 61 | width: 0; |
| 62 | pointer-events: none; |
| 63 | position: absolute; |
| 64 | } |
| 65 | |
| 66 | label > input[type="checkbox"] { /* old placement of checkbox in label, undo above */ |
| 67 | opacity: 1; |
| 68 | width: auto; |
| 69 | pointer-events: auto; |
| 70 | position: static; |
| 71 | } |
| 72 | |
| 73 | /* Create a box to style as the checkbox */ |
| 74 | input[type="checkbox"] + label::before { |
| 75 | display: inline-block; |
| 76 | content: ""; |
| 77 | vertical-align: middle; |
| 78 | } |
| 79 | |
| 80 | .devtools-searchbox + #browser-style-checkbox-label, /* workaround for old placement of checkbox in label */ |
| 81 | input[type="checkbox"] + label { |
| 82 | line-height: 0px; |
| 83 | color: var(--theme-capped-toolbar-text); |
| 84 | } |
| 85 | |
| 86 | input[type="checkbox"] + label::before { |
| 87 | -moz-appearance: none; |
| 88 | width: 13px; |
| 89 | height: 13px; |
| 90 | border-radius: 0; |
| 91 | border: 1px solid var(--theme-body-color); |
| 92 | margin-inline-end: 3px; |
| 93 | margin-inline-start: 2px; |
| 94 | background-color: var(--theme-toolbar-background); |
| 95 | background-position: center center; |
| 96 | background-repeat: no-repeat; |
| 97 | } |
| 98 | |
| 99 | input[type="checkbox"]:not(:disabled) + label:hover::before { |
| 100 | border-color: var(--theme-hover-background); |
| 101 | } |
| 102 | .devtools-searchbox + #browser-style-checkbox-label:hover, /* workaround for old placement of checkbox in label */ |
| 103 | input[type="checkbox"]:not(:disabled) + label:hover { |
| 104 | color: var(--theme-hover-background); |
| 105 | } |
| 106 | input[type="checkbox"]:checked + label::before { |
| 107 | background-image: url("chrome://global/skin/in-content/check.svg#check"); |
| 108 | } |
| 109 | |
| 110 | input[type="checkbox"]:checked:disabled + label::before { |
| 111 | background-image: url("chrome://global/skin/in-content/check.svg#check-disabled"); |
| 112 | } |
| 113 | input[type="checkbox"]:checked:not(:disabled) + label:hover::before { |
| 114 | background-image: url("chrome://global/skin/in-content/check.svg#check-hover"); |
| 115 | } |
| 116 | input[type="checkbox"]:disabled + label::before { |
| 117 | border-color: var(--theme-body-color-inactive); |
| 118 | } |
| 119 | input[type="checkbox"]:disabled + label { |
| 120 | color: var(--theme-body-color-inactive); |
| 121 | } |
| 122 | |
| 123 | .devtools-separator { |
| 124 | margin: 0 2px; |
| 125 | width: 2px; |
| 126 | background-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%); |
| 127 | background-size: 1px 100%; |
| 128 | background-repeat: no-repeat; |
| 129 | background-position: 0, 1px, 2px; |
| 130 | } |
| 131 | |
| 132 | /* HTML toolbars - style them LCARStrek-like */ |
| 133 | |
| 134 | div.devtools-toolbar, |
| 135 | div.devtools-tabbar { |
| 136 | background-size: calc(100% - 30px); |
| 137 | background-image: linear-gradient(90deg, var(--theme-capped-toolbar-background), var(--theme-capped-toolbar-background)); |
| 138 | background-repeat: no-repeat; |
| 139 | background-position: center center; |
| 140 | display: flex; |
| 141 | } |
| 142 | |
| 143 | div.devtools-toolbar::before, |
| 144 | div.devtools-toolbar::after, |
| 145 | div.devtools-tabbar::before, |
| 146 | div.devtools-tabbar::after { |
| 147 | display: flex; |
| 148 | content: ""; |
| 149 | width: 12px; |
| 150 | min-height: 16px; |
| 151 | background-color: var(--theme-toolbar-caps); |
| 152 | } |
| 153 | |
| 154 | div.devtools-toolbar::before, |
| 155 | div.devtools-tabbar::before { |
| 156 | border-radius: 8px 0px 0px 8px; |
| 157 | border: none; |
| 158 | border-inline-end: 3px solid black; |
| 159 | margin-inline-end: 2px; |
| 160 | } |
| 161 | |
| 162 | div.devtools-toolbar::after, |
| 163 | div.devtools-tabbar::after { |
| 164 | border-radius: 0px 8px 8px 0px; |
| 165 | border: none; |
| 166 | border-inline-start: 3px solid black; |
| 167 | margin-inline-start: auto; /* originally 2px, but auto makes us able to get flexible free space */ |
| 168 | } |
| 169 | |
| 170 | /* In-tools sidebar */ |
| 171 | |
| 172 | .devtools-sidebar-tabs { |
| 173 | height: 100%; |
| 174 | } |
| 175 | |
| 176 | .devtools-sidebar-tabs > tabpanels { |
| 177 | padding: 0; |
| 178 | border: 0; |
| 179 | } |
| 180 | |
| 181 | .devtools-sidebar-tabs tabs { |
| 182 | position: static; |
| 183 | overflow: hidden; |
| 184 | } |
| 185 | |
| 186 | .devtools-sidebar-alltabs { |
| 187 | /* -moz-appearance: none; |
| 188 | height: 24px; |
| 189 | line-height: 24px; |
| 190 | padding: 0 4px; |
| 191 | margin: 0; |
| 192 | border-width: 0 0 1px 0; |
| 193 | border-inline-start-width: 1px; |
| 194 | border-style: solid;*/ |
| 195 | } |
| 196 | |
| 197 | .devtools-sidebar-alltabs .toolbarbutton-icon { |
| 198 | display: none; |
| 199 | } |
| 200 | |
| 201 | .devtools-sidebar-tabs tabs > .tabs-right, |
| 202 | .devtools-sidebar-tabs tabs > .tabs-left { |
| 203 | display: none; |
| 204 | } |
| 205 | |
| 206 | .devtools-sidebar-tabs tabs > tab { |
| 207 | min-width: 78px; |
| 208 | text-align: center; |
| 209 | -moz-box-flex: 1; |
| 210 | position: static; |
| 211 | margin-top: 0; |
| 212 | } |
| 213 | |
| 214 | .devtools-sidebar-tabs tabs > tab:-moz-focusring { |
| 215 | position: static; |
| 216 | } |
| 217 | |
| 218 | .devtools-sidebar-tabs tabs > tab:first-of-type { |
| 219 | margin-inline-start: 0; |
| 220 | } |
| 221 | |
| 222 | .devtools-sidebar-tabs tabs > tab:last-of-type { |
| 223 | border-inline-end-width: 0; |
| 224 | } |
| 225 | |
| 226 | .devtools-sidebar-tabs tabs > tab { |
| 227 | } |
| 228 | |
| 229 | .devtools-sidebar-tabs tabs > tab[selected], |
| 230 | .devtools-sidebar-tabs tabs > tab[selected] + tab { |
| 231 | } |
| 232 | |
| 233 | .devtools-sidebar-tabs tabs > tab:first-child { |
| 234 | } |
| 235 | |
| 236 | .devtools-sidebar-tabs tabs > tab:hover { |
| 237 | } |
| 238 | |
| 239 | .devtools-sidebar-tabs tabs > tab:hover:active { |
| 240 | } |
| 241 | |
| 242 | .devtools-sidebar-tabs tabs > tab[selected], |
| 243 | .devtools-sidebar-tabs tabs > tab[selected]:hover:active { |
| 244 | } |
| 245 | |
| 246 | .hidden-labels-box:not(.visible) > label, |
| 247 | .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { |
| 248 | display: none; |
| 249 | } |
| 250 | |
| 251 | .devtools-invisible-splitter { |
| 252 | border-color: transparent; |
| 253 | background-color: transparent; |
| 254 | } |
| 255 | |
| 256 | .devtools-horizontal-splitter, |
| 257 | .devtools-side-splitter { |
| 258 | /* background-color: var(--theme-splitter-color);*/ |
| 259 | } |
| 260 | |
| 261 | /* HACK around hardcoded stylings for the HTML-based sidebar tabs */ |
| 262 | .tabs .tabs-menu-item, |
| 263 | .theme-dark .tabs .tabs-menu-item, |
| 264 | .theme-light .tabs .tabs-menu-item { |
| 265 | margin: 0; |
| 266 | margin-inline-end: 3px !important; |
| 267 | padding: 0 !important; |
| 268 | border-radius: 8px 8px 0 0; |
| 269 | border: 0 !important; |
| 270 | background-color: var(--theme-button-background); |
| 271 | } |
| 272 | .tabs .tabs-menu-item a { |
| 273 | color: var(--theme-button-color) !important; |
| 274 | padding: 0px 3px !important; |
| 275 | } |
| 276 | .tabs .tabs-menu-item.is-active { |
| 277 | height: auto !important; |
| 278 | } |
| 279 | .tabs .tabs-navigation { |
| 280 | height: auto !important; |
| 281 | border: 0 !important; |
| 282 | border-bottom: 3px solid var(--theme-body-background) !important; |
| 283 | } |