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

This commit is contained in:
Elijah R 2024-07-14 15:22:55 -04:00
parent bb8c40b440
commit cc2a9db92e
6 changed files with 385 additions and 251 deletions

View file

@ -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"
}

View file

@ -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;
}

251
webapp/src/css/style.scss Normal file
View file

@ -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;
}

View file

@ -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">

View file

@ -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>

134
yarn.lock
View file

@ -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"