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