The Tor Browser / file comparison
comparison: browser/devtools/markupview/markup-view.css
browser/devtools/markupview/markup-view.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:e69e981e1a67 |
|---|---|
| 1 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 2 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 4 | |
| 5 :root { | |
| 6 -moz-control-character-visibility: visible; | |
| 7 } | |
| 8 | |
| 9 /* Force height and width (possibly overflowing) from inline elements. | |
| 10 * This allows long overflows of text or input fields to still be styled with | |
| 11 * the container, rather than the background disappearing when scrolling */ | |
| 12 #root { | |
| 13 float: left; | |
| 14 min-width: 100%; | |
| 15 } | |
| 16 | |
| 17 #root-wrapper:after { | |
| 18 content: ""; | |
| 19 display: block; | |
| 20 clear: both; | |
| 21 position:relative; | |
| 22 } | |
| 23 | |
| 24 .html-editor { | |
| 25 display: none; | |
| 26 position: absolute; | |
| 27 z-index: 2; | |
| 28 | |
| 29 /* Use the same margin/padding trick used by .child tags to ensure that | |
| 30 * the editor covers up any content to the left (including expander arrows | |
| 31 * and hover effects). */ | |
| 32 margin-left: -1000em; | |
| 33 padding-left: 1000em; | |
| 34 } | |
| 35 | |
| 36 .html-editor-inner { | |
| 37 border: solid .1px; | |
| 38 flex: 1 1 auto; | |
| 39 } | |
| 40 | |
| 41 .html-editor iframe { | |
| 42 height: 100%; | |
| 43 width: 100%; | |
| 44 border: none; | |
| 45 margin: 0; | |
| 46 padding: 0; | |
| 47 } | |
| 48 | |
| 49 .children { | |
| 50 list-style: none; | |
| 51 padding: 0; | |
| 52 margin: 0; | |
| 53 } | |
| 54 | |
| 55 /* Tags are organized in a UL/LI tree and indented thanks to a left padding. | |
| 56 * A very large padding is used in combination with a slightly smaller margin | |
| 57 * to make sure childs actually span from edge-to-edge. */ | |
| 58 .child { | |
| 59 margin-left: -1000em; | |
| 60 padding-left: 1001em; | |
| 61 } | |
| 62 | |
| 63 .tag-line { | |
| 64 min-height: 1.4em; | |
| 65 line-height: 1.4em; | |
| 66 position: relative; | |
| 67 } | |
| 68 | |
| 69 .html-editor-container { | |
| 70 position: relative; | |
| 71 min-height: 200px; | |
| 72 } | |
| 73 | |
| 74 /* This extra element placed in each tag is positioned absolutely to cover the | |
| 75 * whole tag line and is used for background styling (when a selection is made | |
| 76 * or when the tag is flashing) */ | |
| 77 .tag-line .tag-state { | |
| 78 position: absolute; | |
| 79 left: -1000em; | |
| 80 right: 0; | |
| 81 height: 100%; | |
| 82 z-index: -1; | |
| 83 } | |
| 84 | |
| 85 .expander { | |
| 86 display: inline-block; | |
| 87 margin-left: -14px; | |
| 88 vertical-align: middle; | |
| 89 } | |
| 90 | |
| 91 .child.collapsed .child { | |
| 92 display: none; | |
| 93 } | |
| 94 | |
| 95 .child > .tag-line:first-child .close { | |
| 96 display: none; | |
| 97 } | |
| 98 | |
| 99 .child.collapsed > .tag-line:first-child .close { | |
| 100 display: inline; | |
| 101 } | |
| 102 | |
| 103 .child.collapsed > .tag-line ~ .tag-line { | |
| 104 display: none; | |
| 105 } | |
| 106 | |
| 107 .child.collapsed .close { | |
| 108 display: inline; | |
| 109 } | |
| 110 | |
| 111 .closing-bracket { | |
| 112 pointer-events: none; | |
| 113 } | |
| 114 | |
| 115 .newattr { | |
| 116 display: inline-block; | |
| 117 width: 1em; | |
| 118 height: 1ex; | |
| 119 margin-right: -1em; | |
| 120 padding: 1px 0; | |
| 121 } | |
| 122 | |
| 123 .newattr:focus { | |
| 124 margin-right: 0; | |
| 125 } | |
| 126 | |
| 127 .tag-state.flash-out { | |
| 128 transition: background .5s; | |
| 129 } | |
| 130 | |
| 131 /* Preview */ | |
| 132 | |
| 133 #previewbar { | |
| 134 position: fixed; | |
| 135 top: 0; | |
| 136 right: 0; | |
| 137 width: 90px; | |
| 138 background: black; | |
| 139 border-left: 1px solid #333; | |
| 140 border-bottom: 1px solid #333; | |
| 141 overflow: hidden; | |
| 142 } | |
| 143 | |
| 144 #preview { | |
| 145 position: absolute; | |
| 146 top: 0; | |
| 147 right: 5px; | |
| 148 width: 80px; | |
| 149 height: 100%; | |
| 150 background-image: -moz-element(#root); | |
| 151 background-repeat: no-repeat; | |
| 152 } | |
| 153 | |
| 154 #previewbar.hide, | |
| 155 #previewbar.disabled { | |
| 156 display: none; | |
| 157 } | |
| 158 | |
| 159 #viewbox { | |
| 160 position: absolute; | |
| 161 top: 0; | |
| 162 right: 5px; | |
| 163 width: 80px; | |
| 164 border: 1px dashed #888; | |
| 165 background: rgba(205,205,255,0.2); | |
| 166 outline: 1px solid transparent; | |
| 167 } |
