1// Copyright 2023 The Pigweed Authors 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); you may not 4// use this file except in compliance with the License. You may obtain a copy of 5// the License at 6// 7// https://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 11// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 12// License for the specific language governing permissions and limitations under 13// the License. 14 15import { css } from 'lit'; 16 17export const styles = css` 18 * { 19 box-sizing: border-box; 20 } 21 22 :host { 23 background-color: var(--sys-log-viewer-color-table-bg); 24 color: var(--sys-log-viewer-color-table-text); 25 display: block; 26 font-family: 'Roboto Mono', monospace; 27 font-size: 1rem; 28 height: 100%; 29 overflow: hidden; 30 position: relative; 31 } 32 33 .table-container { 34 display: grid; 35 height: 100%; 36 overflow: scroll; 37 scroll-behavior: auto; 38 width: 100%; 39 } 40 41 table { 42 border-collapse: collapse; 43 contain: strict; 44 display: table; 45 height: 100%; 46 table-layout: fixed; 47 } 48 49 thead, 50 th { 51 position: sticky; 52 top: 0; 53 z-index: 1; 54 } 55 56 thead { 57 background-color: var(--sys-log-viewer-color-table-header-bg); 58 color: var(--sys-log-viewer-color-table-header-text); 59 display: block; 60 width: 100%; 61 } 62 63 tr { 64 color: var(--md-sys-color-on-surface); 65 border-bottom: 1px solid var(--sys-log-viewer-color-table-cell-outline); 66 contain: content; 67 display: grid; 68 grid-template-columns: var(--column-widths); 69 justify-content: flex-start; 70 width: 100%; 71 will-change: transform, grid-template-columns; 72 } 73 74 .log-row--warning { 75 --bg-color: var(--sys-log-viewer-color-surface-yellow); 76 --text-color: var(--sys-log-viewer-color-on-surface-yellow); 77 --icon-color: var(--sys-log-viewer-color-orange-bright); 78 } 79 80 .log-row--error, 81 .log-row--critical { 82 --bg-color: var(--sys-log-viewer-color-surface-error); 83 --text-color: var(--sys-log-viewer-color-on-surface-error); 84 --icon-color: var(--sys-log-viewer-color-error-bright); 85 } 86 87 .log-row--debug { 88 --bg-color: initial; 89 --text-color: var(--sys-log-viewer-color-debug); 90 --icon-color: var(--sys-log-viewer-color-debug); 91 } 92 93 .log-row--warning .cell-icon, 94 .log-row--error .cell-icon, 95 .log-row--critical .cell-icon { 96 color: var(--icon-color); 97 } 98 99 .log-row--warning, 100 .log-row--error, 101 .log-row--critical, 102 .log-row--debug { 103 background-color: var(--bg-color); 104 color: var(--text-color); 105 } 106 107 .log-row .cell-content { 108 display: inline-flex; 109 overflow: hidden; 110 text-overflow: ellipsis; 111 white-space: pre-wrap; 112 } 113 114 .log-row--nowrap .cell-content { 115 white-space: pre; 116 } 117 118 tbody tr::before { 119 background-color: transparent; 120 bottom: 0; 121 content: ''; 122 display: block; 123 left: 0; 124 position: absolute; 125 right: 0; 126 top: 0; 127 width: 100%; 128 z-index: -1; 129 } 130 131 tbody tr:hover::before { 132 background-color: rgba( 133 var(--sys-log-viewer-color-table-row-highlight), 134 0.05 135 ); 136 } 137 138 th, 139 td { 140 display: block; 141 grid-row: 1; 142 overflow: hidden; 143 padding: var(--sys-log-viewer-table-cell-padding); 144 text-align: left; 145 text-overflow: ellipsis; 146 } 147 148 th[hidden], 149 td[hidden] { 150 display: none; 151 } 152 153 th { 154 grid-row: 1; 155 white-space: nowrap; 156 } 157 158 th[title='severity'] { 159 visibility: hidden; 160 } 161 162 td { 163 display: inline-flex; 164 position: relative; 165 vertical-align: top; 166 align-items: flex-start; 167 } 168 169 .cell-text { 170 line-height: normal; 171 text-overflow: ellipsis; 172 overflow: hidden; 173 } 174 175 .jump-to-bottom-btn { 176 bottom: 2.25rem; 177 font-family: 'Roboto Flex', sans-serif; 178 position: absolute; 179 place-self: center; 180 transform: translateY(15%) scale(0.9); 181 } 182 183 .resize-handle { 184 background-color: var(--sys-log-viewer-color-table-cell-outline); 185 bottom: 0; 186 content: ''; 187 cursor: col-resize; 188 height: 100%; 189 left: 0; 190 mix-blend-mode: luminosity; 191 opacity: 1; 192 pointer-events: auto; 193 position: absolute; 194 right: 0; 195 top: 0; 196 transition: opacity 300ms ease; 197 width: 1px; 198 z-index: 1; 199 } 200 201 .resize-handle:hover { 202 background-color: var(--sys-log-viewer-color-primary); 203 mix-blend-mode: unset; 204 outline: 1px solid var(--sys-log-viewer-color-primary); 205 } 206 207 .resize-handle::before { 208 bottom: 0; 209 content: ''; 210 display: block; 211 position: absolute; 212 right: -0.5rem; 213 top: 0; 214 width: 1rem; 215 } 216 217 .cell-icon { 218 display: block; 219 font-variation-settings: 220 'FILL' 1, 221 'wght' 400, 222 'GRAD' 200, 223 'opsz' 58; 224 font-size: var(--sys-log-viewer-table-cell-icon-size); 225 user-select: none; 226 display: grid; 227 place-content: center; 228 place-items: center; 229 } 230 231 .overflow-indicator { 232 mix-blend-mode: multiply; 233 pointer-events: none; 234 position: absolute; 235 width: 8rem; 236 } 237 238 .bottom-indicator { 239 align-self: flex-end; 240 background: linear-gradient( 241 to bottom, 242 transparent, 243 var(--sys-log-viewer-color-overflow-indicator) 244 ); 245 height: 8rem; 246 pointer-events: none; 247 position: absolute; 248 width: calc(100% - 1rem); 249 } 250 251 .left-indicator { 252 background: linear-gradient( 253 to left, 254 transparent, 255 var(--sys-log-viewer-color-overflow-indicator) 256 ); 257 height: calc(100% - 1rem); 258 justify-self: flex-start; 259 } 260 261 .right-indicator { 262 background: linear-gradient( 263 to right, 264 transparent, 265 var(--sys-log-viewer-color-overflow-indicator) 266 ); 267 height: calc(100% - 1rem); 268 justify-self: flex-end; 269 } 270 271 mark { 272 background-color: var(--sys-log-viewer-color-table-mark); 273 border-radius: 4px; 274 color: var(--sys-log-viewer-color-table-mark-text); 275 outline: 1px solid var(--sys-log-viewer-color-table-mark); 276 } 277 278 .jump-to-bottom-btn, 279 .bottom-indicator { 280 opacity: 0; 281 transition: 282 opacity 100ms ease, 283 transform 100ms ease, 284 visibility 100ms ease; 285 visibility: hidden; 286 } 287 288 .jump-to-bottom-btn[data-visible='true'], 289 .bottom-indicator[data-visible='true'] { 290 opacity: 1; 291 transform: translateY(0) scale(1); 292 transition: 293 opacity 250ms ease, 294 transform 250ms ease, 295 250ms ease; 296 visibility: visible; 297 } 298 299 ::-webkit-scrollbar { 300 box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-surface-container-low); 301 -webkit-appearance: auto; 302 } 303 304 ::-webkit-scrollbar-corner { 305 background: var(--md-sys-color-surface-container-low); 306 } 307 308 ::-webkit-scrollbar-thumb { 309 border-radius: 20px; 310 box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-outline-variant); 311 border: inset 3px transparent; 312 } 313 314 ::-webkit-scrollbar-thumb:horizontal { 315 border-top: inset 4px transparent; 316 } 317 318 ::-webkit-scrollbar-thumb:vertical { 319 border-left: inset 4px transparent; 320 height: calc(100% / 3); 321 } 322 323 ::-webkit-scrollbar-track:horizontal { 324 border-top: solid 1px var(--md-sys-color-outline-variant); 325 } 326 327 ::-webkit-scrollbar-track:vertical { 328 border-left: solid 1px var(--md-sys-color-outline-variant); 329 } 330`; 331