diff --git a/webui/src/pages/Game/styles.sass b/webui/src/pages/Game/styles.sass index e69de29..bb9bed8 100644 --- a/webui/src/pages/Game/styles.sass +++ b/webui/src/pages/Game/styles.sass @@ -0,0 +1,151 @@ +@import "@/common/styles/colors" + +.active-wrapper + display: flex + flex-direction: column + justify-content: center + margin-top: 2.5rem + +.game-title + display: flex + justify-content: center + margin-bottom: 5rem + +.game-content + display: flex + align-items: center + gap: 15rem + margin-left: 5vw + margin-right: 5vw + +.game-tab + flex: 1 + +.task-area + display: flex + flex-direction: column + align-items: center + padding: 2rem 1rem + gap: 1rem + + img + width: 18rem + border-radius: 0.8rem + + h2 + color: $white + margin: 0 + font-size: 24pt + +.guess-btn + padding: 0.5rem 0.3rem + color: $white + font-size: 20pt + font-weight: 600 + transition: 0.2s + display: flex + justify-content: center + align-items: center + gap: 1rem + cursor: pointer + + &:hover + transform: scale(1.02) translateY(-0.1rem) rotate(-0.1deg) + +.guess-area + display: flex + flex-direction: column + gap: 1.5rem + + .current-task + display: flex + align-items: center + padding: 1rem + gap: 0.8rem + color: $white + + svg + font-size: 26pt + + h2 + font-size: 22pt + margin: 0 + + .input-wrapper + display: flex + gap: 0.5rem + align-items: center + + .guess-input + padding: 1rem + display: flex + flex-direction: column + gap: 0.5rem + + h2 + margin: 0 + color: $white + + input + margin: 0.3rem 0 + padding: 0.6rem 0.5rem + border-radius: 0.5rem + font-size: 16pt + font-weight: 600 + color: $white + + ::placeholder + color: $white + opacity: 0.5 + + .solution-area + display: flex + align-items: center + justify-content: center + gap: 1rem + padding: 2rem + color: $green + + svg + font-size: 26pt + h2 + font-size: 24pt + margin: 0 + +.game-scoreboard + padding: 1rem + + .scoreboard-header h2 + margin: 0 + color: $white + + .scoreboard-content + margin-top: 1rem + display: flex + flex-direction: column + gap: 1.5rem + + .scoreboard-row + display: flex + justify-content: space-between + align-items: center + gap: 2rem + + .scoreboard-left + display: flex + align-items: center + gap: 0.4rem + + svg + font-size: 22pt + color: $white + + h2 + margin: 0 + color: $white + + .scoreboard-right + + h2 + margin: 0 + color: $white \ No newline at end of file