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 | ||
a5c5a349 | 74 | #crm-container .widget-controls { |
b9104ebf CW |
75 | background-color: #5D677B; |
76 | /* Standards-browsers do this anyway because all inner block elements are floated. IE doesn't because it's crap. */ | |
77 | display: block; | |
78 | padding: 5px 0; | |
a5c5a349 CW |
79 | } |
80 | ||
81 | #crm-container .widget-icon, #crm-container .full-screen-close-icon img { | |
82 | display: block; | |
83 | float: right; | |
84 | margin-left: 2px; | |
85 | margin-top: 2px; | |
86 | cursor: pointer; | |
87 | } | |
88 | ||
89 | #full-screen-header { | |
90 | display: block; | |
91 | padding: .2em .4em; | |
92 | background: #F0F0E8; | |
93 | /* Although this is an <a> link, it doesn't have an href="" attribute. */ | |
94 | cursor: pointer; | |
95 | } | |
96 | ||
97 | /* Make the throbber in-yer-face. */ | |
98 | #crm-container .throbber { | |
99 | text-align: right; | |
100 | background:url("../packages/jquery/css/images/throbber.gif") no-repeat scroll 0 0 transparent; | |
101 | height:20px; | |
102 | width:20px; | |
103 | } | |
104 | ||
105 | #crm-container p.loadtext { | |
106 | margin:1.6em 0 0 26px; | |
107 | } | |
108 | ||
41ce1b88 | 109 | #crm-container .widget-controls .crm-i { |
3479049c | 110 | font-size: 14px; |
41ce1b88 | 111 | padding: 0 6px; |
3479049c | 112 | font-weight: normal; |
a5c5a349 | 113 | float: left; |
41ce1b88 | 114 | cursor: pointer; |
73dd8c62 | 115 | color: #fcfcfc; |
3479049c | 116 | opacity: .7; |
a5c5a349 CW |
117 | } |
118 | ||
73dd8c62 | 119 | #crm-container .widget-controls:hover .crm-i { |
3479049c | 120 | opacity: 1; |
a5c5a349 CW |
121 | } |
122 | ||
41ce1b88 AH |
123 | #crm-container .widget-controls .crm-i.fa-expand, |
124 | #crm-container .widget-controls .crm-i.fa-times { | |
a5c5a349 CW |
125 | float:right; |
126 | } | |
a5c5a349 CW |
127 | |
128 | /* CSS for Dashlets */ | |
129 | ||
130 | #crm-container #available-dashlets { | |
131 | width: 98%; | |
b9104ebf | 132 | border: 2px dashed #CDE8FE; |
a5c5a349 CW |
133 | background-color: #999999; |
134 | min-height:40px; | |
135 | } | |
136 | ||
137 | #crm-container .dash-column { | |
138 | border: 2px solid #696969; | |
139 | min-height: 100px; | |
140 | background-color: #EEEEEE | |
141 | } | |
142 | ||
143 | #crm-container .dashlets-header { | |
144 | font-weight: bold; | |
145 | } | |
146 | ||
147 | #crm-container #dashlets-header-col-0 { | |
148 | float: left; | |
149 | width: 40%; | |
150 | } | |
151 | ||
152 | #crm-container #dashlets-header-col-1 { | |
153 | margin-left: 42%; | |
154 | width: 56%; | |
155 | } | |
156 | ||
157 | #crm-container #existing-dashlets-col-0 { | |
158 | float: left; | |
159 | width: 40%; | |
160 | } | |
161 | ||
162 | #crm-container #existing-dashlets-col-1 { | |
163 | margin-left: 42%; | |
164 | width: 56%; | |
165 | } | |
166 | ||
167 | #crm-container .portlet { | |
168 | margin: .5em; | |
169 | width: 75%; | |
170 | display: inline-block; | |
171 | } | |
172 | ||
173 | #crm-container .portlet-header { | |
174 | margin: 0.3em; | |
175 | padding: 0.5em; | |
176 | cursor: pointer; | |
177 | } | |
178 | ||
179 | #crm-container #available-dashlets .portlet { | |
180 | width: auto; | |
181 | } | |
182 | ||
44f15f74 | 183 | #crm-container .portlet-header .crm-i { |
a5c5a349 | 184 | float: right; |
44f15f74 | 185 | color: #52534D; |
a5c5a349 CW |
186 | } |
187 | ||
188 | #crm-container .portlet-content { | |
189 | padding: 0.4em; | |
190 | } | |
191 | ||
192 | #crm-container .ui-sortable-placeholder { | |
193 | border: 1px dotted black; | |
194 | visibility: visible !important; | |
195 | height: 50px !important; | |
196 | } | |
197 | ||
198 | #crm-container .ui-sortable-placeholder * { | |
199 | visibility: hidden; | |
200 | } | |
2937ef4d | 201 | |
1f5bba33 | 202 | @media screen and (max-device-width: 50em), screen and (max-width: 50em) { |
2937ef4d CW |
203 | #crm-container .column { |
204 | width: 100%; | |
205 | min-height: 0; | |
206 | } | |
207 | #crm-container .column-0 { | |
208 | padding: 0; | |
209 | } | |
210 | } |