[TASK] Increased default visibility of column header icons
[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 .transition(opacity .15s ease-in);
70 opacity: 0.3;
71 position: absolute;
72 right: @page-grid-spacing;
73 bottom: @page-grid-spacing / 2;
74 }
75 .t3-page-column-header {
76 padding: (@page-grid-spacing * 2) @page-grid-spacing (@page-grid-spacing / 2) @page-grid-spacing;
77 position: relative;
78 background: @page-column-header-bg;
79 border-bottom: 1px solid @page-column-header-border;
80 color: @page-column-header-color;
81 text-align: left;
82 a {
83 position: relative;
84 }
85 &:hover {
86 .t3-page-column-header-icons {
87 opacity: 1;
88 }
89 }
90 }
91 .t3-page-columns-mode {
92 img.c-divider {
93 margin: @page-grid-spacing 0 (@page-grid-spacing / 2) 0;
94 }
95 }
96
97
98 //
99 // Language
100 //
101 .t3-page-lang-copyce {
102 margin: @page-grid-spacing;
103 }
104
105
106 //
107 // Content elements
108 //
109 .t3-page-ce-wrapper {
110 min-height: 2em;
111 }
112 .t3-page-ce {
113 .transition(opacity .15s ease-in);
114 margin: @page-grid-spacing;
115 &.active-drag {
116 z-index: 4500;
117 }
118 // reset border-spacing from page column grid
119 * {
120 border-spacing: 0;
121 }
122 > .t3-page-ce {
123 margin-left: 0;
124 margin-right: 0;
125 }
126 .t3-page-ce-body-inner {
127 padding: @page-grid-spacing;
128 word-wrap: break-word;
129 }
130 .t3-page-ce-header {
131 .clearfix();
132 .transition(background .15s ease-in);
133 padding: (@page-grid-spacing / 2);
134 border: 1px solid @page-ce-border;
135 border-bottom: 0;
136 border-radius: @page-ce-border-radius @page-ce-border-radius 0 0;
137 background: @page-ce-header-bg;
138 }
139 .t3-page-ce-header-icons-left {
140 float: left;
141 > a {
142 display: inline-block;
143 padding: @padding-small-vertical @padding-small-horizontal;
144 }
145 }
146 .t3-page-ce-header-icons-right {
147 .transition(opacity .15s ease-in);
148 opacity: 0.3;
149 float: right;
150 }
151 .t3-page-ce-body {
152 margin-bottom: @page-grid-spacing;
153 border: 1px solid @page-ce-border;
154 border-top: 0;
155 border-radius: 0 0 @page-ce-border-radius @page-ce-border-radius;
156 background-color: @page-ce-body-bg;
157 }
158 .t3-page-ce-footer {
159 .text-monospace();
160 font-size: 11px;
161 padding: (@page-grid-spacing / 2) @page-grid-spacing;
162 background: @page-ce-footer-bg;
163 }
164 &:hover {
165 .t3-page-ce-header {
166 background: @page-ce-header-hover-bg;
167 }
168 .t3-page-ce-header,
169 .t3-page-ce-body {
170 border-color: @page-ce-hover-border;
171 }
172 .t3-page-ce-body {
173 .box-shadow(0px 1px 0px rgba(0, 0, 0, 0.15));
174 }
175 .t3-page-ce-header-icons-right {
176 opacity: 1;
177 }
178 }
179 }
180 .t3-page-ce-danger {
181 &:hover {
182 .t3-page-ce-header {
183 background-color: @page-ce-header-hover-bg-danger;
184 border-color: @page-ce-header-hover-border-danger;
185 }
186
187 .t3-page-ce-body {
188 border-color: @page-ce-header-hover-border-danger;
189 }
190 }
191
192 .t3-page-ce-header {
193 background-color: @page-ce-header-bg-danger;
194 border-color: @page-ce-header-border-danger;
195 &:hover {
196 background-color: @page-ce-header-hover-bg-danger;
197 border-color: @page-ce-header-hover-border-danger;
198 }
199 }
200
201 .t3-page-ce-body {
202 border-color: @page-ce-header-border-danger;
203 }
204 }
205 .t3-page-ce-hidden {
206 opacity: @page-ce-hidden-opacity;
207 .transition(opacity .15s ease-in);
208 &:hover {
209 opacity: 1.0;
210 }
211 }
212
213
214 //
215 // Dropzone
216 //
217 .t3-page-ce-dropzone-available.active,
218 .t3-page-ce-dropzone-possible {
219 border: 1px dashed @page-ce-dropzone-border;
220 border-radius: @page-ce-dropzone-border-radius;
221 background-color: @page-ce-dropzone-bg;
222 }
223 .t3-page-ce-dropzone-available.active {
224 height: 2em;
225 }
226 .t3-page-ce-dropzone-possible {
227 margin: @page-grid-spacing;
228 }
229
230
231 //
232 // Dragging
233 //
234 .t3-page-ce-dragitem {
235 .t3-page-ce-header-draggable:hover {
236 cursor: move;
237 }
238 }
239
240 .t3-is-dragged {
241 .t3-page-ce-body {
242 max-height: 225px;
243 overflow: hidden;
244 }
245 }
246
247 .t3-page-ce-dropzone-available.active, .t3-page-ce-dropzone-possible {
248 max-height: 225px;
249 }