1// Copyright 2024 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 display: block; 24 gap: 2rem; 25 height: var(--sys-log-viewer-height); 26 width: 100%; 27 28 /* Material Web properties */ 29 --md-icon-font: 'Material Symbols Rounded'; 30 --md-icon-size: 1.25rem; 31 --md-filled-button-label-text-type: 'Roboto Flex', Arial, sans-serif; 32 --md-outlined-button-label-text-type: 'Roboto Flex', Arial, sans-serif; 33 --md-icon-button-unselected-icon-color: var( 34 --md-sys-color-on-surface-variant 35 ); 36 --md-icon-button-unselected-hover-icon-color: var( 37 --md-sys-color-on-primary-container 38 ); 39 --md-filled-button-container-color: var(--sys-log-viewer-color-primary); 40 41 /* Log View */ 42 --sys-log-viewer-height: 100%; 43 --sys-log-viewer-view-outline-width: 1px; 44 --sys-log-viewer-view-corner-radius: 0.5rem; 45 46 /* Log List */ 47 --sys-log-viewer-table-cell-padding: 0.375rem 0.75rem; 48 --sys-log-viewer-table-cell-icon-size: 1rem; 49 50 /* Log View Controls */ 51 --sys-log-viewer-header-height: 2.75rem; 52 --sys-log-viewer-header-title-font-size: 1rem; 53 } 54 55 sl-split-panel { 56 --divider-width: 8px; 57 --divider-hit-area: 24px; 58 --min: 10rem; 59 --max: calc(100% - 10rem); 60 height: 100%; 61 width: 100%; 62 contain: size style; 63 } 64 65 sl-split-panel::part(divider) { 66 border-radius: 8px; 67 transition: 150ms ease 20ms; 68 background-color: transparent; 69 border: 2px solid black; 70 border-color: var(--md-sys-color-surface); 71 } 72 73 sl-split-panel::part(divider):hover, 74 sl-split-panel::part(divider):focus { 75 background-color: #a8c7fa; 76 } 77 78 sl-split-panel div[slot='start'], 79 sl-split-panel div[slot='end'] { 80 overflow: hidden; 81 } 82`; 83