Change to SCSS so that rules are automatically backported to older browsers. In the future we can also take advantage of its other features.

package.json

@@ -9,6 +9,7 @@
   "packageManager": "yarn@4.2.2",
   "devDependencies": {
     "@parcel/packager-ts": "2.12.0",
+    "@parcel/transformer-sass": "2.12.0",
     "@parcel/transformer-typescript-types": "2.12.0",
     "typescript": ">=3.0.0"
   }

webapp/src/css/style.css

@@ -1,246 +0,0 @@
-body {
-    background-color: #3A6EA5;
-    font-size: 11px;
-}
-
-#logonView {
-    display: block;
-}
-
-#chatView {
-    display: none;
-}
-
-.window {
-    display: flex;
-    flex-direction: column;
-
-    position: fixed;
-    .title-bar {
-        user-select: none;
-    }
-}
-
-.window-body {
-    flex: 1;
-}
-
-#motdContainer {
-    font-family: "Arial", sans-serif;
-}
-
-#bottomLinks {
-    font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
-    background-color: silver;
-    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
-    padding: 0.95em;
-    margin: 0px;
-    left: 0;
-    right: 0;
-    transform: unset;
-    text-align: center;
-
-    li {
-        padding: 0.2em;
-        display: inline-block;
-        border-right: 1px solid black;
-        margin: 0;
-        padding-right: 0.2rem;
-        margin-right: 0.2rem;
-        a {
-            font-size: 14pt;
-            color: #fff;
-        }
-        a:visited {
-            font-size: 14pt;
-            color: #fff;
-        }
-    }
-
-    li:last-child {
-        border-right: none;
-        padding-right: 0;
-        margin-right: 0;
-    }
-
-    list-style: none;
-    display: block;
-    position: fixed;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-
-#logonWindowLogo {
-    background-color: #ffffff;
-    margin: 0;
-    border-bottom: 8px solid;
-    border-image: linear-gradient(to right, #013755, #9ec0da, #013755) 4;
-    padding-top: 1.3rem;
-    padding-bottom: 1.3rem;
-    img {
-        margin-left: auto;
-        margin-right: auto;
-        display: block;
-    }
-}
-
-#logonForm {
-    margin-top: 25px;
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-    div {
-        display: flex;
-        flex-direction: row;
-    }
-}
-
-#logonUsername, #logonRoom {
-    align-self: flex-end;
-    margin-left: auto;
-    width: 300px;
-    margin-right: 90px;
-    margin-bottom: 10px;
-}
-
-#logonButton {
-    align-self: flex-end;
-    margin-left: auto;
-    margin-right: 90px;
-}
-
-
-#roomSettingsBody {
-    display: flex;
-    flex-direction: column;
-}
-
-#roomSettingsTabContent {
-    flex: 1;
-    margin-bottom: 8px;
-}
-
-/* CSS nesting isn't even a year old as of writing this, we should consider using SASS or something for now */
-#roomSettingsWallpaperTab {
-    display: flex;
-    flex-direction: column;
-
-    .wallpaperMonitor {
-        text-align: center;
-        flex: 1;
-    }
-
-    #roomSettingsWallpaperSelect {
-        height: 114px;
-        display: flex;
-        flex-direction: row;
-
-        gap: 8px;
-
-        .mainCol {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-
-            .tree-view {
-                flex: 1;
-                overflow: auto;
-            }
-        }
-
-        #roomSettingsWallpaperURL {
-            margin-top: 8px;
-            width: 100%;
-        }
-    }
-}
-
-
-#chatBar {
-    margin: 0;
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    width: 100%;
-    background-color: silver;
-    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
-    height: 3vh;
-    padding: 4px;
-    padding-left: 0px;
-}
-
-#chatInput {
-    flex-grow: 1;
-    margin-right: 4px;
-    margin-left: 4px;
-    height: 100%;
-}
-
-#chatSendBtn {
-    font-weight: bold;
-    margin-right: 4px;
-}
-
-.wallpaperMonitor {
-    div {
-        display: inline-block;
-        position: relative;
-    }
-
-    .wallpaperMonitorFg {
-        position: absolute;
-        width: 152px;
-        height: 112px;
-        margin: 17px 16px;
-        background: linear-gradient(160deg, #9b4f96, #0038a8);
-    }
-}
-
-
-.fieldRowRight {
-    justify-content: flex-end;
-}
-
-.context-menu {
-    background-color: silver;
-    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
-    padding-left: 0.2em;
-    padding-right: 0.2em;
-    z-index: 1;
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-}
-
-.context-menu-item {
-    padding-left: 0.2rem;
-    font-size: 11px;
-    
-    padding-bottom: 0.2rem;
-    padding-top: 0.2rem;
-
-    font-family: "Pixelated MS Sans Serif", Arial;
-
-    cursor: pointer;
-
-    padding: 5px;
-    padding-right: 5em;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    list-style-type: none;
-}
-
-.context-menu-item:hover {
-    background-color: navy;
-    color: #fff;
-}
-
-.d-none {
-    display: none;
-}

webapp/src/css/style.scss

@@ -0,0 +1,251 @@
+body {
+	background-color: #3a6ea5;
+	font-size: 11px;
+}
+
+#logonView {
+	display: block;
+}
+
+#chatView {
+	display: none;
+}
+
+.window {
+	display: flex;
+	flex-direction: column;
+	position: fixed;
+
+	.title-bar {
+		user-select: none;
+	}
+}
+
+.window-body {
+	flex: 1;
+}
+
+#motdContainer {
+	font-family: 'Arial', sans-serif;
+}
+
+#bottomLinks {
+	font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
+	background-color: silver;
+	box-shadow:
+		inset -1px -1px #0a0a0a,
+		inset 1px 1px #dfdfdf,
+		inset -2px -2px grey,
+		inset 2px 2px #fff;
+	padding: 0.95em;
+	margin: 0px;
+	right: 0;
+	bottom: 0;
+	text-align: center;
+	list-style: none;
+	display: block;
+	position: fixed;
+	left: 50%;
+	transform: translateX(-50%);
+
+	li {
+		padding: 0.2em;
+		display: inline-block;
+		border-right: 1px solid black;
+		margin: 0;
+		padding-right: 0.2rem;
+		margin-right: 0.2rem;
+		a {
+			font-size: 14pt;
+			color: #fff;
+		}
+		a:visited {
+			font-size: 14pt;
+			color: #fff;
+		}
+	}
+
+	li:last-child {
+		border-right: none;
+		padding-right: 0;
+		margin-right: 0;
+	}
+}
+
+#logonWindowLogo {
+	background-color: #ffffff;
+	margin: 0;
+	border-bottom: 8px solid;
+	border-image: linear-gradient(to right, #013755, #9ec0da, #013755) 4;
+	padding-top: 1.3rem;
+	padding-bottom: 1.3rem;
+	img {
+		margin-left: auto;
+		margin-right: auto;
+		display: block;
+	}
+}
+
+#logonForm {
+	margin-top: 25px;
+	margin-left: 15px;
+	display: flex;
+	flex-direction: column;
+	div {
+		display: flex;
+		flex-direction: row;
+	}
+}
+
+#logonUsername,
+#logonRoom {
+	align-self: flex-end;
+	margin-left: auto;
+	width: 300px;
+	margin-right: 90px;
+	margin-bottom: 10px;
+}
+
+#logonButton {
+	align-self: flex-end;
+	margin-left: auto;
+	margin-right: 90px;
+}
+
+#roomSettingsBody {
+	display: flex;
+	flex-direction: column;
+}
+
+#roomSettingsTabContent {
+	flex: 1;
+	margin-bottom: 8px;
+}
+
+#roomSettingsWallpaperTab {
+	display: flex;
+	flex-direction: column;
+
+	.wallpaperMonitor {
+		text-align: center;
+		flex: 1;
+	}
+
+	#roomSettingsWallpaperSelect {
+		height: 114px;
+		display: flex;
+		flex-direction: row;
+
+		gap: 8px;
+
+		.mainCol {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+
+			.tree-view {
+				flex: 1;
+				overflow: auto;
+			}
+		}
+
+		#roomSettingsWallpaperURL {
+			margin-top: 8px;
+			width: 100%;
+		}
+	}
+}
+
+#chatBar {
+	margin: 0;
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	width: 100%;
+	background-color: silver;
+	box-shadow:
+		inset -1px -1px #0a0a0a,
+		inset 1px 1px #dfdfdf,
+		inset -2px -2px grey,
+		inset 2px 2px #fff;
+	height: 3vh;
+	padding: 4px;
+	padding-left: 0px;
+}
+
+#chatInput {
+	flex-grow: 1;
+	margin-right: 4px;
+	margin-left: 4px;
+	height: 100%;
+}
+
+#chatSendBtn {
+	font-weight: bold;
+	margin-right: 4px;
+}
+
+.wallpaperMonitor {
+	div {
+		display: inline-block;
+		position: relative;
+	}
+
+	.wallpaperMonitorFg {
+		position: absolute;
+		width: 152px;
+		height: 112px;
+		margin: 17px 16px;
+		background: linear-gradient(160deg, #9b4f96, #0038a8);
+	}
+}
+
+.fieldRowRight {
+	justify-content: flex-end;
+}
+
+.context-menu {
+	background-color: silver;
+	box-shadow:
+		inset -1px -1px #0a0a0a,
+		inset 1px 1px #dfdfdf,
+		inset -2px -2px grey,
+		inset 2px 2px #fff;
+	padding-left: 0.2em;
+	padding-right: 0.2em;
+	z-index: 1;
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+}
+
+.context-menu-item {
+	padding-left: 0.2rem;
+	font-size: 11px;
+
+	padding-bottom: 0.2rem;
+	padding-top: 0.2rem;
+
+	font-family: 'Pixelated MS Sans Serif', Arial;
+
+	cursor: pointer;
+
+	padding: 5px;
+	padding-right: 5em;
+	margin-top: 2px;
+	margin-bottom: 2px;
+	list-style-type: none;
+
+	&:hover {
+		background-color: navy;
+		color: #fff;
+	}
+}
+
+.d-none {
+	display: none;
+}

webapp/src/html/index.html

@@ -8,7 +8,7 @@
         <meta property="og:type" content="website" />
         <meta property="og:site_name" content="Computernewb's Internet Pub Hub" />
         <link rel="stylesheet" href="https://unpkg.com/98.css" />
-        <link type="text/css" rel="stylesheet" href="../css/style.css" />
+        <link type="text/css" rel="stylesheet" href="../css/style.scss" />
     </head>
     <body>
         <div id="logonView">

webapp/src/html/testbed.html

@@ -8,7 +8,7 @@
 		<meta property="og:type" content="website" />
 		<meta property="og:site_name" content="Computernewb's Internet Pub Hub" />
 		<link rel="stylesheet" href="https://unpkg.com/98.css" />
-		<link type="text/css" rel="stylesheet" href="../css/style.css" />
+		<link type="text/css" rel="stylesheet" href="../css/style.scss" />
 
 		<script type="module" src="../ts/testbed.ts"></script>
 	</head>

yarn.lock

@@ -1044,6 +1044,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/transformer-sass@npm:2.12.0":
+  version: 2.12.0
+  resolution: "@parcel/transformer-sass@npm:2.12.0"
+  dependencies:
+    "@parcel/plugin": "npm:2.12.0"
+    "@parcel/source-map": "npm:^2.1.1"
+    sass: "npm:^1.38.0"
+  checksum: 10c0/d82ee90605f9a8f04a978e2d72faf9693a843a0875961b6e7aa40659197356f1be45d738840c52863607c7823f70630f819aebd843606af8ea00772b75ba7574
+  languageName: node
+  linkType: hard
+
 "@parcel/transformer-svg@npm:2.12.0":
   version: 2.12.0
   resolution: "@parcel/transformer-svg@npm:2.12.0"
@@ -1600,6 +1611,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"anymatch@npm:~3.1.2":
+  version: 3.1.3
+  resolution: "anymatch@npm:3.1.3"
+  dependencies:
+    normalize-path: "npm:^3.0.0"
+    picomatch: "npm:^2.0.4"
+  checksum: 10c0/57b06ae984bc32a0d22592c87384cd88fe4511b1dd7581497831c56d41939c8a001b28e7b853e1450f2bf61992dfcaa8ae2d0d161a0a90c4fb631ef07098fbac
+  languageName: node
+  linkType: hard
+
 "argparse@npm:^2.0.1":
   version: 2.0.1
   resolution: "argparse@npm:2.0.1"
@@ -1647,6 +1668,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"binary-extensions@npm:^2.0.0":
+  version: 2.3.0
+  resolution: "binary-extensions@npm:2.3.0"
+  checksum: 10c0/75a59cafc10fb12a11d510e77110c6c7ae3f4ca22463d52487709ca7f18f69d886aa387557cc9864fbdb10153d0bdb4caacabf11541f55e89ed6e18d12ece2b5
+  languageName: node
+  linkType: hard
+
 "bl@npm:^4.0.3":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -1674,7 +1702,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.3":
+"braces@npm:^3.0.3, braces@npm:~3.0.2":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
   dependencies:
@@ -1772,6 +1800,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:>=3.0.0 <4.0.0":
+  version: 3.6.0
+  resolution: "chokidar@npm:3.6.0"
+  dependencies:
+    anymatch: "npm:~3.1.2"
+    braces: "npm:~3.0.2"
+    fsevents: "npm:~2.3.2"
+    glob-parent: "npm:~5.1.2"
+    is-binary-path: "npm:~2.1.0"
+    is-glob: "npm:~4.0.1"
+    normalize-path: "npm:~3.0.0"
+    readdirp: "npm:~3.6.0"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^1.1.1":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -2398,6 +2445,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@npm:~2.3.2":
+  version: 2.3.3
+  resolution: "fsevents@npm:2.3.3"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10c0/a1f0c44595123ed717febbc478aa952e47adfc28e2092be66b8ab1635147254ca6cfe1df792a8997f22716d4cbafc73309899ff7bfac2ac3ad8cf2e4ecc3ec60
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
+  version: 2.3.3
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
+  dependencies:
+    node-gyp: "npm:latest"
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "generate-function@npm:^2.3.1":
   version: 2.3.1
   resolution: "generate-function@npm:2.3.1"
@@ -2421,6 +2487,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob-parent@npm:~5.1.2":
+  version: 5.1.2
+  resolution: "glob-parent@npm:5.1.2"
+  dependencies:
+    is-glob: "npm:^4.0.1"
+  checksum: 10c0/cab87638e2112bee3f839ef5f6e0765057163d39c66be8ec1602f3823da4692297ad4e972de876ea17c44d652978638d2fd583c6713d0eb6591706825020c9ee
+  languageName: node
+  linkType: hard
+
 "glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.4":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
@@ -2579,6 +2654,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.3.6
+  resolution: "immutable@npm:4.3.6"
+  checksum: 10c0/7d0952a768b4fadcee47230ed86dc9505a4517095eceaf5a47e65288571c42400c6e4a2ae21eca4eda957cb7bc50720213135b62cf6a181639111f8acae128c3
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -2648,6 +2730,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-binary-path@npm:~2.1.0":
+  version: 2.1.0
+  resolution: "is-binary-path@npm:2.1.0"
+  dependencies:
+    binary-extensions: "npm:^2.0.0"
+  checksum: 10c0/a16eaee59ae2b315ba36fad5c5dcaf8e49c3e27318f8ab8fa3cdb8772bf559c8d1ba750a589c2ccb096113bb64497084361a25960899cb6172a6925ab6123d38
+  languageName: node
+  linkType: hard
+
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -2662,7 +2753,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.3":
+"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -3166,6 +3257,7 @@ __metadata:
   resolution: "msagent-chat@workspace:."
   dependencies:
     "@parcel/packager-ts": "npm:2.12.0"
+    "@parcel/transformer-sass": "npm:2.12.0"
     "@parcel/transformer-typescript-types": "npm:2.12.0"
     typescript: "npm:>=3.0.0"
   languageName: unknown
@@ -3360,6 +3452,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
+  version: 3.0.0
+  resolution: "normalize-path@npm:3.0.0"
+  checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046
+  languageName: node
+  linkType: hard
+
 "nth-check@npm:^2.0.1":
   version: 2.1.1
   resolution: "nth-check@npm:2.1.1"
@@ -3484,7 +3583,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@@ -3705,6 +3804,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:~3.6.0":
+  version: 3.6.0
+  resolution: "readdirp@npm:3.6.0"
+  dependencies:
+    picomatch: "npm:^2.2.1"
+  checksum: 10c0/6fa848cf63d1b82ab4e985f4cf72bd55b7dcfd8e0a376905804e48c3634b7e749170940ba77b32804d5fe93b3cc521aa95a8d7e7d725f830da6d93f3669ce66b
+  languageName: node
+  linkType: hard
+
 "real-require@npm:^0.2.0":
   version: 0.2.0
   resolution: "real-require@npm:0.2.0"
@@ -3801,6 +3909,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.38.0":
+  version: 1.77.8
+  resolution: "sass@npm:1.77.8"
+  dependencies:
+    chokidar: "npm:>=3.0.0 <4.0.0"
+    immutable: "npm:^4.0.0"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: 10c0/2bfd62794070352c804f949e69bd8bb5b4ec846deeb924251b2c3f7b503170fb1ae186f513f0166907749eb34e0277dee747edcb78c886fb471aac01be1e864c
+  languageName: node
+  linkType: hard
+
 "secure-json-parse@npm:^2.7.0":
   version: 2.7.0
   resolution: "secure-json-parse@npm:2.7.0"
@@ -3942,6 +4063,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:>=0.6.2 <2.0.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"