Apple-2-Tools
/
apple2js
mirror of https://github.com/whscullin/apple2js.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add stylelint (#139)

This commit is contained in:
Will Scullin 2022-06-25 17:40:47 -07:00 committed by GitHub
parent fe955fba41
commit c5faad2f9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 1659 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.stylelintignore Normal file
View File

@ -0,0 +1,2 @@
css/apple2.css
coverage

10
.stylelintrc.json Normal file
View File

@ -0,0 +1,10 @@
{
"extends": [
"stylelint-config-standard",
"stylelint-config-css-modules"
],
"rules": {
"indentation": 4,
"selector-class-pattern": "^[a-z][a-zA-Z0-9_-]+$"
}
}

20
js/components/css/App.module.css
View File

@ -9,13 +9,17 @@ body {
background: black; background: black;
} }
a[role="button"] {
text-decoration: none;
}
button, button,
a[role="button"], a[role="button"],
input[type="file"]::file-selector-button { input[type="file"]::file-selector-button {
background: #44372C; background: #44372c;
color: #fff; color: #fff;
padding: 2px 8px; padding: 2px 8px;
border: 1px outset #66594E; border: 1px outset #66594e;
border-radius: 3px; border-radius: 3px;
font-size: 15px; font-size: 15px;
min-width: 75px; min-width: 75px;
@ -24,15 +28,15 @@ input[type="file"]::file-selector-button {
button:hover, button:hover,
a[role="button"]:hover, a[role="button"]:hover,
input[type="file"]::file-selector-button { input[type="file"]::file-selector-button {
background-color: #55473D; background-color: #55473d;
border: 1px outset #66594E; border: 1px outset #66594e;
} }
button:active, button:active,
a[role="button"]:active, a[role="button"]:active,
input[type="file"]::file-selector-button { input[type="file"]::file-selector-button {
background-color: #22150A; background-color: #22150a;
border: 1px outset #44372C; border: 1px outset #44372c;
} }
button:focus, button:focus,
@ -41,10 +45,6 @@ input[type="file"]::file-selector-button {
outline: none; outline: none;
} }
a[role="button"] {
text-decoration: none;
}
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

1
js/components/css/Apple2.module.css
View File

@ -2,6 +2,7 @@
display: flex; display: flex;
margin: auto; margin: auto;
} }
.outer { .outer {
width: 620px; width: 620px;
display: none; display: none;

9
js/components/css/BlockDisk.module.css
View File

@ -6,7 +6,7 @@
.diskLight { .diskLight {
margin: 5px; margin: 5px;
background-image: url(../../../css/green-off-16.png); background-image: url("../../../css/green-off-16.png");
background-size: 16px 16px; background-size: 16px 16px;
flex-shrink: 0; flex-shrink: 0;
width: 16px; width: 16px;
@ -14,7 +14,7 @@
} }
.diskLight.on { .diskLight.on {
background-image: url(../../../css/green-on-16.png); background-image: url("../../../css/green-on-16.png");
} }
.diskLabel { .diskLabel {
@ -30,9 +30,10 @@
@media only screen and (min-resolution: 1.25dppx) { @media only screen and (min-resolution: 1.25dppx) {
.diskLight { .diskLight {
background-image: url(../../../css/green-off-32.png); background-image: url("../../../css/green-off-32.png");
} }
.diskLight.on { .diskLight.on {
background-image: url(../../../css/green-on-32.png); background-image: url("../../../css/green-on-32.png");
} }
} }

2
js/components/css/CPUMeter.module.css
View File

@ -2,7 +2,7 @@
margin-right: 4px; margin-right: 4px;
overflow: hidden; overflow: hidden;
padding: 4px; padding: 4px;
font-family: Courier; font-family: Courier, monospace;
font-size: 12px; font-size: 12px;
width: 60px; width: 60px;
height: 15px; height: 15px;

27
js/components/css/ControlStrip.module.css
View File

@ -1,13 +1,14 @@
.reset { .reset {
background: #44372C; background: #44372c;
border-left: 3px solid #65594D; border-left: 3px solid #65594d;
border-top: 3px solid #65594D; border-top: 3px solid #65594d;
border-right: 3px solid #110E0D; border-right: 3px solid #110e0d;
border-bottom: 3px solid #110E0D; border-bottom: 3px solid #110e0d;
/* border: 5px outset #66594E; */ /* border: 5px outset #66594E; */
border-radius: 3px; border-radius: 3px;
color: white; color: white;
font: 9px Helvetica; font: 9px Helvetica, sans-serif;
height: 36px; height: 36px;
padding: 0; padding: 0;
margin-left: 10px; margin-left: 10px;
@ -18,16 +19,16 @@
} }
.reset:hover { .reset:hover {
background: #44372C; background: #44372c;
border: 3px outset #66594E; border: 3px outset #66594e;
} }
.reset:active { .reset:active {
background-color: #22150A; background-color: #22150a;
border-left: 3px solid #44372C; border-left: 3px solid #44372c;
border-top: 3px solid #44372C; border-top: 3px solid #44372c;
border-right: 3px solid #000000; border-right: 3px solid #000;
border-bottom: 3px solid #000000; border-bottom: 3px solid #000;
} }
:global(.full-page) .reset { :global(.full-page) .reset {

9
js/components/css/DiskII.module.css
View File

@ -6,7 +6,7 @@
.diskLight { .diskLight {
margin: 5px; margin: 5px;
background-image: url(../../../css/red-off-16.png); background-image: url("../../../css/red-off-16.png");
background-size: 16px 16px; background-size: 16px 16px;
flex-shrink: 0; flex-shrink: 0;
width: 16px; width: 16px;
@ -14,7 +14,7 @@
} }
.diskLight.on { .diskLight.on {
background-image: url(../../../css/red-on-16.png); background-image: url("../../../css/red-on-16.png");
} }
.diskLabel { .diskLabel {
@ -30,9 +30,10 @@
@media only screen and (min-resolution: 1.25dppx) { @media only screen and (min-resolution: 1.25dppx) {
.diskLight { .diskLight {
background-image: url(../../../css/red-off-32.png); background-image: url("../../../css/red-off-32.png");
} }
.diskLight.on { .diskLight.on {
background-image: url(../../../css/red-on-32.png); background-image: url("../../../css/red-on-32.png");
} }
} }

7
js/components/css/Header.module.css
View File

@ -25,12 +25,7 @@
margin: 0; margin: 0;
padding: 3px 0 0 10; padding: 3px 0 0 10;
color: black; color: black;
font-family: "Adobe Garamond Pro",Garamond,Times; font-family: "Adobe Garamond Pro", Garamond, Times, serif;
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
} }
.motter {
font-family: "Motter Tektura";
font-size: 12px;
}

58
js/components/css/Keyboard.module.css
View File

@ -12,7 +12,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 42px; height: 42px;
font-family: Helvetica; font-family: Helvetica, sans-serif;
width: 570px; width: 570px;
} }
@ -58,25 +58,27 @@
padding: 0; padding: 0;
width: 32px; width: 32px;
height: 32px; height: 32px;
background-color: #44372C; background-color: #44372c;
color: white; color: white;
text-align: center; text-align: center;
position: relative; position: relative;
border-left: 5px solid #65594D; border-left: 5px solid #65594d;
border-top: 5px solid #65594D; border-top: 5px solid #65594d;
border-right: 5px solid #110E0D; border-right: 5px solid #110e0d;
border-bottom: 5px solid #110E0D; border-bottom: 5px solid #110e0d;
/* border: 5px outset #66594E; */ /* border: 5px outset #66594E; */
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
.pressed { .pressed {
background-color: #22150A; background-color: #22150a;
border-left: 5px solid #44372C; border-left: 5px solid #44372c;
border-top: 5px solid #44372C; border-top: 5px solid #44372c;
border-right: 5px solid #000000; border-right: 5px solid #000;
border-bottom: 5px solid #000000; border-bottom: 5px solid #000;
/* border: 5px outset #44372C; */ /* border: 5px outset #44372C; */
} }
@ -179,7 +181,15 @@
} }
.key-OPEN_APPLE div { .key-OPEN_APPLE div {
background-image: url(../../../img/open-apple24.png); background-image: url("../../../img/open-apple24.png");
width: 24px;
height: 24px;
bottom: 1px;
left: 4px;
}
.key-CLOSED_APPLE div {
background-image: url("../../../img/closed-apple24.png");
width: 24px; width: 24px;
height: 24px; height: 24px;
bottom: 1px; bottom: 1px;
@ -190,22 +200,14 @@
display: none; display: none;
} }
.key-OPEN_APPLE.active div {
background-image: url(../../../img/open-apple24-green.png);
}
.key-CLOSED_APPLE div {
background-image: url(../../../img/closed-apple24.png);
width: 24px;
height: 24px;
bottom: 1px;
left: 4px;
}
.key-CLOSED_APPLE.active div {
background-image: url(../../../img/closed-apple24-green.png);
}
.key-CLOSED_APPLE span { .key-CLOSED_APPLE span {
display: none; display: none;
} }
.key-OPEN_APPLE.active div {
background-image: url("../../../img/open-apple24-green.png");
}
.key-CLOSED_APPLE.active div {
background-image: url("../../../img/closed-apple24-green.png");
}

9
js/components/css/Modal.module.css
View File

@ -7,7 +7,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(0,0,0,0.6); background: rgb(0 0 0 / 60%);
z-index: 1; z-index: 1;
} }
@ -30,10 +30,10 @@
font-size: 14px; font-size: 14px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: #44372C; background: #44372c;
color: #fff; color: #fff;
padding: 5px 11px; padding: 5px 11px;
border: 1px outset #66594E; border: 1px outset #66594e;
border-radius: 3px; border-radius: 3px;
user-select: none; user-select: none;
} }
@ -64,7 +64,8 @@
user-select: none; user-select: none;
} }
.modalFooter a[role="button"], .modalFooter button { .modalFooter a[role="button"],
.modalFooter button {
margin: 0 0 0 5px; margin: 0 0 0 5px;
min-width: 75px; min-width: 75px;
} }

2
js/components/css/Printer.module.css
View File

@ -1,6 +1,6 @@
.printer { .printer {
background: white; background: white;
font: fixed; font: monospace;
width: 60em; width: 60em;
padding: 5em; padding: 5em;
height: 60vh; height: 60vh;

2
js/components/css/ProgressModal.module.css
View File

@ -1,7 +1,7 @@
.progressContainer { .progressContainer {
width: 320px; width: 320px;
height: 20px; height: 20px;
background: #000 background: #000;
} }
.progressBar { .progressBar {

57
js/components/css/Screen.module.css
View File

@ -1,10 +1,9 @@
:global(.mono) { :global(.mono) {
filter: url('#green'); filter: url("#green");
} }
.display { .display {
margin: 5px auto 10px auto; margin: 5px auto 10px;
} }
:global(.full-page) .display { :global(.full-page) .display {
@ -15,7 +14,7 @@
padding: 0; padding: 0;
border: 0; border: 0;
position: fixed; position: fixed;
top:0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -24,19 +23,6 @@
margin: auto !important; margin: auto !important;
} }
:global(.full-page) .overscan {
margin: initial;
padding: 0;
width: initial;
height: 384px;
border: 0;
border-radius: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.overscan { .overscan {
margin: auto; margin: auto;
position: relative; position: relative;
@ -51,7 +37,6 @@
margin: initial; margin: initial;
padding: 0; padding: 0;
width: initial; width: initial;
height: 384px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
height: 100%; height: 100%;
@ -60,11 +45,18 @@
align-items: center; align-items: center;
} }
:global(.scanlines):after { :global(.scanlines)::after {
display: block; display: block;
pointer-events: none; pointer-events: none;
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px); background-image:
content: ''; repeating-linear-gradient(
to bottom,
transparent 0,
transparent 1px,
rgb(0 0 0 / 50%) 1px,
rgb(0 0 0 / 50%) 2px
);
content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -72,15 +64,20 @@
right: 0; right: 0;
} }
:global(.full-page) :global(.scanlines):after { :global(.full-page) :global(.scanlines)::after {
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 0.25vh, rgba(0,0,0,0.5) 0.25vh, rgba(0,0,0,0.5) 0.5vh); background-image:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 0.25vh,
rgb(0 0 0 / 50%) 0.25vh,
rgb(0 0 0 / 50%) 0.5vh
);
} }
.screen { .screen {
cursor: crosshair; cursor: crosshair;
-moz-image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;
-webkit-image-rendering: -webkit-optimize-contrast;
image-rendering: optimizeSpeed;
width: 592px; width: 592px;
height: 416px; height: 416px;
touch-action: manipulation; touch-action: manipulation;
@ -91,14 +88,6 @@
cursor: none; cursor: none;
} }
.screen:-webkit-full-screen {
background-color: black;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
:global(.full-page) .screen { :global(.full-page) .screen {
width: 100%; width: 100%;
height: 100%; height: 100%;

1575
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -6,7 +6,7 @@
"build": "rimraf dist/* && webpack --mode=production", "build": "rimraf dist/* && webpack --mode=production",
"dev": "webpack serve --mode=development", "dev": "webpack serve --mode=development",
"index": "bin/index > json/disks/index.js", "index": "bin/index > json/disks/index.js",
"lint": "eslint '**/*.js' '**/*.ts' '**/*.tsx'", "lint": "eslint '**/*.js' '**/*.ts' '**/*.tsx' && stylelint '**/*.css'",
"start": "webpack serve --mode=development --progress", "start": "webpack serve --mode=development --progress",
"test": "jest" "test": "jest"
}, },
@ -54,6 +54,9 @@
"raw-loader": "^4.0.0", "raw-loader": "^4.0.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"stylelint": "^14.9.1",
"stylelint-config-css-modules": "^4.1.0",
"stylelint-config-standard": "^26.0.0",
"ts-jest": "^27.0.5", "ts-jest": "^27.0.5",
"ts-loader": "^9.3.0", "ts-loader": "^9.3.0",
"typescript": "^4.7.3", "typescript": "^4.7.3",