4490c49f260bdef56a405e277126fbf4ebc52055
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / editor.scss
1 //
2 // T3editor Styles
3 // ---------------
4 // Description: Global styles for t3editor wrapper.
5 //
6
7 // Include Color Variables
8 @import 'editor/colors';
9
10 // T3editor styles
11 .CodeMirror-wrapping {
12 position: relative;
13 min-width: 100%;
14
15 div {
16 line-height: 13px !important;
17 }
18 }
19
20 div.CodeMirror-line-numbers {
21 margin-right: 2px;
22 padding-right: 3px;
23 padding-left: 3px;
24 font-size: 10px;
25 text-align: right;
26 line-height: 13px !important;
27 }
28
29 .TSREF_type_label,
30 .TSREF_description_label {
31 font-weight: bold;
32 }
33
34 #TSREF_description {
35 margin-bottom: 5px;
36 }
37
38 // Code complete box
39 .t3e_codeCompleteBox {
40 border: 1px solid $color-t3-gray-light;
41 padding: 0;
42 background-color: $color-t3-gray-superlight;
43
44 ul {
45 margin: 0;
46 padding: 0;
47 list-style-type: none;
48
49 li {
50 padding-left: 2px;
51 padding-right: 2px;
52 cursor: pointer;
53
54 &.active {
55 padding-left: 2px;
56 padding-right: 2px;
57 background-color: $color-white;
58 }
59
60 span {
61 &.word_undefined,
62 &.word_definedTSREFProperty,
63 &.word_undefinedTSREFProperty {
64 font-family: monospace;
65 }
66
67 &.word_undefined,
68 &.word_definedTSREFProperty {
69 color: $color-t3-red;
70 }
71
72 &.word_undefinedTSREFProperty {
73 color: $color-t3-blue;
74 }
75
76 &.word_userProperty {
77 font-size: 12px;
78 color: $gray;
79 }
80 }
81 }
82 }
83 }
84
85 // Code description box
86 .t3e_descriptionBox {
87 position: absolute;
88 top: 0;
89 left: 0;
90 z-index: 190;
91 border: 1px solid $color-t3-gray-light;
92 padding: 2px 5px;
93 height: 220px;
94 width: 260px;
95 background-color: $color-t3-gray-superlight;
96 }
97
98 .t3e_toolbar {
99 position: absolute;
100 top: 0;
101 right: 50px;
102 width: 200px;
103 }
104
105 .t3e_toolbar_icon {
106 border: 1px solid $color-t3-gray-light;
107 float: left;
108 width: 20px;
109 height: 20px;
110 }
111
112 .t3e_codeCompleteWrap {
113 position: absolute;
114 top: 0;
115 left: 0;
116 z-index: 190;
117 }
118
119 // Around the editor
120 .t3e_wrap {
121 position: relative;
122 border: 1px solid $color-t3-gray-light;
123 min-width: 100%;
124 background-color: $color-t3-gray-superlight;
125 }
126
127 .t3e_modalOverlay {
128 position: absolute;
129 top: 0;
130 left: 0;
131 background-color: $color-t3-gray-superlight;
132 z-index: 200;
133 width: 100%;
134 height: 100%;
135 text-align: center;
136 }
137
138 .t3e_fullscreen {
139 position: absolute;
140 top: 0;
141 left: 0;
142 z-index: 999;
143 }
144
145 .t3e_iframe_wrap {
146 margin: 0 0 0 3px;
147 }
148
149 .t3e_iframe {
150 display: block;
151 padding: 0;
152 }
153
154 .t3e_toolbar_wrap {
155 clear: both;
156 padding-right: 20px;
157 width: 100%;
158 font-size: 11px;
159 }
160
161 .t3e_statusbar_wrap {
162 position: absolute;
163 left: -1px;
164 bottom: -1px;
165 padding: 5px;
166 height: auto;
167 width: calc('100% + 2px');
168 font-size: 11px;
169 background-color: $color-t3-gray;
170 }
171
172 .t3e_statusbar_wrap {
173 span {
174 margin: 3px;
175 color: $color-white;
176 }
177 }
178
179 .t3e_statusbar_item {
180 float: right;
181 height: 16px;
182 border-left: 1px solid gray;
183 padding: 4px 14px 0;
184 }
185
186 .t3e_clickable {
187 cursor: hand;
188 }
189
190 .t3e_statusbar_overlay {
191 position: absolute;
192 bottom: 20px;
193 right: 17px;
194 z-index: 100;
195 opacity: 0.85;
196 border-left: 1px solid gray;
197 border-right: 1px solid gray;
198 border-top: 1px solid gray;
199 padding: 5px 0 10px;
200 width: 180px;
201 height: 70%;
202 background-color: $color-t3-gray-superlight;
203
204 &#t3e_statusbar_overlay_options {
205 height: 8em;
206 }
207
208 ul {
209 margin: 0;
210 padding: 0;
211 list-style-type: none;
212
213 li {
214 cursor: hand;
215 padding: 2px 6px;
216 color: $text-color;
217
218 &:hover {
219 background-color: $color-t3-gray-superlight;
220 }
221
222 label {
223 cursor: pointer;
224 }
225 }
226 }
227 }
228
229 #t3e_modalOverlay_help {
230 top: 10%;
231 left: 5%;
232 height: 80%;
233 width: 90%;
234 border: 1px solid $gray;
235 padding: 10px;
236 background-image: none;
237 }
238
239 .t3e_footeritem_active {
240 background-color: $color-t3-gray-superlight;
241 }