Hires Page 2
diff --git a/js/components/debugger/css/Applesoft.module.css b/js/components/debugger/css/Applesoft.module.css
deleted file mode 100644
index 78c44b3..0000000
--- a/js/components/debugger/css/Applesoft.module.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.listing {
- width: calc(100% - 12px);
- height: 320px;
- overflow: auto;
- white-space: pre-wrap;
-}
-
-.variables {
- width: 100%;
- height: 320px;
- overflow: auto;
-}
-
-.variables table {
- width: 100%;
-}
-
-.variables td {
- background-color: #fff;
- border: 1px inset;
- white-space: pre;
- font-family: monospace;
-}
-
-.internals {
- width: 100%;
-}
-
-.internals table {
- width: 100%;
-}
-
-.internals td {
- background-color: #fff;
- border: 1px inset;
- white-space: pre;
- font-family: monospace;
- width: 30%;
-}
-
-.internals th {
- width: 20%;
- text-align: right;
-}
-
-.stack {
- width: 10em;
-}
diff --git a/js/components/debugger/css/Applesoft.module.scss b/js/components/debugger/css/Applesoft.module.scss
new file mode 100644
index 0000000..20e3978
--- /dev/null
+++ b/js/components/debugger/css/Applesoft.module.scss
@@ -0,0 +1,49 @@
+.listing {
+ width: calc(100% - 12px);
+ height: 320px;
+ overflow: auto;
+ white-space: pre-wrap;
+}
+
+.variables {
+ width: 100%;
+ height: 320px;
+ overflow: auto;
+
+ table {
+ width: 100%;
+ }
+
+ td {
+ background-color: #fff;
+ border: 1px inset;
+ white-space: pre;
+ font-family: monospace;
+ }
+}
+
+.internals {
+ width: 100%;
+
+ table {
+ width: 100%;
+ }
+
+
+ td {
+ background-color: #fff;
+ border: 1px inset;
+ white-space: pre;
+ font-family: monospace;
+ width: 30%;
+ }
+
+ th {
+ width: 20%;
+ text-align: right;
+ }
+}
+
+.stack {
+ width: 10em;
+}
diff --git a/js/components/debugger/css/CPU.module.css b/js/components/debugger/css/CPU.module.scss
similarity index 73%
rename from js/components/debugger/css/CPU.module.css
rename to js/components/debugger/css/CPU.module.scss
index b953324..5b21f95 100644
--- a/js/components/debugger/css/CPU.module.css
+++ b/js/components/debugger/css/CPU.module.scss
@@ -23,13 +23,13 @@
color: #f00;
}
-div.invalid {
+.errorIcon {
position: relative;
display: inline-block;
-}
-div.invalid i {
- position: absolute;
- top: -9px;
- left: -16px;
+ i {
+ position: absolute;
+ top: -9px;
+ left: -16px;
+ }
}
diff --git a/js/components/debugger/css/Debugger.module.css b/js/components/debugger/css/Debugger.module.scss
similarity index 100%
rename from js/components/debugger/css/Debugger.module.css
rename to js/components/debugger/css/Debugger.module.scss
diff --git a/js/components/debugger/css/Disks.module.css b/js/components/debugger/css/Disks.module.scss
similarity index 100%
rename from js/components/debugger/css/Disks.module.css
rename to js/components/debugger/css/Disks.module.scss
diff --git a/js/components/debugger/css/FileViewer.module.css b/js/components/debugger/css/FileViewer.module.scss
similarity index 100%
rename from js/components/debugger/css/FileViewer.module.css
rename to js/components/debugger/css/FileViewer.module.scss
diff --git a/js/components/debugger/css/Memory.module.css b/js/components/debugger/css/Memory.module.scss
similarity index 97%
rename from js/components/debugger/css/Memory.module.css
rename to js/components/debugger/css/Memory.module.scss
index 7995ee6..ab0f42b 100644
--- a/js/components/debugger/css/Memory.module.css
+++ b/js/components/debugger/css/Memory.module.scss
@@ -130,19 +130,19 @@
position: relative;
}
-div.read {
+.read {
background-color: #8f8;
}
-div.write {
+.write {
background-color: #f88;
}
-div.read.write {
+.read.write {
background-color: #88f;
}
-div.inactive {
+.inactive {
background-color: #bbb;
}
diff --git a/js/components/debugger/css/VideoModes.module.css b/js/components/debugger/css/VideoModes.module.scss
similarity index 100%
rename from js/components/debugger/css/VideoModes.module.css
rename to js/components/debugger/css/VideoModes.module.scss
diff --git a/package-lock.json b/package-lock.json
index baabd72..0a5a278 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,8 @@
"node-forge": "^1.3.0",
"raw-loader": "^4.0.0",
"rimraf": "^3.0.2",
+ "sass": "^1.57.1",
+ "sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"stylelint": "^14.9.1",
"stylelint-config-css-modules": "^4.1.0",
@@ -4960,9 +4962,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001342",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz",
- "integrity": "sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA==",
+ "version": "1.0.30001442",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz",
+ "integrity": "sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==",
"dev": true,
"funding": [
{
@@ -7730,6 +7732,12 @@
"node": ">= 4"
}
},
+ "node_modules/immutable": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
+ "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==",
+ "dev": true
+ },
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -11631,6 +11639,15 @@
"node": ">=6"
}
},
+ "node_modules/klona": {
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
+ "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
+ "dev": true,
+ "engines": {
+ "node": ">= 8"
+ }
+ },
"node_modules/known-css-properties": {
"version": "0.25.0",
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.25.0.tgz",
@@ -13482,6 +13499,61 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
+ "node_modules/sass": {
+ "version": "1.57.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+ "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+ "dev": true,
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
+ "node_modules/sass-loader": {
+ "version": "13.2.0",
+ "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.2.0.tgz",
+ "integrity": "sha512-JWEp48djQA4nbZxmgC02/Wh0eroSUutulROUusYJO9P9zltRbNN80JCBHqRGzjd4cmZCa/r88xgfkjGD0TXsHg==",
+ "dev": true,
+ "dependencies": {
+ "klona": "^2.0.4",
+ "neo-async": "^2.6.2"
+ },
+ "engines": {
+ "node": ">= 14.15.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ },
+ "peerDependencies": {
+ "fibers": ">= 3.1.0",
+ "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+ "sass": "^1.3.0",
+ "sass-embedded": "*",
+ "webpack": "^5.0.0"
+ },
+ "peerDependenciesMeta": {
+ "fibers": {
+ "optional": true
+ },
+ "node-sass": {
+ "optional": true
+ },
+ "sass": {
+ "optional": true
+ },
+ "sass-embedded": {
+ "optional": true
+ }
+ }
+ },
"node_modules/saxes": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -19663,9 +19735,9 @@
}
},
"caniuse-lite": {
- "version": "1.0.30001342",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz",
- "integrity": "sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA==",
+ "version": "1.0.30001442",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz",
+ "integrity": "sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==",
"dev": true
},
"canvas": {
@@ -21753,6 +21825,12 @@
"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
"dev": true
},
+ "immutable": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
+ "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==",
+ "dev": true
+ },
"import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -24709,6 +24787,12 @@
"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
"dev": true
},
+ "klona": {
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
+ "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
+ "dev": true
+ },
"known-css-properties": {
"version": "0.25.0",
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.25.0.tgz",
@@ -26079,6 +26163,27 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
+ "sass": {
+ "version": "1.57.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+ "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+ "dev": true,
+ "requires": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ }
+ },
+ "sass-loader": {
+ "version": "13.2.0",
+ "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.2.0.tgz",
+ "integrity": "sha512-JWEp48djQA4nbZxmgC02/Wh0eroSUutulROUusYJO9P9zltRbNN80JCBHqRGzjd4cmZCa/r88xgfkjGD0TXsHg==",
+ "dev": true,
+ "requires": {
+ "klona": "^2.0.4",
+ "neo-async": "^2.6.2"
+ }
+ },
"saxes": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
diff --git a/package.json b/package.json
index 2185c1a..ef3fc8e 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,8 @@
"node-forge": "^1.3.0",
"raw-loader": "^4.0.0",
"rimraf": "^3.0.2",
+ "sass": "^1.57.1",
+ "sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"stylelint": "^14.9.1",
"stylelint-config-css-modules": "^4.1.0",
diff --git a/types/styles.d.ts b/types/styles.d.ts
index 8b00847..ee7d006 100644
--- a/types/styles.d.ts
+++ b/types/styles.d.ts
@@ -2,3 +2,8 @@ declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
+
+declare module '*.module.scss' {
+ const classes: { [key: string]: string };
+ export default classes;
+}
diff --git a/webpack.config.js b/webpack.config.js
index 7cf6efa..35c4c2f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -38,6 +38,24 @@ const baseConfig = {
'css-loader'
],
exclude: /\.module\.css$/
+ },
+ {
+ test: /\.module\.s(a|c)ss$/,
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ import: false,
+ modules: {
+ localIdentName: '[path][name]__[local]',
+ }
+ }
+ },
+ {
+ loader: 'sass-loader',
+ }
+ ],
}
],
},