blob: b6a97902b9e4d817fbdcaee72d5b8e8629f340ed (
plain)
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
@font-face {
font-family: "Roboto Mono";
src: url("../fonts/roboto-mono-medium.ttf");
}
:root {
--font: "Roboto Mono";
--background: #0f0e17;
--foreground: #fffffe;
--pink: #e53170;
--red: #f25f4c;
--orange: #ff8906;
--branch: 1px solid #a7a9be;
}
html {
font-size: 18px;
overflow: hidden;
}
body {
background: var(--background);
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.prompt {
font-family: var(--font);
color: var(--foreground);
}
.prompt~.prompt {
padding: 1.5rem 0 0.3125rem;
}
span {
color: var(--pink);
}
h1 {
display: inline;
font-family: var(--font);
font-size: 1rem;
font-weight: normal;
color: var(--red);
cursor: pointer;
}
.tree > ul {
margin: 0;
padding-left: 1rem;
}
ul {
list-style: none;
padding-left: 2.5rem;
}
li {
position: relative;
}
li.hideChildren > ul {
display: none;
}
li::before, li::after {
content: "";
position: absolute;
left: -0.75rem;
}
li::before {
border-top: var(--branch);
top: 0.75rem;
width: 0.5rem;
}
li::after {
border-left: var(--branch);
height: 100%;
top: 0.25rem;
}
li:last-child::after {
height: 0.5rem;
}
a {
font-family: var(--font);
font-size: 1rem;
color: var(--foreground);
text-decoration: none;
outline: none;
}
a:hover,
a:focus {
color: var(--background);
background: var(--orange);
}
form h1 {
padding-left: 0.125rem;
}
/* you can fill the texarea above/below? the Viewport */
#search {
font-family: var(--font);
font-size: 1rem;
color: var(--foreground);
background-color: var(--background);
border: none;
outline: none;
position: absolute;
width: 50vw;
height: 50vh;
word-break: break-all;
resize:none;
}
|
