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