-
Notifications
You must be signed in to change notification settings - Fork 1
/
synology-surveillance_v.css
119 lines (102 loc) · 3.02 KB
/
synology-surveillance_v.css
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
.MMM-SynologySurveillance .synology-surveillance {
--column-cnt: 2;
--cam-bg-color: #2b2c30;
--cam-name-bg-color: #1b1b1c;
--postion-color: #5e5f63;
--position-selected-color: #1b1b1c;
--cam-wrapper-border-radius: 5px;
--cam-border-radius: 5px;
--name-border-radius: 5px;
--position-border-radius: 3px;
--padding-camWrapper: 5px;
--cam-width: 200px;
--cam-min-height: calc(var(--cam-width) / 1.33);
--cam-big-width: calc(var(--cam-width) * var(--column-cnt));
--cam-big-wrapper-width: calc(
var(--cam-big-width) + calc(var(--padding-camWrapper) * var(--column-cnt))
);
--cam-big-min-height: calc(var(--cam-big-width) / 1.33);
--icon-size: 50px;
--icon-postion: calc(var(--cam-min-height) / 2 - 25px);
--icon-big-position: calc(calc(var(--cam-big-min-height) / 2) - 25px);
--position-size: 10px;
--position-big-size: calc(var(--position-size) * 2);
--position-margin: 5px 5px 5px 5px;
--width-noSpace: calc(var(--cam-width) * var(--column-cnt));
width: calc(
calc(calc(var(--column-cnt) * 3) * var(--padding-camWrapper)) +
var(--width-noSpace)
);
justify-content: space-evenly;
align-items: center;
display: flex;
flex-wrap: wrap;
}
.MMM-SynologySurveillance .innerPositionWrapper {
min-height: calc(var(--position-size) + 20px);
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
}
.MMM-SynologySurveillance .position {
margin: var(--position-margin);
padding: 5px;
height: var(--position-size);
width: var(--position-size);
background-color: var(--postion-color);
border-radius: var(--position-border-radius);
}
.MMM-SynologySurveillance .position.big {
height: var(--position-big-size);
width: var(--position-big-size);
}
.MMM-SynologySurveillance .position .selected {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
border-radius: var(--position-border-radius);
background-color: var(--position-selected-color);
}
.MMM-SynologySurveillance .camWrapper {
background-color: var(--cam-bg-color);
border-radius: var(--cam-wrapper-border-radius);
padding: var(--padding-camWrapper);
margin-bottom: 5px;
}
.MMM-SynologySurveillance .camWrapper .name {
width: 100%;
background-color: var(--cam-name-bg-color);
border-radius: var(--name-border-radius);
margin-bottom: 5px;
}
.MMM-SynologySurveillance .innerCamWrapper {
margin: auto;
display: block;
width: var(--cam-width);
min-width: var(--cam-width);
min-height: var(--cam-min-height);
}
.MMM-SynologySurveillance .innerCamWrapper.big {
margin: auto;
display: block;
min-width: var(--cam-big-wrapper-width);
min-height: var(--cam-big-min-height);
}
.MMM-SynologySurveillance .cam {
border-radius: var(--cam-border-radius);
max-width: 100%;
margin: auto;
display: block;
}
.MMM-SynologySurveillance .cam.nourl,
.MMM-SynologySurveillance .cam.currentBig {
min-height: 100%;
font-size: var(--icon-size);
position: relative;
top: var(--icon-postion);
}
.MMM-SynologySurveillance .cam.nourl.big {
top: var(--icon-big-postion);
}