LCARStrek/devtools/computed.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 #sidebar-panel-computedview {
   7   margin: 0;
   8   display : flex;
   9   flex-direction: column;
  10   width: 100%;
  11   /* Bug 1243598 - Reduce the container height by the tab height to make room
  12      for the tabs above. */
  13   height: calc(100% - 24px);
  14   position: absolute;
  15 }
  16
  17 #computedview-container {
  18   overflow: auto;
  19   height: 100%;
  20 }
  21
  22 /* This extra wrapper only serves as a way to get the content of the view focusable.
  23    So that when the user reaches it either via keyboard or mouse, we know that the view
  24    is focused and therefore can handle shortcuts.
  25    However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
  26    through it, and the outline is hidden. */
  27 #computedview-container-focusable {
  28   height: 100%;
  29   outline: none;
  30 }
  31
  32 #computedview-toolbar,
  33 #sidebar-panel-computedview > .devtools-toolbar {
  34   display: flex;
  35 }
  36
  37 #browser-style-checkbox {
  38   /* Bug 1200073 - extra space before the browser styles checkbox so
  39      they aren't squished together in a small window. Put also
  40      an extra space after. */
  41   margin-inline-start: 5px;
  42   margin-inline-end: 5px;
  43 }
  44
  45 #browser-style-checkbox-label {
  46   margin-right: 5px;
  47
  48   /* Vertically center the 'Browser styles' checkbox in the
  49      Computed panel with its label. */
  50   display: flex;
  51   align-items: center;
  52 }
  53
  54 #propertyContainer {
  55   -moz-user-select: text;
  56   overflow-y: auto;
  57   overflow-x: hidden;
  58   flex: auto;
  59 }
  60
  61 .row-striped {
  62   background: var(--theme-body-background);
  63 }
  64
  65 .property-view-hidden,
  66 .property-content-hidden {
  67   display: none;
  68 }
  69
  70 .property-view {
  71   padding: 2px 17px;
  72   display: flex;
  73   flex-wrap: wrap;
  74 }
  75
  76 .property-name-container {
  77   width: 202px;
  78 }
  79
  80 .property-value-container {
  81   display: flex;
  82   flex: 1 1 168px;
  83   overflow: hidden;
  84 }
  85
  86 .property-name-container > *,
  87 .property-value-container > * {
  88   display: inline-block;
  89   vertical-align: middle;
  90 }
  91
  92 .property-name {
  93   overflow-x: hidden;
  94   text-overflow: ellipsis;
  95   white-space: nowrap;
  96   outline: 0 !important;
  97 }
  98
  99 .property-value, .other-property-value {
 100   background-image: url(images/arrow-e.png);
 101   background-repeat: no-repeat;
 102   background-size: 5px 8px;
 103 }
 104
 105 @media (min-resolution: 1.1dppx) {
 106   .property-value, .other-property-value {
 107     background-image: url(images/arrow-e@2x.png);
 108   }
 109 }
 110
 111 .property-value {
 112   overflow-x: hidden;
 113   text-overflow: ellipsis;
 114   white-space: nowrap;
 115   padding-left: 10px;
 116   outline: 0 !important;
 117 }
 118
 119 .other-property-value {
 120   background-position: left center;
 121   padding-left: 8px;
 122 }
 123
 124 .property-content {
 125   padding-left: 17px;
 126 }
 127
 128 .theme-firebug .property-view,
 129 .theme-firebug .property-content {
 130   font-family: var(--proportional-font-family);
 131 }
 132
 133 .theme-firebug .property-view {
 134   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 135 }
 136
 137 /* From skin */
 138 .expander {
 139   visibility: hidden;
 140   margin-inline-start: -12px !important;
 141 }
 142
 143 .expandable {
 144   visibility: visible;
 145 }
 146
 147 .match {
 148   visibility: hidden;
 149 }
 150
 151 .matchedselectors > p {
 152   clear: both;
 153   margin: 0 2px 0 0;
 154   padding: 2px;
 155   overflow-x: hidden;
 156   border-style: dotted;
 157   border-color: #A09090;
 158   border-width: 1px 1px 0 1px;
 159 }
 160
 161 .matchedselectors > p:last-of-type {
 162   border-bottom-width: 1px;
 163 }
 164
 165 .matched {
 166   text-decoration: line-through;
 167 }
 168
 169 .parentmatch {
 170   opacity: 0.5;
 171 }
 172
 173 #computedview-no-results {
 174   height: 100%;
 175 }
 176
 177 #noResults {
 178   font-size: 110%;
 179   margin: 5px;
 180   text-align: center;
 181 }
 182
 183 .onlyuserstyles {
 184   cursor: pointer;
 185 }
 186
 187 .legendKey {
 188   margin: 0 5px;
 189 }
 190
 191 .link {
 192   padding: 0 3px;
 193   cursor: pointer;
 194   float: right;
 195 }
 196
 197 /* Take away these two :visited rules to get a core dumper     */
 198 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
 199
 200 .link,
 201 .link:visited {
 202   color: #336699;
 203 }
 204
 205 .link,
 206 .helplink,
 207 .link:visited,
 208 .helplink:visited {
 209   text-decoration: none;
 210 }
 211
 212 .link:hover {
 213   text-decoration: underline;
 214 }
 215
 216 .computedview-colorswatch {
 217   border-radius: 50%;
 218   width: 0.9em;
 219   height: 0.9em;
 220   vertical-align: middle;
 221   margin-inline-end: 5px;
 222   display: inline-block;
 223   position: relative;
 224 }
 225
 226 .computedview-colorswatch::before {
 227   content: '';
 228   background-color: #9C9CFF;
 229   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 230                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 231   background-size: 12px 12px;
 232   background-position: 0 0, 6px 6px;
 233   position: absolute;
 234   border-radius: 50%;
 235   top: 0;
 236   left: 0;
 237   right: 0;
 238   bottom: 0;
 239   z-index: -1;
 240 }