diff options
| author | ab <abdullah_ahmed@brown.edu> | 2019-11-16 12:28:12 -0500 |
|---|---|---|
| committer | ab <abdullah_ahmed@brown.edu> | 2019-11-16 12:28:12 -0500 |
| commit | f7e101dfc7bc9e81ca03730865740360a831285a (patch) | |
| tree | 8fd94d15bf573890882d746cbca065bfd5993cb9 /src/client/views/nodes/AudioBox.scss | |
| parent | d26e058019d878d3058cb3806855281076b8d411 (diff) | |
| parent | 22d1e65236bae11c508d5c34ebcbddd1a552bfd8 (diff) | |
merged
Diffstat (limited to 'src/client/views/nodes/AudioBox.scss')
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 124 |
1 files changed, 121 insertions, 3 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 04d98e10d..3b19a6dba 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,16 +1,134 @@ -.audiobox-container { +.audiobox-container, .audiobox-container-interactive { width: 100%; height: 100%; position: inherit; - display:inline-block; + display:flex; + pointer-events: all; + cursor:default; + .audiobox-handle { + width:20px; + height:100%; + display:inline-block; + background: gray; + } .audiobox-control, .audiobox-control-interactive { top:0; max-height: 32px; - position: absolute; width: 100%; + display:inline-block; pointer-events: none; } .audiobox-control-interactive { pointer-events: all; } + .audiobox-record { + pointer-events: all; + width:100%; + height:100%; + position: absolute; + pointer-events: none; + } + .audiobox-record-interactive { + pointer-events: all; + } + .audiobox-controls { + width:100%; + height:100%; + position: relative; + display: flex; + padding-left: 2px; + border: gray solid 3px; + .audiobox-player { + margin-top:auto; + margin-bottom:auto; + width:100%; + height: 80%; + position: relative; + padding-right: 5px; + display: flex; + .audiobox-playhead { + position: relative; + margin-top: auto; + margin-bottom: auto; + width: 25px; + padding: 2px; + } + .audiobox-timeline { + position:relative; + height:100%; + width:100%; + background: white; + border: gray solid 1px; + border-radius: 3px; + .audiobox-current { + width: 1px; + height:100%; + background-color: red; + position: absolute; + } + .audiobox-linker, .audiobox-linker-mini { + position:absolute; + width:15px; + min-height:10px; + height:15px; + margin-left:-2.55px; + background:gray; + border-radius: 100%; + background-color: transparent; + box-shadow: black 2px 2px 1px; + .docuLinkBox-cont { + position: relative !important; + height: 100% !important; + width: 100% !important; + left:unset !important; + top:unset !important; + } + } + .audiobox-linker-mini { + width:8px; + min-height:8px; + height:8px; + box-shadow: black 1px 1px 1px; + margin-left: -1; + margin-top: -2; + .docuLinkBox-cont { + position: relative !important; + height: 100% !important; + width: 100% !important; + left:unset !important; + top:unset !important; + } + } + .audiobox-linker:hover, .audiobox-linker-mini:hover { + transform:scale(1.5); + } + .audiobox-marker-container, .audiobox-marker-minicontainer { + position:absolute; + width:10px; + height:90%; + top:2.5%; + background:gray; + border-radius: 5px; + box-shadow: black 2px 2px 1px; + .audiobox-marker { + position:relative; + height: calc(100% - 15px); + margin-top: 15px; + } + .audio-marker:hover { + border: orange 2px solid; + } + } + .audiobox-marker-minicontainer { + width:5px; + border-radius: 1px; + .audiobox-marker { + position:relative; + height: calc(100% - 8px); + margin-top: 8px; + } + } + } + } + } }
\ No newline at end of file |