Commit | Line | Data |
---|---|---|
a5c5a349 CW |
1 | /** |
2 | * @file | |
3 | * CSS for the jQuery.dashboard() plugin. | |
4 | * | |
5 | * Released under the GNU General Public License. See LICENSE.txt. | |
6 | */ | |
7 | ||
8 | #crm-container .column { | |
9 | float: left; | |
10 | margin: 0; | |
11 | /* padding-bottom and min-height make sure that there is always a sizable drop zone. */ | |
262413d0 CW |
12 | min-height: 200px; |
13 | padding: 0 0 40px; | |
a5c5a349 CW |
14 | list-style-type: none; |
15 | } | |
16 | ||
17 | #crm-container .column-0 { | |
18 | width: 40%; | |
19 | } | |
20 | ||
21 | #crm-container .column-1 { | |
22 | width: 60%; | |
23 | } | |
24 | ||
25 | /* The placeholder that indicates where a dragged widget will land if dropped now. */ | |
26 | #crm-container .placeholder { | |
27 | margin: 5px; | |
b9104ebf | 28 | border: 3px dashed #CDE8FE; |
a5c5a349 CW |
29 | } |
30 | ||
31 | /* Spacing between widgets. */ | |
b9104ebf CW |
32 | #crm-container li.widget, |
33 | #crm-container li.empty-placeholder { | |
34 | margin: 0 3px 10px 3px; | |
35 | } | |
a5c5a349 | 36 | #crm-container li.widget { |
b9104ebf | 37 | padding: 0; |
a5c5a349 CW |
38 | } |
39 | ||
40 | /* Spacing inside widgets. */ | |
41 | #crm-container .widget-wrapper { | |
b9104ebf CW |
42 | padding: 0; |
43 | overflow: hidden; | |
44 | margin-right: .25em; | |
45 | box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2); | |
46 | border-radius: 3px; | |
47 | } | |
48 | ||
49 | #crm-container .widget-wrapper.db-hover-handle { | |
50 | box-shadow: 1px 1px 8px 3px rgba(0,0,0,0.2); | |
a5c5a349 CW |
51 | } |
52 | ||
b9104ebf CW |
53 | #crm-container .ui-sortable-helper .widget-wrapper { |
54 | box-shadow: 1px 1px 8px 3px rgba(0,0,0,0.5); | |
55 | } | |
56 | ||
57 | /* widget header / title */ | |
a5c5a349 | 58 | #crm-container .widget-header { |
b9104ebf CW |
59 | background: transparent none repeat scroll 0 0; |
60 | cursor: move; | |
61 | margin: 0 50px 0 0; | |
62 | padding: 0; | |
73dd8c62 | 63 | color: #fcfcfc; |
a5c5a349 CW |
64 | } |
65 | ||
66 | /* widget content / body*/ | |
67 | #crm-container .widget-content { | |
68 | background-color: #ffffff; | |
69 | padding:0.5em; | |
b9104ebf | 70 | overflow-x:auto; |
dd3770bc | 71 | min-height: 10em; |
b9104ebf CW |
72 | } |
73 | ||
74 | #crm-container .widget-content .crm-accordion-header { | |
75 | background-color: #EFEFE5; | |
76 | background-image: url("../i/TreeMinus.gif"); | |
d383174a | 77 | color: #080808; |
b9104ebf CW |
78 | } |
79 | ||
80 | #crm-container .widget-content .crm-accordion-wrapper.collapsed .crm-accordion-header { | |
81 | background-image: url("../i/TreePlus.gif"); | |
82 | } | |
83 | ||
84 | #crm-container .widget-content .crm-accordion-header:hover { | |
85 | background-color: #e8e8de; | |
86 | } | |
87 | ||
88 | #crm-container .widget-content .crm-accordion-body { | |
89 | border-color: #e8e8de; | |
90 | padding: 4px .5em; | |
a5c5a349 CW |
91 | } |
92 | ||
a5c5a349 | 93 | #crm-container .widget-controls { |
b9104ebf CW |
94 | background-color: #5D677B; |
95 | /* Standards-browsers do this anyway because all inner block elements are floated. IE doesn't because it's crap. */ | |
96 | display: block; | |
97 | padding: 5px 0; | |
a5c5a349 CW |
98 | } |
99 | ||
100 | #crm-container .widget-icon, #crm-container .full-screen-close-icon img { | |
101 | display: block; | |
102 | float: right; | |
103 | margin-left: 2px; | |
104 | margin-top: 2px; | |
105 | cursor: pointer; | |
106 | } | |
107 | ||
108 | #full-screen-header { | |
109 | display: block; | |
110 | padding: .2em .4em; | |
111 | background: #F0F0E8; | |
112 | /* Although this is an <a> link, it doesn't have an href="" attribute. */ | |
113 | cursor: pointer; | |
114 | } | |
115 | ||
116 | /* Make the throbber in-yer-face. */ | |
117 | #crm-container .throbber { | |
118 | text-align: right; | |
119 | background:url("../packages/jquery/css/images/throbber.gif") no-repeat scroll 0 0 transparent; | |
120 | height:20px; | |
121 | width:20px; | |
122 | } | |
123 | ||
124 | #crm-container p.loadtext { | |
125 | margin:1.6em 0 0 26px; | |
126 | } | |
127 | ||
41ce1b88 | 128 | #crm-container .widget-controls .crm-i { |
3479049c | 129 | font-size: 14px; |
41ce1b88 | 130 | padding: 0 6px; |
3479049c | 131 | font-weight: normal; |
a5c5a349 | 132 | float: left; |
41ce1b88 | 133 | cursor: pointer; |
73dd8c62 | 134 | color: #fcfcfc; |
3479049c | 135 | opacity: .7; |
a5c5a349 CW |
136 | } |
137 | ||
73dd8c62 | 138 | #crm-container .widget-controls:hover .crm-i { |
3479049c | 139 | opacity: 1; |
a5c5a349 CW |
140 | } |
141 | ||
41ce1b88 AH |
142 | #crm-container .widget-controls .crm-i.fa-expand, |
143 | #crm-container .widget-controls .crm-i.fa-times { | |
a5c5a349 CW |
144 | float:right; |
145 | } | |
a5c5a349 CW |
146 | |
147 | /* CSS for Dashlets */ | |
148 | ||
149 | #crm-container #available-dashlets { | |
150 | width: 98%; | |
b9104ebf | 151 | border: 2px dashed #CDE8FE; |
a5c5a349 CW |
152 | background-color: #999999; |
153 | min-height:40px; | |
154 | } | |
155 | ||
156 | #crm-container .dash-column { | |
157 | border: 2px solid #696969; | |
158 | min-height: 100px; | |
159 | background-color: #EEEEEE | |
160 | } | |
161 | ||
162 | #crm-container .dashlets-header { | |
163 | font-weight: bold; | |
164 | } | |
165 | ||
166 | #crm-container #dashlets-header-col-0 { | |
167 | float: left; | |
168 | width: 40%; | |
169 | } | |
170 | ||
171 | #crm-container #dashlets-header-col-1 { | |
172 | margin-left: 42%; | |
173 | width: 56%; | |
174 | } | |
175 | ||
176 | #crm-container #existing-dashlets-col-0 { | |
177 | float: left; | |
178 | width: 40%; | |
179 | } | |
180 | ||
181 | #crm-container #existing-dashlets-col-1 { | |
182 | margin-left: 42%; | |
183 | width: 56%; | |
184 | } | |
185 | ||
186 | #crm-container .portlet { | |
187 | margin: .5em; | |
188 | width: 75%; | |
189 | display: inline-block; | |
190 | } | |
191 | ||
192 | #crm-container .portlet-header { | |
193 | margin: 0.3em; | |
194 | padding: 0.5em; | |
195 | cursor: pointer; | |
196 | } | |
197 | ||
198 | #crm-container #available-dashlets .portlet { | |
199 | width: auto; | |
200 | } | |
201 | ||
44f15f74 | 202 | #crm-container .portlet-header .crm-i { |
a5c5a349 | 203 | float: right; |
44f15f74 | 204 | color: #52534D; |
a5c5a349 CW |
205 | } |
206 | ||
207 | #crm-container .portlet-content { | |
208 | padding: 0.4em; | |
209 | } | |
210 | ||
211 | #crm-container .ui-sortable-placeholder { | |
212 | border: 1px dotted black; | |
213 | visibility: visible !important; | |
214 | height: 50px !important; | |
215 | } | |
216 | ||
217 | #crm-container .ui-sortable-placeholder * { | |
218 | visibility: hidden; | |
219 | } | |
2937ef4d | 220 | |
1f5bba33 | 221 | @media screen and (max-device-width: 50em), screen and (max-width: 50em) { |
2937ef4d CW |
222 | #crm-container .column { |
223 | width: 100%; | |
224 | min-height: 0; | |
225 | } | |
226 | #crm-container .column-0 { | |
227 | padding: 0; | |
228 | } | |
229 | } |