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 :host { 19 align-items: center; 20 background-color: var(--sys-log-viewer-color-controls-bg); 21 border-bottom: 1px solid var(--md-sys-color-outline-variant); 22 box-sizing: border-box; 23 color: var(--sys-log-viewer-color-controls-text); 24 display: flex; 25 flex-shrink: 0; 26 gap: 1rem; 27 height: 3rem; 28 justify-content: space-between; 29 padding: 0 1rem; 30 --md-list-item-leading-icon-size: 1.5rem; 31 } 32 33 :host > * { 34 display: flex; 35 } 36 37 .host-name { 38 font-size: 1.125rem; 39 font-weight: 300; 40 margin: 0; 41 white-space: nowrap; 42 } 43 44 .field-menu { 45 background-color: var(--md-sys-color-surface-container); 46 border-radius: 4px; 47 margin: 0; 48 padding: 0.5rem 0.75rem; 49 position: absolute; 50 right: 0; 51 z-index: 2; 52 } 53 54 md-standard-icon-button[selected] { 55 background-color: var(--sys-log-viewer-color-controls-button-enabled); 56 border-radius: 100%; 57 } 58 59 .field-menu-item { 60 align-items: center; 61 display: flex; 62 height: 3rem; 63 width: max-content; 64 } 65 66 .field-toggle { 67 border-radius: 1.5rem; 68 position: relative; 69 } 70 71 .input-container { 72 justify-content: flex-end; 73 width: 100%; 74 } 75 76 input[type='text'] { 77 align-items: center; 78 background-color: var(--sys-log-viewer-color-controls-input-bg); 79 border: 1px solid var(--sys-log-viewer-color-controls-input-outline); 80 border-radius: 1.5rem; 81 cursor: text; 82 display: inline-flex; 83 font-size: 1rem; 84 height: 0.75rem; 85 line-height: 0.75; 86 max-width: 30rem; 87 overflow: hidden; 88 padding: 0.5rem 1rem; 89 width: 100%; 90 } 91 92 input::placeholder { 93 color: var(--md-sys-color-on-surface-variant); 94 } 95 96 input[type='checkbox'] { 97 accent-color: var(--md-sys-color-primary); 98 height: 1.125rem; 99 width: 1.125rem; 100 } 101 102 label { 103 padding-left: 0.75rem; 104 } 105 106 p { 107 flex: 1 0; 108 white-space: nowrap; 109 } 110`; 111