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
|
<style>
/* Shared styles for both table and card views */
.table {
width: 100%;
box-sizing: border-box;
}
button {
background: var(--table-header);
color: var(--text-color);
font-size: 125%;
font-weight: bold;
padding: 5px;
border: 1px solid var(--table-border);
border-radius: 0 0 var(--element-border-radius)
var(--element-border-radius);
box-sizing: border-box;
width: 100%;
}
button:hover {
filter: brightness(var(--action-row-button-hover-brightness));
}
button:active {
filter: brightness(var(--action-row-button-active-brightness));
}
/* Table view for wide screen */
@media only screen and (min-width: 711px) {
.table {
display: table;
border: 1px solid var(--table-border);
border-radius: var(--element-border-radius)
var(--element-border-radius) 0 0;
border-bottom: none;
}
header {
display: table-row;
background-color: var(--table-header);
font-size: 100%;
}
.cell {
border-right: 1px solid var(--table-border);
display: table-cell;
padding: 12px 7px;
}
#namespace-header {
border-radius: var(--element-border-radius) 0 0 0;
}
<if expr="is_android or is_ios">
#namespace-header {
display: none;
}
</if>
#header-remove-btn-cell {
border-radius: 0 var(--element-border-radius) 0 0;
border-right: none;
}
}
/* Card view for narrow screen / mobile */
@media only screen and (max-width: 710px) {
header {
display: none;
}
.cell {
display: block;
border: none;
padding: none;
}
}
</style>
<div class="table" role="table">
<header role="row">
<div class="cell" id="namespace-header">$i18n{testTableNamespace}</div>
<div class="cell">$i18n{testTableName}</div>
<div class="cell">$i18n{testTableValue}</div>
<div class="cell">$i18n{testTablePreset}</div>
<div class="cell">$i18n{testTableSource}</div>
<div class="cell">$i18n{testTableScope}</div>
<div class="cell">$i18n{testTableLevel}</div>
<div class="cell" id="header-remove-btn-cell"></div>
</header>
</div>
<button id="add-policy-btn">+</button>
|
