xref: /aosp_15_r20/external/pigweed/pw_console/py/pw_console/html/style.css (revision 61c4878ac05f98d0ceed94b57d316916de578985) 
1/*
2 * Copyright 2023 The Pigweed Authors
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
5 * use this file except in compliance with the License. You may obtain a copy of
6 * the License at
7 *
8 *     https://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, WITHOUT
12 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 * License for the specific language governing permissions and limitations under
14 * the License.
15 */
16
17 @import url('https://fonts.googleapis.com/css2?family=Google+Sans&family=Roboto+Mono:wght@400;500&family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=block');
18
19:root {
20    background-color: var(--sys-log-viewer-color-bg);
21    color-scheme: light dark;
22    font-family: "Google Sans", Arial, sans-serif;
23    font-synthesis: none;
24    font-weight: 400;
25    line-height: 1.5;
26    text-rendering: optimizeLegibility;
27    -webkit-font-smoothing: antialiased;
28    -moz-osx-font-smoothing: grayscale;
29    -webkit-text-size-adjust: 100%;
30}
31
32
33:root {
34    /* Material component properties */
35    --md-icon-font: 'Material Symbols Rounded';
36    --md-icon-size: 1.25rem;
37    --md-filled-button-label-text-type: "Google Sans", Arial, sans-serif;
38    --md-outlined-button-label-text-type: "Google Sans", Arial, sans-serif;
39    --md-icon-button-unselected-icon-color: var(--md-sys-color-on-surface-variant);
40    --md-icon-button-unselected-hover-icon-color: var(--md-sys-color-on-primary-container);
41
42    /* Log View */
43    --sys-log-viewer-view-outline-width: 1px;
44    --sys-log-viewer-view-corner-radius: 0.5rem;
45}
46
47* {
48    box-sizing: border-box;
49}
50
51button {
52    font-family: "Google Sans";
53}
54
55main {
56    height: 100vh;
57    padding: 2rem;
58}
59
60a {
61    color: var(--md-sys-color-primary);
62    font-weight: 500;
63    text-decoration: inherit;
64}
65
66a:hover {
67    color: var(--md-sys-color-secondary);
68}
69
70body {
71    display: grid;
72    place-content: start;
73    margin: 0;
74}
75
76@media (prefers-color-scheme: dark) {
77    :root {
78        --md-sys-color-primary: #A8C7FA;
79        --md-sys-color-primary-60: #4C8DF6;
80        --md-sys-color-primary-container: #0842A0;
81        --md-sys-color-on-primary: #062E6F;
82        --md-sys-color-on-primary-container: #D3E3FD;
83        --md-sys-color-inverse-primary: #0B57D0;
84        --md-sys-color-secondary: #7FCFFF;
85        --md-sys-color-secondary-container: #004A77;
86        --md-sys-color-on-secondary: #003355;
87        --md-sys-color-on-secondary-container: #C2E7FF;
88        --md-sys-color-tertiary: #6DD58C;
89        --md-sys-color-tertiary-container: #0F5223;
90        --md-sys-color-on-tertiary: #0A3818;
91        --md-sys-color-on-tertiary-container: #C4EED0;
92        --md-sys-color-surface: #131314;
93        --md-sys-color-surface-dim: #131314;
94        --md-sys-color-surface-bright: #37393B;
95        --md-sys-color-surface-container-lowest: #0E0E0E;
96        --md-sys-color-surface-container-low: #1B1B1B;
97        --md-sys-color-surface-container: #1E1F20;
98        --md-sys-color-surface-container-high: #282A2C;
99        --md-sys-color-surface-container-highest: #333537;
100        --md-sys-color-on-surface: #E3E3E3;
101        --md-sys-color-on-surface-variant: #C4C7C5;
102        --md-sys-color-inverse-surface: #E3E3E3;
103        --md-sys-color-inverse-on-surface: #303030;
104        --md-sys-color-outline: #8E918F;
105        --md-sys-color-outline-variant: #444746;
106        --md-sys-color-shadow: #000000;
107        --md-sys-color-scrim: #000000;
108
109        --md-sys-inverse-surface-rgb: 230, 225, 229;
110
111        /* Log Viewer */
112        --sys-log-viewer-color-bg: var(--md-sys-color-surface);
113
114        /* Log View */
115        --sys-log-viewer-color-view-outline:  var(--md-sys-color-outline-variant);
116
117        /* Log View Controls */
118        --sys-log-viewer-color-controls-bg: var(--md-sys-color-surface-container-high);
119        --sys-log-viewer-color-controls-text: var(--md-sys-color-on-surface-variant);
120        --sys-log-viewer-color-controls-input-outline: transparent;
121        --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface);
122        --sys-log-viewer-color-controls-button-enabled: var(--md-sys-color-primary-container);
123
124        /* Log List */
125        --sys-log-viewer-color-table-header-bg: var(--md-sys-color-surface-container);
126        --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
127        --sys-log-viewer-color-table-bg: var(--md-sys-color-surface-container-lowest);
128        --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
129        --sys-log-viewer-color-table-cell-outline: var(--md-sys-color-outline-variant);
130        --sys-log-viewer-color-overflow-indicator: var(--sys-log-viewer-color-table-bg);
131        --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
132        --sys-log-viewer-color-table-mark-text: var(--md-sys-color-on-primary-container);
133        --sys-log-viewer-color-table-mark-outline: var(--md-sys-color-outline-variant);
134
135        /* Severity */
136        --sys-log-viewer-color-error-bright: #E46962;
137        --sys-log-viewer-color-surface-error: #601410;
138        --sys-log-viewer-color-on-surface-error: #F9DEDC;
139        --sys-log-viewer-color-orange-bright: #EE9836;
140        --sys-log-viewer-color-surface-yellow: #402D00;
141        --sys-log-viewer-color-on-surface-yellow: #FFDFA0;
142        --sys-log-viewer-color-debug: var(--md-sys-color-primary-60);
143    }
144}
145
146@media (prefers-color-scheme: light) {
147    :root {
148        --md-sys-color-primary: #0B57D0;
149        --md-sys-color-primary-70: #7CACF8;
150        --md-sys-color-primary-90: #D3E3FD;
151        --md-sys-color-primary-95: #ECF3FE;
152        --md-sys-color-primary-99: #FAFBFF;
153        --md-sys-color-primary-container: #D3E3FD;
154        --md-sys-color-on-primary: #FFFFFF;
155        --md-sys-color-on-primary-container: #041E49;
156        --md-sys-color-inverse-primary: #A8C7FA;
157        --md-sys-color-secondary: #00639B;
158        --md-sys-color-secondary-container: #C2E7FF;
159        --md-sys-color-on-secondary: #FFFFFF;
160        --md-sys-color-on-secondary-container: #001D35;
161        --md-sys-color-tertiary: #146C2E;
162        --md-sys-color-tertiary-container: #C4EED0;
163        --md-sys-color-on-tertiary: #FFFFFF;
164        --md-sys-color-on-tertiary-container: #072711;
165        --md-sys-color-surface: #FFFFFF;
166        --md-sys-color-surface-dim: #D3DBE5;
167        --md-sys-color-surface-bright: #FFFFFF;
168        --md-sys-color-surface-container-lowest: #FFFFFF;
169        --md-sys-color-surface-container-low: #F8FAFD;
170        --md-sys-color-surface-container: #F0F4F9;
171        --md-sys-color-surface-container-high: #E9EEF6;
172        --md-sys-color-surface-container-highest: #DDE3EA;
173        --md-sys-color-on-surface: #1F1F1F;
174        --md-sys-color-on-surface-variant: #444746;
175        --md-sys-color-inverse-surface: #303030;
176        --md-sys-color-inverse-on-surface: #F2F2F2;
177        --md-sys-color-outline: #747775;
178        --md-sys-color-outline-variant: #C4C7C5;
179        --md-sys-color-shadow: #000000;
180        --md-sys-color-scrim: #000000;
181
182        --md-sys-inverse-surface-rgb: 49, 48, 51;
183
184        /* Log Viewer */
185        --sys-log-viewer-color-bg: var(--md-sys-color-surface);
186
187        /* Log View */
188        --sys-log-viewer-color-view-outline:  var(--md-sys-color-outline);
189
190        /* Log View Controls */
191        --sys-log-viewer-color-controls-bg: var(--md-sys-color-primary-90);
192        --sys-log-viewer-color-controls-text: var(--md-sys-color-on-primary-container);
193        --sys-log-viewer-color-controls-input-outline: transparent;
194        --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface-container-lowest);
195        --sys-log-viewer-color-controls-button-enabled: var(--md-sys-color-primary-70);
196
197        /* Log List */
198        --sys-log-viewer-color-table-header-bg: var(--md-sys-color-primary-95);
199        --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
200        --sys-log-viewer-color-table-bg: var(--md-sys-color-surface-container-lowest);
201        --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
202        --sys-log-viewer-color-table-cell-outline: var(--md-sys-color-outline-variant);
203        --sys-log-viewer-color-overflow-indicator: var(--sys-log-viewer-color-table-bg);
204        --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
205        --sys-log-viewer-color-table-mark-text: var(--md-sys-color-on-primary-container);
206        --sys-log-viewer-color-table-mark-outline: var(--md-sys-color-outline-variant);
207
208        /* Severity */
209        --sys-log-viewer-color-error-bright: #DC362E;
210        --sys-log-viewer-color-surface-error: #FCEFEE;
211        --sys-log-viewer-color-on-surface-error: #8C1D18;
212        --sys-log-viewer-color-orange-bright: #F49F2A;
213        --sys-log-viewer-color-surface-yellow: #FEF9EB;
214        --sys-log-viewer-color-on-surface-yellow: #783616;
215        --sys-log-viewer-color-debug: var(--md-sys-color-primary);
216    }
217}
218