Hugging Face's logo

Spaces:
Ramesh-vani
/
matterbox
Running

App Files Community
Ramesh-vani commited on
Commit
cd77764
·
verified ·
1 Parent(s): 0bb5a54

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +196 -19
style.css CHANGED
@@ -1,28 +1,205 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono&display=swap');
2
+
3
+ * {
4
+ margin: 0;
5
+ padding: 0;
6
+ color: white;
7
+ font-family: 'Roboto', sans-serif;
8
+ font-size: 12px;
9
+ }
10
+
11
+ *.monospaced, .monospaced * {
12
+ font-family: 'Roboto Mono', sans-serif;
13
+ }
14
+
15
+ body, html {
16
+ height: 100%;
17
+ overflow: hidden;
18
+ background: #14151f;
19
+ }
20
+
21
+ canvas {
22
+ background-color: transparent !important;
23
+ }
24
+
25
+ .container {
26
+ margin: 4px;
27
+ padding: 4px;
28
+ background: rgba(80, 80, 80, 0.4);
29
+ border-radius: 4px;
30
+ z-index: 1000;
31
+ }
32
+
33
+ .overlay {
34
+ position: fixed;
35
+ }
36
+
37
+ .overlay.right { right: 0; }
38
+
39
+ .overlay.bottom { bottom: 0; }
40
+
41
+ .sidebar {
42
+ padding: 4px;
43
+ background: rgba(80, 80, 80, 0.4);
44
+ z-index: 1000;
45
+ }
46
+
47
+ .overlay.sidebar.top {
48
+ left: 0;
49
+ right: 0;
50
+ border-bottom: solid 1px rgba(160, 160, 160, 0.4);
51
+ }
52
+
53
+ .overlay.sidebar.right {
54
+ top: 0;
55
+ bottom: 0;
56
+ max-width: 400px;
57
+ border-left: solid 1px rgba(160, 160, 160, 0.4);
58
+ }
59
+
60
+ .overlay.sidebar.bottom {
61
+ left: 0;
62
+ right: 0;
63
+ border-top: solid 1px rgba(160, 160, 160, 0.4);
64
+ }
65
+
66
+ .overlay.sidebar.left {
67
+ top: 0;
68
+ bottom: 0;
69
+ max-width: 400px;
70
+ border-right: solid 1px rgba(160, 160, 160, 0.4);
71
+ }
72
+
73
+ .overlay.sidebar.right.scroll, .overlay.sidebar.left.scroll {
74
+ overflow-y: auto;
75
+ }
76
+
77
+ .tool {
78
+ position: relative;
79
+ padding: 8px;
80
+ width: 24px;
81
+ height: 24px;
82
+ line-height: 24px;
83
+ text-align: center;
84
+ background: rgba(160, 160, 160, 0.4);
85
+ border-radius: 4px;
86
+ }
87
+
88
+ .tool:not(:last-child) {
89
+ margin-bottom: 4px;
90
+ }
91
+
92
+ .tool:hover {
93
+ background: rgba(180, 180, 180, 0.4);
94
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
95
+ }
96
+
97
+ .tool:active {
98
+ background: rgba(200, 200, 200, 0.4);
99
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
100
+ }
101
+
102
+ .tool.active {
103
+ background: rgba(100, 140, 180, 0.6);
104
+ }
105
+
106
+ .tool.active:hover {
107
+ background: rgba(120, 160, 200, 0.6);
108
+ }
109
+
110
+ .tool.active:active {
111
+ background: rgba(140, 180, 220, 0.6);
112
+ }
113
+
114
+ .tool .fa-plus {
115
+ position: absolute;
116
+ right: -0.125em;
117
+ bottom: -0.125em;
118
+ color: rgba(140, 255, 180, 0.8);
119
+ }
120
+
121
+ .tool .fa-link {
122
+ position: absolute;
123
+ right: -0.125em;
124
+ bottom: -0.125em;
125
+ color: rgba(255, 120, 140, 0.8);
126
+ }
127
+
128
+ .sidebar table {
129
+ margin: -4px -4px -4px 4px;
130
+ }
131
+
132
+ table, tbody, thead, tr, th, td {
133
+ border: solid 1px rgba(160, 160, 160, 0.4);
134
+ border-collapse: collapse;
135
+ }
136
+
137
+ td {
138
+ padding: 2px 4px;
139
+ }
140
+
141
+ table .key {
142
+ text-align: right;
143
+ color: #888888;
144
+ }
145
+
146
+ /* Context Menu */
147
+ .context {
148
+ display: inline-block;
149
+ position: fixed;
150
+ top: 0px;
151
+ left: 0px;
152
+ min-width: 270px;
153
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
154
+ color: #fff;
155
+ background: #262933;
156
+ font-size: 9pt;
157
+ border: 1px solid #333333;
158
+ border-radius: 6px;
159
+ box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.5);
160
+ padding: 3px 0px;
161
+ -webkit-touch-callout: none;
162
+ -webkit-user-select: none;
163
+ -khtml-user-select: none;
164
+ -moz-user-select: none;
165
+ -ms-user-select: none;
166
+ user-select: none;
167
+ }
168
+
169
+ .context .item {
170
+ padding: 4px 19px;
171
+ cursor: default;
172
+ color: inherit;
173
+ }
174
+
175
+ .context .item:hover {
176
+ background: #2777FF;
177
+ }
178
+
179
+ .context .item:hover .hotkey {
180
+ color: #fff;
181
+ }
182
+
183
+ .context .disabled {
184
+ color: #878B90;
185
  }
186
 
187
+ .context .disabled:hover {
188
+ background: inherit;
 
189
  }
190
 
191
+ .context .disabled:hover .hotkey {
192
+ color: #878B90;
 
 
 
193
  }
194
 
195
+ .context .separator {
196
+ margin: 4px 0px;
197
+ height: 0;
198
+ padding: 0;
199
+ border-top: 1px solid #454545;
 
200
  }
201
 
202
+ .hotkey {
203
+ color: #878B90;
204
+ float: right;
205
  }