michael@0: /* vim:set ts=2 sw=2 sts=2 et: */
michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /* Take away these two :visited rules to get a core dumper     */
michael@0: /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
michael@0: .link,
michael@0: .link:visited {
michael@0:   color: #0091ff;
michael@0: }
michael@0: .link,
michael@0: .helplink,
michael@0: .link:visited,
michael@0: .helplink:visited {
michael@0:   text-decoration: none;
michael@0: }
michael@0: .link:hover {
michael@0:   text-decoration: underline;
michael@0: }
michael@0: 
michael@0: /* From content */
michael@0: 
michael@0: * {
michael@0:   box-sizing: border-box;
michael@0: }
michael@0: 
michael@0: :root {
michael@0:   height: 100%;
michael@0: }
michael@0: 
michael@0: body {
michael@0:   margin: 0;
michael@0:   display : flex;
michael@0:   flex-direction: column;
michael@0:   height: 100%;
michael@0: }
michael@0: 
michael@0: #propertyContainer {
michael@0:   -moz-user-select: text;
michael@0:   overflow: auto;
michael@0:   min-height: 0;
michael@0:   flex: 1;
michael@0: }
michael@0: 
michael@0: .property-view-hidden,
michael@0: .property-content-hidden {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .property-view {
michael@0:   clear: both;
michael@0:   padding: 2px 0 2px 17px;
michael@0: }
michael@0: 
michael@0: .property-view > * {
michael@0:   display: inline-block;
michael@0:   vertical-align: middle;
michael@0: }
michael@0: 
michael@0: .property-name {
michael@0:   /* -12px is so the expander triangle isn't pushed up above the property */
michael@0:   width: calc(100% - 12px);
michael@0:   overflow-x: hidden;
michael@0:   text-overflow: ellipsis;
michael@0:   white-space: nowrap;
michael@0:   outline: 0;
michael@0: }
michael@0: 
michael@0: .property-value {
michael@0:   width: 100%;
michael@0:   overflow-x: hidden;
michael@0:   text-overflow: ellipsis;
michael@0:   white-space: nowrap;
michael@0:   background-image: url(arrow-e.png);
michael@0:   background-repeat: no-repeat;
michael@0:   background-size: 5px 8px;
michael@0:   background-position: 2px center;
michael@0:   padding-left: 10px;
michael@0:   outline: 0;
michael@0: }
michael@0: 
michael@0: .other-property-value {
michael@0:   background-image: url(arrow-e.png);
michael@0:   background-repeat: no-repeat;
michael@0:   background-size: 5px 8px;
michael@0:   background-position: left center;
michael@0:   padding-left: 8px;
michael@0: }
michael@0: 
michael@0: @media (min-width: 400px) {
michael@0:   .property-name {
michael@0:     width: 200px;
michael@0:   }
michael@0:   .property-value {
michael@0:     /* -212px is accounting for the 200px property-name and the 12px triangle */
michael@0:     width: calc(100% - 212px);
michael@0:   }
michael@0: }
michael@0: 
michael@0: .property-content {
michael@0:   padding-left: 17px;
michael@0: }
michael@0: 
michael@0: /* From skin */
michael@0: .expander {
michael@0:   visibility: hidden;
michael@0:   margin-left: -12px!important;
michael@0: }
michael@0: 
michael@0: .expandable {
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: .match {
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: .matchedselectors > p {
michael@0:   clear: both;
michael@0:   margin: 0 2px 0 0;
michael@0:   padding: 2px;
michael@0:   overflow-x: hidden;
michael@0:   border-style: dotted;
michael@0:   border-color: rgba(128,128,128,0.4);
michael@0:   border-width: 1px 1px 0 1px;
michael@0: }
michael@0: 
michael@0: .matchedselectors > p:last-of-type {
michael@0:   border-bottom-width: 1px;
michael@0: }
michael@0: 
michael@0: /* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
michael@0: .rule-text {
michael@0:   direction: ltr;
michael@0: }
michael@0: 
michael@0: .matched {
michael@0:   text-decoration: line-through;
michael@0: }
michael@0: 
michael@0: .parentmatch {
michael@0:   opacity: 0.5;
michael@0: }
michael@0: 
michael@0: #noResults {
michael@0:   font-size: 110%;
michael@0:   margin: 5px;
michael@0:   text-align: center;
michael@0: }
michael@0: 
michael@0: .onlyuserstyles {
michael@0:   cursor: pointer;
michael@0: }
michael@0: 
michael@0: .legendKey {
michael@0:   margin: 0 5px;
michael@0: }
michael@0: 
michael@0: .devtools-toolbar {
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .link {
michael@0:   padding: 0 3px;
michael@0:   cursor: pointer;
michael@0:   float: right;
michael@0: }
michael@0: 
michael@0: .computedview-colorswatch {
michael@0:   display: inline-block;
michael@0:   border-radius: 50%;
michael@0:   width: 1em;
michael@0:   height: 1em;
michael@0:   vertical-align: text-top;
michael@0:   -moz-margin-end: 5px;
michael@0: }