[BUGFIX] Fix CSS layout of cropper UI for Firefox
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_modal.less
1 //
2 // Modals
3 //
4
5 // Modal notice
6 @modal-notice-bg: @btn-default-bg;
7 @modal-notice-color: @btn-default-color;
8 @modal-notice-border: @btn-default-border;
9
10 // Modal info
11 @modal-info-bg: @btn-info-bg;
12 @modal-info-color: @btn-info-color;
13 @modal-info-border: @btn-info-border;
14
15 // Modal success
16 @modal-success-bg: @btn-success-bg;
17 @modal-success-color: @btn-success-color;
18 @modal-success-border: @btn-success-border;
19
20 // Modal warning
21 @modal-warning-bg: @btn-warning-bg;
22 @modal-warning-color: @btn-warning-color;
23 @modal-warning-border: @btn-warning-border;
24
25 // Modal danger
26 @modal-danger-bg: @btn-danger-bg;
27 @modal-danger-color: @btn-danger-color;
28 @modal-danger-border: @btn-danger-border;
29
30 // Modal styling
31 .modal {
32 &.t3-modal-notice .modal-header {
33 background-color: @modal-notice-bg;
34 color: @modal-notice-color;
35 border-bottom-color: @modal-notice-border;
36 }
37 &.t3-modal-info .modal-header {
38 background-color: @modal-info-bg;
39 color: @modal-info-color;
40 border-bottom-color: @modal-info-border;
41 }
42 &.t3-modal-success .modal-header {
43 background-color: @modal-success-bg;
44 color: @modal-success-color;
45 border-bottom-color: @modal-success-border;
46 }
47 &.t3-modal-warning .modal-header {
48 background-color: @modal-warning-bg;
49 color: @modal-warning-color;
50 border-bottom-color: @modal-warning-border;
51 }
52 &.t3-modal-danger .modal-header {
53 background-color: @modal-danger-bg;
54 color: @modal-danger-color;
55 border-bottom-color: @modal-danger-border;
56 }
57 .close {
58 color: inherit;
59 padding: 0;
60 margin: 0;
61 text-shadow: rgba(0,0,0,0.5) 0px 0px 3px;
62 .opacity(0.5);
63 .user-select('none');
64 &:hover,
65 &:active,
66 &:hover {
67 box-shadow: none;
68 outline: none;
69 background: none;
70 .opacity(1);
71 }
72 }
73 }
74 .modal-header,
75 .modal-footer {
76 padding: 10px 15px;
77 }
78 .modal-footer .btn {
79 margin-right: 0;
80 min-width: 100px;
81 }
82 .modal-content {
83 .transition(margin-top .1s ease-in);
84 border: none;
85
86 .loadmessage {
87 text-align: center;
88 color: @gray-darker;
89 }
90 }
91
92 .modal-resize {
93 &.fade .modal-dialog {
94 .transition-property(~"height, width");
95 .transition-duration(.35s);
96 .transition-timing-function(ease);
97 }
98 }
99
100 /**
101 * Cropper modal component styles
102 */
103 .modal-image-manipulation {
104 width: 90vw;
105 height: 90vh;
106 .modal-panel {
107 display: flex;
108 height: 80vh;
109 overflow: visible;
110 }
111 .modal-panel-body {
112 background-image: data-uri("../Images/cropper-background.png");
113 display: flex;
114 align-items: center;
115 justify-content: center;
116 }
117 .modal-panel .modal-panel-body {
118 height: 100%;
119 width: 78% ;
120 float: none;
121 overflow: hidden
122 }
123
124 .modal-panel .modal-panel-sidebar {
125 width: 22%;
126 max-height: 100%;
127 overflow: auto;
128 -webkit-overflow-scrolling: touch;
129 }
130
131 .modal-panel .modal-panel-sidebar-right {
132 background-color: #212424;
133 float: none;
134 position: relative;
135 }
136
137 .modal-panel .modal-footer {
138 position: absolute;
139 bottom: 0;
140 right: 0;
141 width: 100%;
142 }
143 .modal-body {
144 .col-lg-12 {
145 padding-right: 450px;
146 .panel {
147 margin: 0;
148 width: 400px;
149 position: absolute;
150 top: 0px;
151 right: 15px;
152 }
153 }
154 }
155 }
156
157 .modal.modal-dark {
158
159 color: #FFF;
160 .modal-content {
161 overflow: hidden;
162 background-color: #212424;
163 }
164 .modal-header {
165 color: #FFF;
166 background-color: #484848;
167 border-bottom-color: #000000;
168 }
169 .modal-body, .modal-footer {
170 background-color: #212424;
171 color: #FFF;
172 }
173 .modal-footer {
174 border-top: 1px solid #000000;
175 }
176 }
177
178 // Modal as panel
179 .modal-panel {
180 .modal-panel-body {
181 float: left;
182 width: 400px;
183 }
184 .modal-panel-sidebar-right {
185 width: 300px;
186 float: right;
187 border-left: 1px solid #000000;
188 }
189 }
190
191 .modal-image-manipulation {
192 .modal-panel-body {
193 padding: 20px;
194 img {
195 max-width: 100%;
196 }
197 }
198 }