diff options
| author | Fawn <fangrui_tong@brown.edu> | 2019-10-24 10:44:13 -0400 |
|---|---|---|
| committer | Fawn <fangrui_tong@brown.edu> | 2019-10-24 10:44:13 -0400 |
| commit | 0f72e2acc66698247503246887a5f5bb572b2753 (patch) | |
| tree | 9e50a4259e26ef50c31894a7e9b1e6282a267412 /src/client/views/nodes/AudioBox.scss | |
| parent | 45074de50007e0693df8835643464da962e62620 (diff) | |
| parent | 31166219e473e105b8fd9d49627fd1df58822c55 (diff) | |
Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into textbox_fawn_fix
Diffstat (limited to 'src/client/views/nodes/AudioBox.scss')
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 128 |
1 files changed, 124 insertions, 4 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 972966204..ccbf0d75f 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,6 +1,126 @@ -.audiobox-cont{ - top:0; - max-height: 32px; - position: absolute; +.audiobox-container, .audiobox-container-interactive { width: 100%; + height: 100%; + position: inherit; + 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; + 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; + display: flex; + .audiobox-playhead { + position: relative; + margin-top: auto; + margin-bottom: auto; + width: 25px; + } + .audiobox-timeline { + position:relative; + height:100%; + width:100%; + .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 { + width:15px !important; + height:15px !important; + left: calc(100% - 15px) !important; + top: calc(100% - 15px) !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 { + width:8px !important; + height:8px !important; + left: calc(100% - 8px) !important; + top: calc(100% - 8px) !important; + } + } + .audiobox-linker:hover, .audiobox-linker-mini:hover { + transform:scale(1.5); + } + .audiobox-marker-container, .audiobox-marker-minicontainer { + position:absolute; + width:10px; + height:100%; + 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 |