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 #sidebar-panel-computedview > .devtools-toolbar {
  18   display: flex;
  19 }
  20
  21 #browser-style-checkbox {
  22   /* Bug 1200073 - extra space before the browser styles checkbox so
  23      they aren't squished together in a small window. */
  24   margin-inline-start: 5px;
  25 }
  26
  27 #propertyContainer {
  28   -moz-user-select: text;
  29   overflow: auto;
  30   flex: auto;
  31 }
  32
  33 .row-striped {
  34   background: var(--theme-body-background);
  35 }
  36
  37 .property-view-hidden,
  38 .property-content-hidden {
  39   display: none;
  40 }
  41
  42 .property-view {
  43   padding: 2px 0 2px 17px;
  44   display: flex;
  45   flex-wrap: wrap;
  46 }
  47
  48 .property-name-container {
  49   width: 202px;
  50 }
  51
  52 .property-value-container {
  53   width: 168px;
  54 }
  55
  56 .property-name-container > *,
  57 .property-value-container > * {
  58   display: inline-block;
  59   vertical-align: middle;
  60 }
  61
  62 .property-name {
  63   overflow-x: hidden;
  64   text-overflow: ellipsis;
  65   white-space: nowrap;
  66   outline: 0;
  67 }
  68
  69 .property-value, .other-property-value {
  70   background-image: url(images/arrow-e.png);
  71   background-repeat: no-repeat;
  72   background-size: 5px 8px;
  73 }
  74
  75 @media (min-resolution: 1.1dppx) {
  76   .property-value, .other-property-value {
  77     background-image: url(images/arrow-e@2x.png);
  78   }
  79 }
  80
  81 .property-value {
  82   overflow-x: hidden;
  83   text-overflow: ellipsis;
  84   white-space: nowrap;
  85   background-position: 2px center;
  86   padding-left: 10px;
  87   outline: 0;
  88 }
  89
  90 .other-property-value {
  91   background-position: left center;
  92   padding-left: 8px;
  93 }
  94
  95 .property-content {
  96   padding-left: 17px;
  97 }
  98
  99 .theme-firebug .property-view,
 100 .theme-firebug .property-content {
 101   font-family: var(--proportional-font-family);
 102 }
 103
 104 .theme-firebug .property-view {
 105   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 106 }
 107
 108 /* From skin */
 109 .expander {
 110   visibility: hidden;
 111   margin-left: -12px !important;
 112 }
 113
 114 .expandable {
 115   visibility: visible;
 116 }
 117
 118 .match {
 119   visibility: hidden;
 120 }
 121
 122 .matchedselectors > p {
 123   clear: both;
 124   margin: 0 2px 0 0;
 125   padding: 2px;
 126   overflow-x: hidden;
 127   border-style: dotted;
 128   border-color: #A09090;
 129   border-width: 1px 1px 0 1px;
 130 }
 131
 132 .matchedselectors > p:last-of-type {
 133   border-bottom-width: 1px;
 134 }
 135
 136 .matched {
 137   text-decoration: line-through;
 138 }
 139
 140 .parentmatch {
 141   opacity: 0.5;
 142 }
 143
 144 #noResults {
 145   font-size: 110%;
 146   margin: 5px;
 147   text-align: center;
 148 }
 149
 150 .onlyuserstyles {
 151   cursor: pointer;
 152 }
 153
 154 .legendKey {
 155   margin: 0 5px;
 156 }
 157
 158 .link {
 159   padding: 0 3px;
 160   cursor: pointer;
 161   float: right;
 162 }
 163
 164 /* Take away these two :visited rules to get a core dumper     */
 165 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
 166
 167 .link,
 168 .link:visited {
 169   color: #336699;
 170 }
 171
 172 .link,
 173 .helplink,
 174 .link:visited,
 175 .helplink:visited {
 176   text-decoration: none;
 177 }
 178
 179 .link:hover {
 180   text-decoration: underline;
 181 }
 182
 183 .computedview-colorswatch {
 184   border-radius: 50%;
 185   width: 0.9em;
 186   height: 0.9em;
 187   vertical-align: middle;
 188   margin-inline-end: 5px;
 189   display: inline-block;
 190   position: relative;
 191 }
 192
 193 .computedview-colorswatch::before {
 194   content: '';
 195   background-color: #9C9CFF;
 196   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 197                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 198   background-size: 12px 12px;
 199   background-position: 0 0, 6px 6px;
 200   position: absolute;
 201   border-radius: 50%;
 202   top: 0;
 203   left: 0;
 204   right: 0;
 205   bottom: 0;
 206   z-index: -1;
 207 }