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
146
147
148
|
.panel .table {
font-size: var(--pf-global--FontSize-s);
}
/* Panels don't draw borders between them */
.panel > .table > tbody:first-child td {
border-top: 1px solid rgb(221 221 221);
}
/* Table headers should not generate a double border */
.panel .table thead tr th {
border-bottom: 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-height: calc(28px + 1rem);
padding: 0.5rem 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: right;
}
@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-left: -10px;
margin-right: -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-width: 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;
left: 0;
top: 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;
}
}
/*
* Fix up table row hovering.
*
* When you hover over table rows it's because they're clickable.
*/
.table-hover > tbody > tr > td,
.table-hover > tbody > tr > th {
cursor: pointer;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
/* PF3 uses a light blue; 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-left: 1rem;
}
.table tbody tr > :last-child,
.table thead tr > :last-child {
padding-right: 1rem;
}
|
