xref: /aosp_15_r20/development/tools/winscope/src/styles.css (revision 90c8c64db3049935a07c6143d7fd006e26f8ecca) 
1/*
2 * Copyright (C) 2022 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
17html, body, app-root {
18    height: 100%;
19    width: 100%;
20}
21
22body {
23    margin: 0;
24}
25
26app-root {
27    display: flex;
28    flex-direction: column;
29}
30
31.mat-headline, .mat-title, .mat-subheading-2, .mat-body-1, .mat-body-2, .mat-small {
32    margin: 0;
33}
34
35.mat-body-2 {
36    font: 500 14px / 20px 'Roboto', sans-serif;
37}
38
39.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
40    user-select: auto !important;
41}
42
43.card-grid {
44    width: 100%;
45    height: 100%;
46    display: flex;
47    flex-direction: row;
48    overflow: auto;
49}
50
51rects-view .mat-slider-thumb {
52    transform: scale(0.5);
53}
54
55rects-view .displays-select .mat-form-field-infix {
56    border-top: 0;
57    padding-top: 4px;
58    padding-bottom: 4px;
59}
60
61rects-view .displays-select .mat-form-field-flex {
62    padding-left: 4px;
63}
64
65.mat-select-panel:has(>.select-filter) {
66    max-height: 75vh;
67    max-width: unset;
68}
69
70body.dark-mode button.mat-raised-button.mat-primary,
71body.dark-mode button.mat-flat-button.mat-primary {
72    color: #ffffff;
73}
74
75.context-menu, .context-menu-item-container {
76    background-color: var(--background-color);
77    border-radius: 4px;
78}
79
80.context-menu {
81    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
82}
83
84.context-menu-item-container {
85    padding: 8px 0px;
86}
87
88.context-menu-item {
89    cursor: pointer;
90    font: 14px 'Roboto', sans-serif;
91    min-width: 64px;
92    line-height: 36px;
93    display: flex;
94    align-items: center;
95    flex-direction: row;
96    padding: 0px 16px;
97    flex: 1;
98}
99
100.context-menu-item:hover {
101    background-color: var(--hover-element-color);
102}
103
104.mat-dialog-container {
105    border-radius: 20px !important;
106}
107
108.mat-tooltip {
109    word-break: break-word;
110}
111
112.outline-field .mat-form-field-wrapper {
113    padding-bottom: 0px;
114}
115
116.outline-field .mat-form-field-infix {
117    padding: 6px 0 10px 0;
118    border-top: 8px solid transparent;
119}
120
121.applied-field .mat-form-field-flex {
122    border-width: 2px;
123    border-style: solid;
124    border-color: transparent;
125}
126
127.applied-field.highlighted:not(.mat-focused) .mat-form-field-flex {
128    border-color: var(--primary);
129}
130
131.applied-field.highlighted .mat-form-field-flex {
132    background-color: var(--selected-element-color);
133}
134
135.applied-field.highlighted:not(.mat-focused) .mat-form-field-underline {
136    display: none;
137}
138
139.no-padding-field .mat-form-field-wrapper {
140    padding-bottom: 0px;
141}
142
143.no-padding-field .mat-form-field-infix, .no-border-top-field .mat-form-field-infix  {
144    border-top: 0px;
145}
146
147.center-field .mat-form-field-flex {
148    align-items: center;
149}
150
151log-view .headers .mat-form-field-infix {
152    width: 100%;
153}
154
155.warning-icon {
156    color: var(--warning-color);
157}
158.error-icon {
159    color: var(--error-color);
160}
161
162.save-field {
163    display: flex;
164    align-items: center;
165    font-size: 14px;
166    width: 100%;
167}
168
169.save-field mat-form-field {
170    width: 100%;
171}
172
173.save-field button {
174    height: fit-content;
175    min-width: fit-content;
176    margin-inline-start: 10px;
177}
178
179.search-tabs .mat-tab-label {
180    min-width: 80px;
181}
182
183.search-tabs mat-tab-body {
184    padding: 12px;
185}
186
187.user-notification {
188    color: var(--contrast-text-color);
189    background-color: var(--contrast-background-color);
190    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
191    border-radius: 4px;
192    box-sizing: border-box;
193    display: block;
194    margin: 24px;
195    padding: 14px 16px;
196    transform-origin: center;
197}
198
199.disabled-component {
200    pointer-events: none;
201    opacity: 0.5;
202    filter: grayscale(1);
203}
204