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