From 483d2df62dc4f11baedc94de8e2b271976dafe0b Mon Sep 17 00:00:00 2001 From: Lucas Morgan Date: Fri, 7 Jul 2023 15:53:45 -0500 Subject: [PATCH] Styling --- .../GameBoard/GameboardPresentation.razor.css | 193 +++++++++--------- Shogi.UI/Pages/Home/Home.razor.css | 3 +- 2 files changed, 99 insertions(+), 97 deletions(-) diff --git a/Shogi.UI/Pages/Home/GameBoard/GameboardPresentation.razor.css b/Shogi.UI/Pages/Home/GameBoard/GameboardPresentation.razor.css index 4df9df3..f18523f 100644 --- a/Shogi.UI/Pages/Home/GameBoard/GameboardPresentation.razor.css +++ b/Shogi.UI/Pages/Home/GameBoard/GameboardPresentation.razor.css @@ -1,140 +1,143 @@ .game-board { - display: grid; - grid-template-areas: "board side-board icons"; - grid-template-columns: 1fr minmax(9rem, 15rem) 3rem; - place-content: center; - gap: 0.5rem; - background-color: #444; - position: relative; /* For absolute positioned children. */ + display: grid; + /*grid-template-areas: "board side-board icons"; + grid-template-columns: 1fr minmax(9rem, 15rem) 3rem;*/ + grid-template-areas: "board"; + grid-template-columns: 1fr; + place-content: center; + padding: 1rem; + gap: 0.5rem; + background-color: #444; + position: relative; /* For absolute positioned children. */ } .board { - grid-area: board; + grid-area: board; } .side-board { - grid-area: side-board; + grid-area: side-board; } .icons { - grid-area: icons; + grid-area: icons; } .board { - position: relative; - display: grid; - grid-template-areas: - "rank A9 B9 C9 D9 E9 F9 G9 H9 I9" - "rank A8 B8 C8 D8 E8 F8 G8 H8 I8" - "rank A7 B7 C7 D7 E7 F7 G7 H7 I7" - "rank A6 B6 C6 D6 E6 F6 G6 H6 I6" - "rank A5 B5 C5 D5 E5 F5 G5 H5 I5" - "rank A4 B4 C4 D4 E4 F4 G4 H4 I4" - "rank A3 B3 C3 D3 E3 F3 G3 H3 I3" - "rank A2 B2 C2 D2 E2 F2 G2 H2 I2" - "rank A1 B1 C1 D1 E1 F1 G1 H1 I1" - ". file file file file file file file file file"; - grid-template-columns: auto repeat(9, 1fr); - grid-template-rows: repeat(9, 1fr) auto; - gap: 3px; - aspect-ratio: 0.9167; - max-height: calc(100vh - 2rem); + position: relative; + display: grid; + grid-template-areas: + "rank A9 B9 C9 D9 E9 F9 G9 H9 I9" + "rank A8 B8 C8 D8 E8 F8 G8 H8 I8" + "rank A7 B7 C7 D7 E7 F7 G7 H7 I7" + "rank A6 B6 C6 D6 E6 F6 G6 H6 I6" + "rank A5 B5 C5 D5 E5 F5 G5 H5 I5" + "rank A4 B4 C4 D4 E4 F4 G4 H4 I4" + "rank A3 B3 C3 D3 E3 F3 G3 H3 I3" + "rank A2 B2 C2 D2 E2 F2 G2 H2 I2" + "rank A1 B1 C1 D1 E1 F1 G1 H1 I1" + ". file file file file file file file file file"; + grid-template-columns: auto repeat(9, 1fr); + grid-template-rows: repeat(9, 1fr) auto; + gap: 3px; + aspect-ratio: 0.9167; + max-height: calc(100vh - 2rem); } - .board[data-perspective="Player2"] { - grid-template-areas: - "file file file file file file file file file ." - "I1 H1 G1 F1 E1 D1 C1 B1 A1 rank" - "I2 H2 G2 F2 E2 D2 C2 B2 A2 rank" - "I3 H3 G3 F3 E3 D3 C3 B3 A3 rank" - "I4 H4 G4 F4 E4 D4 C4 B4 A4 rank" - "I5 H5 G5 F5 E5 D5 C5 B5 A5 rank" - "I6 H6 G6 F6 E6 D6 C6 B6 A6 rank" - "I7 H7 G7 F7 E7 D7 C7 B7 A7 rank" - "I8 H8 G8 F8 E8 D8 C8 B8 A8 rank" - "I9 H9 G9 F9 E9 D9 C9 B9 A9 rank"; - grid-template-columns: repeat(9, minmax(0, 1fr)) auto; - grid-template-rows: auto repeat(9, minmax(0, 1fr)); - } + .board[data-perspective="Player2"] { + grid-template-areas: + "file file file file file file file file file ." + "I1 H1 G1 F1 E1 D1 C1 B1 A1 rank" + "I2 H2 G2 F2 E2 D2 C2 B2 A2 rank" + "I3 H3 G3 F3 E3 D3 C3 B3 A3 rank" + "I4 H4 G4 F4 E4 D4 C4 B4 A4 rank" + "I5 H5 G5 F5 E5 D5 C5 B5 A5 rank" + "I6 H6 G6 F6 E6 D6 C6 B6 A6 rank" + "I7 H7 G7 F7 E7 D7 C7 B7 A7 rank" + "I8 H8 G8 F8 E8 D8 C8 B8 A8 rank" + "I9 H9 G9 F9 E9 D9 C9 B9 A9 rank"; + grid-template-columns: repeat(9, minmax(0, 1fr)) auto; + grid-template-rows: auto repeat(9, minmax(0, 1fr)); + } .tile { - display: grid; - place-content: center; - transition: filter linear 0.25s; - aspect-ratio: 0.9167; + display: grid; + place-content: center; + transition: filter linear 0.25s; + aspect-ratio: 0.9167; } .board .tile { - background-color: beige; + background-color: beige; } .tile[data-selected] { - filter: invert(0.8); + filter: invert(0.8); } .ruler { - color: beige; - display: flex; - flex-direction: row; - justify-content: space-around; + color: beige; + display: flex; + flex-direction: row; + justify-content: space-around; } - .ruler.vertical { - flex-direction: column; - } + .ruler.vertical { + flex-direction: column; + } .board[data-perspective="Player2"] .ruler { - flex-direction: row-reverse; + flex-direction: row-reverse; } - .board[data-perspective="Player2"] .ruler.vertical { - flex-direction: column-reverse; - } + .board[data-perspective="Player2"] .ruler.vertical { + flex-direction: column-reverse; + } .side-board { - display: flex; - flex-direction: column; - place-content: space-between; - padding: 1rem; - background-color: var(--contrast-color); + display: flex; + flex-direction: column; + place-content: space-between; + padding: 1rem; + background-color: var(--contrast-color); } - .side-board .player-area { - display: grid; - place-items: stretch; - } + .side-board .player-area { + display: grid; + place-items: stretch; + } - .side-board .hand { - display: grid; - border: 1px solid #ccc; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: 4rem; - place-items: center start; - padding: 0.5rem; - } + .side-board .hand { + display: grid; + border: 1px solid #ccc; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: 4rem; + place-items: center start; + padding: 0.5rem; + } - .side-board .hand .tile { - max-height: 100%; /* I have no idea why I need to set this here to prevent a height blowout. */ - background-color: var(--secondary-color); - } + .side-board .hand .tile { + max-height: 100%; /* I have no idea why I need to set this here to prevent a height blowout. */ + background-color: var(--secondary-color); + } .promote-prompt { - display: none; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border: 2px solid #444; - background-color: #eaeaea; - padding: 1rem; - box-shadow: 1px 1px 1px #444; - text-align: center; + display: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 2px solid #444; + background-color: #eaeaea; + padding: 1rem; + box-shadow: 1px 1px 1px #444; + text-align: center; } - .promote-prompt[data-visible="true"] { - display: block; - } + .promote-prompt[data-visible="true"] { + display: block; + } .spectating { - color: var(--contrast-color) + color: var(--contrast-color) } diff --git a/Shogi.UI/Pages/Home/Home.razor.css b/Shogi.UI/Pages/Home/Home.razor.css index 8a51458..c54a583 100644 --- a/Shogi.UI/Pages/Home/Home.razor.css +++ b/Shogi.UI/Pages/Home/Home.razor.css @@ -2,8 +2,7 @@ display: grid; grid-template-areas: "sidebar board"; - grid-template-columns: clamp(5rem, 20vw, 25rem) 1fr; - gap: 3px 1rem; + grid-template-columns: clamp(20rem, 20vw, 25rem) 1fr; position: relative; /* For absolute positioned children. */ background-color: var(--primary-color); }