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: 0.875rem; 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--info { 75 --icon-color: var(--sys-log-viewer-color-info); 76 } 77 78 .log-row--warning { 79 --bg-color: var(--sys-log-viewer-color-surface-yellow); 80 --text-color: var(--sys-log-viewer-color-on-surface-yellow); 81 --icon-color: var(--sys-log-viewer-color-orange-bright); 82 } 83 84 .log-row--error, 85 .log-row--critical { 86 --bg-color: var(--sys-log-viewer-color-surface-error); 87 --text-color: var(--sys-log-viewer-color-on-surface-error); 88 --icon-color: var(--sys-log-viewer-color-error-bright); 89 } 90 91 .log-row--debug { 92 --bg-color: initial; 93 --text-color: var(--sys-log-viewer-color-debug); 94 --icon-color: var(--sys-log-viewer-color-debug); 95 } 96 97 .log-row--info .cell-icon, 98 .log-row--warning .cell-icon, 99 .log-row--error .cell-icon, 100 .log-row--critical .cell-icon { 101 color: var(--icon-color); 102 } 103 104 .log-row--warning, 105 .log-row--error, 106 .log-row--critical, 107 .log-row--debug { 108 background-color: var(--bg-color); 109 color: var(--text-color); 110 } 111 112 .log-row .cell-content { 113 display: inline-flex; 114 overflow: hidden; 115 text-overflow: ellipsis; 116 white-space: pre-wrap; 117 } 118 119 .log-row--nowrap .cell-content { 120 white-space: pre; 121 } 122 123 tbody tr::before { 124 background-color: transparent; 125 bottom: 0; 126 content: ''; 127 display: block; 128 left: 0; 129 position: absolute; 130 right: 0; 131 top: 0; 132 width: 100%; 133 z-index: -1; 134 } 135 136 tbody tr:hover::before { 137 background-color: rgba( 138 var(--sys-log-viewer-color-table-row-highlight), 139 0.05 140 ); 141 } 142 143 th, 144 td { 145 display: block; 146 grid-row: 1; 147 overflow: hidden; 148 padding: var(--sys-log-viewer-table-cell-padding); 149 text-align: left; 150 text-overflow: ellipsis; 151 } 152 153 th[hidden], 154 td[hidden] { 155 display: none; 156 } 157 158 th { 159 grid-row: 1; 160 white-space: nowrap; 161 } 162 163 th[title='level'] { 164 color: transparent; 165 } 166 167 td { 168 display: inline-flex; 169 position: relative; 170 vertical-align: top; 171 align-items: flex-start; 172 } 173 174 .level-cell { 175 align-items: flex-start; 176 justify-content: center; 177 padding-left: 0; 178 padding-right: 0; 179 } 180 181 .cell-text { 182 line-height: normal; 183 text-overflow: ellipsis; 184 overflow: hidden; 185 } 186 187 .jump-to-bottom-btn { 188 bottom: 2.25rem; 189 font-family: 'Roboto Flex', sans-serif; 190 position: absolute; 191 place-self: center; 192 transform: translateY(15%) scale(0.9); 193 } 194 195 .resize-handle { 196 background-color: var(--sys-log-viewer-color-table-cell-outline); 197 bottom: 0; 198 content: ''; 199 cursor: col-resize; 200 height: 100%; 201 mix-blend-mode: luminosity; 202 opacity: 1; 203 pointer-events: auto; 204 position: absolute; 205 right: 0; 206 top: 0; 207 transition: opacity 300ms ease; 208 width: 1px; 209 z-index: 1; 210 } 211 212 .resize-handle:hover { 213 background-color: var(--sys-log-viewer-color-primary); 214 mix-blend-mode: unset; 215 outline: 1px solid var(--sys-log-viewer-color-primary); 216 } 217 218 .resize-handle::before { 219 bottom: 0; 220 content: ''; 221 display: block; 222 position: absolute; 223 right: -0.5rem; 224 top: 0; 225 width: 1rem; 226 } 227 228 .cell-icon { 229 display: block; 230 font-variation-settings: 231 'FILL' 1, 232 'wght' 400, 233 'GRAD' 200, 234 'opsz' 58; 235 font-size: var(--sys-log-viewer-table-cell-icon-size); 236 user-select: none; 237 display: grid; 238 place-content: center; 239 place-items: center; 240 width: var(--sys-log-viewer-table-cell-icon-size); 241 } 242 243 .overflow-indicator { 244 mix-blend-mode: multiply; 245 pointer-events: none; 246 position: absolute; 247 width: 8rem; 248 } 249 250 .bottom-indicator { 251 align-self: flex-end; 252 background: linear-gradient( 253 to bottom, 254 transparent, 255 var(--sys-log-viewer-color-overflow-indicator) 256 ); 257 height: 8rem; 258 pointer-events: none; 259 position: absolute; 260 width: calc(100% - 1rem); 261 } 262 263 .left-indicator { 264 background: linear-gradient( 265 to left, 266 transparent, 267 var(--sys-log-viewer-color-overflow-indicator) 268 ); 269 height: calc(100% - 1rem); 270 justify-self: flex-start; 271 } 272 273 .right-indicator { 274 background: linear-gradient( 275 to right, 276 transparent, 277 var(--sys-log-viewer-color-overflow-indicator) 278 ); 279 height: calc(100% - 1rem); 280 justify-self: flex-end; 281 } 282 283 mark { 284 background-color: var(--sys-log-viewer-color-table-mark); 285 border-radius: 4px; 286 color: var(--sys-log-viewer-color-table-mark-text); 287 } 288 289 .jump-to-bottom-btn, 290 .bottom-indicator { 291 opacity: 0; 292 transition: 293 opacity 100ms ease, 294 transform 100ms ease, 295 visibility 100ms ease; 296 visibility: hidden; 297 } 298 299 .jump-to-bottom-btn[data-visible='true'], 300 .bottom-indicator[data-visible='true'] { 301 opacity: 1; 302 transform: translateY(0) scale(1); 303 transition: 304 opacity 250ms ease, 305 transform 250ms ease, 306 250ms ease; 307 visibility: visible; 308 } 309 310 ::-webkit-scrollbar { 311 box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-surface-container-low); 312 -webkit-appearance: auto; 313 } 314 315 ::-webkit-scrollbar-corner { 316 background: var(--md-sys-color-surface-container-low); 317 } 318 319 ::-webkit-scrollbar-thumb { 320 border-radius: 20px; 321 box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-outline-variant); 322 border: inset 3px transparent; 323 } 324 325 ::-webkit-scrollbar-thumb:horizontal { 326 border-top: inset 4px transparent; 327 } 328 329 ::-webkit-scrollbar-thumb:vertical { 330 border-left: inset 4px transparent; 331 height: calc(100% / 3); 332 } 333 334 ::-webkit-scrollbar-track:horizontal { 335 border-top: solid 1px var(--md-sys-color-outline-variant); 336 } 337 338 ::-webkit-scrollbar-track:vertical { 339 border-left: solid 1px var(--md-sys-color-outline-variant); 340 } 341`; 342