[FEATURE] Add editlock for tt_content
[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);
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 }
123 .t3-page-ce-header {
124 .clearfix();
125 .transition(background .15s ease-in);
126 padding: (@page-grid-spacing / 2);
127 border: 1px solid @page-ce-border;
128 border-bottom: 0;
129 border-radius: @page-ce-border-radius @page-ce-border-radius 0 0;
130 background: @page-ce-header-bg;
131 }
132 .t3-page-ce-header-icons-left {
133 float: left;
134 > a {
135 display: inline-block;
136 padding: @padding-small-vertical @padding-small-horizontal;
137 }
138 }
139 .t3-page-ce-header-icons-right {
140 .transition(opacity .15s ease-in);
141 opacity: 0.3;
142 float: right;
143 }
144 .t3-page-ce-body {
145 margin-bottom: @page-grid-spacing;
146 border: 1px solid @page-ce-border;
147 border-top: 0;
148 border-radius: 0 0 @page-ce-border-radius @page-ce-border-radius;
149 background-color: @page-ce-body-bg;
150 }
151 .t3-page-ce-footer {
152 .text-monospace();
153 font-size: 11px;
154 padding: (@page-grid-spacing / 2) @page-grid-spacing;
155 background: @page-ce-footer-bg;
156 }
157 &:hover {
158 .t3-page-ce-header {
159 background: @page-ce-header-hover-bg;
160 }
161 .t3-page-ce-header,
162 .t3-page-ce-body {
163 border-color: @page-ce-hover-border;
164 }
165 .t3-page-ce-body {
166 .box-shadow(0px 1px 0px rgba(0, 0, 0, 0.15));
167 }
168 .t3-page-ce-header-icons-right {
169 opacity: 1;
170 }
171 }
172 }
173 .t3-page-ce-hidden {
174 opacity: @page-ce-hidden-opacity;
175 .transition(opacity .15s ease-in);
176 &:hover {
177 opacity: 1.0;
178 }
179 }
180
181
182 //
183 // Dropzone
184 //
185 .t3-page-ce-dropzone-available.active,
186 .t3-page-ce-dropzone-possible {
187 border: 1px dashed @page-ce-dropzone-border;
188 border-radius: @page-ce-dropzone-border-radius;
189 background-color: @page-ce-dropzone-bg;
190 }
191 .t3-page-ce-dropzone-available.active {
192 height: 2em;
193 }
194 .t3-page-ce-dropzone-possible {
195 margin: @page-grid-spacing;
196 }
197
198
199 //
200 // Dragging
201 //
202 .t3-page-ce-dragitem {
203 .t3-page-ce-header-draggable:hover {
204 cursor: move;
205 }
206 }