diff --git a/src/components/game.jsx b/src/components/game.jsx
index ca8fcd3..24ef8a1 100644
--- a/src/components/game.jsx
+++ b/src/components/game.jsx
@@ -555,6 +555,7 @@ class Game extends Component {
key={index}
style={{
textAlign: 'center',
+ padding: '5px',
borderTop: '3px solid #b1d4df',
}}>
{answer}
@@ -577,6 +578,7 @@ class Game extends Component {
key={index}
style={{
dataUpdate: `${this.state.keyboardUpdate}`,
+ padding: '5px',
textAlign: 'center',
borderTop: '3px solid #b1d4df',
backgroundColor: this.state.keyboardUpdate
@@ -618,15 +620,7 @@ class Game extends Component {
return null;
case types.closeMultiple:
return (
-
+
OK
);
diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss
index 58599ca..4d1176d 100644
--- a/src/components/loading/loading.scss
+++ b/src/components/loading/loading.scss
@@ -2,7 +2,7 @@ $color-background: #ecf7fd;
$color-text: #b1d6df;
$color-spinner-ring: #c3e8f1;
$screen-height: 100vh;
-$spinner-height: $screen-height*0.33;
+$spinner-height: $screen-height*0.23;
.loading-screen {
width: 100%;
@@ -23,7 +23,9 @@ $spinner-height: $screen-height*0.33;
align-items: center;
box-sizing: border-box;
width: $spinner-height;
+ min-width: 250px;
height: $spinner-height;
+ min-height: 250px;
margin: $spinner-height auto 0;
background: #c3e8f1;
diff --git a/src/components/stages/stages.scss b/src/components/stages/stages.scss
index 8687e1c..e2b6baa 100644
--- a/src/components/stages/stages.scss
+++ b/src/components/stages/stages.scss
@@ -14,8 +14,8 @@ $color-text: #b1d6df;
}
.stage-circle {
- width: 50vmin;
- height: 50vmin;
+ width: 30vmin;
+ height: 30vmin;
margin: 100px auto;
border: 5px solid $color-text;
diff --git a/src/style/app.scss b/src/style/app.scss
index 4cb1a61..37fc671 100644
--- a/src/style/app.scss
+++ b/src/style/app.scss
@@ -105,8 +105,9 @@ body {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
+ align-items: center;
width: 100%;
- padding: 4vh 0;
+ padding: 0;
text-align: right;
@@ -152,11 +153,11 @@ body {
align-items: center;
width: 95%;
height: 100%;
- margin-top: 5vh;
+ margin-top: 15px;
}
.question-title {
- margin-bottom: 1.5vh;
+ margin-bottom: 5px;
font-weight: bold;
font-size: calc(2.3vh + 2.3vw);
@@ -164,19 +165,31 @@ body {
}
.question-text {
+ display: flex;
+ align-items: center;
width: 100%;
+ height: 100%;
padding: 0 10px;
+ overflow: hidden;
+ font-size: 1rem;
color: #000000;
+ pre {
+ height: 100%;
+ margin: 0;
+ }
}
.answer-field-wrapper {
+ position: relative;
+
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 10vh;
+ max-height: 50px;
border-top: calc(0.3vh + 0.3vw) solid #b1d4df;
}
@@ -222,30 +235,44 @@ body {
.answer-field {
display: flex;
flex-flow: row nowrap;
- justify-content: center;
+ justify-content: flex-end;
align-items: center;
+ width: 100%;
height: 100%;
}
.answer-text {
+ padding-right: 10px;
+
color: #000000;
}
.answer-input {
width: calc(7vh + 7vw);
- height: calc(5vh + 5vw);
- height: 80%;
- margin: 0 3vw;
- overflow: hidden;//line-height: 120%; font-size: calc(2.5vh + 2.5vh); text-align: center;
+ max-width: 150px;
+ height: 100%;
+ overflow: hidden;
color: #000000;
border: calc(0.3vh + 0.3vw) solid #b1d4df;
- border-radius: 3vw;
+
+ input {
+ margin-top: -5px;
+ padding: 0 15px;
+
+ font-size: 20px;
+ }
}
.keyboard {
width: 100%;
+
+ font-size: 20px;
+ line-height: 22px;
+ color: #ffffff;
+
+ cursor: pointer;
}
.keyboard-row {
@@ -320,9 +347,11 @@ body {
margin: 0 0 1rem 0.5rem;
font-size: calc(2vh + 2vw);
+
&-description {
margin-bottom: 0.5rem;
}
+
&__topic-select {
width: 100%;
}
@@ -384,13 +413,14 @@ body {
.progress-line {
display: flex;
justify-content: center;
+ align-items: center;
height: 10vh;
+ max-height: 70px;
margin-left: 4vw;
}
.progress-line-item {
position: relative;
- top: 2vh;
width: calc(4vh + 4vw);
height: calc(4vh + 4vw);
@@ -718,10 +748,6 @@ body {
font-size: 1rem;
}
- .question-text {
- font-size: 1rem;
- }
-
.answer-time-count {
bottom: 0;
left: 0;
@@ -768,6 +794,32 @@ body {
width: 300px;
}
+ .ok-cell--multiple {
+ width: 40%;
+ max-width: 45px;
+ height: 90%;
+ max-height: 45px;
+ margin: 0 auto;
+
+ font-weight: 800;
+ line-height: 45px;
+ text-align: center;
+ color: #ffffff;
+
+ background-color: #41f315;
+ border-radius: 50%;
+ -webkit-transform: translateX(-100%);
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ -ms-border-radius: 50%;
+ -o-border-radius: 50%;
+ -moz-transform: translateX(-100%);
+ -o-transform: translateX(-100%);
+ }
+
.step-two-text {
margin: 5px auto;
padding: 5px;