LCARStrek/devtools/common.css

   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 @import url("splitters.css");
   7
   8 /* LCARS-specific rules that should be limited to toolbox but there's no other place to put them */
   9 window {
  10   padding: 0;
  11 }
  12
  13 notification {
  14   margin-bottom: 3px;
  15 }
  16
  17 /* End LCARStrek toolbox rules */
  18
  19 :root {
  20   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  21   --proportional-font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  22   --monospace-font-family: "Liberation Mono", Consolas, "Courier New", monospace;
  23   --monospace-font-size: 12px;
  24 }
  25
  26 .devtools-monospace {
  27   font-family: var(--monospace-font-family);
  28   font-size: var(--monospace-font-size);
  29 }
  30
  31 /* Bottom-docked toolbox minimize transition */
  32 .devtools-toolbox-bottom-iframe {
  33   transition: margin-bottom .1s;
  34 }
  35
  36 /* Autocomplete Popup */
  37 /* Dark and light theme */
  38
  39 .devtools-autocomplete-popup {
  40   border-radius: 3px;
  41   overflow-x: hidden;
  42   max-height: 40rem;
  43 }
  44
  45 .devtools-autocomplete-listbox {
  46   background-color: transparent;
  47   border-width: 0px !important;
  48 }
  49
  50 .devtools-autocomplete-listbox > richlistitem,
  51 .devtools-autocomplete-listbox > richlistitem[selected] {
  52   width: 100%;
  53   background-color: transparent;
  54   border-radius: 4px;
  55 }
  56
  57 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
  58 .devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
  59 /*  background-color: rgba(0,0,0,0.5); */
  60 }
  61
  62 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
  63 .devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
  64 /*  color: hsl(208,100%,60%);*/
  65 }
  66
  67 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
  68 /*  color: #eee;*/
  69 }
  70
  71 .devtools-autocomplete-listbox.dark-theme > richlistitem > label {
  72 /*  color: #ccc;*/
  73 }
  74
  75 .devtools-autocomplete-listbox > richlistitem > .initial-value,
  76 .devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
  77   margin: 0;
  78   padding: 1px 0;
  79 }
  80
  81 .devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
  82   text-align: end;
  83 }
  84
  85 /* Rest of the dark and light theme */
  86
  87 .devtools-autocomplete-popup,
  88 .CodeMirror-hints,
  89 .CodeMirror-Tern-tooltip {
  90   border: 1px solid #FF9F00;
  91   background-color: #000000;
  92 }
  93
  94 .devtools-autocomplete-popup.light-theme {
  95 }
  96
  97 .devtools-autocomplete-listbox.light-theme > richlistitem[selected],
  98 .devtools-autocomplete-listbox.light-theme > richlistitem:hover {
  99 /*  background-color: rgba(128,128,128,0.3); */
 100 }
 101
 102 .devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
 103 .devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
 104 /*  color: #222;*/
 105 }
 106
 107 .devtools-autocomplete-listbox.light-theme > richlistitem > label {
 108 /*  color: #666;*/
 109 }
 110
 111 /* Responsive container */
 112
 113 .devtools-responsive-container {
 114   -moz-box-orient: horizontal;
 115 }
 116
 117 @media (max-width: 700px) {
 118   .devtools-responsive-container {
 119     -moz-box-orient: vertical;
 120   }
 121
 122   .devtools-responsive-container > .devtools-side-splitter {
 123     border: 0;
 124     margin: 3px 0;
 125     min-height: 3px;
 126     height: 3px;
 127     /* In some edge case the cursor is not changed to n-resize */
 128     cursor: n-resize;
 129   }
 130
 131   .devtools-responsive-container > .devtools-sidebar-tabs {
 132     min-height: 35vh;
 133     max-height: 75vh;
 134   }
 135 }
 136
 137 /* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */
 138
 139 .devtools-tooltip.devtools-tooltip-tooltip {
 140   /* If the tooltip uses a <tooltip> XUL element */
 141   padding: 4px;
 142   background: #A09090;
 143   border-radius: 3px;
 144 }
 145
 146 .devtools-tooltip .panel-arrowcontent {
 147   /* If the tooltip uses a <panel> XUL element instead */
 148   padding: 4px;
 149 }
 150
 151 .devtools-tooltip .panel-arrowcontainer {
 152   /* Reseting the transition used when panels are shown */
 153   transition: none;
 154   /* Panels slide up/down/left/right when they appear using a transform.
 155   Since we want to remove the transition, we don't need to transform anymore
 156   plus it can interfeer by causing mouseleave events on the underlying nodes */
 157   transform: none;
 158 }
 159
 160 .devtools-tooltip[clamped-dimensions] {
 161   min-height: 100px;
 162   max-height: 400px;
 163   min-width: 100px;
 164   max-width: 400px;
 165 }
 166 .devtools-tooltip[clamped-dimensions-no-min-height] {
 167   min-height: 0;
 168   max-height: 400px;
 169   min-width: 100px;
 170   max-width: 400px;
 171 }
 172 .devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
 173   min-width: 400px;
 174   max-width: 400px;
 175 }
 176 .devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
 177 .devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
 178 .devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
 179   overflow: hidden;
 180 }
 181 .devtools-tooltip[wide] {
 182   max-width: 600px;
 183 }
 184
 185 /* Tooltip: Simple Text */
 186
 187 .devtools-tooltip-simple-text {
 188   background: #000000;
 189   max-width: 400px;
 190   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
 191   padding: 8px 12px;
 192   white-space: pre-wrap;
 193 }
 194
 195 .devtools-tooltip-simple-text:first-child {
 196   margin-top: -4px;
 197 }
 198
 199 .devtools-tooltip-simple-text:last-child {
 200   margin-bottom: -4px;
 201 }
 202
 203 .devtools-tooltip-simple-text {
 204   background-color: #000000;
 205   max-width: 400px;
 206   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
 207   padding: 8px 12px;
 208   white-space: pre-wrap;
 209 }
 210
 211 .devtools-tooltip-simple-text:first-child {
 212   margin-top: -4px;
 213 }
 214
 215 .devtools-tooltip-simple-text:last-child {
 216   margin-bottom: -4px;
 217 }
 218
 219 /* Tooltip: Alert Icon */
 220
 221 .devtools-tooltip-alert-icon {
 222   width: 32px;
 223   height: 32px;
 224   margin: 6px;
 225   -moz-margin-end: 20px;
 226 }
 227
 228 .devtools-tooltip-alert-icon {
 229   list-style-image: url("chrome://global/skin/icons/alert-exclam.gif");
 230 }
 231
 232 /* Tooltip: Variables View */
 233
 234 .devtools-tooltip-variables-view-box {
 235   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
 236 }
 237
 238 .devtools-tooltip-variables-view-box .variable-or-property > .title {
 239   -moz-padding-end: 6px;
 240 }
 241
 242 /* Tooltip: Tiles */
 243
 244 .devtools-tooltip-tiles {
 245   background-color: #A09090;
 246   background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF),
 247     linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF);
 248   background-size: 20px 20px;
 249   background-position: 0 0, 10px 10px;
 250 }
 251
 252 .devtools-tooltip-iframe {
 253   border: none;
 254   background: transparent;
 255 }
 256
 257 /* Links to source code, like displaying `myfile.js:45` */
 258
 259 .devtools-source-link {
 260   font-family: var(--monospace-font-family);
 261   color: var(--theme-text-blue);
 262   cursor: pointer;
 263   white-space: nowrap;
 264   display: flex;
 265   align-self: flex-start;
 266   text-decoration: none;
 267   font-size: 11px;
 268   width: 12em; /* probably should be changed for each tool */
 269 }
 270
 271 .devtools-source-link:hover {
 272   text-decoration: underline;
 273 }
 274
 275 .devtools-source-link > .filename {
 276   text-overflow: ellipsis;
 277   text-align: end;
 278   overflow: hidden;
 279   margin: 2px 0px;
 280   cursor: pointer;
 281 }
 282
 283 .devtools-source-link > .line-number {
 284   flex: none;
 285   margin: 2px 0px;
 286   cursor: pointer;
 287 }