diff options
| author | Richard <q@1bpm.net> | 2025-04-13 18:48:02 +0100 |
|---|---|---|
| committer | Richard <q@1bpm.net> | 2025-04-13 18:48:02 +0100 |
| commit | 9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22 (patch) | |
| tree | 291bd79ce340e67affa755a8a6b4f6a83cce93ea /site/app/twine/twine.css | |
| download | apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.tar.gz apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.tar.bz2 apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.zip | |
initial
Diffstat (limited to 'site/app/twine/twine.css')
| -rw-r--r-- | site/app/twine/twine.css | 438 |
1 files changed, 438 insertions, 0 deletions
diff --git a/site/app/twine/twine.css b/site/app/twine/twine.css new file mode 100644 index 0000000..da01ad7 --- /dev/null +++ b/site/app/twine/twine.css @@ -0,0 +1,438 @@ +#twist {
+ display: none;
+}
+
+#twigs {
+ display: none;
+}
+
+#twine_start {
+ z-index: 300;
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ background-color: var(--bgColor2);
+ cursor: pointer;
+}
+
+#twine_startinner {
+ z-index: 202;
+ text-align: centre;
+ margin: 0px;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ width: 60%;
+ height: 40%;
+}
+
+#twine_mixer {
+ overflow-x: auto;
+ overflow-y: hidden;
+ scrollbar-color: var(--scrollbarColor);
+}
+
+#twine_startbig {
+ font-size: 48pt;
+}
+
+td {
+ font-size: var(--fontSizeSmall);
+}
+
+body {
+ font-family: var(--fontFace);
+ color: var(--fgColor1);
+ font-size: var(--fontSizeDefault);
+ user-select: none;
+ cursor: arrow;
+ font-size: 11pt;
+}
+
+#twine_menubar {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ right: 0px;
+ height: 20px;
+ z-index: 6;
+}
+
+.slider {
+ background: var(--bgColor3);
+ accent-color: var(--fgColor2);
+}
+
+#twine_timeline_playposition {
+ position: absolute;
+ width: 1px;
+ opacity: 0.8;
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
+ background-color: var(--waveformPlayheadColor);
+ z-index: 50;
+ display: none;
+}
+
+.twine_timelinetext {
+ font-size: var(--fontSizeSmall);
+ opacity: 0.9;
+ position: absolute;
+ color: var(--fgColor3);
+ top: 2px;
+ z-index: 4;
+}
+
+#twine_timeline_channeloverlay {
+ position: absolute;
+ left: 10%;
+ right: 0px;
+ top: 0px;
+ height: 100%;
+ user-select: none;
+ pointer-events: none;
+}
+
+.twine_vline {
+ position: absolute;
+ width: 1px;
+ opacity: 0.8;
+ background-color: #bdbdbd;
+ height: 100%;
+ z-index: 4;
+}
+
+
+
+#twine_timeline {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ bottom: 30%;
+ right: 0px;
+ background-color: #dadada;
+}
+
+#twine_main {
+ position: absolute;
+ top: 50px;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+}
+
+#twine_header {
+ position: absolute;
+ top: 20px;
+ height: 30px;
+ left: 0px;
+ width: 100%;
+ background-color: var(--bgColor1);
+ overflow: none;
+}
+
+.knoblabel {
+ font-size: 8pt;
+ text-align: center;
+}
+
+#twine_timelineoverlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 10%;
+ top: 0px;
+ z-index: 50;
+ display: none;
+}
+
+#twine_details {
+ position: absolute;
+ left: 0px;
+ bottom: 0px;
+ width: 100%;
+ height: 30%;
+ background-color: var(--bgColor1);
+}
+
+.twine_clipdetailsleft {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 30%;
+ height: 100%;
+ font-size: var(--fontSizeSmall);
+ background-color: var(--bgColor2);
+}
+
+.twine_clipdetailsright {
+ position: absolute;
+ left: 30%;
+ top: 0px;
+ width: 70%;
+ height: 100%;
+ background-color: var(--bgColor3);
+}
+
+#twine_headertable {
+ height: 30px;
+}
+
+#twine_clipdetails {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ display: none;
+}
+
+#twine_channeldetails {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ display: none;
+ overflow-x: auto;
+ scrollbar-color: var(--scrollbarColor);
+}
+
+.twine_channeldetails_insert {
+ position: absolute;
+ font-size: var(--fontSizeSmall);
+ width: 500px;
+ border-left: 1px solid var(--fgColor3);
+ height: 100%;
+ top: 0px;
+ bottom: 0px;
+ overflow-y: auto;
+ background-color: var(--bgColor1);
+ scrollbar-color: var(--scrollbarColor);
+}
+
+.twine_channeldetails_inserts {
+ position: absolute;
+ left: 200px;
+ right: 0px;
+ height: 100%;
+ top: 0px;
+ overflow-y: scroll;
+ background-color: var(--bgColor2);
+ scrollbar-color: var(--scrollbarColor);
+}
+
+.twine_channeldetails_insertnew {
+ position: absolute;
+ width: 200px;
+ height: 100%;
+ top: 0px;
+ bottom: 0px;
+ overflow-y: auto;
+ background-color: var(--bgColor3);
+ scrollbar-color: var(--scrollbarColor);
+}
+
+.drag_selection {
+ position: absolute;
+ background-color: #323232;
+ opacity: 0.5;
+ user-select: none;
+ z-index: 101;
+}
+
+#twine_timeline_timebar {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ height: 20px;
+ right: 0px;
+ background-color: var(--bgColor2);
+ z-index: 4;
+}
+
+#twine_timeline_timebar_inner {
+ position: absolute;
+ left: 10%;
+ top: 0px;
+ height: 20px;
+ right: 0px;
+ cursor: text;
+ z-index: 4;
+}
+
+.twine_timeline_timebar_locatorhead {
+ position: absolute;
+ /*width: 14px;
+ border-radius: 0px 0px 4px 4px;
+ background-color: var(--waveformLocationColor);
+ height: 100%;
+ */
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 14px solid var(--waveformLocationColor);
+ top: 0px;
+ opacity: 0.6;
+ cursor: ew-resize;
+ z-index: 5;
+}
+
+.twine_timeline_timebar_locatorline {
+ position: absolute;
+ width: 1px;
+ background-color: var(--waveformLocationColor);
+ height: 100%;
+ top: 0px;
+ width: 2px;
+ opacity: 0.6;
+ pointer-events: none;
+}
+
+.twine_timeline_timebar_regionstart {
+ position: absolute;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 14px solid var(--waveformMarkerColor);
+ top: 0px;
+ opacity: 0.6;
+ cursor: ew-resize;
+ z-index: 5;
+}
+
+.twine_timeline_timebar_regionend {
+ position: absolute;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-right: 14px solid var(--waveformMarkerColor);
+ top: 0px;
+ opacity: 0.6;
+ cursor: ew-resize;
+ z-index: 5;
+}
+
+
+#twine_timeline_inner {
+ position: absolute;
+ left: 0px;
+ top: 20px;
+ bottom: 20px;
+ width: 100%;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ scrollbar-color: var(--scrollbarColor);
+}
+
+#twine_timeline_scroll_filler {
+ position: absolute;
+ background-color: var(--bgColor1);
+ left: 0px;
+ bottom: 0px;
+ width: 10%;
+ height: 20px;
+}
+
+#twine_timeline_scroll_outer {
+ position: absolute;
+ background-color: var(--bgColor2);
+ left: 10%;
+ bottom: 0px;
+ width: 90%;
+ height: 20px;
+ z-index: 7;
+}
+
+#twine_timeline_scroll_inner {
+ position: absolute;
+ background-color: var(--fgColor1);
+ left: 0px;
+ top: 4px;
+ bottom: 4px;
+ right: 0px;
+}
+
+.twine_channel {
+ position: relative;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ height: 40px;
+ font-size: var(--fontSizeSmall);
+ border-bottom: 1px solid black;
+}
+
+.twine_channelclips {
+ position: absolute;
+ left: 10%;
+ width: 90%;
+ background-color: var(--bgColor3);
+ height: 100%;
+ top: 0px;
+ overflow: hidden;
+ user-select: none;
+}
+
+.twine_spline {
+ position: absolute;
+ width: 100%;
+ left: 0px;
+ height: 100%;
+ top: 0px;
+}
+
+.twine_automationselectors {
+ padding: 10px;
+}
+
+.twine_automationselect {
+ padding: 0px;
+ font-size: var(--fontSizeSmall);
+}
+
+.twine_channelcontrol {
+ position: absolute;
+ background-color: var(--bgColor2);
+ left: 0px;
+ width: 10%;
+ height: 100%;
+ top: 0px;
+}
+
+.twine_clip {
+ user-select: none;
+ position: absolute;
+ left: 100px;
+ width: 400px;
+ z-index: 30;
+ overflow: hidden;
+}
+
+.twine_clip_edge_left {
+ position: absolute;
+ cursor: e-resize;
+ height: 100%;
+ top: 0px;
+ width: 5px;
+ left: 0px;
+}
+
+.twine_clip_edge_right {
+ position: absolute;
+ cursor: e-resize;
+ height: 100%;
+ top: 0px;
+ width: 5px;
+ right: 0px;
+}
+
+.twine_clip_centre {
+ position: absolute;
+ cursor: move;
+ height: 100%;
+ top: 0px;
+ left: 5px;
+ right: 5px;
+}
|