site/app/twigs/twigs.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

body {
	font-family: var(--fontFace);
	color: var(--fgColor1);
	user-select: none;
	cursor: arrow;
}

#twigs_playhead {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 1px;
	background-color: var(--waveformPlayheadColor);
	border: 1px solid var(--waveformPlayheadColor);
	pointer-events: none;
	z-index: 23;
	display: none;
}

#twigs_main {
	position: absolute;
	top: 20px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

#twigs_options {
	position: absolute;
	bottom: 0px;
	left: 60px;
	right: 0px;
	height: 20%;
	background-color: var(--bgColor1);
}

#twigs_editor {
	position: absolute;
	top: 0px;
	bottom: 20%;
	left: 60px;
	right: 0px;
}

#twigs_editor_inner {
	position: absolute;
	top: 0px;
	bottom: 20px;
	left: 0px;
	right: 20px;
}

#twigs_selection {
	position: absolute;
	left: 0px;
	right: 0px;
	height: 0px;
	width: 0px;
	display: none;
	background-color: var(--waveformSelectColor);
	opacity: var(--waveformSelectOpacity);
	z-index: 15;
}

#twigs_editor_vscrollouter {
	position: absolute;
	top: 0px;
	bottom: 80px;
	width: 20px;
	right: 0px;
	background-color: var(--waveformTimeBarBgColor);
}

#twigs_editor_vscrollinner {
	position: absolute;
	left: 4px;
	right: 4px;
	top: 0px;
	bottom: 0px;
	background-color: var(--waveformTimeBarFgColor);
}

#twigs_editor_vzoom {
	position: absolute;
	right: 0px;
	bottom: 20px;
	height: 60px;
	width: 20px;
	background-color: var(--bgColor3);
}

#twigs_editor_hzoom {
	position: absolute;
	background-color: var(--bgColor3);
	right: 0px;
	bottom: 0px;
	width: 80px;
	height: 20px;
}

#twigs_editor_hscrollouter {
	position: absolute;
	height: 20px;
	bottom: 0px;
	left: 0px;
	right: 80px;
	background-color: var(--waveformTimeBarBgColor);
}

#twigs_editor_hscrollinner {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0px;
	right: 0px;
	background-color: var(--waveformTimeBarFgColor);
}

#twigs_sidebar {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 60px;
	background-color: var(--bgColor1);
}

#twigs_start {
	z-index: 300;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--bgColor2);
	cursor: pointer;
}

#twigs_startinner {
	z-index: 202;
	text-align: centre;
	margin: 0px;
	position: absolute;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 40%;
}

#twigs_startbig {
	font-size: 48pt;
}

#twigs_menubar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	right: 0px;
	height: 20px;
	z-index: 40;
}

#twigs_hidden_links {
	display: none;
}