mirror of
https://github.com/classilla/tenfourfox.git
synced 2024-06-01 01:41:37 +00:00
335 lines
7.8 KiB
CSS
335 lines
7.8 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/*
|
|
The :-moz-native-anonymous selector prefix prevents the styles defined here
|
|
from impacting web content.
|
|
Indeed, this pseudo-class is only available to chrome code.
|
|
This stylesheet is loaded as a ua stylesheet via the addon sdk, so having this
|
|
pseudo-class is important.
|
|
Having bug 1086532 fixed would make it possible to load this stylesheet in a
|
|
<style scoped> node instead, directly in the native anonymous container
|
|
element.
|
|
*/
|
|
|
|
:-moz-native-anonymous .highlighter-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* The container for all highlighters doesn't react to pointer-events by
|
|
default. This is because most highlighters cover the whole viewport but
|
|
don't contain UIs that need to be accessed.
|
|
If your highlighter has UI that needs to be interacted with, add
|
|
'pointer-events:auto;' on its container element. */
|
|
pointer-events: none;
|
|
}
|
|
|
|
:-moz-native-anonymous .highlighter-container [hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* Box model highlighter */
|
|
|
|
:-moz-native-anonymous .box-model-regions {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Box model regions can be faded (see the onlyRegionArea option in
|
|
highlighters.js) in order to only display certain regions. */
|
|
:-moz-native-anonymous .box-model-regions [faded] {
|
|
display: none;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-content {
|
|
fill: #87ceeb;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-padding {
|
|
fill: #6a5acd;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-border {
|
|
fill: #444444;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-margin {
|
|
fill: #edff64;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-content,
|
|
:-moz-native-anonymous .box-model-padding,
|
|
:-moz-native-anonymous .box-model-border,
|
|
:-moz-native-anonymous .box-model-margin {
|
|
stroke: none;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-guide-top,
|
|
:-moz-native-anonymous .box-model-guide-right,
|
|
:-moz-native-anonymous .box-model-guide-bottom,
|
|
:-moz-native-anonymous .box-model-guide-left {
|
|
stroke: #08c;
|
|
stroke-dasharray: 5 3;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
/* Highlighter - Node Infobar */
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-container {
|
|
position: absolute;
|
|
max-width: 95%;
|
|
|
|
font: message-box;
|
|
font-size: 11px;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar {
|
|
position: relative;
|
|
|
|
/* Centering the nodeinfobar in the container */
|
|
left: -50%;
|
|
|
|
padding: 5px;
|
|
min-width: 75px;
|
|
|
|
border-radius: 3px;
|
|
background: hsl(214,13%,24%) no-repeat padding-box;
|
|
|
|
color: hsl(216,33%,97%);
|
|
text-shadow: none;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-container[hide-arrow] > .box-model-nodeinfobar {
|
|
margin: 7px 0;
|
|
}
|
|
|
|
/* Arrows */
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before {
|
|
content: "";
|
|
display: none;
|
|
|
|
position: absolute;
|
|
left: calc(50% - 8px);
|
|
|
|
height: 0;
|
|
width: 0;
|
|
border: 8px solid hsl(214,13%,24%);
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-container[position="top"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
|
|
border-bottom: 0;
|
|
top: 100%;
|
|
display: block;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
|
|
border-top: 0;
|
|
bottom: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* Text container */
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-text {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
text-align: center;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-tagname {
|
|
color: hsl(285,100%,75%);
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-id {
|
|
color: hsl(103,46%,54%);
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-classes,
|
|
:-moz-native-anonymous .box-model-nodeinfobar-pseudo-classes {
|
|
color: hsl(200,74%,57%);
|
|
}
|
|
|
|
:-moz-native-anonymous .box-model-nodeinfobar-dimensions {
|
|
color: hsl(210,30%,85%);
|
|
-moz-border-start: 1px solid #5a6169;
|
|
-moz-margin-start: 6px;
|
|
-moz-padding-start: 6px;
|
|
}
|
|
|
|
/* Css transform highlighter */
|
|
|
|
:-moz-native-anonymous .css-transform-transformed {
|
|
fill: #80d4ff;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
:-moz-native-anonymous .css-transform-untransformed {
|
|
fill: #66cc52;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
:-moz-native-anonymous .css-transform-transformed,
|
|
:-moz-native-anonymous .css-transform-untransformed,
|
|
:-moz-native-anonymous .css-transform-line {
|
|
stroke: #08c;
|
|
stroke-dasharray: 5 3;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
/* Rect highlighter */
|
|
|
|
:-moz-native-anonymous .highlighted-rect {
|
|
position: absolute;
|
|
background: #80d4ff;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Element geometry highlighter */
|
|
|
|
:-moz-native-anonymous .geometry-editor-root {
|
|
/* The geometry editor can be interacted with, so it needs to react to
|
|
pointer events */
|
|
pointer-events: auto;
|
|
}
|
|
|
|
:-moz-native-anonymous .geometry-editor-offset-parent {
|
|
stroke: #08c;
|
|
shape-rendering: crispEdges;
|
|
stroke-dasharray: 5 3;
|
|
fill: transparent;
|
|
}
|
|
|
|
:-moz-native-anonymous .geometry-editor-current-node {
|
|
stroke: #08c;
|
|
shape-rendering: crispEdges;
|
|
fill: #87ceeb;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
:-moz-native-anonymous .geometry-editor-arrow {
|
|
stroke: #08c;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
:-moz-native-anonymous .geometry-editor-label-bubble {
|
|
fill: hsl(214,13%,24%);
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
:-moz-native-anonymous .geometry-editor-label-text {
|
|
fill: hsl(216,33%,97%);
|
|
font: message-box;
|
|
font-size: 10px;
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
}
|
|
|
|
/* Rules highlighter */
|
|
|
|
:-moz-native-anonymous .rulers-highlighter-elements {
|
|
shape-rendering: crispEdges;
|
|
pointer-events: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
:-moz-native-anonymous .rulers-highlighter-elements > g {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
:-moz-native-anonymous .rulers-highlighter-elements > g > rect {
|
|
fill: #fff;
|
|
}
|
|
|
|
:-moz-native-anonymous .rulers-highlighter-ruler-graduations {
|
|
stroke: #bebebe;
|
|
}
|
|
|
|
:-moz-native-anonymous .rulers-highlighter-ruler-markers {
|
|
stroke: #202020;
|
|
}
|
|
|
|
:-moz-native-anonymous .rulers-highlighter-horizontal-labels > text,
|
|
:-moz-native-anonymous .rulers-highlighter-vertical-labels > text {
|
|
stroke: none;
|
|
fill: #202020;
|
|
font: message-box;
|
|
font-size: 9px;
|
|
dominant-baseline: hanging;
|
|
}
|
|
|
|
:-moz-native-anonymous .rulers-highlighter-horizontal-labels > text {
|
|
text-anchor: left;
|
|
}
|
|
|
|
:-moz-native-anonymous .rulers-highlighter-vertical-labels > text {
|
|
transform: rotate(-90deg);
|
|
text-anchor: end;
|
|
}
|
|
|
|
/* Measuring Tool highlighter */
|
|
|
|
:-moz-native-anonymous .measuring-tool-highlighter-root {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: auto;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
:-moz-native-anonymous .measuring-tool-highlighter-root path {
|
|
shape-rendering: crispEdges;
|
|
fill: rgba(135, 206, 235, 0.6);
|
|
stroke: #08c;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:-moz-native-anonymous .dragging path {
|
|
fill: rgba(135, 206, 235, 0.6);
|
|
stroke: #08c;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
:-moz-native-anonymous .measuring-tool-highlighter-label-size,
|
|
:-moz-native-anonymous .measuring-tool-highlighter-label-position {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
white-space: pre-line;
|
|
font: message-box;
|
|
font-size: 10px;
|
|
pointer-events: none;
|
|
-moz-user-select: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:-moz-native-anonymous .measuring-tool-highlighter-label-position {
|
|
color: #fff;
|
|
background: hsla(214, 13%, 24%, 0.8);
|
|
}
|
|
|
|
:-moz-native-anonymous .measuring-tool-highlighter-label-size {
|
|
color: hsl(216, 33%, 97%);
|
|
background: hsl(214, 13%, 24%);
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
:-moz-native-anonymous .measuring-tool-highlighter-guide-top,
|
|
:-moz-native-anonymous .measuring-tool-highlighter-guide-right,
|
|
:-moz-native-anonymous .measuring-tool-highlighter-guide-bottom,
|
|
:-moz-native-anonymous .measuring-tool-highlighter-guide-left {
|
|
stroke: #08c;
|
|
stroke-dasharray: 5 3;
|
|
shape-rendering: crispEdges;
|
|
}
|