1/* 2 * Copyright (C) 2013 Apple Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions 6 * are met: 7 * 1. Redistributions of source code must retain the above copyright 8 * notice, this list of conditions and the following disclaimer. 9 * 2. Redistributions in binary form must reproduce the above copyright 10 * notice, this list of conditions and the following disclaimer in the 11 * documentation and/or other materials provided with the distribution. 12 * 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF 23 * THE POSSIBILITY OF SUCH DAMAGE. 24 */ 25 26.css-style-text-editor { 27 background-color: white; 28 padding: 2px 0; 29} 30 31.css-style-text-editor > .CodeMirror { 32 height: auto; 33} 34 35.css-style-text-editor > .CodeMirror-scroll { 36 overflow: hidden; 37} 38 39.css-style-text-editor > .CodeMirror .CodeMirror-placeholder { 40 color: rgb(128, 128, 128); 41 padding: 0 5px 0 25px; 42 text-indent: 0; 43} 44 45.css-style-text-editor > .CodeMirror pre { 46 /* Compensate for the checkboxes so properties line up with readonly styles that do not have checkboxes. */ 47 padding: 1px 5px 1px 25px; 48 text-indent: -21px; 49} 50 51.css-style-text-editor > .CodeMirror pre * { 52 text-indent: 0; 53} 54 55.css-style-text-editor.read-only > .CodeMirror pre { 56 text-indent: 0; 57} 58 59.css-style-text-editor.read-only > .CodeMirror .CodeMirror-cursor { 60 display: none; 61} 62 63.css-style-text-editor > .CodeMirror .CodeMirror-lines pre > span span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab), 64.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.disabled, 65.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.invalid, 66.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.other-vendor, 67.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited, 68.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.overridden { 69 text-decoration: line-through; 70 -webkit-text-stroke-width: 0.000000000000001px; /* A hack to get a different line-through color. */ 71 -webkit-text-stroke-color: rgba(0, 0, 0, 0.6); 72} 73 74.css-style-text-editor > .CodeMirror .CodeMirror-lines pre > span span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab), 75.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.invalid { 76 -webkit-text-stroke-color: rgba(255, 0, 0, 0.6); 77} 78 79.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.implicit, 80.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited { 81 opacity: 0.5; 82} 83 84.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.disabled, 85.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.other-vendor, 86.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.not-inherited, 87.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.overridden { 88 -webkit-text-stroke-color: rgba(0, 0, 0, 0.3); 89} 90 91.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab), 92.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.invalid { 93 text-decoration: none; 94} 95 96.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox] { 97 width: 10px; 98 height: 10px; 99 vertical-align: middle; 100 margin: 0 8px 0 3px; 101 visibility: hidden; 102} 103 104.css-style-text-editor > .CodeMirror .CodeMirror-lines .checkbox-placeholder { 105 display: inline-block; 106 width: 21px; 107} 108 109.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox]:not(:checked), 110.css-style-text-editor > .CodeMirror.CodeMirror-focused .CodeMirror-lines input[type=checkbox], 111.css-style-text-editor:hover > .CodeMirror .CodeMirror-lines input[type=checkbox] { 112 visibility: visible; 113} 114 115.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch { 116 display: inline-block; 117 118 margin-right: 3px; 119 vertical-align: -2px; 120 121 width: 1em; 122 height: 1em; 123 124 position: relative; 125 126 /* Make a checkered background for transparent colors to show against. */ 127 background-image: linear-gradient(to bottom, rgb(204, 204, 204), rgb(204, 204, 204)), 128 linear-gradient(to bottom, rgb(204, 204, 204), rgb(204, 204, 204)); 129 background-color: white; 130 background-size: calc(50% + 1px); 131 background-position: top left, bottom right; 132 background-repeat: no-repeat; 133 134 cursor: default; 135} 136 137.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch > span { 138 position: absolute; 139 top: 0; 140 left: 0; 141 right: 0; 142 bottom: 0; 143 144 border: 1px solid rgba(64, 64, 64, 0.4); 145} 146 147.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:hover > span { 148 border: 1px solid rgba(64, 64, 64, 0.8); 149} 150 151.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:active > span { 152 border: 1px solid rgba(64, 64, 64, 1); 153} 154 155.css-style-text-editor > .CodeMirror .cm-link { 156 /* Style url(...) links as if they are strings. */ 157 color: rgb(196, 26, 22); 158 text-decoration: inherit; 159 cursor: inherit; 160} 161