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