1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/markupview/markup-view.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,167 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +:root {
1.9 + -moz-control-character-visibility: visible;
1.10 +}
1.11 +
1.12 +/* Force height and width (possibly overflowing) from inline elements.
1.13 + * This allows long overflows of text or input fields to still be styled with
1.14 + * the container, rather than the background disappearing when scrolling */
1.15 +#root {
1.16 + float: left;
1.17 + min-width: 100%;
1.18 +}
1.19 +
1.20 +#root-wrapper:after {
1.21 + content: "";
1.22 + display: block;
1.23 + clear: both;
1.24 + position:relative;
1.25 +}
1.26 +
1.27 +.html-editor {
1.28 + display: none;
1.29 + position: absolute;
1.30 + z-index: 2;
1.31 +
1.32 + /* Use the same margin/padding trick used by .child tags to ensure that
1.33 + * the editor covers up any content to the left (including expander arrows
1.34 + * and hover effects). */
1.35 + margin-left: -1000em;
1.36 + padding-left: 1000em;
1.37 +}
1.38 +
1.39 +.html-editor-inner {
1.40 + border: solid .1px;
1.41 + flex: 1 1 auto;
1.42 +}
1.43 +
1.44 +.html-editor iframe {
1.45 + height: 100%;
1.46 + width: 100%;
1.47 + border: none;
1.48 + margin: 0;
1.49 + padding: 0;
1.50 +}
1.51 +
1.52 +.children {
1.53 + list-style: none;
1.54 + padding: 0;
1.55 + margin: 0;
1.56 +}
1.57 +
1.58 +/* Tags are organized in a UL/LI tree and indented thanks to a left padding.
1.59 + * A very large padding is used in combination with a slightly smaller margin
1.60 + * to make sure childs actually span from edge-to-edge. */
1.61 +.child {
1.62 + margin-left: -1000em;
1.63 + padding-left: 1001em;
1.64 +}
1.65 +
1.66 +.tag-line {
1.67 + min-height: 1.4em;
1.68 + line-height: 1.4em;
1.69 + position: relative;
1.70 +}
1.71 +
1.72 +.html-editor-container {
1.73 + position: relative;
1.74 + min-height: 200px;
1.75 +}
1.76 +
1.77 +/* This extra element placed in each tag is positioned absolutely to cover the
1.78 + * whole tag line and is used for background styling (when a selection is made
1.79 + * or when the tag is flashing) */
1.80 +.tag-line .tag-state {
1.81 + position: absolute;
1.82 + left: -1000em;
1.83 + right: 0;
1.84 + height: 100%;
1.85 + z-index: -1;
1.86 +}
1.87 +
1.88 +.expander {
1.89 + display: inline-block;
1.90 + margin-left: -14px;
1.91 + vertical-align: middle;
1.92 +}
1.93 +
1.94 +.child.collapsed .child {
1.95 + display: none;
1.96 +}
1.97 +
1.98 +.child > .tag-line:first-child .close {
1.99 + display: none;
1.100 +}
1.101 +
1.102 +.child.collapsed > .tag-line:first-child .close {
1.103 + display: inline;
1.104 +}
1.105 +
1.106 +.child.collapsed > .tag-line ~ .tag-line {
1.107 + display: none;
1.108 +}
1.109 +
1.110 +.child.collapsed .close {
1.111 + display: inline;
1.112 +}
1.113 +
1.114 +.closing-bracket {
1.115 + pointer-events: none;
1.116 +}
1.117 +
1.118 +.newattr {
1.119 + display: inline-block;
1.120 + width: 1em;
1.121 + height: 1ex;
1.122 + margin-right: -1em;
1.123 + padding: 1px 0;
1.124 +}
1.125 +
1.126 +.newattr:focus {
1.127 + margin-right: 0;
1.128 +}
1.129 +
1.130 +.tag-state.flash-out {
1.131 + transition: background .5s;
1.132 +}
1.133 +
1.134 +/* Preview */
1.135 +
1.136 +#previewbar {
1.137 + position: fixed;
1.138 + top: 0;
1.139 + right: 0;
1.140 + width: 90px;
1.141 + background: black;
1.142 + border-left: 1px solid #333;
1.143 + border-bottom: 1px solid #333;
1.144 + overflow: hidden;
1.145 +}
1.146 +
1.147 +#preview {
1.148 + position: absolute;
1.149 + top: 0;
1.150 + right: 5px;
1.151 + width: 80px;
1.152 + height: 100%;
1.153 + background-image: -moz-element(#root);
1.154 + background-repeat: no-repeat;
1.155 +}
1.156 +
1.157 +#previewbar.hide,
1.158 +#previewbar.disabled {
1.159 + display: none;
1.160 +}
1.161 +
1.162 +#viewbox {
1.163 + position: absolute;
1.164 + top: 0;
1.165 + right: 5px;
1.166 + width: 80px;
1.167 + border: 1px dashed #888;
1.168 + background: rgba(205,205,255,0.2);
1.169 + outline: 1px solid transparent;
1.170 +}
