|
@@ -5,10 +5,14 @@
|
|
|
:class="[
|
|
|
{
|
|
|
hide: store.isScoreBoardCollapsed && !props.modal,
|
|
|
- 'mark-board-track-container-in-dialog': store.isScoreBoardCollapsed && !props.modal,
|
|
|
- show: !store.isScoreBoardCollapsed
|
|
|
+ 'mark-board-track-container-in-dialog':
|
|
|
+ store.isScoreBoardCollapsed && !props.modal,
|
|
|
+ show: !store.isScoreBoardCollapsed,
|
|
|
},
|
|
|
]"
|
|
|
+ :style="{
|
|
|
+ height: props.modal ? '100%' : 'auto',
|
|
|
+ }"
|
|
|
>
|
|
|
<div
|
|
|
class="tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5 top-container tw-mb-4"
|
|
@@ -473,9 +477,11 @@ const buttonHeightForSelective = $computed(() =>
|
|
|
min-width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.mark-board-track-container.show {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
+
|
|
|
.mark-board-track-container.hide {
|
|
|
margin-right: -100%;
|
|
|
}
|
|
@@ -483,10 +489,12 @@ const buttonHeightForSelective = $computed(() =>
|
|
|
.top-container {
|
|
|
background-color: var(--app-container-bg-color);
|
|
|
}
|
|
|
+
|
|
|
.total-score {
|
|
|
color: var(--app-main-text-color);
|
|
|
font-size: 32px;
|
|
|
}
|
|
|
+
|
|
|
.question {
|
|
|
min-width: 110px;
|
|
|
max-width: 110px;
|
|
@@ -494,10 +502,12 @@ const buttonHeightForSelective = $computed(() =>
|
|
|
padding: 10px;
|
|
|
background-color: var(--app-container-bg-color);
|
|
|
}
|
|
|
+
|
|
|
.current-question {
|
|
|
color: white;
|
|
|
background-color: var(--app-score-color);
|
|
|
}
|
|
|
+
|
|
|
.single-score {
|
|
|
position: relative;
|
|
|
width: 32px;
|
|
@@ -509,10 +519,12 @@ const buttonHeightForSelective = $computed(() =>
|
|
|
|
|
|
border-radius: 30px;
|
|
|
}
|
|
|
+
|
|
|
.current-score {
|
|
|
background-color: var(--app-score-color);
|
|
|
color: white;
|
|
|
}
|
|
|
+
|
|
|
.all-zero-unselective-button {
|
|
|
height: v-bind(buttonHeightForSelective);
|
|
|
border-radius: 10px;
|