1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| .content h3 {
| margin: 1em 0 0.5em;
| }
|
| #grid {
| width: 80%;
| margin: auto;
| height: 332px; /* tall enough for 2 rows in gallery view */
| }
|
| .controls,
| .content {
| width: 944px;
| margin: 0 auto;
| padding: 2em;
| }
|
| .controls {
| background: #000;
| padding: 1.25em 2em;
| color: #fff;
| text-align: center;
| }
|
| .controls button {
| margin: 0 0.5em;
| padding: 0 1em;
| }
|
| /* styles for icon node in various views */
|
| .icon {
| font-size: 0; /*TODO: is this needed?*/
| background-repeat: no-repeat;
| }
|
| .table .icon {
| width: 32px;
| height: 32px;
| }
|
| .details .icon {
| width: 72px; /* 64px + buffer to separate icon from text */
| height: 64px;
| }
|
| .gallery .icon {
| width: 128px;
| height: 128px;
| margin: auto;
| }
|
| /* styles for "table" view (using Grid.renderRow) */
|
| .table .field-icon {
| width: 33px;
| padding: 0;
| }
|
| .table .dgrid-cell {
| vertical-align: middle;
| }
|
| /* Table view allows expanding/collapsing rows to show summary */
|
| .table .expando {
| /* style of area containing summary, expanded on click */
| border-bottom: 1px solid #ccc !important;
| padding: 0.7em 1em 0.5em 3em;
| background: #fff;
| background: -moz-linear-gradient(top, rgba(255,255,255,1) 24%, rgba(237,237,237,1) 100%);
| background: -webkit-linear-gradient(top, rgba(255,255,255,1) 24%,rgba(237,237,237,1) 100%);
| background: -ms-linear-gradient(top, rgba(255,255,255,1) 24%,rgba(237,237,237,1) 100%);
| background: linear-gradient(top, rgba(255,255,255,1) 24%,rgba(237,237,237,1) 100%);
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
| }
|
| .table .collapsed .expando {
| display: none;
| }
|
| /* styles for details view */
|
| .details .dgrid-row {
| clear: both;
| min-height: 64px;
| padding: 0.5em;
| }
|
| .details .icon {
| float: left;
| }
|
| .details .name {
| font-weight: bold;
| margin-bottom: 1em;
| }
|
| /* styles for gallery view */
|
| .gallery .dgrid-row {
| width: 25%;
| display: inline-block;
| text-align: center;
| padding: 1em 0;
| }
|
|
