React-samples/src/listview/call-history.css at master · SyncfusionExamples/React-samples · GitHub

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 /* Layout customization */

 .layoutWrapper {
    line-height: initial;
    border: 1px solid black;
    width: 285px;
    height: 505px;
    margin: auto;
    margin-bottom: 15px;
    border-radius: 28px;
    position: relative;
    visibility: hidden;
}

.layoutWrapper .speaker {
    border: 1px solid black;
    border-radius: 5px;
    width: 33.33333333%;
    height: 5px;
    margin: 15px auto 0px auto;
    position: relative;
}

.layoutWrapper .outerButton {
    width: 30px;
    height: 30px;
    border: 1px solid black;
    border-radius: 50%;
    position: absolute;
    bottom: calc(0% + 10px);
    left: calc(50% - 15px);
}

.layoutWrapper .camera {
    position: absolute;
    left: calc(-15% - 10px);
    top: -100%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid black;
}

.layoutWrapper .layout {
    border: 1px solid black;
    margin: 20px 13px 0px 13px;
}

.layout #list-container .e-list-item {
    cursor: pointer;
}

.layoutWrapper.e-device-layout {
    visibility: visible;
}

.e-visbile-layer {
    visibility: visible;
}

/* ListView customization */

@font-face {
    font-family: 'Phone Icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Call-icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRoAAAEoAAAAVmNtYXDOHM5nAAABjAAAAEBnbHlmtaNmiAAAAdQAAAEkaGVhZBAo7yMAAADQAAAANmhoZWEHegNsAAAArAAAACRobXR4C9H/wgAAAYAAAAAMbG9jYQBIAJIAAAHMAAAACG1heHABDwA6AAABCAAAACBuYW1ltZtoBgAAAvgAAAJJcG9zdNgJzA8AAAVEAAAAWAABAAADUv9qAFoEAP/h//4D6gABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAvvVLOF8PPPUACwPoAAAAANafVTkAAAAA1p9VOf/h/+ED6gPrAAAACAACAAAAAAAAAAEAAAADAC4AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAgNS/2oAWgPrAJYAAAABAAAAAAAABAAAAAPo/+ED6P/hAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucA5wL//wAA5wDnAv//AAAAAAABAAYABgAAAAEAAgAAAAAASACSAAL/4f/hA+oD6wAGACgAAAEnAyUnNyclDwEGEgAEPwE2NC8BJgciBg8BBiYnLgE/ATY0LwEmByIGAoldLAFSa5Zd/V8DUUp9AT4BU5JUFRVUGR0QHAxXXKZNUE4hSxUVVRgdDhoC913+rytrll5LBFGS/q7+wH9KVRg8FlUWAQwJTyBNUFClXVUYPBZXFwEJAAL/4f/hA+oD6wALAC0AAAEjFTMVMzUzNSM1IyUPAQYSAAQ/ATY0LwEmByIGDwEGJicuAT8BNjQvASYHIgYCmXp6S3p6S/3mA1FKfQE+AVOSVBUVVBkdEBwMV1ymTVBOIUsVFVUYHQ4aAsRLenpLepoEUZL+rv7Af0pVGDwWVRYBDAlPIE1QUKVdVRg8FlcXAQkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBDYWxsLWljb25zUmVndWxhckNhbGwtaWNvbnNDYWxsLWljb25zVmVyc2lvbiAxLjBDYWxsLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABDAGEAbABsAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAQwBhAGwAbAAtAGkAYwBvAG4AcwBDAGEAbABsAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABDAGEAbABsAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFHRlbGVwaG9uZS0tLWluY29taW5nF3RlbGVwaG9uZS0tLWFkZGNhbGwtLTAyAAA=) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.layout #list-container #all.e-listview.e-list-template .e-list-wrapper.e-list-multi-line,
.layout #list-container #received.e-listview.e-list-template .e-list-wrapper.e-list-multi-line,
.layout #list-container #missed.e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
    padding: 5px;
}

.layout #list-container #all.e-listview.e-list-template .e-list-wrapper.e-list-avatar,
.layout #list-container #received.e-listview.e-list-template .e-list-wrapper.e-list-avatar,
.layout #list-container #missed.e-listview.e-list-template .e-list-wrapper.e-list-avatar {
    padding-left: 50px;
    padding-right: 5px;
}

.layout #list-container #all.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
.layout #list-container #received.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
.layout #list-container #missed.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
    top: 5px;
    left: 5px;
}

.layout #list-container #all,
.layout #list-container #received,
.layout #list-container #missed {
    max-height: 360px;
}

.layout #list-container {
    height: 405px;
}

.layout #list-container .received {
    font-family: Call-icons;
}

.layout #list-container .received:before {
    content: '\e700';
    font-size: 8px;
    margin-right: 6px;
}

.layout #list-container .missed {
    font-family: Call-icons;
}

.layout #list-container .missed:before {
    content: '\e702';
    font-size: 8px;
    margin-right: 6px;
}

.layout #list-container .e-icon {
    font-family: 'e-icons';
    background: transparent;
    color: black;
}

.layout #list-container .e-icon:before {
    content: '\e902';
}

/* ListView theme customization */

.highcontrast .layoutWrapper .layout,
.highcontrast .layoutWrapper .camera,
.highcontrast .layoutWrapper .outerButton,
.highcontrast .layoutWrapper .speaker,
.highcontrast .layoutWrapper {
    border-color: white;
}