aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/AudioBox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/AudioBox.scss')
-rw-r--r--src/client/views/nodes/AudioBox.scss349
1 files changed, 102 insertions, 247 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index a2fdd38e5..391507796 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,283 +1,144 @@
@import "../global/globalCssVariables.scss";
-.audiobox-container,
-.audiobox-container-interactive {
+.audiobox-container {
width: 100%;
height: 100%;
position: inherit;
display: flex;
position: relative;
cursor: default;
+}
+
+.audiobox-recorder {
+ display: flex;
+ flex-direction: row;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
- .audiobox-buttons {
+ .audiobox-dictation {
+ width: 40px;
+ background: $medium-gray;
+ color: $dark-gray;
display: flex;
- width: 100%;
+ justify-content: center;
align-items: center;
- .audiobox-dictation {
- position: relative;
- width: 30px;
- height: 100%;
- align-items: center;
- display: inherit;
- background: $medium-gray;
- left: 0px;
- color: $dark-gray;
- &:hover {
- color: $black;
- cursor: pointer;
- }
+ &:hover {
+ color: $black;
}
}
- .audiobox-control,
- .audiobox-control-interactive {
- top: 0;
- max-height: 32px;
+ .audiobox-start-record {
+ color: $white;
+ background: $dark-gray;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: $body-text;
width: 100%;
- display: inline-block;
- pointer-events: none;
- }
+ height: 100%;
+ gap: 5px;
- .audiobox-control-interactive {
- pointer-events: all;
+ &:hover {
+ background: $black;
+ }
}
- .audiobox-record-interactive,
- .audiobox-record {
- pointer-events: all;
- cursor: pointer;
- width: 100%;
- height: 100%;
- position: relative;
+ .recording-controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
- gap: 10px;
- color: white;
- font-weight: bold;
- background-color: $dark-gray;
- }
-
- .audiobox-record {
- pointer-events: none;
- }
-
- .recording {
- margin-top: auto;
- margin-bottom: auto;
+ gap: 5px;
width: 100%;
height: 100%;
- position: relative;
- padding-right: 5px;
- display: flex;
- background-color: $medium-blue;
+ background: $dark-gray;
+ color: white;
- .time {
- position: relative;
- width: 100%;
+ .record-timecode {
font-size: $large-header;
- text-align: center;
}
- .recording-buttons {
- position: relative;
- margin-top: auto;
- margin-bottom: auto;
- color: $dark-gray;
- &:hover {
- color: $black;
- }
- }
-
- .time,
- .recording-buttons {
+ .record-button {
+ cursor: pointer;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background: $dark-gray;
display: flex;
align-items: center;
- padding: 5px;
- }
- }
- .audiobox-buttons {
- display: flex;
- width: 100%;
- align-items: center;
- height: 100%;
+ justify-content: center;
- .audiobox-dictation {
- position: relative;
- width: 30px;
- height: 100%;
- align-items: center;
- display: inherit;
- background: $medium-gray;
- left: 0px;
- color: $dark-gray;
+ svg {
+ width: 15px;
+ }
&:hover {
- color: $black;
- cursor: pointer;
+ background: $black;
}
}
}
+}
- .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-file {
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: space-between;
+ background: $dark-gray;
+ width: 100%;
+ height: 100%;
+ color: $white;
- .recording {
- margin-top: auto;
- margin-bottom: auto;
- width: 100%;
- height: 100%;
- position: relative;
- padding-right: 5px;
+ .audiobox-controls {
display: flex;
flex-direction: row;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
- gap: 7px;
- background-color: $medium-blue;
- padding: 10px;
-
- .time {
- position: relative;
- height: 100%;
- width: 100%;
- font-size: 16px;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- font-weight: bold;
- }
-
- .buttons {
- cursor: pointer;
- position: relative;
- margin-top: auto;
- margin-bottom: auto;
- width: 25px;
- width: 25px;
- padding: 5px;
- color: $dark-gray;
-
- &:hover {
- color: $black;
- }
- }
- }
-
- .audiobox-controls {
width: 100%;
- height: 100%;
- position: relative;
- display: flex;
- background: $dark-gray;
-
- .audiobox-dictation {
- position: absolute;
- width: 40px;
- height: 100%;
- align-items: center;
- display: inherit;
- background: $medium-gray;
- left: 0px;
- }
+ height: 30px;
- .audiobox-player {
- margin-top: auto;
- margin-bottom: auto;
- width: 100%;
- position: relative;
- padding-right: 5px;
+ .controls-left {
display: flex;
- flex-direction: column;
- justify-content: center;
+ flex-direction: row;
+ width: 100px;
- .audiobox-buttons {
- position: relative;
- margin-top: auto;
- margin-bottom: auto;
- width: 30px;
- height: 30px;
+ .audiobox-button {
+ margin: 2.5px;
+ cursor: pointer;
+ width: 25px;
+ height: 25px;
border-radius: 50%;
- background-color: $dark-gray;
- color: $white;
+ background: $dark-gray;
display: flex;
align-items: center;
justify-content: center;
- left: 5px;
-
- &:hover {
- background-color: $black;
- }
svg {
- width: 100%;
- position: absolute;
- border-width: "thin";
- border-color: "white";
+ width: 15px;
}
- }
-
- .audiobox-dictation {
- position: relative;
- margin-top: auto;
- margin-bottom: auto;
- width: 25px;
- align-items: center;
- display: inherit;
- background: $medium-gray;
- }
-
- .audiobox-timeline {
- position: absolute;
- top: 0;
- background: white;
- height: 100%;
- width: 100%;
- z-index: 1000;
- overflow: hidden;
- border-right: 5px solid black;
- }
-
- .audioBox-total-time,
- .audioBox-current-time {
- position: absolute;
- font-size: $small-text;
- top: 100%;
- color: $white;
- }
- .audioBox-current-time {
- left: 42px;
+ &:hover {
+ background: $black;
+ }
}
+ }
- .audioBox-total-time {
- right: 2px;
- }
+ .controls-right {
+ display: flex;
+ flex-direction: row;
- .toolbar-slider {
- position: absolute;
- top: 75px;
- left: 70px;
+ svg {
+ width: 10px;
}
input[type="range"] {
- width: calc(100% - 100px);
- height: 16px;
+ width: 70px;
-webkit-appearance: none;
background: none;
+ margin: 5px;
}
input[type="range"]:focus {
@@ -286,52 +147,46 @@
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
- height: 5px;
+ height: 6px;
cursor: pointer;
box-shadow: 0;
- background: #dfdfdf;
+ background: $light-gray;
border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
box-shadow: 0;
border: 0;
- height: 7px;
- width: 7px;
+ height: 10px;
+ width: 10px;
border-radius: 10px;
- background: #4476f7;
+ background: $medium-blue;
cursor: pointer;
-webkit-appearance: none;
- margin: -1px;
- }
-
- .audiobox-zoom {
- bottom: 0;
- left: 30px;
- width: 70px;
+ margin: -2px;
}
}
}
-}
-@media only screen and (max-device-width: 480px) {
- .audiobox-dictation {
- font-size: 5em;
- display: flex;
- width: 100;
- justify-content: center;
- flex-direction: column;
- align-items: center;
- }
+ .audiobox-playback {
+ width: 100%;
+ height: calc(100% - 50px);
- .audiobox-container .audiobox-record,
- .audiobox-container-interactive .audiobox-record {
- font-size: 3em;
+ .audiobox-timeline {
+ height: 100%;
+ width: 100%;
+ background: $white;
+ }
}
- .audiobox-container .audiobox-controls .audiobox-player .audiobox-buttons,
- .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
- .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-buttons {
- width: 70px;
+ .audiobox-timecodes {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ height: 20px;
+ padding: 3px;
+ font-size: $small-text;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-02 01:06:23 +0000