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
|
.panel .table {
font-size: var(--pf-v5-global--FontSize-s);
}
/* Panels don't draw borders between them */
.panel > .table > tbody:first-child td {
border-block-start: 1px solid rgb(221 221 221);
}
/* Table headers should not generate a double border */
.panel .table thead tr th {
border-block-end: none;
}
/* Fix panel heading alignment & mobile layout */
.panel-heading {
align-items: center;
background: #f5f5f5;
display: flex;
flex-wrap: wrap;
/* (28px small size widget height) + (0.5rem * 2) */
min-block-size: calc(28px + 1rem);
padding-block: 0.5rem;
padding-inline: 1rem;
position: relative;
z-index: 100;
}
.panel-title {
font: inherit;
margin: 0;
padding: 0;
}
.panel-title > a {
color: var(--ct-color-link);
display: inline-block;
}
.panel-title > a:hover,
.panel-title > a:focus {
color: var(--alert-info-text);
}
/* Allow children in the title to wrap */
.panel-title > h3,
.panel-title > a,
.panel-title > div,
.panel-title > span {
flex-shrink: 1;
word-break: break-all;
}
.panel-heading > :last-child:not(:first-child),
.panel-heading > .panel-heading-actions {
flex: auto;
text-align: end;
}
@media screen and (max-width: 640px) {
/* Remove _most_ of the gaps on the sides of small screens */
/* to maximize space, but still keep the boxy panel look */
.col-md-12 > .panel {
margin-inline: -10px;
}
.panel {
/* Background fade */
--hi-color: #d1d1d1;
--hi-color2: var(--ct-global--palette--black-250);
--bg-color: var(--ct-color-bg);
--hi-width: 20px;
--hi-width3: calc(var(--hi-width) * 3);
--transparent: rgb(255 255 255 / 0%); /* WebKit needs white transparent */
max-inline-size: 100vw;
overflow-x: auto;
position: relative;
background-image:
linear-gradient(to left, var(--bg-color) var(--hi-width), var(--transparent) var(--hi-width3)),
linear-gradient(to left, var(--hi-color) 1px, var(--transparent) 2px, var(--hi-color2) 4px, var(--bg-color) var(--hi-width)),
linear-gradient(to right, var(--bg-color) var(--hi-width), var(--transparent) var(--hi-width3)),
linear-gradient(to right, var(--hi-color) 1px, var(--transparent) 2px, var(--hi-color2) 4px, var(--bg-color) var(--hi-width));
background-attachment: local, scroll, local, scroll;
background-position: right, right, left, left;
background-repeat: no-repeat;
background-size: var(--hi-width3) 100%;
}
.panel > .panel-heading {
position: sticky;
inset-inline-start: 0;
inset-block-start: 0;
}
.panel .table thead th {
white-space: nowrap;
}
.panel .table:not(:hover):not(:focus):not(:active) {
background: transparent;
}
.panel .table thead:not(:hover):not(:focus):not(:active) {
background: transparent;
}
}
.pf-v5-c-table__tr.pf-m-clickable:hover > td,
.pf-v5-c-table__tr.pf-m-clickable:hover > th {
/* PF5 has no hover background color; we have to force the override for hover colors */
background-color: var(--ct-color-list-hover-bg) !important;
color: var(--ct-color-list-hover-text) !important;
}
/* Override patternfly to fit buttons and such */
.table > thead > tr > th,
.table > tbody > tr > td {
padding: 0.5rem;
vertical-align: baseline;
}
/* Override the heavy patternfly headers */
.table > thead {
background-image: none;
background-color: var(--ct-color-bg);
}
/* Make things line up */
.table tbody tr > :first-child,
.table thead tr > :first-child {
padding-inline-start: 1rem;
}
.table tbody tr > :last-child,
.table thead tr > :last-child {
padding-inline-end: 1rem;
}
|
