browser/themes/shared/devtools/highlighter.inc.css@6474c204b198 (annotated)
browser/themes/shared/devtools/highlighter.inc.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
| michael@0 | 1 | %if 0 |
| michael@0 | 2 | /* This Source Code Form is subject to the terms of the Mozilla Public |
| michael@0 | 3 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
| michael@0 | 4 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| michael@0 | 5 | %endif |
| michael@0 | 6 | |
| michael@0 | 7 | /* Box model highlighter */ |
| michael@0 | 8 | svg|g.box-model-container { |
| michael@0 | 9 | opacity: 0.4; |
| michael@0 | 10 | } |
| michael@0 | 11 | |
| michael@0 | 12 | svg|polygon.box-model-content { |
| michael@0 | 13 | fill: #80d4ff; |
| michael@0 | 14 | } |
| michael@0 | 15 | |
| michael@0 | 16 | svg|polygon.box-model-padding { |
| michael@0 | 17 | fill: #66cc52; |
| michael@0 | 18 | } |
| michael@0 | 19 | |
| michael@0 | 20 | svg|polygon.box-model-border { |
| michael@0 | 21 | fill: #ffe431; |
| michael@0 | 22 | } |
| michael@0 | 23 | |
| michael@0 | 24 | svg|polygon.box-model-margin { |
| michael@0 | 25 | fill: #d89b28; |
| michael@0 | 26 | } |
| michael@0 | 27 | |
| michael@0 | 28 | svg|polygon.box-model-content, |
| michael@0 | 29 | svg|polygon.box-model-padding, |
| michael@0 | 30 | svg|polygon.box-model-border, |
| michael@0 | 31 | svg|polygon.box-model-margin { |
| michael@0 | 32 | stroke: none; |
| michael@0 | 33 | } |
| michael@0 | 34 | |
| michael@0 | 35 | svg|line.box-model-guide-top, |
| michael@0 | 36 | svg|line.box-model-guide-right, |
| michael@0 | 37 | svg|line.box-model-guide-bottom, |
| michael@0 | 38 | svg|line.box-model-guide-left { |
| michael@0 | 39 | stroke: #08C; |
| michael@0 | 40 | stroke-dasharray: 5 3; |
| michael@0 | 41 | } |
| michael@0 | 42 | |
| michael@0 | 43 | /* Highlighter - Node Infobar */ |
| michael@0 | 44 | |
| michael@0 | 45 | .highlighter-nodeinfobar { |
| michael@0 | 46 | color: hsl(216,33%,97%); |
| michael@0 | 47 | border-radius: 3px; |
| michael@0 | 48 | background: hsl(214,13%,24%) no-repeat padding-box; |
| michael@0 | 49 | padding: 5px; |
| michael@0 | 50 | /* Avoid cases where the infobar is smaller than the arrow, when the text is |
| michael@0 | 51 | short */ |
| michael@0 | 52 | min-width: 75px; |
| michael@0 | 53 | } |
| michael@0 | 54 | |
| michael@0 | 55 | /* Highlighter - Node Infobar - text */ |
| michael@0 | 56 | |
| michael@0 | 57 | .highlighter-nodeinfobar-text { |
| michael@0 | 58 | text-align: center; |
| michael@0 | 59 | /* 100% - size of the buttons and margins */ |
| michael@0 | 60 | max-width: calc(100% - 2 * (26px + 6px)); |
| michael@0 | 61 | padding-bottom: 1px; |
| michael@0 | 62 | } |
| michael@0 | 63 | |
| michael@0 | 64 | html|*.highlighter-nodeinfobar-tagname { |
| michael@0 | 65 | color: hsl(285,100%,75%); |
| michael@0 | 66 | } |
| michael@0 | 67 | |
| michael@0 | 68 | html|*.highlighter-nodeinfobar-id { |
| michael@0 | 69 | color: hsl(103,46%,54%); |
| michael@0 | 70 | } |
| michael@0 | 71 | |
| michael@0 | 72 | html|*.highlighter-nodeinfobar-classes, |
| michael@0 | 73 | html|*.highlighter-nodeinfobar-pseudo-classes { |
| michael@0 | 74 | color: hsl(200,74%,57%); |
| michael@0 | 75 | } |
| michael@0 | 76 | |
| michael@0 | 77 | /* Highlighter - Node Infobar - box & arrow */ |
| michael@0 | 78 | |
| michael@0 | 79 | .highlighter-nodeinfobar-arrow { |
| michael@0 | 80 | width: 14px; |
| michael@0 | 81 | height: 14px; |
| michael@0 | 82 | -moz-margin-start: calc(50% - 7px); |
| michael@0 | 83 | transform: rotate(-45deg); |
| michael@0 | 84 | background-clip: padding-box; |
| michael@0 | 85 | background-repeat: no-repeat; |
| michael@0 | 86 | } |
| michael@0 | 87 | |
| michael@0 | 88 | .highlighter-nodeinfobar-arrow-top { |
| michael@0 | 89 | margin-bottom: -8px; |
| michael@0 | 90 | margin-top: 8px; |
| michael@0 | 91 | background-image: linear-gradient(to top right, transparent 50%, hsl(210,2%,22%) 50%); |
| michael@0 | 92 | } |
| michael@0 | 93 | |
| michael@0 | 94 | .highlighter-nodeinfobar-arrow-bottom { |
| michael@0 | 95 | margin-top: -8px; |
| michael@0 | 96 | margin-bottom: 8px; |
| michael@0 | 97 | background-image: linear-gradient(to bottom left, transparent 50%, hsl(210,2%,22%) 50%); |
| michael@0 | 98 | } |
| michael@0 | 99 | |
| michael@0 | 100 | .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar { |
| michael@0 | 101 | margin: 7px 0; |
| michael@0 | 102 | } |
