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