LCARStrek/browser/devtools/computedview.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 /* From content */
   7
   8 * {
   9   box-sizing: border-box;
  10 }
  11
  12 :root {
  13   height: 100%;
  14 }
  15
  16 body {
  17   margin: 0;
  18   display : flex;
  19   flex-direction: column;
  20   height: 100%;
  21 }
  22
  23 #propertyContainer {
  24   -moz-user-select: text;
  25   overflow: auto;
  26   min-height: 0;
  27   flex: 1;
  28 }
  29
  30 .row-striped {
  31   background: var(--theme-body-background);
  32 }
  33
  34 .property-view-hidden,
  35 .property-content-hidden {
  36   display: none;
  37 }
  38
  39 .property-view {
  40   clear: both;
  41   padding: 2px 0 2px 17px;
  42 }
  43
  44 .property-view > * {
  45   display: inline-block;
  46   vertical-align: middle;
  47 }
  48
  49 .property-name {
  50   /* -12px is so the expander triangle isn't pushed up above the property */
  51   width: calc(100% - 12px);
  52   overflow-x: hidden;
  53   text-overflow: ellipsis;
  54   white-space: nowrap;
  55   outline: 0;
  56 }
  57
  58 .property-value, .other-property-value {
  59   background-image: url("arrow-e.png");
  60   background-repeat: no-repeat;
  61   background-size: 5px 8px;
  62 }
  63
  64 @media (min-resolution: 2dppx) {
  65   .property-value, .other-property-value {
  66     background-image: url("arrow-e@2x.png");
  67   }
  68 }
  69
  70 .property-value {
  71   width: 100%;
  72   overflow-x: hidden;
  73   text-overflow: ellipsis;
  74   white-space: nowrap;
  75   background-position: 2px center;
  76   padding-left: 10px;
  77   outline: 0;
  78 }
  79
  80 .other-property-value {
  81   background-position: left center;
  82   padding-left: 8px;
  83 }
  84
  85 @media (min-width: 400px) {
  86   .property-name {
  87     width: 200px;
  88   }
  89   .property-value {
  90     /* -212px is accounting for the 200px property-name and the 12px triangle */
  91     width: calc(100% - 212px);
  92   }
  93 }
  94
  95 .property-content {
  96   padding-left: 17px;
  97 }
  98
  99 /* From skin */
 100 .expander {
 101   visibility: hidden;
 102   margin-left: -12px!important;
 103 }
 104
 105 .expandable {
 106   visibility: visible;
 107 }
 108
 109 .match {
 110   visibility: hidden;
 111 }
 112
 113 .matchedselectors > p {
 114   clear: both;
 115   margin: 0 2px 0 0;
 116   padding: 2px;
 117   overflow-x: hidden;
 118   border-style: dotted;
 119   border-color: #A09090;
 120   border-width: 1px 1px 0 1px;
 121 }
 122
 123 .matchedselectors > p:last-of-type {
 124   border-bottom-width: 1px;
 125 }
 126
 127 /* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
 128 .rule-text {
 129   direction: ltr;
 130 }
 131
 132 .matched {
 133   text-decoration: line-through;
 134 }
 135
 136 .parentmatch {
 137   opacity: 0.5;
 138 }
 139
 140 #noResults {
 141   font-size: 110%;
 142   margin: 5px;
 143   text-align: center;
 144 }
 145
 146 .onlyuserstyles {
 147   cursor: pointer;
 148 }
 149
 150 .legendKey {
 151   margin: 0 5px;
 152 }
 153
 154 .devtools-toolbar {
 155   width: 100%;
 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: #3333FF;
 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: 1em;
 186   height: 1em;
 187   vertical-align: text-top;
 188   -moz-margin-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 }