[TASK] Improve layout of ImageManipulation preview
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _main_content.less
1 //
2 // Content
3 //
4
5 // Menu icons
6 @app-icon-border-radius: @border-radius-small;
7 @app-icon-height: 32px;
8 @app-icon-width: 32px;
9 @app-icon-font-size: 21px;
10 @app-icon-bg: #484848;
11
12 //
13 // TYPO3 styles for basic elements
14 //
15
16 h1 {
17 font-family: Share, Verdana, Arial, Helvetica, sans-serif;
18 font-variant: normal;
19 font-weight: normal;
20 margin-top: 0;
21 margin-bottom: ceil((@font-size-base * 1.8));
22 }
23
24 h2 {
25 margin: 24px 0 12px 0;
26 }
27
28 h3 {
29 margin: 24px 0 12px 0;
30 }
31
32 ul,
33 ol,
34 blockquote {
35 margin-bottom: (@line-height-computed / 2);
36 }
37
38 // Lists
39
40 ul,
41 ol {
42 padding-left: 3em;
43 }
44
45 // Preformatted text - not used so much in TYPO3
46
47 pre {
48 margin: 0;
49 }
50
51 // horizontal ruler
52
53 hr,
54 div.hr {
55 background: none;
56 border: none;
57 height: 1px;
58 }
59
60 // .uppercase is kept for backwards-compatibility, use .divider
61
62 .divider {
63 padding-bottom: 12px;
64 }
65 li.divider {
66 padding: 0;
67 }
68
69 a span {
70 cursor: pointer;
71 }
72
73 video {
74 background-color: #000;
75 }
76
77 //
78 // Various classes
79 //
80
81 img.absmiddle {
82 vertical-align: middle;
83 }
84
85 .smallCheckboxes {
86 height: 12px;
87 margin: 0px;
88 width: 12px;
89 }
90
91 .alignToInputText, .alignToInputText:hover {
92 margin-top: 5px;
93 margin-right: 2px;
94 vertical-align: top;
95 }
96
97 .nowrap {
98 white-space: nowrap;
99 }
100
101 //
102 // TYPO3 styles for basic elements
103 //
104
105 tr:hover .t3-page-ce a,
106 tr:hover .x-tree a {
107 text-decoration: none;
108 }
109
110 a.t3-link {
111 text-decoration: underline;
112 }
113
114 em {
115 font-style: italic;
116 }
117
118 //
119 // Various classes
120 //
121
122 // Please use .typo3-app-icon in your extensions.
123 // Wrap <img> in span>span for 16x16px horizontally and vertically centered icons (backwards compatibility)
124 .typo3-app-icon {
125 position: relative;
126 display: inline-block;
127 padding: 0;
128 height: @app-icon-width;
129 width: @app-icon-height;
130 overflow: hidden;
131 border-radius: @app-icon-border-radius;
132 background-color: @app-icon-bg;
133 vertical-align: middle;
134 transform: translate3d(0,0,0);
135 > span {
136 display: table;
137 height: 100%;
138 width: 100%;
139 > span {
140 display: table-cell;
141 text-align: center;
142 vertical-align: middle;
143 }
144 }
145 img {
146 max-height: @app-icon-width;
147 max-width: @app-icon-width;
148 margin: 0 auto;
149 }
150 .fa {
151 font-size: @app-icon-font-size;
152 vertical-align: middle;
153 }
154 &:after {
155 position: absolute;
156 content: '';
157 display: block;
158 top: 0;
159 left: 0;
160 right: 0;
161 bottom: 0;
162 border: 1px solid rgba(255,255,255,0.1);
163 border-radius: @app-icon-border-radius;
164 }
165 }
166
167 .section {
168 margin-bottom: 15px;
169 }
170
171 .diff-r {
172 color: red;
173 }
174 div.diff-r {
175 background-color: red;
176 color: black;
177 }
178
179 .diff-g {
180 color: green;
181 }
182 div.diff-g {
183 background-color: green;
184 color: black;
185 }
186
187 div.diff-r,
188 div.diff-g {
189 padding: 3px;
190 }
191
192 // used in the admin tools => DB check
193 .t3-overview-list dt {
194 font-weight: bold;
195 }
196
197 //
198 // Dimmed span tag color (disabled)
199 //
200
201 .c-na {
202 color: #666;
203 font-style: italic;
204 }
205
206 .not-found a {
207 color: #cccccc;
208 }
209
210 //
211 // Red span tag color (warning, notice)
212 //
213
214 table.warningbox {
215 border: solid 2px black;
216 background-color: yellow;
217 margin: 20px 0;
218
219 td {
220 padding: 20px;
221 font-weight: bold;
222
223 a {
224 text-decoration: underline;
225 }
226 }
227 }
228
229 div.warningbox {
230 border: solid 2px black;
231 background-color: yellow;
232 font-weight: bold;
233 margin: 10px 0;
234 padding: 10px;
235 }
236
237 span.warningboxheader {
238 margin-left: 5px;
239 }
240
241 // all buttons have the "click" mouse cursor
242
243 .t3-btn {
244 cursor: pointer;
245 }
246
247 .media-gallery__list {
248 .media-gallery__item {
249 display: inline-block;
250 float: none;
251 margin-bottom: 15px;
252 margin-right: -4px;
253 vertical-align: top;
254
255 .media-object {
256 max-height: 158px;
257 overflow: hidden;
258 }
259
260 img.thumbnail {
261 height: auto;
262 margin-bottom: 0;
263 max-height: 150px;
264 max-width: 100%;
265 }
266
267 span.thumbnail {
268 display: inline-block;
269 margin-bottom: 0;
270 }
271 }
272 }