[BUGFIX] Disallow Language Mixtures in Web->Page
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _module_web_page.less
1 //
2 // Variables
3 //
4 @page-grid-spacing: 10px;
5 @page-grid-cell-bg: #fafafa;
6 @page-grid-cell-border: #cdcdcd;
7 @page-grid-cell-restricted: @state-danger-bg;
8
9 @page-column-header-color: #999;
10 @page-column-header-bg: #fff;
11 @page-column-header-border: @page-grid-cell-border;
12
13 @page-ce-border: #ccc;
14 @page-ce-hover-border: #aaa;
15 @page-ce-border-radius: 2px;
16 @page-ce-header-color: #fff;
17 @page-ce-header-bg: #eaeaea;
18 @page-ce-header-hover-bg: #d0d0d0;
19 @page-ce-body-bg: #fff;
20 @page-ce-footer-bg: #fafafa;
21 @page-ce-hidden-opacity: 0.4;
22 @page-ce-header-bg-danger: @brand-danger;
23 @page-ce-header-hover-bg-danger: darken(@brand-danger, 10%);
24 @page-ce-header-border-danger: @page-ce-header-bg-danger;
25 @page-ce-header-hover-border-danger: @page-ce-header-hover-bg-danger;
26
27 @page-ce-dropzone-bg: @state-success-bg;
28 @page-ce-dropzone-border: @state-success-border;
29 @page-ce-dropzone-border-radius: @page-ce-border-radius;
30
31
32 //
33 // Grid
34 //
35 .t3-grid-table {
36         border-collapse: separate;
37         border-spacing: @page-grid-spacing 0;
38         width: 100%;
39 }
40 .t3-grid-container {
41         margin: 0px (@page-grid-spacing * -1) @line-height-computed;
42 }
43 .t3-grid-cell {
44         background-color: @page-grid-cell-bg;
45         border-bottom: 1px solid @page-grid-cell-border;
46 }
47 .t3-grid-cell-restricted {
48         background-color: @page-grid-cell-restricted;
49 }
50 .t3-grid-cell-unassigned {
51         background: url('../../../../images/backgrounds/layout-not-assigned.png') repeat;
52 }
53
54
55 //
56 // Columns
57 //
58 .t3-page-columns {
59         width: 100%;
60 }
61 .t3-page-column {
62         min-width: 150px;
63         max-width: 300px;
64         > h2 {
65                 margin: 0;
66         }
67 }
68 .t3-page-column-header-icons {
69         visibility: hidden;
70         position: absolute;
71         right: 0;
72 }
73 .t3-page-column-header {
74         padding: (@page-grid-spacing * 2) @page-grid-spacing (@page-grid-spacing / 2) @page-grid-spacing;
75         position: relative;
76         background: @page-column-header-bg;
77         border-bottom: 1px solid @page-column-header-border;
78         color: @page-column-header-color;
79         text-align: left;
80         a {
81                 position: relative;
82         }
83         &:hover {
84                 .t3-page-column-header-icons {
85                         visibility: visible;
86                 }
87         }
88 }
89 .t3-page-columns-mode {
90         img.c-divider {
91                 margin: @page-grid-spacing 0 (@page-grid-spacing / 2) 0;
92         }
93 }
94
95
96 //
97 // Language
98 //
99 .t3-page-lang-copyce {
100         margin: @page-grid-spacing;
101 }
102
103
104 //
105 // Content elements
106 //
107 .t3-page-ce-wrapper {
108         min-height: 2em;
109 }
110 .t3-page-ce {
111         .transition(opacity .15s ease-in);
112         margin: @page-grid-spacing;
113         &.active-drag {
114                 z-index: 4500;
115         }
116         // reset border-spacing from page column grid
117         * {
118                 border-spacing: 0;
119         }
120         > .t3-page-ce {
121                 margin-left: 0;
122                 margin-right: 0;
123         }
124         .t3-page-ce-body-inner {
125                 padding: @page-grid-spacing;
126                 word-wrap: break-word;
127         }
128         .t3-page-ce-header {
129                 .clearfix();
130                 .transition(background .15s ease-in);
131                 padding: (@page-grid-spacing / 2);
132                 border: 1px solid @page-ce-border;
133                 border-bottom: 0;
134                 border-radius: @page-ce-border-radius @page-ce-border-radius 0 0;
135                 background: @page-ce-header-bg;
136         }
137         .t3-page-ce-header-icons-left {
138                 float: left;
139                 > a {
140                         display: inline-block;
141                         padding: @padding-small-vertical @padding-small-horizontal;
142                 }
143         }
144         .t3-page-ce-header-icons-right {
145                 .transition(opacity .15s ease-in);
146                 opacity: 0.3;
147                 float: right;
148         }
149         .t3-page-ce-body {
150                 margin-bottom: @page-grid-spacing;
151                 border: 1px solid @page-ce-border;
152                 border-top: 0;
153                 border-radius: 0 0 @page-ce-border-radius @page-ce-border-radius;
154                 background-color: @page-ce-body-bg;
155         }
156         .t3-page-ce-footer {
157                 .text-monospace();
158                 font-size: 11px;
159                 padding: (@page-grid-spacing / 2) @page-grid-spacing;
160                 background: @page-ce-footer-bg;
161         }
162         &:hover {
163                 .t3-page-ce-header {
164                         background: @page-ce-header-hover-bg;
165                 }
166                 .t3-page-ce-header,
167                 .t3-page-ce-body {
168                         border-color: @page-ce-hover-border;
169                 }
170                 .t3-page-ce-body {
171                         .box-shadow(0px 1px 0px rgba(0, 0, 0, 0.15));
172                 }
173                 .t3-page-ce-header-icons-right {
174                         opacity: 1;
175                 }
176         }
177 }
178 .t3-page-ce-danger {
179         &:hover {
180                 .t3-page-ce-header {
181                         background-color: @page-ce-header-hover-bg-danger;
182                         border-color: @page-ce-header-hover-border-danger;
183                 }
184
185                 .t3-page-ce-body {
186                         border-color: @page-ce-header-hover-border-danger;
187                 }
188         }
189
190         .t3-page-ce-header {
191                 background-color: @page-ce-header-bg-danger;
192                 border-color: @page-ce-header-border-danger;
193                 &:hover {
194                         background-color: @page-ce-header-hover-bg-danger;
195                         border-color: @page-ce-header-hover-border-danger;
196                 }
197         }
198
199         .t3-page-ce-body {
200                 border-color: @page-ce-header-border-danger;
201         }
202 }
203 .t3-page-ce-hidden {
204         opacity: @page-ce-hidden-opacity;
205         .transition(opacity .15s ease-in);
206         &:hover {
207                 opacity: 1.0;
208         }
209 }
210
211
212 //
213 // Dropzone
214 //
215 .t3-page-ce-dropzone-available.active,
216 .t3-page-ce-dropzone-possible {
217         border: 1px dashed @page-ce-dropzone-border;
218         border-radius: @page-ce-dropzone-border-radius;
219         background-color: @page-ce-dropzone-bg;
220 }
221 .t3-page-ce-dropzone-available.active {
222         height: 2em;
223 }
224 .t3-page-ce-dropzone-possible {
225         margin: @page-grid-spacing;
226 }
227
228
229 //
230 // Dragging
231 //
232 .t3-page-ce-dragitem {
233         .t3-page-ce-header-draggable:hover {
234                 cursor: move;
235         }
236 }
237
238 .t3-is-dragged {
239   .t3-page-ce-body {
240         max-height: 225px;
241         overflow: hidden;
242   }
243 }
244
245 .t3-page-ce-dropzone-available.active, .t3-page-ce-dropzone-possible {
246   max-height: 225px;
247 }