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: 1.25dppx) {
  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 .matched {
 128   text-decoration: line-through;
 129 }
 130
 131 .parentmatch {
 132   opacity: 0.5;
 133 }
 134
 135 #noResults {
 136   font-size: 110%;
 137   margin: 5px;
 138   text-align: center;
 139 }
 140
 141 .onlyuserstyles {
 142   cursor: pointer;
 143 }
 144
 145 .legendKey {
 146   margin: 0 5px;
 147 }
 148
 149 #root .devtools-toolbar {
 150   width: 100%;
 151   display: flex;
 152 }
 153
 154 .link {
 155   padding: 0 3px;
 156   cursor: pointer;
 157   float: right;
 158 }
 159
 160 /* Take away these two :visited rules to get a core dumper     */
 161 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
 162
 163 .link,
 164 .link:visited {
 165   color: #3333FF;
 166 }
 167
 168 .link,
 169 .helplink,
 170 .link:visited,
 171 .helplink:visited {
 172   text-decoration: none;
 173 }
 174
 175 .link:hover {
 176   text-decoration: underline;
 177 }
 178
 179 .computedview-colorswatch {
 180   border-radius: 50%;
 181   width: 0.9em;
 182   height: 0.9em;
 183   vertical-align: middle;
 184   -moz-margin-end: 5px;
 185   display: inline-block;
 186   position: relative;
 187 }
 188
 189 .computedview-colorswatch::before {
 190   content: '';
 191   background-color: #9C9CFF;
 192   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 193                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 194   background-size: 12px 12px;
 195   background-position: 0 0, 6px 6px;
 196   position: absolute;
 197   border-radius: 50%;
 198   top: 0;
 199   left: 0;
 200   right: 0;
 201   bottom: 0;
 202   z-index: -1;
 203 }