1/* 2 * Copyright (C) 2024 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16 17export const viewerCardStyle = ` 18 .rects-view:not(.collapsed), 19 .hierarchy-view:not(.collapsed), 20 .ime-additional-properties:not(.collapsed), 21 .properties-view:not(.collapsed), 22 .log-view:not(.collapsed), 23 .property-groups:not(.collapsed), 24 .global-search:not(.collapsed), 25 .search-results:not(.collapsed), 26 .how-to-search:not(.collapsed) { 27 display: flex; 28 flex-direction: column; 29 overflow: auto; 30 border-radius: 4px; 31 margin: 4px; 32 background-color: var(--background-color); 33 box-shadow: 0px 1px 3px var(--border-color), 0px 1px 2px var(--border-color); 34 } 35 36 .hierarchy-view:not(.collapsed), 37 .ime-additional-properties:not(.collapsed), 38 .properties-view:not(.collapsed), 39 .log-view:not(.collapsed), 40 .property-groups:not(.collapsed), 41 .global-search:not(.collapsed), 42 .search-results:not(.collapsed), 43 .how-to-search:not(.collapsed) { 44 padding-bottom: 12px; 45 } 46 47 .rects-view:not(.collapsed), 48 .hierarchy-view:not(.collapsed), 49 .ime-additional-properties:not(.collapsed), 50 .properties-view:not(.collapsed), 51 .global-search:not(.collapsed), 52 .how-to-search:not(.collapsed) { 53 flex: 1; 54 } 55 56 .property-groups:not(.collapsed):not(.empty) { 57 flex: 2; 58 } 59 60 .property-groups.empty:not(.collapsed) { 61 flex: 0.2; 62 } 63 64 .log-view:not(.collapsed), 65 .search-results:not(.collapsed) { 66 flex: 3; 67 } 68 69 .collapsed { 70 display: none; 71 } 72`; 73 74export const viewerCardInnerStyle = ` 75 .title-section { 76 display: flex; 77 flex-direction: row; 78 flex-wrap: wrap; 79 justify-content: space-between; 80 background-color: var(--card-title-background-color); 81 padding: 0px 12px 0px 12px; 82 } 83 84 .view-controls { 85 display: flex; 86 flex-direction: row; 87 align-items: baseline; 88 padding: 8px 12px; 89 overflow-x: auto; 90 overflow-y: hidden; 91 } 92 93 .placeholder-text { 94 padding: 8px 12px; 95 } 96 97 .padded-title { 98 padding-bottom: 8px; 99 } 100 101 .warning { 102 display: flex; 103 align-items: center; 104 padding: 2px 12px; 105 background-color: var(--warning-background-color); 106 } 107 .warning-message { 108 padding-inline-start: 2px; 109 white-space: nowrap; 110 overflow: hidden; 111 text-overflow: ellipsis; 112 display: flex; 113 align-items: center; 114 width: 100%; 115 } 116 .warning-icon, .inline-icon { 117 font-size: 18px; 118 width: 18px; 119 height: 18px; 120 padding-inline-end: 4px; 121 } 122 .inline-icon { 123 padding-inline-start: 4px; 124 } 125`; 126