more components without inline css

6 files changed, 112 insertions, 1 deletions

diff --git a/styles/game.css b/styles/game.css
index 2c1eb94..d482f9b 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -35,7 +35,10 @@
 	margin: 3px;
 }
 
-.gameBar .gameBarButton { margin: 0; }
+.gameBar .gameBarButton {
+	margin: 0;
+	margin-left: var(--spacing-small);
+}
 
 .gameBar .move {
 	width: 32px;
@@ -48,6 +51,19 @@
 .gameBar .move.move-a { background-color: var(--error); }
 .gameBar .move.move-b { background-color: var(--confirm); }
 
+.gameBar .timer span {
+	margin: 0 4px;
+	font-size: 20px;
+}
+
+.gameBar .score {
+	font-size: 20px;
+	z-index: 1;
+}
+
+.gameBar .score.winning { color: var(--disk-a-alt); }
+.gameBar .score.losing { color: var(--disk-b-alt); }
+
 .voerGame {
 	max-width: 100vh;
 	margin: 0 auto;
diff --git a/styles/global.css b/styles/global.css
index 541dd76..79aa026 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -39,6 +39,9 @@ html, body {
 	padding: 0;
 }
 
+/* section font size */
+h1 { font-size: 25px; }
+
 /* subsection font size */
 h2 { font-size: 20px; }
 
diff --git a/styles/notifications.css b/styles/notifications.css
new file mode 100644
index 0000000..ec47836
--- /dev/null
+++ b/styles/notifications.css
@@ -0,0 +1,51 @@
+.notificationsArea {
+	left: calc(48px + var(--spacing-medium));
+	top: 92px;
+	transform: translateY(-100%);
+	text-align: left;
+	width: 400px;
+	height: 450px;
+}
+
+.notificationsArea .tuitje {
+	left: var(--spacing-medium);
+	bottom: 86px;
+	transform: translate(-100%, 100%) rotate(90deg);
+	fill: var(--gray-700);
+}
+
+.notificationsArea .title {
+	margin-bottom: var(--spacing-large);
+}
+
+.notificationsArea .inner {
+	overflow-y: scroll;
+	white-space: normal;
+	height: calc(450px - 4 * var(--spacing-large));
+}
+
+.notificationsArea .acceptable {
+	margin: 0;
+	margin-bottom: var(--spacing-medium);
+}
+
+.notificationsArea .acceptable:last-child {
+	margin-bottom: 0;
+}
+
+.notificationsArea .buttons .button {
+	margin: 0;
+}
+
+.notificationsArea .buttons {
+	margin-top: var(--spacing-medium);
+}
+
+.notificationsArea .noMsgsWrapper h1 {
+	white-space: nowrap;
+	user-select: none;
+}
+
+.notificationsArea .acceptable .userInfo {
+	margin-left: var(--spacing-small);
+}
diff --git a/styles/recentGames.css b/styles/recentGames.css
new file mode 100644
index 0000000..c7150aa
--- /dev/null
+++ b/styles/recentGames.css
@@ -0,0 +1,21 @@
+table .leftAlignedColumn {
+	text-align: left;
+	padding-left: var(--spacing-medium);
+}
+
+table .rightAlignedColumn {
+	text-align: right;
+	padding-left: var(--spacing-medium);
+}
+
+table.recentGames {
+	margin-top: var(--spacing-medium);
+}
+
+table.recentGames a {
+	font-weight: 500;
+}
+
+div.recentGames .nogames {
+	margin: 32px 64px;
+}
diff --git a/styles/ui.css b/styles/ui.css
index 6dbc388..cb95b36 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -89,3 +89,22 @@ html.dark .dialogbox { background-color: var(--gray-700); }
 	box-sizing: border-box;
 }
 
+.checkbox {
+	cursor: pointer;
+}
+
+.CenteredPageOuter {
+	margin: 0 auto;
+}
+
+.CenteredPageInner {
+	margin: 0 var(--spacing-small);
+	line-height: 0;
+}
+
+.pageTitle {
+	margin-left: var(--spacing-small);
+	margin-top: 32px;
+	margin-bottom: 64px;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index 0ff6b10..cc358e6 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -49,6 +49,7 @@
 .center { text-align: center; }
 
 .floatr { float: right; }
+.floatl { float: left; }
 
 .w100m2m { width: calc(100% - var(--spacing-medium)); }