diff options
Diffstat (limited to 'src/client/views/nodes/ComparisonBox.scss')
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.scss | 209 |
1 files changed, 156 insertions, 53 deletions
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index 08d9e6010..d2ba9796b 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -5,42 +5,142 @@ width: 100%; height: 100%; position: relative; + background: gray; z-index: 0; pointer-events: none; display: flex; + flex-direction: column; p { + // bcz: what is this styling for? if text in the comparison box is colored, then this causes it to render with a black outline color: rgb(0, 0, 0); -webkit-text-stroke-color: black; -webkit-text-stroke-width: 0.2px; } - .input-box { - position: relative; + position: absolute; + top: 50; padding: 10px; width: 100%; - height: 100%; + height: 70%; display: flex; } .submit-button { - position: relative; + position: absolute; padding-bottom: 10px; + padding-top: 5px; padding-left: 5px; padding-right: 5px; - width: 100%; - height: 15%; + border-radius: 2px; + height: 17%; + bottom: 0; + overflow: hidden; display: flex; + width: 100%; - button { - flex: 1; - position: relative; + &.schema-header-button { + color: gray; + margin: 3px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 15px; + } + } + + &.pronunciation { + width: 40%; + align-items: center; + justify-content: center; } + &.submit { + width: 40%; + } + &.record { + width: 20%; + float: left; + border-radius: 2px; + } + .submit-buttonrecord { + border-radius: 2px; + } + .submit-buttonpronunciation { + display: inline-flex; + align-items: center; + } + .submit-buttonschema-header-button { + position: absolute; + top: 5px; + left: 11px; + z-index: 10; + width: 5px; + height: 5px; + cursor: pointer; + } + .submit-buttonsubmit { + border-radius: 2px; + margin-bottom: 3px; + width: 100%; + display: inline-flex; + align-items: center; + } + } + + .dropbtn { + background-color: #3498db; + color: white; + padding: 16px; + font-size: 16px; + border: none; } + + .dropup { + position: absolute; + display: inline-block; + margin-top: 150px; + bottom: 0; + } + + .dropup-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + bottom: 40px; + z-index: 1000; + } + + .dropup-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + } + + .dropup-content a:hover { + background-color: #ccc; + } + + .dropup:hover .dropup-content { + display: block; + } + + .dropup:hover .dropbtn { + background-color: #2980b9; + } + textarea { flex: 1; padding: 10px; - position: relative; resize: none; + position: 'absolute'; + width: '91%'; + height: '80%'; + z-index: '-1'; + overscroll-behavior: contain; } .clip-div { @@ -117,10 +217,39 @@ opacity: 0.5; } } -} + .loading-spinner { + display: flex; + position: absolute; + justify-content: center; + align-items: center; + height: 90%; + width: 93%; + font-size: 20px; + font-weight: bold; + color: #0b0a0a; + } + + @keyframes spin { + to { + transform: rotate(360deg); + } + } +} .comparisonBox-interactive { - pointer-events: unset; + pointer-events: all; +} + +.comparisonBox-explain { + position: absolute; + top: 10px; + left: 10px; + z-index: 200; + background: #dfdfdf; + pointer-events: none; +} + +.comparisonBox-slide { cursor: ew-resize; .slide-bar { @@ -128,28 +257,8 @@ display: flex; } } - // .input-box { - // position: relative; - // padding: 10px; - // } - // input[type='text'] { - // flex: 1; - // position: relative; - // margin-right: 10px; - // width: 100px; - // } } -// .quiz-card { -// position: relative; - -// input[type='text'] { -// flex: 1; -// position: relative; -// margin-right: 10px; -// width: 100px; -// } -// } .QuizCard { width: 100%; height: 100%; @@ -166,8 +275,6 @@ align-items: center; justify-content: center; .QuizCardBox { - /* existing code */ - .DIYNodeBox-iframe { height: 100%; width: 100%; @@ -216,24 +323,20 @@ } } } - - .loading-circle { - position: relative; - width: 50px; - height: 50px; - border-radius: 50%; - border: 3px solid #ccc; - border-top-color: #333; - animation: spin 1s infinite linear; - } - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } + } +} +.comparisonBox-bottomMenu { + transform-origin: bottom right; + width: max-content; + justify-content: space-between; + height: max-content; + position: absolute; + bottom: 0; + right: 2; + flex-direction: row-reverse; + display: flex; + cursor: pointer; + .comparisonBox-button { + padding-right: 8px; } } |