-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.css
101 lines (90 loc) · 3.45 KB
/
theme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
html, body {
margin: 0;
padding: 0;
}
body {
/* This is a font-stack that tries to use the system-default sans-serifs first */
font-family: Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
tfjs-component-playground {
--mdc-button-horizontal-padding: 0.5rem;
--mdc-snackbar-action-color: #ccc;
--tfjs-component-playground-article-gallery-display: flex;
--tfjs-component-playground-article-gallery-item-flex: auto;
--tfjs-component-playground-article-gallery-item-margin: 0;
--tfjs-component-playground-button-margin: 0.5rem;
--tfjs-component-playground-h1-font-size: 2.25rem;
--tfjs-component-playground-h1-font-weight: 600;
--tfjs-component-playground-img-max-width: 100%;
--tfjs-component-playground-img-padding-top: 2rem;
--tfjs-component-playground-li-display: list-item;
--tfjs-component-playground-ul-list-style-type: disc;
--tfjs-component-playground-ul-margin: 0 0 0 1rem;
}
.theme-light body {
background-color: #fff;
color: #000;
}
.theme-dark body {
background-color: #111;
color: #aaa;
}
.theme-light tfjs-component-playground {
background-color: #fff;
--drawer-scrim-background: rgba(0, 0, 0, 0.8);
--mdc-text-field-fill-color: #eee;
--mdc-theme-primary: #eee;
--mdc-theme-secondary: #555;
--mdc-theme-text-primary-on-dark: #111;
--paper-dropdown-menu-color: #000;
--paper-dropdown-menu-focused-color: #000;
--paper-listbox-background-color: #fff;
--paper-listbox-color: #111;
--primary-background-color: #fff;
--primary-color: #000;
--primary-foreground-color: #111;
--primary-text-color: #111;
--secondary-text-color: #000;
--text-color: #111;
--tfjs-component-playground-branding-text-color: #eee;
--tfjs-component-playground-button-background-color: #555;
--tfjs-component-playground-drawer-header-background-color: #000;
--tfjs-component-playground-drawer-header-color: #eee;
--tfjs-component-playground-link-color: #111;
--tfjs-component-playground-link-hover-color: #222;
--tfjs-component-playground-link-hover-text-decoration: underline;
--tfjs-component-playground-link-text-decoration: underline;
--tfjs-component-playground-toolbar-background-color: #000;
}
.theme-dark tfjs-component-playground {
background-color: #111;
--drawer-scrim-background: rgba(0, 0, 0, 0.8);
--mdc-text-field-fill-color: #444;
--mdc-text-field-label-ink-color: #eee;
--mdc-theme-primary: #888;
--mdc-theme-secondary: #222;
--mdc-theme-text-primary-on-dark: #eee;
--mdc-button-disabled-ink-color: #111;
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focused-color: #fff;
--paper-listbox-background-color: #111;
--paper-listbox-color: #fff;
--primary-background-color: #111;
--primary-color: #fff;
--primary-foreground-color: #eee;
--primary-text-color: #eee;
--secondary-text-color: #fff;
--text-color: #eee;
--tfjs-component-playground-branding-text-color: #fff;
--tfjs-component-playground-button-background-color: rgba(0, 0, 0, 0.7);
--tfjs-component-playground-drawer-header-background-color: #000;
--tfjs-component-playground-drawer-header-color: #eee;
--tfjs-component-playground-link-color: #eee;
--tfjs-component-playground-link-hover-color: #fff;
--tfjs-component-playground-link-hover-text-decoration: underline;
--tfjs-component-playground-link-text-decoration: underline;
--tfjs-component-playground-toolbar-background-color: #000;
}