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